/* PicLink v1.1 – hero = H1 + one-line intro + tool, filling the first screen. Loaded only on pages with the tool in an .sl-hero block. */
:root{--sl-acc:#0e7490;--sl-acc2:#f59e0b;--global-palette1:#0e7490;--global-palette2:#155e75;--p2hdr:80px}
@media(max-width:1024px){:root{--p2hdr:58px}}
body.p2-hero .content-area{margin-top:0!important;margin-bottom:0!important}
body.p2-hero .entry-content-wrap{padding-top:0!important}
body.p2-hero .sl-hero{display:flex;flex-direction:column;justify-content:center;min-height:calc(100vh - var(--p2hdr));min-height:calc(100svh - var(--p2hdr));box-sizing:border-box;padding:12px 16px 20px!important;background:radial-gradient(900px 420px at 50% 0,rgba(14,116,144,.10),transparent 70%),linear-gradient(180deg,#f7fcfd,#fff 60%)!important}
body.admin-bar.p2-hero .sl-hero{min-height:calc(100svh - var(--p2hdr) - 32px)}
body.p2-hero .sl-hero>.wp-block-group__inner-container{width:100%;max-width:880px!important}
body.p2-hero .sl-hero h1.sl-h1{font-size:clamp(26px,3.4vw,40px)!important;font-weight:800;letter-spacing:-.025em;color:#0b1220;margin:0 auto 6px!important}
body.p2-hero .sl-hero .sl-intro,body.p2-hero .sl-hero .sl-howto{font-size:16px!important;color:#526072!important;max-width:620px;margin:0 auto 14px!important;white-space:normal}
body.p2-hero .sl-hero .rank-math-breadcrumb{margin-bottom:6px!important}
body.p2-hero .p2-belowhero{padding-top:28px!important}
.p2-belowhero p{max-width:820px;margin-left:auto;margin-right:auto;text-align:center;color:#526072}
@media(max-width:781px){body.p2-hero .sl-hero{justify-content:flex-start;padding:10px 0 14px!important}body.p2-hero .sl-hero h1.sl-h1{font-size:24px!important;margin-bottom:4px!important}body.p2-hero .sl-hero .sl-intro,body.p2-hero .sl-hero .sl-howto{font-size:14.5px!important;line-height:1.4!important;margin-bottom:10px!important}}
@media(max-width:781px) and (min-height:760px){body.p2-hero .sl-hero{justify-content:center}}
/* header to match the tool */
.site-header .site-main-header-wrap,#masthead .site-header-row-container-inner{background:#fff!important}
#masthead{border-bottom:1px solid #e6eef1;box-shadow:0 1px 0 rgba(11,18,32,.02)}
#masthead .site-branding .site-title,#masthead .site-branding a{color:#0b1220!important;font-weight:800;letter-spacing:-.02em}
#masthead .header-navigation .menu>li>a,#masthead .mobile-toggle-open-container .menu-toggle-open{color:#0b1220!important;font-weight:600}
#masthead .header-navigation .menu>li>a:hover,#masthead .header-navigation .menu>li.current-menu-item>a{color:#0e7490!important}
/* v1.2 – clean mobile hero: H1 + one line + card only */
body.p2-hero .sl-hero h1.sl-h1,body.p2-hero .sl-hero h1{overflow-wrap:anywhere}
@media(max-width:781px){body.p2-hero .sl-hero .rank-math-breadcrumb,body.p2-hero .sl-hero nav.breadcrumb,body.p2-hero .sl-hero .sl-below{display:none!important}
 body.p2-hero .sl-hero .sl-intro,body.p2-hero .sl-hero .sl-howto{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-width:340px}
 body.p2-hero .sl-hero{justify-content:center!important;padding:8px 0 12px!important}}
/* v1.2.1 – top-aligned hero: H1 + intro just under the header, card fills the rest of the first screen */
body.p2-hero .sl-hero{justify-content:flex-start!important;padding:28px 16px 16px!important}
body.p2-hero .sl-hero>.wp-block-group__inner-container{flex:1 1 auto;display:flex;flex-direction:column}
body.p2-hero .sl-hero .p2w{flex:1 1 auto;display:flex;flex-direction:column;width:100%}
body.p2-hero .sl-hero .p2-card{flex:1 1 auto;display:flex;flex-direction:column;max-height:860px}
body.p2-hero .sl-hero .p2-card>.p2-drop{flex:1 1 auto}
body.p2-hero .sl-hero h1.sl-h1{text-wrap:balance;overflow-wrap:normal;line-height:1.15}
@media(max-width:781px){body.p2-hero .sl-hero{padding:18px 0 12px!important}body.p2-hero .sl-hero h1.sl-h1{font-size:clamp(23px,6.6vw,28px)!important}}
@media(max-width:560px){body.p2-hero .sl-hero .p2-drop{max-height:420px}}
#masthead .site-branding .site-title{white-space:nowrap}
#masthead .site-branding .site-title{display:inline-flex;align-items:center;gap:8px}
#masthead .site-branding .site-title::before{content:"";flex:0 0 28px;width:28px;height:28px;background:url(logo-icon.svg) center/contain no-repeat}
body.p2-hero .sl-hero .sl-toolwrap,body.p2-hero .sl-hero .sl-toolwrap>.wp-block-group__inner-container,body.p2-hero .sl-hero .p2{flex:1 1 auto;display:flex;flex-direction:column;width:100%}
body.p2-hero .sl-hero .sl-toolwrap{margin-top:0!important}
/* v1.2.2 – compact card: no stretch; hero bg still fills first screen, leftover space sits below the card */
body.p2-hero .sl-hero>.wp-block-group__inner-container,body.p2-hero .sl-hero .p2w,body.p2-hero .sl-hero .sl-toolwrap,body.p2-hero .sl-hero .sl-toolwrap>.wp-block-group__inner-container,body.p2-hero .sl-hero .p2{flex:0 0 auto!important}
body.p2-hero .sl-hero .p2-card{flex:0 0 auto!important;max-height:none;padding:16px!important}
body.p2-hero .sl-hero .p2-card>.p2-drop{flex:0 0 auto!important;height:280px;min-height:0!important;max-height:none!important;justify-content:center;gap:10px;padding:16px!important}
body.p2-hero .sl-hero .p2-card.has-items>.p2-drop{height:auto;min-height:120px!important}
body.p2-hero .p2-demo-on .p2-demo{transform:scale(1.22);transform-origin:center;margin:10px auto 14px;justify-content:center}
@media(max-width:1024px) and (min-width:561px){body.p2-hero .sl-hero .p2-card>.p2-drop{height:270px}}
@media(max-width:560px){body.p2-hero .sl-hero .p2-card{padding:12px!important}body.p2-hero .sl-hero .p2-card>.p2-drop{height:224px;padding:12px 10px!important;gap:8px}body.p2-hero .p2-demo-on .p2-demo{transform:scale(1.12);margin:6px auto 10px}}
@media(max-width:560px) and (max-height:760px){body.p2-hero .sl-hero .p2-card>.p2-drop{height:208px}}
body.p2-hero .sl-hero::before{content:"";display:block;flex:1 1 0;max-height:20px}
body.p2-hero .sl-hero::after{content:"";display:block;flex:3 1 0}
@media(max-width:560px){body.p2-hero .p2-demo-on .p2-demo{transform:none;max-width:100%;margin:4px auto 8px}}
body.p2-hero .p2-demo .d-link{flex:0 1 auto;min-width:0}body.p2-hero .p2-demo .d-url{min-width:0;overflow:hidden;text-overflow:ellipsis}body.p2-hero .p2-demo .d-zone{flex-shrink:0}
@media(max-width:560px){body.p2-hero .p2-demo-on .p2-demo{width:auto;max-width:calc(100% - 4px);justify-content:center}body.p2-hero .p2-demo .d-url{max-width:150px}}
@media(max-width:380px){body.p2-hero .p2-demo .d-url{max-width:128px}}
/* v1.2.3 – centred hero block: H1 + intro + card sit in the vertical middle; equal space above/below (capped on tall screens) */
body.p2-hero .sl-hero{justify-content:center!important;padding:16px 16px!important}
body.p2-hero .sl-hero::before,body.p2-hero .sl-hero::after{content:"";display:block;flex:1 1 0!important;max-height:140px}
body.p2-hero .sl-hero .sl-intro,body.p2-hero .sl-hero .sl-howto{margin-bottom:32px!important}
@media(max-width:781px){body.p2-hero .sl-hero{padding:12px 0!important}body.p2-hero .sl-hero .sl-intro,body.p2-hero .sl-hero .sl-howto{margin-bottom:24px!important}}

/* v1.2.4 – a little more air between intro and card (phone/iPad 36px, desktop 46px); block stays centred */
body.p2-hero .sl-hero .sl-intro,body.p2-hero .sl-hero .sl-howto{margin-bottom:46px!important}
@media(max-width:781px){body.p2-hero .sl-hero .sl-intro,body.p2-hero .sl-hero .sl-howto{margin-bottom:36px!important}}
@media(max-width:400px){body.p2-hero .p2-hint{font-size:12px;white-space:nowrap}}

/* v1.3.0 – H1 pinned just under the header, card centred in the space below, how-to blurb under the card; hero ends past the fold so nothing from the next section peeks in */
body.p2-hero .sl-hero{justify-content:flex-start!important;padding:24px 16px 0!important;min-height:calc(100vh - var(--p2hdr) + 4px);min-height:calc(100svh - var(--p2hdr) + 4px)}
body.admin-bar.p2-hero .sl-hero{min-height:calc(100svh - var(--p2hdr) - 32px + 4px)}
body.p2-hero .sl-hero::before,body.p2-hero .sl-hero::after{display:none!important}
body.p2-hero .sl-hero>.wp-block-group__inner-container{flex:1 1 auto!important;display:flex;flex-direction:column}
body.p2-hero .sl-hero>.wp-block-group__inner-container::before,body.p2-hero .sl-hero>.wp-block-group__inner-container::after{content:"";display:block;flex:1 1 0;min-height:18px}
body.p2-hero .sl-hero>.wp-block-group__inner-container::before{order:1;max-height:120px}
body.p2-hero .sl-hero>.wp-block-group__inner-container::after{order:5;min-height:28px}
body.p2-hero .sl-hero h1.sl-h1{margin:0 auto!important;order:0}
body.p2-hero .sl-hero .sl-toolwrap{order:2}
body.p2-hero .sl-hero .p2-blurb{order:3;max-width:560px;margin:14px auto 0!important;padding:0 8px;font-size:14px!important;line-height:1.5!important;color:#526072!important;text-align:center;text-wrap:balance}
body.p2-hero .sl-hero .sl-intro{margin-bottom:22px!important}
@media(max-width:781px){body.p2-hero .sl-hero{padding:16px 0 0!important}body.p2-hero .sl-hero .p2-blurb{font-size:13px!important;line-height:1.45!important;margin-top:10px!important;max-width:340px}
 body.p2-hero .sl-hero>.wp-block-group__inner-container::before{min-height:14px}body.p2-hero .sl-hero>.wp-block-group__inner-container::after{min-height:24px}body.p2-hero .sl-hero .sl-intro{margin-bottom:14px!important}}
body.p2-hero .sl-hero .p2-blurb{max-width:660px!important}
body.p2-hero .sl-hero>.wp-block-group__inner-container::before{max-height:150px}
body.p2-hero .sl-hero .sl-toolwrap,body.p2-hero .sl-hero .p2w{margin-bottom:0!important}
@media(max-width:781px){body.p2-hero .sl-hero .p2-blurb{max-width:350px!important}}
@media(max-width:400px){body.p2-hero .p2-demo-on .p2-demo.q,body.p2-hero .p2-demo-static .p2-demo.q{width:calc(100% + 12px)!important;max-width:none!important;margin:0 -6px!important}}
@media(max-width:560px) and (min-width:401px){body.p2-hero .p2-demo-on .p2-demo.q,body.p2-hero .p2-demo-static .p2-demo.q{width:100%!important;max-width:none!important;margin:0!important}}
/* v1.6.0 – breadcrumb sits on top of the hero without pushing it down, so every page's hero matches the home layout */
@media(min-width:782px){body.p2-hero:not(.home) .sl-hero{position:relative}body.p2-hero:not(.home) .sl-hero .rank-math-breadcrumb{position:absolute!important;top:6px;left:0;right:0;margin:0!important;z-index:3}}