/* Shared resilience: content remains available without scripts or web fonts. */
html{scroll-padding-top:calc(var(--header-height,6rem) + 12px);-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{font-size:1rem}
[hidden]{display:none!important}
@supports(overflow:clip){body{overflow-x:clip}}
img,svg{max-width:100%}
button,input{font:inherit}
a,button,summary{touch-action:manipulation}
:focus-visible{outline:3px solid #7A12FB;outline-offset:4px}
.skip-link{position:fixed;top:8px;left:16px;z-index:1000;max-width:calc(100% - 32px);transform:translateY(-160%);padding:12px 18px;background:#fff;color:#0B1152;border-radius:8px;font-size:1rem}
.skip-link:focus{transform:none}
.nav-in{flex-wrap:wrap;gap:12px 20px}
.nav-cta,.nav .brand{max-width:100%}
.nav-cta{margin-left:auto}
.nav .brand{min-width:0}
.nav-links{flex-wrap:wrap;min-width:0}
.nav-links a{white-space:normal;min-height:44px}
/* Keep desktop navigation beside the action button; the links absorb the free space. */
@media(min-width:921px){.nav-links + .nav-cta{margin-left:0}}
.btn{min-height:44px;max-width:100%;text-align:center;overflow-wrap:anywhere}
.box-top{flex-wrap:wrap}
.box-top .state{max-width:100%;font-size:.75rem;letter-spacing:.04em;color:#B8BFE8}
.box-top .dot{background:#8E97D6;box-shadow:0 0 0 4px rgba(142,151,214,.15)}
.box-meta,.hero-grid,.qa{min-width:0}
.box-meta>div,.hero-grid>*,.qa>*{min-width:0}
.plan-price{flex-shrink:1;flex-wrap:wrap;min-width:0}
.plan-free>div{min-width:0;overflow-wrap:anywhere}
.qa summary{overflow-wrap:anywhere}
.q-text{min-width:0;overflow-wrap:anywhere}
.plan li{overflow-wrap:anywhere}
.kicker,.foot h4{font-size:.875rem}
.plan-term,.btn-stack small,.plan-badge,.box-meta dt{font-size:.75rem}
.plan-free small{font-size:.75rem;letter-spacing:.04em}
.how-step p,.qa p,.plan li,.foot-about p{font-size:1rem}
.plan-joke{background:none;color:#B8A8FF;-webkit-text-fill-color:currentColor}
.hero h1 em{background-image:linear-gradient(115deg,#737CFF,#B56AFF)}
.js .rise,.rise{opacity:1;transform:none;transition:none}
.drawer{max-height:calc(100vh - var(--header-height,96px));max-height:calc(100dvh - var(--header-height,96px))}
.no-js .burger{display:none}
.no-js .drawer{display:flex;max-height:none}
.foot a{display:inline-block;padding-block:4px}

/* Help and legal pages share the same safe-area and keyboard behaviour. */
.header,.nav{padding-top:env(safe-area-inset-top,0px)}
.header-in{height:auto;min-height:76px;padding-block:12px;flex-wrap:wrap}
.header .logo{margin-left:0;flex-shrink:0}
.header .nav{padding-top:0;flex-wrap:wrap;gap:12px 20px}
.header .burger{flex-shrink:0}
.header .nav a{min-height:44px;display:inline-flex;align-items:center}
.header~.hero h1{font-size:clamp(2.125rem,5vw,3.125rem)}
.header~.hero p{font-size:1.125rem}
.layout .side{max-height:calc(100dvh - var(--header-height,76px) - 24px);overflow-y:auto;top:calc(var(--header-height,76px) + 16px)}
.layout .sec h2{font-size:1.8125rem}
.layout .step h3{font-size:1.125rem}
.layout .step p,.layout .note,.layout .table{font-size:1rem}
.tabs{gap:8px}
.tab{font-size:.9375rem;min-height:44px;max-width:100%;overflow-wrap:anywhere}
details.acc>summary{flex-wrap:wrap;font-size:1.0625rem;min-width:0}
details.acc>summary:after{flex-shrink:0}
.badge{font-size:.75rem;overflow-wrap:anywhere;max-width:100%}
kbd,.path{white-space:normal;overflow-wrap:anywhere}
.acc-body{min-width:0}
.search-status{font-size:.9375rem!important;margin:16px 0 0!important}
.search-empty{padding:24px;border:1px solid var(--line);border-radius:14px;background:#fff}
.panel-title{font-size:1.25rem;margin:16px 0}
.js .panel-title{display:none}
.searching .panel-title{display:block}
.searching .tabs{display:none}
.no-js .tabs,.no-js .search-box{display:none}
.no-js .panel[hidden]{display:block!important}
.no-js .header .burger{display:none}
.footer{padding-bottom:max(40px,env(safe-area-inset-bottom,0px))}
.navin{flex-wrap:wrap}
.navin,.header-in,.header~.hero .wrap,.layout,.footer .wrap{padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.doc{scroll-margin-top:calc(var(--header-height,96px) + 12px)}
@media(max-width:920px){.nav-in{gap:10px}.box-top .state{margin-left:auto}}
@media(max-width:900px){
  .header .nav{top:100%;padding:10px max(20px,env(safe-area-inset-left,0px)) 20px;max-height:calc(100dvh - var(--header-height,76px));overflow-y:auto;gap:0}
  .layout .side{position:static;max-height:none;overflow:visible}
  .no-js .header .nav{display:flex;position:static;width:100%;padding:0;max-height:none}
}
@media(max-width:600px){
  .header~.hero p{font-size:1rem}
  .layout .sec h2{font-size:1.6rem}
  .acc-body{padding:16px}
  details.acc>summary{padding:16px;gap:8px}
  .qa p{padding-right:2px}
  .nav .brand img{width:34px}
  .nav-cta .btn{padding-inline:12px;font-size:.875rem}
  .doc{margin-inline:12px}
}
@media(max-height:440px) and (orientation:landscape){.nav,.header{position:relative}.layout .side{position:static;max-height:none}.drawer,.header .nav{max-height:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
@media(forced-colors:active){.hero h1 em,.plan-joke{background:none;color:CanvasText;-webkit-text-fill-color:CanvasText}.btn,.q-btn,.tab{border:1px solid ButtonText}}

/* Connection details stay readable and wrap as separate rows on phones. */
.ipbar-in{font-size:.875rem;line-height:1.5}
.ipbar-in>span{overflow-wrap:anywhere}
.ipbar .st.wait{color:#B8BFE8}
@media(max-width:600px){
  .ipbar-in{row-gap:4px}
  .ipbar-in>span:not(.sep){flex-basis:100%}
}