/* Shared typography and responsive layout. Colours remain in Picasso Settings. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{font-family:var(--reading-font);font-size:clamp(16px,1.05vw,19px);line-height:1.65}
button,input,textarea,select{font-family:inherit}
h1,h2,h3{font-weight:600;text-wrap:balance;overflow-wrap:anywhere}
p,li,td,th,.breadcrumbs,.release-item{overflow-wrap:anywhere}
.hero-body h1{font-size:clamp(34px,3.2vw,60px);line-height:1.18;font-weight:700}
.hero-body p{font-size:clamp(17px,1.35vw,23px);line-height:1.55}
.hero-body form.search input{font-size:clamp(16px,1.25vw,20px);padding:18px 20px}
.hero-body p.security-title{font-size:18px;line-height:1.4;margin:22px 0 0;font-weight:600}
.hero-body p.hero-note{font-size:16px;line-height:1.65;margin:20px 0 0}
.security-title+.security-logos{margin-top:12px}
.hero-body .phone,.hero-body .phone-image{max-width:100%;justify-self:center;margin-inline:0}
.brand{min-width:0;white-space:normal;overflow-wrap:anywhere}
.brand img{flex-shrink:0}
.menu{flex-shrink:0;min-width:44px;min-height:44px;line-height:1;padding:8px}
.hero nav{min-width:0}
.pap-menu{justify-content:flex-end;flex-wrap:wrap}
.hero nav a{display:block;padding-block:9px}
.pap-menu>li:last-child>.sub-menu{left:auto;right:0}

/* Every action centres its icon and label together, with equal side padding. */
.green,button.green,.download{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;max-width:100%;padding:12px 20px;border-radius:8px;font-family:var(--reading-font);font-size:16px;font-weight:600;line-height:1.4;text-align:center;text-decoration:none;white-space:normal;vertical-align:middle;overflow-wrap:anywhere}
.green>span,.download>span{display:block;min-width:0}
.green .download-icon,.download .download-icon{display:block;flex:0 0 22px;width:22px;height:22px;margin:0;vertical-align:initial}
.hero-body .download{display:flex;width:min(100%,320px);min-height:56px;height:auto;margin:0 auto;padding:14px 22px;gap:10px;border-radius:8px;font-size:18px;font-weight:700;line-height:1.4;box-shadow:0 4px 12px rgba(6,58,73,.13);transition:background-color .18s ease,box-shadow .18s ease}
.hero-body .download .download-icon{width:24px;height:24px;flex-basis:24px}
.hero-body .download:hover,.hero-body .download:active{transform:none}
.intro .green{display:flex;width:min(100%,320px);min-height:54px;margin-inline:auto;padding:14px 20px;border-radius:8px;font-size:17px}
.entry .green{min-height:50px;padding:12px 20px;font-size:16px}
.downloads{align-items:stretch;gap:12px}
.entry .downloads a{flex:1 1 220px;min-width:0;min-height:54px}
.section-head .green{flex-shrink:0;min-height:44px;font-size:14px;padding:10px 16px}

/* Full-width reading, predictable tables and consistent app cards. */
.intro{align-items:flex-start;gap:40px;padding:40px}
.intro>img{width:clamp(160px,18vw,280px);max-width:100%;height:auto}
.intro h2{font-size:clamp(22px,1.9vw,32px);line-height:1.4;font-weight:600;text-transform:uppercase;margin:0 0 16px}
.intro p{font-size:clamp(16px,1.2vw,20px);line-height:1.65;margin:0 0 24px}
.overview-preview>p,.article,.entry .article{font-size:clamp(16px,1.12vw,19px);line-height:1.7}
.article h2,.entry .article h2{font-size:clamp(22px,1.75vw,30px);line-height:1.35;font-weight:600;margin:36px 0 18px}
.article h3{font-size:clamp(19px,1.4vw,24px);line-height:1.4}
.article p{margin:0 0 20px}
.article li{line-height:1.7}
.article table,.entry .article table,.app-facts{width:100%;table-layout:fixed;font-size:16px;line-height:1.5;margin:28px 0}
.article td,.article th,.app-facts td,.app-facts th{padding:12px 14px;vertical-align:top;overflow-wrap:anywhere}
.home-article .article table th{background:var(--pap-overview-table-bg);border-color:var(--pap-overview-table-border);font-weight:600;width:50%}
.home-article .article table td{width:auto}
.article-toc{margin:20px 0 32px;border:1px solid var(--pap-primary)}
.article-toc>summary{background:var(--pap-primary);color:var(--pap-button-text);padding:14px 18px;font-size:15px;font-weight:600}
.article-toc nav{display:grid;gap:8px;padding:18px}
.article-toc nav a{display:block;line-height:1.5}
.article h2[id]{scroll-margin-top:20px}
.section-head{flex-wrap:wrap}
.section-head h2{font-size:clamp(23px,1.9vw,32px);line-height:1.35}
.card{align-items:center;min-width:0;gap:14px}
.card strong{font-size:clamp(15px,1.15vw,19px);font-weight:600;white-space:normal;line-height:1.4}
.card small{font-size:13px;line-height:1.4}
.card small span{white-space:normal;overflow-wrap:anywhere}
.card small .card-meta-icon{flex-shrink:0}
.app-title>div{min-width:0}
.app-title .app-icon{flex-shrink:0}
.breadcrumbs{flex-wrap:wrap;line-height:1.6}
.entry .article iframe,.article iframe{width:100%;max-width:100%;aspect-ratio:16/9;height:auto;border:0}
.article video{display:block;max-width:100%;height:auto}
.article .wp-block-table{max-width:100%;overflow-x:auto}
.nav-links,.page-numbers{max-width:100%;min-width:0}
.nav-links>div,.site-footer .wrap>div{min-width:0}
.feature p{font-size:16px;line-height:1.65}
.feature h3{font-weight:600}
.site-footer strong{font-weight:600}

@media(max-width:1100px){.hero-body{gap:32px}.intro{gap:28px;padding:28px}.intro>img{width:180px}}
@media(max-width:900px){
 .site-header{column-gap:12px}.site-header>.brand{max-width:calc(100% - 60px)}
 .hero nav.open{display:block}.hero nav .pap-menu{justify-content:flex-start;gap:8px 18px}
 .hero nav a{padding:10px 0}.hero nav .sub-menu a{padding:8px 0}
 .hero-body{grid-template-columns:minmax(0,1fr) minmax(0,.75fr);gap:28px}
 .hero-body h1{font-size:clamp(32px,4.7vw,42px)}
 .hero-body .download{font-size:17px}
 .entry .downloads a{flex:1 1 220px}
}
@media(max-width:700px){
 .wrap{width:calc(100% - 36px)}
 .hero-body{grid-template-columns:minmax(0,1fr);gap:36px;min-height:0;padding:18px 0 44px}
 .hero-body>div:first-child{padding-top:0}.hero-body h1{font-size:clamp(32px,6.4vw,42px);margin-bottom:20px}
 .hero-body .phone,.hero-body .phone-image{width:260px;max-width:85%;justify-self:center;margin:0}
 .intro{display:block;padding:26px 20px;margin:36px 0 28px}
 .intro>img{display:block;width:min(100%,260px);height:auto;margin:0 auto 30px}
 .intro h2{font-size:20px;line-height:1.45;font-weight:700;text-align:left}
 .intro p{font-size:16px;line-height:1.65}
 .intro .green{font-size:16px;min-height:52px}
 .article,.entry .article,.overview-preview>p{font-size:16px}
 .article table,.entry .article table,.app-facts{font-size:14px}
 .article td,.article th,.app-facts td,.app-facts th{padding:11px 10px}
 .article h2,.entry .article h2{font-size:22px;margin:30px 0 16px}
 .steps,.home-article .article ul,.home-article .article ol,.home-after>ul{padding:20px 18px 20px 36px}
 .features,.proscons{grid-template-columns:minmax(0,1fr)}
 .feature,.proscons>div{padding:22px}
 .section-head{gap:12px}.section-head h2{font-size:23px}
 .entry .downloads a{flex-basis:100%;width:100%}
 .release-item .green{width:100%}
 .app-title{gap:16px}.app-title .app-icon{width:64px}
 .entry h1{font-size:30px}
}
@media(max-width:480px){
 .grid{grid-template-columns:minmax(0,1fr);gap:12px}
 .card{padding:14px;gap:14px;min-height:88px}.card .app-icon{width:54px}
 .card strong{font-size:16px}.card small{font-size:13px}.card-meta-icon{width:15px;height:15px}
 .screenshot-grid{grid-template-columns:minmax(0,1fr);margin:24px 0;gap:18px}
 .screenshot-grid figure{padding:22px 18px}.screenshot-grid .phone{max-width:260px;font-size:12px;padding:15px 8px;border-radius:30px}
 .screenshot-grid .screen{border-radius:20px}.screenshot-grid .mini img{max-width:65px}
 .screenshot-grid figcaption{font-size:16px}.screenshot-grid .illustration-note{font-size:12px}
 .hero-body .download{min-height:54px;font-size:17px;padding:14px 18px}
 .site-footer .wrap{gap:24px 16px}.site-footer .brand{font-size:21px}
 .conclusion{margin-inline:0;padding-inline:20px}
}
@media(prefers-reduced-motion:reduce){.green,.download,.hero-body .download{transition:none}}

/* Compact mobile header and full-screen navigation, using the same WP menu. */
.nav-panel{display:contents}
.header-search,.menu-close{display:none}
.menu svg,.menu-close svg{display:block;width:24px;height:24px}
@media(max-width:900px){
 .hero>.wrap{width:100%}
 .hero-body{width:calc(100% - 36px);margin-inline:auto}
 .site-header{display:grid;grid-template-columns:40px minmax(0,max-content) minmax(0,1fr);align-items:center;justify-content:normal;column-gap:5px;row-gap:0;min-height:60px;padding:8px 10px 8px 4px}
 .site-header>.menu{display:grid;place-items:center;min-width:40px;width:40px;min-height:44px;height:44px;padding:8px 6px}
 .site-header>.brand{display:block;max-width:min(38vw,220px);min-width:0;margin-right:4px;font-size:clamp(16px,4.6vw,20px);font-weight:700;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .site-header>.brand img{display:none}
 .site-header>.header-search{display:flex;align-self:center;width:100%;min-width:0;height:44px;margin:0;border-radius:4px}
 .site-header>.header-search input{width:100%;min-width:0;padding:8px 0 8px 10px;font-size:16px;line-height:1.3}
 .site-header>.header-search button{width:40px;min-height:44px;padding:8px}
 .site-header>.header-search button svg{width:24px;height:24px}
 .hero-body form.search{display:none}
 .hero-body .download{margin-top:24px}
 .nav-panel{display:none;position:fixed;inset:0;z-index:100001;width:100%;height:100vh;height:100dvh;overflow-y:auto;overscroll-behavior:contain;padding:calc(52px + env(safe-area-inset-top,0px)) max(18px,env(safe-area-inset-right,0px)) max(24px,env(safe-area-inset-bottom,0px)) max(18px,env(safe-area-inset-left,0px))}
 .nav-panel.open{display:block}
 .menu-close{display:grid;place-items:center;position:absolute;top:calc(4px + env(safe-area-inset-top,0px));right:max(6px,env(safe-area-inset-right,0px));width:44px;height:44px;padding:10px;background:transparent;border:0;cursor:pointer}
 .hero .nav-panel nav{display:block;width:100%;margin:0;padding:0;font-size:13px;line-height:1.4}
 .hero .nav-panel .pap-menu{display:block;width:100%;margin:0;padding:0;list-style:none}
 .hero .nav-panel nav a{display:block;width:100%;min-height:44px;margin:0;padding:13px 0;border-bottom:1px solid;font-size:13px;font-weight:700;text-transform:uppercase;line-height:1.4;text-decoration:none;overflow-wrap:anywhere}
 .hero .nav-panel nav .sub-menu{display:block;position:static;min-width:0;margin:0;padding:0 0 0 16px;box-shadow:none}
 .hero .nav-panel nav .sub-menu a{padding:13px 0;font-size:12px}
 html.pap-menu-open,html.pap-menu-open body{overflow:hidden;overscroll-behavior:none}
}