:root{--navy:#071426;--navy-2:#0a1c32;--midnight:#0d223d;--blue:#3d7bff;--aqua:#43d6c5;--white:#f4f8fc;--muted:#8fa2b5;--line:rgba(255,255,255,.1);--pointer-x:50vw;--pointer-y:50vh}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:104px}
body{margin:0;background:var(--navy);color:var(--white);font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}
body:has(.modal-backdrop){overflow:hidden}
button,input,select{font:inherit}button,a{color:inherit}button{cursor:pointer}a{text-decoration:none}

/* Shared Bookessa select surface. The native select remains the form/value
   source while this control supplies the consistent animated list UI. */
.cs-native{position:relative;width:100%;min-width:0}.cs-native-source{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;border:0!important;white-space:nowrap!important}.cs-native .cs-btn{display:flex;align-items:center;gap:8px;width:100%;height:44px;padding:0 11px 0 13px;border:1px solid rgba(146,178,214,.2);border-radius:11px;background:rgba(255,255,255,.035);color:#f4f8fc;font:inherit;font-size:14px;font-weight:500;text-align:left;cursor:pointer;transition:border-color .18s,background .18s,box-shadow .22s}.cs-native .cs-btn:hover{border-color:rgba(146,178,214,.38);background:rgba(255,255,255,.055)}.cs-native .cs-btn.is-open{border-color:#5790ff;background:rgba(61,123,255,.08);box-shadow:0 0 0 3px rgba(61,123,255,.14)}.cs-native .cs-btn:disabled{cursor:not-allowed;opacity:.62}.cs-native .cs-cur{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cs-native .cs-btn.is-placeholder .cs-cur{color:#71869a}.cs-native .cs-chev{width:16px;height:16px;flex:none;fill:none;stroke:#8ca0b3;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .22s}.cs-native .cs-btn.is-open .cs-chev{transform:rotate(180deg);stroke:#a9c5ff}.cs-native-panel{position:absolute;z-index:120;left:0;top:calc(100% + 6px);min-width:100%;max-height:264px;overflow-y:auto;overscroll-behavior:contain;padding:6px;border:1px solid rgba(146,178,214,.2);border-radius:13px;background:#10243a;box-shadow:0 22px 55px rgba(0,0,0,.35);opacity:0;transform:translateY(-7px) scale(.975);transform-origin:top center;pointer-events:none;transition:opacity .18s ease-out,transform .24s cubic-bezier(.22,1,.36,1)}.cs-native-panel.cs-up{transform-origin:bottom center;transform:translateY(7px) scale(.975)}.cs-native-panel.is-open{opacity:1;transform:none;pointer-events:auto}.cs-native-panel .cs-opt{display:flex;align-items:center;gap:9px;width:100%;padding:10px;border:0;border-radius:9px;background:transparent;color:#dbe8f4;font:inherit;font-size:13px;font-weight:500;text-align:left;cursor:pointer;transition:background .12s,color .12s}.cs-native-panel .cs-opt:hover,.cs-native-panel .cs-opt:focus{outline:0;background:rgba(61,123,255,.13)}.cs-native-panel .cs-opt.is-sel{background:rgba(61,123,255,.18);color:#fff;font-weight:650}.cs-native-panel .cs-opt:disabled{cursor:not-allowed;opacity:.45}.cs-native-panel .cs-opt-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cs-native-panel .cs-opt-check{width:16px;height:16px;flex:none;fill:none;stroke:#69e0d3;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;opacity:0;transform:scale(.6);transition:opacity .14s,transform .14s}.cs-native-panel .cs-opt.is-sel .cs-opt-check{opacity:1;transform:none}.cs-native-panel .cs-group-label{display:block;padding:8px 10px 4px;color:#71869a;font-size:10px;font-weight:750;letter-spacing:.06em;text-transform:uppercase}.cs-native.is-invalid .cs-btn{border-color:#ff7186;box-shadow:0 0 0 3px rgba(255,113,134,.14)}
@media(prefers-reduced-motion:reduce){.cs-native .cs-btn,.cs-native .cs-chev,.cs-native-panel,.cs-native-panel .cs-opt-check{transition:none!important}}
.site-shell{min-height:100vh;min-height:100dvh;overflow-x:clip;position:relative;background:linear-gradient(180deg,#06111f 0%,#091a30 18%,#071426 43%,#0a1b30 68%,#06111f 100%)}
.site-shell:before{content:"";position:absolute;inset:0 0 auto;height:980px;opacity:.22;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:70px 70px;mask-image:linear-gradient(to bottom,black,transparent 90%)}
.pointer-glow{position:fixed;z-index:0;left:var(--pointer-x);top:var(--pointer-y);width:460px;height:460px;transform:translate(-50%,-50%);border-radius:50%;background:rgba(61,123,255,.05);filter:blur(45px);pointer-events:none}
.glass{background:linear-gradient(135deg,rgba(255,255,255,.105),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.12);box-shadow:0 24px 70px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.14);backdrop-filter:blur(25px);-webkit-backdrop-filter:blur(25px)}
.section{max-width:min(2100px,94vw);margin:0 auto;position:relative;z-index:1}.reveal{opacity:0;transform:translateY(28px);transition:opacity .85s ease,transform .85s cubic-bezier(.2,.7,.2,1)}.reveal.is-visible{opacity:1;transform:none}
.nav-wrap{position:fixed;z-index:50;top:0;left:0;width:100%;padding:18px clamp(20px,4vw,64px) 0;pointer-events:none}.nav{max-width:min(2100px,94vw);margin:auto;height:66px;border-radius:21px;display:flex;align-items:center;justify-content:space-between;padding:0 13px 0 19px;pointer-events:auto;background:rgba(7,20,38,.7)}.brand{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:700;letter-spacing:-.5px}.brand img{object-fit:contain}.nav-links{display:flex;gap:32px;font-size:13px;color:#b4c4d3}.nav-links a{transition:color .25s}.nav-links a:hover{color:white}.nav-actions{display:flex;align-items:center;gap:6px}.sign-in{font-size:13px;color:#a8bacb;padding:12px}.nav-cta,.button,.plan-button{border:0;display:inline-flex;align-items:center;justify-content:center;border-radius:14px;font-weight:700}.nav-cta{padding:13px 20px;background:#fff;color:#071426;font-size:13px}.menu-button{display:none;width:40px;height:40px;border:0;background:transparent;align-items:center;justify-content:center;flex-direction:column;gap:5px}.menu-button i{width:18px;height:1px;background:white}
.hero{min-height:100vh;min-height:100dvh;padding:108px clamp(24px,4vw,64px) 64px;display:grid;grid-template-columns:minmax(0,720px) minmax(560px,660px);align-items:center;gap:clamp(40px,4vw,88px);justify-content:center}.hero-copy{animation:heroIn .9s cubic-bezier(.2,.7,.2,1) both}.eyebrow,.section-intro>div,.assistant-copy>div{display:flex;align-items:center;gap:10px;color:#a8bbce;text-transform:uppercase;letter-spacing:.16em;font-weight:700;font-size:10px}.eyebrow{margin-bottom:25px}.eyebrow>span{width:8px;height:8px;border-radius:50%;background:var(--aqua);box-shadow:0 0 18px var(--aqua)}.hero h1{font-size:clamp(54px,6vw,82px);line-height:.95;letter-spacing:-.065em;margin:0;font-weight:620}.hero h1 em,.final-cta h2 em{font-style:normal;color:transparent;background:linear-gradient(90deg,#f9fcff 0%,#77a6ff 42%,#43d6c5 100%);background-clip:text;-webkit-background-clip:text}.hero-copy>p{max-width:565px;margin:30px 0;color:#a6b6c6;font-size:18px;line-height:1.65}.hero-actions{display:flex;gap:12px;flex-wrap:wrap}.button{min-height:54px;padding:0 21px;font-size:13px;transition:transform .25s,box-shadow .25s}.button:hover,.plan-button:hover,.nav-cta:hover{transform:translateY(-2px)}.button b{font-size:15px;margin-left:15px}.button-primary{background:linear-gradient(135deg,#fff,#dceaff);color:#071426;box-shadow:0 10px 38px rgba(61,123,255,.2)}.button-primary:hover{box-shadow:0 16px 46px rgba(61,123,255,.3)}.button-secondary{border:1px solid rgba(255,255,255,.13);color:#dbe7f2;background:rgba(255,255,255,.035);gap:18px}.button-secondary span{color:var(--aqua)}.hero-proof{margin-top:27px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:10px;letter-spacing:.02em;color:#8194a8}.hero-proof i{width:3px;height:3px;border-radius:50%;background:#496077}.proof-orb{width:18px;height:18px;display:inline-block;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff 0 5%,#43d6c5 16%,#12678a 55%,#071426 70%)}
.hero-product{position:relative;height:590px;display:flex;align-items:center;justify-content:center;perspective:1200px;animation:heroIn 1s .15s cubic-bezier(.2,.7,.2,1) both}.ambient{position:absolute;border-radius:50%}.ambient-one{width:340px;height:340px;background:rgba(61,123,255,.2);box-shadow:0 0 110px rgba(61,123,255,.22);top:80px;right:35px}.ambient-two{width:230px;height:230px;background:rgba(67,214,197,.12);box-shadow:0 0 100px rgba(67,214,197,.12);bottom:75px;left:0}.orbit{position:absolute;border:1px solid rgba(97,151,255,.1);border-radius:50%;transform:rotate(-20deg)}.orbit-one{width:570px;height:270px}.orbit-two{width:460px;height:510px}.booking-card{width:430px;min-height:470px;border-radius:30px;padding:25px;transform:rotateY(-5deg) rotateX(2deg);position:relative;z-index:2;transition:transform .5s,box-shadow .5s}.booking-card:hover{transform:rotateY(0) rotateX(0) translateY(-5px)}.booking-card.booked{box-shadow:0 30px 100px rgba(67,214,197,.14),inset 0 1px 0 rgba(255,255,255,.2)}.booking-head{display:flex;align-items:center;gap:12px;margin-bottom:24px}.studio-mark{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;font-weight:800;background:linear-gradient(135deg,#3d7bff,#43d6c5)}.booking-head div:nth-child(2){display:flex;flex-direction:column;gap:3px}.booking-head strong{font-size:14px}.booking-head span{font-size:10px;color:#8fa3b8}.booking-head>button{margin-left:auto;border:0;color:#8fa3b8;background:transparent}.service-select{background:rgba(3,14,28,.48);padding:17px;border:1px solid rgba(255,255,255,.08);border-radius:17px}.tiny-label{font-size:8px;letter-spacing:.14em;color:#6f8398}.service-row{display:flex;justify-content:space-between;margin-top:9px;font-size:12px}.service-row strong{color:#8ba6bf;font-weight:500}.calendar-row{display:flex;justify-content:space-between;align-items:center;margin:24px 0 18px;gap:4px}.calendar-row>button:first-child,.calendar-row>button:last-child,.cal-nav{border:0;background:transparent;color:#73879a;font-size:23px}
.cal-nav{min-width:32px;min-height:44px;border-radius:11px;transition:background .2s,color .2s}
.cal-nav:hover{background:rgba(255,255,255,.06);color:#dbe7f2}.date{border:0;width:50px;height:68px;border-radius:17px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:#8296aa;background:transparent;transition:.25s}.date span{font-size:8px;letter-spacing:.1em}.date strong{font-size:13px}.date:hover{background:rgba(255,255,255,.05)}.date.active{color:white;background:linear-gradient(145deg,#3478ff,#2b62d7);box-shadow:0 12px 32px rgba(61,123,255,.38)}.times{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.times button{padding:13px 4px;border-radius:11px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);color:#92a4b6;font-size:11px;transition:.2s}.times button:hover{border-color:rgba(255,255,255,.18)}.times .selected{color:#90f1e6;border-color:rgba(67,214,197,.55);background:rgba(67,214,197,.08)}.confirm-button{width:100%;margin-top:25px;border:0;border-radius:15px;min-height:53px;padding:0 19px;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(100deg,#ecf5ff,#cce2ff);color:#071426;font-size:12px;font-weight:700;transition:.3s}.booked .confirm-button{background:linear-gradient(100deg,#bff9ec,#43d6c5)}.status-card{position:absolute;z-index:4;right:0;top:60px;max-width:210px;padding:15px 18px;border-radius:17px;display:flex;align-items:center;gap:11px;animation:float 5s ease-in-out infinite}.status-icon{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;color:#061424;background:var(--aqua);transition:box-shadow .3s}.status-card.confirmed .status-icon{box-shadow:0 0 25px rgba(67,214,197,.7)}.status-card div{display:flex;flex-direction:column;gap:3px}.status-card strong{font-size:10px}.status-card div span{font-size:9px;color:#87a0b7}.mini-card{position:absolute;z-index:4;bottom:8px;left:0;width:158px;border-radius:18px;padding:16px;animation:float 6s ease-in-out infinite reverse}.mini-card>span{font-size:8px;letter-spacing:.12em;color:#7890a8;display:block}.mini-card>strong{font-size:11px;display:block;margin:6px 0 13px}.mini-bars{height:29px;display:flex;align-items:flex-end;gap:5px}.mini-bars i{width:17px;border-radius:4px;background:linear-gradient(#43d6c5,#267f89)}.mini-bars i:nth-child(1){height:35%}.mini-bars i:nth-child(2){height:68%}.mini-bars i:nth-child(3){height:50%}.mini-bars i:nth-child(4){height:90%}.mini-bars i:nth-child(5){height:75%}
.industry-rail{position:relative;z-index:2;border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;background:rgba(2,12,24,.35);padding:20px 0;color:#7f93a7}.industry-rail>div{width:max-content;display:flex;align-items:center;gap:32px;animation:marquee 28s linear infinite}.industry-rail span{font-size:9px;letter-spacing:.2em;font-weight:700}.industry-rail i{font-style:normal;color:#3d7bff;font-size:10px}
.journey,.product,.pricing{padding:150px clamp(24px,4vw,64px)}.section-intro{display:grid;grid-template-columns:.8fr 1.25fr .85fr;align-items:end;gap:45px;margin-bottom:70px}.section-number{color:var(--aqua)}.kicker{font-size:9px;letter-spacing:.17em;color:#91a5ba;font-weight:700}.section-intro h2,.assistant-copy h2,.faq-copy h2,.final-cta h2{font-size:clamp(42px,5vw,66px);line-height:1.02;letter-spacing:-.055em;margin:0;font-weight:590}.section-intro p,.assistant-copy>p,.faq-copy>p,.final-cta>p{color:#90a3b6;line-height:1.7;font-size:15px;margin:0}.journey-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.journey-card{min-height:330px;padding:35px 26px;position:relative;border-right:1px solid var(--line);transition:background .4s,transform .85s cubic-bezier(.2,.7,.2,1),opacity .85s}.journey-card:last-child{border-right:0}.journey-card:hover{background:linear-gradient(180deg,rgba(61,123,255,.09),transparent)}.journey-icon{width:58px;height:58px;border-radius:19px;border:1px solid rgba(255,255,255,.1);display:grid;place-items:center;background:rgba(255,255,255,.035);margin-bottom:70px;transition:.4s}.journey-card:hover .journey-icon{border-color:rgba(67,214,197,.3);box-shadow:0 0 30px rgba(67,214,197,.08);transform:translateY(-5px)}.journey-icon span{font-size:20px;color:#7ee8dc}.card-number{position:absolute;right:24px;top:45px;font-size:9px;color:#53677a}.journey-card h3{font-size:18px;letter-spacing:-.02em;margin:0 0 13px}.journey-card p{font-size:12px;line-height:1.65;color:#8093a6;margin:0}.card-line{position:absolute;bottom:0;left:26px;right:26px;height:2px}.card-line i{display:block;height:100%;width:0;background:linear-gradient(90deg,#3d7bff,#43d6c5);transition:width .45s}.journey-card:hover .card-line i{width:100%}
.product{padding-top:100px}.section-intro.centered{display:flex;flex-direction:column;align-items:center;text-align:center;gap:20px;max-width:720px;margin:0 auto 70px}.section-intro.centered>div{justify-content:center}.section-intro.centered p{max-width:460px}.dashboard-wrap{position:relative;padding:28px;border-radius:36px;background:linear-gradient(135deg,rgba(61,123,255,.08),rgba(67,214,197,.035));border:1px solid rgba(255,255,255,.07)}.dashboard-glow{position:absolute;width:78%;height:62%;left:11%;top:14%;background:radial-gradient(60% 60% at 38% 30%,#3d7bff,transparent 70%),radial-gradient(55% 55% at 76% 72%,#2ec2b4,transparent 70%);opacity:.20;filter:blur(110px);pointer-events:none}.bento-grid{display:grid;grid-template-columns:1.35fr .825fr .825fr;gap:16px;margin-top:16px}.bento{min-height:270px;border:1px solid var(--line);border-radius:22px;padding:28px;background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.015));position:relative;overflow:hidden}.bento h3{font-size:19px;line-height:1.2;letter-spacing:-.03em;margin:80px 0 10px}.bento p{font-size:11px;line-height:1.65;color:#7d91a5;margin:0}.bento-icon{width:46px;height:46px;border-radius:15px;display:grid;place-items:center;border:1px solid var(--line);color:#70dfd3;background:rgba(255,255,255,.035)}.bento-wide{display:grid;grid-template-columns:1fr 1fr;padding:33px}.bento-copy h3{font-size:31px;margin:20px 0 15px}.bento-copy p{max-width:270px}.mini-kicker{font-size:8px;color:#6e8295;letter-spacing:.15em}.theme-stack{position:relative}.theme-card{position:absolute;width:160px;height:200px;border-radius:18px;border:1px solid rgba(255,255,255,.15);box-shadow:0 18px 35px rgba(0,0,0,.2);padding:18px;font-size:8px;font-weight:700;letter-spacing:.2em}.theme-card i{position:absolute;left:18px;right:18px;bottom:18px;height:38px;border-radius:9px;background:rgba(255,255,255,.75)}.theme-one{right:30px;top:4px;background:linear-gradient(145deg,#173b75,#0e2442);transform:rotate(9deg)}.theme-two{right:70px;top:18px;background:linear-gradient(145deg,#197c75,#0d292f);transform:rotate(-3deg)}.theme-three{right:108px;top:32px;background:linear-gradient(145deg,#6b6af0,#1d2357);transform:rotate(-13deg)}
.assistant-section{padding:120px clamp(24px,4vw,64px);display:grid;grid-template-columns:minmax(0,620px) minmax(390px,460px);gap:clamp(48px,5vw,96px);align-items:center;justify-content:center}.assistant-section:before{content:"";position:absolute;top:0;height:100%;left:calc(50% - 50vw);width:100vw;background:radial-gradient(circle at 72% 48%,rgba(61,123,255,.13),transparent 45%),linear-gradient(90deg,rgba(4,14,27,.5),rgba(10,29,52,.4));z-index:-1}.assistant-copy h2{margin:24px 0}.assistant-copy>p{max-width:470px}.assistant-copy ul{list-style:none;padding:0;margin:30px 0;display:flex;flex-direction:column;gap:13px}.assistant-copy li{font-size:12px;color:#a2b3c3}.assistant-copy li span{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:rgba(67,214,197,.1);color:#66e4d5;margin-right:10px;font-size:9px}.text-link{font-size:12px;font-weight:700;display:inline-flex;gap:30px;border-bottom:1px solid rgba(255,255,255,.18);padding-bottom:8px}.text-link span{color:#43d6c5}.chat-stage{min-height:570px;display:grid;place-items:center;position:relative}.chat-orb{position:absolute;width:410px;height:410px;border-radius:50%;background:linear-gradient(135deg,rgba(61,123,255,.25),rgba(67,214,197,.18));box-shadow:0 0 130px rgba(61,123,255,.24)}.chat-window{width:390px;min-height:500px;border-radius:28px;position:relative;z-index:2;background:rgba(8,23,41,.77);overflow:hidden}.chat-head{height:76px;display:flex;align-items:center;padding:0 20px;border-bottom:1px solid var(--line);gap:11px}.assistant-avatar{width:38px;height:38px;border-radius:13px;display:grid;place-items:center;background:rgba(61,123,255,.15)}.chat-head>div:nth-child(2){display:flex;flex-direction:column;gap:4px}.chat-head strong{font-size:11px}.chat-head span{font-size:8px;color:#7b90a4}.chat-head span i{display:inline-block;width:5px;height:5px;border-radius:50%;background:#43d6c5;margin-right:4px}.chat-head>button{margin-left:auto;border:0;background:transparent;color:#6f8498;font-size:20px}.chat-body{min-height:295px;padding:20px;display:flex;flex-direction:column;gap:13px;background:rgba(4,15,29,.25)}.bot-message,.user-message{max-width:78%;font-size:9px;line-height:1.6;padding:12px 14px;border-radius:14px}.bot-message{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.06);color:#a9bbcb;border-bottom-left-radius:4px}.user-message{margin-left:auto;background:linear-gradient(135deg,#3d7bff,#2c5bc4);border-bottom-right-radius:4px}.rich-message{display:flex;flex-direction:column;gap:11px}.rich-message>button{border:1px solid rgba(67,214,197,.18);border-radius:10px;background:rgba(67,214,197,.06);color:white;padding:10px;display:flex;align-items:center;justify-content:space-between}.rich-message>button i{font-style:normal;display:flex;flex-direction:column;text-align:left}.rich-message small{font-size:6px;color:#6b8f94}.rich-message strong{font-size:11px;margin-top:2px}.rich-message b{font-size:7px;color:#74e7db}.typing{width:48px;padding:10px;display:flex;gap:4px;border-radius:12px;background:rgba(255,255,255,.05)}.typing i{width:4px;height:4px;border-radius:50%;background:#7f95aa;animation:typing 1s infinite}.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}.suggestions{padding:0 20px 13px;display:flex;gap:6px;overflow:hidden}.suggestions button{white-space:nowrap;border:1px solid rgba(255,255,255,.08);background:transparent;border-radius:20px;padding:7px 10px;color:#7e93a7;font-size:7px}.suggestions button:hover{color:white;border-color:rgba(255,255,255,.17)}.chat-input{margin:0 18px;border:1px solid var(--line);height:45px;border-radius:13px;display:flex;align-items:center;padding:0 7px 0 13px;color:#5e7387;font-size:8px}.chat-input button{margin-left:auto;width:31px;height:31px;border:0;border-radius:9px;background:#fff;color:#071426}.powered{height:35px;display:flex;align-items:center;justify-content:center;gap:5px;font-size:7px;color:#4e6377}.chat-label{position:absolute;right:0;top:96px;z-index:3;max-width:200px;padding:13px 15px;border-radius:15px;display:flex;align-items:center;gap:10px;animation:float 5s ease-in-out infinite}.chat-label>span{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:rgba(67,214,197,.14);color:#67e3d4;font-weight:800;font-size:10px}.chat-label>div{display:flex;flex-direction:column;gap:3px}.chat-label strong{font-size:9px}.chat-label small{font-size:7px;color:#6f8599}
.pricing{padding-bottom:120px}.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:stretch}.plan{border-radius:24px;padding:29px;position:relative;background:rgba(255,255,255,.035)}.plan.recommended{border-color:rgba(73,137,255,.55);background:linear-gradient(180deg,rgba(61,123,255,.13),rgba(255,255,255,.035));box-shadow:0 35px 80px rgba(19,69,165,.16),inset 0 1px 0 rgba(255,255,255,.2);transform:translateY(-12px)}.plan.recommended.is-visible{transform:translateY(-12px)}.recommend-label{position:absolute;top:-11px;left:50%;transform:translateX(-50%);padding:6px 13px;border-radius:20px;background:linear-gradient(90deg,#3d7bff,#43aacf);font-size:7px;letter-spacing:.14em;font-weight:800;box-shadow:0 8px 25px rgba(61,123,255,.3)}.plan-head>span{font-size:11px;text-transform:uppercase;letter-spacing:.13em;color:#9eb0c1}.plan-head p{height:38px;font-size:11px;line-height:1.5;color:#667c90;margin:10px 0 22px}.price{display:flex;align-items:flex-start;margin-bottom:24px}.price sup{font-size:18px;margin-top:9px;color:#c8d4df}.price strong{font-size:55px;line-height:1;letter-spacing:-.06em}.price>span{font-size:9px;color:#647a8e;margin:32px 0 0 8px}.plan-button{width:100%;height:47px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.045);font-size:10px;gap:30px;transition:.25s}.plan-button.primary{border:0;background:linear-gradient(135deg,#f8fbff,#cfe4ff);color:#071426}.plan-divider{height:1px;background:var(--line);margin:26px 0}.plan ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:13px}.plan li{font-size:10px;color:#9aabbb;display:flex;align-items:center;gap:9px}.plan li>span{color:#50dacb;font-size:9px}.credits-note{display:block;margin-top:22px;color:#5f7488;font-size:7px;line-height:1.5}.assurance{margin-top:34px;border:1px solid var(--line);border-radius:18px;min-height:82px;display:flex;align-items:center;justify-content:center;gap:45px;background:rgba(255,255,255,.02)}.assurance>div{display:flex;align-items:center;gap:10px}.assurance span{color:#55dccd;font-size:13px}.assurance strong{font-size:9px;color:#8ea2b5}.assurance>i{width:1px;height:22px;background:var(--line)}.pricing-fineprint{max-width:840px;text-align:center;margin:22px auto 0;color:#536a7e;font-size:8px;line-height:1.7}
.faq{padding:100px clamp(24px,4vw,64px) 150px;display:grid;grid-template-columns:minmax(0,420px) minmax(0,760px);gap:clamp(48px,6vw,110px);justify-content:center}.faq-copy .kicker{display:block;margin-bottom:25px}.faq-copy h2{font-size:50px}.faq-copy p{margin-top:22px;max-width:330px}.faq-list{border-top:1px solid var(--line)}.faq-list details{border-bottom:1px solid var(--line);padding:0 3px}.faq-list summary{list-style:none;min-height:74px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;font-size:12px}.faq-list summary::-webkit-details-marker{display:none}.faq-list summary i{font-style:normal;font-size:21px;color:#6f8498;transition:transform .3s}.faq-list details[open] summary i{transform:rotate(45deg);color:#43d6c5}.faq-list details p{font-size:10px;line-height:1.7;color:#7d91a5;max-width:580px;margin:-3px 45px 22px 0}
.final-cta{max-width:min(2100px,94vw);min-height:520px;border-radius:34px;border:1px solid rgba(255,255,255,.11);background:radial-gradient(circle at 50% 15%,rgba(61,123,255,.25),transparent 34%),linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.015));display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:70px 25px;overflow:hidden}.final-cta:before{content:"";position:absolute;width:760px;height:260px;border:1px solid rgba(67,214,197,.1);border-radius:50%;top:105px;transform:rotate(-7deg)}.final-cta>img{margin-bottom:18px;filter:drop-shadow(0 16px 30px rgba(61,123,255,.25))}.final-cta h2{margin:15px 0}.final-cta>p{max-width:470px;margin-bottom:25px}.final-cta>small{font-size:8px;color:#5f7488;margin-top:15px}.cta-light{position:absolute;width:330px;height:120px;top:-80px;background:#43d6c5;opacity:.18;filter:blur(60px)}
footer{max-width:min(2100px,94vw);margin:0 auto;padding:100px clamp(24px,3vw,48px) 35px;position:relative;z-index:2}.footer-main{display:grid;grid-template-columns:.8fr .9fr 1.3fr;align-items:start;border-bottom:1px solid var(--line);padding-bottom:60px}.footer-brand{font-size:24px}.footer-main>p{font-size:11px;color:#6b8195}.footer-links{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}.footer-links>div{display:flex;flex-direction:column;gap:12px}.footer-links strong{font-size:9px;text-transform:uppercase;letter-spacing:.12em;margin-bottom:5px}.footer-links a{font-size:9px;color:#71869a}.footer-links a:hover{color:white}.footer-bottom{padding-top:25px;display:flex;justify-content:space-between;color:#4f6579;font-size:8px}
.modal-backdrop{position:fixed;z-index:100;inset:0;background:rgba(1,8,17,.72);backdrop-filter:blur(14px);display:grid;place-items:center;padding:20px;animation:fade .25s}.trial-modal{width:min(500px,100%);border-radius:28px;padding:38px;background:rgba(8,24,43,.94);position:relative;box-shadow:0 40px 100px rgba(0,0,0,.45)}.modal-close{position:absolute;right:16px;top:14px;width:34px;height:34px;border:0;border-radius:50%;background:rgba(255,255,255,.05);color:#8297aa;font-size:20px}.trial-modal h2{font-size:34px;letter-spacing:-.045em;margin:16px 0 10px}.trial-modal>p{font-size:11px;line-height:1.7;color:#879aad;margin:0 0 25px}.trial-modal form{display:flex;flex-direction:column;gap:13px}.trial-modal label{font-size:8px;color:#8499ad;text-transform:uppercase;letter-spacing:.1em}.trial-modal input,.trial-modal select{display:block;width:100%;height:48px;margin-top:7px;border:1px solid var(--line);border-radius:11px;background:rgba(255,255,255,.045);padding:0 13px;color:white;outline:none}.trial-modal input:focus,.trial-modal select:focus{border-color:#3d7bff}.trial-modal option{color:#071426}.trial-modal form .plan-button{margin-top:5px}.trial-modal>small{display:block;text-align:center;color:#576e83;font-size:7px;margin-top:15px}.trial-success{text-align:center;padding:28px 5px 10px}.trial-success>span{width:62px;height:62px;display:grid;place-items:center;margin:0 auto;border-radius:50%;background:#43d6c5;color:#071426;font-size:25px;box-shadow:0 0 45px rgba(67,214,197,.25)}.trial-success h2{font-size:37px}.trial-success p{font-size:11px;color:#8297aa;line-height:1.6;margin-bottom:25px}
@keyframes float{50%{transform:translateY(-12px)}}@keyframes heroIn{from{transform:translateY(24px)}to{transform:none}}@keyframes marquee{to{transform:translateX(-50%)}}@keyframes typing{50%{opacity:.25;transform:translateY(-2px)}}@keyframes fade{from{opacity:0}to{opacity:1}}
@media(max-width:1100px){.hero{grid-template-columns:1fr;padding-top:155px;text-align:center;gap:25px}.eyebrow,.hero-actions,.hero-proof{justify-content:center}.hero-copy>p{margin-left:auto;margin-right:auto}.hero-product{height:570px;max-width:650px;width:100%;margin:auto}.booking-card{transform:none}.status-card{right:5%}.mini-card{left:5%}.section-intro{grid-template-columns:1fr;text-align:center}.section-intro>div{justify-content:center}.section-intro p{max-width:500px;margin:auto}.journey-grid{grid-template-columns:1fr 1fr}.journey-card:nth-child(2){border-right:0}.journey-card:nth-child(-n+2){border-bottom:1px solid var(--line)}.bento-grid{grid-template-columns:1fr 1fr}.bento-wide{grid-column:1/-1}.assistant-section{grid-template-columns:1fr;text-align:center;gap:30px}.assistant-copy>div{justify-content:center}.assistant-copy>p{margin:auto}.assistant-copy ul{align-items:center}.chat-stage{min-height:610px}.pricing-grid{gap:10px}.plan{padding:24px 18px}.faq{grid-template-columns:1fr;gap:50px}.faq-copy{text-align:center}.faq-copy p{margin-left:auto;margin-right:auto}.footer-main{grid-template-columns:1fr 1fr}.footer-links{grid-column:1/-1;margin-top:45px}}
@media(max-width:720px){.nav-wrap{padding:10px}.nav{height:60px;border-radius:18px}.nav-links{position:absolute;left:0;right:0;top:68px;border:1px solid var(--line);border-radius:18px;background:rgba(7,20,38,.97);backdrop-filter:blur(20px);padding:20px;flex-direction:column;align-items:center;opacity:0;visibility:hidden;transform:translateY(-8px);transition:.25s}.nav-links.open{opacity:1;visibility:visible;transform:none}.sign-in{display:none}.menu-button{display:flex}.hero{padding:130px 18px 65px}.hero h1{font-size:52px}.hero-copy>p{font-size:16px}.hero-product{height:520px}.booking-card{width:100%;max-width:430px;padding:19px;min-height:440px}.status-card{right:-3px;top:55px}.mini-card{left:-3px;bottom:30px}.date{width:44px}.calendar-row{gap:0}.journey,.product,.pricing{padding:100px 18px}.section-intro h2,.assistant-copy h2,.final-cta h2{font-size:43px}.journey-grid{grid-template-columns:1fr}.journey-card{border-right:0;border-bottom:1px solid var(--line)!important;min-height:270px}.journey-card:last-child{border-bottom:0!important}.journey-icon{margin-bottom:45px}.dashboard-wrap{padding:10px;border-radius:25px}.bento-grid{grid-template-columns:1fr}.bento-wide{display:block;min-height:450px}.theme-stack{height:230px;margin-top:20px}.theme-card{width:145px}.theme-one{right:10px}.theme-two{right:50px}.theme-three{right:90px}.assistant-section{padding:100px 18px}.chat-stage{min-height:570px}.chat-window{width:100%;max-width:390px}.chat-label{right:-7px;top:80px}.pricing-grid{grid-template-columns:1fr;gap:16px}.plan.recommended,.plan.recommended.is-visible{transform:none;order:-1}.assurance{padding:24px;gap:18px;flex-direction:column}.assurance>i{width:80%;height:1px}.pricing-fineprint{font-size:9px}.faq{padding:80px 18px 110px}.faq-copy h2{font-size:42px}.final-cta{margin:0 12px;min-height:490px}.footer-main{grid-template-columns:1fr}.footer-main>p{margin-top:18px}.footer-links{grid-template-columns:repeat(2,1fr)}.footer-bottom{flex-direction:column;gap:8px}.trial-modal{padding:32px 22px}}
@media(max-width:440px){.nav-cta{padding:11px 13px}.brand{font-size:18px}.hero h1{font-size:46px}.button{width:100%}.hero-proof{font-size:9px}.hero-product{height:485px}.booking-card{padding:16px;min-height:420px}.service-select{padding:14px}.date{width:39px;height:61px}.status-card{top:35px;padding:12px}.mini-card{display:none}.chat-label{display:none}.theme-three{right:70px}.section-intro h2,.assistant-copy h2,.final-cta h2{font-size:38px}.price strong{font-size:50px}}
/* Keep the customization artwork inside its own column so it never masks the copy. */
.bento-wide{grid-template-columns:minmax(0,1.15fr) minmax(190px,.85fr)}
.bento-copy{position:relative;z-index:4;min-width:0;padding-right:12px}
.theme-stack{z-index:1;min-width:0;isolation:isolate}
.theme-card{width:132px;height:184px;padding:17px}
.theme-card i{left:17px;right:17px;bottom:17px;height:35px}
.theme-one{right:-4px}
.theme-two{right:30px}
.theme-three{right:64px}
@media(max-width:720px){.bento-wide{display:block;min-height:450px}.bento-copy{padding-right:0}.theme-stack{height:230px;margin-top:20px}.theme-card{width:145px;height:200px}.theme-one{right:10px}.theme-two{right:50px}.theme-three{right:90px}}
@media(max-width:440px){.theme-three{right:70px}}
/* UX polish discovered during cross-device QA. */
:where(a,button,input,select,summary):focus-visible{outline:2px solid var(--aqua);outline-offset:4px}
.sign-in{border:0;background:transparent;cursor:pointer}
.booking-more{margin-left:auto;color:#8fa3b8}

.chat-input input{min-width:0;flex:1;border:0;outline:0;background:transparent;color:#dce8f2;font-size:9px}
.chat-input input::placeholder{color:#5e7387}
.service-reply{display:flex;flex-direction:column;gap:7px}
.service-reply strong{font-size:8px;color:#d8e6f2;font-weight:600}
.service-reply small{font-size:7px;color:#6f879a}
.chat-reopen{position:relative;z-index:2;width:320px;min-height:82px;border-radius:22px;color:white;display:flex;align-items:center;gap:13px;padding:16px 18px;text-align:left}
.chat-reopen>span:nth-child(2){display:flex;flex:1;flex-direction:column;gap:5px}
.chat-reopen strong{font-size:11px}.chat-reopen small{font-size:8px;color:#8297aa}.chat-reopen>b{color:#58dfd0}
.footer-placeholder{font-size:9px;color:#607589;display:flex;align-items:center;gap:7px}
.footer-placeholder small{font-size:6px;letter-spacing:.08em;text-transform:uppercase;color:#50cfc1;border:1px solid rgba(67,214,197,.18);border-radius:10px;padding:3px 5px}
.access-notice{position:fixed;z-index:90;right:24px;bottom:24px;min-width:300px;border-radius:17px;padding:17px 52px 17px 18px;background:rgba(8,24,43,.94);display:flex;flex-direction:column;gap:5px;animation:fade .25s}
.access-notice>span{font-size:7px;letter-spacing:.14em;text-transform:uppercase;color:#56dacc}.access-notice>strong{font-size:11px}.access-notice>button{position:absolute;right:12px;top:50%;transform:translateY(-50%);border:0;background:transparent;color:#8195a8;font-size:18px}
.plan-head p{color:#8296aa}.plan li{font-size:11px;color:#a9b8c6}.credits-note{font-size:8px;color:#71869a}.pricing-fineprint{font-size:9px;color:#657b8f}.faq-list details p{font-size:11px;color:#91a3b4}.bento p{font-size:12px;color:#91a3b4}.journey-card p{font-size:12px;color:#91a3b4}
.faq-list summary:focus-visible{border-radius:8px}
@media(max-width:840px) and (min-width:721px){.pricing-grid{grid-template-columns:1fr;max-width:560px;margin-inline:auto;gap:20px}.plan{padding:32px}.plan.recommended,.plan.recommended.is-visible{order:-1;transform:none}.plan-head p{height:auto}.pricing .assurance{margin-top:35px}}
@media(max-width:720px){.access-notice{left:18px;right:18px;bottom:18px;min-width:0}.chat-reopen{width:min(320px,100%)}.plan li{font-size:11px}.faq-list summary:focus-visible{outline-offset:2px}}

.audience{padding:140px clamp(24px,4vw,64px) 90px}.audience:before{content:"";position:absolute;width:720px;height:420px;left:50%;top:180px;transform:translateX(-50%);border-radius:50%;background:rgba(61,123,255,.09);filter:blur(110px);pointer-events:none}.audience-heading{display:grid;grid-template-columns:.72fr 1.25fr .83fr;align-items:end;gap:45px;margin-bottom:58px;position:relative}.audience-heading>div{display:flex;align-items:center;gap:10px;color:#a8bbce;text-transform:uppercase;letter-spacing:.16em;font-weight:700;font-size:10px}.audience-heading h2{font-size:clamp(42px,5vw,66px);line-height:1.02;letter-spacing:-.055em;margin:0;font-weight:590}.audience-heading>p{color:#90a3b6;line-height:1.7;font-size:15px;margin:0}.audience-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;position:relative}.audience-card{min-height:176px;border:1px solid var(--line);border-radius:20px;padding:23px;background:linear-gradient(145deg,rgba(255,255,255,.05),rgba(255,255,255,.015));display:grid;grid-template-columns:45px 1fr 18px;gap:15px;align-items:start;position:relative;overflow:hidden;transition:opacity .85s ease,transform .85s cubic-bezier(.2,.7,.2,1),border-color .3s,background .3s}.audience-card:before{content:"";position:absolute;width:120px;height:120px;left:-45px;top:-65px;border-radius:50%;background:rgba(67,214,197,.1);filter:blur(30px);opacity:0;transition:opacity .3s}.audience-card:hover{border-color:rgba(67,214,197,.26);background:linear-gradient(145deg,rgba(61,123,255,.09),rgba(255,255,255,.02))}.audience-card:hover:before{opacity:1}.audience-icon{width:45px;height:45px;border:1px solid rgba(255,255,255,.1);border-radius:14px;display:grid;place-items:center;background:rgba(255,255,255,.035);color:#69e1d4;font-size:14px}.audience-card h3{font-size:15px;letter-spacing:-.02em;margin:4px 0 10px}.audience-card p{font-size:11px;line-height:1.65;color:#8ca0b2;margin:0}.audience-arrow{color:#4e6478;font-size:11px;padding-top:7px;transition:color .3s,transform .3s}.audience-card:hover .audience-arrow{color:#62dfd1;transform:translate(2px,-2px)}.audience-note{min-height:72px;margin-top:12px;border:1px solid var(--line);border-radius:20px;display:flex;align-items:center;justify-content:center;gap:14px;padding:18px;text-align:center;background:rgba(255,255,255,.018)}.audience-note>span{font-size:20px;color:#58dacc}.audience-note p{margin:0;color:#73889c;font-size:11px;line-height:1.6}.audience-note strong{color:#b7c6d4;font-weight:600}
@media(max-width:1100px){.audience-heading{grid-template-columns:1fr;text-align:center;gap:20px}.audience-heading>div{justify-content:center}.audience-heading>p{max-width:520px;margin:auto}.audience-grid{grid-template-columns:1fr 1fr}}
@media(max-width:720px){.audience{padding:100px 18px 70px}.audience-heading h2{font-size:43px}.audience-grid{grid-template-columns:1fr}.audience-card{min-height:160px}.audience-note{align-items:flex-start;text-align:left}}
@media(max-width:440px){.audience-heading h2{font-size:38px}.audience-card{grid-template-columns:42px 1fr 14px;padding:20px;gap:12px}.audience-icon{width:42px;height:42px}}
/* content-visibility:auto was removed here. Off-screen sections were laid out at a
   guessed 850px, so smooth-scrolling to #product/#pricing/#faq computed the offset from
   placeholder heights and landed in the wrong place — worse the further down the target.
   The page is a handful of static sections; the perf win did not justify broken anchors. */
@media(pointer:coarse){.pointer-glow{display:none}}
.footer-links>div{gap:4px}.footer-links a,.footer-placeholder{min-height:28px;display:flex;align-items:center}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.status-card,.mini-card,.chat-label,.industry-rail>div,.typing i{animation:none}.reveal{opacity:1;transform:none;transition:none}.hero-copy,.hero-product{animation:none}.pointer-glow{display:none}}

[hidden]{display:none!important}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* Account, trial and billing flow */
.account-backdrop{background:radial-gradient(circle at 25% 18%,rgba(61,123,255,.18),transparent 31%),radial-gradient(circle at 78% 82%,rgba(67,214,197,.12),transparent 29%),rgba(1,8,17,.76);backdrop-filter:blur(20px) saturate(1.12);animation:accountBackdropIn .35s ease both}
.account-backdrop:before,.account-backdrop:after{content:"";position:fixed;width:260px;height:260px;border-radius:50%;filter:blur(80px);pointer-events:none;opacity:.22}.account-backdrop:before{left:8vw;top:10vh;background:#3d7bff}.account-backdrop:after{right:8vw;bottom:8vh;background:#43d6c5}
.account-modal{width:min(610px,100%);max-height:calc(100dvh - 40px);overflow:auto;overscroll-behavior:contain;isolation:isolate;padding:40px;border-color:rgba(124,164,202,.24);background:radial-gradient(circle at 80% 0,rgba(61,123,255,.13),transparent 33%),linear-gradient(145deg,rgba(10,30,54,.985),rgba(5,17,32,.985));box-shadow:0 45px 120px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.025) inset,0 0 80px rgba(61,123,255,.07);animation:accountModalIn .58s cubic-bezier(.16,1,.3,1) both}
.account-modal:before{content:"";position:absolute;z-index:-1;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(125deg,rgba(255,255,255,.055),transparent 27%,transparent 72%,rgba(67,214,197,.035))}
.account-modal::-webkit-scrollbar{width:7px}.account-modal::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:10px}
.account-modal .modal-close{transition:color .25s,background .25s,transform .35s}.account-modal .modal-close:hover{color:#fff;background:rgba(255,255,255,.1);transform:rotate(90deg)}
.account-eyebrow{margin:0 0 12px!important;color:#59dfd0!important;font-size:8px!important;font-weight:800!important;letter-spacing:.16em!important;text-transform:uppercase!important}
.auth-shell{animation:authContentIn .48s cubic-bezier(.2,.75,.2,1) both;transition:opacity .17s ease,transform .17s ease}
.auth-shell>h2,.account-panel>h2,.account-result h2{font-size:clamp(31px,6vw,43px);line-height:1;letter-spacing:-.055em;margin:0 0 13px}
.auth-shell>p:not(.account-eyebrow){max-width:500px;margin:0 0 22px;color:#91a5b8;font-size:12px;line-height:1.65}
.auth-tabs{position:relative;display:grid;grid-template-columns:1fr 1fr;padding:4px;margin-bottom:22px;overflow:hidden;border:1px solid rgba(126,157,188,.2);border-radius:14px;background:rgba(0,0,0,.16);box-shadow:0 12px 35px rgba(0,0,0,.12) inset}
.auth-tabs:before{content:"";position:absolute;left:4px;top:4px;width:calc(50% - 4px);height:calc(100% - 8px);border-radius:10px;background:linear-gradient(115deg,#f7faff,#dceaff);box-shadow:0 9px 25px rgba(0,0,0,.24),0 0 30px rgba(80,142,255,.13);transition:transform .42s cubic-bezier(.16,1,.3,1)}.auth-tabs.signin-active:before{transform:translateX(100%)}
.auth-tabs button{position:relative;z-index:1;min-height:42px;border:0;border-radius:9px;background:transparent;color:#7f94a8;font-size:12px;font-weight:750;transition:color .28s,transform .28s}.auth-tabs button:hover{color:#c4d1dc}.auth-tabs button.active{color:#071426;background:transparent;box-shadow:none}.auth-tabs button:active{transform:scale(.985)}
.account-form{display:flex;flex-direction:column;gap:13px}.field-pair{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.account-form>*{animation:authItemIn .5s cubic-bezier(.2,.75,.2,1) both}.account-form>*:nth-child(1){animation-delay:.05s}.account-form>*:nth-child(2){animation-delay:.09s}.account-form>*:nth-child(3){animation-delay:.13s}.account-form>*:nth-child(4){animation-delay:.17s}.account-form>*:nth-child(5){animation-delay:.21s}
.account-form label,.workspace-plan-picker label{font-size:9px;color:#8499ad;text-transform:uppercase;letter-spacing:.11em;transition:color .22s}.account-form label:focus-within,.workspace-plan-picker label:focus-within{color:#69dfd2}
.account-form input,.account-form select,.workspace-plan-picker select{display:block;width:100%;height:54px;margin-top:8px;border:1px solid rgba(124,151,179,.28);border-radius:13px;background:linear-gradient(135deg,rgba(255,255,255,.055),rgba(255,255,255,.028));padding:0 15px;color:#f7fbff;outline:none;font-size:16px;font-weight:520;line-height:1.2;transition:border-color .24s,background .24s,box-shadow .24s,transform .24s}
.account-form input::placeholder{color:#71869a;font-size:14px;font-weight:450}.account-form input:hover,.account-form select:hover,.workspace-plan-picker select:hover{border-color:rgba(122,162,204,.46);background:rgba(255,255,255,.062)}
.account-form input:focus,.account-form select:focus,.workspace-plan-picker select:focus{border-color:#5790ff;background:rgba(61,123,255,.095);box-shadow:0 0 0 4px rgba(61,123,255,.1),0 12px 30px rgba(0,0,0,.13);transform:translateY(-1px)}
.account-form input:-webkit-autofill{-webkit-text-fill-color:#f7fbff;box-shadow:0 0 0 1000px #10263e inset;font-size:16px}.account-form select,.workspace-plan-picker select{font-size:15px}
.account-form option,.workspace-plan-picker option{color:#071426}.account-form .plan-button{position:relative;overflow:hidden;margin-top:6px;min-height:52px;transition:transform .25s,box-shadow .25s}.account-form .plan-button:before{content:"";position:absolute;inset:-2px;width:42%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);transform:translateX(-160%) skewX(-18deg);transition:transform .7s ease}.account-form .plan-button:hover{transform:translateY(-2px);box-shadow:0 15px 38px rgba(61,123,255,.2)}.account-form .plan-button:hover:before{transform:translateX(310%) skewX(-18deg)}.account-form .plan-button span{display:inline-block;transition:transform .25s}.account-form .plan-button:hover span{transform:translateX(4px)}
.auth-trust{display:flex;justify-content:center;gap:9px;flex-wrap:wrap;margin-top:18px;color:#71879b;font-size:8px}.auth-trust span{padding:7px 10px;border:1px solid rgba(126,158,188,.1);border-radius:999px;background:rgba(255,255,255,.018)}.auth-trust span:before{color:#43d6c5}
.form-feedback{margin:2px 0 0;color:#ff9f9f;font-size:10px;line-height:1.5;text-align:center}
.form-feedback.success{color:#7de7db}
.verification-shell{text-align:center}.verification-mark{width:58px;height:58px;display:grid;place-items:center;margin:0 auto 21px;border:1px solid rgba(67,214,197,.3);border-radius:18px;background:linear-gradient(145deg,rgba(61,123,255,.18),rgba(67,214,197,.12));color:#63e0d2;font-size:19px;box-shadow:0 18px 55px rgba(0,0,0,.2)}
.verification-shell>p:not(.account-eyebrow){margin-inline:auto!important}.verification-shell>p strong{color:#dce8f4;font-weight:650}
.verification-form{max-width:410px;margin:26px auto 0}.verification-form>label{text-align:left}.account-form input.verification-code{height:72px;padding-left:24px;text-align:center;font-size:29px;font-weight:750;letter-spacing:.32em;font-variant-numeric:tabular-nums;color:#f5f9ff;border-color:rgba(84,150,255,.33);background:linear-gradient(135deg,rgba(61,123,255,.1),rgba(67,214,197,.045))}.verification-code::placeholder{color:#3d5369}
.verification-hint{margin:-5px 0 2px!important;color:#637a8f!important;font-size:8px!important;text-align:center}.verification-actions{display:flex;justify-content:center;gap:18px;margin-top:18px}.verification-actions button{min-height:32px;border:0;background:transparent;color:#78a8ff;font-size:9px}.verification-actions button:last-child{color:#7f94a8}.verification-actions button:disabled{color:#536a7f}
.button-loader{width:14px;height:14px;display:inline-block;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:accountSpin .65s linear infinite}
button:disabled,select:disabled,input:disabled{cursor:not-allowed;opacity:.62;transform:none!important}
.account-loading{min-height:280px;display:grid;place-items:center;align-content:center;gap:14px;color:#8da1b5}.account-loading .button-loader{width:24px;height:24px;color:#43d6c5}.account-loading p{font-size:10px}
.account-panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:30px}.account-panel-head>div{display:flex;align-items:center;gap:8px;color:#77e2d6;font-size:8px;font-weight:800;letter-spacing:.13em}.account-status-dot{width:7px;height:7px;border-radius:50%;background:#43d6c5;box-shadow:0 0 15px rgba(67,214,197,.75)}
.account-signout{border:0;background:transparent;color:#7f93a7;font-size:10px}.account-signout:hover{color:white}
.account-lead{display:flex;flex-direction:column;gap:6px;margin:0 0 25px!important;color:#8ea2b5!important}.account-lead strong{color:#f4f8fc;font-size:14px;text-transform:capitalize}.account-lead span{font-size:10px;line-height:1.5}
.workspace-plan-picker{margin-bottom:17px}.workspace-plan-picker select{font-size:11px;text-transform:capitalize}
.workspace-access-card{display:grid;grid-template-columns:1fr auto;border:1px solid var(--line);border-radius:17px;overflow:hidden;margin-bottom:18px;background:rgba(0,0,0,.13)}
.workspace-access-card>div{display:flex;flex-direction:column;gap:5px;padding:14px 16px;border-bottom:1px solid var(--line)}.workspace-access-card>i{width:42px;display:grid;place-items:center;border-left:1px solid var(--line);border-bottom:1px solid var(--line);color:#657b90;font-style:normal;font-size:10px}.workspace-access-card>div:nth-last-of-type(1),.workspace-access-card>i:last-child{border-bottom:0}.workspace-access-card span{font-size:7px;letter-spacing:.11em;color:#61778c}.workspace-access-card strong{font-size:11px;text-transform:capitalize}.workspace-access-card i.complete{color:#43d6c5}
.account-primary{width:100%;min-height:52px}.account-assurance{margin:12px 0 0!important;text-align:center;color:#647b90!important;font-size:8px!important;line-height:1.5!important}
.checkout-confirmation{margin:-10px 0 22px;padding:11px 13px;border:1px solid rgba(67,214,197,.25);border-radius:11px;background:rgba(67,214,197,.08);color:#8cf0e4;font-size:9px;line-height:1.45}
.account-result{text-align:center;padding:22px 8px 12px}.account-result>span{width:64px;height:64px;display:grid;place-items:center;margin:0 auto 22px;border-radius:50%;background:#43d6c5;color:#071426;font-size:25px;box-shadow:0 0 45px rgba(67,214,197,.25)}.account-result.error>span{background:#ff9f9f}.account-result>p:not(.account-eyebrow){max-width:430px;margin:0 auto 24px;color:#879caf;font-size:11px;line-height:1.65}.account-result .plan-button{min-width:150px}
.account-modal :focus-visible{outline:2px solid #69a0ff;outline-offset:2px}
@keyframes accountSpin{to{transform:rotate(360deg)}}
@keyframes accountBackdropIn{from{opacity:0;backdrop-filter:blur(0) saturate(1)}to{opacity:1}}
@keyframes accountModalIn{from{opacity:0;transform:translateY(24px) scale(.965);filter:blur(7px)}to{opacity:1;transform:none;filter:none}}
@keyframes authContentIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes authItemIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@media(max-width:620px){.modal-backdrop{padding:10px;align-items:start;overflow-y:auto}.account-modal{max-height:none;margin:auto;padding:31px 20px;border-radius:22px}.field-pair{grid-template-columns:1fr}.auth-trust{flex-direction:column;align-items:center;gap:8px}.account-panel-head{margin-bottom:24px}.account-form input.verification-code{font-size:25px;letter-spacing:.25em}.verification-actions{flex-direction:column;gap:2px}}
@media(prefers-reduced-motion:reduce){.button-loader{animation-duration:1.4s}.account-backdrop,.account-modal,.auth-shell,.account-form>*{animation:none}.auth-shell,.auth-tabs:before,.account-form input,.account-form select,.account-form .plan-button{transition:none}.account-form .plan-button:before{display:none}}

/* Signed-in navigation */
.sign-in.authenticated{display:inline-flex;align-items:center;gap:9px;padding:6px 10px 6px 7px;border:1px solid rgba(134,166,198,.17);border-radius:13px;background:rgba(255,255,255,.035);color:#dce8f3;transition:border-color .25s,background .25s,transform .25s}
.sign-in.authenticated:hover{transform:translateY(-1px);border-color:rgba(67,214,197,.35);background:rgba(67,214,197,.06)}
.nav-account-avatar{width:29px;height:29px;display:grid;place-items:center;border-radius:9px;background:linear-gradient(145deg,#4385ff,#42d6c5);box-shadow:0 8px 22px rgba(61,123,255,.24);color:#061629;font-size:12px;font-weight:850}
.nav-account-name{max-width:118px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;font-weight:700}
.has-session .nav-cta{background:linear-gradient(135deg,#eff6ff,#cde1ff)}

/* Elevated workspace activation */
.account-modal.workspace-modal{width:min(940px,100%);padding:27px;overflow:auto;background:radial-gradient(circle at 76% -8%,rgba(61,123,255,.18),transparent 34%),radial-gradient(circle at -4% 86%,rgba(67,214,197,.08),transparent 27%),linear-gradient(145deg,rgba(9,29,52,.992),rgba(4,15,29,.995))}
.workspace-modal .modal-close{z-index:10;right:20px;top:19px;width:38px;height:38px}
.workspace-panel{animation:workspaceIn .55s cubic-bezier(.16,1,.3,1) both}
.workspace-utility{min-height:39px;display:flex;align-items:center;justify-content:space-between;padding-right:50px;margin-bottom:20px}
.workspace-status-pill{display:inline-flex;align-items:center;gap:9px;min-height:30px;padding:0 11px;border:1px solid rgba(67,214,197,.15);border-radius:999px;background:rgba(67,214,197,.045);color:#7fe8dc;font-size:7px;font-weight:850;letter-spacing:.15em}
.workspace-status-pill .account-status-dot{width:6px;height:6px}
.workspace-utility .account-signout{display:flex;align-items:center;gap:7px;min-height:32px;padding:0 8px}.workspace-utility .account-signout span{color:#4ed9ca;transition:transform .25s}.workspace-utility .account-signout:hover span{transform:translate(2px,-2px)}
.workspace-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;padding:0 4px 23px;border-bottom:1px solid rgba(133,164,194,.13)}
.workspace-hero>div:first-child{min-width:0}.workspace-hero .account-eyebrow{margin-bottom:10px!important}.workspace-hero h2{margin:0;font-size:clamp(37px,5vw,56px);line-height:.95;letter-spacing:-.06em;font-weight:650;overflow-wrap:anywhere}
.workspace-hero>div:first-child>p:last-child{display:flex;align-items:baseline;gap:12px;margin:15px 0 0}.workspace-hero>div:first-child>p:last-child strong{color:#eef6fd;font-size:13px;text-transform:capitalize}.workspace-hero>div:first-child>p:last-child span{color:#7f94a8;font-size:9px;line-height:1.45}
.workspace-readiness{flex:0 0 auto;min-width:145px;padding:15px 17px;border:1px solid rgba(111,157,202,.17);border-radius:16px;background:linear-gradient(145deg,rgba(61,123,255,.09),rgba(67,214,197,.035));text-align:right;box-shadow:0 18px 42px rgba(0,0,0,.12)}
.workspace-readiness span,.workspace-readiness strong{display:block}.workspace-readiness span{color:#64e0d2;font-size:17px;font-weight:780;letter-spacing:-.03em;text-transform:capitalize}.workspace-readiness strong{margin-top:4px;color:#8398ab;font-size:7px;font-weight:650;letter-spacing:.06em;text-transform:uppercase}
.workspace-grid{display:grid;grid-template-columns:minmax(0,1.38fr) minmax(282px,.72fr);gap:14px;margin-top:14px}
.workspace-setup-card,.activation-summary{position:relative;overflow:hidden;border:1px solid rgba(130,162,194,.16);border-radius:20px;background:rgba(0,0,0,.13)}
.workspace-setup-card{padding:20px}
.workspace-section-head{display:flex;align-items:center;gap:12px}.workspace-section-head>span{width:28px;height:28px;display:grid;place-items:center;flex:0 0 auto;border:1px solid rgba(87,146,255,.25);border-radius:9px;background:rgba(61,123,255,.08);color:#7ba8ff;font-size:8px;font-weight:800}.workspace-section-head h3{margin:0 0 4px;font-size:12px;letter-spacing:-.015em}.workspace-section-head p{margin:0;color:#6f8599;font-size:8px;line-height:1.4}
.workspace-plan-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:15px 0 21px}
.workspace-plan-option{position:relative;min-width:0;min-height:96px;padding:16px 11px 11px;border:1px solid rgba(128,158,188,.15);border-radius:14px;background:linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.012));color:#e9f2fa;text-align:left;overflow:hidden;transition:transform .26s,border-color .26s,background .26s,box-shadow .26s}
.workspace-plan-option:not(:disabled):hover{transform:translateY(-2px);border-color:rgba(104,154,255,.38);background:rgba(61,123,255,.07)}
.workspace-plan-option.selected{border-color:rgba(67,214,197,.55);background:radial-gradient(circle at 90% 0,rgba(67,214,197,.15),transparent 42%),linear-gradient(145deg,rgba(61,123,255,.12),rgba(67,214,197,.04));box-shadow:0 13px 32px rgba(0,0,0,.16),0 0 0 1px rgba(67,214,197,.06) inset}
.workspace-plan-option.selected:after{content:"✓";position:absolute;right:9px;top:9px;width:18px;height:18px;display:grid;place-items:center;border-radius:50%;background:#50d9ca;color:#051728;font-size:9px;font-weight:900;box-shadow:0 5px 16px rgba(67,214,197,.22)}
.workspace-plan-option.recommended:not(.selected){border-color:rgba(91,142,255,.27)}
.workspace-plan-badge{position:absolute;left:9px;top:7px;color:#69a4ff;font-size:5px;font-weight:850;letter-spacing:.1em;text-transform:uppercase}.workspace-plan-option.selected .workspace-plan-badge{color:#6de4d7}
.workspace-plan-copy,.workspace-plan-price{display:flex;flex-direction:column}.workspace-plan-copy{gap:4px;margin-top:7px}.workspace-plan-copy strong{font-size:11px}.workspace-plan-copy small{min-height:20px;color:#71869a;font-size:6.5px;line-height:1.4}.workspace-plan-price{flex-direction:row;align-items:baseline;gap:3px;margin-top:4px}.workspace-plan-price b{font-size:16px;letter-spacing:-.045em}.workspace-plan-price small{color:#647b8f;font-size:6px}
.workspace-plan-option:disabled{opacity:.72}.workspace-plan-option:disabled.selected{opacity:1}
.launch-head{padding-top:18px;border-top:1px solid rgba(130,162,194,.1)}
.launch-path{display:grid;grid-template-columns:1fr 18px 1fr 18px 1fr;align-items:center;margin-top:16px}
.launch-path>b{height:1px;background:linear-gradient(90deg,rgba(67,214,197,.45),rgba(87,139,201,.16))}
.launch-step{display:flex;align-items:center;min-width:0;gap:8px}.launch-step>i{width:25px;height:25px;display:grid;place-items:center;flex:0 0 auto;border:1px solid rgba(118,149,180,.17);border-radius:8px;color:#637b91;font-size:7px;font-style:normal;font-weight:850}.launch-step>span{display:flex;min-width:0;flex-direction:column;gap:3px}.launch-step strong{font-size:7px;line-height:1.2}.launch-step small{color:#61778b;font-size:5.8px;line-height:1.3}.launch-step.complete>i{border-color:rgba(67,214,197,.25);background:rgba(67,214,197,.09);color:#5ce0d2}.launch-step.current>i{border-color:rgba(83,145,255,.5);background:#3979ed;color:white;box-shadow:0 7px 20px rgba(61,123,255,.24)}.launch-step.current strong{color:#a9c8ff}
.activation-summary{display:flex;flex-direction:column;padding:22px;background:radial-gradient(circle at 100% 0,rgba(61,123,255,.17),transparent 42%),linear-gradient(155deg,rgba(15,41,72,.84),rgba(5,20,37,.94));box-shadow:0 22px 60px rgba(0,0,0,.17)}
.summary-orbit{position:absolute;width:180px;height:180px;right:-90px;top:-90px;border:1px solid rgba(95,150,255,.15);border-radius:50%;box-shadow:0 0 0 28px rgba(95,150,255,.025),0 0 0 57px rgba(67,214,197,.018);pointer-events:none}
.activation-summary .account-eyebrow{position:relative;margin-bottom:12px!important}.summary-plan-line{position:relative;display:flex;align-items:center;justify-content:space-between;gap:10px}.summary-plan-line h3{margin:0;font-size:24px;letter-spacing:-.045em}.summary-plan-line>span{padding:5px 7px;border:1px solid rgba(67,214,197,.19);border-radius:999px;background:rgba(67,214,197,.055);color:#64dfd2;font-size:5.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.summary-price{position:relative;display:flex;align-items:flex-start}.summary-price sup{margin:8px 3px 0 0;color:#86a0b7;font-size:11px}.summary-price strong{font-size:45px;line-height:1;letter-spacing:-.065em}.summary-price>span{align-self:flex-end;margin:0 0 6px 7px;color:#647a8e;font-size:7px}.summary-divider{height:1px;margin:15px 0;background:linear-gradient(90deg,rgba(67,214,197,.25),rgba(255,255,255,.06),transparent)}
.activation-benefits{display:flex;flex-direction:column;gap:10px;margin:0 0 19px;padding:0;list-style:none}.activation-benefits li{display:flex;align-items:flex-start;gap:8px;color:#8ba0b3;font-size:7.5px;line-height:1.4}.activation-benefits li i{width:15px;height:15px;display:grid;place-items:center;flex:0 0 auto;border-radius:50%;background:rgba(67,214,197,.1);color:#5adfd1;font-size:6px;font-style:normal}.activation-benefits li strong{color:#d8e5f0;font-weight:700}
.activation-summary .account-primary{min-height:49px;margin-top:auto;justify-content:space-between;padding:0 17px;border-radius:13px;box-shadow:0 12px 35px rgba(61,123,255,.18);transition:transform .25s,box-shadow .25s}.activation-summary .account-primary:hover{box-shadow:0 17px 42px rgba(61,123,255,.28)}.activation-summary .account-primary>span{flex:1;text-align:center;font-size:10px}.activation-summary .account-primary>b{font-size:13px;transition:transform .25s}.activation-summary .account-primary:hover>b{transform:translateX(3px)}
.activation-summary .account-assurance{margin:10px 0 0!important;font-size:6.5px!important}.activation-summary .form-feedback{margin-top:9px}
.checkout-confirmation{display:flex;align-items:center;gap:10px;margin:-7px 0 18px;padding:10px 12px}.checkout-confirmation>span{width:24px;height:24px;display:grid;place-items:center;flex:0 0 auto;border-radius:8px;background:rgba(67,214,197,.14);font-size:9px}.checkout-confirmation>div{display:flex;flex-direction:column;gap:2px}.checkout-confirmation strong{font-size:8px}.checkout-confirmation small{color:#739183;font-size:6.5px}
@keyframes workspaceIn{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}

@media(max-width:900px){.nav-account-name{display:none}.sign-in.authenticated{padding-right:7px}.workspace-grid{grid-template-columns:1fr}.activation-summary{min-height:360px}.workspace-plan-option{min-height:90px}}
@media(max-width:720px){.sign-in.authenticated{display:flex}.has-session .nav-cta{padding-inline:13px}.account-modal.workspace-modal{width:100%;padding:22px 16px}.workspace-modal .modal-close{right:14px;top:13px}.workspace-utility{padding-right:42px;margin-bottom:15px}.workspace-hero{align-items:flex-start}.workspace-hero>div:first-child>p:last-child{flex-direction:column;gap:5px}.workspace-readiness{min-width:118px;padding:12px}.workspace-plan-options{grid-template-columns:1fr}.workspace-plan-option{min-height:74px;display:flex;align-items:center;justify-content:space-between;padding:15px}.workspace-plan-copy{margin-top:0}.workspace-plan-copy small{min-height:0}.workspace-plan-price{margin-top:0;margin-right:25px}.workspace-plan-badge{left:auto;right:38px}.launch-path{grid-template-columns:1fr;gap:7px}.launch-path>b{width:1px;height:12px;margin-left:12px;background:linear-gradient(rgba(67,214,197,.45),rgba(87,139,201,.16))}.launch-step strong{font-size:8px}.launch-step small{font-size:6.5px}}
@media(max-width:480px){.has-session .nav-cta{font-size:0;width:42px;height:42px;padding:0;border-radius:12px}.has-session .nav-cta:after{content:"↗";font-size:14px}.workspace-hero{flex-direction:column;gap:16px}.workspace-readiness{width:100%;text-align:left}.workspace-hero h2{font-size:40px}.activation-summary{min-height:380px}}
@media(prefers-reduced-motion:reduce){.workspace-panel{animation:none}.workspace-plan-option,.activation-summary .account-primary,.sign-in.authenticated{transition:none}}

/* Workspace activation — compact checkout composition */
.account-modal.workspace-modal{width:min(790px,100%);max-height:calc(100dvh - 34px);padding:0;border-radius:27px;background:radial-gradient(circle at 85% -15%,rgba(65,129,255,.15),transparent 36%),linear-gradient(145deg,#0a2038,#061524);box-shadow:0 45px 130px rgba(0,0,0,.64),0 0 0 1px rgba(255,255,255,.025) inset}
.workspace-modal .modal-close{right:19px;top:18px;width:34px;height:34px;background:rgba(255,255,255,.055)}
.workspace-activation{padding:22px 25px 17px}
.activation-topbar{display:flex;align-items:center;justify-content:space-between;min-height:36px;padding-right:43px;margin-bottom:24px}
.activation-brand{display:flex;align-items:center;gap:9px}.activation-brand img{object-fit:contain}.activation-brand strong{font-size:12px;letter-spacing:-.02em}
.activation-top-actions{display:flex;align-items:center;gap:13px}.activation-top-actions .account-signout{padding:7px 0;color:#7f94a7;font-size:8px}.activation-top-actions .account-signout:hover{color:#e9f2f9}
.workspace-status-pill{min-height:26px;padding:0 9px;gap:7px;border-color:rgba(67,214,197,.16);background:rgba(67,214,197,.045);font-size:6px;letter-spacing:.12em}.workspace-status-pill i{width:5px;height:5px;border-radius:50%;background:#4ad9c9;box-shadow:0 0 10px rgba(67,214,197,.65)}
.activation-heading{max-width:585px;margin-bottom:22px}.activation-heading .account-eyebrow{margin-bottom:9px!important}.activation-heading h2{margin:0;color:#f4f8fc;font-size:39px;line-height:1.02;letter-spacing:-.055em;font-weight:620}.activation-heading h2 em{font-style:normal;color:transparent;background:linear-gradient(90deg,#8db5ff,#55dfd0);background-clip:text;-webkit-background-clip:text}.activation-heading>p:last-child{max-width:535px;margin:11px 0 0;color:#8397aa;font-size:10px;line-height:1.6}
.activation-layout{display:grid;grid-template-columns:minmax(0,1.24fr) minmax(250px,.76fr);gap:12px;align-items:stretch}
.activation-choice{padding:18px;border:1px solid rgba(129,160,190,.14);border-radius:18px;background:rgba(0,0,0,.12)}
.activation-choice-head{display:flex;align-items:flex-start;justify-content:space-between;gap:15px}.activation-choice-head h3{margin:0 0 4px;font-size:12px}.activation-choice-head p{margin:0;color:#70859a;font-size:7.5px}.activation-choice-head>span{padding:5px 7px;border-radius:999px;background:rgba(255,255,255,.035);color:#70879b;font-size:5.5px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.activation-choice .workspace-plan-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:14px 0}
.activation-choice .workspace-plan-option{display:flex;min-width:0;min-height:61px;flex-direction:column;align-items:flex-start;justify-content:center;padding:10px 11px;border:1px solid rgba(127,157,187,.14);border-radius:11px;background:rgba(255,255,255,.022);box-shadow:none;overflow:visible}
.activation-choice .workspace-plan-option:not(:disabled):hover{transform:translateY(-1px);border-color:rgba(108,157,255,.4);background:rgba(61,123,255,.065)}
.activation-choice .workspace-plan-option.selected{border-color:#d7e7f7;background:linear-gradient(145deg,#f8fbff,#dceaff);box-shadow:0 10px 27px rgba(0,0,0,.19);color:#071426}
.activation-choice .workspace-plan-option.selected:after{display:none}
.activation-choice .workspace-plan-copy{display:flex;flex-direction:row;align-items:center;gap:5px;margin:0}.activation-choice .workspace-plan-copy strong{font-size:9px}.activation-choice .workspace-plan-badge{position:static;min-height:0;padding:2px 4px;border-radius:999px;background:rgba(61,123,255,.12);color:#6c9eff;font-size:4.5px;line-height:1;text-transform:uppercase}.activation-choice .workspace-plan-option.selected .workspace-plan-badge{background:rgba(7,20,38,.08);color:#3166c8}
.activation-choice .workspace-plan-price{display:flex;flex-direction:row;align-items:baseline;gap:3px;margin:5px 0 0}.activation-choice .workspace-plan-price b{font-size:11px;letter-spacing:-.025em}.activation-choice .workspace-plan-price small{color:#6a8196;font-size:5px}.activation-choice .workspace-plan-option.selected .workspace-plan-price small{color:#607389}
.trial-promise{display:grid;grid-template-columns:62px 1fr;align-items:center;gap:14px;padding:14px;border:1px solid rgba(67,214,197,.14);border-radius:14px;background:linear-gradient(120deg,rgba(67,214,197,.065),rgba(61,123,255,.045))}.trial-number{height:56px;display:grid;place-items:center;align-content:center;border:1px solid rgba(67,214,197,.2);border-radius:12px;background:rgba(67,214,197,.06)}.trial-number strong{color:#66e1d3;font-size:24px;line-height:.9;letter-spacing:-.06em}.trial-number span{margin-top:5px;color:#6c938e;font-size:5px;font-weight:750;letter-spacing:.08em;text-transform:uppercase}.trial-promise>div:last-child>strong{display:block;margin-bottom:5px;font-size:9px}.trial-promise p{margin:0;color:#74899c;font-size:7px;line-height:1.5}
.trial-timeline{display:grid;grid-template-columns:1fr 12px 1fr 12px 1fr;align-items:start;margin-top:16px;padding:0 3px}.trial-timeline>b{height:1px;margin-top:5px;background:linear-gradient(90deg,rgba(67,214,197,.3),rgba(107,146,184,.15))}.trial-timeline>div{display:grid;grid-template-columns:8px 1fr;column-gap:6px}.trial-timeline i{width:7px;height:7px;margin-top:2px;border:2px solid #4fd8c9;border-radius:50%;background:#092039;box-shadow:0 0 0 3px rgba(67,214,197,.06)}.trial-timeline strong,.trial-timeline span{grid-column:2;display:block}.trial-timeline strong{font-size:6.5px}.trial-timeline span{margin-top:3px;color:#657b8f;font-size:5.5px;line-height:1.3}
.activation-summary{display:flex;min-height:330px;flex-direction:column;padding:19px;border:0;border-radius:18px;background:linear-gradient(150deg,#f7fbff,#dbeaff);box-shadow:0 20px 48px rgba(0,0,0,.2);color:#071426;overflow:hidden}
.activation-summary:before{content:"";position:absolute;width:145px;height:145px;right:-74px;top:-78px;border:1px solid rgba(61,123,255,.12);border-radius:50%;box-shadow:0 0 0 25px rgba(61,123,255,.025),0 0 0 51px rgba(61,123,255,.018)}
.activation-summary .summary-plan-line{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:13px;border-bottom:1px solid rgba(7,20,38,.1)}.activation-summary .summary-plan-line>span{display:flex;flex-direction:column;gap:3px;padding:0;border:0;border-radius:0;background:none;color:inherit;font-size:inherit;font-weight:inherit;letter-spacing:normal;text-transform:none}.activation-summary .summary-plan-line>span small{color:#66809b;font-size:5px;font-weight:800;letter-spacing:.12em}.activation-summary .summary-plan-line>span strong{font-size:13px}.activation-summary .summary-plan-line>b{display:flex;align-items:baseline;font-style:normal}.activation-summary .summary-plan-line>b>span{margin-right:2px;color:#627991;font-size:7px}.activation-summary .summary-plan-line>b>i{font-size:16px;font-style:normal;letter-spacing:-.04em}.activation-summary .summary-plan-line>b>small{margin-left:2px;color:#698096;font-size:5px;font-weight:500}

.due-today{position:relative;padding:11px 13px;border-radius:12px;background:rgba(7,20,38,.055)}.due-today span,.due-today strong,.due-today small{display:block}.due-today>span{color:#57708a;font-size:5px;font-weight:850;letter-spacing:.13em}.due-today strong{margin:2px 0 1px;font-size:35px;line-height:1;letter-spacing:-.065em}.due-today small{color:#647c92;font-size:5.5px}
.activation-summary .activation-benefits{gap:8px;margin:13px 0}.activation-summary .activation-benefits li{gap:7px;color:#50677d;font-size:6.7px}.activation-summary .activation-benefits li i{width:14px;height:14px;background:rgba(8,96,91,.09);color:#087e75;font-size:5.5px}
.activation-summary .account-primary{min-height:44px;margin-top:auto;padding:0 14px;border-radius:11px;background:#071426;color:#f5f8fb;box-shadow:0 10px 25px rgba(7,20,38,.2)}.activation-summary .account-primary:hover{box-shadow:0 14px 32px rgba(7,20,38,.28)}.activation-summary .account-primary>span{font-size:8px}.activation-summary .account-primary>b{color:#66dfd2}
.activation-summary .account-assurance{color:#61778b!important;font-size:5.5px!important}.activation-summary .form-feedback{color:#a84040}
.activation-footer{display:flex;align-items:center;justify-content:center;gap:11px;margin-top:14px;color:#647b8f;font-size:6px}.activation-footer i{width:2px;height:2px;border-radius:50%;background:#4f667b}.activation-footer span:first-child{color:#7c93a8}
.workspace-activation .checkout-confirmation{margin:0 0 17px}

@media(max-width:760px){.account-modal.workspace-modal{width:min(600px,100%)}.activation-layout{grid-template-columns:1fr}.activation-summary{min-height:310px}.activation-heading h2{font-size:35px}}
@media(max-width:620px){.account-modal.workspace-modal{max-height:none;margin:auto}.workspace-activation{padding:18px 15px 14px}.workspace-modal .modal-close{right:13px;top:12px}.activation-topbar{padding-right:38px;margin-bottom:20px}.activation-brand strong{display:none}.activation-top-actions{gap:8px}.activation-heading{margin-bottom:18px}.activation-heading h2{font-size:33px}.activation-heading>p:last-child{font-size:9px}.activation-choice{padding:14px}.activation-choice .workspace-plan-options{grid-template-columns:1fr}.activation-choice .workspace-plan-option{min-height:54px;flex-direction:row;align-items:center;justify-content:space-between;padding:10px 12px}.activation-choice .workspace-plan-price{margin:0 22px 0 0}.activation-choice .workspace-plan-badge{position:static}.trial-timeline{grid-template-columns:1fr;gap:8px}.trial-timeline>b{width:1px;height:8px;margin:0 0 0 3px}.trial-promise{grid-template-columns:56px 1fr}.activation-footer{flex-wrap:wrap}.activation-footer i{display:none}}

/* =========================================================================
   AUTH MODAL REFRESH — scoped to .account-backdrop / .account-modal .auth-shell
   Real typeface (Sora display + Inter text), calmer surfaces, one bold action.
   ========================================================================= */
.account-backdrop{background:radial-gradient(130% 90% at 50% -12%,rgba(61,123,255,.15),transparent 55%),rgba(3,10,20,.82);backdrop-filter:blur(16px) saturate(1.05);-webkit-backdrop-filter:blur(16px) saturate(1.05)}
.account-backdrop:before,.account-backdrop:after{display:none}

.account-modal{font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;width:min(500px,100%);padding:44px 44px 34px;border-radius:26px;border:1px solid rgba(146,178,214,.16);background:linear-gradient(180deg,rgba(14,32,56,.985),rgba(7,19,35,.99));box-shadow:0 40px 110px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.03) inset,0 1px 0 rgba(255,255,255,.08) inset}
.account-modal:before{content:"";position:absolute;z-index:-1;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(92% 62% at 50% -8%,rgba(61,123,255,.14),transparent 60%)}
.account-modal .modal-close{right:18px;top:18px;width:34px;height:34px;border-radius:11px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07);color:#93a6ba;font-size:17px;line-height:1}
.account-modal .modal-close:hover{background:rgba(255,255,255,.1);color:#fff;transform:none}

.account-eyebrow{display:inline-flex!important;align-items:center;gap:8px;margin:0 0 14px!important;color:#5fe0d1!important;font-size:11px!important;font-weight:700!important;letter-spacing:.14em!important}
.account-eyebrow:before{content:"";width:6px;height:6px;border-radius:50%;background:#43d6c5;box-shadow:0 0 12px rgba(67,214,197,.75)}

.account-modal .auth-shell>h2{font-family:'Sora','Inter',sans-serif;font-size:29px;line-height:1.12;letter-spacing:-.02em;font-weight:600;margin:0 0 10px;color:#f4f8fc}
.account-modal .auth-shell>p:not(.account-eyebrow){margin:0 0 24px;max-width:none;color:#93a7ba;font-size:14px;line-height:1.6}

.auth-tabs{padding:5px;margin-bottom:24px;border-radius:14px;border:1px solid rgba(146,178,214,.12);background:rgba(0,0,0,.22);box-shadow:none}
.auth-tabs:before{left:5px;top:5px;width:calc(50% - 5px);height:calc(100% - 10px);border-radius:10px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.09);box-shadow:0 6px 18px rgba(0,0,0,.3)}
.auth-tabs.signin-active:before{transform:translateX(100%)}
.auth-tabs button{min-height:40px;font-family:'Inter',sans-serif;font-size:13px;font-weight:600;color:#8298ac}
.auth-tabs button:hover{color:#c4d1dc}
.auth-tabs button.active{color:#f4f8fc}

.account-form{gap:15px}
.field-pair{gap:12px}
.account-form label{font-family:'Inter',sans-serif;font-size:12px;font-weight:550;letter-spacing:.01em;text-transform:none;color:#9fb2c4}
.account-form input,.account-form select{height:52px;margin-top:8px;border-radius:12px;border:1px solid rgba(146,178,214,.2);background:rgba(255,255,255,.035);padding:0 15px;color:#f4f8fc;font-family:'Inter',sans-serif;font-size:15px;font-weight:450;box-shadow:none;transition:border-color .2s,background .2s,box-shadow .2s}
.account-form input::placeholder{color:#6f8498;font-weight:400}
.account-form input:hover,.account-form select:hover{border-color:rgba(146,178,214,.34);background:rgba(255,255,255,.05)}
.account-form input:focus,.account-form select:focus{border-color:#5790ff;background:rgba(61,123,255,.06);box-shadow:0 0 0 3px rgba(61,123,255,.16);transform:none}

.account-form .plan-button.primary{height:auto;min-height:54px;margin-top:10px;border-radius:13px;border:0;background:linear-gradient(120deg,#4d88ff,#2f63e6);color:#fff;font-family:'Inter',sans-serif;font-size:15px;font-weight:700;letter-spacing:.01em;gap:10px;box-shadow:0 12px 30px rgba(61,123,255,.3)}
.account-form .plan-button.primary:hover{transform:translateY(-1px);box-shadow:0 16px 42px rgba(61,123,255,.4)}
.account-form .plan-button.primary span{font-size:16px;color:#fff}
.account-form .plan-button:before{display:none}

.auth-trust{gap:8px;margin-top:20px;color:#8497aa;font-size:12px}
.auth-trust span{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;border:1px solid rgba(146,178,214,.14);background:rgba(255,255,255,.025)}
.auth-trust span:before{content:attr(data-trust-icon);color:#43d6c5;font-weight:700;font-size:11px}
.account-modal .form-feedback{font-size:12px}

@media(max-width:620px){.account-modal{width:min(440px,100%);padding:30px 22px 26px;border-radius:22px}.account-modal .auth-shell>h2{font-size:26px}.field-pair{grid-template-columns:1fr}}

/* =========================================================================
   ACTIVATION / CHECKOUT REFRESH — one dark system, legible type, one bold CTA.
   Removes the clashing white summary card + white selected chip.
   ========================================================================= */
.account-modal.workspace-modal{width:min(860px,100%)}
.workspace-activation{padding:26px 30px 20px}

/* Topbar */
.activation-brand strong{font-size:15px}
.activation-top-actions .account-signout{font-size:12px}
.workspace-status-pill{min-height:30px;padding:0 12px;gap:8px;font-size:9px;letter-spacing:.12em}
.workspace-status-pill i{width:6px;height:6px}

/* Heading */
.activation-heading{max-width:640px;margin-bottom:26px}
.activation-heading h2{font-family:'Sora','Inter',sans-serif;font-size:42px;line-height:1.02;letter-spacing:-.03em;font-weight:600}
.activation-heading>p:last-child{max-width:560px;margin-top:12px;color:#93a7ba;font-size:14px;line-height:1.55}

/* Layout */
.activation-layout{grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr);gap:16px;align-items:start}

/* Choice card */
.activation-choice{padding:22px;border-radius:20px;border-color:rgba(129,160,190,.16)}
.activation-choice-head h3{margin:0 0 5px;font-size:17px;letter-spacing:-.02em}
.activation-choice-head p{color:#8397aa;font-size:12px}
.activation-choice-head>span{padding:6px 10px;background:rgba(255,255,255,.045);color:#8ba0b3;font-size:9px;letter-spacing:.08em}

/* Plan chips — dark, brand-tinted selection (no white island) */
.activation-choice .workspace-plan-options{gap:10px;margin:18px 0}
.activation-choice .workspace-plan-option{min-height:82px;padding:14px 15px;border-radius:14px;border-color:rgba(127,157,187,.16);background:rgba(255,255,255,.028)}
.activation-choice .workspace-plan-option:not(:disabled):hover{transform:translateY(-2px);border-color:rgba(108,157,255,.42);background:rgba(61,123,255,.07)}
.activation-choice .workspace-plan-option.selected{border-color:rgba(67,214,197,.5);background:radial-gradient(circle at 88% -10%,rgba(67,214,197,.16),transparent 55%),linear-gradient(150deg,rgba(61,123,255,.2),rgba(67,214,197,.06));box-shadow:0 12px 30px rgba(0,0,0,.28),0 0 0 1px rgba(67,214,197,.18) inset;color:#f4f8fc}
.activation-choice .workspace-plan-option.selected:after{display:grid;content:"✓";position:absolute;right:9px;top:9px;width:17px;height:17px;place-items:center;border-radius:50%;background:#50d9ca;color:#051728;font-size:9px;font-weight:900}
.activation-choice .workspace-plan-copy{gap:7px}
.activation-choice .workspace-plan-copy strong{font-size:14px}
.activation-choice .workspace-plan-badge{padding:3px 7px;border-radius:999px;background:rgba(97,150,255,.16);color:#8db5ff;font-size:8px;letter-spacing:.06em}
.activation-choice .workspace-plan-option.selected .workspace-plan-badge{background:rgba(67,214,197,.16);color:#7fe8dc}
.activation-choice .workspace-plan-price{margin-top:8px}
.activation-choice .workspace-plan-price b{font-size:18px;letter-spacing:-.03em}
.activation-choice .workspace-plan-price small{color:#8397aa;font-size:10px}
.activation-choice .workspace-plan-option.selected .workspace-plan-price small{color:#93a7ba}

/* Trial promise + timeline */
.trial-promise{grid-template-columns:66px 1fr;gap:16px;padding:16px;border-radius:15px}
.trial-number{height:60px}
.trial-number strong{font-size:27px}
.trial-number span{margin-top:6px;font-size:8px}
.trial-promise>div:last-child>strong{margin-bottom:6px;font-size:14px}
.trial-promise p{color:#8397aa;font-size:12px;line-height:1.5}
.trial-timeline{margin-top:18px}
.trial-timeline i{width:8px;height:8px}
.trial-timeline>b{margin-top:6px}
.trial-timeline strong{font-size:11px}
.trial-timeline span{margin-top:4px;color:#7a8fa3;font-size:9.5px}

/* Summary card — unified dark glass */
.activation-summary{padding:24px;border:1px solid rgba(126,163,204,.18);border-radius:20px;background:linear-gradient(160deg,rgba(19,42,72,.92),rgba(9,24,43,.96));color:#e9f2fa;box-shadow:0 24px 60px rgba(0,0,0,.4)}
.activation-summary:before{border-color:rgba(95,150,255,.16);box-shadow:0 0 0 26px rgba(95,150,255,.03),0 0 0 53px rgba(67,214,197,.02)}
.activation-summary .summary-plan-line{padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.1)}
.activation-summary .summary-plan-line>span small{color:#7fe8dc;font-size:10px;letter-spacing:.13em}
.activation-summary .summary-plan-line>span strong{color:#f4f8fc;font-size:22px}
.activation-summary .summary-plan-line>b>span{color:#9fb2c4;font-size:14px}
.activation-summary .summary-plan-line>b>i{color:#f4f8fc;font-size:32px}
.activation-summary .summary-plan-line>b>small{color:#9fb2c4;font-size:12px}

/* Due today — dark tinted (was washed-out light) */
.due-today{padding:15px 16px;border-radius:13px;border:1px solid rgba(126,163,204,.16);background:rgba(61,123,255,.1)}
.due-today>span{color:#7fe8dc;font-size:10px;font-weight:800;letter-spacing:.13em}
.due-today strong{margin:5px 0 2px;color:#f4f8fc;font-size:36px}
.due-today small{color:#93a7ba;font-size:12px}

/* Benefits */
.activation-summary .activation-benefits{gap:12px;margin:18px 0}
.activation-summary .activation-benefits li{gap:10px;align-items:center;color:#a7bacb;font-size:13px;line-height:1.4}
.activation-summary .activation-benefits li i{width:19px;height:19px;background:rgba(67,214,197,.15);color:#5adfd1;font-size:10px}

/* CTA — the one bright element */
.activation-summary .account-primary{min-height:54px;padding:0 20px;border-radius:13px;background:linear-gradient(120deg,#4d88ff,#2f63e6);color:#fff;box-shadow:0 14px 32px rgba(61,123,255,.32)}
.activation-summary .account-primary:hover{box-shadow:0 18px 44px rgba(61,123,255,.42)}
.activation-summary .account-primary>span{font-size:14px;font-weight:700}
.activation-summary .account-primary>b{color:#fff;font-size:16px}
.activation-summary .account-assurance{margin:14px 0 0!important;color:#8497aa!important;font-size:11px!important}
.activation-summary .form-feedback{color:#ff9f9f}

/* Footer */
.activation-footer{gap:14px;margin-top:18px;color:#7a8fa3;font-size:10px}
.activation-footer span:first-child{color:#93a7ba}
.activation-footer i{width:3px;height:3px}

@media(max-width:820px){.account-modal.workspace-modal{width:min(600px,100%)}.activation-layout{grid-template-columns:1fr;gap:12px}.activation-heading h2{font-size:34px}.workspace-activation{padding:20px 18px 16px}}
@media(max-width:560px){.activation-choice .workspace-plan-options{grid-template-columns:1fr}.activation-choice .workspace-plan-option{min-height:58px;flex-direction:row;align-items:center;justify-content:space-between}.activation-choice .workspace-plan-option.selected:after{display:none}.activation-heading h2{font-size:30px}.trial-timeline{grid-template-columns:1fr;gap:10px}.trial-timeline>b{display:none}}

/* =========================================================================
   PLAN CHIPS — per-tier identity, fixed Popular badge, checkout micro-motion.
   ========================================================================= */
.activation-choice .workspace-plan-option{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:0;min-height:114px;padding:14px 14px 13px}
.activation-choice .workspace-plan-copy{display:flex;align-items:center;gap:6px;flex-wrap:wrap;width:100%;min-width:0;margin:0;padding-right:22px}
.activation-choice .workspace-plan-copy strong{font-size:14px}
.workspace-plan-tagline{margin-top:6px;color:#7f95a9;font-size:9.5px;line-height:1.35;letter-spacing:.01em}
.activation-choice .workspace-plan-price{margin:auto 0 0;padding-top:10px}
.activation-choice .workspace-plan-price b{font-size:18px;letter-spacing:-.03em}
.activation-choice .workspace-plan-price small{color:#8397aa;font-size:10px}

/* Popular badge — inline, compact, never overflows */
.activation-choice .workspace-plan-badge{position:static;flex:0 0 auto;margin:0;padding:2px 7px;border-radius:999px;background:rgba(97,150,255,.18);color:#8db5ff;font-size:7.5px;line-height:1.5;letter-spacing:.05em;white-space:nowrap}

/* Per-tier feeling (unselected): Basic clean · Premium blue · Pro aqua/advanced */
.activation-choice .workspace-plan-option[data-tier="premium"]:not(.selected){border-color:rgba(91,142,255,.34);background:linear-gradient(162deg,rgba(61,123,255,.1),rgba(255,255,255,.02))}
.activation-choice .workspace-plan-option[data-tier="pro"]:not(.selected){border-color:rgba(67,214,197,.3);background:linear-gradient(162deg,rgba(67,214,197,.075),rgba(255,255,255,.02))}
.activation-choice .workspace-plan-option[data-tier="premium"]:not(.selected) .workspace-plan-price b{color:#9cc0ff}
.activation-choice .workspace-plan-option[data-tier="pro"]:not(.selected) .workspace-plan-price b{color:#6fe3d5}
.activation-choice .workspace-plan-option[data-tier="pro"]:not(.selected) .workspace-plan-tagline{color:#7fb8ae}
.activation-choice .workspace-plan-option[data-tier="premium"]:not(.selected) .workspace-plan-tagline{color:#8ba3c4}
/* hover wins over tier tint (declared after) */
.activation-choice .workspace-plan-option:not(:disabled):hover{transform:translateY(-2px);border-color:rgba(108,157,255,.45);background:rgba(61,123,255,.09)}

/* Selected: unified aqua identity across tiers */
.activation-choice .workspace-plan-option.selected .workspace-plan-tagline{color:#a7c6d6}
.activation-choice .workspace-plan-option.selected .workspace-plan-price b{color:#eafff9}
.activation-choice .workspace-plan-option.selected .workspace-plan-badge{background:rgba(67,214,197,.18);color:#7fe8dc}

/* ---- Checkout micro-motion ---- */
@keyframes planIn{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
@keyframes summaryItemIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@keyframes checkPop{0%{transform:scale(0) rotate(-14deg)}62%{transform:scale(1.12) rotate(0)}100%{transform:scale(1)}}
@keyframes valueSwap{0%{opacity:.3;transform:translateY(3px)}100%{opacity:1;transform:none}}
.activation-choice .workspace-plan-option{animation:planIn .5s cubic-bezier(.2,.75,.2,1) backwards}
.activation-choice .workspace-plan-option:nth-child(1){animation-delay:.09s}
.activation-choice .workspace-plan-option:nth-child(2){animation-delay:.15s}
.activation-choice .workspace-plan-option:nth-child(3){animation-delay:.21s}
.activation-summary>*{animation:summaryItemIn .52s cubic-bezier(.2,.75,.2,1) backwards}
.activation-summary>*:nth-child(1){animation-delay:.12s}
.activation-summary>*:nth-child(2){animation-delay:.17s}
.activation-summary>*:nth-child(3){animation-delay:.22s}
.activation-summary>*:nth-child(4){animation-delay:.27s}
.activation-summary>*:nth-child(5){animation-delay:.32s}
.activation-summary>*:nth-child(6){animation-delay:.37s}
.activation-choice .workspace-plan-option.selected:after{animation:checkPop .34s cubic-bezier(.2,.8,.2,1) both}
.activation-summary .summary-plan-line>span strong{display:inline-block}
.activation-summary .value-swap{animation:valueSwap .3s ease both}

@media(prefers-reduced-motion:reduce){.activation-choice .workspace-plan-option,.activation-summary>*,.activation-choice .workspace-plan-option.selected:after,.activation-summary .value-swap{animation:none}}

/* Fix: keep the checkout button loader circular + centered with its label
   (the button uses justify-content:space-between and forces flex:1 on its spans) */
.activation-summary .account-primary .button-busy{display:inline-flex;flex:1;align-items:center;justify-content:center;gap:9px;font-size:14px;font-weight:700}
.activation-summary .account-primary .button-busy .button-loader{flex:0 0 auto;width:18px;height:18px;margin:0;color:#fff}

/* =========================================================================
   CHECKOUT SUCCESS — a tier-aware celebration (Basic → Premium → Pro glow up)
   ========================================================================= */
.account-modal.checkout-modal{width:min(500px,100%);padding:44px 40px 34px;text-align:center;overflow:hidden}
.checkout-modal .modal-close{z-index:5}
.checkout-success{--cs-1:#43d6c5;--cs-2:#5bd3c8;--cs-3:#43d6c5;--cs-glow:rgba(67,214,197,.42)}
.checkout-success.cs-premium{--cs-1:#5790ff;--cs-2:#43d6c5;--cs-3:#7fb2ff;--cs-glow:rgba(87,144,255,.5)}
.checkout-success.cs-pro{--cs-1:#8db5ff;--cs-2:#43d6c5;--cs-3:#a98bff;--cs-glow:rgba(130,150,255,.55)}

.cs-stage{position:relative;height:154px;display:grid;place-items:center;margin:4px 0 24px}

/* Badge + drawn check */
.cs-badge{position:relative;z-index:3;width:94px;height:94px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:radial-gradient(circle at 32% 26%,rgba(255,255,255,.5),transparent 58%),linear-gradient(140deg,var(--cs-1),var(--cs-2));box-shadow:0 14px 44px var(--cs-glow),0 0 0 1px rgba(255,255,255,.18) inset;animation:csBadgeIn .72s cubic-bezier(.2,1.25,.3,1) both}
.cs-check{width:46px;height:46px;fill:none;stroke:#04141f;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.cs-check path{stroke-dasharray:40;stroke-dashoffset:40;animation:csDraw .5s .42s cubic-bezier(.6,.2,.2,1) forwards}

/* Expanding rings */
.cs-rings{position:absolute;z-index:1;inset:0;display:grid;place-items:center}
.cs-rings i{position:absolute;width:94px;height:94px;border-radius:50%;border:1.5px solid var(--cs-1);opacity:0;animation:csRing 2.4s ease-out infinite}
.cs-rings i:nth-child(2){animation-delay:.8s}
.cs-rings i:nth-child(3){animation-delay:1.6s}

/* Ambient halo (blurred, rotating) */
.cs-halo{position:absolute;z-index:0;width:158px;height:158px;border-radius:50%;background:conic-gradient(from 0deg,var(--cs-1),var(--cs-2),var(--cs-1));filter:blur(24px);opacity:.16;animation:csSpin 8s linear infinite}
.cs-halo-2{display:none}

/* Sparkles */
.cs-sparks{position:absolute;z-index:2;inset:-12px;pointer-events:none;display:none}
.cs-sparks i{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--cs-1);box-shadow:0 0 9px var(--cs-1);opacity:0;animation:csSpark 1.9s ease-in-out infinite}
.cs-sparks i:nth-child(1){left:12%;top:24%;animation-delay:.2s}
.cs-sparks i:nth-child(2){right:14%;top:18%;animation-delay:.7s}
.cs-sparks i:nth-child(3){left:20%;bottom:20%;animation-delay:1.1s}
.cs-sparks i:nth-child(4){right:16%;bottom:24%;animation-delay:.45s}
.cs-sparks i:nth-child(5){left:2%;top:52%;animation-delay:1.4s}
.cs-sparks i:nth-child(6){right:2%;top:46%;animation-delay:.95s}

/* Copy */
.checkout-success>.cs-eyebrow,.checkout-success>h2,.checkout-success>.cs-sub,.checkout-success>.cs-plan,.checkout-success>.cs-cta,.checkout-success>.cs-fine{animation:csUp .55s cubic-bezier(.2,.75,.2,1) backwards}
.checkout-success>.cs-eyebrow{animation-delay:.5s}
.checkout-success>h2{animation-delay:.58s}
.checkout-success>.cs-sub{animation-delay:.66s}
.checkout-success>.cs-plan{animation-delay:.74s}
.checkout-success>.cs-cta{animation-delay:.82s}
.checkout-success>.cs-fine{animation-delay:.9s}

.cs-eyebrow{display:inline-flex;align-items:center;justify-content:center;gap:8px;margin:0 0 13px;color:var(--cs-1);font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.cs-eyebrow:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--cs-1);box-shadow:0 0 12px var(--cs-1)}
.checkout-success h2{margin:0 0 12px;font-family:'Sora','Inter',sans-serif;font-size:33px;line-height:1.06;letter-spacing:-.03em;color:#f4f8fc}
.checkout-success h2 em{font-style:normal;color:transparent;background:linear-gradient(90deg,var(--cs-1),var(--cs-2));background-clip:text;-webkit-background-clip:text}
.cs-sub{max-width:420px;margin:0 auto 22px;color:#93a7ba;font-size:14px;line-height:1.6}
.cs-plan{display:inline-flex;align-items:center;gap:12px;margin:0 auto 24px;padding:11px 18px;border-radius:14px;border:1px solid rgba(255,255,255,.12);background:linear-gradient(150deg,rgba(255,255,255,.06),rgba(255,255,255,.02))}
.cs-plan-name{color:#f4f8fc;font-weight:700;font-size:14px}
.cs-plan-price{color:var(--cs-1);font-weight:700;font-size:16px}
.cs-plan-price small{margin-left:1px;color:#8397aa;font-weight:500;font-size:10px}
.cs-cta{width:100%;min-height:54px;display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;border-radius:13px;background:linear-gradient(120deg,#4d88ff,#2f63e6);color:#fff;font-family:'Inter',sans-serif;font-size:15px;font-weight:700;box-shadow:0 14px 34px var(--cs-glow);transition:transform .25s,box-shadow .25s}
.cs-cta:hover{transform:translateY(-2px);box-shadow:0 18px 46px var(--cs-glow)}
.cs-cta b{font-size:16px;transition:transform .25s}
.cs-cta:hover b{transform:translateX(3px)}
.cs-fine{margin:16px 0 0;color:#7a8fa3;font-size:11px}

/* Premium: brighter halo, sparkles on, badge sheen */
.cs-premium .cs-halo{opacity:.32}
.cs-premium .cs-sparks{display:block}
.cs-premium .cs-badge:after{content:"";position:absolute;inset:0;border-radius:50%;background:linear-gradient(120deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);transform:translateX(-120%);animation:csSheen 2.4s 1s ease-in-out infinite}

/* Pro: dual counter-rotating halo (adds violet), stronger glow, bigger sparkles */
.cs-pro .cs-halo{width:172px;height:172px;opacity:.42;background:conic-gradient(from 0deg,var(--cs-1),var(--cs-2),var(--cs-3),var(--cs-1))}
.cs-pro .cs-halo-2{display:block;width:150px;height:150px;opacity:.34;filter:blur(20px);animation-direction:reverse;animation-duration:11s}
.cs-pro .cs-badge{box-shadow:0 16px 52px var(--cs-glow),0 0 0 1px rgba(255,255,255,.22) inset;animation:csBadgeIn .72s cubic-bezier(.2,1.25,.3,1) both,csPulse 2.6s 1s ease-in-out infinite}
.cs-pro .cs-sparks{display:block}
.cs-pro .cs-sparks i{width:7px;height:7px;box-shadow:0 0 12px var(--cs-1)}
.cs-pro .cs-sparks i:nth-child(even){background:var(--cs-3);box-shadow:0 0 12px var(--cs-3)}
.cs-pro .cs-badge:after{content:"";position:absolute;inset:0;border-radius:50%;background:linear-gradient(120deg,transparent 35%,rgba(255,255,255,.6) 50%,transparent 65%);transform:translateX(-120%);animation:csSheen 2.2s .9s ease-in-out infinite}

@keyframes csBadgeIn{0%{opacity:0;transform:scale(.4)}100%{opacity:1;transform:scale(1)}}
@keyframes csDraw{to{stroke-dashoffset:0}}
@keyframes csRing{0%{transform:scale(.72);opacity:.5}70%{opacity:0}100%{transform:scale(2.5);opacity:0}}
@keyframes csSpin{to{transform:rotate(360deg)}}
@keyframes csSpark{0%,100%{opacity:0;transform:scale(.4)}42%{opacity:1;transform:scale(1)}}
@keyframes csSheen{0%{transform:translateX(-120%)}55%,100%{transform:translateX(120%)}}
@keyframes csPulse{0%,100%{box-shadow:0 16px 52px var(--cs-glow),0 0 0 1px rgba(255,255,255,.22) inset}50%{box-shadow:0 20px 66px var(--cs-glow),0 0 0 1px rgba(255,255,255,.3) inset}}
@keyframes csUp{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}

@media(max-width:620px){.account-modal.checkout-modal{padding:32px 22px 26px}.checkout-success h2{font-size:29px}}
@media(prefers-reduced-motion:reduce){.cs-badge,.cs-check path,.cs-rings i,.cs-halo,.cs-sparks i,.cs-badge:after,.checkout-success>.cs-eyebrow,.checkout-success>h2,.checkout-success>.cs-sub,.checkout-success>.cs-plan,.checkout-success>.cs-cta,.checkout-success>.cs-fine{animation:none}.cs-check path{stroke-dashoffset:0}.cs-rings{display:none}}

/* =========================================================================
   ACCOUNT DROPDOWN MENU + SETTINGS MODAL
   ========================================================================= */
.nav-actions{position:relative}
.sign-in.authenticated{gap:9px;border-radius:12px}
.sign-in.authenticated:after{content:"";width:7px;height:7px;margin-left:2px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-1px);opacity:.65;transition:transform .2s}
.sign-in.authenticated[aria-expanded="true"]:after{transform:rotate(225deg) translateY(-1px)}

.account-menu{position:absolute;top:calc(100% + 10px);right:0;z-index:130;width:250px;padding:8px;border-radius:16px;border:1px solid rgba(146,178,214,.16);background:linear-gradient(180deg,rgba(14,32,56,.98),rgba(8,20,36,.99));box-shadow:0 26px 60px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.03) inset;font-family:'Inter',system-ui,sans-serif;animation:accountMenuIn .2s cubic-bezier(.2,.8,.2,1) both}
@keyframes accountMenuIn{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:none}}
.account-menu-head{display:flex;align-items:center;gap:11px;padding:9px 9px 12px;margin-bottom:6px;border-bottom:1px solid rgba(255,255,255,.07)}
.account-menu-avatar{flex:0 0 auto;width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:linear-gradient(135deg,#3d7bff,#43d6c5);color:#04121f;font-weight:800;font-size:15px}
.account-menu-head>div{min-width:0;display:flex;flex-direction:column;gap:2px}
.account-menu-head strong{font-size:13px;color:#f4f8fc;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.account-menu-head span{font-size:11px;color:#8397aa;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.account-menu button{display:flex;align-items:center;width:100%;padding:10px 11px;border:0;border-radius:10px;background:transparent;color:#c4d1dc;font-family:'Inter',sans-serif;font-size:13px;font-weight:500;text-align:left;cursor:pointer;transition:background .15s,color .15s}
.account-menu button:hover{background:rgba(255,255,255,.06);color:#f4f8fc}
.account-menu-divider{height:1px;margin:6px 4px;background:rgba(255,255,255,.07)}
.account-menu-signout{color:#ff9f9f!important}
.account-menu-signout:hover{background:rgba(255,120,120,.1)!important;color:#ffb3b3!important}

.account-modal.settings-modal{width:min(500px,100%);padding:34px 34px 30px}
.settings-head{display:flex;align-items:center;gap:13px;margin-bottom:22px}
.settings-avatar{flex:0 0 auto;width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,#3d7bff,#43d6c5);color:#04121f;font-weight:800;font-size:19px}
.settings-head>div{min-width:0;display:flex;flex-direction:column;gap:3px}
.settings-head strong{font-size:16px;color:#f4f8fc;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.settings-head span{font-size:12px;color:#8397aa;overflow-wrap:anywhere}
.settings-tabs{display:grid;grid-template-columns:1fr 1fr;gap:5px;padding:5px;margin-bottom:20px;border-radius:13px;border:1px solid rgba(146,178,214,.12);background:rgba(0,0,0,.22)}
.settings-tabs button{min-height:38px;border:0;border-radius:9px;background:transparent;color:#8298ac;font-family:'Inter',sans-serif;font-size:13px;font-weight:600;cursor:pointer;transition:color .2s,background .2s}
.settings-tabs button:hover{color:#c4d1dc}
.settings-tabs button.active{background:rgba(255,255,255,.07);color:#f4f8fc;box-shadow:0 6px 18px rgba(0,0,0,.25)}
.settings-section{display:flex;flex-direction:column;gap:14px}
.settings-label{font-size:12px;font-weight:600;color:#9fb2c4;letter-spacing:.01em}
.settings-form label.settings-label{display:flex;flex-direction:column}
.settings-form input{margin-top:8px;height:50px;border-radius:12px;border:1px solid rgba(146,178,214,.2);background:rgba(255,255,255,.035);padding:0 14px;color:#f4f8fc;font-family:'Inter',sans-serif;font-size:15px;font-weight:450;transition:border-color .2s,background .2s,box-shadow .2s}
.settings-form input:focus{outline:0;border-color:#5790ff;background:rgba(61,123,255,.06);box-shadow:0 0 0 3px rgba(61,123,255,.16)}
.settings-form input:disabled{opacity:.55;cursor:not-allowed}
.settings-form input::placeholder{color:#6f8498}
.settings-help{margin:0;color:#7a8fa3;font-size:11.5px;line-height:1.5}
.settings-primary{min-height:52px;margin-top:2px;display:inline-flex;align-items:center;justify-content:center;gap:9px;border:0;border-radius:12px;background:linear-gradient(120deg,#4d88ff,#2f63e6);color:#fff;font-family:'Inter',sans-serif;font-size:14px;font-weight:700;cursor:pointer;box-shadow:0 12px 30px rgba(61,123,255,.28);transition:transform .2s,box-shadow .2s}
.settings-primary:hover{transform:translateY(-1px);box-shadow:0 16px 40px rgba(61,123,255,.38)}
.settings-primary b{font-size:15px}
.settings-ghost{min-height:46px;border:1px solid rgba(146,178,214,.2);border-radius:12px;background:transparent;color:#c4d1dc;font-family:'Inter',sans-serif;font-size:13px;font-weight:600;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.settings-ghost:hover{background:rgba(255,255,255,.05)}
.settings-danger{color:#ff9f9f;border-color:rgba(255,120,120,.24)}
.settings-danger:hover{background:rgba(255,120,120,.08);border-color:rgba(255,120,120,.4);color:#ffb3b3}
.sub-overview{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:16px;border-radius:14px;border:1px solid rgba(146,178,214,.16);background:linear-gradient(150deg,rgba(61,123,255,.08),rgba(255,255,255,.02))}
.sub-overview .settings-label{margin:0;font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:#8397aa}
.sub-plan{display:flex;align-items:baseline;gap:8px;margin-top:7px}
.sub-plan strong{font-size:20px;color:#f4f8fc;letter-spacing:-.02em}
.sub-plan span{color:#7fe8dc;font-weight:700;font-size:14px}
.sub-plan small{color:#8397aa;font-weight:500;font-size:10px}
.sub-status{flex:0 0 auto;padding:5px 10px;border-radius:999px;font-size:9.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;border:1px solid rgba(67,214,197,.22);background:rgba(67,214,197,.08);color:#7fe8dc;white-space:nowrap}
.sub-status-past_due,.sub-status-paused{border-color:rgba(255,180,120,.28);background:rgba(255,180,120,.1);color:#ffc184}
.sub-status-cancelled{border-color:rgba(255,120,120,.24);background:rgba(255,120,120,.08);color:#ffb3b3}
.sub-status-sandbox{border-color:rgba(146,178,214,.2);background:rgba(255,255,255,.04);color:#9fb2c4}
.sub-hint{margin:0;color:#93a7ba;font-size:12.5px;line-height:1.5}

@media(prefers-reduced-motion:reduce){.account-menu{animation:none}.sign-in.authenticated:after{transition:none}}
@media(max-width:620px){.account-modal.settings-modal{padding:28px 22px 24px}.account-menu{width:220px}}

/* Test-only sandbox simulation button (localhost) */
.settings-dev{border-style:dashed!important;border-color:rgba(146,178,214,.3)!important;color:#8fb0cc;font-size:12px}
.settings-dev:hover{background:rgba(146,178,214,.08)!important}

/* Trial meter — days-left cue + renewal date */
.trial-meter{padding:16px;border-radius:14px;border:1px solid rgba(67,214,197,.2);background:linear-gradient(150deg,rgba(67,214,197,.09),rgba(61,123,255,.05))}
.trial-meter-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:13px}
.trial-meter-count{display:flex;align-items:baseline;gap:7px}
.trial-meter-count strong{font-family:'Sora','Inter',sans-serif;font-size:30px;line-height:1;letter-spacing:-.03em;color:#7fe8dc}
.trial-meter-count span{font-size:12px;color:#93a7ba}
.trial-meter-renew{display:flex;flex-direction:column;gap:3px;text-align:right}
.trial-meter-renew span{font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:#8397aa}
.trial-meter-renew strong{font-size:13px;color:#f4f8fc}
.trial-bar{height:8px;border-radius:999px;background:rgba(255,255,255,.09);overflow:hidden}
.trial-bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#43d6c5,#5790ff);box-shadow:0 0 12px rgba(67,214,197,.45);transition:width .7s cubic-bezier(.2,.8,.2,1)}
.trial-meter-note{margin:12px 0 0;color:#93a7ba;font-size:11.5px;line-height:1.5}
@media(prefers-reduced-motion:reduce){.trial-bar i{transition:none}}

/* =========================================================================
   READABILITY LAYER — marketing copy sized for humans, mockups untouched.
   Scoped to real page content; the chat and booking mockups keep their
   deliberately small "screenshot" type.
   ========================================================================= */

/* Eyebrows / kickers / section numbers */
.kicker,.eyebrow,.section-number,.mini-kicker,.audience-heading>div{font-size:12px;letter-spacing:.14em}
.industry-rail span{font-size:11px;letter-spacing:.18em}

/* Body copy across sections */
.section-intro p,.assistant-copy>p,.faq-copy>p,.final-cta>p,.audience-heading>p{font-size:17px;line-height:1.7}
.hero-copy>p{font-size:19px;line-height:1.65}
.hero-proof{font-size:13px}

/* =========================================================================
   HERO RHYTHM & HEADLINE
   The markup intends two lines ("Turn availability" / "into bookings."). At
   82px line one needed ~650–680px against its column — close enough to the
   boundary to wrap unpredictably on real font metrics. 4.8vw keeps it inside
   the column at every width; text-wrap:balance is the safety net that makes
   the result correct even if the estimate was off.
   ========================================================================= */
/* Nav was capped at min(2100px,94vw) — 348px wider than the hero content on a
   1920px screen, 632px wider at 2240px+, so it floated well past the page.
   1460px keeps it flush (within ~30px) with the content at every width. */
.nav{max-width:min(1460px,94vw)}

/* =========================================================================
   JOURNEY TIMELINE
   Rebuilt from four bordered cards into a horizontal timeline: circular icon
   nodes with a progress ring, a connecting rail with dots, and centred copy.
   The sequence auto-plays 01→04 on scroll (it previously only filled on
   :hover, so it was invisible on touch entirely).
   Step colours interpolate blue → aqua across the four steps, matching the
   gradient already used in the headlines.
   ========================================================================= */
/* Undo the card-era rules still declared at the top of this file: the grid's
   top/bottom borders, the card's right border and 330px min-height, and the
   old .card-line fill (its markup no longer exists). */
.journey-grid{border-top:0;border-bottom:0}
.journey-card{border-right:0;min-height:0;background:none}
.journey-card:hover{background:none}
.card-line{display:none}

.journey-track{position:relative;padding:18px 0 8px}

/* --- Connecting rail --- */
/* top:158 = 18 track pad + ~16 number + 14 margin + 92 icon + 18 gap.
   The node is centred on it at 152 (158 + 1 - 13/2). */
.journey-rail{
  position:absolute;left:0;right:0;top:158px;height:2px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.09) 6%,rgba(255,255,255,.09) 94%,transparent);
}
.journey-rail-fill{
  display:block;height:100%;width:0;border-radius:2px;
  background:linear-gradient(90deg,#3d7bff,#5db4e6 55%,#43d6c5);
  box-shadow:0 0 14px rgba(67,214,197,.35);
  transition:width 3.4s cubic-bezier(.35,0,.25,1);
}
.journey-track.is-complete .journey-rail-fill{width:100%}

/* --- Grid --- */
.journey-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  list-style:none;margin:0;padding:0;border:0;
}
.journey-card{
  position:relative;display:flex;flex-direction:column;align-items:center;
  min-height:0;padding:0 18px;border:0;background:none;text-align:center;
}

/* --- Step number --- */
.card-number{
  position:static;order:-1;margin-bottom:14px;
  font-size:13px;font-weight:700;letter-spacing:.06em;color:#5f7488;
  transition:color .45s ease;
}
.journey-card.is-active .card-number{color:var(--step-color,#7fb2ff)}

/* --- Icon node --- */
.journey-icon{
  position:relative;width:92px;height:92px;margin:0 0 64px;
  display:grid;place-items:center;border:0;border-radius:50%;
  background:radial-gradient(circle at 50% 38%,rgba(255,255,255,.055),rgba(255,255,255,.012));
  transition:box-shadow .5s ease,transform .5s cubic-bezier(.2,.7,.2,1);
}
.journey-card.is-active .journey-icon{
  box-shadow:0 0 34px rgba(61,123,255,.16),inset 0 0 0 1px rgba(255,255,255,.05);
  transform:translateY(-3px);
}

/* Progress ring — stroke-dash drawn from 12 o'clock. r=46 -> circumference ~289. */
.journey-ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);overflow:visible}
.journey-ring-track{fill:none;stroke:rgba(255,255,255,.10);stroke-width:2}
.journey-ring-fill{
  fill:none;stroke:var(--step-color,#3d7bff);stroke-width:2.5;stroke-linecap:round;
  stroke-dasharray:289;stroke-dashoffset:289;
  filter:drop-shadow(0 0 6px var(--step-glow,rgba(61,123,255,.55)));
  transition:stroke-dashoffset .85s cubic-bezier(.35,0,.25,1);
}
/* Each step draws a quarter more of the circle than the last, so the ring
   itself reads as progress: 1/4 -> 2/4 -> 3/4 -> closed. Circumference is
   ~289, so the offsets are 217, 145, 72 and 0. */
.journey-card.is-active[data-step="1"] .journey-ring-fill{stroke-dashoffset:217}
.journey-card.is-active[data-step="2"] .journey-ring-fill{stroke-dashoffset:145}
.journey-card.is-active[data-step="3"] .journey-ring-fill{stroke-dashoffset:72}
.journey-card.is-active[data-step="4"] .journey-ring-fill{stroke-dashoffset:0}

/* The closed ring is the destination, so it gets a brighter halo than the
   partial arcs — the "you're done" beat. */
.journey-card.is-active[data-step="4"] .journey-ring-fill{
  stroke-width:3;
  filter:drop-shadow(0 0 5px var(--step-glow,rgba(61,123,255,.55)))
         drop-shadow(0 0 14px var(--step-glow,rgba(61,123,255,.45)));
}
.journey-card.is-active[data-step="4"] .journey-icon{
  box-shadow:0 0 34px var(--step-glow,rgba(61,123,255,.28)),
             inset 0 0 0 1px rgba(255,255,255,.07);
}

.journey-glyph{
  position:relative;width:26px;height:26px;
  fill:none;stroke:var(--step-color,#8fa2b5);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
  opacity:.55;transition:opacity .5s ease,stroke .5s ease;
}
.journey-card[data-step="1"] .journey-glyph{fill:var(--step-color,#3d7bff);stroke:none}
.journey-card.is-active .journey-glyph{opacity:1}

/* --- Rail dot --- */
.journey-node{
  position:absolute;top:159px;left:50%;width:15px;height:15px;
  transform:translate(-50%,-50%) scale(.55);border-radius:50%;
  background:#22364c;box-shadow:0 0 0 6px rgba(6,17,31,.95);
  transition:transform .45s cubic-bezier(.2,.8,.2,1),background .45s ease,box-shadow .45s ease;
}
.journey-card.is-active .journey-node{
  transform:translate(-50%,-50%) scale(1);
  background:var(--step-color,#3d7bff);
  box-shadow:0 0 0 6px rgba(6,17,31,.95),0 0 18px var(--step-glow,rgba(61,123,255,.6));
}

/* --- Copy --- */
/* Spacing below the icon is owned by .journey-icon's margin-bottom (44px),
   which clears the rail and node; no extra offset needed here. */
.journey-copy{margin-top:0;max-width:250px}
.journey-card h3{font-size:19px;letter-spacing:-.02em;margin:0 0 10px;color:#f4f8fc}
.journey-card p{font-size:14px;line-height:1.6;color:#8ca0b2;margin:0}

/* --- Per-step colour: blue -> aqua across the four steps --- */
.journey-card[data-step="1"]{--step-color:#3d7bff;--step-glow:rgba(61,123,255,.6)}
.journey-card[data-step="2"]{--step-color:#43d6c5;--step-glow:rgba(67,214,197,.6)}
.journey-card[data-step="3"]{--step-color:#5aa8e8;--step-glow:rgba(90,168,232,.6)}
.journey-card[data-step="4"]{--step-color:#3d7bff;--step-glow:rgba(61,123,255,.6)}

/* Hover leads on desktop. */
@media(hover:hover){
  .journey-card:hover .journey-icon{transform:translateY(-5px)}
  .journey-card:hover .journey-glyph{opacity:1}}

@media(prefers-reduced-motion:reduce){
  .journey-rail-fill,.journey-ring-fill,.journey-node,
  .journey-icon,.journey-glyph,.card-number{transition:none}}

/* --- Responsive. The earlier breakpoints still carry card-era rules (borders,
   min-heights, 2-up grids) that would fight the timeline, so they are undone
   here rather than edited in place. --- */
@media(max-width:1100px){
  /* Two rows of two: the rail can't span rows, so it becomes a per-row line. */
  .journey-grid{grid-template-columns:repeat(2,1fr);row-gap:56px}
  .journey-card{border:0!important;min-height:0}
  .journey-rail{display:none}
  .journey-node{display:none}
  .journey-icon{margin-bottom:22px}
  .journey-copy{margin-top:0}}
@media(max-width:720px){
  /* Single column: a vertical rail down the left, icons beside the copy. */
  .journey-track{padding-left:6px}
  .journey-grid{grid-template-columns:1fr;row-gap:0}
  .journey-card{
    flex-direction:row;align-items:flex-start;gap:20px;
    padding:0 0 34px 0;text-align:left;
    border:0!important;min-height:0;
  }
  .journey-card:last-child{padding-bottom:0}
  /* Vertical connector between nodes. */
  .journey-card:not(:last-child):after{
    content:"";position:absolute;left:33px;top:74px;bottom:8px;width:2px;
    background:rgba(255,255,255,.09);
  }
  .journey-card.is-active:not(:last-child):after{
    background:linear-gradient(180deg,var(--step-color),rgba(255,255,255,.09));
  }
  .card-number{
    position:absolute;left:0;top:-2px;order:0;margin:0;
    font-size:11px;opacity:0;
  }
  .journey-icon{width:66px;height:66px;margin:0;flex:0 0 auto}
  .journey-glyph{width:20px;height:20px}
  .journey-copy{margin-top:4px;max-width:none}
  .journey-card h3{font-size:17px;margin-bottom:7px}
  .journey-card p{font-size:14px}}
@media(max-width:440px){
  .journey-card{gap:15px}
  .journey-icon{width:56px;height:56px}
  .journey-card:not(:last-child):after{left:28px;top:64px}
  .journey-glyph{width:18px;height:18px}
  .journey-card h3{font-size:16px}
  .journey-card p{font-size:13px}}

.hero h1{font-size:clamp(52px,4.8vw,78px);text-wrap:balance}
.eyebrow{margin-bottom:20px}
.hero-copy>p{max-width:620px;margin:26px 0}
.hero-proof{margin-top:22px}

/* Cards */
.journey-card h3,.audience-card h3{font-size:19px}
.journey-card p,.audience-card p,.bento p{font-size:15px;line-height:1.6}
.bento h3{font-size:22px}
.bento-copy h3{font-size:34px}
.audience-note p{font-size:15px}
.audience-arrow,.card-number{font-size:13px}

/* Assistant list */
.assistant-copy li{font-size:16px}
.assistant-copy li span{width:24px;height:24px;font-size:12px}
.text-link{font-size:15px}

/* Pricing — the section flagged as too small */
.plan-head>span{font-size:14px;letter-spacing:.12em}
.plan-head p{font-size:15px;line-height:1.55;height:auto;min-height:44px}
.plan li{font-size:15px;line-height:1.5;gap:11px}
.plan li>span{font-size:13px}
.plan-button{font-size:15px;height:52px}
.price sup{font-size:24px;margin-top:12px}
.price>span{font-size:14px;margin-top:38px}
.credits-note{font-size:12px;line-height:1.55}
.recommend-label{font-size:11px;letter-spacing:.12em;padding:7px 15px}
.assurance strong{font-size:14px}
.assurance span{font-size:17px}
.pricing-fineprint{font-size:13px;line-height:1.75;max-width:900px}

/* FAQ */
.faq-list summary{font-size:17px;min-height:82px}
.faq-list summary i{font-size:24px}
.faq-list details p{font-size:15px;line-height:1.75}

/* Footer */
.footer-main>p{font-size:15px}
.footer-links strong{font-size:12px}
.footer-links a,.footer-placeholder{font-size:14px;min-height:32px}
.footer-placeholder small{font-size:10px}
.footer-bottom{font-size:13px}

/* Nav */
.nav-links{font-size:15px}
.sign-in{font-size:15px}
.nav-cta{font-size:15px;padding:14px 22px}

/* Buttons */
.button{font-size:15px;min-height:56px;padding:0 26px}
.final-cta>small{font-size:13px}

/* =========================================================================
   WCAG AA CONTRAST — measured against the page background (#071426).
   Five colours were failing the 4.5:1 floor for normal-size text; each is
   lightened to the nearest value that passes while keeping the same hue.
   ========================================================================= */
.pricing-fineprint{color:#8497aa}      /* was #657b8f — 4.21:1 → 6.2:1  (VAT/billing terms) */
.footer-bottom{color:#7e93a7}          /* was #4f6579 — 3.05:1 → 5.4:1 */
.card-number{color:#7d92a6}            /* was #53677a — 3.16:1 → 5.3:1 */
.audience-arrow{color:#7d92a6}         /* was #4e6478 — 3.01:1 → 5.3:1 */
.audience-card:hover .audience-arrow{color:#62dfd1}
.account-form input::placeholder,
.settings-form input::placeholder,
.chat-input input::placeholder{color:#8598ab}  /* was #6f8498 — 4.23:1 → 5.6:1 */

/* =========================================================================
   TOUCH TARGETS — 44x44 minimum (Apple HIG / WCAG 2.5.5). Ten controls were
   below the floor. Where enlarging the visual would break the composition,
   the hit area is extended with a pseudo-element instead of resizing the box.
   ========================================================================= */
/* .modal-close is deliberately excluded: it is already position:absolute and
   pinned to the modal's top-right corner. Re-declaring it relative here dropped
   it back into normal flow (top-left of the panel). Its :after hit area below
   is positioned against the button box, so absolute works the same. */
.chat-input button,
.menu-button{position:relative}
.modal-close:after,
.chat-input button:after,
.menu-button:after{content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%)}

.verification-actions button{min-height:44px;padding-inline:10px}
.settings-tabs button{min-height:44px}
.auth-tabs button{min-height:44px}
.auth-tabs:before{height:calc(100% - 10px)}
.account-menu button{min-height:44px}
.suggestions button{min-height:36px;padding:9px 13px}
.times button{min-height:44px}
.cal-nav{min-width:44px}

/* Authentication autofill and selection must stay legible on the dark form.
   Keep this after every generic input/focus rule: Chromium's autofill paint
   otherwise wins when an autofilled field is focused or preselected. */
.account-modal .account-form input:-webkit-autofill,
.account-modal .account-form input:-webkit-autofill:hover,
.account-modal .account-form input:-webkit-autofill:active{
  -webkit-text-fill-color:#f4f8fc!important;
  caret-color:#f4f8fc;
  -webkit-box-shadow:0 0 0 1000px #10243a inset!important;
  box-shadow:0 0 0 1000px #10243a inset!important;
  border-color:rgba(146,178,214,.34);
  transition:background-color 9999s ease-out 0s;
}
.account-modal .account-form input:-webkit-autofill:focus{
  -webkit-text-fill-color:#f4f8fc!important;
  caret-color:#f4f8fc;
  -webkit-box-shadow:0 0 0 1000px #10243a inset,0 0 0 3px rgba(61,123,255,.22)!important;
  box-shadow:0 0 0 1000px #10243a inset,0 0 0 3px rgba(61,123,255,.22)!important;
  border-color:#5790ff;
}
.account-modal .account-form input:autofill{
  color:#f4f8fc!important;
  background:#10243a!important;
  box-shadow:0 0 0 1000px #10243a inset!important;
}
.account-modal .account-form input::selection{
  color:#fff;
  -webkit-text-fill-color:#fff;
  background:#2f67c7;
}

/* Chips inside a scrollable strip stay visually compact but keep a 44px row. */
.suggestions{align-items:center;min-height:48px}

/* =========================================================================
   MOCKUP SCALE — the booking card and chat window read as product UI, not
   thumbnails. Internal type was 7–13px against an 82px headline.
   Containers and their type are scaled together so proportions hold.
   Reverses the earlier "mockups keep small screenshot type" decision.
   ========================================================================= */

/* ---- Hero booking card ----
   Chips sit BESIDE the card in the side gutter, overlapping only its 30px
   padding band (empty margin, never text). Placing them above/below instead
   forced ~160px of vertical clearance and pushed the hero to 950px tall — past
   a 13" laptop screen. Side placement brings it back to ~772px.

   The card is FLUID: at a fixed 500px the gutter collapsed below ~1600px and
   the chips crept over card content. min(500px, 100% - 160px) pins the gutter
   at 80px across every viewport width. */
.hero-product{height:600px}
/* The card keeps its full width; the chips are pulled outward past its edges
   (see .status-card / .mini-card offsets below) so neither crosses the card's
   content. A wider reserved gutter here would shrink the card instead. */
.booking-card{width:min(500px,100% - 160px);min-height:540px;padding:30px}
/* Nudged outward so the chips overhang the hero column rather than sitting on
   the booking card's controls (the mini-card previously covered "Confirm
   booking"). Clamped so they never leave the viewport on smaller desktops. */
.status-card{top:34px;right:max(-42px,calc((100vw - 1240px) / -2));bottom:auto}
.mini-card{bottom:34px;left:max(-42px,calc((100vw - 1240px) / -2));top:auto}
.booking-head{gap:14px;margin-bottom:26px}
.booking-head strong{font-size:17px}
.booking-head span{font-size:12px}
.studio-mark{width:46px;height:46px;border-radius:15px;font-size:17px}
.service-select{padding:19px;border-radius:18px}
.tiny-label{font-size:11px;letter-spacing:.12em}
.service-row{margin-top:11px;font-size:15px}
.calendar-row{margin:26px 0 20px}
.date{width:56px;height:76px;border-radius:18px;gap:7px}
.date span{font-size:11px}
.date strong{font-size:17px}
.times{gap:10px}
.times button{font-size:14px;border-radius:12px}
.confirm-button{margin-top:28px;min-height:60px;border-radius:16px;font-size:15px}
/* Stacked chips — icon above text, sized to the 110px gutter ceiling.
   A horizontal icon+text chip cannot fit there (the text column would be ~26px).
   These were previously declared globally, which squeezed the chips into a
   110px column on wide screens too and wrapped "Made to feel effortless" onto
   three cramped lines. The narrow treatment only belongs where the gutter is
   actually narrow, so it is scoped to <=1100px below. */
.status-card{width:186px;flex-direction:column;gap:10px;padding:16px 15px;text-align:center}
.status-card>div{align-items:center;gap:5px}
.status-card strong{font-size:12.5px;line-height:1.35}
.status-card div span{font-size:11.5px;line-height:1.4}
.status-icon{width:34px;height:34px;font-size:15px}
.mini-card{width:186px;padding:16px 15px;text-align:center}
.mini-card>span{font-size:9.5px;letter-spacing:.1em}
.mini-card>strong{font-size:12.5px;line-height:1.35;margin:7px 0 12px}

@media(max-width:1100px){
  .status-card{width:110px;gap:8px;padding:14px 10px}
  .status-card>div{gap:4px}
  .status-card strong{font-size:11px;line-height:1.3}
  .status-card div span{font-size:10px;line-height:1.3}
  .status-icon{width:30px;height:30px;font-size:14px}
  .mini-card{width:110px;padding:14px 10px}
  .mini-card>span{font-size:9px}
  .mini-card>strong{font-size:11px;line-height:1.3;margin:6px 0 11px}}
.mini-bars{height:24px;justify-content:center;gap:4px}
.mini-bars i{width:12px}

/* ---- Assistant chat window ----
   Same treatment as the booking card: fluid width keeps an 80px gutter, and the
   24/7 chip is stacked so it sits beside the window rather than over the first
   bot message. */
.chat-stage{min-height:620px}
/* The old "100% - 160px" reserved gutter space for the .status-card/.mini-card
   floats. Those belong to the hero; this section's only float (.chat-label) was
   removed in the redesign, so the subtraction squeezed the window to ~230-300px
   against a 560px height — the narrow "phone" shape. */
.chat-window{width:min(540px,100%);min-height:560px}
.chat-label{top:72px;right:0;bottom:auto;width:110px;flex-direction:column;gap:8px;padding:14px 10px;text-align:center}
.chat-label>div{align-items:center;gap:4px}
.chat-head{height:84px;padding:0 22px;gap:12px}
.chat-head strong{font-size:14px}
.chat-head span{font-size:11px}
.assistant-avatar{width:42px;height:42px;border-radius:14px}
.chat-body{min-height:320px;padding:22px;gap:14px}
.bot-message,.user-message{font-size:13px;padding:13px 16px;border-radius:16px;max-width:80%}
.rich-message>button{padding:12px;border-radius:12px}
.rich-message small{font-size:10px}
.rich-message strong{font-size:15px}
.rich-message b{font-size:11px}
.service-reply strong{font-size:12px}
.service-reply small{font-size:11px}
.suggestions button{font-size:12px}
.chat-input{margin:0 20px;height:52px;border-radius:14px;font-size:13px}
.chat-input input{font-size:13px}
.chat-input button{width:36px;height:36px;border-radius:10px}
.powered{height:42px;font-size:11px}
.chat-label strong{font-size:11px;line-height:1.3}
.chat-label small{font-size:10px;line-height:1.3}
.chat-label>span{width:34px;height:34px;font-size:11px}
.chat-orb{width:450px;height:450px}

/* =========================================================================
   FAQ ACCORDION MOTION
   Native <details> cannot transition height:auto, so the answers previously
   snapped open. ::details-content + interpolate-size animates the real height
   (Chrome/Edge 131+, Safari 18.2+). Where unsupported the panel just appears
   instantly — identical to the old behaviour, so this is a safe progressive
   enhancement rather than a regression risk.
   ========================================================================= */
@supports (interpolate-size: allow-keywords){
  :root{interpolate-size:allow-keywords}}
.faq-list details::details-content{
  block-size:0;
  opacity:0;
  overflow:hidden;
  transition:block-size .38s cubic-bezier(.2,.7,.2,1),
             opacity .26s ease,
             content-visibility .38s allow-discrete;
  transition-behavior:allow-discrete;
}
.faq-list details[open]::details-content{block-size:auto;opacity:1}
/* Content lifts into place so the reveal has direction, not just height. */
.faq-list details p{transform:translateY(-4px);transition:transform .38s cubic-bezier(.2,.7,.2,1)}
.faq-list details[open] p{transform:none}
/* Match the +/x icon to the panel's easing so they read as one motion. */
.faq-list summary i{transition:transform .38s cubic-bezier(.2,.7,.2,1),color .26s ease}
/* Row highlight on hover/open makes the whole summary feel interactive. */
.faq-list summary{transition:color .2s ease}
.faq-list details[open] summary{color:#f4f8fc}

@media(prefers-reduced-motion:reduce){
  .faq-list details::details-content,
  .faq-list details p,
  .faq-list summary i,
  .faq-list summary{transition:none}
  .faq-list details p{transform:none}}

/* =========================================================================
   MOCKUP SCALE — responsive reconciliation
   The larger cards need matching stage heights at each breakpoint, otherwise
   the floating chips land back on top of the card. Declared last so these win
   over the earlier per-breakpoint rules.
   ========================================================================= */
@media(max-width:1100px){
  /* Single column here, so the stage is full width and the chips have room in
     the gutter without needing extra height. */
  .hero-product{height:620px;max-width:660px}
  .chat-stage{min-height:640px}
  /* Neutralise the legacy right/left:5% offsets from the original stylesheet.
     They pushed the chips ~60px further over the card across this whole band. */
  .status-card{right:0;top:60px}
  .mini-card{left:0;bottom:60px}
  .chat-label{right:0;top:72px}}
@media(max-width:720px){
  /* Keep the fluid formula: a plain width:100% removes the gutter and the chips
     land back on card content. Chips narrow to 96px to preserve it here. */
  .hero-product{height:560px}
  .booking-card{width:min(460px,100% - 156px);min-height:500px;padding:22px}
  .status-card{top:40px;right:0;width:96px;padding:12px 8px}
  .status-card strong{font-size:10px}
  .status-card div span{font-size:9px}
  .status-icon{width:26px;height:26px;font-size:12px}
  .mini-card{bottom:40px;left:0;width:96px;padding:12px 8px}
  .mini-card>strong{font-size:10px}
  .mini-bars i{width:10px}
  .chat-stage{min-height:600px}
  /* Same stale gutter subtraction as the desktop rule — removed. */
  .chat-window{width:min(480px,100%);min-height:530px}
  .chat-label{top:48px;right:0;width:96px;padding:12px 8px}
  .chat-label strong{font-size:10px}
  .chat-label small{font-size:9px}
  .chat-label>span{width:28px;height:28px;font-size:10px}
  .date{width:48px;height:68px}
  .times button{font-size:13px}}
@media(max-width:440px){
  /* All three chips hide here, so the card goes full-bleed and reclaims the
     gutter — no fluid formula needed. */
  .hero-product{height:520px}
  .booking-card{width:100%;min-height:470px;padding:18px}
  .date{width:42px;height:62px}
  .date span{font-size:10px}
  .date strong{font-size:15px}
  .times button{font-size:12px}
  .confirm-button{min-height:54px;font-size:14px}
  .status-card,.mini-card,.chat-label{display:none}
  .chat-stage{min-height:560px}
  .chat-window{width:100%;min-height:500px}
  .bot-message,.user-message{font-size:12px}}

/* =========================================================================
   ICON GLYPH RENDERING
   The UI uses Unicode symbols (✓ → ↗ ✦ ∞ ⚙ ⌂ ◇ ◌ ◉ ＋ …) as icons. None of
   them exist in the Google-served Inter subsets — verified against its
   unicode-range — so each falls back to an arbitrary system font. On Windows
   ⚙ and similar resolve to Segoe UI Emoji and render as COLOUR EMOJI, which
   is exactly the "emoji as icons" anti-pattern.
   Pinning a deterministic symbol-font stack keeps them monochrome and
   consistent. Replacing them with inline SVG remains the correct long-term
   fix; this stops the cross-platform breakage without a 263-glyph rewrite.
   ========================================================================= */
.audience-icon,.journey-icon span,.bento-icon,.assurance span,.audience-note>span,.status-icon,.eyebrow>span,.button b,.button-secondary span,.text-link span,.plan li>span,.plan-button span,.faq-list summary i,.industry-rail i,.confirm-button span:last-child,.cal-nav,.activation-benefits li i,.trial-timeline i,.workspace-plan-option:after,.cs-eyebrow:before,.account-eyebrow:before,.auth-trust span:before,.account-result>span,.verification-mark,.chat-input button,.rich-message b,.audience-arrow,.chat-reopen>b,.footer-placeholder small,.activation-footer span:first-child{
  font-family:'Segoe UI Symbol','Apple Symbols','Noto Sans Symbols 2',
              'DejaVu Sans','Inter',sans-serif;
  font-variant-emoji:text;   /* force monochrome where supported */
}
/* Belt-and-braces: stop any glyph in the UI resolving to a colour emoji font. */
.site-shell,.modal-backdrop{font-variant-emoji:text}

/* =========================================================================
   TYPEFACE — the page loads Inter + Sora but previously rendered in Arial.
   Body is Inter (set on <body>); display headings use Sora.
   ========================================================================= */
.hero h1,
.section-intro h2,
.audience-heading h2,
.faq-copy h2,
.final-cta h2,
.bento-copy h3,
.trial-modal h2{font-family:'Sora','Inter',system-ui,sans-serif}
.brand,.footer-brand{font-family:'Sora','Inter',system-ui,sans-serif}

/* =========================================================================
   CHECKOUT LEGIBILITY FLOOR — transactional text a user must read before
   paying was rendering at 4.5–7.5px. Raised to a ~12px floor. The dashboard,
   chat and booking mockups keep their deliberately small "screenshot" type.
   ========================================================================= */
.activation-choice .workspace-plan-badge{font-size:11px;padding:3px 8px;line-height:1.45}
.workspace-plan-tagline{font-size:12px;line-height:1.45}
.activation-choice .workspace-plan-copy strong{font-size:15px}
.activation-choice .workspace-plan-price b{font-size:19px}
.activation-choice .workspace-plan-price small{font-size:12px}
.activation-choice-head h3{font-size:17px}
.activation-choice-head p{font-size:12.5px;line-height:1.5}
.activation-choice-head>span{font-size:11px;padding:6px 10px}
.trial-number strong{font-size:28px}
.trial-number span{font-size:11px;letter-spacing:.06em}
.trial-promise>div:last-child>strong{font-size:14px}
.trial-promise p{font-size:12.5px;line-height:1.5}
.trial-timeline strong{font-size:12px}
.trial-timeline span{font-size:11.5px;line-height:1.4}
.activation-summary .summary-plan-line>span small{font-size:11px}
.activation-summary .summary-plan-line>span strong{font-size:22px}
.activation-summary .summary-plan-line>b>span{font-size:14px}
.activation-summary .summary-plan-line>b>i{font-size:32px}
.activation-summary .summary-plan-line>b>small{font-size:12px}

.due-today>span{font-size:11px;letter-spacing:.11em}
.due-today strong{font-size:36px}
.due-today small{font-size:12px}
.activation-summary .activation-benefits li{font-size:13px}
.activation-summary .activation-benefits li i{font-size:10px}
.activation-summary .account-assurance{font-size:11.5px!important}
.activation-footer{font-size:11.5px;gap:12px}
.checkout-confirmation strong{font-size:13px}
.checkout-confirmation small{font-size:11.5px;line-height:1.45}
.workspace-status-pill{font-size:10px}
.launch-step strong{font-size:12px}
.launch-step small{font-size:11px;line-height:1.4}

/* =========================================================================
   BREAKPOINT RECONCILIATION — .activation-summary min-height was declared four
   times (330 base / 360 @900 / 310 @760 / 380 @480), so the card grew *taller*
   as the viewport got smaller. Width was likewise set three times
   (940 → 790 → 860). Both now resolve monotonically from one place.
   ========================================================================= */
.account-modal.workspace-modal{width:min(860px,100%)}
.activation-summary{min-height:330px}
@media(max-width:820px){
  .account-modal.workspace-modal{width:min(600px,100%)}
  .activation-summary{min-height:300px}}
@media(max-width:620px){
  .account-modal.workspace-modal{width:100%}
  .activation-summary{min-height:0}}

/* =========================================================================
   HERO DECORATIONS
   An earlier revision pulled .status-card / .mini-card / .chat-label inside
   their container at small widths to stop them being clipped. That is now
   handled properly by the "MOCKUP SCALE — responsive reconciliation" block,
   which positions the chips in clear space above/below the card at every
   breakpoint. The old rules here set stale `top` values that came later in the
   cascade and reintroduced the overlap, so only the non-positional bits remain.
   ========================================================================= */
/* (Chip sizing at <=560px is handled by the <=720px block above; the stale
   horizontal-chip widths that lived here have been removed.) */

/* =========================================================================
   AUDIENCE SECTION — editorial rebuild
   Was six bordered cards with Unicode glyphs. Now borderless items with real
   SVG pictograms in rounded tiles, a rule after the eyebrow, and a per-card
   accent stepping blue -> aqua (matching the journey timeline; no purple).
   Icons draw themselves in on scroll and the arrow slides on hover.
   ========================================================================= */

/* --- Eyebrow rule --- */
.kicker-rule{
  display:inline-block;width:64px;height:1px;margin:0 4px;
  background:linear-gradient(90deg,rgba(255,255,255,.35),rgba(255,255,255,.08));
}

/* --- Grid: 3 across, generous gutters --- */
.audience-grid{
  grid-template-columns:repeat(3,1fr);
  column-gap:clamp(36px,4vw,86px);
  row-gap:clamp(48px,4.5vw,74px);
}

/* --- Card: borderless, icon + copy + arrow --- */
.audience-card{
  grid-template-columns:auto 1fr;
  grid-template-areas:"icon copy";
  align-items:start;
  gap:22px;
  min-height:0;padding:0;border:0;border-radius:0;background:none;overflow:visible;
}
.audience-card:before{display:none}
.audience-card:hover{border:0;background:none}
.audience-card>div:nth-of-type(1){grid-area:icon}
.audience-card>div:nth-of-type(2){grid-area:copy;min-width:0}

/* --- Icon tile --- */
.audience-icon{
  width:78px;height:78px;border-radius:20px;
  display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.07);
  background:linear-gradient(150deg,rgba(255,255,255,.055),rgba(255,255,255,.012));
  color:var(--accent,#43d6c5);
  transition:transform .45s cubic-bezier(.2,.7,.2,1),
             border-color .45s ease, box-shadow .45s ease, background .45s ease;
}
.audience-icon svg{
  width:32px;height:32px;fill:none;stroke:currentColor;
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
}
/* Pictograms draw themselves in when the card reveals. Every shape carries
   pathLength="1" in the markup, so one dash value works regardless of the
   real geometry (raw lengths here range from ~21 to ~148 units). */
.audience-icon svg path,.audience-icon svg circle{
  stroke-dasharray:1;stroke-dashoffset:1;
}
.audience-card.is-visible .audience-icon svg path,
.audience-card.is-visible .audience-icon svg circle{
  animation:audienceDraw 1.1s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes audienceDraw{to{stroke-dashoffset:0}}

/* Delay composes two staggers without them fighting over animation-delay:
   --card-delay cascades the six cards, --shape-delay sequences the strokes
   inside one icon. Both are plain custom properties, so the single
   animation-delay declaration below just adds them. */
.audience-card{--card-delay:0ms}
.audience-card:nth-child(2){--card-delay:70ms}
.audience-card:nth-child(3){--card-delay:140ms}
.audience-card:nth-child(4){--card-delay:210ms}
.audience-card:nth-child(5){--card-delay:280ms}
.audience-card:nth-child(6){--card-delay:350ms}
.audience-icon svg *{--shape-delay:0ms}
.audience-icon svg *:nth-child(2){--shape-delay:120ms}
.audience-icon svg *:nth-child(3){--shape-delay:240ms}
.audience-icon svg *:nth-child(4){--shape-delay:360ms}
.audience-card.is-visible .audience-icon svg path,
.audience-card.is-visible .audience-icon svg circle{
  animation-delay:calc(var(--card-delay) + var(--shape-delay));
}

/* Cards themselves cascade in (replaces the inline transition-delay attributes
   the old markup carried). */
.audience-card{transition-delay:var(--card-delay)}

/* --- Copy --- */
.audience-card h3{
  font-size:20px;letter-spacing:-.015em;margin:6px 0 12px;color:#f4f8fc;
  transition:color .3s ease;
}
.audience-card p{font-size:15px;line-height:1.62;color:#8ca0b2;margin:0;max-width:34ch}

/* --- Arrow: sits under the copy, slides on hover --- */
.audience-arrow{
  grid-area:copy;justify-self:start;margin-top:16px;padding:0;
  display:inline-flex;color:var(--accent,#43d6c5);opacity:.75;
  transition:transform .35s cubic-bezier(.2,.7,.2,1),opacity .3s ease;
}
.audience-arrow svg{
  width:22px;height:22px;fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
}
/* Re-flow the card so the arrow can sit below the paragraph. */
.audience-card{grid-template-areas:"icon copy" ". arrow"}
.audience-arrow{grid-area:arrow}

/* --- Hover --- */
@media(hover:hover){
  /* Fallback first: a neutral lift that works without color-mix support. */
  .audience-card:hover .audience-icon{
    transform:translateY(-4px);
    border-color:rgba(255,255,255,.16);
    box-shadow:0 14px 34px rgba(0,0,0,.28);
    background:linear-gradient(150deg,rgba(255,255,255,.075),rgba(255,255,255,.015));
  }
  .audience-card:hover .audience-arrow{transform:translateX(7px);opacity:1}
  .audience-card:hover h3{color:#fff}}
/* Accent-tinted hover where color-mix is supported (Chrome/Edge 111+, Safari 16.2+,
   Firefox 113+). Older browsers keep the neutral lift above. */
@supports(color:color-mix(in srgb,red 50%,transparent)){
  @media(hover:hover){
    .audience-card:hover .audience-icon{
      border-color:color-mix(in srgb,var(--accent,#43d6c5) 40%,transparent);
      box-shadow:0 14px 34px rgba(0,0,0,.28),
                 0 0 26px color-mix(in srgb,var(--accent,#43d6c5) 16%,transparent);
      background:linear-gradient(150deg,
        color-mix(in srgb,var(--accent,#43d6c5) 12%,transparent),
        rgba(255,255,255,.015));
    }}}

/* --- Per-card accent: blue -> aqua, matching the journey timeline --- */
.audience-card[data-accent="1"]{--accent:#43d6c5}
.audience-card[data-accent="2"]{--accent:#4fb8e8}
.audience-card[data-accent="3"]{--accent:#6f9dff}
.audience-card[data-accent="4"]{--accent:#43d6c5}
.audience-card[data-accent="5"]{--accent:#4fb8e8}
.audience-card[data-accent="6"]{--accent:#6f9dff}

/* --- Footer note --- */
.audience-note{
  margin-top:clamp(48px,5vw,78px);padding:26px 0 0;
  min-height:0;border:0;border-top:1px solid rgba(255,255,255,.07);
  border-radius:0;background:none;
  justify-content:flex-start;gap:14px;text-align:left;
}
.audience-note>span{display:inline-flex;color:#4fb8e8;font-size:0}
.audience-note>span svg{
  width:26px;height:16px;fill:none;stroke:currentColor;
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
}
.audience-note p{font-size:15px;color:#8ca0b2}
.audience-note strong{
  font-weight:500;color:transparent;
  background:linear-gradient(90deg,#6f9dff,#43d6c5);
  background-clip:text;-webkit-background-clip:text;
}

/* --- Responsive --- */
@media(max-width:1100px){
  .audience-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){
  .audience-grid{grid-template-columns:1fr;row-gap:40px}
  .audience-card{gap:18px;min-height:0}
  .audience-icon{width:64px;height:64px;border-radius:17px}
  .audience-icon svg{width:27px;height:27px}
  .audience-card h3{font-size:18px;margin:2px 0 9px}
  .audience-card p{font-size:14px;max-width:none}
  .audience-arrow{margin-top:13px}
  .audience-arrow svg{width:20px;height:20px}
  .audience-note{align-items:center;text-align:left}}
@media(max-width:440px){
  .audience-icon{width:56px;height:56px;border-radius:15px}
  .audience-icon svg{width:24px;height:24px}
  .audience-card{gap:15px}
  .audience-card h3{font-size:17px}}

@media(prefers-reduced-motion:reduce){
  .audience-icon svg path,.audience-icon svg circle{stroke-dashoffset:0!important;animation:none!important}
  .audience-icon,.audience-arrow,.audience-card h3{transition:none}}

/* =========================================================================
   PRICING SECTION — replicate reference composition
   Premium is the hero card: taller, gradient-bordered, brand-gradient CTA,
   "MOST POPULAR" pill straddling the top edge, per-day price, and a
   progressive-disclosure toggle for the remaining features.
   ========================================================================= */
.pricing-grid{
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:24px;
  align-items:center;              /* lets Premium stand taller */
}

/* --- Base card --- */
.plan{
  display:flex;flex-direction:column;
  padding:34px 30px;border-radius:22px;
  border:1px solid rgba(255,255,255,.07);
  background:linear-gradient(165deg,rgba(255,255,255,.045),rgba(255,255,255,.012));
  box-shadow:0 18px 44px rgba(0,0,0,.22);
  transition:transform .4s cubic-bezier(.2,.7,.2,1),border-color .4s ease,box-shadow .4s ease;
}
.plan-head>span{
  font-size:13px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:#9fb2c4;
}
.plan-head p{
  margin:12px 0 0;height:auto;min-height:44px;
  font-size:15px;line-height:1.5;color:#8ca0b2;
}

/* --- Price --- */
.price{display:flex;align-items:flex-start;margin:26px 0 0}
.price sup{margin-top:12px;font-size:26px;font-weight:600;color:#e6eef7}
.price strong{
  font-family:'Sora','Inter',sans-serif;
  font-size:60px;line-height:.95;letter-spacing:-.045em;color:#f4f8fc;
}
.price>span{align-self:flex-end;margin:0 0 12px 8px;font-size:15px;color:#8ca0b2}
.price-daily{margin:10px 0 0;font-size:14px;color:#5fdccb}

.plan-divider{margin:26px 0 24px;height:1px;background:rgba(255,255,255,.08)}

/* --- Feature list --- */
.plan ul{display:flex;flex-direction:column;gap:15px;margin:0;padding:0;list-style:none}
.plan li{
  display:flex;align-items:flex-start;gap:12px;
  font-size:15px;line-height:1.45;color:#c4d1dc;
}
/* Check drawn in CSS so it never depends on a symbol font. */
.plan-check{
  position:relative;flex:0 0 auto;width:15px;height:15px;margin-top:2px;
}
.plan-check:before,.plan-check:after{
  content:"";position:absolute;background:#4fd8c4;border-radius:1px;
}
.plan-check:before{left:1px;top:7px;width:5px;height:1.7px;transform:rotate(45deg);transform-origin:left center}
.plan-check:after{left:4.2px;top:9.6px;width:10px;height:1.7px;transform:rotate(-52deg);transform-origin:left center}

/* --- Progressive disclosure --- */
.plan-more{margin-top:15px}
.plan-more-toggle{
  align-self:flex-start;display:inline-flex;align-items:center;gap:7px;
  min-height:44px;margin-top:14px;padding:0;
  border:0;background:none;color:#93a7ba;font-size:14px;
  transition:color .25s ease;
}
.plan-more-toggle:hover{color:#e6eef7}
.plan-more-toggle i{
  width:8px;height:8px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:rotate(45deg) translateY(-2px);transition:transform .3s ease;
}
.plan-more-toggle[aria-expanded="true"] i{transform:rotate(225deg) translateY(-2px)}

/* --- CTA --- */
.plan-button{
  width:100%;min-height:56px;margin-top:auto;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  border:1px solid rgba(255,255,255,.14);border-radius:13px;
  background:rgba(255,255,255,.03);color:#f4f8fc;
  font-size:15px;font-weight:600;
  transition:background .3s ease,border-color .3s ease,transform .3s ease;
}
.plan .plan-divider + ul + .plan-button,
.plan ul + .plan-button{margin-top:30px}
.plan-button span{transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.plan-button:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.24)}
.plan-button:hover span{transform:translateX(5px)}
.plan-button.primary{
  border:0;color:#04121f;font-weight:700;
  background:linear-gradient(100deg,#3d7bff,#43d6c5);
  box-shadow:0 14px 34px rgba(61,123,255,.3);
}
.plan-button.primary:hover{box-shadow:0 18px 44px rgba(61,123,255,.42)}
.plan-cta-note{
  display:block;margin-top:14px;text-align:center;
  font-size:13px;color:#8497aa;
}

/* --- Premium hero card --- */
.plan.recommended{
  position:relative;padding:42px 34px 34px;
  transform:none;                       /* was translateY(-12px) */
  border-color:transparent;
  background:
    linear-gradient(170deg,rgba(61,123,255,.16),rgba(67,214,197,.05) 55%,rgba(255,255,255,.015)),
    #071426;
  box-shadow:0 30px 70px rgba(9,32,74,.5);
}
.plan.recommended.is-visible{transform:none}
/* Gradient border via a masked pseudo-element. */
.plan.recommended:before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:linear-gradient(150deg,#3d7bff,#43d6c5 60%,rgba(67,214,197,.25));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  pointer-events:none;
}
.recommend-label{
  top:-15px;left:50%;transform:translateX(-50%);
  padding:9px 18px;border-radius:999px;
  background:linear-gradient(100deg,#3d7bff,#43d6c5);
  color:#04121f;font-size:11px;font-weight:800;letter-spacing:.13em;
  box-shadow:0 10px 26px rgba(61,123,255,.38);
}

@media(hover:hover){
  .plan:not(.recommended):hover{
    transform:translateY(-4px);
    border-color:rgba(255,255,255,.14);
    box-shadow:0 26px 56px rgba(0,0,0,.3);
  }
  .plan.recommended:hover{transform:translateY(-4px)}}

/* --- Assurance strip --- */
.assurance{
  margin-top:46px;padding:26px 0 0;min-height:0;
  border:0;border-top:1px solid rgba(255,255,255,.07);border-radius:0;
  background:none;gap:clamp(28px,5vw,72px);
}
.assurance>div{gap:12px}
.assurance span{display:inline-flex;align-items:center;color:#4fd8c4;font-size:17px}
.assurance span svg{
  width:26px;height:18px;fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
}
.assurance-pct{font-weight:700;letter-spacing:-.01em}
.assurance strong{font-size:15px;font-weight:600;color:#c4d1dc}
.assurance>i{width:1px;height:26px;background:rgba(255,255,255,.09)}

/* --- Fineprint --- */
.pricing-fineprint{margin-top:26px}
.fineprint-lead{display:block;margin-bottom:10px;color:#93a7ba}

/* --- Responsive --- */
@media(max-width:1100px){
  .pricing-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-width:800px;margin-inline:auto;gap:24px}
  .plan-head p{min-height:0}}
@media(max-width:720px){
  .pricing-grid{grid-template-columns:1fr;max-width:560px;gap:30px}
  .plan{padding:30px 22px}
  .plan.recommended{padding:38px 24px 30px}
  .price strong{font-size:52px}
  .assurance{flex-direction:column;gap:20px;align-items:flex-start}
  .assurance>i{width:100%;height:1px}}

@media(prefers-reduced-motion:reduce){
  .plan,.plan-button,.plan-button span,.plan-more-toggle,.plan-more-toggle i{transition:none}}

/* =========================================================================
   PRODUCT SECTION
   The workspace is shown as a real capture of app.html (see "real workspace
   snapshot" at the end of this file), framed by .dashboard-wrap. The bento
   below it is three equal cards with icon tiles, a decorative visual and an
   arrow, replacing the wide + two-narrow layout.
   ========================================================================= */

/* --- Frame around the capture --- */
.dashboard-wrap{
  padding:26px 26px 30px;border-radius:34px;
  border:1px solid rgba(255,255,255,.06);
  background:
    radial-gradient(120% 80% at 50% -10%,rgba(97,150,255,.10),transparent 62%),
    linear-gradient(160deg,rgba(61,123,255,.05),rgba(255,255,255,.012));
}

/* --- Bento: three equal cards --- */
.bento-grid{grid-template-columns:repeat(3,1fr);gap:22px;margin-top:22px}
.bento{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;
  min-height:280px;padding:30px;border-radius:20px;
  border:1px solid rgba(255,255,255,.07);
  background:linear-gradient(165deg,rgba(255,255,255,.04),rgba(255,255,255,.01));
  transition:transform .4s cubic-bezier(.2,.7,.2,1),border-color .4s ease,box-shadow .4s ease;
}
.bento-icon{
  width:52px;height:52px;border-radius:15px;margin-bottom:26px;
  display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.035);
  color:#6f9dff;
}
.bento:nth-child(2) .bento-icon,
.bento:nth-child(3) .bento-icon{color:#4fd8c4}
.bento-icon svg{
  width:23px;height:23px;fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
}
.bento h3{font-size:21px;line-height:1.25;letter-spacing:-.02em;margin:0 0 12px;color:#f4f8fc}
.bento p{font-size:15px;line-height:1.6;color:#8ca0b2;margin:0;max-width:34ch}
.bento-arrow{
  margin-top:auto;padding-top:24px;display:inline-flex;
  color:#7a8fa3;transition:transform .35s cubic-bezier(.2,.7,.2,1),color .3s ease;
}
.bento-arrow svg{
  width:21px;height:21px;fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
}

/* --- Decorative art, sized for a third-width card ---
   Previously absolute and layered behind the copy, where it overlapped the
   paragraph in every card. It now occupies its own row in the flex column. */
.bento-art{
  position:relative;align-self:flex-end;flex:0 0 auto;
  margin:22px -6px 0 0;pointer-events:none;opacity:.85;
}
/* 1: stacked brand cards */
/* Sits fully inside the card. Previously right:-26px pushed the front layer
   18px past the bento edge, where overflow:hidden sliced it flat. The 2deg
   rotation adds ~4px of corner extent, so 22px of clearance keeps the tilted
   corners clear too. */
.bento-art-cards{width:170px;height:118px}
.bento-art-cards i{
  position:absolute;width:112px;height:74px;border-radius:12px;
  border:1px solid rgba(120,165,255,.28);
  background:linear-gradient(150deg,rgba(61,123,255,.18),rgba(11,28,52,.6));
}
.bento-art-cards i:nth-child(1){right:16px;bottom:16px;transform:rotate(-11deg);opacity:.5}
.bento-art-cards i:nth-child(2){right:8px;bottom:8px;transform:rotate(-5deg);opacity:.75}
.bento-art-cards i:nth-child(3){right:0;bottom:0;transform:rotate(2deg)}
.bento-art-cards i:nth-child(3):after{
  content:"";position:absolute;left:13px;bottom:13px;width:58px;height:4px;
  border-radius:3px;background:linear-gradient(90deg,#5a8fff,#43d6c5);
}
/* 2: glowing infinity in a ring */
.bento-art-infinity{width:104px;height:104px}
.bento-art-infinity span{
  position:absolute;inset:0;display:grid;place-items:center;border-radius:50%;
  border:1px solid rgba(79,216,196,.22);
  background:radial-gradient(circle,rgba(67,214,197,.13),transparent 68%);
  color:#4fd8c4;
}
.bento-art-infinity svg{
  width:44px;height:28px;fill:none;stroke:currentColor;
  stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;
}
/* 3: bell with concentric ripples */
.bento-art-bell{width:112px;height:112px;display:grid;place-items:center}
.bento-art-bell span{position:relative;z-index:2;display:grid;place-items:center;color:#93a7ba}
.bento-art-bell svg{
  width:40px;height:40px;fill:none;stroke:currentColor;
  stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;
}
.bento-art-bell i{
  position:absolute;border-radius:50%;border:1px solid rgba(147,167,186,.18);
}
.bento-art-bell i:nth-child(2){width:78px;height:78px}
.bento-art-bell i:nth-child(3){width:112px;height:112px;border-color:rgba(147,167,186,.1)}

@media(hover:hover){
  .bento:hover{
    transform:translateY(-4px);
    border-color:rgba(255,255,255,.14);
    box-shadow:0 24px 52px rgba(0,0,0,.3);
  }
  .bento:hover .bento-arrow{transform:translateX(6px);color:#c4d1dc}}

/* --- Responsive --- */
@media(max-width:1100px){
  .bento-grid{grid-template-columns:1fr 1fr}
  .bento:last-child{grid-column:1/-1}}
@media(max-width:720px){

  .bento-grid{grid-template-columns:1fr}
  .bento:last-child{grid-column:auto}
  .bento{min-height:0;padding:26px 22px}
  .bento p{max-width:none}
  /* Art competes with copy at this width. */
  .bento-art{display:none}}

@media(prefers-reduced-motion:reduce){
  .bento,.bento-arrow{transition:none}}

/* =========================================================================
   ASSISTANT SECTION — replicate reference composition
   Copy side gains SVG check bullets, an underlined text link and a 3-up stat
   row (replacing the floating 24/7 chip). The chat window sits inside a large
   orbit ring, with message timestamps, a read receipt and a restructured
   booking card. "Powered by Bookessa" moves below the window.
   ========================================================================= */

/* --- Copy column --- */
.assistant-copy h2{margin:26px 0 22px}
.assistant-copy>p{max-width:500px;font-size:17px;line-height:1.65;color:#93a7ba}
.assistant-copy ul{gap:18px;margin:34px 0}
.assistant-copy li{
  display:flex;align-items:center;gap:14px;
  font-size:16px;color:#c4d1dc;
}
.assistant-copy li span{
  display:inline-flex;flex:0 0 auto;width:auto;height:auto;
  margin:0;border-radius:0;background:none;color:#4fd8c4;
}
.assistant-copy li span svg{
  width:24px;height:24px;fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
}

/* Text link with a rule beneath it. */
.text-link{
  display:inline-flex;align-items:center;gap:14px;
  margin-top:6px;padding-bottom:14px;
  border-bottom:1px solid rgba(255,255,255,.14);
  font-size:16px;font-weight:600;color:#f4f8fc;
  transition:border-color .3s ease;
}
.text-link span{display:inline-flex;color:#6f9dff;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.text-link span svg{
  width:21px;height:21px;fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
}
.text-link:hover{border-color:rgba(255,255,255,.3)}
.text-link:hover span{transform:translateX(5px)}

/* --- Stat row --- */
.assistant-stats{
  display:flex;align-items:center;gap:clamp(20px,3vw,40px);
  margin-top:52px;
}
.assistant-stats>div{display:flex;align-items:center;gap:13px}
.assistant-stats>i{width:1px;height:38px;background:rgba(255,255,255,.09)}
.assistant-stats span{display:inline-flex;flex:0 0 auto;color:#4fd8c4}
.assistant-stats span svg{
  width:30px;height:30px;fill:none;stroke:currentColor;
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
}
.assistant-stats p{display:flex;flex-direction:column;gap:3px;margin:0}
.assistant-stats strong{font-size:15px;font-weight:650;color:#f4f8fc}
.assistant-stats small{font-size:14px;color:#8ca0b2}

/* --- Stage + orbit ring --- */
/* Column widened to fit the 540px window (was capped at 460px). */
.assistant-section{grid-template-columns:minmax(0,600px) minmax(430px,560px)}
.chat-stage{position:relative;display:grid;place-items:center}
/* Kept larger than the 560px-tall window at every column width so the ring
   always encircles it rather than being clipped behind it. */
.chat-orbit{
  position:absolute;width:min(680px,128%);min-width:600px;aspect-ratio:1;
  border:1px solid rgba(120,165,255,.12);border-radius:50%;
  pointer-events:none;
}
/* Dots travel the ring continuously.
   Each <i> is a full-size layer that rotates about the ring's centre; the dot
   itself is drawn by ::before, anchored on the rim. Rotating the parent
   therefore sweeps the dot around the circumference — left/top percentages
   cannot describe a circular path. Only transform animates, so this stays on
   the compositor with no layout or paint work. */
.chat-orbit i{
  position:absolute;inset:0;
  animation:orbitSpin 28s linear infinite;
}
/* Anchored at 12 o'clock on the rim (left:50%, top:0) with negative margins to
   centre the dot on the outline. No translate needed — rotating the parent
   sweeps it around from there. */
.chat-orbit i:before{
  content:"";position:absolute;left:50%;top:0;
  width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border-radius:50%;
}

/* Negative delays set the starting angle: aqua opens upper-left (~300deg),
   blue at ~3 o'clock (90deg), matching the reference. The differing durations
   mean they drift apart rather than orbiting in lockstep. */
.chat-orbit i:nth-child(1){animation-duration:28s;animation-delay:-23.3s}
.chat-orbit i:nth-child(1):before{
  background:#4fd8c4;box-shadow:0 0 14px rgba(79,216,196,.85);
}
.chat-orbit i:nth-child(2){animation-duration:36s;animation-delay:-9s}
.chat-orbit i:nth-child(2):before{
  background:#3d7bff;box-shadow:0 0 14px rgba(61,123,255,.85);
}
@keyframes orbitSpin{to{transform:rotate(360deg)}}

@media(prefers-reduced-motion:reduce){
  /* Stop the orbit, but pin each dot to its starting angle — animation:none
     alone would leave both stacked at 12 o'clock. */
  .chat-orbit i{animation:none}
  .chat-orbit i:nth-child(1){transform:rotate(300deg)}
  .chat-orbit i:nth-child(2){transform:rotate(90deg)}}

/* --- Chat window --- */
.chat-window{
  position:relative;z-index:2;
  border-radius:20px;border:1px solid rgba(255,255,255,.08);
  background:rgba(9,22,38,.95);
  box-shadow:0 34px 80px rgba(0,0,0,.46);
}
.chat-head{
  height:74px;padding:0 20px;gap:13px;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.assistant-avatar{width:38px;height:38px;border-radius:11px;background:rgba(61,123,255,.16)}
.chat-head strong{font-size:16px;color:#f4f8fc}
.chat-head span{font-size:13px;color:#8ca0b2}
.chat-head span i{width:7px;height:7px;background:#4fd8c4;box-shadow:0 0 9px rgba(79,216,196,.9)}
/* Minimise is decorative — a bare rule, not a control that announces an action
   it cannot perform. */
.chat-minimise{
  margin-left:auto;width:15px;height:1.6px;border-radius:2px;
  background:#7a8fa3;
}
.chat-head>button{
  margin-left:14px;display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;color:#93a7ba;transition:color .25s ease;
}
.chat-head>button svg{
  width:19px;height:19px;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;
}
.chat-head>button:hover{color:#f4f8fc}

/* --- Messages --- */
.chat-body{padding:22px 20px;gap:16px;background:none}
.bot-message,.user-message{
  max-width:82%;font-size:14px;line-height:1.55;padding:14px 16px;border-radius:14px;
}
.bot-message{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.06);color:#c4d1dc}
/* #1c63cf rather than the reference's lighter blue: at 11px the timestamp
   needs 4.5:1, and the lighter tone topped out at 3.18:1 even at full white. */
.user-message{
  background:#1c63cf;color:#fff;border:0;
}
/* Timestamp sits inline at the end of the text and floats right, so a short
   single-line message pushes it onto its own row instead of colliding with it.
   (An absolutely-positioned meta only cleared the text when it wrapped.) */
.msg-meta{
  float:right;margin:6px 0 0 14px;
  display:inline-flex;align-items:center;gap:5px;
  font-style:normal;font-size:11px;line-height:1;
  color:rgba(255,255,255,.9);
}
.user-message:after{content:"";display:block;clear:both}
.msg-meta b{display:inline-flex}
.msg-meta svg{
  width:16px;height:10px;fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
}

/* --- Booking card inside the reply --- */
.rich-message{gap:13px}
.rich-message>button{
  display:block;padding:15px;border-radius:12px;text-align:left;
  border:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.03);
}
.rich-message>button i{display:block;font-style:normal}
.rich-message small{
  display:block;font-size:11px;letter-spacing:.13em;color:#8ca0b2;
}
.rich-message strong{
  display:block;margin-top:5px;
  font-family:'Sora','Inter',sans-serif;font-size:24px;color:#f4f8fc;letter-spacing:-.02em;
}
.rich-message strong u{font-size:14px;font-weight:500;text-decoration:none;color:#93a7ba}
.rich-message b{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;min-height:44px;margin-top:14px;border-radius:10px;
  background:#1c63cf;color:#fff;font-size:14px;font-weight:600;
  transition:background .25s ease;
}
.rich-message b svg{
  width:19px;height:19px;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
}
.rich-message>button:hover b{background:#2f7df0}

/* --- Suggestions (kept: the only interaction that works on touch) --- */
.suggestions{padding:0 20px 14px;gap:8px;flex-wrap:wrap}
.suggestions button{font-size:12px;padding:9px 13px;border-radius:999px}

/* --- Input --- */
.chat-input{
  margin:0 20px 20px;height:56px;border-radius:14px;padding:0 8px 0 18px;
  border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.025);
}
.chat-input input{font-size:14px;color:#dce8f2}
.chat-input button{
  width:42px;height:42px;border-radius:11px;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(61,123,255,.16);color:#6f9dff;
  transition:background .25s ease,color .25s ease;
}
.chat-input button svg{
  width:20px;height:20px;fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
}
.chat-input button:hover{background:#1c63cf;color:#fff}

/* --- Powered by, now outside the window --- */
.powered{
  position:relative;z-index:2;
  height:auto;margin-top:20px;gap:9px;font-size:14px;color:#8ca0b2;
}
.powered img{border-radius:4px}

/* --- Responsive --- */
@media(max-width:1100px){
  .assistant-stats{justify-content:center;margin-top:42px}
  .chat-orbit{width:min(560px,104%)}}
@media(max-width:720px){
  .assistant-copy li{font-size:15px;gap:12px}
  .assistant-copy li span svg{width:22px;height:22px}
  .assistant-stats{gap:16px;margin-top:34px}
  .assistant-stats span svg{width:26px;height:26px}
  .assistant-stats strong{font-size:14px}
  .assistant-stats small{font-size:13px}
  .chat-orbit{display:none}
  .chat-head{height:66px;padding:0 16px}
  .chat-body{padding:18px 16px;gap:13px}
  .bot-message,.user-message{font-size:13px;max-width:88%}
  .rich-message strong{font-size:21px}
  .chat-input{margin:0 16px 16px;height:52px}}
@media(max-width:440px){
  .assistant-stats{flex-wrap:wrap;row-gap:18px}
  .assistant-stats>i{display:none}
  .assistant-stats>div{flex:0 0 calc(50% - 8px)}}

@media(prefers-reduced-motion:reduce){
  .text-link,.text-link span,.chat-head>button,
  .chat-input button,.rich-message b{transition:none}}

/* =========================================================================
   ACTIVATION — CENTERED CHECKOUT COMPOSITION
   Replaces the two-column (choice | summary) split with a single centered
   column: stepper -> headline -> four plan cards -> trial banner -> order
   summary -> one full-width gradient CTA. Appended last so it resolves over
   the earlier .activation-* blocks without editing them.
   ========================================================================= */
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

.account-modal.workspace-modal{width:min(860px,100%)}
/* Extra bottom padding gives the CTA's glow somewhere to fall off before it
   reaches the modal's scroll edge, which would otherwise shear it flat. */
.workspace-activation{padding:26px 34px 30px;text-align:center}

/* Topbar stays left-aligned inside the centered shell */
.workspace-activation .activation-topbar{text-align:left;margin-bottom:20px}

/* ---- Step rail ---- */
.activation-steps{display:flex;align-items:center;justify-content:center;gap:0;margin:0 0 30px;padding:0;list-style:none}
.activation-steps li{display:flex;align-items:center;gap:9px;color:#8397aa;font-size:13px;white-space:nowrap}
.activation-steps li i{display:grid;place-items:center;width:26px;height:26px;flex:0 0 auto;border-radius:50%;border:1px solid rgba(146,178,214,.28);background:rgba(255,255,255,.03);color:#8397aa;font-size:12px;font-style:normal;font-weight:600}
.activation-steps li.is-current{color:#f4f8fc}
.activation-steps li.is-current i{border-color:#5aa2ff;color:#8dc0ff;background:rgba(61,123,255,.12)}
.activation-steps li+li:before{content:"";width:58px;height:1px;margin:0 16px;flex:0 0 auto;background:rgba(146,178,214,.22)}

/* ---- Headline ---- */
.workspace-activation .activation-heading{max-width:none;margin:0 0 26px}
.workspace-activation .activation-heading h2{margin:0;font-size:44px;line-height:1.05;letter-spacing:-.035em;color:#f4f8fc}
.workspace-activation .activation-heading h2 em{font-style:normal;color:transparent;background:linear-gradient(95deg,#5aa2ff,#43d6c5);background-clip:text;-webkit-background-clip:text}
.workspace-activation .activation-heading>p:last-child{max-width:none;margin:12px auto 0;color:#93a7ba;font-size:15px}

/* ---- Layout: one centered column ---- */
.workspace-activation .activation-layout{display:block;grid-template-columns:none;gap:0}
.workspace-activation .activation-choice{padding:0;border:0;background:none;box-shadow:none;border-radius:0}

/* ---- Plan cards: four across, centered, Premium highlighted ---- */
.activation-choice .workspace-plan-options{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:0 0 20px;align-items:stretch}
.activation-choice .workspace-plan-option{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:0;min-height:170px;padding:26px 18px 22px;border-radius:18px;border:1px solid rgba(127,157,187,.2);background:rgba(255,255,255,.028);text-align:center}
.activation-choice .workspace-plan-option[data-tier="premium"]:not(.selected),
.activation-choice .workspace-plan-option[data-tier="pro"]:not(.selected){border-color:rgba(127,157,187,.2);background:rgba(255,255,255,.028)}
.activation-choice .workspace-plan-copy{display:block;width:100%;margin:0;padding:0}
.activation-choice .workspace-plan-copy strong{font-size:21px;letter-spacing:-.02em;color:#f4f8fc}
.workspace-plan-tagline{display:block;max-width:19ch;margin:10px auto 0;color:#8ca0b3;font-size:13px;line-height:1.45}
.activation-choice .workspace-plan-price{display:flex;align-items:baseline;justify-content:center;gap:3px;margin:auto 0 0;padding-top:18px}
.activation-choice .workspace-plan-price b{font-size:34px;letter-spacing:-.035em;color:#f4f8fc}
.activation-choice .workspace-plan-price small{color:#93a7ba;font-size:14px}

/* Per-tier price tinting from the older block is dropped: all three prices
   read as one column of white numerals, as in the target composition. */
.activation-choice .workspace-plan-option[data-tier="premium"]:not(.selected) .workspace-plan-price b,
.activation-choice .workspace-plan-option[data-tier="pro"]:not(.selected) .workspace-plan-price b{color:#f4f8fc}
.activation-choice .workspace-plan-option[data-tier="premium"]:not(.selected) .workspace-plan-tagline,
.activation-choice .workspace-plan-option[data-tier="pro"]:not(.selected) .workspace-plan-tagline{color:#8ca0b3}

/* Most-popular badge — pill sitting inside the card's top edge, clear of the
   selected-state check mark that occupies the top-right corner. */
.activation-choice .workspace-plan-badge,
.activation-choice .workspace-plan-option.selected .workspace-plan-badge{position:absolute;top:12px;left:50%;transform:translate(-50%,0);z-index:2;padding:5px 11px;border-radius:999px;background:linear-gradient(95deg,#3d7bff,#37c7ba);color:#fff;font-size:9.5px;font-weight:800;letter-spacing:.09em;line-height:1.4;white-space:nowrap}
.activation-choice .workspace-plan-option.recommended{padding-top:44px}

/* Selected card — aqua ring + glow, matching check in the corner */
.activation-choice .workspace-plan-option.selected{border-color:#43d6c5;background:linear-gradient(165deg,rgba(61,123,255,.16),rgba(67,214,197,.07));box-shadow:0 0 0 1px rgba(67,214,197,.45),0 18px 46px rgba(67,214,197,.16),0 0 44px rgba(67,214,197,.1)}
.activation-choice .workspace-plan-option.selected:after{display:grid;content:"✓";position:absolute;top:11px;right:11px;left:auto;width:25px;height:25px;place-items:center;border-radius:50%;background:#43d6c5;color:#04202c;font-size:13px;font-weight:900;box-shadow:0 6px 16px rgba(67,214,197,.4)}
.activation-choice .workspace-plan-option.selected .workspace-plan-price b,
.activation-choice .workspace-plan-option.selected .workspace-plan-copy strong{color:#fff}
.activation-choice .workspace-plan-option.selected .workspace-plan-tagline{color:#b3cbdb}
.activation-choice .workspace-plan-option:not(:disabled):hover{transform:translateY(-2px);border-color:rgba(108,157,255,.5);background:rgba(61,123,255,.08)}
.activation-choice .workspace-plan-option.selected:not(:disabled):hover{border-color:#43d6c5;background:linear-gradient(165deg,rgba(61,123,255,.2),rgba(67,214,197,.1))}

/* ---- Trial banner ---- */
.workspace-activation .trial-promise{display:flex;align-items:center;justify-content:flex-start;gap:14px;grid-template-columns:none;margin:0 0 22px;padding:16px 18px;border-radius:15px;border:1px solid rgba(67,214,197,.22);background:rgba(67,214,197,.07);text-align:left}
.workspace-activation .trial-number{display:grid;place-items:center;width:42px;height:42px;flex:0 0 auto;border-radius:12px;background:rgba(67,214,197,.14);color:#5adfd1}
.workspace-activation .trial-number svg{width:21px;height:21px}
.workspace-activation .trial-promise>div:last-child>strong{display:block;margin:0 0 3px;color:#f4f8fc;font-size:15px}
.workspace-activation .trial-promise p{margin:0;color:#8ca0b3;font-size:13px}

/* ---- Order summary ---- */
/* overflow:visible — the summary is no longer a clipping card here. While it
   was hidden it cropped the right edge of the "Due today" figure and sheared
   the CTA's glow into a hard-edged rectangle. */
.workspace-activation .activation-summary{min-height:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;overflow:visible;text-align:left}
.workspace-activation .activation-choice,
.workspace-activation .activation-layout{overflow:visible}
.workspace-activation .activation-summary:before{display:none}
.summary-caption{margin:0 0 5px;color:#8397aa;font-size:13px}
.workspace-activation .summary-plan-line{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:0 0 16px;border-bottom:1px solid rgba(146,178,214,.14)}
.workspace-activation .summary-plan-line>span{display:block;color:#dce8f3;font-size:19px;letter-spacing:-.01em}
.workspace-activation .summary-plan-line>span strong{display:inline;color:#f4f8fc;font-size:19px;font-weight:600}
/* font-size:0 collapses the source whitespace between the currency symbol and
   the amount so it reads "€99", not "€ 99"; children restore their own size. */
.workspace-activation .summary-plan-line>b{display:flex;align-items:baseline;gap:0;font-size:0;font-weight:600}
.workspace-activation .summary-plan-line>b>span,
.workspace-activation .summary-plan-line>b>i{margin:0;color:#f4f8fc;font-size:19px;font-style:normal}
.workspace-activation .summary-plan-line>b>small{margin-left:3px;color:#93a7ba;font-size:13px}

/* Due today */
.workspace-activation .due-today{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:0;padding:16px 0 20px;border:0;border-radius:0;background:none}
.workspace-activation .due-today>span{color:#dce8f3;font-size:19px;font-weight:400;letter-spacing:-.01em;text-transform:none}
.workspace-activation .due-today strong{margin:0;color:#43d6c5;font-size:21px;font-weight:700}

/* ---- CTA ---- */
/* The glow is a soft, widely-spread shadow. A large blur with a small offset
   reads as an even bloom; the earlier 40px blur at a 16px offset stacked into
   a visible hard edge where it met the panel bottom. */
.workspace-activation .activation-summary .account-primary{display:flex;align-items:center;justify-content:center;position:relative;width:100%;min-height:60px;padding:0 24px;border-radius:14px;background:linear-gradient(95deg,#3d8bff,#43d6c5);color:#03203a;box-shadow:0 6px 34px -6px rgba(61,150,255,.45)}
.workspace-activation .activation-summary .account-primary:hover{box-shadow:0 8px 42px -6px rgba(61,150,255,.6)}
.workspace-activation .activation-summary .account-primary>span{flex:0 1 auto;color:#03203a;font-size:16px;font-weight:700}
.workspace-activation .activation-summary .account-primary>b{position:absolute;right:24px;color:#03203a;font-size:18px}
.workspace-activation .activation-summary .account-primary .button-busy{color:#03203a}
.workspace-activation .activation-summary .account-primary .button-busy .button-loader{color:#03203a}
.workspace-activation .activation-summary .account-assurance{margin:14px 0 0!important;text-align:center}
.workspace-activation .activation-summary .form-feedback{margin-top:10px;text-align:center}

/* ---- Footer trust row ----
   Reset the block-level padding this element picks up from the site footer
   rules; here it is only a one-line trust strip. */
.workspace-activation .activation-footer{display:flex;align-items:center;justify-content:center;gap:0;min-height:0;margin:18px 0 0;padding:0;border:0;background:none;color:#8397aa;font-size:13px;text-align:center}
.workspace-activation .activation-footer i{width:1px;height:14px;margin:0 18px;border-radius:0;background:rgba(146,178,214,.22)}
.workspace-activation .activation-footer span:first-child{color:#8397aa}

/* Height reconciliation: the earlier breakpoint block sets a min-height on
   .activation-summary for the old two-column card. In this centered flow the
   summary is bare text, so any min-height leaves dead space above the footer.
   The panel likewise no longer needs the tall two-column floor. */
.workspace-activation .activation-summary,
.workspace-activation .activation-choice,
.workspace-activation .activation-layout,
.account-modal.workspace-modal .account-panel{min-height:0}

/* ---- Motion ---- */
.workspace-activation .activation-summary>*{animation:none}

/* ---- Responsive ---- */
@media(max-width:820px){
  .account-modal.workspace-modal{width:min(620px,100%)}
  .workspace-activation{padding:22px 20px 20px}
  .workspace-activation .activation-heading h2{font-size:34px}
  .activation-choice .workspace-plan-options{grid-template-columns:repeat(2,minmax(0,1fr))}
  .activation-choice .workspace-plan-option{min-height:150px;padding:22px 12px 18px}
  .activation-choice .workspace-plan-copy strong{font-size:18px}
  .activation-choice .workspace-plan-price b{font-size:27px}
  .activation-steps li+li:before{width:26px;margin:0 10px}
  .activation-steps li span{font-size:12px}}
@media(max-width:620px){
  .activation-steps li span{display:none}
  .activation-steps li+li:before{width:34px}
  .workspace-activation .activation-heading h2{font-size:29px}
  .activation-choice .workspace-plan-options{grid-template-columns:1fr;gap:22px}
  .activation-choice .workspace-plan-option{min-height:0;flex-direction:row;align-items:center;justify-content:space-between;padding:16px 18px;text-align:left}
  .activation-choice .workspace-plan-option.recommended{padding-top:16px}
  /* keep the pill at its intrinsic width — as a flex child it would stretch.
     The modal background is painted in so the card border cannot show through. */
  .activation-choice .workspace-plan-badge,
  .activation-choice .workspace-plan-option.selected .workspace-plan-badge{top:0;left:18px;right:auto;width:auto;transform:translate(0,-50%)}
  .activation-choice .workspace-plan-option.selected:after{top:50%;right:16px;transform:translateY(-50%)}
  .activation-choice .workspace-plan-option.selected{padding-right:56px}
  .workspace-plan-tagline{display:none}
  .activation-choice .workspace-plan-price{margin:0;padding:0}
  .activation-choice .workspace-plan-price b{font-size:23px}
  .workspace-activation .activation-footer{flex-wrap:wrap;font-size:12px}
  .workspace-activation .activation-footer i{margin:0 12px}}
@media(prefers-reduced-motion:reduce){
  .activation-choice .workspace-plan-option:not(:disabled):hover{transform:none}}

/* =========================================================================
   ACTIVATION STEP 2 — BUSINESS DETAILS
   Left-aligned form inside the same centered shell as step 1.
   ========================================================================= */
.activation-steps li.is-done{color:#93a7ba}
.activation-steps li.is-done i{border-color:rgba(67,214,197,.5);background:rgba(67,214,197,.14);color:#5adfd1}

/* Compact heading for step 2 — the form itself carries the explanation, so the
   subhead is dropped and the title sits closer to the fields. */
.activation-heading-compact{margin-bottom:18px!important}
.activation-heading-compact h2{font-size:34px!important}

.billing-form{display:flex;flex-direction:column;gap:12px;margin:0 0 18px;text-align:left}
/* text-transform:none overrides `.trial-modal label`, which the modal shell
   still matches and which would otherwise render these uppercase at 8px. */
.billing-form label{display:flex;flex-direction:column;gap:6px;color:#c2d3e2;font-size:12.5px;font-weight:500;letter-spacing:normal;text-transform:none}
.billing-form label:has(.label-optional){flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:0 7px}
.billing-form label:has(.label-optional)>input{flex:1 0 100%;margin-top:6px}
.billing-form .label-optional{color:#7a8fa3;font-size:11px;font-weight:400;letter-spacing:normal;text-transform:none}
.billing-form input,
.billing-form select{width:100%;height:44px;margin:0;padding:0 13px;border:1px solid rgba(146,178,214,.2);border-radius:11px;background:rgba(255,255,255,.035);color:#f4f8fc;font-family:inherit;font-size:14px;font-weight:450;outline:none;transition:border-color .2s,background .2s,box-shadow .2s}
.billing-form input::placeholder{color:#7a8fa3;font-size:14px}
.billing-form input:focus,
.billing-form select:focus{border-color:#5aa2ff;background:rgba(61,123,255,.08);box-shadow:0 0 0 3px rgba(61,123,255,.14);transform:none}
.billing-form select{appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%238ca0b3' stroke-width='1.6'%3E%3Cpath d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;background-size:11px;padding-right:34px}
.billing-form option{background:#0b1e36;color:#f4f8fc}
/* --- Consent checkbox --- */
.billing-form .billing-consent{flex-direction:row;align-items:flex-start;gap:11px;margin-top:2px;cursor:pointer}
.billing-form .billing-consent input{width:19px;height:19px;flex:0 0 auto;margin-top:1px;padding:0;appearance:none;border:1px solid rgba(146,178,214,.34);border-radius:6px;background:rgba(255,255,255,.04);cursor:pointer;transition:border-color .2s,background .2s,box-shadow .2s}
.billing-form .billing-consent input:hover{border-color:rgba(146,178,214,.5)}
.billing-form .billing-consent input:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(61,123,255,.28)}
.billing-form .billing-consent input:checked{border-color:#43d6c5;background:#43d6c5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%2304202c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7.4l2.8 2.8L11 4.6'/%3E%3C/svg%3E") center/12px no-repeat}
.billing-form .billing-consent>span{color:#a7bacb;font-size:12px;font-weight:400;line-height:1.55}
.billing-form .billing-consent a{color:#8dc0ff;text-decoration:underline;text-underline-offset:2px}
.billing-form .billing-consent a:hover{color:#b6d8ff}

.billing-form-note{margin:2px 0 0;color:#7a8fa3;font-size:11.5px;line-height:1.45}
.billing-form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.billing-form-row-thirds{grid-template-columns:1.4fr .8fr 1.2fr}

/* Back + continue pair */
.activation-actions{display:flex;align-items:center;gap:12px}
.activation-actions .account-primary{flex:1}
.activation-back{flex:0 0 auto;min-height:60px;padding:0 20px;border:1px solid rgba(146,178,214,.2);border-radius:14px;background:rgba(255,255,255,.035);color:#a7bacb;font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;transition:border-color .2s,background .2s,color .2s}
.activation-back:hover{border-color:rgba(146,178,214,.36);background:rgba(255,255,255,.06);color:#f4f8fc}

/* Step 2 carries a form above the summary, so the order block is condensed:
   the plan line and "Due today" share one row instead of stacking. */
.billing-form ~ .activation-summary .summary-caption{display:none}
.billing-form ~ .activation-summary .summary-plan-line{padding-bottom:12px}
.billing-form ~ .activation-summary .due-today{padding:12px 0 16px}
.billing-form ~ .activation-summary .account-assurance{margin-top:12px!important}

@media(max-width:760px){
  .billing-form-row,
  .billing-form-row-thirds{grid-template-columns:1fr 1fr}
  .billing-form-row-thirds>label:last-child{grid-column:1 / -1}}
@media(max-width:620px){
  .billing-form-row,
  .billing-form-row-thirds{grid-template-columns:1fr}
  .billing-form-row-thirds>label:last-child{grid-column:auto}
  .activation-actions{flex-direction:column-reverse;align-items:stretch}
  .activation-back{min-height:50px}}

/* =========================================================================
   INDUSTRY RAIL — depth + motion
   The rail scrolled, but read flat: 11px labels at #7f93a7 on a near-identical
   background, uniform weight across every item, and a hard clip at both edges
   that made items pop in and out. This adds edge fades, a centre "spotlight"
   that brightens items as they pass, per-category icons and pulsing markers.
   ========================================================================= */
.industry-rail{
  /* Slightly deeper than the page so the band reads as its own surface, with
     a hairline of brand colour along the top edge. */
  background:linear-gradient(180deg,rgba(61,123,255,.05),rgba(2,12,24,.5) 55%,rgba(2,12,24,.42));
  padding:22px 0;
  /* Fade the ends so labels drift in and out instead of being cut off. */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
/* Brand hairline + a soft centre glow that the items pass through. */
.industry-rail:before{
  content:"";position:absolute;inset:0 0 auto;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(61,123,255,.5),rgba(67,214,197,.5),transparent);
}
.industry-rail:after{
  content:"";position:absolute;left:50%;top:0;bottom:0;width:340px;pointer-events:none;
  transform:translateX(-50%);
  background:radial-gradient(ellipse at center,rgba(61,123,255,.10),transparent 70%);
}

.industry-track{position:relative;z-index:1}

/* --- Items --- */
.industry-rail .industry-item{
  display:inline-flex;align-items:center;gap:9px;
  color:#93a7bb;white-space:nowrap;
  transition:color .45s ease,opacity .45s ease;
}
.industry-rail .industry-item svg{
  width:15px;height:15px;flex:0 0 auto;
  fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
  opacity:.75;transition:stroke .45s ease,opacity .45s ease,transform .45s ease;
}
/* The star icon is a filled mark rather than a stroked outline. */
.industry-rail .industry-item:first-child svg path,
.industry-rail .industry-item svg path[d^="M12 3.6"]{fill:currentColor;stroke:none}

/* Centre spotlight: items brighten and lift as they cross the middle. Driven
   by animation-timeline where supported, so it needs no scroll JS. */
@supports (animation-timeline:view()){
  .industry-rail .industry-item{
    animation:railSpotlight linear both;
    animation-timeline:view(inline);
    animation-range:cover 28% cover 72%;
  }}
@keyframes railSpotlight{
  0%,100%{color:#7f93a7;transform:translateY(0) scale(1)}
  50%{color:#e8f2fb;transform:translateY(-1px) scale(1.045)}
}

/* --- Separators --- */
.industry-rail i{
  color:#3d7bff;font-size:11px;line-height:1;
  animation:railTwinkle 3.4s ease-in-out infinite;
}
.industry-rail i:nth-of-type(even){color:#43d6c5;animation-delay:-1.7s}
.industry-rail i:nth-of-type(3n){animation-delay:-.9s}
@keyframes railTwinkle{
  0%,100%{opacity:.32;transform:scale(.86) rotate(0deg)}
  50%{opacity:1;transform:scale(1.14) rotate(90deg)}
}

/* --- Hover: let people actually read it --- */
.industry-rail:hover .industry-track{animation-play-state:paused}
.industry-rail:hover .industry-item{color:#cfdded}

@media(max-width:720px){
  .industry-rail{padding:18px 0}
  .industry-rail .industry-item{gap:7px}
  .industry-rail .industry-item svg{width:13px;height:13px}
  .industry-rail:after{width:200px}}

/* Reduced motion: hold everything still but keep the depth treatment. The
   pre-existing rule already stops the marquee; these stop the accents. */
@media(prefers-reduced-motion:reduce){
  .industry-rail i{animation:none;opacity:.7}
  .industry-rail .industry-item{animation:none}}

/* =========================================================================
   LEGAL PAGES — Privacy Policy & Terms of Service
   Long-form reading layout: a sticky contents rail beside a single measured
   column. Type is larger and looser than the marketing pages because these
   are read in sequence, not scanned.
   ========================================================================= */
.legal-page{max-width:min(1180px,92vw);margin:0 auto;padding:150px 0 110px;position:relative;z-index:1}

.legal-head{max-width:760px;margin-bottom:64px}
.legal-eyebrow{display:flex;width:max-content;align-items:center;gap:9px;margin:0 0 26px;padding:7px 14px;border:1px solid rgba(146,178,214,.18);border-radius:999px;background:rgba(255,255,255,.03);color:#8dc0ff;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.legal-eyebrow:before{content:"";width:6px;height:6px;border-radius:50%;background:linear-gradient(120deg,#3d7bff,#43d6c5)}
.legal-head h1{margin:0 0 20px;font-family:'Sora','Inter',sans-serif;font-size:clamp(38px,5vw,60px);line-height:1.04;letter-spacing:-.035em;color:#f4f8fc}
.legal-head h1 em{font-style:normal;color:transparent;background:linear-gradient(95deg,#5aa2ff,#43d6c5);background-clip:text;-webkit-background-clip:text}
/* :not(.legal-eyebrow) matters — the eyebrow is also a <p> in this header, and
   this rule's higher specificity was zeroing its bottom margin, collapsing the
   badge onto the headline. */
.legal-head>p:not(.legal-eyebrow){margin:0;color:#93a7ba;font-size:17px;line-height:1.62}
.legal-meta{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:24px;padding-top:22px;border-top:1px solid rgba(146,178,214,.14);color:#7f93a7;font-size:13px}
.legal-meta strong{color:#c2d3e2;font-weight:600}

.legal-body{display:grid;grid-template-columns:242px minmax(0,1fr);gap:56px;align-items:start}

/* --- Contents rail --- */
.legal-toc{position:sticky;top:104px;padding:22px;border:1px solid rgba(146,178,214,.16);border-radius:18px;background:linear-gradient(165deg,rgba(19,42,72,.5),rgba(9,24,43,.6))}
.legal-toc strong{display:block;margin-bottom:14px;color:#8397aa;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.legal-toc ol{margin:0;padding:0;list-style:none;counter-reset:toc}
.legal-toc li{counter-increment:toc}
.legal-toc a{display:flex;gap:10px;padding:7px 0;color:#93a7ba;font-size:13.5px;line-height:1.4;text-decoration:none;transition:color .2s}
.legal-toc a:before{content:counter(toc);flex:0 0 18px;color:#5f7488;font-size:11.5px;font-variant-numeric:tabular-nums;padding-top:2px}
.legal-toc a:hover{color:#f4f8fc}
.legal-toc a:hover:before{color:#8dc0ff}

/* --- Prose --- */
.legal-content{max-width:74ch;color:#adc0d1;font-size:15.5px;line-height:1.72}
.legal-content section{scroll-margin-top:104px;padding-bottom:38px}
.legal-content section+section{padding-top:38px;border-top:1px solid rgba(146,178,214,.11)}
.legal-content h2{margin:0 0 16px;font-family:'Sora','Inter',sans-serif;font-size:25px;line-height:1.2;letter-spacing:-.025em;color:#f4f8fc}
.legal-content h3{margin:26px 0 10px;font-size:16.5px;font-weight:650;letter-spacing:-.01em;color:#e2ecf5}
.legal-content p{margin:0 0 15px}
.legal-content p:last-child,.legal-content ul:last-child,.legal-content ol:last-child{margin-bottom:0}
.legal-content a{color:#8dc0ff;text-decoration:underline;text-underline-offset:2px}
.legal-content a:hover{color:#b6d8ff}
.legal-content strong{color:#e2ecf5;font-weight:600}
.legal-content ul,.legal-content ol{margin:0 0 15px;padding-left:22px}
.legal-content li{margin-bottom:9px;padding-left:4px}
.legal-content li::marker{color:#5f7488}
.legal-content ul li::marker{color:#43d6c5}

/* Definition-style rows for data tables (what we collect / why / how long) */
.legal-table{margin:0 0 18px;border:1px solid rgba(146,178,214,.16);border-radius:14px;overflow:hidden}
.legal-table>div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:0}
.legal-table>div+div{border-top:1px solid rgba(146,178,214,.12)}
.legal-table dt,.legal-table dd{margin:0;padding:13px 16px;font-size:14px;line-height:1.55}
.legal-table dt{color:#e2ecf5;font-weight:600;background:rgba(255,255,255,.022);border-right:1px solid rgba(146,178,214,.12)}
.legal-table dd{color:#a7bacb}
.legal-table>div:first-child dt,.legal-table>div:first-child dd{background:rgba(61,123,255,.09);color:#cfe0f2;font-weight:700;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase}

/* Callout for the bits people actually need to notice */
.legal-callout{margin:0 0 18px;padding:16px 18px;border:1px solid rgba(67,214,197,.24);border-left-width:3px;border-radius:12px;background:rgba(67,214,197,.06);color:#bcd3e2;font-size:14.5px;line-height:1.6}
.legal-callout strong{color:#7fe8dc}

/* Placeholders the operator must complete before publishing */
.legal-fill{padding:1px 7px;border:1px dashed rgba(255,183,109,.5);border-radius:6px;background:rgba(255,183,109,.1);color:#ffc987;font-size:.92em;font-style:normal}

.legal-footer-note{max-width:74ch;margin:46px 0 0;padding-top:24px;border-top:1px solid rgba(146,178,214,.14);color:#7f93a7;font-size:13.5px;line-height:1.6}

/* --- Back link --- */
.legal-back{display:inline-flex;align-items:center;gap:8px;margin-bottom:40px;color:#8397aa;font-size:13.5px;text-decoration:none;transition:color .2s}
.legal-back:hover{color:#f4f8fc}
.legal-back b{font-weight:400;transition:transform .25s}
.legal-back:hover b{transform:translateX(-3px)}

@media(max-width:940px){
  .legal-page{padding:120px 0 80px}
  .legal-body{grid-template-columns:1fr;gap:32px}
  .legal-toc{position:static;order:-1}
  .legal-toc ol{columns:2;column-gap:24px}}
@media(max-width:620px){
  .legal-page{padding:104px 0 64px}
  .legal-content{font-size:15px}
  .legal-content h2{font-size:22px}
  .legal-toc ol{columns:1}
  .legal-table>div{grid-template-columns:1fr}
  .legal-table dt{border-right:0;border-bottom:1px solid rgba(146,178,214,.12)}
  .legal-meta{gap:8px 18px}}

/* =========================================================================
   AUTH PLAN PICKER — consistent custom control instead of the native select.
   Kept in the modal flow so the complete list remains reachable on phones.
   ========================================================================= */
.auth-shell.auth-tab-switch{animation:none}
.auth-shell.auth-tab-switch>.account-eyebrow,
.auth-shell.auth-tab-switch>h2,
.auth-shell.auth-tab-switch>p:not(.account-eyebrow),
.auth-shell.auth-tab-switch .account-form>*,
.auth-shell.auth-tab-switch>.auth-trust{animation:authViewForward .24s cubic-bezier(.2,.78,.2,1) both}
.auth-shell.auth-enter-backward>.account-eyebrow,
.auth-shell.auth-enter-backward>h2,
.auth-shell.auth-enter-backward>p:not(.account-eyebrow),
.auth-shell.auth-enter-backward .account-form>*,
.auth-shell.auth-enter-backward>.auth-trust{animation-name:authViewBackward}
.auth-shell.auth-tab-switch>h2{animation-delay:.018s}
.auth-shell.auth-tab-switch>p:not(.account-eyebrow){animation-delay:.034s}
.auth-shell.auth-tab-switch .account-form>*:nth-child(1){animation-delay:.05s}
.auth-shell.auth-tab-switch .account-form>*:nth-child(2){animation-delay:.066s}
.auth-shell.auth-tab-switch .account-form>*:nth-child(3){animation-delay:.082s}
.auth-shell.auth-tab-switch .account-form>*:nth-child(4){animation-delay:.098s}
.auth-shell.auth-tab-switch .account-form>*:nth-child(5){animation-delay:.114s}
.auth-shell.auth-tab-switch .account-form>*:nth-child(6){animation-delay:.13s}
.auth-shell.auth-tab-switch>.auth-trust{animation-delay:.145s}
.auth-shell.auth-enter-forward .auth-tabs:before{animation:authTabForward .3s cubic-bezier(.16,1,.3,1) both}
.auth-shell.auth-enter-backward .auth-tabs:before{animation:authTabBackward .3s cubic-bezier(.16,1,.3,1) both}
@keyframes authViewForward{from{opacity:0;filter:blur(4px);transform:translateX(14px)}to{opacity:1;filter:blur(0);transform:none}}
@keyframes authViewBackward{from{opacity:0;filter:blur(4px);transform:translateX(-14px)}to{opacity:1;filter:blur(0);transform:none}}
@keyframes authTabForward{from{transform:translateX(0)}to{transform:translateX(100%)}}
@keyframes authTabBackward{from{transform:translateX(100%)}to{transform:translateX(0)}}

.auth-plan-field{display:flex;flex-direction:column;gap:8px}
.auth-plan-label{font-family:'Inter',sans-serif;font-size:12px;font-weight:550;letter-spacing:.01em;color:#9fb2c4}
.auth-plan-select{position:relative}
.auth-plan-trigger{width:100%;min-height:64px;display:grid;grid-template-columns:36px minmax(0,1fr) auto 18px;align-items:center;gap:11px;padding:9px 13px;border:1px solid rgba(146,178,214,.22);border-radius:13px;background:linear-gradient(135deg,rgba(255,255,255,.055),rgba(255,255,255,.025));color:#f4f8fc;text-align:left;box-shadow:0 8px 22px rgba(0,0,0,.08);transition:border-color .2s,background .2s,box-shadow .2s,transform .2s}
.auth-plan-trigger:hover{border-color:rgba(122,162,204,.48);background:rgba(255,255,255,.065);transform:translateY(-1px)}
.auth-plan-select.is-open .auth-plan-trigger{border-color:#5790ff;background:rgba(61,123,255,.08);box-shadow:0 0 0 3px rgba(61,123,255,.14)}
.auth-plan-trigger>i,.auth-plan-option>i{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:linear-gradient(145deg,#397cff,#245bd0);color:#fff;font-size:13px;font-style:normal;font-weight:800;box-shadow:0 7px 18px rgba(36,91,208,.25)}
.auth-plan-trigger>i[data-tier="solo"],.auth-plan-option>i[data-tier="solo"]{background:linear-gradient(145deg,#5c7895,#334b65);box-shadow:0 7px 18px rgba(33,55,78,.28)}
.auth-plan-trigger>i[data-tier="premium"],.auth-plan-option>i[data-tier="premium"]{background:linear-gradient(145deg,#8b6cff,#6545e9);box-shadow:0 7px 18px rgba(101,69,233,.28)}
.auth-plan-trigger>i[data-tier="pro"],.auth-plan-option>i[data-tier="pro"]{background:linear-gradient(145deg,#27bfae,#128a80);box-shadow:0 7px 18px rgba(18,138,128,.25)}
.auth-plan-trigger>i>svg,.auth-plan-option>i>svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1px 3px rgba(0,0,0,.18));transition:transform .25s cubic-bezier(.16,1,.3,1)}
.auth-plan-option:hover>i>svg,.auth-plan-option:focus-visible>i>svg{transform:scale(1.08) rotate(-2deg)}
.auth-plan-option[aria-selected="true"]>i{box-shadow:0 0 0 2px rgba(255,255,255,.1),0 9px 22px rgba(72,102,238,.34)}
.auth-plan-trigger>span,.auth-plan-option>span{min-width:0;display:grid;gap:3px}
.auth-plan-trigger strong,.auth-plan-option strong{color:#f4f8fc;font-size:14px;font-weight:700;line-height:1.2}
.auth-plan-trigger small,.auth-plan-option span small{overflow:hidden;color:#8196aa;font-size:11px;font-weight:450;line-height:1.3;text-overflow:ellipsis;white-space:nowrap}
.auth-plan-trigger>b,.auth-plan-option>b{color:#eef5ff;font-size:14px;font-weight:700;white-space:nowrap}
.auth-plan-trigger>b small,.auth-plan-option>b small{color:#7f94a8;font-size:10px;font-weight:500}
.auth-plan-trigger>.auth-plan-chevron{width:16px;height:16px;fill:none;stroke:#8196aa;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .22s,color .22s}
.auth-plan-select.is-open .auth-plan-trigger>.auth-plan-chevron{transform:rotate(180deg);stroke:#a9c5ff}

.auth-plan-menu{display:grid;gap:5px;margin-top:8px;padding:6px;border:1px solid rgba(146,178,214,.2);border-radius:15px;background:linear-gradient(160deg,#102842,#091a2e);box-shadow:0 20px 50px rgba(0,0,0,.32),0 1px 0 rgba(255,255,255,.05) inset;animation:none;transform-origin:top}
.auth-plan-option{position:relative;width:100%;min-height:57px;display:grid;grid-template-columns:36px minmax(0,1fr) auto 20px;align-items:center;gap:11px;padding:8px 10px;border:1px solid transparent;border-radius:11px;background:transparent;color:#f4f8fc;text-align:left;transition:background .16s,border-color .16s,transform .16s}
.auth-plan-option:hover,.auth-plan-option:focus-visible{background:rgba(255,255,255,.06);border-color:rgba(146,178,214,.18);transform:translateX(2px);outline:none}
.auth-plan-option[aria-selected="true"]{background:rgba(61,123,255,.1);border-color:rgba(87,144,255,.34)}
.auth-plan-option>em{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#5790ff;color:#fff;font-size:11px;font-style:normal;font-weight:800;opacity:0;transform:scale(.7);transition:opacity .16s,transform .16s}
.auth-plan-option[aria-selected="true"]>em{opacity:1;transform:scale(1)}
.auth-plan-option mark{display:inline-flex;margin-left:7px;padding:2px 6px;border:1px solid rgba(132,109,255,.3);border-radius:999px;background:rgba(132,109,255,.14);color:#bcb0ff;font-size:8px;font-weight:750;line-height:1.2;text-transform:uppercase;vertical-align:2px}
@keyframes authPlanMenuIn{from{opacity:0;transform:translateY(-5px) scale(.99)}to{opacity:1;transform:none}}
@keyframes authPlanSelectionIn{from{opacity:.25;filter:blur(3px);transform:translateY(4px)}to{opacity:1;filter:blur(0);transform:none}}
.auth-plan-trigger.selection-updated>i,.auth-plan-trigger.selection-updated>span,.auth-plan-trigger.selection-updated>b{animation:authPlanSelectionIn .25s cubic-bezier(.16,1,.3,1) both}

@media(max-width:620px){
  .auth-plan-trigger{grid-template-columns:34px minmax(0,1fr) auto 16px;gap:9px;padding-inline:10px}
  .auth-plan-trigger>i,.auth-plan-option>i{width:34px;height:34px}
  .auth-plan-trigger small{max-width:170px}
  .auth-plan-option{grid-template-columns:34px minmax(0,1fr) auto 18px;gap:9px;padding-inline:8px}
  .auth-plan-option mark{display:none}}

@media(prefers-reduced-motion:reduce){
  .auth-shell.auth-tab-switch,.auth-plan-menu{animation:none}}

/* Auth polish: the tab track, selected pill and fields now behave as one
   tactile surface instead of separate native controls. */
.account-modal .auth-tabs{padding:5px;margin-bottom:25px;border-radius:19px;border-color:rgba(146,178,214,.17);background:linear-gradient(180deg,rgba(1,10,21,.4),rgba(4,15,28,.26));box-shadow:0 1px 0 rgba(255,255,255,.035) inset,0 12px 30px rgba(0,0,0,.12) inset}
.account-modal .auth-tabs:before{border-radius:14px;background:linear-gradient(145deg,rgba(255,255,255,.115),rgba(255,255,255,.055));border-color:rgba(255,255,255,.11);box-shadow:0 8px 24px rgba(0,0,0,.28),0 1px 0 rgba(255,255,255,.08) inset}
.account-modal .auth-tabs button{min-height:46px;border-radius:14px;transition:color .26s ease,transform .22s ease,text-shadow .26s ease}
.account-modal .auth-tabs button:hover{color:#dbe8f4}
.account-modal .auth-tabs button.active{color:#fff;text-shadow:0 1px 12px rgba(255,255,255,.16)}
.account-modal .auth-tabs button:active{transform:scale(.975)}

.account-modal .account-form .auth-field{display:grid;gap:8px;color:#98aec1}
.account-modal .account-form .auth-field-label{display:block;font-family:'Inter',sans-serif;font-size:12px;font-weight:600;letter-spacing:.005em;transition:color .28s ease,transform .28s cubic-bezier(.16,1,.3,1),text-shadow .28s ease}
.account-modal .account-form .auth-input-shell{position:relative;display:block;height:56px;border:1px solid rgba(146,178,214,.22);border-radius:15px;overflow:hidden;background:linear-gradient(145deg,rgba(255,255,255,.052),rgba(255,255,255,.025));box-shadow:0 9px 24px rgba(0,0,0,.08),0 1px 0 rgba(255,255,255,.025) inset;transition:border-color .3s ease,background .3s ease,box-shadow .32s ease,transform .32s cubic-bezier(.16,1,.3,1)}
.account-modal .account-form .auth-input-shell:before{content:"";position:absolute;inset:-45% 35% -45% -10%;pointer-events:none;background:radial-gradient(circle,rgba(61,123,255,.15),transparent 68%);opacity:0;transform:translateX(-18%);transition:opacity .35s ease,transform .45s cubic-bezier(.16,1,.3,1)}
.account-modal .account-form .auth-input-shell:after{content:"";position:absolute;z-index:3;inset:0;height:auto;padding:1.5px;pointer-events:none;border-radius:inherit;background:linear-gradient(115deg,#4c87ff 5%,#7a67ff 48%,#43d6c5 100%);opacity:0;box-shadow:0 0 16px rgba(67,214,197,.3);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;transition:opacity .34s ease,filter .34s ease}
.account-modal .account-form .auth-input-shell>svg{position:absolute;z-index:2;left:16px;top:50%;width:18px;height:18px;fill:none;stroke:#6f879d;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round;transform:translateY(-50%);transition:stroke .28s ease,filter .28s ease,transform .32s cubic-bezier(.16,1,.3,1)}
.account-modal .account-form .auth-input-shell:hover{border-color:rgba(125,166,208,.42);background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.032));transform:translateY(-1px);box-shadow:0 12px 29px rgba(0,0,0,.12),0 1px 0 rgba(255,255,255,.04) inset}
.account-modal .account-form .auth-input-shell:hover>svg{stroke:#91a9be}
.account-modal .account-form .auth-field:focus-within .auth-field-label{color:#72e3d6;transform:translateX(2px);text-shadow:0 0 18px rgba(67,214,197,.2)}
.account-modal .account-form .auth-input-shell:focus-within{border-color:rgba(91,148,255,.9);background:linear-gradient(145deg,rgba(61,123,255,.105),rgba(67,214,197,.035));box-shadow:0 0 0 4px rgba(61,123,255,.12),0 17px 38px rgba(0,0,0,.17),0 1px 0 rgba(255,255,255,.07) inset;transform:translateY(-2px)}
.account-modal .account-form .auth-input-shell:focus-within:before{opacity:1;transform:translateX(0)}
.account-modal .account-form .auth-input-shell:focus-within:after{opacity:1;filter:brightness(1.08)}
.account-modal .account-form .auth-input-shell:focus-within>svg{stroke:#69dfd2;filter:drop-shadow(0 0 6px rgba(67,214,197,.38));transform:translateY(-50%) scale(1.06)}
.account-modal .account-form .auth-input-shell:has(input:not(:placeholder-shown)):not(:focus-within)>svg{stroke:#88a4bd}
.account-modal .account-form .auth-input-shell input{position:relative;z-index:1;width:100%;height:100%;margin:0;padding:0 15px 0 48px;border:0;border-radius:15px;background:transparent;color:#f4f8fc;caret-color:#69dfd2;box-shadow:none;font-family:'Inter',sans-serif;font-size:15px;font-weight:480;outline:none;transform:none;transition:color .25s ease,background .25s ease}
.account-modal .account-form .auth-input-shell input:hover,.account-modal .account-form .auth-input-shell input:focus{border:0;background:transparent;box-shadow:none;transform:none}
.account-modal .account-form .auth-input-shell input::placeholder{color:#6f8498;transition:color .25s ease,transform .3s ease}
.account-modal .account-form .auth-input-shell:focus-within input::placeholder{color:#8198ae;transform:translateX(2px)}
.account-modal .account-form .auth-input-shell input:-webkit-autofill,.account-modal .account-form .auth-input-shell input:-webkit-autofill:hover,.account-modal .account-form .auth-input-shell input:-webkit-autofill:focus{-webkit-text-fill-color:#f7fbff!important;-webkit-box-shadow:0 0 0 1000px #11263e inset!important;caret-color:#69dfd2}

.auth-view-signup .auth-tabs{margin-top:18px;margin-bottom:20px}
.auth-view-signup .account-form{gap:10px}
.auth-view-signup .account-form .auth-input-shell{height:54px}
.auth-view-signup .field-pair{gap:10px}
.auth-password-strength{--password-strength:0%;display:grid;gap:7px;padding:1px 2px 0}
.auth-password-strength>div:first-child{display:flex;align-items:center;justify-content:space-between;gap:12px;color:#7f94a8;font-size:10.5px;line-height:1}
.auth-password-strength>div:first-child span{font-weight:550}
.auth-password-strength>div:first-child strong{color:#7f94a8;font-size:10.5px;font-weight:700;transition:color .3s ease,text-shadow .3s ease}
.auth-password-track{position:relative;height:5px;overflow:hidden;border-radius:999px;background:rgba(146,178,214,.13);box-shadow:0 1px 3px rgba(0,0,0,.2) inset}
.auth-password-track>i{position:absolute;inset:0 auto 0 0;width:var(--password-strength);overflow:hidden;border-radius:inherit;background:linear-gradient(90deg,#ff6685,#ff9b66);box-shadow:0 0 14px rgba(255,102,133,.35);transition:width .48s cubic-bezier(.16,1,.3,1),background .35s ease,box-shadow .35s ease}
.auth-password-track>i:after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 28%,rgba(255,255,255,.7) 50%,transparent 72%);transform:translateX(-110%);animation:passwordStrengthSheen 2.4s ease-in-out infinite}
.auth-password-strength>small{min-height:14px;color:#6f8498;font-size:10px;line-height:1.4;transition:color .3s ease}
.auth-password-strength[data-level="1"]>div:first-child strong{color:#ff8399}
.auth-password-strength[data-level="2"]>div:first-child strong{color:#ffb26f}
.auth-password-strength[data-level="2"] .auth-password-track>i{background:linear-gradient(90deg,#ff7b72,#ffbd67);box-shadow:0 0 14px rgba(255,178,85,.32)}
.auth-password-strength[data-level="3"]>div:first-child strong{color:#79a8ff}
.auth-password-strength[data-level="3"] .auth-password-track>i{background:linear-gradient(90deg,#5a8eff,#7a67ff);box-shadow:0 0 14px rgba(90,142,255,.34)}
.auth-password-strength[data-level="4"]>div:first-child strong{color:#66e0d2;text-shadow:0 0 14px rgba(67,214,197,.2)}
.auth-password-strength[data-level="4"] .auth-password-track>i{background:linear-gradient(90deg,#5a8eff,#736cff 42%,#43d6c5);box-shadow:0 0 16px rgba(67,214,197,.38)}
.auth-password-strength[data-level="4"]>small{color:#72aa9f}
@keyframes passwordStrengthSheen{0%,55%{transform:translateX(-110%)}85%,100%{transform:translateX(110%)}}

@media(min-width:621px){
  .account-modal:has(.auth-view-signup){padding-top:30px;padding-bottom:22px}}

@media(prefers-reduced-motion:reduce){
  .account-modal .auth-tabs button,.account-modal .account-form .auth-field-label,.account-modal .account-form .auth-input-shell,.account-modal .account-form .auth-input-shell:before,.account-modal .account-form .auth-input-shell:after,.account-modal .account-form .auth-input-shell>svg{transition:none}
  .auth-password-track>i{transition:none}.auth-password-track>i:after{animation:none}}

/* =========================================================================
   RESPONSIVE FOUNDATION — final reconciliation layer
   The marketing page grew through several visual passes. This last layer owns
   layout across the full viewport range so later component refinements cannot
   accidentally restore desktop tracks inside phone and tablet breakpoints.
   ========================================================================= */
:root{
  --content-max:1440px;
  --page-gutter:clamp(20px,4vw,64px);
}

html{-webkit-text-size-adjust:100%}
body{min-width:0}
img,svg,video{max-width:100%}
.site-shell{isolation:isolate}
.section,
.section>*,
.hero-copy,
.hero-product,
.assistant-copy,
.chat-stage,
.pricing-grid,
.faq-copy,
.faq-list{min-width:0}

/* One dependable content width. Padding belongs to each section and is
   included in this width because the document uses border-box globally. */
.section{width:100%;max-width:var(--content-max)}
.nav{width:100%;max-width:var(--content-max)}
footer{width:100%;max-width:var(--content-max)}
.final-cta{
  width:calc(100% - (var(--page-gutter) * 2));
  max-width:calc(var(--content-max) - (var(--page-gutter) * 2));
}

/* Keyboard users should enter the long landing page at the content, while the
   control remains invisible in normal browsing. */
.skip-link{
  position:fixed;z-index:200;top:10px;left:10px;
  padding:12px 16px;border-radius:12px;
  background:#f4f8fc;color:#071426;font-size:14px;font-weight:700;
  box-shadow:0 14px 36px rgba(0,0,0,.35);
  transform:translateY(-160%);transition:transform .2s ease;
}
.skip-link:focus{transform:none}

/* Prevent long labels and generated/account content from forcing grid tracks
   wider than the screen. */
h1,h2,h3,p,li,summary,strong,small{overflow-wrap:break-word}
.button,.nav-cta,.plan-button{touch-action:manipulation}
.brand,.text-link{min-height:44px;align-items:center}
.chat-head>button{position:relative}
.chat-head>button:after{
  content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;
  transform:translate(-50%,-50%);
}

/* Compact navigation begins before the old 720px cut-off. At 768–900px the
   full link row was visibly compressed between the brand and account action. */
@media(max-width:900px){
  .nav-wrap{padding:10px clamp(10px,2.5vw,20px) 0}
  .nav{height:62px;padding:0 10px 0 16px;border-radius:19px}
  .nav-links{
    position:absolute;left:0;right:0;top:70px;
    display:flex;flex-direction:column;align-items:stretch;gap:4px;
    max-height:calc(100dvh - 92px);overflow-y:auto;
    padding:10px;border:1px solid rgba(255,255,255,.12);border-radius:18px;
    background:rgba(7,20,38,.97);box-shadow:0 24px 60px rgba(0,0,0,.42);
    backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
    opacity:0;visibility:hidden;transform:translateY(-8px) scale(.985);
    transform-origin:top;transition:opacity .22s ease,visibility .22s ease,transform .22s ease;
  }
  .nav-links a{
    display:flex;align-items:center;justify-content:center;
    min-height:48px;padding:0 18px;border-radius:12px;font-size:14px;
  }
  .nav-links a:hover,.nav-links a:focus-visible{background:rgba(255,255,255,.06)}
  .nav-links.open{opacity:1;visibility:visible;transform:none}
  .sign-in{display:none}
  .menu-button{display:flex;flex:0 0 44px;width:44px;height:44px;border-radius:12px}
  .menu-button:hover{background:rgba(255,255,255,.055)}
  .menu-button i{transition:transform .22s ease,opacity .22s ease}
  .menu-button[aria-expanded="true"] i:first-child{transform:translateY(3px) rotate(45deg)}
  .menu-button[aria-expanded="true"] i:last-child{transform:translateY(-3px) rotate(-45deg)}

  }

/* Reassert the intended single-column tablet composition after the component
   layer's later desktop declaration. */
@media(max-width:1100px){
  .hero{
    grid-template-columns:minmax(0,1fr);
    padding-top:clamp(132px,15vw,160px);
  }
  .assistant-section{
    grid-template-columns:minmax(0,1fr);
    gap:clamp(42px,6vw,68px);
  }
  .assistant-copy{width:min(720px,100%);margin-inline:auto;text-align:center}
  .assistant-copy>div,.assistant-copy ul,.assistant-stats{justify-content:center}
  .assistant-copy>p{margin-inline:auto}
  .assistant-copy ul{width:max-content;max-width:100%;margin-inline:auto;align-items:flex-start;text-align:left}
  .chat-stage{width:min(620px,100%);margin-inline:auto}
  .chat-orbit{min-width:0}
  .pricing-grid{width:min(800px,100%)}
  /* Keep the natural pricing progression on stacked layouts. Earlier visual
     passes promoted Premium to the first position, which made the mobile list
     read Premium → Basic → Pro. */
  .plan.recommended,.plan.recommended.is-visible{order:initial}}

/* Phone and narrow-tablet rhythm. The explicit widths remove the 94vw +
   intrinsic-grid interaction that made the 320px hero children 336px wide. */
@media(max-width:720px){
  :root{--page-gutter:18px}
  html{scroll-padding-top:86px}
  .section{max-width:none}
  .hero,
  .audience,
  .journey,
  .product,
  .assistant-section,
  .pricing,
  .faq{width:100%;padding-left:var(--page-gutter);padding-right:var(--page-gutter)}

  .hero{
    min-height:auto;padding-top:120px;padding-bottom:72px;gap:34px;
    text-align:center;
  }
  .hero-copy{width:100%}
  .hero h1{font-size:clamp(42px,12vw,54px);line-height:.98;letter-spacing:-.058em}
  .hero-copy>p{max-width:38rem;margin:22px auto;font-size:16px;line-height:1.65}
  .eyebrow,.hero-actions,.hero-proof{justify-content:center}
  .hero-actions{width:100%;gap:10px}
  .hero-actions .button{flex:1 1 220px}
  .hero-proof{margin-top:20px;gap:8px;font-size:11px;line-height:1.5}
  .hero-product{width:100%;height:530px}
  .booking-card{width:100%;max-width:430px;min-height:470px;padding:18px;border-radius:24px}
  .ambient-one{width:280px;height:280px;right:0}
  .ambient-two{width:190px;height:190px}
  .orbit-one{width:min(560px,165vw)}
  .orbit-two{width:min(500px,155vw);height:min(500px,155vw)}

  .audience,.journey,.product,.assistant-section,.pricing{padding-top:96px;padding-bottom:96px}
  .audience{padding-bottom:76px}
  .section-intro,.audience-heading{margin-bottom:52px}
  .section-intro h2,.audience-heading h2,.assistant-copy h2,.faq-copy h2,.final-cta h2{
    font-size:clamp(36px,10.5vw,44px);line-height:1.04;letter-spacing:-.05em;
  }
  .section-intro p,.audience-heading>p,.assistant-copy>p,.faq-copy>p,.final-cta>p{
    font-size:15px;line-height:1.65;
  }

  .audience-grid{row-gap:34px}
  .audience-card{grid-template-columns:56px minmax(0,1fr) 20px;gap:15px}
  .audience-note{margin-top:40px}

  .journey-track{padding-left:0}
  .journey-card{gap:16px;padding-bottom:30px}

  .dashboard-wrap{padding:8px;border-radius:24px}

  .bento-grid{gap:12px;margin-top:12px}
  .bento{border-radius:18px}

  .assistant-section{gap:44px;text-align:center}
  .assistant-copy ul{gap:14px;margin-top:28px;margin-bottom:28px}
  .assistant-copy li{font-size:14px;line-height:1.45}
  .assistant-stats{width:100%;justify-content:space-between;gap:10px}
  .assistant-stats>div{gap:8px}
  .assistant-stats p{text-align:left}
  .chat-stage{min-height:0;display:flex;flex-direction:column}
  .chat-window{width:100%;max-width:540px;min-height:0;border-radius:18px}
  .chat-body{min-height:0}
  .suggestions{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
  .suggestions::-webkit-scrollbar{display:none}
  .suggestions button{flex:0 0 auto}
  .powered{margin-top:16px}

  .pricing-grid{margin-inline:auto}
  .plan,.plan.recommended{border-radius:20px}
  .assurance{align-items:stretch}
  .assurance>div{width:100%;justify-content:flex-start}
  .pricing-fineprint{font-size:12px;line-height:1.7}

  .faq{padding-top:76px;padding-bottom:96px;gap:42px}
  .faq-list summary{min-height:68px;font-size:15px;line-height:1.25;gap:16px}
  .faq-list details p{margin-right:0;font-size:14px}

  .final-cta{
    width:calc(100% - 24px);max-width:none;min-height:480px;
    margin-inline:12px;padding:58px 20px;border-radius:26px;
  }
  .final-cta:before{width:175%;top:120px}

  footer{max-width:none;padding:72px var(--page-gutter) 28px}
  .footer-main{gap:0}
  .footer-links{margin-top:42px;gap:28px 20px}
  .footer-links a{display:flex;align-items:center;min-height:40px}}

@media(max-width:480px){
  .nav-cta{min-height:42px;padding:0 14px;font-size:12px;border-radius:12px}
  .brand{gap:8px;font-size:18px}
  .brand img{width:30px;height:30px}
  .hero{padding-top:112px}
  .hero h1{font-size:clamp(39px,12.4vw,49px)}
  .hero-actions{display:grid;grid-template-columns:1fr}
  .button{width:100%;min-height:52px}
  .hero-proof{max-width:310px;margin-inline:auto}
  .hero-product{height:500px}
  .booking-card{min-height:450px;padding:16px}
  .booking-head{margin-bottom:19px}
  .calendar-row{margin:19px 0 16px}
  .cal-nav{min-width:34px}
  .date{width:clamp(37px,11vw,44px);height:61px}
  .times{gap:6px}
  .confirm-button{margin-top:20px}

  .audience,.journey,.product,.assistant-section,.pricing{padding-top:82px;padding-bottom:82px}
  .section-intro h2,.audience-heading h2,.assistant-copy h2,.faq-copy h2,.final-cta h2{
    font-size:clamp(34px,10.5vw,40px)
  }
  .audience-card{grid-template-columns:48px minmax(0,1fr) 18px;padding:18px 0;border:0;border-top:1px solid rgba(255,255,255,.08);border-radius:0;background:none}
  .audience-card:first-child{border-top:0}
  .audience-icon{width:48px;height:48px}
  .audience-note{padding-inline:0}

  .assistant-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .assistant-stats>i{display:none}
  .assistant-stats>div{min-width:0;flex-direction:column;text-align:center}
  .assistant-stats p{text-align:center}
  .assistant-stats small{font-size:11px}
  .chat-head strong{font-size:14px}
  .chat-head span{font-size:11px}
  .chat-head>button{width:32px;height:32px;margin-left:6px}
  .bot-message,.user-message{max-width:92%;font-size:12px;padding:12px 13px}
  .chat-input{margin-inline:12px;padding-left:13px}
  .suggestions{padding-inline:12px}

  .plan,.plan.recommended{padding:28px 20px}
  .price strong{font-size:50px}
  .assurance{padding:22px 0}
  .pricing-fineprint{text-align:left}
  .fineprint-lead{text-align:center}
  .footer-links{grid-template-columns:repeat(2,minmax(0,1fr))}}

@media(max-width:360px){
  :root{--page-gutter:16px}
  .nav-wrap{padding-inline:8px}
  .nav{padding-left:12px}
  .nav .brand span{display:none}
  .nav .brand{flex:0 0 34px}
  .nav-cta{padding-inline:12px}
  .hero h1{font-size:39px}
  .hero-proof{font-size:10px}
  .hero-product{height:475px}
  .booking-card{min-height:430px;padding:14px}
  .service-select{padding:13px}
  .date{width:35px;height:58px}
  .date span{font-size:8px}
  .date strong{font-size:13px}
  .times button{font-size:11px;padding-inline:2px}
  .confirm-button{min-height:50px;font-size:12px}
  .audience-card{grid-template-columns:44px minmax(0,1fr) 16px;gap:12px}
  .audience-icon{width:44px;height:44px}
  .journey-card{gap:12px}
  .journey-icon{width:52px;height:52px}
  .journey-card:not(:last-child):after{left:26px;top:60px}

  .assistant-stats strong{font-size:12px}
  .assistant-stats small{font-size:10px}
  .chat-head{padding-inline:12px;gap:9px}
  .assistant-avatar{width:34px;height:34px}
  .chat-head>button{margin-left:2px}
  .chat-body{padding-inline:12px}
  .rich-message>button{padding:12px}
  .footer-links{gap:24px 14px}}

/* Short landscape screens need breathing room below the fixed navigation but
   should not be forced into a 100vh hero that hides the following content. */
@media(max-height:600px) and (orientation:landscape){
  .hero{min-height:auto;padding-top:106px;padding-bottom:64px}
  .nav-links{max-height:calc(100dvh - 84px)}}

@media(prefers-reduced-motion:reduce){
  .skip-link,.nav-links,.menu-button i{transition:none}}

/* =========================================================================
   PRICING — four equally premium tiers
   The popular plan keeps a stronger signal, but no card changes height or
   position. Each tier owns a distinct accent, aligned content, and full CTA.
   ========================================================================= */
.pricing .section-intro{margin-bottom:58px}
.pricing-grid{
  width:100%;max-width:none;margin-inline:auto;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;align-items:stretch;
}
.plan{
  --plan-accent:#68a2ff;
  --plan-accent-2:#54dcc7;
  --plan-accent-rgb:104,162,255;
  isolation:isolate;overflow:hidden;
  min-height:640px;padding:27px 24px 24px;
  border:1px solid rgba(255,255,255,.11);border-radius:24px;
  background:
    linear-gradient(155deg,rgba(var(--plan-accent-rgb),.105),rgba(255,255,255,.035) 38%,rgba(255,255,255,.014) 100%),
    #0a1a2f;
  box-shadow:0 24px 65px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.08);
}
/* Every tier shares the brand accent; only Premium is emphasised, and it is
   emphasised with contrast and weight rather than a colour of its own. */
.plan:after{
  content:"";position:absolute;z-index:2;left:22px;right:22px;top:0;height:2px;
  border-radius:0 0 999px 999px;
  background:linear-gradient(90deg,transparent,var(--plan-accent),var(--plan-accent-2),transparent);
  opacity:.85;
}
.plan:before,.plan.recommended:before{
  content:"";position:absolute;z-index:-1;
  inset:auto -100px -120px auto;width:280px;height:280px;padding:0;
  border-radius:50%;background:rgba(var(--plan-accent-rgb),.13);
  filter:blur(55px);pointer-events:none;
  -webkit-mask:none;mask:none;
}
.plan.recommended,.plan.recommended.is-visible{
  min-height:640px;padding:27px 24px 24px;transform:none;
  border-color:rgba(104,162,255,.44);
  background:
    linear-gradient(155deg,rgba(61,123,255,.17),rgba(67,214,197,.055) 52%,rgba(255,255,255,.02) 100%),
    #0a1a2f;
  box-shadow:0 28px 74px rgba(16,38,90,.4),inset 0 1px 0 rgba(255,255,255,.14);
}
.plan-topline{
  min-height:31px;margin-bottom:24px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.plan-index{
  display:inline-flex;align-items:center;justify-content:center;
  width:31px;height:31px;border:1px solid rgba(var(--plan-accent-rgb),.34);
  border-radius:10px;background:rgba(var(--plan-accent-rgb),.09);
  color:var(--plan-accent);font-family:'Sora','Inter',sans-serif;
  font-size:10px;font-weight:700;letter-spacing:.04em;
}
.plan-audience,.recommend-label{
  position:static;transform:none;top:auto;left:auto;
  display:inline-flex;align-items:center;min-height:29px;padding:0 11px;
  border:1px solid rgba(var(--plan-accent-rgb),.22);border-radius:999px;
  background:rgba(var(--plan-accent-rgb),.075);box-shadow:none;
  color:#bdcbd8;font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
}
.recommend-label{
  border-color:transparent;
  background:linear-gradient(105deg,var(--plan-accent),var(--plan-accent-2));
  color:#071426;box-shadow:0 8px 24px rgba(61,123,255,.24);
}
.plan-head>span{
  display:block;color:#f4f8fc;
  font-family:'Sora','Inter',sans-serif;font-size:27px;font-weight:600;
  line-height:1.05;letter-spacing:-.035em;text-transform:none;
}
.plan-head p{
  min-height:46px;margin:11px 0 0;
  color:#91a5b8;font-size:13px;line-height:1.55;
}
.price{margin:22px 0 0;align-items:flex-start}
.price sup{margin-top:8px;color:var(--plan-accent);font-size:22px;font-weight:700}
.price strong{font-size:54px;line-height:.95;letter-spacing:-.055em}
.price>span{margin:0 0 8px 7px;color:#8ea2b5;font-size:12px}
.plan-value-note{
  min-height:39px;margin:14px 0 0;
  display:flex;align-items:flex-start;gap:9px;
  color:#9db0c1;font-size:11px;line-height:1.5;
}
.plan-value-note i{
  flex:0 0 auto;width:6px;height:6px;margin-top:5px;border-radius:50%;
  background:var(--plan-accent);box-shadow:0 0 14px rgba(var(--plan-accent-rgb),.8);
}
.plan-divider{height:1px;margin:22px 0 19px;background:rgba(255,255,255,.085)}
.plan-feature-title{
  margin-bottom:14px;color:#748a9e;font-size:9px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;
}
.plan ul{gap:12px}
.plan li{
  gap:10px;color:#c2cfda;font-size:12px;line-height:1.45;
}
.plan-check{
  width:18px;height:18px;margin-top:0;border-radius:6px;
  background:rgba(var(--plan-accent-rgb),.11);border:1px solid rgba(var(--plan-accent-rgb),.2);
}
.plan-check:before,.plan-check:after{background:var(--plan-accent)}
.plan-check:before{left:3px;top:8px}
.plan-check:after{left:6px;top:10.5px;width:9px}
.plan-more-toggle{
  min-height:38px;margin-top:10px;color:#9eb0c1;font-size:11px;
}
.plan-more-toggle:hover{color:var(--plan-accent)}
/* Three quiet tiers and one filled one. Every button previously carried the
   same filled gradient, so nothing was actually recommended. */
.plan-button,.plan-button.primary{
  min-height:52px;height:auto;margin-top:auto;
  border-radius:14px;font-size:12px;font-weight:800;
}
.plan-button{
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.04);
  color:#e6eef7;box-shadow:none;
}
.plan-button.primary{
  border:0;
  background:linear-gradient(108deg,var(--plan-accent),var(--plan-accent-2));
  color:#061322;
  box-shadow:0 13px 32px rgba(var(--plan-accent-rgb),.22);
}
.plan .plan-divider + .plan-feature-title + ul + .plan-button,
.plan ul + .plan-button{margin-top:auto}
.plan-button:hover{
  background:rgba(255,255,255,.085);
  border-color:rgba(255,255,255,.3);
}
.plan-button.primary:hover{
  background:linear-gradient(108deg,var(--plan-accent),var(--plan-accent-2));
  box-shadow:0 18px 42px rgba(var(--plan-accent-rgb),.34);
}
.plan-cta-note{
  min-height:16px;margin-top:12px;color:#71869a;
  font-size:9px;line-height:1.4;text-align:center;
}
@media(hover:hover){
  .plan:not(.recommended):hover,.plan.recommended:hover{
    transform:translateY(-5px);border-color:rgba(var(--plan-accent-rgb),.42);
    box-shadow:0 32px 78px rgba(0,0,0,.34),0 0 38px rgba(var(--plan-accent-rgb),.07);
  }}
@media(max-width:1280px){
  .pricing-grid{width:min(920px,100%);grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
  .plan,.plan.recommended{min-height:610px}}
@media(max-width:720px){
  .pricing .section-intro{margin-bottom:48px}
  .pricing-grid{width:min(560px,100%);grid-template-columns:1fr;gap:20px}
  .plan,.plan.recommended{min-height:0;padding:26px 21px 22px}
  .plan-head p,.plan-value-note{min-height:0}
  .plan-head>span{font-size:25px}
  .price strong{font-size:50px}
  .plan-button,.plan-button.primary{margin-top:28px}
  .plan .plan-divider + .plan-feature-title + ul + .plan-button,
  .plan ul + .plan-button{margin-top:28px}}
@media(prefers-reduced-motion:reduce){
  .plan,.plan.recommended{transition:none}}

/* =========================================================================
   PRODUCT SECTION — real workspace snapshot
   Captures of the actual app (see _workspace_shots.py), composed as one
   scene: the desktop window with the phone overhanging its lower-right
   corner, so both surfaces are shown at once and the phone breaks the frame
   edge to give the group depth. Below 720px the window is dropped and the
   phone stands alone at full size.
   ========================================================================= */
.ws-shot{margin:0;display:flex;flex-direction:column;gap:26px}

/* The phone hangs into this padding, so the caption is never crowded. */
.ws-stage{position:relative;padding-bottom:6.5%}

/* --- Desktop window --- */
.ws-frame{
  position:relative;border-radius:22px;
  background:rgba(6,17,31,.92);
  /* Contact, ambient and lift, plus a lit top edge inside the glass. */
  box-shadow:
    0 2px 4px rgba(2,8,20,.4),
    0 18px 40px rgba(2,8,20,.42),
    0 48px 110px rgba(2,8,20,.55),
    inset 0 1px 0 rgba(255,255,255,.09);
}
/* A hairline that catches light at the top and fades toward the base —
   a flat border reads as a box, this reads as an edge. */
.ws-frame:before{
  content:"";position:absolute;inset:0;z-index:2;
  border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(
    170deg,rgba(255,255,255,.30),rgba(140,180,255,.14) 32%,rgba(255,255,255,.045) 68%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}
/* Fallback for engines without mask-composite: a plain hairline, i.e. what
   the frame looked like before. */
@supports not ((-webkit-mask-composite:xor) or (mask-composite:exclude)){
  .ws-frame{border:1px solid rgba(255,255,255,.10)}
  .ws-frame:before{display:none}
}
/* Clip the capture to the frame without clipping the phone that overhangs it. */
.ws-frame>.ws-chrome{border-radius:22px 22px 0 0}
.ws-frame>.ws-screen{border-radius:0 0 22px 22px}

/* --- Browser chrome --- */
.ws-chrome{
  position:relative;z-index:1;
  display:flex;align-items:center;gap:16px;
  height:46px;padding:0 18px;
  border-bottom:1px solid rgba(255,255,255,.07);
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
}
/* The dots and an empty mirror take equal space, so the URL pill sits dead
   centre on the frame rather than on the room left over beside them. */
.ws-chrome:after{content:"";flex:1}
.ws-dots{display:inline-flex;gap:7px;flex:1}
.ws-dots i{width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,.16)}
.ws-dots i:nth-child(1){background:#ff5f57}
.ws-dots i:nth-child(2){background:#febc2e}
.ws-dots i:nth-child(3){background:#28c840}
.ws-url{
  display:inline-flex;align-items:center;gap:8px;
  margin:0 auto;padding:6px 16px;border-radius:8px;
  border:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.04);
  font-size:12px;color:#93a7ba;letter-spacing:.01em;
}
.ws-url svg{
  width:13px;height:13px;flex:0 0 auto;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;color:#4fd8c4;
}

/* --- The captures --- */
.ws-screen{display:block;width:100%;height:auto}

/* --- Phone, overhanging the window's lower-right corner --- */
.ws-phone{
  --bezel:6px;
  position:absolute;right:1.5%;bottom:0;width:15.5%;min-width:132px;
  z-index:3;padding:var(--bezel);border-radius:30px;
  background:linear-gradient(155deg,#2b3a52,#0b1524 52%,#1d2a3d);
  box-shadow:
    0 2px 6px rgba(2,8,20,.5),
    0 22px 45px rgba(2,8,20,.55),
    0 50px 90px rgba(2,8,20,.5),
    inset 0 1px 0 rgba(255,255,255,.16);
}
.ws-phone .ws-screen{border-radius:calc(30px - var(--bezel))}
/* Side button and volume rocker, drawn on the bezel edges. */
.ws-phone:before,.ws-phone:after{
  content:"";position:absolute;width:2px;border-radius:2px;
  background:rgba(255,255,255,.18);
}
.ws-phone:before{right:-3px;top:26%;height:9%}
.ws-phone:after{left:-3px;top:20%;height:6%}

.ws-caption{
  text-align:center;font-size:13px;color:#7a8fa3;letter-spacing:.01em;
  text-wrap:balance;
}
.ws-caption-dot{
  display:inline-block;vertical-align:middle;
  width:6px;height:6px;margin:-1px 8px 0 0;border-radius:50%;background:#4fd8c4;
  box-shadow:0 0 10px rgba(79,216,196,.75);
}

/* The window settles first, then the phone rises into place behind it. */
@media(min-width:721px){
  .dashboard-wrap.reveal .ws-phone{
    opacity:0;transform:translateY(26px) scale(.97);
    transition:opacity .7s ease .25s,transform .8s cubic-bezier(.2,.7,.2,1) .25s;
  }
  .dashboard-wrap.reveal.is-visible .ws-phone{opacity:1;transform:none}
}
@media(hover:hover) and (min-width:721px){
  .ws-frame,.ws-phone{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
  .dashboard-wrap:hover .ws-frame{transform:translateY(-4px)}
  .dashboard-wrap:hover .ws-phone{transform:translateY(-9px)}
}

/* --- Phone only, at full size --- */
@media(max-width:720px){
  /* Give the device room to breathe inside the section card. */
  .dashboard-wrap{padding:26px 8px 22px}
  .ws-shot{align-items:center;gap:18px}
  .ws-frame{display:none}
  .ws-stage{padding-bottom:0;display:flex;justify-content:center}
  .ws-phone{
    --bezel:9px;
    position:static;width:min(320px,82vw);min-width:0;border-radius:44px;
    box-shadow:
      0 3px 8px rgba(2,8,20,.5),
      0 26px 60px rgba(2,8,20,.6),
      inset 0 1px 0 rgba(255,255,255,.14);
  }
  .ws-phone .ws-screen{border-radius:calc(44px - var(--bezel))}
  .ws-phone:before{height:52px}
  .ws-phone:after{height:34px}
  .ws-caption{font-size:12px}
}

@media(prefers-reduced-motion:reduce){
  .ws-frame,.ws-phone,.dashboard-wrap.reveal .ws-phone{transition:none}
  .dashboard-wrap.reveal .ws-phone{opacity:1;transform:none}
}

/* =========================================================================
   FOUNDER NOTE + IMPRINT
   The note sits between pricing and the FAQ, where the "can I trust this
   price?" doubt peaks. Deliberately quiet: no portrait, no pull-quote marks,
   no gradient. A signature is the only ornament.
   ========================================================================= */
.founder-note{
  width:min(720px,calc(100% - 36px));margin:0 auto;padding:44px 46px 40px;
  border:1px solid rgba(255,255,255,.08);border-left:2px solid rgba(79,216,196,.55);
  border-radius:4px 22px 22px 4px;
  background:linear-gradient(140deg,rgba(255,255,255,.035),rgba(255,255,255,.012));
}
.founder-note .kicker{display:block;margin-bottom:20px;color:#7fe8dc}
.founder-note p{
  margin:0 0 16px;max-width:58ch;
  font-size:17px;line-height:1.65;color:#c2d1df;
}
.founder-note p:last-of-type{margin-bottom:0}
.founder-sign{
  display:flex;align-items:center;gap:16px;margin-top:28px !important;
  font-size:15px;color:#f4f8fc;
}
.founder-rule{flex:0 0 34px;height:1px;background:rgba(255,255,255,.28)}
.founder-sign>span:last-child{display:flex;flex-direction:column;gap:3px;font-weight:600}
.founder-sign small{font-size:13px;font-weight:400;color:#8ca0b2}

/* Imprint: entity details a paying EU customer expects to be able to find. */
.footer-entity{
  display:flex;flex-wrap:wrap;gap:6px 14px;
  margin-top:28px;padding-top:22px;
  border-top:1px solid rgba(255,255,255,.06);
  font-size:12px;line-height:1.6;color:#6e8295;
}
.footer-entity>*+*:before{content:"·";margin-right:14px;color:#435364}
.footer-entity a{color:#8ca0b2}
.footer-entity a:hover{color:#c2d1df}

@media(max-width:720px){
  .founder-note{padding:32px 24px 28px;border-radius:3px 18px 18px 3px}
  .founder-note p{font-size:16px}
  .footer-entity{gap:4px 0;flex-direction:column}
  .footer-entity>*+*:before{content:none}
}

/* =========================================================================
   PHONE PAINT BUDGET
   Measured in WebKit (Safari's engine) while scrolling the page at 390px:
   p95 frame time 44ms with 5 dropped frames, against 18ms and none once the
   backdrop-filters and the large blur() glows were off. Chromium showed no
   difference, which is why this only ever bit on iPhone.

   backdrop-filter forces the browser to re-rasterise whatever sits behind the
   element on every frame, and the sticky nav does that for the entire page.
   filter:blur(110px) on a 720px box is a very large offscreen buffer. Both are
   replaced here with flat fills and pre-blurred radial gradients, which cost
   the compositor nothing and look near-identical at this size.
   ========================================================================= */
@media (pointer:coarse),(max-width:900px){
  .glass,.nav-links,.modal-backdrop,.account-backdrop{
    backdrop-filter:none;-webkit-backdrop-filter:none;
  }
  /* The nav loses its blur, so it needs a real background to stay legible. */
  .nav.glass{background:rgba(9,22,41,.92)}

  /* Soft-edged gradients instead of blurred solids: same glow, no filter. */
  .dashboard-glow{filter:none;opacity:.16}
  .audience:before{
    filter:none;
    background:radial-gradient(50% 50% at 50% 50%,rgba(61,123,255,.20),transparent 72%);
  }
  .cta-light{
    filter:none;background:none;opacity:1;
    background-image:radial-gradient(50% 50% at 50% 50%,rgba(67,214,197,.34),transparent 72%);
  }
  .plan:before,.plan.recommended:before{
    filter:none;
    background:radial-gradient(50% 50% at 50% 50%,rgba(var(--plan-accent-rgb),.20),transparent 70%);
  }
  .audience-card:before{
    filter:none;
    background:radial-gradient(50% 50% at 50% 50%,rgba(67,214,197,.22),transparent 70%);
  }

  /* A 28px rise over 850ms reads as "the page is still loading" on a phone,
     because sections only start once they are already a tenth on screen. */
  .reveal{
    transform:translateY(12px);
    transition:opacity .4s ease,transform .45s cubic-bezier(.2,.7,.2,1);
  }
}