/* cloud-v2.css — the v2 face of the public pages (3.4.0), loaded after cloud.css by
 * views/console/v2/layout.php only. The grouped-catalogue Cloud (D-12 A, approved D-15): the same
 * palette and the same self-hosted fonts as cloud.css (Plus Jakarta Sans / Inter / JetBrains Mono,
 * indigo #4f46e5 -> cyan #06b6d4), a header with the platform's own menu, and one card per app
 * with its own icon, line and price. Text colours are chosen for 4.5:1 or better on their ground;
 * the live green is a darker shade for text (#047857) and the bright one only for dots. */
body.v2{font-size:15.5px;line-height:1.55}
.v2-wrap{max-width:1176px;margin:0 auto;padding:0 28px}
@media(max-width:640px){.v2-wrap{padding:0 18px}}
body.v2 a{color:var(--accent);text-decoration:none}
body.v2 a:hover{color:#4338ca}
/* a link inside running text is underlined, not told apart by colour alone (WCAG 1.4.1) */
body.v2 p a,body.v2 li a,body.v2 label a,body.v2 .fine a{text-decoration:underline;text-underline-offset:2px}
body.v2 a:focus-visible,body.v2 button:focus-visible,body.v2 summary:focus-visible,body.v2 input:focus-visible,body.v2 select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.v2-skip{position:absolute;left:12px;top:-60px;z-index:60;background:var(--ink);color:#fff!important;padding:8px 14px;border-radius:10px}
.v2-skip:focus{top:12px}

/* the strip back to the platform's wider site, and the header */
.v2-topbar{background:var(--soft);border-bottom:1px solid var(--line);font-size:12.5px}
.v2-topbar .v2-wrap{display:flex;gap:18px;align-items:center;min-height:34px;flex-wrap:wrap}
body.v2 .v2-topbar a{color:var(--dim);padding:6px 0}
body.v2 .v2-topbar a.first{color:var(--ink);font-weight:600}
body.v2 .v2-topbar a:hover{color:var(--accent)}
.v2-bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:rgba(251,251,253,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.v2-bar .v2-wrap{display:flex;align-items:center;gap:30px;height:66px}
body.v2 .v2-brand{display:flex;align-items:center;gap:8px;font-family:var(--display);font-weight:800;font-size:18px;color:var(--ink);white-space:nowrap;letter-spacing:-.01em}
.v2-brand i{width:10px;height:10px;border-radius:50%;background:linear-gradient(120deg,#4f46e5,#06b6d4);display:inline-block}
.v2-brand b{color:var(--accent);font-weight:800}
.v2-nav{display:flex;gap:26px;font-size:14.5px;font-weight:500}
body.v2 .v2-nav a,body.v2 .v2-account{color:var(--dim);white-space:nowrap;padding:8px 0}
body.v2 .v2-nav a:hover,body.v2 .v2-account:hover{color:var(--ink)}
.v2-account{font-size:14.5px;font-weight:500}
.v2-grow{flex:1}
.v2-menu{display:none;position:relative}
.v2-menu summary{list-style:none;cursor:pointer;width:42px;height:42px;border:1px solid var(--line2);border-radius:12px;display:grid;place-items:center;background:#fff}
.v2-menu summary::-webkit-details-marker{display:none}
.v2-menu summary span,.v2-menu summary span::before,.v2-menu summary span::after{display:block;width:16px;height:2px;background:var(--ink);border-radius:2px;position:relative}
.v2-menu summary span::before,.v2-menu summary span::after{content:"";position:absolute;left:0}
.v2-menu summary span::before{top:-5px}.v2-menu summary span::after{top:5px}
.v2-menu-panel{position:absolute;right:0;top:50px;min-width:220px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 20px 40px -20px rgba(11,15,26,.35);padding:8px;display:grid}
body.v2 .v2-menu-panel a{color:var(--ink);padding:10px 12px;border-radius:9px;font-size:15px}
body.v2 .v2-menu-panel a:hover{background:var(--soft)}
body.v2 .v2-menu-panel a.out{color:var(--dim);font-size:14px}
@media(max-width:900px){
  .v2-nav,.v2-account{display:none}
  .v2-menu{display:block}
  .v2-bar .v2-wrap{gap:10px;height:60px}
}

/* buttons */
body.v2 .v2-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:linear-gradient(120deg,#4f46e5,#06b6d4);color:#fff;padding:12px 18px;border-radius:12px;font-weight:600;font-size:15px;white-space:nowrap;border:0;box-shadow:0 10px 24px -14px rgba(79,70,229,.7)}
body.v2 .v2-btn:hover{color:#fff;filter:brightness(1.05)}
body.v2 .v2-btn.sm{padding:9px 14px;font-size:14px}
body.v2 .v2-btn.lg,body.v2 .v2-obtn.lg{padding:13px 20px;font-size:15.5px}
body.v2 .v2-obtn{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:#fff;color:var(--ink);border:1px solid var(--line2);padding:11px 16px;border-radius:12px;font-weight:600;font-size:14.5px;white-space:nowrap}
body.v2 .v2-obtn:hover{border-color:var(--accent);color:var(--ink)}
.v2-label{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin:0}

/* hero + the rail */
.v2-main.full{padding:0;max-width:none}
.v2-hero{background:radial-gradient(55% 60% at 85% 15%,rgba(6,182,212,.12),transparent 60%),radial-gradient(40% 50% at 5% 90%,rgba(79,70,229,.08),transparent 60%)}
.v2-hero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:40px;align-items:center;padding-block:64px 56px}
.v2-hero-copy{display:grid;gap:18px}
body.v2 .v2-hero h1{font-family:var(--display);font-weight:800;font-size:54px;line-height:1.04;letter-spacing:-.03em;margin:0;max-width:none;text-wrap:balance}
body.v2 .v2-hero h1 em,body.v2 .v2-apps h1 em{font-style:normal;color:var(--accent)}
.v2-lead{margin:0;font-size:17.5px;color:var(--dim);max-width:32em}
.v2-cta-row{display:flex;gap:10px;flex-wrap:wrap}
.v2-rail-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px;display:grid;gap:16px;scroll-margin-top:90px}
.v2-rail{list-style:none;margin:0;padding:0;display:flex;justify-content:space-between;position:relative}
.v2-rail::before{content:"";position:absolute;left:11px;right:11px;top:10px;border-top:2px dashed var(--line2)}
.v2-rail li{position:relative;display:grid;justify-items:center;gap:6px;font-family:var(--mono);font-size:11.5px;color:var(--faint);letter-spacing:.08em;text-transform:uppercase}
.v2-rail li span{width:22px;height:22px;border-radius:50%;border:2px solid var(--accent);background:#fff}
.v2-rail li:last-child span{background:var(--accent);box-shadow:0 0 0 4px var(--accentsoft)}
.v2-rail-note{margin:0;text-align:center;font-weight:600;font-size:14px}
.v2-inst{border:1px solid var(--line);border-radius:12px;padding:12px 14px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.v2-inst code{font-family:var(--mono);font-size:13px;overflow-wrap:anywhere}
.v2-running{margin-left:auto;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:#047857;background:#ecfdf5;border-radius:999px;padding:3px 9px;display:inline-flex;align-items:center;gap:6px}
.v2-running i{width:7px;height:7px;border-radius:50%;background:var(--live)}

/* what every plan includes, said once */
.v2-band{background:#fff;border-block:1px solid var(--line)}
.v2-band .v2-wrap{padding-block:40px}
body.v2 h2.v2-label{margin-bottom:16px}
.v2-includes{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:20px}
.v2-includes div{display:grid;gap:4px;align-content:start}
.v2-includes b{font-size:14.5px}
.v2-includes span{font-size:13px;color:var(--dim)}
@media(max-width:1000px){.v2-includes{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:640px){.v2-includes{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.v2-band .v2-wrap{padding-block:32px}}

/* the apps: chips, groups, cards */
.v2-apps{scroll-margin-top:70px}
.v2-apps>.v2-wrap{padding-block:56px;display:grid;gap:22px}
.v2-apps-head{display:grid;gap:10px}
body.v2 .v2-apps h2,body.v2 .v2-apps h1{font-family:var(--display);font-weight:800;font-size:36px;letter-spacing:-.02em;margin:0;line-height:1.1;max-width:none}
body.v2 .v2-apps-page h1{font-size:44px}
.v2-apps-head p{margin:0;color:var(--dim);max-width:60em}
.v2-apps-head .v2-apps-price{color:var(--ink);font-weight:500}
.v2-chips{display:flex;gap:8px;flex-wrap:wrap}
body.v2 .v2-chip{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:7px 13px;font-size:13.5px;border:1px solid var(--line2);background:#fff;color:var(--dim);white-space:nowrap}
.v2-chip span{color:var(--faint)}
body.v2 .v2-chip.on{border-color:var(--accent);background:var(--accentsoft);color:var(--accent)}
body.v2 .v2-chip.on span{color:var(--accent)}
body.v2 .v2-chip:hover{border-color:var(--accent)}
@media(max-width:640px){.v2-chips{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;margin-inline:-18px;padding-inline:18px;scrollbar-width:none}}
.v2-groups{display:grid;gap:30px}
.v2-group{display:grid;gap:12px;scroll-margin-top:80px}
.v2-group[hidden]{display:none}
.v2-group-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
body.v2 .v2-group-head h3{font-family:var(--display);font-size:19px;margin:0}
.v2-group-head span{font-size:13.5px;color:var(--dim)}
.v2-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media(max-width:980px){.v2-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.v2-grid{grid-template-columns:minmax(0,1fr)}}
.v2-app{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px;display:flex;flex-direction:column;gap:10px;min-width:0;scroll-margin-top:80px}
.v2-app:hover{border-color:var(--line2);box-shadow:0 14px 30px -24px rgba(11,15,26,.45)}
.v2-app.soon{border-style:dashed;background:transparent}
.v2-app-top{display:flex;align-items:center;gap:10px}
.v2-appicon{width:34px;height:34px;border-radius:9px;flex:none;display:block;background:var(--soft)}
.v2-appicon.letter{display:grid;place-items:center;background:linear-gradient(120deg,#4f46e5,#06b6d4);color:#fff;font-family:var(--display);font-weight:800;font-size:16px}
.v2-app-name{display:grid;line-height:1.25;min-width:0}
body.v2 .v2-app-name h4{font-family:var(--display);font-size:16.5px;font-weight:700;margin:0;overflow-wrap:anywhere}
.v2-state{font-family:var(--mono);font-size:12px;color:var(--dim)}
.v2-state.live{color:#047857}
.v2-state.live i{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--live);margin-right:6px;vertical-align:1px}
.v2-price{margin-left:auto;text-align:right;line-height:1.2;white-space:nowrap}
.v2-price b{font-family:var(--display);font-size:20px;font-weight:800}
.v2-price span{font-size:13.5px;color:var(--dim)}
.v2-line{margin:0;font-size:13.5px;color:var(--dim);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.v2-app-cta{display:flex;gap:8px;margin-top:auto;padding-top:4px}
body.v2 .v2-app-cta .v2-btn,body.v2 .v2-app-cta .v2-obtn{flex:1;padding:10px 12px;font-size:14px}
.v2-notify{display:grid;gap:6px}
.v2-notify input[type=email]{width:100%;padding:9px 11px;border-radius:10px;border:1px solid var(--line2);background:#fff;font:inherit;font-size:14px}
.v2-notify button{padding:9px 12px;border-radius:10px;border:1px solid var(--line2);background:transparent;font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.v2-own{background:var(--soft);border:1px solid var(--line);border-radius:16px;padding:18px 20px;display:flex;gap:14px 16px;align-items:center;flex-wrap:wrap}
.v2-own b{font-family:var(--display)}
.v2-own-note{flex:1;min-width:220px;font-size:13.5px;color:var(--dim)}
.v2-own .v2-obtn img{width:22px;height:22px;border-radius:6px}
.v2-apps-fine{margin:0}

/* the sign-up form */
.v2-start{background:#fff;border-top:1px solid var(--line);scroll-margin-top:66px}
.v2-start-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:40px;padding-block:56px}
.v2-start-grid>div:first-child{display:grid;gap:12px;align-content:start}
body.v2 .v2-start h2{font-family:var(--display);font-weight:800;font-size:30px;letter-spacing:-.02em;margin:0}
.v2-start-grid>div:first-child p{margin:0;color:var(--dim)}
body.v2 .v2-start .form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding:22px;border-radius:16px;margin:0}
body.v2 .v2-start .form .row{display:contents}
body.v2 .v2-start .form>*:not(.field):not(.row){grid-column:1/-1}
body.v2 .v2-start .form>label.field{grid-column:1/-1}
body.v2 .v2-start .form .field{margin:0;min-width:0}
body.v2 .v2-start .form .fine{margin:0}
body.v2 label{font-size:13.5px;color:var(--ink);letter-spacing:0}
body.v2 input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=submit]),body.v2 select{border-radius:10px;min-height:44px}
body.v2 .btn{border-radius:12px}
@media(max-width:900px){
  .v2-hero-grid{grid-template-columns:minmax(0,1fr);gap:28px;padding-block:36px 40px}
  body.v2 .v2-hero h1{font-size:36px}
  .v2-start-grid{grid-template-columns:minmax(0,1fr);gap:22px;padding-block:40px}
  .v2-apps>.v2-wrap{padding-block:36px}
  body.v2 .v2-apps h2{font-size:28px}
  body.v2 .v2-apps-page h1{font-size:32px}
}
@media(max-width:640px){body.v2 .v2-start .form{grid-template-columns:minmax(0,1fr);padding:18px}}

/* every other public page (account, sign-in, welcome, checkout, terms, help) keeps its content in the new frame */
body.v2 main.wrap{max-width:1176px;padding-top:8px}
body.v2 main.wrap h1{font-weight:800;letter-spacing:-.03em;font-size:clamp(2rem,4.4vw,3.2rem);line-height:1.05}
body.v2 main.wrap .card{border-radius:16px}
body.v2 .foot.v2-foot{margin-top:0}
body.v2 .foot a{color:var(--dim)}
body.v2 .foot a:hover{color:var(--accent)}
body.v2 main.wrap + .foot.v2-foot{margin-top:64px}
.v2-foot-lead{color:var(--ink);font-family:var(--display);font-size:15px;margin-bottom:6px}
.v2-flashes{padding-top:16px}

/* only in a browser previewing the new face */
body.v2 .v2-preview{position:fixed;left:14px;bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:50;background:var(--ink);color:#fff;font-size:12.5px;padding:9px 14px;border-radius:999px;box-shadow:0 10px 30px -12px rgba(11,15,26,.6)}
body.v2 .v2-preview:hover{color:#fff}