/* WordPress glue for the prototype CSS. Keep this small; design lives in assets/proto/*.css. */
/* Template-part wrappers must not break the sticky header or the footer selectors. */
.wp-site-blocks>.jht-part-header,.wp-site-blocks>.jht-part-footer{display:contents}
.wp-site-blocks{padding:0}
.wp-site-blocks>*{margin-block-start:0}
.jht-main{margin:0}
/* Admin bar offset for the sticky header. */
.admin-bar header{top:32px}
@media (max-width:782px){.admin-bar header{top:46px}}
/* Server-rendered pager (real /page/N/ links) styled like the prototype's buttons. */
.pager{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:40px 0 80px}
.pager .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;padding:0 12px;border:1px solid #2a4a5a;border-radius:8px;font-weight:650;color:#d5dfe5}
.pager .page-numbers.current{background:#f4f7fa;color:#07121a;border-color:#fff}
.pager a.page-numbers:hover{border-color:var(--accent,#65ceff);color:#fff}
/* Author fallback (before author.js upgrades it). */
.jht-author-avatar{width:120px;height:120px;border-radius:50%;object-fit:cover;margin:8px 0 16px}
/* Core block content inside .prose (posts are plain Gutenberg blocks). */
.prose .wp-block-embed iframe,.prose iframe{width:100%;aspect-ratio:16/9;height:auto;border:0;border-radius:12px}
.prose .wp-block-buttons{display:flex;flex-wrap:wrap;gap:12px;margin:24px 0}
.prose .wp-block-button__link{display:inline-flex;align-items:center;gap:12px;padding:14px 23px;border-radius:8px;border:1px solid #fff;background:#f4f7fa;color:#07121a;font-size:14px;font-weight:650;text-decoration:none;transition:transform .25s,box-shadow .25s}
.prose .wp-block-button__link:hover{transform:translateY(-3px);box-shadow:0 5px 24px #33b5ff24;color:#07121a}
.prose .is-style-outline .wp-block-button__link{background:#03131ca6;color:#f5f8fa;border-color:#426172}
.jht-page-body{padding:20px 0 90px}
.jht-page-body .prose{max-width:860px;margin:0 auto}
/* Reduced motion: no smooth scrolling or decorative transitions. */
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
/* v0.2.0 archive toolbar: server-side filter links styled like the prototype's chip buttons. */
.fchips a,.seg a{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;padding:7px 13px;border:1px solid color-mix(in srgb,var(--c,var(--accent)) 35%,var(--line));border-radius:99px;background:#03111a;color:#c7d6df;transition:.18s;white-space:nowrap}
.fchips a i{width:7px;height:7px;border-radius:50%;background:var(--c,var(--accent))}
.fchips a small{opacity:.65;font-size:11px}
.fchips a[aria-current=true]{background:var(--c,var(--accent));border-color:var(--c,var(--accent));color:#03121a}
.fchips a[aria-current=true] i{background:#03121a}
.seg a{border:0;padding:6px 12px}
.seg a[aria-current=true]{background:var(--accent);color:#03121a}
.jht-sort{margin:0}
@media (max-width:760px){.fchips a{flex:none}}
/* v0.2.0 homepage blocks */
.nl-archive-row{margin:0}
.nl-embed-live iframe{display:block}
/* v0.3.41 beehiiv v3 script embed (the loader adds its own iframe after the script tag) */
.bh-embed{display:block;width:100%;max-width:100%;min-width:0}
.bh-embed iframe{display:block;width:100%;max-width:100%;border:0}
/* The page sets :root{color-scheme:dark}; an iframe whose document is not dark then gets an opaque canvas, hiding beehiiv's transparent background. Force light so it stays transparent. */
.bh-embed iframe{color-scheme:light}
.capture .bh-embed+small{margin-top:12px}

/* v0.3.0 — metric-matched fallback while Inter loads (font-display:swap), so text doesn't reflow when it swaps in.
   Once Inter has loaded nothing changes: Inter is still first and the fallback face covers the same characters. */
@font-face{font-family:"Inter Fallback";src:local("Arial"),local("ArialMT"),local("Helvetica"),local("Liberation Sans");size-adjust:107.12%;ascent-override:90.44%;descent-override:22.52%;line-gap-override:0%;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
body{font-family:Inter,"Inter Fallback",Arial,sans-serif}

/* 0.3.4 Learn hubs (/types/<slug>/): category hero + the homepage training-card art (inc/hub.php). */
.hub-hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,460px);gap:56px;align-items:center}
.hub-hero .hub-copy{min-width:0}
.hub-art{order:2;margin:0;aspect-ratio:16/9;border-radius:18px;overflow:hidden;border:1px solid color-mix(in srgb,var(--accent) 50%,transparent);box-shadow:0 0 0 1px #ffffff0d inset,0 24px 60px -20px color-mix(in srgb,var(--accent) 45%,transparent);background:#06121a}
.hub-art picture,.hub-art img{display:block;width:100%;height:100%;object-fit:cover}
.hub-intro{margin-bottom:6px}
.hub-intro p{margin:0 0 .75em}
.hub-intro p:last-child{margin-bottom:0}
.hub-intro p[style*="center"]{text-align:left!important}
@media(max-width:950px){.hub-hero .wrap{grid-template-columns:1fr;gap:28px}.hub-art{order:0;max-width:560px}}

/* 0.3.4: the lifeline (#lifeline, z-index 1) passes BEHIND "Find Your Next Challenge" (heading + cards), like the value strip. */
.training{position:relative;z-index:2}

/* 0.3.20: About Us founders row — a little space between John's and Don's photos (columns that hold a media-text with the photo on the right). */
.jht-page .wp-block-columns:has(.wp-block-media-text.has-media-on-the-right){column-gap:40px}
@media(max-width:781px){.jht-page .wp-block-columns:has(.wp-block-media-text.has-media-on-the-right){row-gap:28px}}

/* 0.3.21: Platform Updates — WordPress swaps emoji in issue titles for <img class="emoji">; keep them title-sized (landing.css sizes every .upd-feature img as the cover photo). */
.upd-feature .b img.emoji,.upd .b img.emoji{width:1em;height:1em;min-height:0;max-width:none;display:inline;vertical-align:-.1em;margin:0 .07em;object-fit:contain}

/* 0.3.22: Platform Updates — the featured issue photo can be very tall (1280x975); cap it on desktop so the card stays about 420px high. Phones/tablets (stacked) are untouched. */
@media(min-width:901px){.upd-feature>img{height:420px;min-height:0}}

/* 0.3.23: value-pillar icons from the original justhacking.com (filled glyphs, unlike the old outline icons): keep them inside the circle. */
.value-icon svg.vi-orig{width:auto;height:auto;max-width:26px;max-height:26px;fill:currentColor;stroke:none;overflow:visible}
@media(max-width:650px){.value-icon svg.vi-orig{max-width:19px;max-height:19px}}
/* 0.3.23: "Latest Releases" row has no eyebrow label now; the two perk pills start at the left edge. */
.latest .eyebrow>.lr-perks:first-child{margin-left:0}

/* 0.3.23: logo row — optional text label to the right of a logo (FBI, DoT, DHS) and full-colour "seal" logos.
 * Flat grey silhouettes (the default look) turn an opaque full-colour seal into a blank disc, so seals get a detail-keeping grey instead; both show full colour on hover. */
.marquee-group li.has-label{gap:14px}
.marquee-group .logo-label{font-size:13px;font-weight:700;line-height:1.15;letter-spacing:.09em;text-transform:uppercase;color:#d1d1d1;opacity:.7;max-width:170px;text-wrap:balance;transition:opacity .3s,color .3s}
.marquee-group li.has-label:hover .logo-label{opacity:1;color:#fff}
.marquee-group img.is-seal{filter:grayscale(1) brightness(1.8) contrast(.8);opacity:.75}
.marquee-group img.is-seal:hover,.marquee-group li.has-label:hover img.is-seal{filter:none;opacity:1;transform:scale(1.06)}
@media(max-width:650px){.marquee-group li.has-label{gap:10px}.marquee-group .logo-label{font-size:11px;max-width:130px}}
/* 0.3.23: marquee speed rescaled for the wider row (labels added): same px/second as before (desktop 33.2 px/s: 2989px row; phones 30.6 px/s: 2179px row). */
.marquee{--speed:90s}
@media(max-width:650px){.marquee{--speed:71.3s}}
/* 0.3.36: with a different number of logos than the 13 the speeds above were tuned for, inline --k (count/13) keeps the pace; absent = exactly as before. */
.marquee[style*="--k"]{--speed:calc(90s*var(--k))}
@media(max-width:650px){.marquee[style*="--k"]{--speed:calc(71.3s*var(--k))}}
.marquee-group .logo-link{display:contents;color:inherit}

/* v0.3.25: a testimonial without a photo shows the person's initials in the same 58px ring. */
.t-photo.ini{display:grid;place-items:center;background:rgba(0,245,255,.12);color:#bdeff4;font-size:18px;font-weight:600;letter-spacing:.5px}

/* v0.3.28: more than 6 testimonials. jht_render_testimonials() sets --n on .t-dots only when there are more than 6, so the
   6-or-fewer look (28px bars, 8px gap) is untouched. The bars then share the room between the arrows (never wider than 28px,
   floor 3px), the gap shrinks from 8px to 2px, the whole row is capped at 320px so 30 bars don't dwarf the card, and each bar
   gets a taller hit area that fills the gap on both sides (no overlap, works on desktop and phone). */
.t-dots[style*="--n"]{--g:clamp(2px,calc(60px / var(--n)),8px);gap:var(--g);flex:1 1 0;min-width:0;justify-content:center;max-width:min(320px,calc(var(--n) * 28px + (var(--n) - 1) * var(--g)))}
.t-controls:has(.t-dots[style*="--n"]) .round{flex:none}
.t-dots[style*="--n"] .dot{flex:1 1 0;width:auto;min-width:3px;max-width:28px;overflow:visible}
.t-dots[style*="--n"] .dot i{border-radius:3px;overflow:hidden}
.t-dots[style*="--n"] .dot:before{content:"";position:absolute;inset:-16px calc(var(--g) / -2)}

/* Services cards: small gap between the tagline paragraph and the bullet list (0.3.40) */
.svc-card h3 + p:not(:last-child){margin-bottom:10px}

/* Services hero: "Offers services" people on an arch above the Practitioner-led card (0.3.46). Printed only when somebody is ticked. */
.svc-hero-side{min-width:0}
.svc-team{position:relative;margin:0 0 6px}
.svc-team-arc{position:relative;aspect-ratio:500/150}
.svc-team-arc svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.svc-team-line{fill:none;stroke:color-mix(in srgb,var(--svc-primary,#00f5ff) 38%,transparent);stroke-width:1.5;stroke-dasharray:2 7;stroke-linecap:round}
.svc-team-flow{fill:none;stroke:var(--svc-primary,#00f5ff);stroke-width:2;stroke-linecap:round;stroke-dasharray:26 600;stroke-dashoffset:0;filter:drop-shadow(0 0 5px var(--svc-primary,#00f5ff));animation:svcTeamFlow 6s linear infinite}
@keyframes svcTeamFlow{from{stroke-dashoffset:0}to{stroke-dashoffset:-626}}
.svc-team-p{position:absolute;width:clamp(40px,calc(72% / var(--n)),78px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;display:block;text-decoration:none;transition:transform .25s,box-shadow .25s}
.svc-team-p img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover;border:2px solid color-mix(in srgb,var(--svc-primary,#00f5ff) 65%,#0b2230);background:#06192a;box-shadow:0 0 0 4px #030e15cc,0 0 22px color-mix(in srgb,var(--svc-primary,#00f5ff) 28%,transparent)}
.svc-team-p:hover,.svc-team-p:focus-visible{transform:translate(-50%,-50%) scale(1.14);z-index:2;outline:0}
.svc-team-p:hover img,.svc-team-p:focus-visible img{border-color:var(--svc-primary,#00f5ff);box-shadow:0 0 0 4px #030e15cc,0 0 30px color-mix(in srgb,var(--svc-primary,#00f5ff) 60%,transparent)}
.svc-team-name{position:absolute;left:50%;top:calc(100% + 8px);transform:translateX(-50%);white-space:nowrap;font-size:12px;font-weight:600;letter-spacing:.02em;padding:4px 10px;border-radius:999px;background:#061922ee;border:1px solid var(--svc-border,#1f3a48);color:var(--svc-text,#f5f8fa);opacity:0;pointer-events:none;transition:opacity .2s}
.svc-team-p:hover .svc-team-name,.svc-team-p:focus-visible .svc-team-name{opacity:1}
.svc-team-cap{position:absolute;left:50%;bottom:2px;transform:translateX(-50%);margin:0;white-space:nowrap;font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--svc-muted,#afbfca);transition:opacity .2s}
.svc-team:has(.svc-team-p:hover) .svc-team-cap,.svc-team:has(.svc-team-p:focus-visible) .svc-team-cap{opacity:0}
.svc-team + .svc-hero-card{margin-top:34px}
@media(max-width:900px){.svc-team-name{display:none}.svc-team-arc{aspect-ratio:500/165}.svc-team-cap{position:static;transform:none;text-align:center;white-space:normal;font-size:9.5px;letter-spacing:.14em;margin-top:12px}.svc-team + .svc-hero-card{margin-top:22px}}
@media(prefers-reduced-motion:reduce){.svc-team-flow{animation:none;stroke-dasharray:none;stroke:color-mix(in srgb,var(--svc-primary,#00f5ff) 55%,transparent);filter:none}}

/* 0.3.47 Author board: "Hire This Expert" readout (green check when the user offers services; 0.3.67: neutral cyan magnifier when not, was a red X; 0.3.68: that card reads "Hire a JHT All-Star / For Your Next Service Engagement" and links to Services). Spans two of the six columns. */
.readouts .ro-hire{grid-column:span 2;display:flex;align-items:center;justify-content:center;gap:16px;text-align:left}
.ro-hire .hire-ic{flex:none;width:30px;height:30px;stroke-width:3.2}
.ro-hire.is-yes{--hc:var(--wp--preset--color--green,#19df98);border-color:#19df9877;background:linear-gradient(#19df9818,#19df9808),#04141ddd}
.ro-hire.is-no{--hc:#65ceff;border-color:#65ceff44;background:linear-gradient(#65ceff12,#65ceff06),#04141ddd}
.ro-hire .hire-ic{color:var(--hc);filter:drop-shadow(0 0 8px var(--hc))}
.ro-hire .hire-t{display:flex;flex-direction:column;min-width:0}
.ro-hire .hire-k{display:block;font:700 15px/1.1 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.1em;text-transform:uppercase;color:#fff}
.ro-hire small{display:block;margin-top:6px;font-size:12px;line-height:1.3;letter-spacing:.02em;color:#9bb3c0}
a.ro-hire{transition:border-color .25s,box-shadow .25s}
a.ro-hire:hover,a.ro-hire:focus-visible{border-color:var(--hc);box-shadow:0 0 22px #19df9833}
/* 0.3.68: the neutral card (author does not offer services) now links to Services too and glows in the CPU-pin gold (#c8a75a, the author-page socket pins) on hover. */
a.ro-hire.is-no{cursor:pointer}
a.ro-hire.is-no:hover,a.ro-hire.is-no:focus-visible{border-color:#c8a75a;box-shadow:0 0 22px #c8a75a55,0 0 8px #c8a75a33}
@media(max-width:1250px){.readouts .ro-hire{grid-column:span 2}}
@media(max-width:480px){.readouts .ro-hire{gap:12px;padding:12px 14px}.ro-hire .hire-ic{width:26px;height:26px}.ro-hire .hire-k{font-size:13px;letter-spacing:.08em}.ro-hire small{font-size:11.5px}}

/* v0.3.48 Services hero card: bullets on the left, shield on the right (saves vertical space). CSS only; the saved page and pattern markup are unchanged. */
.svc-hero-card{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:18px}
.svc-hero-card .svc-shield{grid-column:2;grid-row:1;width:76px;height:76px}
.svc-hero-card ul{grid-column:1;grid-row:1;margin:0}
@media(max-width:900px){.svc-hero-card{column-gap:14px}.svc-hero-card .svc-shield{width:60px;height:60px}}
/* v0.3.49 Services hero card: bigger shield, taller card (padding-block only; layout from 0.3.48 unchanged). */
.svc-hero-card{padding-block:42px}
.svc-hero-card .svc-shield{width:136px;height:136px}
.svc-hero-card{column-gap:28px}
@media(min-width:901px) and (max-width:1250px){.svc-hero-card{column-gap:18px}.svc-hero-card .svc-shield{width:100px;height:100px}}
@media(max-width:900px){.svc-hero-card{padding-block:32px;column-gap:16px}.svc-hero-card .svc-shield{width:86px;height:86px}}
/* v0.3.49 Footer brand: bigger logo with the tagline to its right (all widths). */
#site-footer .footer-brand{display:flex;align-items:center;gap:22px}
#site-footer .footer-brand .logo{width:136px;height:136px;max-width:none;flex:none}
#site-footer .footer-brand p{margin:0;font-size:14px;line-height:1.4;min-width:0}
@media(max-width:950px){#site-footer .footer-brand .logo{width:112px;height:112px}}
@media(max-width:650px){#site-footer .footer-brand{gap:16px}#site-footer .footer-brand .logo{width:96px;height:96px}#site-footer .footer-brand p{font-size:13px}}
/* 0.3.51: Services arc caption sat on top of the avatars between 901 and 1250px; put it under the arc there */
@media(min-width:901px) and (max-width:1250px){.svc-team-cap{position:static;transform:none;text-align:center;margin-top:12px}}
/* 0.3.52: footer lockup - thin cyan divider between logo and tagline, brighter/bolder first line, dimmer second line; stacked under the logo at <=650px */
#site-footer .footer-brand p{align-self:center;padding-left:22px;border-left:1px solid rgba(0,245,255,.35);line-height:1.5}
#site-footer .footer-brand p strong{display:block;white-space:nowrap;color:#fff;font-weight:700;letter-spacing:.01em}
#site-footer .footer-brand p span{color:var(--muted,#afbfca);opacity:.8}
@media(max-width:650px){#site-footer .footer-brand{flex-direction:column;align-items:flex-start;gap:14px}#site-footer .footer-brand p{align-self:flex-start;border-left:0;padding-left:0}}
/* 0.3.54: strong is a block, so its <br> added an empty line between the two tagline lines */
#site-footer .footer-brand p br{display:none}

/* 0.3.55: footer lockup v3 - tagline stacked under the logo at all widths (no divider); logo sized so its top lines up with the column titles and the tagline's last line lines up with the bottom of "Blog" (desktop, columns beside it) */
#site-footer .footer-brand{flex-direction:column;align-items:flex-start;gap:12px}
#site-footer .footer-brand p{align-self:flex-start;border-left:0;padding-left:0}
/* desktop (columns beside the brand, >900px). Logo sizes are measured: logo height = (top of column titles to bottom of "Blog") - 12px gap - 42px tagline. 195.5px tall column stack at >=1000px -> 141.5px logo. Below that the Vitals links wrap, so the stack gets taller; the logo grows to match (159.5px at 951-979px; 901-950px the column is only ~250px wide so it is capped at 240px). */
@media(min-width:901px){#site-footer .footer-brand .logo{width:240px;height:240px}}
@media(min-width:951px) and (max-width:979px){#site-footer .footer-brand .logo{width:159.5px;height:159.5px}}
@media(min-width:980px){#site-footer .footer-brand .logo{width:141.5px;height:141.5px}}
/* 0.3.56: hero deck link lists (Top Picks / Recent Releases / free community projects), see assets/wp/hero-extras.js */
.hc-extra{display:flex;flex-direction:column;gap:5px;margin:4px 0 6px;min-width:0}
.hc-xh{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.62);display:flex;align-items:center;gap:8px}
.hc-xh::before{content:"";width:14px;height:1px;background:var(--accent);flex:none}
.hc-xl{display:flex;flex-wrap:wrap;gap:3px 14px;font-size:13px;line-height:1.35}
.hc-xi{white-space:nowrap}
.hc-xa{color:#e8f1f7;font-weight:600;text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--accent) 55%,transparent);transition:color .2s,border-color .2s}
.hc-xa:hover,.hc-xa:focus-visible{color:var(--accent);border-bottom-color:var(--accent)}
.hc-extra-notes .hc-xl{flex-direction:column;gap:3px}
.hc-extra-notes .hc-xi{white-space:normal}
.hc-xn{color:#c1cdd6}
/* mobile/tablet only (<=900px): the deck is a little taller so the lists fit without squeezing the card art; desktop unchanged */
@media(max-width:900px){.hero-experience .deck{height:480px}}

/* 0.3.58: footer lockup v4 - logo centred over the tagline, both locked together as one centred block, centred in the space between the left edge of the thin line above the legal row and the Learn column's text. The brand cell is stretched across the grid gap (margin-right = gap) so its centre is the midpoint between the content left edge and the Learn column's left edge. Vertical sizing from 0.3.55 is unchanged. */
#site-footer .footer-brand{align-items:center;margin-right:-35px}
#site-footer .footer-brand p{align-self:center;text-align:center;width:max-content;max-width:100%}
@media(max-width:950px){#site-footer .footer-brand{margin-right:-20px}}
@media(max-width:650px){#site-footer .footer-brand{margin-right:0}}

/* 0.3.59: Livestreams "Past Streams" grid (saved post content: a 2-column grid group of YouTube embeds) - gap between the videos, captions white and left-justified under each embed. Scoped to grid groups whose children are embeds, so no other page changes. */
.prose .is-layout-grid:has(>.wp-block-embed){column-gap:32px;row-gap:44px}
.prose .is-layout-grid:has(>.wp-block-embed)>.wp-block-embed figcaption{color:#fff;text-align:left}
@media(max-width:900px){.prose .is-layout-grid:has(>.wp-block-embed){column-gap:24px;row-gap:36px}}
@media(max-width:650px){.prose .is-layout-grid:has(>.wp-block-embed){column-gap:16px;row-gap:32px}}

/* 0.3.60: phones/tablets (touch only; Lenis is switched off there, see inc/assets.php) use native scrolling, so the page-wide
   CSS "scroll-behavior:smooth" (proto style.css) fought GSAP ScrollTrigger measurements and could leave heading words hidden.
   Same query as the Lenis switch-off. Desktop (mouse) is not matched. */
@media (hover:none) and (pointer:coarse){html.motion{scroll-behavior:auto!important}}

/* 0.3.60: YouTube click-to-load facade (inc/embeds.php + assets/wp/yt-facade.js). Fills the embed wrapper exactly like the iframe it replaces. */
.jht-yt{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;border-radius:12px;overflow:hidden;background:#000;cursor:pointer;display:block;color:#03121a}
.jht-yt img{width:100%;height:100%;object-fit:cover;display:block;opacity:.88;transition:opacity .3s,transform .5s}
.jht-yt:hover img,.jht-yt:focus-visible img{opacity:1;transform:scale(1.03)}
.jht-yt-play{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;display:grid;place-items:center;background:#65ceff;box-shadow:0 0 0 8px #65ceff33,0 0 32px #65ceff88;transition:transform .2s}
.jht-yt:hover .jht-yt-play{transform:scale(1.08)}
.jht-yt-play svg{margin-left:3px}
.jht-yt:focus-visible{outline:2px solid #65ceff;outline-offset:3px}
@media(max-width:650px){.jht-yt-play{width:48px;height:48px;margin:-24px 0 0 -24px;box-shadow:0 0 0 6px #65ceff33,0 0 24px #65ceff88}.jht-yt-play svg{width:22px;height:22px}}
.jht-yt-ns{position:absolute;left:12px;bottom:12px;color:#fff;background:#000a;padding:4px 8px;border-radius:6px}

/* 0.3.62: product cards (.pc) with BOTH a price pill (<em>) and the NYP badge (<b class="nyp">) had both absolutely positioned at the
   top-right, so NYP sat on top of "FROM $0" / "FREE". Only for image areas that hold both: lay the two out as a right-aligned flex row
   (price pill rightmost, NYP to its left, 6px gap). The image becomes an
   absolute fill so it is unaffected. Cards with only one badge, and every other badge type, are untouched. */
.pc-img:has(>em):has(>b.nyp){display:flex;flex-direction:row-reverse;flex-wrap:nowrap;align-items:flex-start;justify-content:flex-start;gap:6px;padding:10px;box-sizing:border-box}
.pc-img:has(>em):has(>b.nyp)>img,.pc-img:has(>em):has(>b.nyp)>picture{position:absolute;inset:0;width:100%;height:100%}
.pc-img:has(>em):has(>b.nyp)>em,.pc-img:has(>em):has(>b.nyp)>b.nyp{position:static;flex:none;z-index:1}

/* 0.3.66: homepage newsletter card, two-column layout only (>=901px; the stacked layout at <=900px and phones are untouched). With John's short beehiiv
   form the white card was about half the height of the left column and floated in empty dark space. The card now stretches to the full height of
   the row, its content (avatar header + form + "Powered by") is centred vertically in it, and the header is a little larger and roomier. */
@media (min-width:901px){
	.nl-inner{align-items:stretch}
	.nl-inner>.nl-embed{display:flex;flex-direction:column;justify-content:center;padding:34px 36px}
	.nl-inner>.nl-embed .nl-card-head{margin-bottom:22px;gap:16px}
	.nl-inner>.nl-embed .nl-avatar{width:64px;height:64px}
	.nl-inner>.nl-embed .nl-card-head strong{font-size:22px}
	.nl-inner>.nl-embed .nl-card-head span{font-size:14px}
}

/* 0.3.67: JotForm embeds (inc/jotform.php, assets/wp/jotform.js). The page declares a dark colour scheme; an iframe whose document is not dark then gets an
   opaque canvas, so force light (the form itself is transparent, styled inside JotForm). */
.jht-jotform{display:block;width:100%;max-width:100%;min-width:0}
.jht-jotform iframe{display:block;width:100%;max-width:100%;border:0;color-scheme:light}
/* JotForm's reCAPTCHA is 304px wide: on phones let the iframe use the card's inner padding so it is not clipped at the right. */
@media (max-width:480px){.svc-contact-inner .jht-jotform{margin-inline:-24px;width:calc(100% + 48px);max-width:none}.capture .jht-jotform{margin-inline:-14px;width:calc(100% + 28px);max-width:none}}

/* 0.3.70: footer "Follow Us" icons, desktop only (>=951px; mobile.css owns <=950px, untouched). They were a wrapping flex row, so the count per
   row followed the column width and icon size: front page (42px squares, home.css) 4+4 at 1536px+, but 3+3+2 below; other templates (32px circles,
   motion.css) 5+3 at 1536px+. Now a fixed 4-column grid (2 rows of 4) on every template. Icon size and the 10px gap are unchanged wherever 4 fit;
   on narrower desktop widths (front page below ~1460px, other pages below ~1190px) the icons shrink just enough to keep 4 per row. */
@media (min-width:951px){
	#site-footer #social-links{container-type:inline-size}
	#site-footer #social-links .social{display:grid;grid-template-columns:repeat(4,max-content);justify-content:start;gap:10px}
	#site-footer #social-links .social a{max-width:calc((100cqw - 30px) / 4);max-height:calc((100cqw - 30px) / 4)}
	/* the glyph scales with a shrunken icon (50% of the inner box; at full size this is >= the current 20px / 14px glyphs, so no change there) */
	#site-footer #social-links .social svg{max-width:50%;max-height:50%}
}