/* Shared responsive fixes: appearance picker, brand highlights, landing spacing
   and review height. Account, payment and API behavior are unchanged. */

/* A transparent logo tile must not draw its own detached top edge. */
.brand-mark,html[data-theme] .brand-mark{box-shadow:none!important}
:is(.site-top-hub,.landing-nav,.page-topbar,.legal-topbar)>.lg-specular-layer{display:none!important}

/* The picker stays anchored to its trigger instead of filling the phone screen. */
body .theme-popover.appearance-popover[data-theme-popover]{
  position:fixed!important;
  left:var(--appearance-left,10px)!important;
  top:var(--appearance-top,72px)!important;
  right:auto!important;bottom:auto!important;
  width:min(330px,var(--appearance-max-width,calc(100vw - 20px)))!important;
  max-width:calc(100vw - 20px)!important;
  height:auto!important;min-height:0!important;
  max-height:min(340px,calc(100vh - 20px),var(--appearance-max-height,100vh))!important;
  max-height:min(340px,calc(100dvh - 20px),var(--appearance-max-height,100dvh))!important;
  padding:10px!important;margin:0!important;
  overflow-x:hidden!important;overflow-y:auto!important;
  overscroll-behavior:contain;scrollbar-width:thin;scrollbar-gutter:auto!important;
  scrollbar-color:rgb(var(--theme-rgb)/.38) transparent;
  border-radius:17px!important;
  background:color-mix(in srgb,var(--surface-solid) 97%,var(--primary))!important;
  border-color:var(--border-strong)!important;color:var(--text)!important;
}
body .appearance-popover[data-theme-popover] .theme-popover-head{
  min-height:34px;align-items:center;gap:10px;margin:0 0 8px!important;
}
body .appearance-popover[data-theme-popover] .theme-popover-head .overline,
body .appearance-popover[data-theme-popover] .theme-popover-head small{display:none!important}
body .appearance-popover[data-theme-popover] .theme-popover-head b{font-size:.8rem!important;line-height:1.3}
body .appearance-popover[data-theme-popover] .theme-popover-head>button{width:34px!important;height:34px!important;min-width:34px!important;min-height:34px!important;flex:none}
.appearance-popover .appearance-tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:3px;margin-bottom:10px;border:1px solid var(--border);border-radius:10px;background:rgb(var(--theme-rgb)/.035)}
.appearance-popover .appearance-tabs>button{min-height:32px;padding:6px 10px;border:0;border-radius:7px;background:transparent;color:var(--muted);font-family:inherit;font-size:.72rem;font-weight:600;line-height:1.3;cursor:pointer}
.appearance-popover .appearance-tabs>button[aria-selected="true"]{background:rgb(var(--theme-rgb)/.12);color:var(--text)}
.appearance-popover .appearance-panel[hidden]{display:none!important}
body .appearance-popover[data-theme-popover] .theme-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px!important;margin:0!important}
body .appearance-popover[data-theme-popover] .theme-grid>button{display:grid!important;grid-template-columns:24px minmax(0,1fr) 12px!important;align-items:center!important;gap:6px!important;min-height:44px!important;height:auto!important;min-width:0!important;padding:7px!important;border-radius:10px!important}
body .appearance-popover[data-theme-popover] .theme-swatch{width:24px!important;height:24px!important;border-radius:7px!important}
body .appearance-popover[data-theme-popover] .theme-grid b{color:var(--text)!important;font-size:.64rem!important;line-height:1.25!important;white-space:normal!important;overflow-wrap:anywhere!important}
body .appearance-popover[data-theme-popover] .theme-copy{padding:0!important;min-width:0}
body .appearance-popover[data-theme-popover] .theme-check{position:static!important;inset:auto!important;width:12px!important;height:12px!important;transform:none!important;border:0!important;background:transparent!important;visibility:hidden!important;opacity:0!important}
body .appearance-popover[data-theme-popover] [data-theme-choice][aria-checked="true"] .theme-check{visibility:visible!important;opacity:1!important;color:var(--primary)!important}
body .appearance-popover[data-theme-popover] .theme-check svg{width:12px!important;height:12px!important}
body .appearance-popover[data-theme-popover] .combined-shader-grid{grid-template-columns:minmax(0,1fr)!important;gap:7px!important}
body .appearance-popover[data-theme-popover] [data-shader-grid] .shader-choice{min-height:44px!important;grid-template-columns:28px minmax(0,1fr) 16px!important;padding:7px 9px!important;gap:9px!important}
body .appearance-popover[data-theme-popover] [data-shader-grid] .shader-choice b{color:var(--text)!important;font-size:.7rem!important;line-height:1.3!important}
body .appearance-popover[data-theme-popover] .combined-shader-intensity{min-height:32px;margin-top:9px!important;font-size:.63rem!important}
.appearance-popover :is([role="tab"],[role="radio"],[data-shader-choice]):focus-visible{outline:2px solid var(--primary);outline-offset:2px}

/* Natural vertical flow. Short screens scroll instead of compressing every gap. */
body.landing-page:not(.modal-open){overflow-y:auto!important}
body.landing-page .landing-shell{
  width:min(1280px,100%)!important;max-width:100%!important;
  height:auto!important;min-height:0!important;display:block!important;
  margin:0 auto!important;padding:14px clamp(12px,2.6vw,28px) 0!important;
  overflow:visible!important;
}
body.landing-page .landing-main{
  display:flex!important;flex-direction:column!important;align-items:center!important;
  justify-content:flex-start!important;align-content:start!important;
  height:auto!important;min-height:0!important;width:100%!important;
  padding:clamp(28px,4vw,52px) 0 24px!important;gap:0!important;
}
body.landing-page .landing-hero{width:min(100%,1000px)!important;min-width:0!important}
body.landing-page .landing-hero>.landing-constellation{width:min(580px,94vw)!important;height:clamp(138px,17vw,190px)!important;margin:0 auto 24px!important}
body.landing-page .landing-hero h1{margin:0!important}
body.landing-page .landing-hero h1 span{font-size:clamp(3.5rem,8vw,6rem)!important;line-height:1!important}
body.landing-page .landing-hero h1 em{font-size:.64rem!important;line-height:1.5!important;margin-top:9px!important}
body.landing-page .landing-hero-actions{width:min(440px,100%)!important;margin:22px auto 0!important;gap:12px!important}
body.landing-page .landing-hero-actions>.btn{min-height:44px!important;padding:10px 18px!important;font-size:.7rem!important;line-height:1.35!important}
body.landing-page .network-floats{position:relative!important;inset:auto!important;transform:none!important;width:min(860px,100%)!important;margin:30px auto 0!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px!important}
body.landing-page .network-summary{height:auto!important;min-height:64px!important;max-height:none!important;padding:10px 13px!important;grid-template-columns:40px minmax(0,1fr) 32px!important;gap:12px!important}
body.landing-page .network-summary small{font-size:.58rem!important;line-height:1.4!important}
body.landing-page .network-summary b{font-size:.76rem!important;line-height:1.4!important;margin-top:3px!important;white-space:normal!important;overflow-wrap:anywhere!important}
body.landing-page .featured-reviews-cue{margin:8px auto 16px!important}
body.landing-page .featured-reviews-shell{margin:0 auto 76px!important;width:min(1160px,calc(100% - 24px))!important}
body.landing-page .featured-reviews-head{margin-bottom:12px!important;gap:12px!important}

/* Fixed-height review cards keep the active review beside its section heading.
   Long text scrolls inside its card; the largest review cannot inflate the stage. */
body.landing-page .featured-review-list{height:auto!important;min-height:0!important;align-items:flex-start!important;padding-top:10px!important;padding-bottom:18px!important}
body.landing-page .featured-review-card{height:300px!important;min-height:0!important;max-height:none!important;gap:10px}
body.landing-page .featured-review-card p{min-height:0;flex:1 1 auto;margin:6px 0 8px!important}
body.landing-page .featured-review-card.is-active p,
body.landing-page .featured-reviews-shell.is-single .featured-review-card p{display:block!important;overflow-y:auto!important;overflow-x:hidden!important;-webkit-line-clamp:unset!important;max-height:none!important;padding-right:5px!important;overscroll-behavior-y:contain;scrollbar-width:thin;scrollbar-color:rgb(var(--theme-rgb)/.34) transparent;font-size:.84rem!important;line-height:1.55!important}
body.landing-page .featured-review-card :is(.featured-review-card-top,.featured-review-head){flex:none}
body.landing-page .featured-review-card p:focus-visible{outline:2px solid var(--primary);outline-offset:3px}

/* Fluid public pages retain gutters and wrap content before it can overflow. */
:where(.own-vpn-main,.own-vpn-hero,.own-vpn-hero-copy,.own-vpn-visual,.all-reviews-grid,.developer-two-column,.developer-doc-list,.page-wrap,.legal-shell,.review-page-shell){min-width:0!important}
:where(.legal-card,.support-step,.developer-panel,.developer-doc-card,.own-vpn-feature,.own-vpn-step) :is(p,a,code){overflow-wrap:anywhere}

@media(max-width:900px){
  body.landing-page .network-floats{width:min(600px,100%)!important}
  body.landing-page .landing-hero>.landing-constellation{height:148px!important;margin-bottom:22px!important}
  body.landing-page .guardian-shield{width:92px!important;height:104px!important}
  body.landing-page .guardian-logo{width:48px!important;height:55px!important}
  body.landing-page .own-vpn-float:not([hidden]){padding:11px 12px!important;margin-top:24px!important;margin-bottom:0!important;gap:7px!important}
  body.landing-page .own-vpn-float:not([hidden])+.network-floats{margin-top:20px!important}
  .own-vpn-page .own-vpn-visual-compact .vpn-server-stack{height:min(280px,42dvh)!important;max-height:min(280px,42dvh)!important}
  .own-vpn-page .own-vpn-faq-scroll{max-height:min(300px,44dvh)!important}
}
@media(max-width:640px){
  body.landing-page .network-floats{grid-template-columns:minmax(0,1fr)!important;max-width:500px!important;gap:12px!important}
  body.landing-page .landing-hero h1 span{font-size:clamp(2.6rem,13.6vw,4.4rem)!important}
  body.landing-page .featured-reviews-head{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:9px!important;align-items:start!important}
  body.landing-page .featured-reviews-actions{justify-content:flex-start!important;flex-wrap:wrap!important;gap:8px!important}
  body.landing-page .featured-reviews-actions a{min-height:34px!important;padding:7px 10px!important;font-size:.61rem!important;flex:0 1 auto!important}
  body.landing-page .featured-review-list{--featured-card-width:min(86vw,390px)}
  body.landing-page .featured-review-card{height:280px!important;padding:17px!important}
}
@media(max-width:520px){
  body .theme-popover.appearance-popover[data-theme-popover]{width:min(320px,var(--appearance-max-width,calc(100vw - 20px)))!important;max-height:min(320px,52vh,var(--appearance-max-height,100vh))!important;max-height:min(320px,52dvh,var(--appearance-max-height,100dvh))!important}
  body.landing-page .landing-shell{padding:10px 12px 0!important}
  body.landing-page .landing-main{padding:28px 0 20px!important}
  body.landing-page .landing-nav{height:auto!important;min-height:54px!important;padding:6px 8px!important}
  body.landing-page .landing-logo>span{width:36px!important;height:36px!important}
  body.landing-page .landing-hero>.landing-constellation{height:126px!important;margin-bottom:22px!important}
  body.landing-page .guardian-shield{width:80px!important;height:90px!important}
  body.landing-page .guardian-logo{width:41px!important;height:47px!important}
  body.landing-page .landing-hero h1 em{font-size:.57rem!important;margin-top:8px!important}
  body.landing-page .landing-hero-actions{margin-top:20px!important;gap:10px!important;width:min(350px,100%)!important}
  body.landing-page .landing-hero-actions>.btn{min-height:44px!important;padding:10px 12px!important;font-size:.65rem!important}
  body.landing-page .network-floats{margin-top:26px!important}
  body.landing-page .network-summary{min-height:62px!important;padding:10px 12px!important;gap:10px!important}
  body.landing-page .featured-reviews-shell{margin-bottom:70px!important}
  .own-vpn-page .own-vpn-hero-copy{padding:24px 20px!important}
  .own-vpn-page .own-vpn-section-head h2{line-height:1.2!important}
  .own-vpn-page .own-vpn-cta{gap:16px!important}
}
@media(max-width:359px){
  body.landing-page .landing-shell{padding-inline:10px!important}
  body.landing-page .landing-logo b{font-size:.6rem!important}
  body.landing-page .network-summary{grid-template-columns:32px minmax(0,1fr) 28px!important;gap:8px!important;padding:9px!important}
  body.landing-page .network-summary b{font-size:.7rem!important}
  body.landing-page .network-summary small{font-size:.54rem!important}
  body.landing-page .landing-hero-actions>.btn{padding-inline:9px!important;font-size:.6rem!important}
}
@media(max-height:520px) and (min-width:600px){
  body.landing-page .landing-main{padding-top:24px!important}
  body.landing-page .landing-hero>.landing-constellation{height:96px!important;margin-bottom:18px!important}
  body.landing-page .guardian-shield{width:68px!important;height:78px!important}
  body.landing-page .guardian-logo{width:35px!important;height:40px!important}
  body.landing-page .landing-hero h1 span{font-size:3.5rem!important}
  body.landing-page .featured-review-card{height:240px!important}
}
@media(prefers-reduced-motion:reduce){
  .appearance-popover .appearance-tabs>button{transition:none!important}
}

/* V158: keep the brand and every navigation link visible on mobile.
   Brand and account controls share the first row; navigation owns the second. */
@media(max-width:1180px){
  html body header.site-top-hub.mobile-header:is(.legal-topbar,.landing-nav,.page-topbar){
    display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;
    grid-template-rows:auto auto!important;align-items:center!important;
    height:auto!important;min-height:0!important;max-height:none!important;
    gap:8px 10px!important;padding:9px 10px!important;overflow:visible!important;
  }
  html body header.site-top-hub.mobile-header:is(.legal-topbar,.landing-nav,.page-topbar)>:is(.legal-home,.landing-logo,.mobile-brand,.page-identity){
    grid-column:1!important;grid-row:1!important;justify-self:start!important;
    display:flex!important;align-items:center!important;gap:8px!important;
    min-width:0!important;width:auto!important;max-width:100%!important;
    margin:0!important;overflow:visible!important;
  }
  html body header.site-top-hub.mobile-header:is(.legal-topbar,.landing-nav,.page-topbar)>.mobile-brand~.page-identity{display:none!important}
  html body header.site-top-hub.mobile-header:is(.legal-topbar,.landing-nav,.page-topbar) :is(.legal-home,.landing-logo,.mobile-brand) b{
    display:inline!important;visibility:visible!important;opacity:1!important;
    width:auto!important;max-width:none!important;overflow:visible!important;
    font-size:.72rem!important;line-height:1.3!important;letter-spacing:.035em!important;
    white-space:nowrap!important;color:var(--text)!important;
  }
  html body header.site-top-hub.mobile-header:is(.legal-topbar,.landing-nav,.page-topbar) :is(.landing-logo,.mobile-brand) small{
    display:inline!important;visibility:visible!important;opacity:1!important;
    font-size:.72rem!important;line-height:1.3!important;letter-spacing:.035em!important;
    color:inherit!important;margin:0 0 0 3px!important;
  }
  html body header.site-top-hub.mobile-header:is(.legal-topbar,.landing-nav,.page-topbar)>.mobile-brand>span:not(.brand-mark){display:block!important;white-space:nowrap!important}
  html body header.site-top-hub.mobile-header:is(.legal-topbar,.landing-nav,.page-topbar) .brand-mark{
    display:block!important;flex:0 0 32px!important;width:32px!important;min-width:32px!important;height:32px!important;
  }
  html body header.site-top-hub.mobile-header:is(.legal-topbar,.landing-nav,.page-topbar)>:is(.topbar-actions,.landing-nav-actions,.legal-account-button,.maintenance-nav-status){
    grid-column:2!important;grid-row:1!important;justify-self:end!important;
    display:flex!important;align-items:center!important;flex-wrap:nowrap!important;
    min-width:0!important;max-width:100%!important;gap:6px!important;margin:0!important;
  }
  html body header.site-top-hub.mobile-header:is(.legal-topbar,.landing-nav,.page-topbar)>nav{
    grid-column:1/-1!important;grid-row:2!important;justify-self:stretch!important;
    display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;
    position:static!important;transform:none!important;width:100%!important;
    min-width:0!important;max-width:100%!important;max-height:none!important;
    gap:4px!important;margin:0!important;padding:7px 0 0!important;
    border-top:1px solid var(--border)!important;overflow:visible!important;
    visibility:visible!important;opacity:1!important;
  }
  html body header.site-top-hub.mobile-header:is(.legal-topbar,.landing-nav,.page-topbar)>nav>a{
    display:flex!important;align-items:center!important;justify-content:center!important;
    min-width:0!important;min-height:36px!important;height:auto!important;
    padding:7px 5px!important;margin:0!important;font-size:.68rem!important;
    line-height:1.3!important;letter-spacing:0!important;white-space:nowrap!important;
    border-radius:9px!important;visibility:visible!important;opacity:1!important;
  }
  html body header.site-top-hub.mobile-header:is(.legal-topbar,.landing-nav,.page-topbar)>nav>a.active{color:var(--primary)!important;background:rgb(var(--theme-rgb)/.09)!important}
}
@media(max-width:600px){
  html body header.site-top-hub.mobile-header:is(.legal-topbar,.landing-nav,.page-topbar) :is(.site-login-button,.account-button){width:40px!important;min-width:40px!important;height:40px!important;min-height:40px!important;padding:3px!important}
  html body header.site-top-hub.mobile-header:is(.legal-topbar,.landing-nav,.page-topbar) .site-login-label{display:none!important}
  html body header.site-top-hub.mobile-header:is(.legal-topbar,.landing-nav,.page-topbar) .theme-trigger{width:40px!important;min-width:40px!important;height:40px!important;min-height:40px!important}
}
@media(max-width:359px){
  html body header.site-top-hub.mobile-header:is(.legal-topbar,.landing-nav,.page-topbar) :is(.legal-home,.landing-logo,.mobile-brand) b{font-size:.65rem!important}
  html body header.site-top-hub.mobile-header:is(.legal-topbar,.landing-nav,.page-topbar) :is(.landing-logo,.mobile-brand) small{font-size:.65rem!important}
  html body header.site-top-hub.mobile-header:is(.legal-topbar,.landing-nav,.page-topbar)>nav>a{font-size:.62rem!important;padding-inline:4px!important}
}
@media(max-width:319px){
  html body header.site-top-hub.mobile-header:is(.legal-topbar,.landing-nav,.page-topbar)>nav{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}