/* Product pages: one shared stage for every product in the Explore menu, built from the
   homepage's own pieces rather than a new system:
     - the horizon glow (index.html .bg-blackout / .story-bg--*-horizon): a 175vw disc of light
       rising from below the fold, under the homepage's three-layer vignette, so the colour
       belongs to the background instead of sitting on it
     - the hero type (.hero h1, .hero-subtitle): 68px / 800 / -0.02em, black outline, the 7.5s sway,
       a second line in the accent colour like "thrives."
     - the story headings' grey-to-white fade (.story-heading, 0.8s var(--ease)) below the fold
   On top of the glow, three orbs (after Spaceship's domain page) glide in from the bottom right
   as the page scrolls; product-pages.js drives --pp-p from 0 to 1.
   Tokens (--bg, --text-dim, --ease, --radius-pill) come from plans-chrome.css, the homepage's :root.
   Each page sets three values on <body> (checked by scripts/explore-colours-test.js):
     --product-rgb  its Explore icon colour, r g b
     --pp-soft      a lighter shade of it that reads on black at text sizes
     --pp-ink       the button text colour that reads on the icon colour */

.pp-page{--pp-soft:#e8e8ec;--pp-ink:#fff;--pp-head:var(--portal-header-height,120px);--pp-glow-x:50%;--pp-ease:var(--ease,cubic-bezier(.4,0,.2,1))}
html:has(.pp-page),.pp-page{overflow-x:clip}
.pp-page .plan-backdrop{display:none}
.pp-page .plan-main{padding-top:0}
.pp-page .plan-main>.plan-crumb{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pp-page ::selection{background:rgb(var(--product-rgb)/.55);color:#fff}

/* ---------- The stage: first screen, centred like the homepage hero ---------- */
.pp-stage{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:calc(100svh - var(--pp-head));padding:64px 0 120px;margin-bottom:24px}
.pp-sky{position:absolute;z-index:-2;inset:0 auto -1px 50%;width:100vw;transform:translateX(-50%);overflow:hidden;background:var(--bg,#060608);pointer-events:none;-webkit-mask-image:linear-gradient(180deg,#000 72%,transparent);mask-image:linear-gradient(180deg,#000 72%,transparent)}
/* The horizon: the homepage's disc and colour stops, in the product's colour and softened so no edge reads */
.pp-sky::before{content:"";position:absolute;left:var(--pp-glow-x);bottom:-118vw;width:175vw;aspect-ratio:1/1;transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(circle at 50% 25%,
    color-mix(in srgb,rgb(var(--product-rgb)) 62%,#fff) 0%,
    rgb(var(--product-rgb)/.98) 22%,
    color-mix(in srgb,rgb(var(--product-rgb)) 72%,#000) 48%,
    color-mix(in srgb,rgb(var(--product-rgb)) 30%,#000) 69%,
    transparent 88%);
  filter:blur(48px) drop-shadow(0 -48px 110px rgb(var(--product-rgb)/.4));opacity:.92}
/* The homepage vignette, as on .bg-blackout::after: darker at the sides, top and bottom */
.pp-sky::after{content:"";position:absolute;inset:0;background:
  radial-gradient(ellipse at var(--pp-glow-x) 62%,rgba(0,0,0,0) 10%,rgba(0,0,0,.12) 34%,rgba(0,0,0,.48) 62%,rgba(0,0,0,.88) 84%,#000 100%),
  linear-gradient(90deg,rgba(0,0,0,.98) 0%,rgba(0,0,0,.54) 17%,rgba(0,0,0,.05) 43%,rgba(0,0,0,.05) 57%,rgba(0,0,0,.54) 83%,rgba(0,0,0,.98) 100%),
  linear-gradient(180deg,rgba(0,0,0,.96) 0%,rgba(0,0,0,.28) 24%,rgba(0,0,0,.08) 50%,rgba(0,0,0,.42) 68%,rgba(0,0,0,.82) 82%,rgba(0,0,0,.98) 92%,#000 100%)}

/* The orbs: a large sphere, a bright smaller one overlapping it low on the left, and a shadowed
   one on the right, lit from the top left. They wait just below the fold, off to the right, and
   glide in from the bottom right as the page scrolls: product-pages.js sets --pp-p (0 → 1 over
   70% of a screen) and --pp-lag (holds them back by 55% of the scroll, so they settle into view
   beside the plans instead of passing straight through). Without script they simply sit in place. */
.pp-orbs{--pp-p:1;--pp-lag:0px;position:absolute;z-index:-1;right:calc(50% - 50vw + 4vw);bottom:0;width:min(30vw,440px);aspect-ratio:1/1;pointer-events:none;
  transform:translate3d(calc((1 - var(--pp-p)) * 80%),calc((1 - var(--pp-p)) * 85% + var(--pp-lag)),0) scale(calc(.8 + var(--pp-p) * .2));
  opacity:calc(.3 + var(--pp-p) * .6);transition:transform .12s linear,opacity .12s linear;will-change:transform,opacity}
.pp-orbs i{position:absolute;display:block;border-radius:50%}
.pp-orbs i:nth-child(1){width:84%;top:0;right:0;
  background:radial-gradient(circle at 34% 28%,color-mix(in srgb,rgb(var(--product-rgb)) 45%,#fff) 0%,rgb(var(--product-rgb)) 34%,color-mix(in srgb,rgb(var(--product-rgb)) 55%,#000) 72%,color-mix(in srgb,rgb(var(--product-rgb)) 22%,#000) 100%);
  box-shadow:0 30px 90px rgb(var(--product-rgb)/.22),inset -24px -34px 70px rgba(0,0,0,.45);opacity:.78}
.pp-orbs i:nth-child(1){aspect-ratio:1/1}
.pp-orbs i:nth-child(2){width:54%;aspect-ratio:1/1;left:0;bottom:2%;
  background:radial-gradient(circle at 40% 32%,color-mix(in srgb,rgb(var(--product-rgb)) 40%,#fff) 0%,rgb(var(--product-rgb)) 46%,color-mix(in srgb,rgb(var(--product-rgb)) 60%,#000) 100%);
  mix-blend-mode:screen;opacity:.7;box-shadow:0 20px 60px rgb(var(--product-rgb)/.35)}
.pp-orbs i:nth-child(3){width:50%;aspect-ratio:1/1;right:-6%;top:28%;
  background:radial-gradient(circle at 62% 38%,rgba(255,255,255,.12) 0%,rgba(0,0,0,.25) 46%,rgba(0,0,0,.55) 100%);
  box-shadow:inset 8px 10px 30px rgba(255,255,255,.06)}

/* Homepage hero type */
.pp-page .pp-stage h1{max-width:15ch;margin:0 auto;font-size:68px;font-weight:800;line-height:1.05;letter-spacing:-.02em!important;color:#fff;text-wrap:balance;
  -webkit-text-stroke:1.5px #000;paint-order:stroke fill;text-shadow:0 2px 5px rgba(0,0,0,.75);
  transform-origin:50% 55%;animation:pp-heading-sway 7.5s ease-in-out infinite}
.pp-page .pp-stage h1 .pp-accent{display:block;color:var(--pp-soft)!important}
@keyframes pp-heading-sway{0%,100%{transform:translate3d(0,0,0) rotate(-.35deg)}50%{transform:translate3d(0,-5px,0) rotate(.35deg)}}
.pp-page .pp-stage .pp-lead{max-width:560px;margin:28px auto 40px;font-size:21px;line-height:1.5;font-weight:600;color:#f2f4f8!important;
  -webkit-text-stroke:1px #000;paint-order:stroke fill;text-shadow:0 2px 5px rgba(0,0,0,.75)}

/* One action, in the product's colour, with the homepage search button's lift on hover; squared (8px) like every plan-page action, not a pill (owner, 18 Oct 2026) */
.pp-btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:54px;padding:0 30px;border:0;border-radius:8px;background:rgb(var(--product-rgb));color:var(--pp-ink);font:inherit;font-size:15px;font-weight:700;text-decoration:none;cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 2px 6px rgba(0,0,0,.16);transition:box-shadow .25s var(--pp-ease),transform .25s var(--pp-ease),filter .25s var(--pp-ease)}
.pp-btn:hover{filter:brightness(1.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.62),0 9px 24px rgb(var(--product-rgb)/.34),0 0 30px rgb(var(--product-rgb)/.22)}
.pp-btn:active{transform:translateY(1px)}
.pp-btn svg{width:18px;height:18px;flex:none}
.pp-page .plan-main .pp-btn,.pp-page .plan-main .pp-btn :is(span,svg){color:var(--pp-ink)!important}
/* The quiet second way in, as the homepage's "Want us to build the website?" link */
.pp-more{display:inline-flex;align-items:center;gap:8px;margin-top:22px;padding:5px 0;color:#fff;font-size:14px;line-height:1.5;text-decoration:none;text-shadow:0 2px 3px #000,0 4px 10px rgba(0,0,0,.95);transform-origin:center;transition:transform .25s ease}
.pp-more:hover{transform:scale(1.03)}
.pp-more svg{width:16px;height:16px}
/* What's included, in one line under the action */
.pp-notes{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 0;margin:30px 0 0;padding:0;list-style:none;font-size:13px}
.pp-notes li{display:flex;align-items:center}
.pp-notes li+li::before{content:"";width:3px;height:3px;margin:0 14px;border-radius:50%;background:rgb(var(--product-rgb))}
.pp-page .plan-main .pp-notes li,.pp-page .wm-main .pp-notes li{color:#b9bbc5!important}
.pp-page .plan-main .pp-more{color:#fff!important}
.pp-btn:focus-visible,.pp-more:focus-visible,.pp-also a:focus-visible,.pp-tld:focus-visible{outline:2px solid #c6ff3d;outline-offset:4px}

/* ---------- Below the fold ---------- */
/* Section headings brighten as they arrive, like the homepage's story headings (product-pages.js adds .pp-dim) */
.pp-page .plan-main .pp-dim{color:#3a3a40!important;transition:color .8s var(--pp-ease)}
.pp-page .plan-main .pp-dim.pp-lit{color:#fff!important}
.plan-quick .pp-plans-head{padding:8px 0 24px}
.pp-page .plan-main .pp-plans-head h2{font-size:44px;font-weight:800;line-height:1.08;letter-spacing:-.02em!important;color:#fff;margin:0;-webkit-text-stroke:0;text-shadow:none}
.pp-page .plan-options{margin-bottom:80px}
.pp-page .plan-faq{margin-bottom:80px}
.pp-page .plan-main .pp-section h2,.pp-page .plan-main .plan-faq h2{font-size:44px;font-weight:800;letter-spacing:-.02em!important;-webkit-text-stroke:0;text-shadow:none}
.pp-section{margin:0 0 80px}
.pp-section>p{max-width:46ch;margin:-8px 0 28px;font-size:16px}

/* Cross-links: one line, each product with its Explore icon, glowing in its Explore colour */
.pp-also{display:flex;flex-wrap:wrap;align-items:center;gap:10px 28px;margin:0 0 90px;padding:26px 0 0;border-top:1px solid #ffffff17;font-size:14px}
.pp-also span{color:#8d8e9a}
.pp-also a{display:inline-flex;align-items:center;gap:10px;color:#fff;text-decoration:none;transition:color .2s}
.pp-also a::before{content:"";flex:none;width:18px;height:18px;background:rgb(var(--rel-rgb));-webkit-mask:var(--rel-ico) center/contain no-repeat;mask:var(--rel-ico) center/contain no-repeat;filter:drop-shadow(0 0 6px rgb(var(--rel-rgb)/.75));transition:transform .2s,filter .2s}
.pp-also a:hover::before{transform:scale(1.12);filter:drop-shadow(0 0 10px rgb(var(--rel-rgb)/.9))}
/* The Explore menu's own product icons (assets/explore-menu.js), used as masks so each takes its product colour */
.pp-also a{--rel-ico:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d='M7 3h7l5 5v13H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z'/><path d='M14 3v5h5'/></svg>")}
.pp-also a[href*="domain-registration"]{--rel-ico:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='8.5'/><path d='M3.5 12h17M12 3.5c2.3 2.4 3.4 5.2 3.4 8.5s-1.1 6.1-3.4 8.5c-2.3-2.4-3.4-5.2-3.4-8.5S9.7 5.9 12 3.5z'/></svg>")}
.pp-also a[href*="splash-builder"]{--rel-ico:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><rect x='3.5' y='4.5' width='17' height='15' rx='2'/><path d='M3.5 9h17M9.5 9v10.5'/></svg>")}
.pp-also a[href*="website-for-business"]{--rel-ico:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d='M4 20l1.4-5.2L15.3 4.9a2 2 0 0 1 2.8 0l1 1a2 2 0 0 1 0 2.8l-9.9 9.9L4 20zM13.6 6.6l3.8 3.8'/></svg>")}
.pp-also a[href*="business-email"]{--rel-ico:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='5.5' width='18' height='13' rx='2'/><path d='M3.5 7.5 12 13l8.5-5.5'/></svg>")}
.pp-also a[href*="web-hosting"]{--rel-ico:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='4' width='16' height='7' rx='2'/><rect x='4' y='13' width='16' height='7' rx='2'/><path d='M8 7.5h.01M8 16.5h.01'/></svg>")}
.pp-also a[href*="virtual-machine"]{--rel-ico:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><rect x='6' y='3' width='12' height='18' rx='2'/><path d='M9 7h6M9 10.5h6M12 17h.01'/></svg>")}
.pp-also a[href*="business-phone"]{--rel-ico:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d='M6.8 3.5h2.5l1.3 4-2 1.4a12 12 0 0 0 6.5 6.5l1.4-2 4 1.3v2.5a2 2 0 0 1-2.2 2A16.5 16.5 0 0 1 4.8 5.7a2 2 0 0 1 2-2.2z'/></svg>")}
.pp-also a[href*="domain-transfer"]{--rel-ico:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d='M4 8.5h14.5M15 5l3.5 3.5L15 12M20 15.5H5.5M9 12l-3.5 3.5L9 19'/></svg>")}
.pp-also a[href*="photo-editor"]{--rel-ico:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><rect x='3.5' y='4.5' width='17' height='15' rx='2'/><circle cx='9' cy='9.5' r='1.6'/><path d='m20.5 15-4.5-4.5L6 19.5'/></svg>")}
.pp-also a:hover{color:rgb(var(--rel-rgb))}
.pp-page .plan-main .pp-also span{color:#8d8e9a!important}

/* Transfers: the three steps are a real sequence, so they keep their order */
.pp-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;margin:0;padding:0;list-style:none;counter-reset:pp}
.pp-steps li{counter-increment:pp;font-size:15px;line-height:1.6}
.pp-steps li::before{content:counter(pp);display:block;margin-bottom:12px;font-size:44px;font-weight:800;line-height:1;color:rgb(var(--product-rgb))}
.pp-steps b{display:block;margin-bottom:6px;font-size:19px;color:#fff}
.pp-page .plan-main .pp-steps li{color:#b9bbc5!important}.pp-page .plan-main .pp-steps b{color:#fff!important}

/* ---------- Domains and Transfers: the search is the stage (after Spaceship's domain page) ---------- */
.pp-stage-search{--pp-glow-x:74%;align-items:flex-start;text-align:left}
.pp-stage-search .pp-sky::before{bottom:-128vw}
.pp-stage-search .pp-orbs{width:min(38vw,560px);bottom:24%}
.pp-search{display:flex;flex-direction:column;align-items:flex-start;width:100%;max-width:820px}
.pp-search .pp-modes{order:0}
.pp-search-label{order:1;display:block;margin:0 0 4px;font-size:clamp(18px,1.6vw,23px);font-weight:500}
.pp-search .search-bar{order:2;display:contents}
.pp-search #domain-input{order:2;width:100%;min-width:0;margin:0;padding:0 0 6px;background:none;border:0;border-radius:0;outline:0;color:#fff;font:inherit;font-size:clamp(46px,5.4vw,84px);font-weight:700;line-height:1.08;letter-spacing:-.03em!important;caret-color:rgb(var(--product-rgb));
  background-image:linear-gradient(rgb(var(--product-rgb)),rgb(var(--product-rgb)));background-repeat:no-repeat;background-position:0 100%;background-size:0 2px;transition:background-size .6s var(--pp-ease)}
.pp-search #domain-input:focus{background-size:100% 2px}
.pp-search #domain-input::placeholder{color:#fff;opacity:1}
.pp-page .plan-main .pp-stage-search h1{order:3;max-width:none;margin:18px 0 0;font-size:clamp(24px,2.4vw,34px);font-weight:600;line-height:1.3;letter-spacing:-.01em!important;-webkit-text-stroke:0;text-shadow:none;animation:none}
.pp-search .pp-search-go{order:4;display:flex;align-items:center;gap:12px;margin-top:34px}
.pp-search .smart-search-btn{width:54px;height:54px;display:grid;place-items:center;border-radius:50%;border:1px solid #ffffff2e;background:#ffffff0a;color:#e8e8ec;cursor:pointer;transition:border-color .2s,background .2s}
.pp-search .smart-search-btn:hover{border-color:#ffffff5c}
.pp-search .smart-search-btn[aria-pressed=true]{border-color:rgb(var(--product-rgb));background:rgb(var(--product-rgb)/.16)}
.pp-search .smart-search-btn[hidden]{display:none}
.pp-search .domain-results{order:5;width:100%;max-width:820px;margin:22px 0 0}
.pp-search-hint{order:6;margin:20px 0 0;font-size:14px}
.pp-search-hint button{padding:0;border:0;background:none;font:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgb(var(--product-rgb)/.6)}
.pp-search-hint[hidden]{display:none}
/* Register / Transfer: the homepage's small pill switch */
.pp-modes{display:inline-flex;gap:0;margin:0 0 30px;padding:2px;border:1px solid rgba(255,255,255,.18);border-radius:999px;background:linear-gradient(180deg,rgba(42,44,52,.66),rgba(20,22,29,.58));box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}
.pp-modes button{min-height:34px;padding:6px 18px;border:0;border-radius:999px;background:transparent;font:inherit;font-size:14px;font-weight:600;cursor:pointer;transition:background .25s var(--pp-ease),color .25s var(--pp-ease)}
.pp-modes button[aria-pressed=true]{background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(235,238,245,.88));box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 2px 5px rgba(0,0,0,.18)}
.pp-search :is(.smart-search-btn,.pp-modes button,.pp-search-hint button):focus-visible{outline:2px solid #c6ff3d;outline-offset:3px}
.pp-page .plan-main .pp-search-label{color:#9a9aa5!important}
.pp-page .plan-main .pp-search .pp-search-label{color:#fff!important}
.pp-page .plan-main .pp-search-hint{color:#9a9aa5!important}
.pp-page .plan-main .pp-search-hint button{color:#fff!important}
.pp-page .plan-main .pp-modes button{color:#b9bbc5!important}
.pp-page .plan-main .pp-modes button[aria-pressed=true]{color:#17181d!important}
.pp-page .plan-main .pp-search .smart-search-btn{color:#e8e8ec!important}

/* Popular endings: a price row, not a wall of cards */
.pp-tlds{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));margin:0;padding:0;list-style:none;border-top:1px solid #ffffff1f;border-bottom:1px solid #ffffff1f}
.pp-tlds li+li{border-left:1px solid #ffffff14}
.pp-tld{display:flex;flex-direction:column;align-items:flex-start;gap:4px;width:100%;padding:26px 22px;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;transition:background .25s var(--pp-ease)}
.pp-tld:hover{background:linear-gradient(180deg,rgb(var(--product-rgb)/.1),transparent)}
.pp-tld b{font-size:30px;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.pp-tld span{font-size:16px;font-variant-numeric:tabular-nums}
.pp-tld small{font-size:12px}
.pp-page .plan-main .pp-tld b,.pp-page .plan-main .pp-tld span{color:#fff!important}
.pp-page .plan-main .pp-tld small{color:#8d8e9a!important}
.pp-page .plan-main .pp-tld:hover b{color:var(--pp-soft)!important}
.pp-page .plan-main .pp-tld{display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:flex-start!important;text-align:left!important}

/* Search results keep their status colours (plan-art.css makes plan copy white) */
.pp-page .plan-main .domain-results :is(p,span,a,li,button){color:#b9bbc5!important}
.pp-page .plan-main .domain-results :is(.ds-name,.ds-price,.ds-title,.ds-pick){color:#fff!important}
.pp-page .plan-main .domain-results .ds-dim .ds-name,.pp-page .plan-main .domain-results .ds-off{color:#8d8f9a!important}
.pp-page .plan-main .domain-results .ds-on{color:var(--pp-soft)!important}
.pp-page .plan-main .domain-results .ds-warn{color:#ffd166!important}
.pp-page .plan-main .domain-results .ds-err{color:#ff8a8a!important}
.pp-page .plan-main .domain-results :is(.ds-go,.ds-basket){color:#0a0a0d!important}
.pp-page .plan-main .domain-results .ds-link{color:var(--pp-soft)!important}
.pp-page .plan-main .domain-results .ds-loading .ds-spinner{border-color:rgb(var(--product-rgb)/.3);border-top-color:rgb(var(--product-rgb))}

/* ---------- Design (website-for-business): its own wm- layout ---------- */
.pp-page.wm-page{--wm-accent:rgb(var(--product-rgb))}
.pp-page .wm-main:before{display:none}
.pp-page .wm-main .pp-stage{padding-left:32px;padding-right:32px;min-height:calc(100svh - 64px)}
.pp-page .wm-main .pp-stage h1{font-size:68px;margin:0 auto}
.pp-page .wm-main .pp-stage .pp-lead{margin:28px auto 40px}
.pp-page .wm-main ::selection{background:rgb(var(--product-rgb)/.6);color:#fff}
.pp-page .wm-main :focus-visible{outline-color:#c6ff3d}
.pp-page .wm-action{background:rgb(var(--product-rgb));color:var(--pp-ink)!important}
.pp-page .wm-action.wm-secondary{background:transparent;color:#fff!important}
.pp-page .wm-main .pp-also{max-width:1200px;margin:0 auto 90px;padding:26px 32px 0;border-top:0}

/* ---------- Phones: Managed PBX and Call Centre in their own Explore colours ---------- */
.pp-page.bs-phone-page{--action:rgb(var(--product-rgb))}
.pp-page .pp-tone{--action:rgb(var(--product-rgb));position:relative;isolation:isolate}
.pp-page .pp-tone::before{content:"";position:absolute;inset:-60px -12% auto;height:520px;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 55% 60% at 50% 0%,rgb(var(--product-rgb)/.16),transparent 72%)}
.pp-page.plan-art-page .plan-main :is(.bs-btn,.bs-btn span){color:var(--pp-ink)!important}
.pp-page.plan-art-page .plan-main .bs-btn.bs-secondary{color:#fff!important}
.pp-page.bs-phone-page .plan-main :is(.plan-tier>.plan-btn,.number-search .plan-btn){background:rgb(var(--product-rgb))!important;border-color:rgb(var(--product-rgb))!important;color:var(--pp-ink)!important}

/* ---------- Library: a guide filter under the intro ---------- */
.pp-guide-search{margin:8px 0 28px;max-width:560px}
.pp-guide-search .pp-search-label{font-size:14px;margin-bottom:8px;color:#9a9aa5}
.pp-guide-search input{width:100%;box-sizing:border-box;min-height:52px;padding:12px 20px;border:1px solid rgba(255,255,255,.18);border-radius:999px;background:linear-gradient(180deg,rgba(42,44,52,.66),rgba(20,22,29,.58));color:#fff;font:inherit;font-size:16px;outline:0;caret-color:#fff;transition:border-color .2s}
.pp-guide-search input:hover{border-color:rgba(255,255,255,.3)}
.pp-guide-search input:focus{border-color:rgba(255,255,255,.48);box-shadow:0 0 0 3px rgba(255,255,255,.07)}
.pp-guide-none{margin:12px 0 0;font-size:14px}

/* ---------- Phones and tablets (homepage hero: 40px headline, 18px line) ---------- */
@media(max-width:950px){
  .pp-steps{grid-template-columns:1fr;gap:28px}
  .pp-tlds{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pp-tlds li:nth-child(3n+1){border-left:0}
  .pp-tlds li:nth-child(n+4){border-top:1px solid #ffffff14}
  .pp-orbs,.pp-stage-search .pp-orbs{width:min(52vw,420px);right:calc(50% - 50vw - 4vw)}
}
@media(max-width:720px){
  .pp-stage{padding:40px 0 88px}
  .pp-sky::before{width:290vw;bottom:-142vw}
  .pp-stage-search .pp-sky::before{bottom:-160vw}
  .pp-orbs,.pp-stage-search .pp-orbs{width:66vw;right:calc(50% - 50vw - 10vw);opacity:calc(.25 + var(--pp-p) * .5)}
  .pp-page .pp-stage h1,.pp-page .wm-main .pp-stage h1{font-size:40px}
  .pp-page .pp-stage .pp-lead,.pp-page .wm-main .pp-stage .pp-lead{font-size:18px;margin:18px auto 30px}
  .pp-btn{width:100%;max-width:340px}
  .pp-notes{flex-direction:column;align-items:center;gap:6px}
  .pp-notes li+li::before{display:none}
  .pp-page .plan-main .pp-plans-head h2,.pp-page .plan-main .pp-section h2,.pp-page .plan-main .plan-faq h2{font-size:30px}
  .pp-search #domain-input{font-size:clamp(28px,8.4vw,48px)}
  .plan-quick .pp-plans-head>.plan-billing{position:static!important;margin:16px 0 0!important}
  .pp-search .pp-search-go{width:100%;margin-top:26px}
  .pp-search .pp-search-go .pp-btn{flex:1;max-width:none}
  .pp-tlds{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pp-tlds li:nth-child(n){border-left:0;border-top:0}
  .pp-tlds li:nth-child(2n){border-left:1px solid #ffffff14}
  .pp-tlds li:nth-child(n+3){border-top:1px solid #ffffff14}
  .pp-tld{padding:18px 14px}
  .pp-tld b{font-size:24px}
  .pp-also{gap:12px 22px}
  /* Room for the keyboard: nothing in the search stage is clipped */
  .pp-stage-search{min-height:calc(100svh - var(--pp-head));padding-bottom:calc(48px + env(safe-area-inset-bottom,0px))}
}
@media(prefers-reduced-motion:reduce){
  .pp-page .pp-stage h1{animation:none}
  .pp-orbs{transform:none;opacity:calc(.12 + var(--pp-p) * .78);transition:none}
  .pp-btn,.pp-more,.pp-tld,.pp-also a,.pp-search #domain-input,.pp-page .plan-main .pp-dim{transition:none}
}

/* The catalogue's atmosphere now reads as dark ruby across product families.
   Product colour stays on primary actions, pricing cues and small details. */
.pp-page:is(.plan-art-page,.wm-page){background:radial-gradient(ellipse 75% 34% at 72% 5%,rgba(103,23,50,.22),transparent 72%),#090609}
.pp-page:is(.plan-art-page,.wm-page) .pp-sky::before{background:radial-gradient(circle at 50% 24%,color-mix(in srgb,rgb(var(--product-rgb)) 46%,#9b3a57) 0%,color-mix(in srgb,rgb(var(--product-rgb)) 34%,#681d37) 24%,color-mix(in srgb,rgb(var(--product-rgb)) 16%,#3d1022) 50%,#1c0b14 72%,transparent 88%);filter:blur(52px);opacity:.8}
.pp-page:is(.plan-art-page,.wm-page) .pp-sky::after{background:radial-gradient(ellipse at var(--pp-glow-x) 58%,transparent 6%,rgba(8,4,7,.26) 43%,rgba(8,4,7,.9) 80%),linear-gradient(180deg,#080508e8 0%,transparent 30%,#090609 95%)}
.pp-page:is(.plan-art-page,.wm-page) .pp-orbs{filter:brightness(.84)}
.pp-page.wm-page .wm-main:before{background:radial-gradient(ellipse 68% 24% at 78% 10%,rgba(104,28,53,.2),transparent 75%)}
.pp-page.wm-page .wm-plan{background:linear-gradient(148deg,#231019 0%,#170c12 48%,#100b10 100%)}

/* ---------- Cinematic pass — 18 October 2026 ----------
   The first screen is an opening shot: the product's light rises over the ruby horizon with a
   thin lens streak along its crest, and the title pulls into focus. Roomier type throughout the
   stage (owner: "too cramped"): normal tracking, open line heights, more air between each line.
   Motion runs once on load and only without reduced motion; the resting state is the final frame. */
.pp-page .pp-stage{padding:72px 0 140px}
.pp-page .pp-stage .sn-ai-card{margin-bottom:56px}
.pp-page .pp-stage h1,.pp-page .wm-main .pp-stage h1{line-height:1.12;letter-spacing:normal!important;word-spacing:.04em}
.pp-page .pp-stage h1 .pp-accent{margin-top:.04em}
.pp-page .pp-stage h1 .pp-accent-inline{display:inline;margin:0}
.pp-page .pp-stage .pp-lead,.pp-page .wm-main .pp-stage .pp-lead{max-width:34ch;margin:36px auto 52px;line-height:1.65;font-weight:500;letter-spacing:.005em;word-spacing:.06em}
.pp-page .pp-stage .pp-more{margin-top:30px}
.pp-page .pp-stage .pp-notes{margin-top:44px;gap:10px 0;line-height:1.6}

/* Sunrise: the product's own colour at the core of the ruby horizon, brighter than before */
.pp-page:is(.plan-art-page,.wm-page) .pp-sky::before{background:radial-gradient(circle at 50% 24%,
    color-mix(in srgb,rgb(var(--product-rgb)) 58%,#f1c3cf) 0%,
    color-mix(in srgb,rgb(var(--product-rgb)) 62%,#8e3050) 20%,
    color-mix(in srgb,rgb(var(--product-rgb)) 30%,#4a1328) 46%,
    #1c0b14 70%,transparent 88%);opacity:.9}
/* The lens streak: a hairline of light lying along the horizon, wide and soft like an anamorphic flare */
.pp-page .pp-stage::after{content:"";position:absolute;z-index:-1;left:50%;bottom:calc(13vw + 120px);width:min(120vw,1700px);height:2px;transform:translateX(-50%);pointer-events:none;border-radius:50%;
  background:radial-gradient(ellipse 50% 50% at 50% 50%,rgba(255,255,255,.75),color-mix(in srgb,rgb(var(--product-rgb)) 70%,#fff) 18%,rgb(var(--product-rgb)/.35) 48%,transparent 72%);
  box-shadow:0 0 18px 2px rgb(var(--product-rgb)/.35);opacity:.55;mix-blend-mode:screen}
.pp-page .pp-stage-search::after{left:74%}

@media(prefers-reduced-motion:no-preference){
  /* The light rises from below the fold, then the title, line and actions pull into focus in turn */
  .pp-page .pp-sky::before{animation:pp-dawn 2.6s cubic-bezier(.16,1,.3,1) both}
  .pp-page .pp-stage::after{animation:pp-streak 2.2s cubic-bezier(.16,1,.3,1) .5s both}
  .pp-page .pp-stage h1{animation:pp-focus 1.5s cubic-bezier(.16,1,.3,1) .2s both,pp-heading-sway 7.5s ease-in-out 1.7s infinite}
  .pp-page .pp-stage :is(.pp-lead,.pp-btn,.pp-more,.pp-notes){animation:pp-focus-soft 1.2s cubic-bezier(.16,1,.3,1) both}
  .pp-page .pp-stage .pp-lead{animation-delay:.45s}
  .pp-page .pp-stage .pp-btn{animation-delay:.6s}
  .pp-page .pp-stage .pp-more{animation-delay:.7s}
  .pp-page .pp-stage .pp-notes{animation-delay:.8s}
  @keyframes pp-dawn{from{translate:0 16vw;opacity:.25}}
  @keyframes pp-streak{from{scale:.2 1;opacity:0}}
  @keyframes pp-focus{from{filter:blur(14px);opacity:.2;scale:1.06}}
  @keyframes pp-focus-soft{from{filter:blur(6px);opacity:.2;translate:0 10px}}
}

@media(max-width:720px){
  .pp-page .pp-stage{padding:48px 0 96px}
  .pp-page .pp-stage .sn-ai-card{margin-bottom:44px}
  .pp-page .pp-stage h1,.pp-page .wm-main .pp-stage h1{line-height:1.14}
  .pp-page .pp-stage .pp-lead,.pp-page .wm-main .pp-stage .pp-lead{margin:28px auto 40px;line-height:1.7}
  .pp-page .pp-stage .pp-more{margin-top:24px}
  .pp-page .pp-stage .pp-notes{margin-top:36px;gap:10px}
  .pp-page .pp-stage::after{bottom:calc(75vw - 40px);width:180vw}
}

/* ---------- Cinematic motion — 18 October 2026 (owner: "crazy cinematic animations / transitions") ----------
   Everything here runs only without reduced motion, and every resting state is the normal page.
     - title sequence: letterbox bars pull open; the headline flips up word by word out of a blur
       (product-pages.js wraps each word in .pp-w and marks the heading .pp-split)
     - dolly-out: scrolling away, the first screen sinks, shrinks and fades
     - section titles rack-focus in from a blur
     - FAQ answers glide open
     - moving between product pages zooms through a blur cross-fade, header held still
   Scroll-linked parts need scroll-driven animations; browsers without them simply skip them. */
@media(prefers-reduced-motion:no-preference){
  .pp-page .pp-stage::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:50%;width:100vw;translate:-50% 0;pointer-events:none;
    background:linear-gradient(#000,#000) top/100% 0 no-repeat,linear-gradient(#000,#000) bottom/100% 0 no-repeat;
    animation:pp-letterbox 1.7s cubic-bezier(.65,0,.35,1) .1s both}
  @keyframes pp-letterbox{from{background-size:100% 24%,100% 24%}}

  .pp-page .pp-stage h1.pp-split{animation:pp-heading-sway 7.5s ease-in-out 2s infinite}
  .pp-page .pp-stage h1 .pp-accent .pp-w{color:inherit!important}
  .pp-page .pp-stage h1 .pp-w{display:inline-block;transform-origin:50% 100%;animation:pp-word 1.3s cubic-bezier(.16,1,.3,1) calc(.2s + var(--i) * .09s) both}
  @keyframes pp-word{from{opacity:0;filter:blur(12px);transform:perspective(520px) translateY(.45em) rotateX(-75deg)}}

  .pp-page .plan-faq{interpolate-size:allow-keywords}
  .pp-page .plan-faq details::details-content{block-size:0;overflow:clip;transition:block-size .5s cubic-bezier(.16,1,.3,1),content-visibility .5s allow-discrete}
  .pp-page .plan-faq details[open]::details-content{block-size:auto}

  @view-transition{navigation:auto}
  .pp-page #sn-header{view-transition-name:sn-header}
  ::view-transition-old(root){animation:pp-vt-out .45s cubic-bezier(.7,0,.84,0) both}
  ::view-transition-new(root){animation:pp-vt-in .9s cubic-bezier(.16,1,.3,1) both}
  @keyframes pp-vt-out{to{opacity:0;scale:1.06;filter:blur(10px)}}
  @keyframes pp-vt-in{from{opacity:0;scale:.96;filter:blur(10px)}}

  @supports (animation-timeline:view()){
    .pp-page .pp-stage:not(.pp-stage-search){animation:pp-dolly linear both;animation-timeline:view();animation-range:exit 0% exit 100%}
    @keyframes pp-dolly{to{opacity:.08;scale:.9;translate:0 14%}}
    .pp-page .plan-main :is(.pp-plans-head h2,.pp-section h2,.plan-faq h2){transform-origin:0 60%;animation:pp-rack linear both;animation-timeline:view();animation-range:entry 0% cover 35%}
    @keyframes pp-rack{from{opacity:.1;filter:blur(14px);scale:1.1}}
  }
}

/* Host and Design: nav-destinations.css (loaded after this file) sets their own headline sizes but also tight tracking
   and margins; they keep the sizes and get the same roomy spacing as every other product page (owner: "too cramped"). */
body.pp-page.nav-host .pp-stage h1,body.pp-page.nav-design .wm-main .pp-stage h1{line-height:1.12;letter-spacing:normal!important;word-spacing:.04em}
body.pp-page.nav-host .pp-stage .pp-lead,body.pp-page.nav-design .wm-main .pp-stage .pp-lead{line-height:1.65;margin-top:36px;margin-bottom:52px}
@media(max-width:720px){
  body.pp-page.nav-host .pp-stage h1,body.pp-page.nav-design .wm-main .pp-stage h1{line-height:1.14}
  body.pp-page.nav-host .pp-stage .pp-lead,body.pp-page.nav-design .wm-main .pp-stage .pp-lead{line-height:1.7;margin-top:28px;margin-bottom:40px}
}

/* Design page badge: white on the ruby accent (its dark label read at about 2.3:1) */
.pp-page.wm-page .wm-badge{color:#fff!important}
/* Optical glass spheres: asymmetric reflections, a dark core and fine refracted rims. */
.pp-page .pp-stage::after{content:none!important;display:none!important}
.pp-page .pp-orbs{filter:none;opacity:.76;width:min(29vw,420px)}
.pp-page .pp-orbs i{isolation:isolate;overflow:hidden;mix-blend-mode:normal;border-radius:50%;background:
 radial-gradient(ellipse at 27% 18%,#ffffffb8 0%,#ffffff18 9%,transparent 26%),
 radial-gradient(ellipse at 70% 85%,rgb(var(--product-rgb)/.7),transparent 43%),
 radial-gradient(circle at 38% 34%,rgb(var(--product-rgb)/.18),#0c101bc9 65%,#020307 100%);
 box-shadow:inset 1px 2px 2px #ffffff60,inset -4px -7px 14px #000b,0 24px 42px #0006;opacity:.9;aspect-ratio:1}
.pp-page .pp-orbs i::before{content:"";position:absolute;inset:1.5%;border-radius:inherit;background:conic-gradient(from 35deg,transparent 0 12%,rgb(var(--product-rgb)/.9) 19%,#ffffffb0 22%,transparent 26% 57%,rgb(var(--product-rgb)/.6) 69%,transparent 81%);mask:radial-gradient(circle,transparent 66%,#000 70%);opacity:.85}
.pp-page .pp-orbs i::after{content:"";position:absolute;inset:9% 13% 51% 14%;border-radius:50%;background:linear-gradient(160deg,#ffffff78,#ffffff08 55%,transparent);transform:rotate(-28deg);filter:blur(1px);opacity:.6}
.pp-page .pp-orbs i:nth-child(1){width:80%;right:-3%;top:1%}
.pp-page .pp-orbs i:nth-child(2){width:43%;left:1%;bottom:0;opacity:.8}
.pp-page .pp-orbs i:nth-child(3){width:30%;right:-8%;top:52%;opacity:.75}
@media(prefers-reduced-motion:no-preference){
 .pp-page .pp-orbs i{animation:pp-glass-float 12s cubic-bezier(.45,0,.55,1) infinite alternate;animation-play-state:paused}
 .pp-page .pp-orbs.is-visible i{animation-play-state:running}
 .pp-page .pp-orbs i:nth-child(2){animation-duration:9s;animation-delay:-4s}
 .pp-page .pp-orbs i:nth-child(3){animation-duration:14s;animation-delay:-7s}
}
@keyframes pp-glass-float{from{transform:translate3d(0,0,0) rotate(-7deg)}to{transform:translate3d(-8%, -9%,0) rotate(10deg)}}
@media(max-width:720px){.pp-page .pp-orbs{width:52vw;opacity:.6}}
.builder-plan-page .pp-orbs{display:block;width:min(22vw,300px);bottom:-20px;opacity:.4}