/* SUGA AI TECH: the existing dark palette, with glass, depth and purposeful motion. */
:root{--suga-ink:#f4f1ff;--suga-muted:#b6bfd7;--suga-violet:#ad8bfa;--suga-teal:#72e8d3;--suga-edge:#b69af22e;--suga-ease:cubic-bezier(.22,.8,.25,1)}
.landing,.account-page{background-color:#0d1125;background-image:radial-gradient(ellipse at 5% 0,#3b275b85,transparent 52%),radial-gradient(ellipse at 100% 75%,#14394d80,transparent 58%);color:var(--suga-ink)}
.landing :is(button,a),.account-page :is(button,a){-webkit-tap-highlight-color:transparent}
:is(.landing,.account-page,.tech-ui) :is(button,a,input,select,summary):focus-visible{outline:2px solid var(--suga-teal);outline-offset:4px}
.suga-wordmark{display:inline-flex;align-items:center;gap:11px;color:var(--suga-ink);text-decoration:none;font-size:19px;font-weight:800;letter-spacing:-.5px}
.suga-wordmark img{width:36px;height:36px;filter:drop-shadow(0 0 12px #9f7cf34a)}
.suga-wordmark span>small{display:block;font-size:9px;letter-spacing:2.4px;color:#a7bad6;margin-top:2px;font-weight:600}
/* Public page: a brand reveal that never blocks navigation. */
.landing .landing-top{max-width:1240px;padding:23px 30px}
.landing .landing-top .suga-wordmark{display:inline-flex;background:none;padding:0;border:0;border-radius:0;font-size:19px}
.landing>.wrap{max-width:1240px;padding:0 30px 36px}
.landing .home-hero{position:relative;isolation:isolate;overflow:hidden;min-height:550px;padding:48px;border:1px solid var(--suga-edge);border-radius:28px;background:radial-gradient(ellipse at 5% 10%,#6845ac35,transparent 54%),linear-gradient(130deg,#1d1c38e6,#142335dc);box-shadow:inset 0 1px #ffffff0b,0 26px 80px #0003}
.landing .home-hero::after{content:'';pointer-events:none;position:absolute;z-index:-1;width:70%;height:130%;left:27%;top:-35%;border:1px solid #aa8eee18;border-radius:48%;transform:rotate(-25deg);box-shadow:0 0 0 45px #ad8bfa04,0 0 0 90px #ad8bfa03;animation:sugaOrbit 22s ease-in-out infinite alternate}
.landing .home-copy{position:relative;z-index:1}
.landing .home-copy>*{animation:sugaEnter .8s var(--suga-ease) both}
.landing .home-copy h1{animation-delay:.09s;font-size:clamp(36px,4.3vw,56px);margin:21px 0;max-width:610px}
.landing .home-copy .home-lead{animation-delay:.17s;max-width:460px;font-size:16px;line-height:1.75;color:#bdc9df}
.landing .home-copy .hero-trial-note{animation-delay:.24s}
.landing .home-copy .home-trust{animation-delay:.3s;gap:14px;font-size:11px;color:#a9bbd3}
.landing .home-eyebrow{border-color:#ab92f63d;background:#9b78eb0d;font-size:10px;letter-spacing:1.5px;padding:9px 13px}
.landing .hero-visual{animation:sugaEnter 1.05s .2s var(--suga-ease) both}
.landing .hero-3d-caption{background:#151c32d9;border:1px solid #b5a0f746;box-shadow:0 16px 45px #0005;backdrop-filter:blur(24px)}
.landing .trial-spotlight{margin:20px 0 42px;padding:28px 34px;border:1px solid #70d8d33b;background:linear-gradient(115deg,#252244c9,#142b3ac9);border-radius:23px;box-shadow:inset 0 1px #ffffff09}
.landing .trial-spotlight h3{font-size:clamp(25px,3vw,34px);max-width:660px}
.landing .trial-clock{box-shadow:0 14px 40px #0004;border-color:#91e5d438;background:#152c39c9}
.landing .home-plan{border-color:var(--suga-edge);background:linear-gradient(150deg,#24243edd,#172035ee);box-shadow:inset 0 1px #ffffff09,0 10px 30px #0002;backdrop-filter:blur(20px);transition:transform .3s var(--suga-ease),border-color .3s,box-shadow .3s}
.landing .home-plan:hover,.landing .home-plan:focus-within{border-color:#ab8dfa99;box-shadow:0 16px 48px #7850bc26,inset 0 1px #ffffff16}
.landing .home-plan.pro{background:linear-gradient(150deg,#183b3ddd,#172035ee)}
.landing .home-plan.biz{background:linear-gradient(150deg,#3a2b3bdd,#172035ee)}
.landing .home-plan button{border-radius:12px;min-height:46px}
.landing .product-demo,.landing .landing-faq{border-color:var(--suga-edge);background:linear-gradient(135deg,#20213ce8,#151e33ef);box-shadow:inset 0 1px #ffffff08}
/* Account: glass over the Suga ribbon, with real authentication feedback. */
.account-page{min-height:100dvh;overflow-x:clip}
.account-page::before,.account-page::after{content:'';position:fixed;z-index:-1;pointer-events:none;width:75vw;height:100vh;left:-20vw;top:8vh;border:1px solid #b491ff20;border-radius:48%;transform:rotate(-34deg);box-shadow:0 0 0 35px #977be808,0 0 0 70px #977be805,0 0 0 110px #977be803;animation:sugaOrbit 24s ease-in-out infinite alternate}
.account-page::after{left:auto;right:-53vw;top:-40vh;border-color:#71dfd51a;animation-delay:-10s}
.account-page main{position:relative;max-width:1200px;padding:28px 30px 24px}
.account-page .account-top{margin-bottom:46px}
.account-page .account-home-link{border-color:#a590d730;background:#ffffff04;min-height:39px;padding:8px 13px;font-size:12px}
.account-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(350px,470px);gap:70px;align-items:center;min-height:600px}
.account-intro{padding-bottom:25px;animation:sugaEnter .85s var(--suga-ease) both}
.account-page .tag{margin:0 0 25px;font-size:10px;letter-spacing:2px;color:#bfa8f4;display:flex;align-items:center;gap:9px}
.account-page .tag::before{content:'';width:6px;height:6px;background:var(--suga-teal);border-radius:50%;box-shadow:0 0 14px #72e8d3}
.account-page h1{font-size:clamp(44px,5.2vw,65px);line-height:1.08;letter-spacing:-2.5px;margin:20px 0}
.account-page #accountIntro{font-size:16px;color:#b7c3da;line-height:1.85;max-width:420px}
.account-orbit{position:relative;margin:40px 0 30px;width:126px;height:126px;border:1px solid #a88aff39;border-radius:32px;display:grid;place-items:center;transform:rotate(-8deg);background:linear-gradient(135deg,#9b6ff51a,#72e8d30b);box-shadow:0 24px 60px #0003,inset 0 1px #ffffff20}
.account-orbit::before,.account-orbit::after{content:'';position:absolute;inset:-15px;border:1px solid #a88aff1c;border-radius:40px}
.account-orbit::after{inset:-29px;border-color:#a88aff0d;border-radius:49px}
.account-orbit img{width:68px;height:68px;transform:rotate(8deg);filter:drop-shadow(0 0 20px #ae8cf946);animation:sugaBreathe 5s ease-in-out infinite}
.account-features{display:flex;flex-wrap:wrap;gap:8px 17px;color:#aebad2;font-size:11px}
.account-features span::before{content:'✓';margin-right:6px;color:var(--suga-teal)}
.account-page .account-card{position:relative;margin:0;padding:34px;border:1px solid #ae92ed40;border-radius:26px;background:linear-gradient(140deg,#29283eaa,#161e32dd);box-shadow:inset 0 1px #ffffff14,0 24px 75px #0004;backdrop-filter:blur(30px);animation:sugaEnter .8s .1s var(--suga-ease) both;transition:border-color .3s,box-shadow .3s}
.account-page .account-card h2{font-size:24px;letter-spacing:-.6px;margin:19px 0 9px}
.account-page .account-card>p{font-size:13px;line-height:1.7;color:#b4c0d6}
.auth-visual{display:flex;align-items:center;gap:12px;color:#b3bfd5;font-size:11px;letter-spacing:.3px}
.auth-state-icon{position:relative;display:grid;place-items:center;width:45px;height:45px;border-radius:15px;border:1px solid #af91ed45;background:#a989ef13;color:#c5aff6;font-size:23px;flex:none;transition:color .3s,border-color .3s,background .3s}
.auth-state-icon svg{width:21px;height:21px}
.account-page button{min-height:44px;border-radius:12px;font-size:13px;transition:transform .22s var(--suga-ease),background .22s,box-shadow .22s}
.account-page button:not(:disabled):hover{transform:translateY(-2px);box-shadow:0 7px 22px #9572ee22}
.account-page #login{display:flex;align-items:center;justify-content:center;gap:11px;width:100%;background:linear-gradient(110deg,#9066ef,#557bdf);border:1px solid #bd9dff55;box-shadow:0 7px 26px #8f63ed24;min-height:50px}
.account-page #login::before{content:'G' / '';display:grid;place-items:center;width:23px;height:23px;border-radius:7px;background:#ffffffef;color:#423961;font-size:15px;font-weight:800}
.account-page #status{min-height:24px;font-size:12px;margin-bottom:0;color:#aab9d1}
.account-page #startOptions{margin:24px 0}
.account-page #startOptions h3{font-size:12px;color:#c8d1e4;font-weight:600;margin-bottom:10px}
.account-page .start-options{gap:8px}
.account-page .start-options button{min-width:0;min-height:44px;padding:10px 8px;font-size:11px;border-color:#b39be22b;background:#11182c5e}
.account-page .start-options button[aria-pressed=true]{background:#956cf526;border-color:#b295f46b;color:#ece3ff}
.account-page #startDescription{font-size:11px;line-height:1.65;min-height:0;margin:10px 0 0;color:#9eacc7}
.account-page .notice{font-size:11px;line-height:1.7;color:#a8b5ce}
.account-page #accountNotice{max-width:460px;margin:20px 0 0}
.account-page footer{margin-top:40px;padding-top:20px;border-top:1px solid #b39be215;font-size:10px;line-height:1.8;color:#8d9bb6}
.account-page footer a{color:#bca8e6}
.account-page #billingBox{background:#101a2e66;border:1px solid #b69af224;border-radius:16px;padding:19px;margin:20px 0}
.account-page #billingBox h3{font-size:15px}
.account-page #signed-in{margin-top:22px;padding-top:20px;border-top:1px solid #ad90df25}
.account-page #profileForm small{font-size:11px;color:#aab8ce}
.account-page #profileForm label{font-size:12px}
.account-page #profileForm :is(input,select){min-height:44px;font-size:13px;border-color:#9d8cc243;background:#0c1429a8}
.account-page[data-auth-state=loading] .auth-state-icon::after{content:'';position:absolute;inset:-5px;border:1px solid transparent;border-top-color:#bca0ff;border-right-color:#72e8d3;border-radius:19px;animation:sugaSpin 1.1s linear infinite}
.account-page[data-auth-state=success] .auth-state-icon{color:var(--suga-teal);border-color:#72e8d366;background:#72e8d315}
.account-page[data-auth-state=success] .auth-state-icon svg{display:none}
.account-page[data-auth-state=success] .auth-state-icon::before{content:'✓';font-size:25px}
.account-page[data-auth-state=error] .auth-state-icon{color:#ff98b2;border-color:#ff98b26b;background:#ff98b212}
.account-page[data-auth-state=error] #status{color:#ffc0ce}
.account-page[data-auth-state=loading] #login:disabled::before{background:transparent;border:2px solid #ffffff35;border-top-color:#fff;content:'';border-radius:50%;animation:sugaSpin 1s linear infinite}
/* Client shell: compact icon rail, expanded on hover/focus or pinned open. */
.tech-ui .tech-avatar{display:none}
.tech-nav-icon svg{display:block;width:20px;height:20px}
.tech-quick-icon svg{display:block;width:22px;height:22px}
.tech-ui .tech-sidebar-pin{display:none}
@media(min-width:901px){
 body.tech-with-sidebar{--tech-sidebar:84px}
 body.tech-with-sidebar.tech-sidebar-pinned{--tech-sidebar:248px}
 .tech-with-sidebar .tech-sidebar{width:84px;padding:23px 13px;gap:16px;overflow:hidden;background:linear-gradient(155deg,#2c2343f7,#1c1b32f5 65%,#171d30f7);border-color:#a88aff2c;backdrop-filter:blur(32px);transition:width .34s var(--suga-ease),box-shadow .34s}
 .tech-with-sidebar .tech-sidebar:is(:hover,:focus-within),.tech-sidebar-pinned .tech-sidebar{width:248px;box-shadow:20px 0 65px #080a1c5c}
 .tech-with-sidebar>.wrap,.tech-with-sidebar #rl-accountbar{transition:margin-left .34s var(--suga-ease),width .34s var(--suga-ease)}
 .tech-ui .tech-brand{gap:14px;padding:0 7px;min-height:45px;width:220px;white-space:nowrap}
 .tech-ui .tech-brand img{width:43px;height:43px}
 .tech-ui .tech-brand strong{font-size:23px}
 .tech-ui .tech-brand small{letter-spacing:2.5px;font-size:10px}
 .tech-ui .tech-identity{position:relative;min-height:50px;display:flex;flex-direction:column;justify-content:center;gap:1px;padding:5px 0 5px 63px;background:transparent;border-color:transparent;border-radius:14px;box-shadow:none;width:220px}
 .tech-ui .tech-avatar{position:absolute;display:grid;place-items:center;left:5px;top:4px;width:44px;height:44px;border-radius:15px;font-size:13px;font-weight:750;color:#e0d0ff;border:1px solid #aa8bef55;background:linear-gradient(135deg,#a78bfa29,#67dcca0f)}
 .tech-ui .tech-identity strong{font-size:14px;max-width:155px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .tech-ui .tech-identity small{font-size:8px}
 .tech-ui .tech-plan-badge{font-size:10px;border:0;padding:2px 0;background:none;color:#afa2cf}
 .tech-ui .tech-sidebar-pin{display:flex;align-items:center;gap:17px;min-height:37px;padding:6px 15px;background:#ffffff04;color:#bcacd7;border:1px solid #a88aff1c;border-radius:11px;white-space:nowrap;overflow:hidden;box-shadow:none;flex:none;font-size:11px}
 .tech-ui .tech-sidebar-pin>span:first-child{font-size:21px;flex:none;width:18px;text-align:center}
 .tech-ui .tech-navigation{width:100%;gap:5px;overflow-x:hidden;scrollbar-width:none}
 .tech-ui .tech-navigation button{position:relative;flex:none;gap:17px;min-height:42px;width:100%;padding:10px 15px;border:1px solid transparent;border-radius:11px;white-space:nowrap;overflow:hidden;font-size:12px;transition:background .2s,border-color .2s,color .2s}
 .tech-ui .tech-nav-icon{font-size:20px;width:20px;transition:color .2s,filter .2s}
 .tech-ui .tech-navigation button[aria-current=page]{background:linear-gradient(110deg,#9e71ed38,#9e71ed12);border-color:#b390f64d;box-shadow:inset 3px 0 #b394ff,0 2px 15px #8966ed13}
 .tech-ui .tech-navigation button[aria-current=page] .tech-nav-icon{color:#d5c1ff;filter:drop-shadow(0 0 6px #b794ff)}
 .tech-ui .tech-nav-caption{height:15px;min-height:15px;overflow:hidden;padding:5px 15px 0;white-space:nowrap;font-size:9px}
 .tech-ui .tech-home-link{display:block;white-space:nowrap;font-size:11px;padding:12px 15px}
 .tech-ui .tech-sidebar-footer{font-size:10px;line-height:1.7;white-space:nowrap;min-width:210px;border-color:#a88aff20;padding-left:8px}
 .tech-ui .tech-sidebar-footer a{font-size:11px}
 .tech-with-sidebar:not(.tech-sidebar-pinned) .tech-sidebar:not(:hover):not(:focus-within) :is(.tech-brand>span,.tech-identity>small,.tech-identity>strong,.tech-plan-badge,.tech-navigation button>span:not(.tech-nav-icon),.tech-nav-caption,.tech-home-link,.tech-sidebar-footer,.tech-sidebar-pin>span+span){opacity:0;visibility:hidden}
 .tech-with-sidebar.tech-sidebar-pinned .tech-sidebar :is(.tech-brand>span,.tech-identity>small,.tech-identity>strong,.tech-plan-badge,.tech-navigation button>span,.tech-nav-caption,.tech-home-link,.tech-sidebar-footer,.tech-sidebar-pin>span+span){opacity:1;visibility:visible}
 .tech-ui .tech-sidebar :is(.tech-brand>span,.tech-identity>small,.tech-identity>strong,.tech-plan-badge,.tech-navigation button>span+span,.tech-sidebar-footer){transition:opacity .18s .06s}
}
.tech-ui .tech-sidebar{border-color:#a88aff30}
.tech-ui .panel-nav{border-color:#a88aff28;background:linear-gradient(110deg,#221e39ed,#182138ed);box-shadow:inset 0 1px #ffffff08,0 8px 24px #0002;border-radius:18px;padding:17px 21px}
.tech-ui .panel-nav strong{font-size:23px;letter-spacing:-.6px}
.tech-ui #realOverview{border-color:#a88aff2d;background:radial-gradient(ellipse at 8% 10%,#8764cb20,transparent 60%),linear-gradient(120deg,#222039,#172c3a);border-radius:21px;box-shadow:inset 0 1px #ffffff08}
.tech-ui .tech-quick-access{margin:24px 0;animation:sugaEnter .55s var(--suga-ease) both}
.tech-quick-title{margin:0 0 15px}
.tech-quick-title small{font-size:9px;letter-spacing:1.8px;color:#a89ac1}
.tech-quick-title h2{margin:7px 0;font-size:21px;font-weight:650;letter-spacing:-.5px;color:#ece8f7}
.tech-quick-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px}
.tech-ui .tech-quick-card{position:relative;min-width:0;display:flex;align-items:center;gap:13px;min-height:94px;text-align:left;padding:18px;border:1px solid #a88aff26;border-radius:18px;background:linear-gradient(135deg,#29243d9e,#1a233697);color:#e7e3f5;box-shadow:inset 0 1px #ffffff08;transition:transform .25s var(--suga-ease),border-color .25s,box-shadow .25s;overflow:hidden}
.tech-ui .tech-quick-card:hover{transform:translateY(-4px);border-color:#b396f77a;box-shadow:0 10px 28px #67429820}
.tech-quick-icon{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:#a78bfa14;border:1px solid #ac8ff32a;color:#c6b0fa;font-size:23px}
.tech-quick-card strong{display:block;font-size:12px;font-weight:650;line-height:1.5}
.tech-ui .tech-quick-card small{display:block;font-size:10px;font-weight:400;line-height:1.6;color:#9fadc5;margin-top:4px}
.tech-quick-arrow{position:absolute;right:12px;top:10px;font-size:12px;opacity:.55;color:#bdacf0}
.tech-ui .cards>.card{border-color:#b398f32e;background:linear-gradient(140deg,#28243dd9,#171f34e8);box-shadow:inset 0 1px #ffffff09,0 12px 28px #0002;min-height:140px}
.tech-ui .business-grid>.business-kpi{border-color:#b398f32e;background:linear-gradient(140deg,#28243dd9,#171f34e8);box-shadow:inset 0 1px #ffffff09}
.tech-ui .tech-area-selected{animation:sugaAreaEnter .42s var(--suga-ease) both}
.tech-ui .month-cards-panel:has(.month-card-options[open]){animation:none;filter:none!important;transform:none!important}
@keyframes sugaAreaEnter{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@keyframes sugaEnter{from{opacity:0;filter:blur(7px);transform:translateY(13px)}to{opacity:1;filter:blur(0);transform:translateY(0)}}
@keyframes sugaOrbit{to{transform:rotate(-17deg) translateY(30px)}}
@keyframes sugaBreathe{50%{filter:drop-shadow(0 0 31px #b496f97a);transform:rotate(8deg) translateY(-5px)}}
@keyframes sugaSpin{to{transform:rotate(360deg)}}
@media(max-width:1150px){.tech-quick-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.account-layout{gap:36px}.landing .home-hero{padding:35px}}
@media(max-width:900px){.account-layout{gap:25px;grid-template-columns:minmax(0,1fr) minmax(340px,1fr)}.account-page h1{font-size:47px}.account-page .account-card{padding:27px}.tech-ui .tech-sidebar{background:linear-gradient(155deg,#2d2343f7,#171e30f7)}.tech-ui .tech-brand{margin-top:14px}.tech-ui .tech-sidebar-pin{display:none}}
@media(max-width:720px){.account-page main{padding:21px 20px}.account-page .account-top{margin-bottom:30px}.account-layout{grid-template-columns:minmax(0,1fr);gap:20px;min-height:0}.account-intro{padding-bottom:0}.account-page h1{font-size:40px;letter-spacing:-1.6px;margin:13px 0}.account-page .tag{font-size:9px;margin:0}.account-page #accountIntro{font-size:13px;line-height:1.7;max-width:500px;margin-bottom:0}.account-orbit,.account-features{display:none}.account-page .account-card{padding:25px}.account-page #accountNotice{margin-top:15px}.account-page footer{margin-top:25px}.landing .landing-top{padding:18px}.landing>.wrap{padding:0 14px 25px}.landing .home-hero{padding:28px 24px;min-height:0;border-radius:23px}.landing .home-copy h1{font-size:38px}.landing .home-copy .home-lead{font-size:14px}.landing .trial-spotlight{padding:24px}.landing .landing-top #landingMotion{font-size:0;min-width:40px;min-height:38px}.landing .landing-top #landingMotion::before{content:'Ⅱ';font-size:13px}.landing .landing-top #landingMotion[aria-pressed=true]::before{content:'▶'}.suga-wordmark{font-size:17px;gap:8px}.suga-wordmark img{width:30px;height:30px}.suga-wordmark span>small{font-size:8px}.landing .landing-top-actions{gap:7px}.landing .landing-top a{font-size:12px;padding:10px 12px}}
@media(max-width:500px){.tech-quick-grid{gap:9px}.tech-ui .tech-quick-card{min-height:100px;padding:14px 11px;gap:9px;align-items:flex-start;flex-direction:column}.tech-quick-icon{width:29px;height:29px;font-size:19px;border-radius:9px}.tech-quick-card strong{font-size:12px}.tech-ui .tech-quick-card small{font-size:10px;margin-top:2px}.tech-quick-title h2{font-size:19px}.tech-ui .tech-quick-access{margin:20px 0}.account-page .account-home-link{font-size:11px;padding:8px 10px}.account-page .suga-wordmark{font-size:16px}.account-page .account-card h2{font-size:22px}}
body.motion-paused :is(.home-copy>*,.hero-visual,.home-hero::after,.tech-quick-access,.tech-area-selected){animation:none!important;filter:none!important}
body.motion-paused .home-hero::after{animation:none!important}
body.motion-paused :is(.tech-sidebar,.tech-with-sidebar>.wrap,.tech-quick-card){transition:none!important}
body.motion-paused .tech-quick-card:hover{transform:none}
@media(prefers-reduced-motion:reduce){:is(.landing,.account-page,.tech-ui),:is(.landing,.account-page,.tech-ui) *,:is(.landing,.account-page,.tech-ui) *::before,:is(.landing,.account-page,.tech-ui) *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}