/* My HUB · login (25% sign in / 75% presentation) and customer layout + Dashboard. Brand: ink #111640, cobalt #2456ff, HUB pink, sun; Bricolage + Instrument Sans. */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- login ---------- */
body.hub-welcome{height:100vh;height:100dvh;overflow:hidden;background:#070d2c}
body.hub-welcome>header,body.hub-welcome .bottom-nav{display:none}
body.hub-welcome #app{height:100vh;height:100dvh}
body.hub-welcome #status:not(:empty),body.hub-v4 #status:not(:empty){position:fixed;z-index:120;left:50%;top:max(14px,env(safe-area-inset-top));transform:translateX(-50%);width:min(92vw,460px);border:0;border-radius:14px;box-shadow:0 14px 40px rgba(17,22,64,.25);padding:13px 16px;font-size:14px}
.welcome{display:grid;grid-template-columns:minmax(360px,25%) minmax(0,1fr);height:100%;overflow:hidden}
.w-auth{background:#f6f7fb;overflow-y:auto;overscroll-behavior:contain;padding:max(28px,env(safe-area-inset-top)) clamp(24px,2.6vw,48px) max(20px,env(safe-area-inset-bottom)) max(clamp(24px,2.6vw,48px),env(safe-area-inset-left))}
.w-auth-inner{min-height:100%;display:flex;flex-direction:column;max-width:400px;margin:0 auto}
.w-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.w-top .logo{font-size:clamp(34px,3vw,46px)}
.w-lang{padding:6px 12px;font-size:12px}
.w-form{margin:auto 0;padding:clamp(16px,4vh,48px) 0 0}
.w-form h1{font-size:clamp(28px,2.3vw,36px);letter-spacing:-.03em;margin:0 0 8px}
.w-lead{margin:0 0 clamp(16px,3vh,32px);color:#5b5f80;font-size:clamp(15px,1.15vw,18px);line-height:1.45}
.w-field{position:relative;display:flex!important;align-items:center;gap:12px;height:clamp(46px,6vh,54px);margin:0 0 14px!important;padding:0 14px;background:#fff;border:1px solid #d6d9ea;border-radius:10px;color:#5b5f80;font-weight:500!important}
.w-field:focus-within{border-color:#2456ff;box-shadow:0 0 0 3px rgba(36,86,255,.15)}
.w-field input{flex:1;min-width:0;border:0;margin:0;padding:0;height:100%;background:transparent;font-size:16px;outline:0!important;color:#111640}
.w-field input::placeholder{color:#6b7092}
.w-eye{border:0;background:none;padding:4px;color:#5b5f80;display:grid}
.w-eye.on{color:#2456ff}
.w-two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.w-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:15px;margin:2px 0 clamp(14px,2.5vh,22px)}
.w-row a{color:#2456ff;font-weight:500}
.w-check{display:flex!important;align-items:center;margin:0!important;font-weight:500!important;font-size:15px!important;cursor:pointer}
.w-check input{width:20px;height:20px;margin:0 10px 0 0;accent-color:#2456ff}
.w-submit{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:clamp(46px,6vh,54px);border-radius:10px;font-size:17px;background:#2456ff;border-color:#2456ff}
.w-or{display:flex;align-items:center;gap:12px;margin:clamp(14px,2.6vh,26px) 0 clamp(12px,2vh,18px);color:#858caf;font-size:14px}
.w-or:before,.w-or:after{content:"";flex:1;height:1px;background:#e0e2f0}
.w-social{display:grid;gap:12px}
.w-oauth{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;height:clamp(46px,6vh,54px);border-radius:10px;font-size:16px;background:#fff;border-color:#d6d9ea}
.w-hr{border:0;border-top:1px solid #e0e2f0;margin:clamp(14px,3vh,30px) 0 clamp(12px,2.4vh,24px)}
.w-swap{font-size:15px;margin:0;color:#5b5f80;line-height:1.5}
.w-swap a,.w-legal a{color:#2456ff;text-decoration:underline;text-underline-offset:3px}
.w-swap a{font-size:16px;font-weight:500}
.w-legal{font-size:14px;color:#5b5f80;margin:clamp(12px,3vh,32px) 0 0;line-height:1.5}

/* presentation */
.w-show{position:relative;overflow:hidden;color:#fff;background:radial-gradient(1200px 700px at 70% 120%,#1b3f9e 0,rgba(27,63,158,0) 60%),radial-gradient(900px 600px at 10% 0,#0c1a52 0,rgba(12,26,82,0) 70%),#050a24;padding:clamp(32px,7vh,80px) clamp(32px,4.5vw,80px)}
.w-stars{position:absolute;inset:0;opacity:.7;background-image:radial-gradient(1px 1px at 12% 18%,#fff,transparent),radial-gradient(1px 1px at 28% 62%,#cfd8ff,transparent),radial-gradient(1.5px 1.5px at 44% 12%,#fff,transparent),radial-gradient(1px 1px at 63% 38%,#fff,transparent),radial-gradient(1px 1px at 78% 8%,#dfe5ff,transparent),radial-gradient(1.5px 1.5px at 88% 30%,#fff,transparent),radial-gradient(1px 1px at 52% 80%,#cfd8ff,transparent),radial-gradient(1px 1px at 6% 86%,#fff,transparent),radial-gradient(1px 1px at 94% 64%,#fff,transparent),radial-gradient(1px 1px at 35% 40%,#fff,transparent);pointer-events:none}
.w-planet{position:absolute;left:-30%;right:-30%;top:72%;height:160%;border-radius:50%;background:radial-gradient(ellipse at 50% 0,#0f2b78 0,#061033 45%,#030719 70%);box-shadow:0 -2px 0 rgba(120,170,255,.55),0 -30px 90px rgba(60,120,255,.45);pointer-events:none}
.w-copy{position:relative;max-width:680px}
.w-copy h2{font-size:clamp(40px,4.6vw,76px);line-height:1;letter-spacing:-.035em;margin:0 0 clamp(14px,2.4vh,24px)}
.w-copy h2 em{font-style:normal;background:linear-gradient(90deg,#2ea8ff,#3d6dff);-webkit-background-clip:text;background-clip:text;color:transparent}
.w-copy h2 i{font-style:normal;color:#ff3d7f}
.w-copy p{color:#d7dcf5;font-size:clamp(16px,1.45vw,23px);line-height:1.4;margin:0}
.w-services{position:relative;list-style:none;margin:clamp(18px,3.4vh,34px) 0 0;padding:0;display:flex;gap:clamp(18px,2.6vw,42px);flex-wrap:wrap}
.w-services li{display:flex;flex-direction:column;gap:2px}
.w-services i{display:grid;place-items:center;width:44px;height:44px;border-radius:8px;margin-bottom:10px;color:#fff}
.w-services b{font-size:16px}.w-services small{font-size:13px;color:#aeb5d8}
.c-ai{background:linear-gradient(135deg,#7c4dff,#4b2bd8)}.c-blue{background:linear-gradient(135deg,#3d7bff,#1f4fd8)}.c-teal{background:linear-gradient(135deg,#27c4b4,#169a8e)}.c-sun{background:linear-gradient(135deg,#ffd23f,#ffaa1f)}.c-pink{background:linear-gradient(135deg,#ff6fa5,#ff3d7f)}.c-green{background:linear-gradient(135deg,#2fd08a,#13a36f)}
.w-note{position:absolute;right:clamp(28px,4vw,70px);top:clamp(130px,18vh,190px);margin:0;font:600 clamp(22px,2.2vw,34px)/1.15 'Caveat','Bradley Hand','Segoe Print',cursive;color:#c7d6ff;transform:rotate(-8deg);text-align:right}
.w-note svg{display:block;margin:6px auto 0 30%;color:#9fb6ff}
.w-laptop{position:absolute;right:-3%;bottom:-8%;width:min(66%,960px);transform:perspective(2000px) rotateY(-16deg) rotateX(8deg) rotateZ(-5deg);transform-origin:right bottom}
.w-screen{display:grid;grid-template-columns:24% 1fr;aspect-ratio:16/10.4;background:#f5f7fc;border:12px solid #161a26;border-radius:22px 22px 6px 6px;overflow:hidden;box-shadow:0 50px 120px rgba(0,0,0,.6);color:#111640;font-size:clamp(7px,.66vw,11px)}
.w-base{height:16px;margin:0 -4%;background:linear-gradient(#c9ccd8,#8d91a0);border-radius:0 0 18px 18px}
.w-m-side{background:#0d1640;color:#dfe3ff;padding:10% 6%;display:flex;flex-direction:column;gap:1px}
.w-m-logo{font-size:1.8em!important;margin:0 0 10%;pointer-events:none}
.w-m-logo .pitancos-brand__name,.w-m-logo .pitancos-brand__suffix{color:#fff}
.w-m-side span{display:flex;align-items:center;gap:6%;padding:4% 6%;border-radius:5px;white-space:nowrap}
.w-m-side span.on{background:#2456ff;color:#fff}
.w-m-main{padding:3% 4%;display:flex;flex-direction:column;gap:3%;min-width:0}
.w-m-top{display:flex;align-items:center;justify-content:flex-end;gap:3%}
.w-m-search{display:flex;align-items:center;gap:4px;width:45%;background:#fff;border:1px solid #e0e3ef;border-radius:5px;padding:1.5% 2.5%;color:#858caf;margin-right:auto;margin-left:auto}
.w-m-av{display:grid;place-items:center;width:2.2em;height:2.2em;border-radius:50%;background:#2456ff;color:#fff}
.w-m-hello{display:flex;justify-content:space-between;align-items:center}
.w-m-hello b{display:block;font:800 1.9em 'Bricolage Grotesque',sans-serif}.w-m-hello small{color:#5b5f80}
.w-m-btn{background:#2456ff;color:#fff;border-radius:5px;padding:2% 4%;font-weight:700;white-space:nowrap}
.w-m-cards,.w-m-tools,.w-m-reco{display:grid;grid-template-columns:repeat(4,1fr);gap:2%}
.w-m-cards span,.w-m-tools span{background:#fff;border:1px solid #e8eaf3;border-radius:6px;padding:6%;display:flex;flex-direction:column;gap:2px;min-width:0}
.w-m-cards i,.w-m-tools i{display:grid;place-items:center;width:2.4em;height:2.4em;border-radius:5px;color:#fff;margin-bottom:3px}
.w-m-cards small{color:#5b5f80}.w-m-cards b{font-weight:800}
.w-m-tools span{flex-direction:row;align-items:center;gap:6%;font-weight:600;white-space:nowrap;overflow:hidden}
.w-m-tools i{margin:0;flex:none}
.w-m-h{font:800 1.3em 'Bricolage Grotesque',sans-serif}
.w-m-reco{grid-template-columns:repeat(3,1fr)}
.w-m-reco span{height:5.5em;border-radius:7px;color:#fff;padding:5%;font-weight:700}
.w-m-reco .r1{background:linear-gradient(135deg,#1f4fd8,#0f2a8a)}.w-m-reco .r2{background:linear-gradient(135deg,#1a1d33,#2b2f55)}.w-m-reco .r3{background:linear-gradient(135deg,#1b3a9e,#0b1748)}

@media (min-width:821px) and (max-height:820px){.w-top .logo{font-size:34px}.w-lead{font-size:15px}.w-field{margin-bottom:10px!important}.w-legal{font-size:13px}}
@media (min-width:821px) and (max-height:720px){.w-or{margin:10px 0}.w-social{gap:8px}.w-hr{margin:12px 0}.w-form{padding-top:8px}}
@media (min-width:821px) and (max-width:1280px){.w-note{display:none}.w-laptop{width:78%;right:-10%}}
@media (min-width:821px) and (max-height:760px){.w-laptop{width:56%}.w-services{margin-top:16px}}

/* phones: brand band on top, sign in fills the rest; only the form area moves when the keyboard opens */
@media (max-width:820px){
.welcome{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr)}
.w-show{order:-1;padding:max(16px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) 22px max(18px,env(safe-area-inset-left))}
.w-copy h2{font-size:clamp(24px,7.2vw,34px);margin:0 0 6px}.w-copy h2 br,.w-copy p br{display:none}
.w-copy p{font-size:13px}
.w-services{margin-top:12px;gap:4px;justify-content:space-between;flex-wrap:nowrap}
.w-services li{align-items:center;text-align:center;flex:1;min-width:0}
.w-services i{width:34px;height:34px;margin-bottom:4px}.w-services b{font-size:11px}.w-services small{display:none}
.w-laptop,.w-note,.w-planet{display:none}
.w-auth{border-radius:20px 20px 0 0;margin-top:-14px;position:relative;padding-top:20px}
.w-top .logo{font-size:28px}
.w-form{margin:0;padding-top:16px}
.w-form h1{font-size:26px}.w-lead{font-size:14px;margin-bottom:16px}
.w-legal{margin-top:14px;font-size:13px}
}
@media (max-width:820px) and (max-height:760px){.w-copy p,.w-services{display:none}.w-lead{display:none}.w-or{margin:12px 0 10px}.w-hr{margin:14px 0 10px}}
@media (max-width:820px){.welcome[data-mode=signup] .w-copy p,.welcome[data-mode=signup] .w-services,.welcome[data-mode=signup] .w-lead{display:none}}

/* ---------- customer layout ---------- */
body.hub-v4{height:100vh;height:100dvh;overflow:hidden}
body.hub-v4>header,body.hub-v4 .bottom-nav,body.hub-v4 .client-bar{display:none!important}
body.hub-v4 #app{height:100vh;height:100dvh}
.shell.v3.v4{display:grid;grid-template-columns:248px minmax(0,1fr);height:100%;min-height:0;max-width:none;margin:0;background:#f5f7fc;overflow:hidden}
.v4-side{background:#0d1640;color:#fff;display:flex;flex-direction:column;gap:14px;padding:max(22px,env(safe-area-inset-top)) 14px 16px;overflow-y:auto;scrollbar-width:none;min-height:0}
.v4-side::-webkit-scrollbar{display:none}
.v4-logo{display:flex;align-items:center;justify-content:space-between;padding:0 8px 4px}
.v4-brand{font-size:32px!important}
.v4-brand .pitancos-brand__name,.v4-brand .pitancos-brand__suffix{color:#fff!important}
.v4-close{display:none;background:none;border:0;color:#fff;padding:4px}
.v4-nav{display:flex;flex-direction:column;gap:2px}
.v4-nav a{display:flex;align-items:center;gap:14px;padding:9px 14px;border-radius:10px;color:#e3e7ff;font-size:15px;font-weight:500;text-decoration:none;line-height:1.2}
.v4-nav a:hover{background:rgba(255,255,255,.07)}
.v4-nav a.active{background:#2456ff;color:#fff;font-weight:600}
.v4-nav svg{flex:none}
.v4-nav hr{border:0;border-top:1px solid rgba(255,255,255,.14);margin:10px 4px}
.v4-lock{margin-left:auto;opacity:.55;display:grid}
.v4-upgrade{margin-top:auto;position:relative;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:4px}
.v4-upgrade b{font-size:16px;padding-right:40px}.v4-upgrade small{color:#b8bedf;font-size:13px;line-height:1.35;padding-right:40px}
.v4-upgrade>svg{position:absolute;right:14px;top:14px;color:#9db2ff}
.v4-upgrade .button{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:12px;background:#2456ff;border:0;color:#fff;border-radius:10px;padding:11px}
.v4-side .client-switch{margin-top:8px;background:transparent;color:#fff;border-color:rgba(255,255,255,.25)}
.v4-body{display:flex;flex-direction:column;min-width:0;min-height:0;height:100%}
.v4-top{flex:none;display:flex;align-items:center;gap:18px;padding:max(14px,env(safe-area-inset-top)) 32px 10px;background:#f5f7fc}
.v4-burger{display:none;padding:8px;border-radius:10px;background:#fff}
.v4-search{margin-left:auto;flex:0 1 400px;display:flex;align-items:center;gap:10px;height:46px;padding:0 14px;background:#fff;border:1px solid #e0e3ef;border-radius:10px;color:#111640}
.v4-search:focus-within{border-color:#2456ff}
.v4-search input{flex:1;min-width:0;border:0;margin:0;padding:0;height:100%;background:transparent;font-size:14px;outline:0!important}
.v4-top details{position:relative}
.v4-top summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;border-radius:10px;padding:6px}
.v4-top summary::-webkit-details-marker{display:none}
.v4-bell summary{position:relative;color:#111640}
.v4-bell summary i{position:absolute;top:6px;right:7px;width:9px;height:9px;border-radius:50%;background:#ff3d7f;border:2px solid #f5f7fc}
.v4-av{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#2456ff;color:#fff;font-size:18px}
.v4-me summary span{display:flex;flex-direction:column;line-height:1.2}.v4-me summary span b{font-size:14px}.v4-me summary span small{font-size:12px;color:#5b5f80}
.v4-pop{position:absolute;right:0;top:calc(100% + 8px);z-index:60;min-width:260px;background:#fff;border:1px solid #e0e3ef;border-radius:12px;box-shadow:0 18px 40px rgba(17,22,64,.14);padding:8px;display:flex;flex-direction:column}
.v4-pop>b{padding:8px 10px;font-size:14px}.v4-pop p{margin:0;padding:8px 10px;font-size:14px;color:#5b5f80}
.v4-pop a,.v4-pop button{display:flex;align-items:center;gap:10px;width:100%;padding:10px;border:0;border-radius:8px;background:none;font:500 14px 'Instrument Sans',sans-serif;color:#111640;text-decoration:none;text-align:left}
.v4-pop a:hover,.v4-pop button:hover{background:#f1f3fb}
.shell.v3.v4 .main{flex:1;min-height:0;height:auto;overflow-y:auto;overflow-x:hidden;padding:6px 32px 40px;max-width:none;width:auto;scrollbar-gutter:stable}
.v4-scrim{display:none}

/* ---------- dashboard ---------- */
.v4-dash{max-width:1500px}
.v4-hello small{font-size:14px;color:#5b5f80}
.v4-hello h1{font-size:clamp(36px,3.6vw,56px)!important;letter-spacing:-.035em;line-height:1.05;margin:4px 0 6px}
.v4-hello h1 em{font-style:normal;color:#2456ff}
.v4-hello p{margin:0;font-size:clamp(15px,1.25vw,19px);color:#5b5f80}
.v4-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:20px 0 16px}
.v4-card,.v4-panel,.v4-tool{background:#fff;border:1px solid #e8eaf3;border-radius:14px;box-shadow:0 2px 10px rgba(17,22,64,.04)}
.v4-card{display:flex;align-items:center;gap:16px;padding:18px;min-width:0}
.v4-card>i{display:grid;place-items:center;flex:none;width:64px;height:64px;border-radius:14px}
.t-mint{background:#e3f8ef;color:#16b07a}.t-sky{background:#eaf0ff;color:#2456ff}.t-rose{background:#ffe8ef;color:#ff3d7f}
.v4-card>span{display:flex;flex-direction:column;gap:4px;min-width:0}
.v4-card small{font-size:14px;font-weight:600;color:#1b1f3b}
.v4-card b{font:800 clamp(18px,1.6vw,23px) 'Bricolage Grotesque',sans-serif;letter-spacing:-.02em;display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.v4-card b.blue{color:#2456ff}
.v4-card a{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:#2456ff;text-decoration:none}
.v4-card .v4-note{font-weight:500;color:#5b5f80;font-size:12px}
.v4-badge{font:600 13px 'Instrument Sans',sans-serif;background:#e3f8ef;color:#13a36f;border-radius:6px;padding:3px 8px}
.v4-badge.free{background:#f1f2fa;color:#5b5f80}.v4-badge.trial{background:#fff4d5;color:#8a6400}
.v4-meter{display:block;height:6px;border-radius:9px;background:#e8ebf7;overflow:hidden}.v4-meter i{display:block;height:100%;background:#2456ff;border-radius:9px}
.v4-row3{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1.1fr) minmax(0,.95fr);gap:16px}
.v4-panel{padding:18px;min-width:0}
.v4-ph{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.v4-ph h2{font-size:20px;margin:0;letter-spacing:-.02em}
.v4-ph a{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:600;color:#2456ff;text-decoration:none}
.v4-ph select{width:auto;margin:0;padding:6px 10px;font-size:13px;border-radius:8px;border-color:#e0e3ef}
.v4-pill{border:1px solid #e0e3ef;border-radius:8px;padding:6px 10px;color:#111640!important}
.v4-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.v4-kpi{display:flex;align-items:center;gap:10px;border:1px solid #eef0f7;border-radius:10px;padding:10px;min-width:0}
.v4-kpi>i,.v4-tool>i{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:10px;color:#fff}
.t-blue{background:#2f6bff}.t-green{background:#22c08a}.t-purple{background:#8b5cf6}.t-orange{background:#ff8a3d}.t-pink{background:#ff4f8b}.t-sun{background:#ffb21e}.t-violet{background:#9b6bff}
.v4-kpi span{display:flex;flex-direction:column;min-width:0}
.v4-kpi b{font:800 clamp(15px,1.3vw,20px) 'Bricolage Grotesque',sans-serif;white-space:nowrap}
.v4-kpi b em{font:700 11px 'Instrument Sans',sans-serif;color:#13a36f;margin-left:6px}.v4-kpi b em.neg{color:#e2365b}
.v4-kpi small{font-size:12px;color:#5b5f80;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v4-chart{position:relative;margin-top:12px}
.v4-chart svg{display:block;width:100%;height:auto}
.v4-grid line{stroke:#eef0f7}.v4-chart text{fill:#858caf;font-size:10px}
.v4-chart circle{fill:#fff;stroke:#2456ff;stroke-width:2}
.v4-chart-empty{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);background:#fff;border:1px solid #e0e3ef;border-radius:99px;padding:6px 14px;font-size:13px;font-weight:600;color:#2456ff;text-decoration:none;white-space:nowrap}
.v4-ctable{border:1px solid #eef0f7;border-radius:10px;overflow:hidden}
.v4-chead,.v4-crow{display:grid;grid-template-columns:1.25fr 1fr 1fr 52px;gap:10px;align-items:center;padding:10px 12px}
.v4-chead{background:#f7f8fc;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#5b5f80}
.v4-chead span:last-child{grid-column:span 2;text-align:right}
.v4-crow{border-top:1px solid #f0f1f7;font-size:13px}
.v4-crow b{display:flex;align-items:center;gap:8px;font-size:13px;white-space:nowrap}
.v4-crow b i{display:grid;place-items:center;width:22px;height:22px;border-radius:6px;color:#fff;font:800 10px 'Instrument Sans',sans-serif;font-style:normal;flex:none}
.v4-crow span{color:#5b5f80;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v4-crow em{font-style:normal;text-align:right;font-weight:600}
.v4-cbar{height:7px;border-radius:9px;background:#eef0f7;overflow:hidden}.v4-cbar i{display:block;height:100%;border-radius:9px}
.ch-g{background:#2456ff}.ch-m{background:#ff3d7f}.ch-w{background:#8b5cf6}.ch-i{background:#ff8a3d}.ch-l{background:#0a66c2}
.v4-empty-link{display:block;margin-top:10px;font-size:13px;font-weight:600;color:#2456ff;text-decoration:none}
.v4-prog{display:flex;flex-direction:column}
.v4-pbody{display:flex;align-items:center;gap:16px}
.v4-ring{flex:none;width:120px;height:120px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(closest-side,#fff 76%,transparent 77%),conic-gradient(#2fd3a6 calc(var(--p)*1%),#e3f8f1 0)}
.v4-ring b{font:800 30px 'Bricolage Grotesque',sans-serif}
.v4-pbody ul{list-style:none;margin:0;padding:0;flex:1;min-width:0}
.v4-pbody li{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid #f0f1f7;font-size:13px}
.v4-pbody li:last-child{border:0}
.v4-pbody li i{display:grid;place-items:center;flex:none;width:20px;height:20px;border-radius:50%;border:2px solid #cfd2e6;font-size:11px;font-style:normal;color:#fff}
.v4-pbody li.ok i{background:#22c08a;border-color:#22c08a}
.v4-pbody li b{margin-left:auto;font-size:12px}
.v4-cta{display:flex!important;align-items:center;justify-content:center;gap:8px;margin-top:auto;padding:13px!important;border-radius:10px!important;background:#2456ff!important;border-color:#2456ff!important;font-size:15px!important}
.v4-prog .v4-pbody{margin-bottom:14px}
.v4-sec{margin-top:26px}
.v4-sh{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.v4-sh h2{font-size:24px;margin:0;letter-spacing:-.02em}
.v4-sh a{display:inline-flex;align-items:center;gap:6px;font-size:15px;font-weight:600;color:#2456ff;text-decoration:none}
.v4-tools{display:grid;gap:12px;margin-bottom:12px}
.v4-tools.a{grid-template-columns:repeat(4,minmax(0,1fr))}.v4-tools.b{grid-template-columns:repeat(6,minmax(0,1fr))}
.v4-tool{position:relative;display:flex;align-items:center;gap:12px;padding:14px;color:#111640;text-decoration:none;min-width:0;transition:border-color .15s,transform .15s}
.v4-tool:hover{border-color:#2456ff;transform:translateY(-1px)}
.v4-tool>i{width:46px;height:46px;border-radius:12px}
.v4-tool span{flex:1;min-width:0;display:flex;flex-direction:column}
.v4-tool b{font-size:15px}.v4-tool small{font-size:13px;color:#5b5f80;line-height:1.3}
.v4-tool>svg{flex:none;color:#111640}
.v4-tag{position:absolute;top:7px;right:8px;display:inline-flex;align-items:center;gap:3px;font:700 10px 'Instrument Sans',sans-serif;font-style:normal;background:#fff4d5;color:#8a6400;border-radius:99px;padding:2px 7px}
.v4-tag.free{background:#e9fbf3;color:#0f7a5c}
.v4-reco{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.v4-rc{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:8px;min-height:180px;padding:20px;border-radius:16px;color:#fff;text-decoration:none}
.v4-rc em{align-self:flex-start;font:800 11px 'Instrument Sans',sans-serif;font-style:normal;letter-spacing:.04em;padding:5px 10px;border-radius:99px;background:#2f6bff;position:relative;z-index:1}
.v4-rc b{font:800 clamp(18px,1.5vw,22px)/1.15 'Bricolage Grotesque',sans-serif;max-width:62%;position:relative;z-index:1}
.v4-rc small{font-size:14px;opacity:.88;max-width:56%;line-height:1.4;position:relative;z-index:1}
.v4-go{margin-top:auto;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#fff;color:#111640;position:relative;z-index:1}
.v4-art{position:absolute;right:-6%;bottom:-12%;width:42%;height:78%;background:#fff;border-radius:10px;transform:rotate(-8deg);box-shadow:-10px 14px 30px rgba(0,0,0,.25);display:flex;align-items:flex-end;gap:8%;padding:12% 12% 22%}
.v4-art i{flex:1;border-radius:3px 3px 0 0;opacity:.9}
.v4-art i:nth-child(1){height:30%}.v4-art i:nth-child(2){height:50%}.v4-art i:nth-child(3){height:42%}.v4-art i:nth-child(4){height:72%}
.r-teal{background:linear-gradient(135deg,#0f6b66,#0b3b48)}.r-teal .v4-art i{background:#16a08f}
.r-purple{background:linear-gradient(135deg,#4521c9,#1c1064)}.r-purple em{background:#8b5cf6}.r-purple .v4-art i{background:#8b5cf6}
.r-blue{background:linear-gradient(135deg,#2156e6,#0f2a8a)}.r-blue .v4-art i{background:#2f6bff}
.r-orange{background:linear-gradient(135deg,#ffa53a,#ff6a1a)}.r-orange em{background:#fff;color:#e2580e}.r-orange .v4-art i{background:#ff8a3d}
.v4-bill{grid-template-columns:repeat(3,minmax(0,1fr))}

/* tablet */
@media (max-width:1380px){.v4-tools.b{grid-template-columns:repeat(3,minmax(0,1fr))}.v4-row3{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.v4-perf{grid-column:1/-1}}
@media (max-width:1180px){.shell.v3.v4{grid-template-columns:212px minmax(0,1fr)}.v4-nav a{font-size:14px;gap:10px;padding:8px 10px}.v4-brand{font-size:26px!important}.v4-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.v4-tools.a{grid-template-columns:repeat(2,minmax(0,1fr))}.v4-reco{grid-template-columns:repeat(2,minmax(0,1fr))}.v4-top{padding-left:24px;padding-right:24px}.shell.v3.v4 .main{padding:6px 24px 32px}}
/* phones / small tablets: sliding side menu */
@media (max-width:900px){
.shell.v3.v4{grid-template-columns:minmax(0,1fr)}
.v4-side{position:fixed;z-index:90;inset:0 auto 0 0;width:min(290px,86vw);transform:translateX(-102%);transition:transform .22s ease;padding-left:max(14px,env(safe-area-inset-left))}
body.menu-open .v4-side{transform:none;box-shadow:20px 0 50px rgba(5,8,40,.35)}
.v4-scrim{position:fixed;inset:0;z-index:80;border:0;border-radius:0;padding:0;background:rgba(13,22,64,.45)}
body.menu-open .v4-scrim{display:block}
.v4-close{display:grid}
.v4-burger{display:grid}
.v4-top{gap:8px;padding:max(10px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) 8px max(14px,env(safe-area-inset-left))}
.v4-search{flex:1;height:42px}
.v4-me summary span,.v4-me summary>svg{display:none}
.v4-av{width:38px;height:38px;font-size:16px}
.shell.v3.v4 .main{padding:4px max(14px,env(safe-area-inset-right)) max(28px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left))}
.v4-row3{grid-template-columns:minmax(0,1fr)}
.v4-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){.v4-bill,.v4-tools.a,.v4-tools.b,.v4-reco{grid-template-columns:minmax(0,1fr)}.v4-card>i{width:52px;height:52px}.v4-pbody{flex-direction:column;align-items:stretch}.v4-ring{margin:0 auto}.v4-chead,.v4-crow{grid-template-columns:1.2fr 1fr .8fr 44px;gap:8px;padding:9px 10px}.v4-search input::placeholder{font-size:13px}.v4-pop{right:-8px;min-width:240px}}

/* refinements */
.w-m-logo .pitancos-brand__name,.w-m-logo .pitancos-brand__suffix{color:#fff!important}
.w-laptop{width:min(80%,1120px);right:-7%;bottom:-16%}
.w-copy{max-width:780px}.w-copy h2{font-size:clamp(40px,4.2vw,74px)}
.v4-kpi{flex-direction:column;align-items:flex-start;gap:8px;padding:12px}
.v4-kpi>i{width:34px;height:34px}
.v4-kpi b{font-size:clamp(17px,1.4vw,21px);white-space:normal}
.v4-kpi small{white-space:normal}
.v4-ring{width:104px;height:104px}.v4-ring b{font-size:26px}
.v4-pbody li span{flex:1;min-width:0}
.v4-pbody li b{flex:none}
.v4-crow{font-size:12px}
.v4-tool{gap:10px;padding:12px}.v4-tool>i{width:42px;height:42px}.v4-tool b{font-size:14px}.v4-tool small{font-size:12px}
@media (min-width:821px) and (max-height:760px){.w-laptop{width:60%;bottom:-20%}}
@media (min-width:821px) and (max-width:1280px){.w-laptop{width:84%;right:-14%;bottom:-14%}}
@media (max-width:1380px){.v4-card{gap:12px;padding:16px}.v4-card>i{width:54px;height:54px}}
@media (max-width:1380px) and (min-width:901px){.v4-perf{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);column-gap:18px}.v4-perf .v4-ph{grid-column:1/-1}.v4-perf .v4-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.v4-perf .v4-chart{margin-top:0;align-self:center}}
@media (max-width:600px){.v4-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:16px 0 12px}.v4-card{flex-direction:column;align-items:flex-start;gap:10px;padding:14px}.v4-card>i{width:44px;height:44px}.v4-card>i svg{width:24px;height:24px}.v4-card b{font-size:17px}}

.w-plans{font-size:13px;color:#5b5f80;line-height:1.5;margin:14px 0 0;border-top:1px solid #e0e2f0;padding-top:12px}.w-plans p{margin:0 0 6px}.w-plans a{color:#2456ff;text-decoration:underline;text-underline-offset:3px}.w-plans nav{margin:0 0 6px}
