/* Site-wide UI layer, 2026-10-30. The live homepage (v3) is the standard. Loaded after every page stylesheet;
   it aligns shared parts only (kickers, buttons, heading weights, focus, language switch, zh typography),
   never section layout, colours of sections or photography. Demos do not load it. */
:root{--pp-ink:#17171b;--pp-night:#141417;--pp-cream:#f5f3f0;--pp-pink:#e84274;--pp-pink-ink:#c72d5c}

/* Kickers: small uppercase line as on the homepage (.hx-kicker), no pill box. Colour stays per section for contrast. */
main :is(.eyebrow,.kicker,.pp-section-eyebrow){border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;padding:0!important;min-height:0!important;font-size:.74rem!important;font-weight:700!important;letter-spacing:.14em;line-height:1.4;text-transform:uppercase}

/* Buttons: one pill shape and weight everywhere. */
main :is(.btn,.gsx-btn,.ftx-btn,.crx-btn){border-radius:999px;font-weight:600}

/* Headings: homepage weights (EN). zh weights come from the zh rules below. */
html:not([lang="zh-Hans"]) main h1{font-weight:800}
html:not([lang="zh-Hans"]) main h2{font-weight:700}

/* Focus: a visible pink ring wherever a page has no focus style of its own. */
:where(a,button,summary,input,select,textarea,[tabindex]):focus-visible{outline:2px solid var(--pp-pink);outline-offset:2px}

/* Language switch v2 (EN | 中文 capsule) and zh typography v1, for pages built before they existed. */
.pp-language::before{content:none!important}
.pp-language a:not([aria-current]):hover{background:transparent}
.pp-language{position:relative;display:flex;align-items:center;gap:0;flex:none;padding:3px;border:1px solid #ffffff59;border-radius:999px}
.pp-language a{display:flex;align-items:center;justify-content:center;min-width:44px;min-height:32px;padding:0 12px;border-radius:999px;color:#ffffffbf!important;font:600 13px/1.2 Outfit,"Noto Sans SC",system-ui,sans-serif;text-decoration:none!important;transition:color .18s,background-color .18s}
.pp-language a:hover{color:#fff!important}
.pp-language a[aria-current]{background:#fff;color:#17171b!important}
.pp-language a:focus-visible{outline:2px solid #E84274;outline-offset:2px}
.pp-sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* Chinese typography (zh-Hans pages only). Latin and numbers stay Outfit; Chinese uses Noto Sans SC (SIL OFL 1.1). */
html[lang="zh-Hans"] body,html[lang="zh-Hans"] :is(h1,h2,h3,h4,h5,h6,p,a,button,input,select,textarea,label,li,span,em,strong,b,small,dt,dd,summary,legend,figcaption,th,td){font-family:Outfit,"Noto Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif}
html[lang="zh-Hans"] body *{letter-spacing:0!important}
html[lang="zh-Hans"] :is(.kicker,.eyebrow,[class*="kicker"],[class*="eyebrow"]){letter-spacing:.08em!important}
html[lang="zh-Hans"] body{line-break:strict;font-kerning:normal}
html[lang="zh-Hans"] :is(p,li,dd,summary,figcaption,label,small){line-height:1.75}
html[lang="zh-Hans"] h1{line-height:1.25!important;font-weight:700!important}
html[lang="zh-Hans"] h2{line-height:1.3!important;font-weight:700!important}
html[lang="zh-Hans"] :is(h3,h4){line-height:1.4!important;font-weight:700}
html[lang="zh-Hans"] :is(h1,h2,h3,p){text-wrap:pretty}
html[lang="zh-Hans"] h1,html[lang="zh-Hans"] h1 :is(span,em){text-wrap:balance}
html[lang="zh-Hans"] em{font-style:normal}
html[lang="zh-Hans"] body#top .hero h1{max-width:none;letter-spacing:0;line-height:1.25}
.pp-zh-phrase{display:inline-block;white-space:nowrap}
html[lang="zh-Hans"] .home-hero-eyebrow{white-space:nowrap}
html[lang="zh-Hans"] .hww h3{line-height:1.35}
html[lang="zh-Hans"] .hww p{line-height:1.7}
html[lang="zh-Hans"] .hww :is(button,small){letter-spacing:0}
html[lang="zh-Hans"] footer .footer-brand>p:first-of-type{max-width:9em;font-size:clamp(2.4rem,4.5vw,4.5rem);letter-spacing:0;line-height:1.3;text-wrap:balance}
@media(min-width:1241px){nav .nav-inner{gap:12px}nav .pp-language a{padding:0 10px}nav:has(.pp-language) .nav-logo{width:210px;flex-basis:210px}nav:has(.pp-language) .nav-logo img{max-width:210px}}
@media(max-width:1240px){nav .pp-language{margin-left:auto}nav .nav-inner{gap:12px}.mobile-menu-head .pp-language{margin-left:auto}.mobile-menu-head{gap:8px}.mobile-menu-head .mobile-menu-logo{min-width:0}}
@media(max-width:600px){html[lang="zh-Hans"] .hero h1{font-size:clamp(2.15rem,9.5vw,2.7rem);max-width:9em}html[lang="zh-Hans"] .hero .lede{max-width:22em}.mobile-menu-head .mobile-menu-logo{max-width:48px}}
@media(prefers-reduced-motion:reduce){.pp-language a{transition:none}}
@media(min-width:1241px){nav .pp-language a{min-width:44px}}
@media(max-width:600px){.pp-language a{min-width:44px}}

/* Budget Planner in the header (2026-10-30): visible top-level item with a "Free" pill; phone menu row at the top.
   EN desktop is tight (the bar is capped at 1318px): words only, the pill sits above them as a badge, slightly tighter
   item padding and a 160px logo. zh has room for icon + words + pill. */
nav .nav-planner{position:relative;display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
nav .nav-planner svg{flex:none;color:var(--pp-pink)}
.nav-free{display:inline-block;padding:2px 7px;border-radius:999px;background:var(--pp-pink);color:#fff;font-size:.6rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;line-height:1.45}
html[lang="zh-Hans"] .nav-free{letter-spacing:0;font-size:.66rem}
@media (min-width:1241px){
  html:not([lang="zh-Hans"]) .desktop-nav{gap:1px}
  html:not([lang="zh-Hans"]) .desktop-nav :is(.nav-trigger,.nav-direct){padding-left:7px;padding-right:7px}
  html:not([lang="zh-Hans"]) .desktop-nav .nav-service-link{padding-left:7px}
  html:not([lang="zh-Hans"]) nav .nav-planner svg{display:none}
  html:not([lang="zh-Hans"]) nav .nav-planner .nav-free{position:absolute;top:50%;right:2px;transform:translateY(-26px);padding:1px 6px;font-size:.52rem;pointer-events:none}
  nav:has(.pp-language) .nav-logo{width:160px;flex-basis:160px}
  nav:has(.pp-language) .nav-logo img{max-width:160px}
}
.mobile-planner{display:flex;align-items:center;gap:10px;margin:6px 0 12px;padding:14px 16px;border-radius:14px;background:rgba(232,66,116,.14);border:1px solid rgba(232,66,116,.35);color:#fff!important;font-weight:600;text-decoration:none!important}
.mobile-planner svg{color:var(--pp-pink);flex:none}
.mobile-planner .nav-free{margin-left:auto}

/* One CTA hover on every page (2026-10-30, owner request; replaces choice A): any filled CTA turns white with ink text, a thin
   pink ring and the header's gradient blob at the edge nearest the cursor. cta-sweep.js adds .pp-cta and positions the blob;
   the pseudo-element replaces the old .liquid-carve-layer so no markup changes. Ink text stays readable over the blob. */
.liquid-carve-layer{display:none!important}
.pp-cta{position:relative;overflow:hidden;isolation:isolate}
.pp-cta::before{content:""!important;display:block!important;position:absolute!important;z-index:-1!important;left:var(--pp-bx,0)!important;top:var(--pp-by,50%)!important;right:auto!important;bottom:auto!important;width:58px!important;height:58px!important;border-radius:50%;pointer-events:none;opacity:0;background:linear-gradient(135deg,#ff9d00,#f22f83)!important;transform:translate(-50%,-50%) scale(.12);transition:opacity .18s ease,transform .28s cubic-bezier(.2,.8,.2,1)}
.pp-cta.pp-cta-on:not(:disabled,[aria-disabled="true"])::before{opacity:.92;transform:translate(-50%,-50%) scale(1)}
.pp-cta.pp-cta{transition:background-color .2s ease,color .2s ease,box-shadow .2s ease,transform .2s ease!important}
@media (hover:hover) and (pointer:fine){
.pp-cta.pp-cta.pp-cta:not(:disabled,[aria-disabled="true"]):hover{background:#fff!important;color:var(--pp-ink)!important;box-shadow:inset 0 0 0 1.5px var(--pp-pink)!important;filter:none;transform:translateY(-2px)}
.pp-cta.pp-cta.pp-cta:not(:disabled,[aria-disabled="true"]):hover *{color:var(--pp-ink)!important}
}
@media (prefers-reduced-motion:reduce){.pp-cta::before{display:none!important}.pp-cta.pp-cta{transition:none!important}.pp-cta.pp-cta.pp-cta:hover{transform:none!important}}

/* Fonts, header, footer: one system on every page (2026-10-30). The homepage v3 is the reference.
   Mock UIs and poster art inside pages keep their own type on purpose (Google-style Roboto, newspaper mastheads, posters). */
nav[aria-label="Primary navigation"] .nav-inner{width:100%!important;max-width:none!important;margin-left:0!important;margin-right:0!important}
@media (min-width:1241px){.desktop-nav{margin-left:auto!important}}
.nav-cta .btn{width:fit-content;max-width:100%}
html:not([lang="zh-Hans"]) main h2{font-weight:700!important}
main :is(.hero-accent,.ls-editorial,.grp-sheet-name){font-family:Outfit,"Noto Sans SC","PingFang SC",sans-serif!important;font-style:normal!important;font-weight:inherit!important;letter-spacing:inherit!important}
main :is(.cx-clip-n,.cx-clip-when,.cx-frame-code,.cx-rec,.cx-reel-n,.cx-spec,.cx-time){font-family:"JetBrains Mono",ui-monospace,monospace!important}
/* Skip links stay out of the layout until focused, so every page starts at the same height. */
body>a[href^="#main"]:not(.announcement-bar):not(:focus){position:absolute!important;left:-9999px!important;top:auto!important}
body>a[href^="#main"]:not(.announcement-bar):focus{position:fixed!important;left:12px!important;top:12px!important;z-index:2000;padding:10px 16px;border-radius:999px;background:#fff;color:#17171b}
footer .footer-brand>p:nth-of-type(2){line-height:1.5!important}

/* Second unify pass: shared rhythm only. Section spacing closer to the homepage (long pages stop at 112px, the homepage reaches 136px);
   FAQ answers at the homepage body size. Sections with their own spacing keep it. */
body:has(.pp-final-cta):not(:has(.team-gallery)) main > section:not(.pp-hero):not(.pp-final-cta):not(.roster){padding-block:clamp(72px,7.8vw,112px)}
main details:not(.hww details) p{font-size:1.0625rem;line-height:1.65}
@media (max-width:720px){body:has(.pp-final-cta):not(:has(.team-gallery)) main > section:not(.pp-hero):not(.pp-final-cta):not(.roster){padding-block:56px}main details:not(.hww details) p{font-size:1rem}}
.pp-final-cta h2 .pk{color:var(--pp-pink)}

/* Services tape: its own quiet style, so the pink tape stays the homepage's. */
.sv-tape{background:#1d1d22!important;color:#d8d8e0!important;border-block:1px solid rgba(255,255,255,.12)}
.sv-tape-track{animation-direction:reverse}
.sv-tape-track span{font-size:clamp(.95rem,1.4vw,1.15rem)!important;font-weight:600!important}
.sv-tape-track span:after{color:var(--pp-pink)}

/* About marquee: the label holds its own column with the band's background, and items fade out behind it. On phones it sits above the track. */
.abx-marquee{padding-left:0}
.abx-mq-k{position:relative;z-index:2;align-self:stretch;display:flex;align-items:center;margin:-16px 0;padding:16px 8px 16px 40px;background:var(--v-ink,#17171b)}
.abx-mq-k::after{content:"";position:absolute;top:0;bottom:0;left:100%;width:44px;background:linear-gradient(90deg,var(--v-ink,#17171b),transparent);pointer-events:none}
@media (max-width:720px){.abx-marquee{flex-wrap:wrap;gap:8px;padding:12px 0}.abx-mq-k{flex:0 0 100%;margin:0;padding:0 16px}.abx-mq-k::after{content:none}}

/* Form consent (2026-10-30): one layout for every form. Box aligned to the first text line, smaller than field labels, link inline. */
form :is(.ch-consent,.pp-consent,.crx-check){display:flex!important;align-items:flex-start!important;gap:10px!important;min-height:0!important;margin:20px 0 0!important;font-size:.875rem!important;font-weight:400!important;line-height:1.5!important;cursor:pointer}
form :is(.ch-consent,.pp-consent,.crx-check)+:is(.ch-consent,.pp-consent,.crx-check){margin-top:10px!important}
form :is(.ch-consent,.pp-consent,.crx-check) input{flex:0 0 18px!important;width:18px!important;height:18px!important;min-height:18px!important;margin:2px 0 0!important;padding:0!important}
form :is(.ch-consent,.pp-consent,.crx-check) a{color:inherit;text-decoration:underline;text-underline-offset:3px}
form .crx-check label{font-size:inherit!important;font-weight:400!important;color:inherit}
.pp-consent-req{color:var(--pp-pink-ink)}
.pp-consent-opt{color:#6b6b70}