/* ParenThing site.css: the shared premium layer for content pages (3 Nov 2026).
   HOW A PAGE OPTS IN (full recipe in DESIGN.md at the repo root):
     1. <link rel="stylesheet" href="/site.css"/> AFTER the page's own <style> block and
        BEFORE footer.css.
     2. <body class="pt-site">.
   Every rule is scoped under .pt-site, so linking this file without the body class
   changes nothing, and the homepage (its own design system, same tokens) is untouched.
   It upgrades the existing support-hub markup in place (header.site, main.doc, .crumb,
   .reviewed, .prose, table.cmp, .keyline, .askbox, ul.related, nav.related-reads,
   .disclaimer) and adds optional components (.pt-eyebrow, .pt-lede, .pt-btn, .pt-stores,
   .pt-countries, .pt-features, .pt-faq, .pt-plans, .pt-shots, .pt-stats, .pt-note).
   Tokens mirror the brand system and the homepage :root: warm surfaces, the site teal
   (hsl 158 22% 36%, the AA-safe brand shade the homepage uses), coral and violet
   accents, warm-tinted shadows, Source Serif 4 headings over Inter body. */

:root{
  --pt-bg:hsl(36 38% 98%);
  --pt-card:#fff;
  --pt-well:hsl(30 30% 96%);
  --pt-ink:hsl(222 32% 18%);
  --pt-ink-strong:hsl(222 47% 11%);
  --pt-ink-soft:hsl(215 16% 42%);
  --pt-ink-faint:hsl(215 14% 52%);
  --pt-brand:hsl(158 22% 36%);
  --pt-brand-emphasis:hsl(158 28% 31%);
  --pt-brand-strong:hsl(160 30% 28%);
  --pt-brand-soft:hsl(158 30% 90%);
  --pt-brand-softer:hsl(158 30% 96%);
  --pt-violet:hsl(255 70% 58%);
  --pt-violet-soft:hsl(255 90% 96%);
  --pt-coral:hsl(14 90% 62%);
  --pt-coral-soft:hsl(18 100% 95%);
  --pt-hairline:hsl(30 22% 90%);
  --pt-border:hsl(30 20% 86%);
  --pt-gradient-brand:linear-gradient(135deg,hsl(14 90% 65%) 0%,hsl(255 70% 60%) 100%);
  --pt-gradient-ink:linear-gradient(135deg,hsl(222 35% 20%) 0%,hsl(222 47% 11%) 100%);
  --pt-shadow-sm:0 1px 2px hsl(24 40% 22% / .07);
  --pt-shadow:0 4px 14px -4px hsl(24 40% 22% / .10),0 1px 3px hsl(24 40% 22% / .05);
  --pt-shadow-md:0 12px 30px -10px hsl(24 40% 22% / .16);
  --pt-shadow-lg:0 24px 50px -16px hsl(24 40% 22% / .22);
  --pt-radius:.875rem;
  --pt-radius-card:1.125rem;
  --pt-radius-lg:1.5rem;
  --pt-ease:cubic-bezier(.22,1,.36,1);
  --pt-serif:'Source Serif 4',ui-serif,Georgia,'Times New Roman',serif;
  --pt-sans:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  --pt-measure:760px;
}

/* ── Base ─────────────────────────────────────────────────────────────── */
.pt-site{background:var(--pt-bg);color:var(--pt-ink);font-family:var(--pt-sans);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.pt-site ::selection{background:hsl(255 70% 58% / .16)}
:where(.pt-site) :is(h1,h2,h3){font-family:var(--pt-serif);font-weight:600;letter-spacing:-.02em;text-wrap:balance}
body.pt-site :where(main.doc,article,.pt-faq,.pt-feature,.pt-plan,.askbox) :is(h1,h2,h3){color:var(--pt-ink-strong)}
:where(.pt-site) img{max-width:100%;height:auto}
:where(.pt-site) a{color:var(--pt-brand-strong)}
:where(.pt-site) a:hover{color:var(--pt-brand-emphasis)}
.pt-site a:focus-visible,.pt-site button:focus-visible,.pt-site summary:focus-visible{outline:2px solid var(--pt-brand);outline-offset:3px;border-radius:6px}

/* ── Header (header.site markup, shared by every content page) ─────────── */
.pt-site header.site{background:hsl(36 38% 98% / .82);-webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--pt-hairline)}
.pt-site header.site nav{max-width:1180px;height:68px;padding:0 24px;gap:28px}
.pt-site header.site .logo img{object-fit:contain;border-radius:0}
.pt-site header.site .nav-links{gap:6px}
.pt-site header.site .nav-links a{display:inline-flex;align-items:center;min-height:38px;padding:0 12px;border-radius:999px;color:var(--pt-ink-soft);font-size:.93rem;font-weight:500;transition:background-color .15s var(--pt-ease),color .15s var(--pt-ease)}
.pt-site header.site .nav-links a:hover,.pt-site header.site .nav-links a[aria-current]{background:var(--pt-well);color:var(--pt-ink)}
.pt-site header.site .nav-links a[href="/professionals"]{border:1px solid var(--pt-brand)!important;color:var(--pt-brand-strong)!important;padding:0 14px!important;font-weight:600!important;border-radius:999px!important;margin-left:4px}
.pt-site header.site .nav-links a[href="/professionals"][aria-current]{background:var(--pt-brand)!important;color:#fff!important}
.pt-site header.site .nav-links a[href="/professionals"]:hover{background:var(--pt-brand-softer)}
.pt-site header.site .nav-cta{gap:10px}
.pt-site header.site .btn-ghost,.pt-site header.site .btn-nav{display:inline-flex;align-items:center;min-height:42px;padding:0 18px;border-radius:var(--pt-radius);font-size:.93rem;font-weight:600;transition:background-color .15s var(--pt-ease),box-shadow .2s var(--pt-ease),transform .15s var(--pt-ease)}
.pt-site header.site .btn-ghost{background:#fff;border:1px solid var(--pt-border);color:var(--pt-ink)}
.pt-site header.site .btn-ghost:hover{border-color:var(--pt-brand);color:var(--pt-brand-strong);background:var(--pt-brand-softer)}
.pt-site header.site .btn-nav{background:var(--pt-brand);color:#fff;box-shadow:0 6px 18px -6px hsl(158 22% 36% / .5)}
.pt-site header.site .btn-nav:hover{background:var(--pt-brand-emphasis);color:#fff}
.pt-site header.site .btn-nav:active,.pt-site header.site .btn-ghost:active{transform:scale(.97)}

/* ── Document layout (main.doc) ──────────────────────────────────────────── */
.pt-site main.doc{max-width:var(--pt-measure);padding:clamp(28px,5vw,56px) 20px 24px}
.pt-site .crumb{font-size:.84rem;color:var(--pt-ink-faint);margin-bottom:18px}
.pt-site .crumb a{color:var(--pt-ink-soft);text-decoration:none}
.pt-site .crumb a:hover{color:var(--pt-brand-strong);text-decoration:underline}
body.pt-site :where(main.doc) h1{font-size:clamp(2.05rem,1.3rem + 2.9vw,3.05rem);line-height:1.08;letter-spacing:-.028em;margin:0 0 16px}
body.pt-site :where(main.doc) h2{font-size:clamp(1.45rem,1.15rem + 1.1vw,1.9rem);line-height:1.18;margin:56px 0 14px}
body.pt-site :where(main.doc) h3{font-size:1.2rem;line-height:1.3;margin:30px 0 8px;letter-spacing:-.015em}
.pt-site .reviewed{font-size:.86rem;color:var(--pt-ink-soft);margin:0 0 26px;padding-bottom:22px;border-bottom:1px solid var(--pt-hairline)}
.pt-site .prose p,body.pt-site :where(main.doc) > p{font-size:1.0625rem;line-height:1.72;margin:0 0 18px}
.pt-site .prose strong{color:var(--pt-ink-strong)}
.pt-site main.doc p a,.pt-site main.doc li a,.pt-site .prose a{text-decoration:underline;text-decoration-color:hsl(158 22% 36% / .35);text-underline-offset:3px;text-decoration-thickness:1px}
.pt-site main.doc p a:hover,.pt-site main.doc li a:hover{text-decoration-color:currentColor}
.pt-site main.doc ul:not([class]),.pt-site main.doc ol:not([class]){margin:0 0 20px;padding-left:1.3rem}
.pt-site main.doc ul:not([class]) li,.pt-site main.doc ol:not([class]) li{margin:0 0 8px;font-size:1.0625rem;line-height:1.65}
.pt-site main.doc ul:not([class]) li::marker{color:var(--pt-brand)}
.pt-site main.doc .lead,.pt-site .pt-lede{font-family:var(--pt-serif);font-size:clamp(1.18rem,1.05rem + .5vw,1.36rem);line-height:1.5;color:var(--pt-ink);letter-spacing:-.01em;margin:0 0 20px}

/* ── Comparison tables (table.cmp inside .cmp-wrap) ──────────────────────── */
.pt-site .cmp-wrap{background:#fff;border:1px solid var(--pt-hairline);border-radius:var(--pt-radius-card);box-shadow:var(--pt-shadow);overflow-x:auto;margin:24px 0 28px;-webkit-overflow-scrolling:touch}
.pt-site .cmp{width:100%;margin:0;border-collapse:separate;border-spacing:0;font-size:.94rem;line-height:1.5}
.pt-site .cmp caption{caption-side:bottom;text-align:left;font-size:.8rem;line-height:1.5;color:var(--pt-ink-faint);padding:12px 18px 14px;margin:0;border-top:1px solid var(--pt-hairline);background:var(--pt-well)}
.pt-site .cmp th,.pt-site .cmp td{border:0;border-bottom:1px solid var(--pt-hairline);padding:14px 16px;text-align:left;vertical-align:top;background:transparent}
.pt-site .cmp tbody tr:last-child > *{border-bottom:0}
.pt-site .cmp thead th{background:var(--pt-well);font-family:var(--pt-sans);font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--pt-ink-soft);white-space:nowrap}
.pt-site .cmp th[scope=row]{font-weight:600;color:var(--pt-ink-strong);background:transparent}
.pt-site .cmp tr.pt > *{background:var(--pt-brand-softer)}
.pt-site .cmp tr.pt > :first-child{box-shadow:inset 3px 0 0 var(--pt-brand)}
.pt-site .cmp .yes{color:var(--pt-brand-strong);font-weight:600}
@media (max-width:680px){.pt-site .cmp{min-width:680px}.pt-site .cmp-wrap{margin-left:-4px;margin-right:-4px}.pt-site .cmp caption{position:sticky;left:0;width:calc(100vw - 32px);max-width:calc(100vw - 32px);box-sizing:border-box}.pt-site .cmp-wrap::after{content:"Scroll sideways for every column";display:block;position:sticky;left:0;width:calc(100vw - 32px);padding:8px 18px 10px;font-size:.75rem;color:var(--pt-ink-faint);background:var(--pt-well)}}
@media (min-width:1040px){.pt-site main.doc > .cmp-wrap{margin-left:-60px;margin-right:-60px}}

/* ── Callouts ────────────────────────────────────────────────────────────── */
.pt-site .keyline,.pt-site .pt-note{background:var(--pt-brand-softer);border:1px solid var(--pt-brand-soft);border-left:1px solid var(--pt-brand-soft);border-radius:var(--pt-radius-card);padding:18px 20px;margin:20px 0 24px;font-size:.98rem;line-height:1.7}
.pt-site .keyline strong,.pt-site .pt-note strong{color:var(--pt-brand-strong)}
.pt-site .pt-note--violet{background:var(--pt-violet-soft);border-color:hsl(255 70% 90%)}
.pt-site .pt-note--violet strong{color:hsl(255 50% 40%)}

/* ── Closing call to action (.askbox) ────────────────────────────────────── */
.pt-site .askbox{position:relative;overflow:hidden;background:#fff;border:1px solid var(--pt-hairline);border-radius:var(--pt-radius-lg);box-shadow:var(--pt-shadow-md);padding:clamp(26px,4.5vw,44px);margin:56px 0 40px}
.pt-site .askbox::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 0% 0%,hsl(18 100% 95% / .9) 0%,transparent 55%),radial-gradient(110% 90% at 100% 100%,hsl(255 90% 96%) 0%,transparent 60%);pointer-events:none}
.pt-site .askbox > *{position:relative}
.pt-site .askbox h2{margin:0 0 10px;font-size:clamp(1.5rem,1.2rem + 1.2vw,2rem)}
.pt-site .askbox p{color:var(--pt-ink-soft);font-size:1.02rem;margin:0 0 18px;max-width:56ch}
.pt-site .askbox .btn-nav{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border-radius:var(--pt-radius);background:var(--pt-brand);color:#fff;font-weight:600;box-shadow:0 6px 18px -6px hsl(158 22% 36% / .5);text-decoration:none;transition:background-color .15s var(--pt-ease),transform .15s var(--pt-ease)}
.pt-site .askbox .btn-nav:hover{background:var(--pt-brand-emphasis);color:#fff}
.pt-site .askbox .btn-nav:active{transform:scale(.97)}
.pt-site .askbox .fineprint,.pt-site .askbox .pt-fine{font-size:.88rem;color:var(--pt-ink-soft);margin:14px 0 0}

/* ── Related links (ul.related, nav.related-reads) ───────────────────────── */
.pt-site ul.related:not([style]){list-style:none;margin:12px 0 8px;padding:0;display:grid;grid-template-columns:1fr;gap:10px}
@media (min-width:700px){.pt-site ul.related:not([style]){grid-template-columns:1fr 1fr}}
.pt-site ul.related:not([style]) li{padding:0;border:0;margin:0}
.pt-site ul.related:not([style]) a,.pt-site nav.related-reads a{display:flex!important;align-items:center;justify-content:space-between;gap:12px;height:100%;padding:14px 16px!important;background:#fff;border:1px solid var(--pt-hairline);border-radius:var(--pt-radius);color:var(--pt-ink)!important;font-weight:500;font-size:.96rem!important;line-height:1.4;text-decoration:none!important;box-shadow:var(--pt-shadow-sm);transition:transform .2s var(--pt-ease),box-shadow .2s var(--pt-ease),border-color .2s var(--pt-ease)}
.pt-site ul.related:not([style]) a::after,.pt-site nav.related-reads a::after{content:"";flex:none;width:16px;height:16px;background:currentColor;color:var(--pt-brand);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center/contain no-repeat}
.pt-site ul.related:not([style]) a:hover,.pt-site nav.related-reads a:hover{transform:translateY(-2px);box-shadow:var(--pt-shadow-md);border-color:var(--pt-brand-soft)}
.pt-site ul.related[style]{margin:0 0 18px}
.pt-site ul.related[style] li{border-bottom:0;padding:5px 0;font-size:1.0625rem}
.pt-site nav.related-reads{max-width:var(--pt-measure)!important;margin:8px auto 0!important;padding:28px 20px 8px!important;border-top:1px solid var(--pt-hairline)!important;font-family:var(--pt-sans)!important}
.pt-site nav.related-reads h2{font-family:var(--pt-serif)!important;font-size:1.25rem!important;font-weight:600!important;color:var(--pt-ink-strong)!important;margin:0 0 14px!important}
.pt-site nav.related-reads ul{display:grid!important;grid-template-columns:1fr;gap:10px!important}
@media (min-width:700px){.pt-site nav.related-reads ul{grid-template-columns:1fr 1fr}}
.pt-site .disclaimer{font-size:.82rem;line-height:1.6;color:var(--pt-ink-faint);margin-top:32px;border-top:1px solid var(--pt-hairline);padding-top:16px}
.pt-site .pt-ft{margin-top:56px}

/* ── Q&A blocks written as h3 + p (.qa) ──────────────────────────────────── */
.pt-site main.doc .qa h3{font-size:1.12rem;margin:26px 0 6px}
.pt-site main.doc .qa p{font-size:1.02rem;color:var(--pt-ink)}

/* ── Optional components ─────────────────────────────────────────────────── */
/* Eyebrow: small uppercase label above a heading */
.pt-site .pt-eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--pt-sans);font-size:.75rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--pt-brand-strong);margin:0 0 12px}
.pt-site .pt-eyebrow::before{content:"";width:18px;height:1.5px;border-radius:2px;background:var(--pt-brand)}

/* Buttons */
.pt-site .pt-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:0 22px;border-radius:var(--pt-radius);border:1px solid transparent;font-family:var(--pt-sans);font-weight:600;font-size:.95rem;line-height:1.2;text-decoration:none!important;white-space:nowrap;cursor:pointer;transition:transform .15s var(--pt-ease),box-shadow .2s var(--pt-ease),background-color .15s var(--pt-ease),border-color .15s var(--pt-ease)}
.pt-site .pt-btn:active{transform:scale(.97)}
.pt-site .pt-btn svg{width:18px;height:18px;flex:none}
.pt-site .pt-btn--primary{background:var(--pt-brand);color:#fff!important;box-shadow:0 6px 18px -6px hsl(158 22% 36% / .5)}
.pt-site .pt-btn--primary:hover{background:var(--pt-brand-emphasis)}
.pt-site .pt-btn--ghost{background:#fff;color:var(--pt-ink)!important;border-color:var(--pt-border)}
.pt-site .pt-btn--ghost:hover{border-color:var(--pt-brand);color:var(--pt-brand-strong)!important;background:var(--pt-brand-softer)}
.pt-site .pt-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:22px 0 8px}

/* Store badges: two equal buttons, App Store and Google Play */
.pt-site .pt-stores{display:flex;flex-wrap:wrap;gap:12px;margin:4px 0 0}
.pt-site .pt-store{display:inline-flex;align-items:center;gap:12px;min-height:56px;min-width:196px;padding:8px 20px 8px 16px;border-radius:var(--pt-radius);background:var(--pt-ink-strong);color:#fff!important;text-decoration:none!important;box-shadow:0 8px 20px -10px hsl(222 47% 11% / .55);transition:transform .15s var(--pt-ease),box-shadow .2s var(--pt-ease),background-color .15s var(--pt-ease)}
.pt-site .pt-store:hover{background:hsl(222 40% 18%);box-shadow:0 12px 26px -10px hsl(222 47% 11% / .6);transform:translateY(-1px)}
.pt-site .pt-store:active{transform:scale(.97)}
.pt-site .pt-store svg{width:24px;height:24px;flex:none}
.pt-site .pt-store span{display:flex;flex-direction:column;line-height:1.15;text-align:left}
.pt-site .pt-store small{font-size:.7rem;font-weight:500;opacity:.8;letter-spacing:.01em}
.pt-site .pt-store b{font-size:1.06rem;font-weight:600;letter-spacing:-.01em}
@media (max-width:440px){.pt-site .pt-store{flex:1 1 100%;justify-content:center}}

/* Country switcher for the five country guides: <nav class="pt-countries"> */
.pt-site .pt-countries{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 28px}
.pt-site .pt-countries > span{font-size:.82rem;color:var(--pt-ink-soft);margin-right:2px}
.pt-site .pt-countries a{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--pt-hairline);background:#fff;color:var(--pt-ink-soft)!important;font-size:.86rem;font-weight:500;text-decoration:none!important;transition:border-color .15s var(--pt-ease),color .15s var(--pt-ease),background-color .15s var(--pt-ease)}
.pt-site .pt-countries a:hover{border-color:var(--pt-brand);color:var(--pt-brand-strong)!important}
.pt-site .pt-countries a[aria-current]{background:var(--pt-brand);border-color:var(--pt-brand);color:#fff!important}

/* Feature cards: <div class="pt-features"><div class="pt-feature"><span class="pt-ico">svg</span><h3/><p/></div></div> */
.pt-site .pt-features{display:grid;grid-template-columns:1fr;gap:14px;margin:22px 0 10px}
@media (min-width:620px){.pt-site .pt-features{grid-template-columns:1fr 1fr}}
.pt-site .pt-feature{background:#fff;border:1px solid var(--pt-hairline);border-radius:var(--pt-radius-card);box-shadow:var(--pt-shadow);padding:20px 20px 18px}
.pt-site .pt-feature h3{font-size:1.1rem;margin:12px 0 6px}
.pt-site .pt-feature p{font-size:.95rem;line-height:1.6;color:var(--pt-ink-soft);margin:0}
.pt-site .pt-feature p a{color:var(--pt-brand-strong)}
.pt-site .pt-ico{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;background:var(--pt-brand-softer);color:var(--pt-brand-strong)}
.pt-site .pt-ico svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.pt-site .pt-ico--violet{background:var(--pt-violet-soft);color:hsl(255 55% 50%)}
.pt-site .pt-ico--coral{background:var(--pt-coral-soft);color:hsl(14 70% 46%)}
.pt-site .pt-feature--wide{grid-column:1 / -1}
.pt-site .pt-feature__top{display:flex;align-items:center;justify-content:space-between;gap:10px}
/* Plan tag on a card: <span class="pt-chip">Free</span> or <span class="pt-chip pt-chip--premium">Premium</span> */
.pt-site .pt-chip{display:inline-flex;align-items:center;min-height:24px;padding:0 10px;border-radius:999px;background:var(--pt-well);border:1px solid var(--pt-hairline);font-size:.72rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--pt-ink-soft)}
.pt-site .pt-chip--premium{background:var(--pt-brand-softer);border-color:var(--pt-brand-soft);color:var(--pt-brand-strong)}

/* FAQ accordion: <section class="pt-faq"><details><summary>Q</summary><p>A</p></details></section>
   Keep the FAQPage JSON-LD text identical to what is visible here. */
.pt-site .pt-faq{margin:14px 0 8px;display:grid;gap:10px}
.pt-site .pt-faq details{background:#fff;border:1px solid var(--pt-hairline);border-radius:var(--pt-radius);box-shadow:var(--pt-shadow-sm);transition:box-shadow .2s var(--pt-ease)}
.pt-site .pt-faq details[open]{box-shadow:var(--pt-shadow)}
.pt-site .pt-faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 18px;font-family:var(--pt-serif);font-weight:600;font-size:1.06rem;line-height:1.35;color:var(--pt-ink-strong)}
.pt-site .pt-faq summary::-webkit-details-marker{display:none}
.pt-site .pt-faq summary::after{content:"";flex:none;width:18px;height:18px;background:var(--pt-brand);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform .2s var(--pt-ease)}
.pt-site .pt-faq details[open] summary::after{transform:rotate(45deg)}
.pt-site .pt-faq details > :not(summary){padding:0 18px;margin:0 0 12px;font-size:1rem;line-height:1.7;color:var(--pt-ink)}
.pt-site .pt-faq details > :last-child{padding-bottom:6px}

/* Plan cards: <div class="pt-plans"><div class="pt-plan">…</div><div class="pt-plan pt-plan--premium">…</div></div> */
.pt-site .pt-plans{display:grid;grid-template-columns:1fr;gap:14px;margin:22px 0 12px}
@media (min-width:620px){.pt-site .pt-plans{grid-template-columns:1fr 1fr}}
.pt-site .pt-plan{background:#fff;border:1px solid var(--pt-hairline);border-radius:var(--pt-radius-card);box-shadow:var(--pt-shadow);padding:22px}
.pt-site .pt-plan--premium{border-color:var(--pt-brand);box-shadow:var(--pt-shadow-md)}
.pt-site .pt-plan h3{margin:0 0 4px;font-size:1.15rem}
.pt-site .pt-plan .pt-price{font-family:var(--pt-serif);font-size:1.6rem;font-weight:600;letter-spacing:-.02em;color:var(--pt-ink-strong);font-variant-numeric:tabular-nums;margin:0 0 2px}
.pt-site .pt-plan .pt-price small{font-family:var(--pt-sans);font-size:.85rem;font-weight:500;color:var(--pt-ink-soft);letter-spacing:0}
.pt-site .pt-plan p{font-size:.94rem;color:var(--pt-ink-soft);margin:0 0 12px}
.pt-site .pt-plan ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.pt-site .pt-plan li{position:relative;padding-left:26px;font-size:.95rem;line-height:1.5}
.pt-site .pt-plan li::before{content:"";position:absolute;left:0;top:3px;width:16px;height:16px;background:var(--pt-brand);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat}

/* Phone screenshots: <div class="pt-shots"><figure><img width height loading="lazy"><figcaption/></figure></div> */
.pt-site .pt-shots,.pt-site .shots{display:flex;justify-content:center;gap:clamp(12px,3vw,24px);margin:28px 0 12px}
.pt-site .pt-shots figure,.pt-site .shots figure{flex:0 1 230px;min-width:0;margin:0;text-align:center}
.pt-site .pt-shots img,.pt-site .shots img{display:block;width:100%;height:auto;border-radius:1.6rem;border:1px solid hsl(24 20% 88%);background:#fff;box-shadow:var(--pt-shadow-lg)}
.pt-site .pt-shots figcaption,.pt-site .shots figcaption{font-size:.85rem;color:var(--pt-ink-soft);margin-top:12px}

/* Statistics band on ink: <div class="pt-stats"><span class="pt-stats__glow"></span>… (markup as on the Ireland guide) */
.pt-site .pt-stats{background:var(--pt-gradient-ink);color:#fff;border-radius:var(--pt-radius-lg);padding:clamp(28px,5vw,52px);position:relative;overflow:hidden;margin:36px 0 12px;box-shadow:var(--pt-shadow-lg)}
.pt-site .pt-stats__glow{position:absolute;inset:auto -120px -160px auto;width:460px;height:460px;background:radial-gradient(circle,hsl(255 70% 58% / .4),transparent 65%);pointer-events:none}
.pt-site .pt-stats__lead{position:relative;max-width:640px}
.pt-site main.doc .pt-stats__lead h2{color:#fff;font-size:clamp(1.5rem,1.2rem + 1.4vw,2.1rem);line-height:1.15;margin:0}
.pt-site .pt-stats__lead p{color:hsl(0 0% 100% / .72);margin-top:12px;font-size:1.02rem;line-height:1.6}
.pt-site .pt-stats__grid{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:32px}
.pt-site .pt-stat__num{font-family:var(--pt-serif);font-weight:600;font-size:clamp(2rem,1.5rem + 2vw,2.8rem);line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.pt-site .pt-stat__num.is-violet{color:hsl(255 80% 80%)}
.pt-site .pt-stat__num.is-coral{color:hsl(14 92% 74%)}
.pt-site .pt-stat__num.is-mint{color:hsl(158 45% 70%)}
.pt-site .pt-stat__lbl{font-weight:600;font-size:.95rem;margin-top:12px;color:#fff}
.pt-site .pt-stat__desc{font-size:.88rem;line-height:1.55;color:hsl(0 0% 100% / .66);margin-top:6px}
.pt-site .pt-stat__src{color:hsl(0 0% 100% / .5)}
.pt-site .pt-stat + .pt-stat{border-left:1px solid hsl(0 0% 100% / .12);padding-left:24px}
@media (max-width:680px){.pt-site .pt-stats__grid{grid-template-columns:1fr;gap:0}.pt-site .pt-stat + .pt-stat{border-left:none;border-top:1px solid hsl(0 0% 100% / .12);padding-left:0;padding-top:20px;margin-top:20px}}

/* Small facts row under the H1: <ul class="pt-facts"><li>…</li></ul> */
.pt-site .pt-facts{list-style:none;padding:0;margin:4px 0 26px;display:flex;flex-wrap:wrap;gap:8px}
.pt-site .pt-facts li{display:inline-flex;align-items:center;gap:7px;min-height:32px;padding:0 12px;border-radius:999px;background:#fff;border:1px solid var(--pt-hairline);font-size:.84rem;font-weight:500;color:var(--pt-ink-soft)}
.pt-site .pt-facts li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--pt-brand)}

/* ── Mobile ──────────────────────────────────────────────────────────────── */
@media (max-width:520px){
  .pt-site main.doc{padding-left:18px;padding-right:18px}
  body.pt-site :where(main.doc) h2{margin-top:44px}
  .pt-site .askbox{margin-top:44px}
}

/* ── Motion preference ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .pt-site *,.pt-site *::before,.pt-site *::after{transition:none!important;animation:none!important}
}
@media print{
  .pt-site header.site,.pt-site .askbox,.pt-site nav.related-reads,.pt-site .pt-stores{display:none}
  .pt-site .cmp-wrap{box-shadow:none;border-color:hsl(30 14% 79%)}
}

/* Warning note (.warn, used on the court and high-conflict pages) */
.pt-site .warn{background:var(--pt-coral-soft);border:1px solid hsl(18 80% 88%);border-radius:var(--pt-radius-card);padding:18px 20px;margin:24px 0;font-size:.98rem;line-height:1.7}
.pt-site .warn strong{color:hsl(14 60% 36%)}

/* ── Self-sufficient header base: pages that load only site.css (no tokens.css or
      support-hub.css) still get the standard header.site layout ─────────────── */
.pt-site header.site{position:sticky;top:0;z-index:50}
.pt-site header.site nav{margin:0 auto;display:flex;align-items:center;justify-content:flex-start}
.pt-site header.site .logo{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--pt-ink)}
.pt-site header.site .logo img{width:32px;height:32px;margin:0}
.pt-site header.site .nav-links{display:flex;list-style:none;align-items:center;margin:0;padding:0}
.pt-site header.site .nav-cta{margin-left:auto;display:flex;align-items:center}
.pt-site header.site > nav > .btn-nav{margin-left:auto}
@media (max-width:760px){.pt-site header.site .nav-links li.sec{display:none}}
.pt-site .wordmark{font-family:var(--pt-serif);font-weight:700;font-size:1.3rem;letter-spacing:-.01em;line-height:1;color:hsl(14 90% 62%)}
@supports ((background-clip:text) or (-webkit-background-clip:text)){.pt-site .wordmark{background:var(--pt-gradient-brand);-webkit-background-clip:text;background-clip:text;color:transparent}}
@media (forced-colors:active){.pt-site .wordmark{background:none;color:CanvasText}}

/* ── Article template (div.page-hero + .wrap > article): the evergreen guides ──
   The old full-bleed coral-to-violet band becomes a calm editorial header on the
   warm page, with the gradient kept as a soft glow; the gradient itself is saved
   for the closing .cta card, as the brand system asks. */
.pt-site .page-hero{position:relative;overflow:hidden;background:var(--pt-bg);color:var(--pt-ink);border-bottom:1px solid var(--pt-hairline)}
.pt-site .page-hero::before{content:"";position:absolute;inset:-40% -10% auto auto;width:620px;height:620px;background:radial-gradient(circle,hsl(255 90% 96%) 0%,transparent 62%);pointer-events:none}
.pt-site .page-hero::after{content:"";position:absolute;inset:auto auto -55% -12%;width:560px;height:560px;background:radial-gradient(circle,hsl(18 100% 95%) 0%,transparent 60%);pointer-events:none}
.pt-site .page-hero > *{position:relative;z-index:1}
.pt-site .page-hero .wrap{max-width:var(--pt-measure);margin:0 auto;padding:clamp(40px,6vw,76px) 20px clamp(30px,4vw,48px)}
.pt-site .page-hero:not(:has(.wrap)){padding:clamp(40px,6vw,76px) 20px clamp(30px,4vw,48px)}
.pt-site .page-hero:not(:has(.wrap)) > *{max-width:var(--pt-measure);margin-left:auto;margin-right:auto}
.pt-site .page-hero .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.75rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--pt-brand-strong);opacity:1;margin:0 0 14px}
.pt-site .page-hero .eyebrow::before{content:"";width:18px;height:1.5px;border-radius:2px;background:var(--pt-brand)}
.pt-site .page-hero h1{color:var(--pt-ink-strong);font-size:clamp(2.05rem,1.3rem + 2.9vw,3.05rem);line-height:1.08;letter-spacing:-.028em;margin:0}
.pt-site .page-hero p{color:var(--pt-ink-soft);font-size:clamp(1.05rem,1rem + .35vw,1.2rem);line-height:1.6;max-width:60ch;margin:16px 0 0;opacity:1}
.pt-site .page-hero a{color:var(--pt-brand-strong)}
.pt-site .page-hero ~ .wrap{max-width:var(--pt-measure);margin:0 auto;padding:0 20px}
.pt-site .page-hero ~ .wrap article{padding:clamp(28px,4vw,44px) 0 12px}
.pt-site .page-hero ~ .wrap article > p.lead{font-family:var(--pt-serif);font-size:clamp(1.18rem,1.05rem + .5vw,1.36rem);line-height:1.5;color:var(--pt-ink);margin:0 0 18px}
.pt-site .page-hero ~ .wrap article section{padding:28px 0;border-bottom:1px solid var(--pt-hairline)}
.pt-site .page-hero ~ .wrap article h2{font-size:clamp(1.4rem,1.15rem + 1vw,1.8rem);line-height:1.2;margin:0 0 12px}
.pt-site .page-hero ~ .wrap article h3{font-size:1.15rem;margin:22px 0 6px}
.pt-site .page-hero ~ .wrap article p,.pt-site .page-hero ~ .wrap article li{font-size:1.0625rem;line-height:1.72}
.pt-site .page-hero ~ .wrap article p{margin:0 0 16px}
.pt-site .page-hero ~ .wrap article ul,.pt-site .page-hero ~ .wrap article ol{padding-left:1.3rem;margin:0 0 16px}
.pt-site .page-hero ~ .wrap article li{margin:0 0 8px}
.pt-site .page-hero ~ .wrap article li::marker{color:var(--pt-brand)}
.pt-site .page-hero ~ .wrap article a{color:var(--pt-brand-strong);text-decoration:underline;text-decoration-color:hsl(158 22% 36% / .35);text-underline-offset:3px}
.pt-site .page-hero ~ .wrap article a:hover{text-decoration-color:currentColor}
.pt-site .page-hero ~ .wrap .faq{padding:30px 0}
.pt-site .page-hero ~ .wrap .faq h2{margin-bottom:10px}
.pt-site .page-hero ~ .wrap .faq .q{font-family:var(--pt-serif);font-weight:600;font-size:1.1rem;color:var(--pt-ink-strong);margin:22px 0 6px}
.pt-site .page-hero ~ .wrap .cta{position:relative;overflow:hidden;background:var(--pt-gradient-brand);color:#fff;border-radius:var(--pt-radius-lg);padding:clamp(28px,4.5vw,44px);margin:44px 0 16px;text-align:left;box-shadow:var(--pt-shadow-lg)}
.pt-site .page-hero ~ .wrap .cta h2{color:#fff;font-size:clamp(1.45rem,1.2rem + 1vw,1.9rem);margin:0 0 10px}
.pt-site .page-hero ~ .wrap .cta p{color:hsl(0 0% 100% / .92);font-size:1.02rem;max-width:56ch;margin:0 0 20px;opacity:1}
.pt-site .page-hero ~ .wrap .cta > a{display:inline-flex;align-items:center;min-height:48px;padding:0 22px;border-radius:var(--pt-radius);background:#fff;color:var(--pt-ink-strong)!important;font-weight:600;text-decoration:none!important;box-shadow:var(--pt-shadow);transition:transform .15s var(--pt-ease),box-shadow .2s var(--pt-ease)}
.pt-site .page-hero ~ .wrap .cta > a:hover{box-shadow:var(--pt-shadow-md);transform:translateY(-1px)}
.pt-site .page-hero ~ .wrap .cta .pt-stores{margin-top:4px}
.pt-site .page-hero ~ .wrap .cta p a{color:#fff;text-decoration:underline;text-decoration-color:hsl(0 0% 100% / .6)}
.pt-site .page-hero ~ .wrap p.related{padding:20px 0 8px;color:var(--pt-ink-soft);font-size:.95rem}
/* Legacy footer.site (old article pages): match the unified dark footer */
.pt-site footer.site{background:hsl(222 32% 18%);color:#c7d0de;margin-top:56px}
.pt-site footer.site .wrap{max-width:1080px;padding:28px 24px}
.pt-site .page-hero ~ .wrap article :is(div,li,section) > :is(h2,h3):first-child{margin-top:0}