/* Shared header and button presentation. Icons, cards and template canvases stay independent.
   Important declarations in this layer beat legacy unlayered !important page styles. */
@layer ph-interface {
:root{--ph-button-green:#10d994;--ph-button-ink:#05291c;--ph-button-line:#65d6a0;--ph-button-dark:#0b281d}
:is(.btn,.ph-btn,.ph-btn-master,.ph-join-btn,.ph-offer-cta,.ph-submit-btn,.ph-tool-btn,.cs-btn,.ph-action,.ph-smart-btn,.ph-contrast-cta,.ph-contact-cta,.ph-review-cta,.ph-pillar-action,.ph-referral-cta,.ph-preview-button,.hub-link,.hub-explore-all,.mh-button,.mh-pill,.ph-ai-cta),
:is(.ph-join-links,.ph-home-offer-actions,.ph-live-offer-actions,.ph-footer-microcta-links,.ph-live-tool-links,.ph-ag-actions,.ph-studio-actions,.hub-actions,.ph-context-actions,.ph-help-actions,.ph-reward-links) > :is(a,button),
.ph-price-card > a,.mh-card form > button,.ph-lead-form button[type=submit],.ph-placement a:not(.ph-click-target){
background:var(--ph-button-green)!important;color:var(--ph-button-ink)!important;
border:1px solid var(--ph-button-line)!important;text-shadow:none!important;
box-shadow:0 0 14px #10d99426!important;transition:box-shadow .16s ease,border-color .16s ease!important;
max-width:100%;box-sizing:border-box;white-space:normal;overflow-wrap:anywhere;line-height:1.35;
}
:is(.btn.out,.btn.secondary,.ph-btn.alt,.ph-btn-master.secondary,.ph-offer-cta.alt,.ph-tool-btn.alt,.cs-btn.cs-secondary,.ph-smart-btn-alt,.ph-login-btn),
.ph-join-links > a:last-child,.ph-footer-microcta-links > a:not(:first-child),
.ph-live-offer-actions > a:last-child,.ph-studio-actions > a:not(:first-child),.mh-logout button{
background:var(--ph-button-dark)!important;color:#f4fff8!important;border:1px solid var(--ph-button-line)!important;
text-shadow:none!important;box-shadow:0 0 12px #10d99422!important;
}
:is(.ph-service-tabs,.ph-home-tab-buttons,.ph-slider-controls,.ph-nav) button,
:is(.filter-btn,.ph-choice-button,.ph-pause,.ph-prev,.ph-next),
:is(.ph-site-language,.ph-ag-language) button{
background:var(--ph-button-dark)!important;color:#f4fff8!important;border-color:var(--ph-button-line)!important;
box-shadow:0 0 9px #10d99416!important;text-shadow:none!important;
}
:is(.ph-service-tabs,.ph-home-tab-buttons) button.active,.filter-btn.active,
:is(.ph-choice-button,.filter-btn)[aria-pressed=true],
:is(.ph-site-language,.ph-ag-language) button[aria-pressed=true]{
background:var(--ph-button-green)!important;color:var(--ph-button-ink)!important;border-color:var(--ph-button-line)!important;
}
:is(.btn,.ph-btn,.ph-btn-master,.ph-join-btn,.ph-login-btn,.ph-offer-cta,.ph-submit-btn,.ph-tool-btn,.cs-btn,.mh-button,.mh-pill):hover{
border-color:#96f5c8!important;box-shadow:0 0 18px #10d99440!important;
}
:is(.btn,.ph-btn,.ph-btn-master,.ph-join-btn,.ph-login-btn,.ph-offer-cta,.ph-submit-btn,.ph-tool-btn,.cs-btn,.mh-button,.mh-pill):focus-visible{
outline:2px solid #96f5c8!important;outline-offset:3px!important;
}
.ph-site-header :is(.ph-join-btn,.ph-login-btn)::after{animation:none!important;content:none!important}
.hub-jumps a:not(.hub-explore-all){background:var(--ph-button-dark)!important;color:#f4fff8!important;border-color:var(--ph-button-line)!important}
/* One source for responsive public navigation. Studio canvas styling is independent. */
.ph-site-header{position:relative!important;z-index:999!important;background:#03110d!important;border-bottom:1px solid #285e46!important;max-width:100%!important;padding:0!important;min-height:0!important}
.ph-site-header .ph-shell{margin-inline:auto!important;display:flex!important;align-items:center!important;gap:14px!important;width:calc(100% - 40px)!important;max-width:1880px!important;min-height:76px!important;flex-wrap:nowrap!important}
.ph-site-header .ph-brand{color:#fff!important;text-decoration:none!important;display:flex!important;align-items:center!important;gap:9px!important;flex:none!important;max-width:none!important;font:800 18px/1.2 Inter,system-ui,sans-serif!important}
.ph-site-header .ph-brand img{object-fit:cover!important;border-radius:10px!important;width:38px!important;height:38px!important;flex:none!important}
.ph-site-header .ph-brand span{white-space:nowrap!important;font:inherit!important}
.ph-site-header .ph-main-nav{display:flex!important;align-items:center!important;justify-content:center!important;flex:1!important;min-width:0!important;gap:2px!important;margin:0!important;flex-wrap:nowrap!important}
.ph-site-header .ph-main-nav>a,.ph-site-header .ph-nav-dropdown>summary{display:flex!important;align-items:center!important;gap:5px!important;padding:11px 7px!important;font:650 14px/1.3 Inter,system-ui,sans-serif!important;color:#ecf8f0!important;white-space:nowrap!important;text-decoration:none!important;border:0!important;background:transparent!important;border-radius:8px!important;cursor:pointer!important;list-style:none!important}
.ph-site-header .ph-nav-dropdown{position:relative!important;display:block!important;flex:none!important}
.ph-site-header summary::-webkit-details-marker{display:none!important}.ph-site-header summary::marker{content:''!important}
.ph-site-header .ph-nav-menu{position:absolute!important;top:calc(100% + 5px)!important;left:0!important;width:260px!important;min-width:0!important;max-width:calc(100vw - 32px)!important;max-height:calc(100dvh - var(--ph-header-height,76px) - 16px)!important;overflow-y:auto!important;padding:8px!important;border:1px solid #37694e!important;border-radius:12px!important;background:#082219!important;box-shadow:0 10px 24px #0005!important;z-index:10!important}
.ph-site-header .ph-nav-menu a,.ph-site-header .ph-mobile-nav nav a,.ph-site-header .ph-mobile-group>summary{display:block!important;color:#ecf8f0!important;font:650 14px/1.4 Inter,system-ui,sans-serif!important;white-space:normal!important;padding:11px 12px!important;text-decoration:none!important;min-height:44px!important}
.ph-site-header .ph-nav-menu a:hover,.ph-site-header .ph-main-nav>a:hover,.ph-site-header .ph-nav-dropdown>summary:hover{background:#10d99418!important}
.ph-site-header .ph-shell-actions{display:flex!important;align-items:center!important;flex:none!important;gap:7px!important;margin:0!important}
.ph-site-header .ph-shell-actions .ph-join-btn{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-height:44px!important;padding:10px 12px!important;font:750 13px/1.3 Inter,system-ui,sans-serif!important;white-space:nowrap!important;border-radius:10px!important}
.ph-site-header .ph-account-signout{margin:0!important}.ph-site-header .ph-account-signout button{min-height:44px!important;font-size:13px!important}
.ph-site-header .ph-site-language{flex:none!important;margin:0!important;padding:3px!important}
.ph-site-header .ph-site-language button{min-height:36px!important;padding:7px 8px!important;font-size:12px!important;white-space:nowrap!important}
.ph-site-header .ph-mobile-nav{display:none!important;flex:none!important;margin:0!important}
@media(min-width:1400px) and (max-width:1699px){
.ph-site-header .ph-shell{gap:10px!important}.ph-site-header .ph-main-nav>a,.ph-site-header .ph-nav-dropdown>summary{font-size:13px!important;padding-inline:5px!important}
}

@media(max-width:1399px){
.ph-site-header .ph-main-nav{display:none!important}.ph-site-header .ph-brand{margin-right:auto!important}
.ph-site-header .ph-mobile-nav{display:block!important}.ph-site-header .ph-mobile-nav>summary{min-width:44px!important;min-height:44px!important;padding:8px!important}
.ph-site-header .ph-mobile-nav>nav{position:absolute!important;left:12px!important;right:12px!important;top:calc(100% + 6px)!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px!important;max-height:calc(100dvh - var(--ph-header-height,76px) - 18px)!important;overflow-y:auto!important;background:#082219!important;border:1px solid #37694e!important;padding:10px!important;border-radius:12px!important}
.ph-site-header .ph-mobile-group{min-width:0!important}.ph-site-header .ph-mobile-group>summary{cursor:pointer!important;list-style:none!important}.ph-site-header .ph-mobile-group>div{display:grid!important;gap:2px!important}
}
@media(max-width:600px){
.ph-site-header .ph-shell{width:calc(100% - 24px)!important;gap:7px!important;flex-wrap:wrap!important;padding:10px 0!important;min-height:0!important}
.ph-site-header .ph-brand{gap:7px!important;font-size:16px!important;min-width:0!important;flex:1!important}
.ph-site-header .ph-brand img{width:32px!important;height:32px!important}.ph-site-header .ph-brand span{white-space:normal!important}
.ph-site-header .ph-site-language{margin-left:auto!important;flex-basis:auto!important}.ph-site-header .ph-shell::after{content:'';display:block;order:3;width:100%}.ph-site-header .ph-site-language{order:4!important}
.ph-site-header .ph-shell-actions .ph-join-btn{padding:8px 9px!important;font-size:12px!important}.ph-site-header .ph-mobile-nav>nav{grid-template-columns:1fr!important}
.ph-site-header .ph-shell-actions{gap:4px!important;flex-wrap:wrap!important;max-width:145px!important}.ph-site-header .ph-account-signout button{min-height:36px!important;padding:5px 8px!important}
}

.ph-site-header .ph-mobile-nav>summary{display:grid!important;place-items:center!important;list-style:none!important;cursor:pointer!important;border:1px solid #37694e!important;border-radius:10px!important;background:#082219!important;color:#f4fff8!important;width:44px!important;height:44px!important;padding:0!important;overflow:visible!important}
.ph-menu-symbol{display:grid!important;gap:4px!important;width:19px!important}.ph-menu-symbol i{display:block!important;height:2px!important;width:19px!important;background:currentColor!important;border-radius:2px!important}
.ph-site-header .ph-nav-menu{display:none!important}.ph-site-header .ph-nav-dropdown[open]>.ph-nav-menu{display:grid!important}

/* Studio controls only: deliberately exclude category icons, swatches and user templates. */
body[data-view=choose] :is(button.primary,.primary,.start-building,#direct-edit),
body[data-view=details] :is(button.primary,.primary){
background:var(--ph-button-green)!important;border-color:var(--ph-button-line)!important;color:var(--ph-button-ink)!important;text-shadow:none!important;
box-shadow:0 0 12px #10d99422!important;
}
body:is([data-view=choose],[data-view=details]) .studio-account-links a{
display:inline-flex!important;align-items:center!important;justify-content:center!important;
background:var(--ph-button-dark)!important;color:#f4fff8!important;border:1px solid var(--ph-button-line)!important;
border-radius:10px!important;padding:8px 12px!important;min-height:36px!important;box-shadow:0 0 12px #10d99422!important;text-decoration:none!important;
}
body[data-view=choose] .studio-home-nav [data-home-destination=Create]{
background:var(--ph-button-green)!important;color:var(--ph-button-ink)!important;
}
body[data-view=choose] .studio-home-nav [aria-current=page]:not([data-home-destination=Create]){
background:#10d99420!important;color:#174c36!important;
}
body[data-view=choose] .library-filters button[aria-pressed=true]{
background:#10d99420!important;border-color:#65d6a0!important;color:#174c36!important;
}
body[data-view=choose] .empty-projects button{
background:var(--ph-button-green)!important;color:var(--ph-button-ink)!important;border:1px solid var(--ph-button-line)!important;box-shadow:0 0 12px #10d99422!important;
}
body[data-view=choose] :is(.library-more,.library-card .two button:not(.primary),.welcome-switch button){
background:#10d99414!important;color:#174c36!important;border:1px solid var(--ph-button-line)!important;box-shadow:0 0 9px #10d99412!important;
}
body:is([data-view=choose],[data-view=details]) #studio-help-open{
background:var(--ph-button-dark)!important;color:#f4fff8!important;border:1px solid var(--ph-button-line)!important;box-shadow:0 0 12px #10d99422!important;
}
@media(prefers-reduced-motion:reduce){
:is(.btn,.ph-btn,.ph-btn-master,.ph-join-btn,.ph-login-btn,.ph-offer-cta,.ph-submit-btn,.ph-tool-btn,.cs-btn,.mh-button,.mh-pill){transition:none!important}
}

a.ph-cta,button.send,.ph-rate-card > a{
background:var(--ph-button-green)!important;color:var(--ph-button-ink)!important;border:1px solid var(--ph-button-line)!important;box-shadow:0 0 12px #10d99422!important;text-shadow:none!important;
}
a.review-login,.map-embed > a,.ph-contact-links > a,.ph-page-root #services .grid .card a:not(.ph-click-target){
background:var(--ph-button-dark)!important;color:#f4fff8!important;border:1px solid var(--ph-button-line)!important;box-shadow:0 0 12px #10d99422!important;text-shadow:none!important;
}
}

@layer ph-interface {
html body .ph-site-header{height:auto!important;max-height:none!important}
/* Shared navigation: a full row where it fits, a bounded menu on compact screens. */
html body .ph-site-header .ph-shell{position:static!important}
html body .ph-site-header .ph-main-nav{overflow:visible!important}
html body .ph-site-header .ph-mobile-nav{position:static!important}
html body .ph-site-header .ph-nav-menu{box-sizing:border-box;max-width:calc(100vw - 24px)!important}
html body .ph-site-header .ph-mobile-nav>nav{
  position:absolute!important;left:auto!important;right:12px!important;
  top:calc(100% + 6px)!important;width:min(440px,calc(100% - 24px))!important;
  min-width:0!important;max-width:calc(100% - 24px)!important;
  max-height:calc(100dvh - var(--ph-header-height,90px) - 20px)!important;
  display:grid!important;grid-template-columns:minmax(0,1fr)!important;
  overflow-x:hidden!important;overflow-y:auto!important;box-sizing:border-box;
}
html body .ph-site-header .ph-mobile-group>div{
  max-height:none!important;overflow:visible!important;min-width:0!important;
}
html body .ph-site-header .ph-mobile-nav>nav a,
html body .ph-site-header .ph-mobile-nav>nav summary{
  white-space:normal!important;overflow-wrap:anywhere;min-width:0!important;
}
@media(min-width:1280px){
  html body .ph-site-header .ph-main-nav{display:flex!important}
  html body .ph-site-header .ph-mobile-nav{display:none!important}
}
@media(min-width:1280px) and (max-width:1599px){
  html body .ph-site-header .ph-shell{width:calc(100% - 24px)!important;gap:8px!important}
  html body .ph-site-header .ph-brand{flex:0 0 auto!important;font-size:16px!important;gap:7px}
  html body .ph-site-header .ph-brand img{width:32px!important;height:32px!important}
  html body .ph-site-header .ph-main-nav{gap:5px!important}
  html body .ph-site-header .ph-main-nav>a,
  html body .ph-site-header .ph-main-nav>details>summary{font-size:11px!important;padding:8px 3px!important}
  html body .ph-site-header .ph-shell-actions{display:none!important}
}
@media(max-width:1279px){
  html body .ph-site-header .ph-main-nav{display:none!important}
  html body .ph-site-header .ph-mobile-nav{display:block!important;flex:0 0 auto;margin-left:0!important}
  html body .ph-site-header .ph-brand{flex:1 1 auto!important;min-width:0!important}
}
@media(max-width:550px){
  html body .ph-site-header .ph-shell{flex-wrap:wrap!important;padding-block:8px;gap:6px!important}
  html body .ph-site-header .ph-site-language{flex:0 0 100%;justify-content:center}
}

@media(max-width:360px){
  html body .ph-site-header .ph-brand{font-size:14px!important;gap:5px!important}
  html body .ph-site-header .ph-brand img{width:28px!important;height:28px!important}
  html body .ph-site-header .ph-shell-actions .ph-join-btn{font-size:10px!important;padding:7px 6px!important}
}
}