/* Get started: the one form (get-started.js) on every page. Everything scoped to the dialog, so it sits on the landing page
   as it is; on the pricing page the same values as pricing2/base.css. */
.pp-dlg{--ink:#161513;--cream:#FAF8F2;--mu:#5c5750;--line2:rgba(22,21,19,.22);--ok:#4F7A21;--ok-ink:#3E6318;--ok-tint:#E8EFDC;--e:cubic-bezier(.2,.8,.2,1);width:min(100% - 32px,480px);max-height:calc(100% - 32px);padding:0;border:0;border-radius:24px;background:#fff;color:var(--ink);box-shadow:0 40px 90px -30px rgba(5,6,13,.55);font-family:'Schibsted Grotesk',system-ui,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow:auto}
/* a page that covers the whole screen (06.10.2026; html.fx-cover: ?fx=cover, site-header.js; header.css says why only
   then): its tallest also leaves the safe areas free, so on a phone on its side its last line stays off the home bar */
html.fx-cover .pp-dlg{max-height:calc(100% - 32px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))}
.pp-dlg *,.pp-dlg *::before,.pp-dlg *::after{box-sizing:border-box}
.pp-dlg :where(h2,p,ul,li){margin:0;padding:0}.pp-dlg :where(ul){list-style:none}
.pp-dlg .nw{white-space:nowrap}.pp-dlg .ic{display:block;width:100%;height:100%;overflow:visible}
.pp-dlg::backdrop{background:rgba(5,6,13,.5);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.pp-dlg[open]{animation:ppdlg .45s var(--e)}
@keyframes ppdlg{from{opacity:0;transform:translateY(12px) scale(.985)}}
.pp-dlg__in{position:relative;padding:36px 32px 30px}
.pp-dlg h2{font-size:28px;line-height:1.15;font-weight:700;letter-spacing:-.025em}
.pp-dlg__p{margin-top:10px;font-size:16px;line-height:1.5;color:var(--mu);text-wrap:pretty}
.pp-dlg__x{position:absolute;right:16px;top:16px;width:40px;height:40px;border:0;border-radius:50%;background:transparent;cursor:pointer}
.pp-dlg__x::before,.pp-dlg__x::after{content:'';position:absolute;left:50%;top:50%;width:16px;height:1.8px;margin:-.9px 0 0 -8px;border-radius:1px;background:var(--ink);transform:rotate(45deg)}
.pp-dlg__x::after{transform:rotate(-45deg)}
.pp-dlg__x:hover{background:rgba(22,21,19,.06)}
.pp-dlg__x:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.pp-dlg__form{margin:0}
.pp-dlg__f{display:grid;gap:14px;margin-top:24px}
.pp-fld{display:grid;gap:6px;font-size:14px;font-weight:600}
.pp-fld input{width:100%;height:50px;padding:0 14px;border:1px solid var(--line2);border-radius:12px;background:#fff;color:var(--ink);font:500 16px 'Schibsted Grotesk',system-ui,sans-serif}
.pp-fld input:focus{outline:2px solid var(--ink);outline-offset:0;border-color:transparent}
.pp-dlg__bill{display:grid;gap:12px;margin:6px 0 0;padding:0;border:0;min-width:0}
.pp-dlg__bill legend{margin-bottom:8px;padding:0;font-size:14px;font-weight:600}
.pp-dlg__sum{display:grid;font-size:14.5px;line-height:1.5;color:var(--mu)}
.pp-dlg__sum>span{grid-area:1/1}
.pp-dlg__sum b{color:var(--ink);font-weight:700}
.pp-dlg__ok{margin-top:24px;height:50px;padding:0 24px;border:0;border-radius:12px;background:var(--ink);color:var(--cream);font:600 15px 'Schibsted Grotesk',system-ui,sans-serif;cursor:pointer}
.pp-dlg__ok:hover{background:#2a2824}
.pp-dlg__ok:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.pp-dlg__done h2:focus{outline:none} /* focused only so a screen reader reads the thank-you: nothing to show */
/* the switch, the lines that swap with it, the button, the tick line */
.pp-dlg .pp-bill{position:relative;display:flex;width:100%;padding:4px;border-radius:999px;background:rgba(22,21,19,.06)}
.pp-dlg .pp-bill::before{content:'';position:absolute;left:0;top:4px;bottom:4px;width:var(--tw,0);border-radius:999px;background:#fff;box-shadow:0 1px 2px rgba(22,21,19,.1),0 6px 16px -8px rgba(22,21,19,.3);transform:translateX(var(--tx,0));opacity:0}
.pp-dlg .pp-bill.is-ready::before{opacity:1}
.pp-dlg .pp-bill.is-anim::before{transition:transform .5s var(--e),width .5s var(--e)}
.pp-dlg .pp-bill__o{position:relative;z-index:1;flex:1 1 auto;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 12px;border:0;border-radius:999px;background:none;color:var(--mu);font:600 15px/1 'Schibsted Grotesk',system-ui,sans-serif;white-space:nowrap;cursor:pointer;transition:color .25s}
.pp-dlg .pp-bill__o[aria-checked="true"],.pp-dlg .pp-bill__o:hover{color:var(--ink)}
.pp-dlg .pp-bill:not(.is-ready) .pp-bill__o[aria-checked="true"]{background:#fff}
.pp-dlg .pp-bill__o:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.pp-dlg .pp-save{display:inline-block;height:24px;line-height:24px;padding:0 9px;border-radius:999px;background:var(--ok-tint);color:var(--ok-ink);font-size:12.5px;font-weight:700;white-space:nowrap}
.pp-dlg .pp-save__s{display:none}
@media (max-width:400px){.pp-dlg .pp-save__l{display:none}.pp-dlg .pp-save__s{display:inline}}
.pp-dlg [data-b]{transition:opacity .35s var(--e),transform .55s var(--e),visibility 0s}
html[data-bill="y"] .pp-dlg [data-b="m"],html[data-bill="m"] .pp-dlg [data-b="y"]{opacity:0;visibility:hidden;transform:translate3d(0,8px,0);transition:opacity .18s,transform .3s,visibility 0s .3s}
.pp-dlg .pp-cta{display:flex;align-items:center;justify-content:center;width:100%;height:56px;margin-top:8px;padding:0 28px;border:0;border-radius:12px;background:var(--ink);color:var(--cream);font:600 16px/1 'Schibsted Grotesk',system-ui,sans-serif;letter-spacing:-.01em;cursor:pointer;transition:background-color .2s,transform .2s var(--e)}
.pp-dlg .pp-cta:hover{background:#2a2824;color:var(--cream)}
.pp-dlg .pp-cta:active{transform:scale(.985)}
.pp-dlg .pp-cta:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.pp-dlg .pp-as{display:grid;justify-items:center;gap:6px;margin-top:2px;font-size:14.5px;line-height:1.4;color:var(--mu)}
.pp-dlg .pp-as li{display:flex;align-items:center;gap:8px}
.pp-dlg .pp-as .ic{flex:none;width:15px;height:15px;color:var(--ok)}
/* sending (get-started.js): the button waits with a small spinner in place of its word; a failure is said above it, in the
   amber text colour on its tint. The honeypot field is out of sight and out of reach */
.pp-dlg .pp-cta[aria-busy="true"],.pp-dlg .pp-cta[aria-busy="true"]:hover{position:relative;color:transparent;cursor:progress}
.pp-dlg .pp-cta[aria-busy="true"]::after{content:'';position:absolute;left:50%;top:50%;width:20px;height:20px;margin:-10px 0 0 -10px;border:2px solid rgba(250,248,242,.3);border-top-color:var(--cream);border-radius:50%;animation:ppspin .8s linear infinite}
@keyframes ppspin{to{transform:rotate(1turn)}}
.pp-dlg__err{padding:12px 14px;border-radius:12px;background:#FBF1E1;color:#95600F;font-size:14.5px;line-height:1.5}
.pp-dlg__err:empty{display:none}
.pp-dlg__err a{color:inherit;font-weight:600}
.pp-dlg__hp{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;opacity:0;pointer-events:none}
/* the notice under Continue (what the details are for, and the privacy notice, opened in a new tab so the form stays) */
.pp-dlg__pn{font-size:13px;line-height:1.5;color:var(--mu);text-align:center;text-wrap:balance}
.pp-dlg__pn a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.pp-dlg__pn a:hover{color:var(--ink)}
@media (prefers-reduced-motion:reduce){.pp-dlg[open]{animation:none}.pp-dlg [data-b],.pp-dlg .pp-bill.is-anim::before{transition:none}}