/* Premium layout for the long explainer pages (/how-it-works, /what-shield-does), 2026-10-31.
   Same look as the /why pass: calm hero with one main action and the phone, trust strip,
   "On this page" list, white cards, one dark closing panel. Layout only: every word on these
   pages is unchanged. 16px minimum, 48px taps, dark mode from the site tokens, no sideways scroll. */
.pd{--pd-g:var(--blue);--pd-wash:#e7f2ec;--pd-panel:#073d2f;color:var(--ink)}
.pd-wrap{width:min(1120px,calc(100% - 40px));margin:0 auto}
.pd a:focus-visible{outline:3px solid #e6a700;outline-offset:3px}

/* Hero. Source order is the phone order (copy, trust strip, note, contents); wide screens place them by grid. */
.pd-hero{padding:72px 0 0;display:grid;grid-template-columns:1.25fr .75fr;column-gap:56px;align-items:start}
.pd-copy{grid-column:1;grid-row:1}
.pd-note{grid-column:1;grid-row:2}
.pd-toc{grid-column:2;grid-row:1/span 2}
.pd-hero>.pd-trust{grid-column:1/-1;grid-row:3;margin:44px 0 0}
.pd-eyebrow{font-size:16px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--pd-g);margin:0 0 14px}
.pd h1{font-size:clamp(36px,5vw,58px);line-height:1.05;letter-spacing:-.02em;margin:0 0 22px;color:var(--ink)}
.pd-lead{font-size:20px;line-height:1.55;color:var(--body);margin:0 0 30px;max-width:44ch}
.pd-note{font-size:17px;line-height:1.6;color:var(--body);margin:28px 0 0;max-width:62ch}
.pd-cta{display:flex;flex-wrap:wrap;gap:12px}
.pd-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 28px;border-radius:999px;font-size:19px;font-weight:700;text-decoration:none;background:var(--pd-g);color:#fff;border:2px solid var(--pd-g)}
.pd-btn:hover{background:#073d2f;border-color:#073d2f;color:#fff}
.pd-btn.ghost{background:transparent;color:var(--pd-g)}
.pd-btn.ghost:hover{background:var(--pd-wash);color:var(--pd-g)}
.pd-btn svg{flex:none}

/* On this page */
.pd-toc{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:26px 24px 18px;box-shadow:0 1px 2px rgb(15 23 42/.04),0 18px 40px rgb(15 23 42/.08)}
.pd-toc h2{font-size:16px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
.pd-toc ol{list-style:none;margin:0;padding:0;counter-reset:pdtoc}
.pd-toc li{counter-increment:pdtoc;border-top:1px solid var(--line)}
.pd-toc li:first-child{border-top:0}
.pd-toc a{display:flex;align-items:center;gap:14px;min-height:52px;padding:8px 0;font-size:17px;font-weight:600;line-height:1.3;color:var(--ink);text-decoration:none}
.pd-toc a::before{content:counter(pdtoc);flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--pd-wash);color:var(--pd-g);font-size:16px;font-weight:700}
.pd-toc a:hover{color:var(--pd-g);text-decoration:underline;text-underline-offset:3px}

/* Trust strip (same three points as the homepage) */
.pd-trust{list-style:none;margin:0 auto;padding:20px 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line);color:var(--body)}
.pd-trust li{display:flex;align-items:center;min-width:0;padding:4px 28px;font-size:17px;line-height:1.4}
.pd-trust li:first-child{padding-left:0}
.pd-trust li+li{border-left:1px solid var(--line)}
.pd-trust a{display:flex;align-items:center;min-height:48px;color:inherit;text-decoration:none}
.pd-trust b{display:block;font-size:18px;color:var(--ink)}
.pd-trust .pd-num{color:var(--pd-g);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.pd-ti{flex:0 0 48px;width:48px;height:48px;margin-right:16px;border-radius:50%;display:grid;place-items:center;background:var(--pd-wash);color:var(--pd-g)}

/* Sections */
.pd-sec{padding:72px 0;scroll-margin-top:16px}
.pd-sec+.pd-sec{border-top:1px solid var(--line)}
.pd-sec h2{font-size:clamp(28px,3.4vw,40px);line-height:1.15;letter-spacing:-.015em;margin:0 0 16px;color:var(--ink);max-width:28ch}
.pd-sec p{font-size:18px;line-height:1.65;color:var(--body);margin:0 0 18px;max-width:68ch}
.pd-sec p:last-child{margin-bottom:0}
.pd-sec a{color:var(--pd-g);font-weight:600}
.pd-sec strong,.pd-sec em{color:var(--ink)}
.pd-intro{font-size:20px!important;max-width:60ch}
.pd-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.pd-split figure{margin:0}
.pd-split img{display:block;width:100%;height:auto;border-radius:18px;box-shadow:0 24px 56px rgb(7 61 47/.18)}
.pd-callout{border-left:4px solid var(--pd-g);background:var(--surface);border-radius:0 14px 14px 0;padding:18px 22px;margin-top:22px}
.pd-callout p{font-size:17px}

/* Cards */
.pd-cards{list-style:none;margin:30px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.pd-cards>li{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:28px 26px;box-shadow:0 1px 2px rgb(16 39 31/.04)}
.pd-cards h3{font-size:22px;line-height:1.25;margin:0 0 10px;color:var(--ink)}
.pd-cards p{font-size:18px;line-height:1.6;margin:0}
.pd-ico{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:var(--pd-wash);color:var(--pd-g);margin:0 0 18px}
.pd-dots{list-style:none;margin:0;padding:0}
.pd-dots li{position:relative;padding:6px 0 6px 26px;font-size:18px;line-height:1.5;color:var(--body)}
.pd-dots li::first-letter{text-transform:uppercase}
.pd-dots li::before{content:'';position:absolute;left:4px;top:.95em;width:8px;height:8px;border-radius:50%;background:var(--pd-g)}
.pd-dots.no li::before{background:transparent;border:2px solid var(--muted);width:6px;height:6px}
.pd-tag{display:inline-block;font-size:16px;font-weight:700;padding:4px 12px;border-radius:999px;background:var(--pd-wash);color:var(--pd-g);margin:0 0 12px}

/* Long technical text: a reading column, broken at sentence ends only */
.pd-read{max-width:72ch}
.pd-read p+p{padding-top:18px;border-top:1px solid var(--line)}

/* Dark panels */
.pd-panel{background:var(--pd-panel);color:#e3efe9;border-radius:28px;padding:56px;margin:0 0 72px}
.pd-panel h2{color:#fff;font-size:clamp(28px,3.4vw,40px);line-height:1.15;margin:0 0 14px}
.pd-panel p{font-size:19px;line-height:1.6;margin:0 0 26px;max-width:62ch;color:#e3efe9}
.pd-panel p:last-child{margin-bottom:0}
.pd-panel strong,.pd-panel em{color:#fff}
.pd-panel a:not(.pd-btn){color:#b0efd1;font-weight:600}
.pd-panel .pd-btn{background:#fff;color:#073d2f;border-color:#fff}
.pd-panel .pd-btn:hover{background:#dff3ea;border-color:#dff3ea;color:#073d2f}
.pd-panel .pd-btn.ghost{background:transparent;color:#fff;border-color:#8fb8a7}
.pd-panel .pd-btn.ghost:hover{background:rgb(255 255 255/.08)}
.pd-panel .pd-small{font-size:17px;color:#d2e6dc;margin-top:18px}
.pd-panel.slim{padding:40px 56px;margin:0}

.pd-panel .pd-cards{margin:4px 0 0}
.pd-panel .pd-cards>li{background:rgb(255 255 255/.07);border-color:#2f6b57;box-shadow:none}
.pd-panel .pd-cards h3{color:#fff}
.pd-panel .pd-cards p{font-size:18px;margin:0;color:#e3efe9}
.pd-panel .pd-stat{color:#8bd8b9}

/* Plan table */
.pd-table-wrap{margin:30px 0 22px;border:1px solid var(--line);border-radius:20px;overflow:hidden;background:var(--surface);box-shadow:0 1px 2px rgb(15 23 42/.04),0 18px 40px rgb(15 23 42/.08)}
.pd-table{width:100%;border-collapse:collapse;font-size:18px;line-height:1.5;color:var(--body)}
.pd-table caption{position:absolute;left:-9999px}
.pd-table th,.pd-table td{padding:18px 20px;text-align:left;vertical-align:top;border-top:1px solid var(--line)}
.pd-table thead th{border-top:0;background:var(--pd-panel);color:#fff;font-size:19px;padding:20px}
.pd-table tbody th{font-weight:700;color:var(--ink);width:24%}
.pd-table tbody tr:nth-child(even){background:var(--surface-2)}
.pd-yes,.pd-no{display:inline-flex;align-items:center;gap:8px;font-weight:700}
.pd-yes{color:var(--pd-g)}
.pd-no{color:var(--muted)}
.pd-yes::before,.pd-no::before{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;font-size:16px;line-height:1}
.pd-yes::before{content:'\2713';background:var(--pd-wash);color:var(--pd-g)}
.pd-no::before{content:'\2013';background:var(--surface-2);color:var(--muted);border:1px solid var(--line)}

/* Test result numbers */
.pd-stat{display:block;font-size:56px;line-height:1;font-weight:700;letter-spacing:-.03em;color:var(--pd-g);margin:0 0 12px}

@media (max-width:900px){
  .pd-hero{grid-template-columns:1fr;padding:36px 0 0}
  .pd-copy,.pd-note,.pd-toc,.pd-hero>.pd-trust{grid-column:1;grid-row:auto}
  .pd-hero>.pd-trust{margin-top:28px}
  .pd-toc{margin-top:28px}
  .pd-split{grid-template-columns:1fr;gap:32px}
  .pd-sec{padding:48px 0}
  .pd-cards{grid-template-columns:1fr;gap:12px}
  .pd-cards>li{padding:22px 20px;border-radius:18px}
  .pd-panel{padding:32px 22px;border-radius:22px;margin-bottom:48px}
  .pd-panel.slim{padding:28px 22px}
  .pd-trust{grid-template-columns:1fr;padding:4px 0 8px}
  .pd-trust li{padding:10px 0}
  .pd-trust li+li{border-left:0;border-top:1px solid var(--line)}
  .pd-trust b{display:inline;font-size:17px}
  .pd-trust b::after{content:' \00b7';font-weight:400;color:var(--muted)}
  .pd-ti{flex-basis:40px;width:40px;height:40px;margin-right:12px}
}
@media (max-width:679px){
  .pd-table,.pd-table thead,.pd-table tbody,.pd-table tr,.pd-table th,.pd-table td{display:block}
  .pd-table thead{position:absolute;left:-9999px}
  .pd-table-wrap{border:0;border-radius:0;overflow:visible;background:transparent;box-shadow:none}
  .pd-table tbody tr,.pd-table tbody tr:nth-child(even){background:var(--surface);border:1px solid var(--line);border-radius:18px;margin:0 0 12px;overflow:hidden}
  .pd-table tbody th{width:auto;background:var(--pd-panel);color:#fff;padding:14px 18px;border-top:0}
  .pd-table td{padding:14px 18px}
  .pd-table tbody th+td{border-top:0}
  .pd-table td::before{content:attr(data-plan);display:block;font-size:16px;font-weight:700;color:var(--muted);margin:0 0 4px}
}
@media (max-width:480px){
  .pd-lead{font-size:19px}
  .pd-btn{width:100%}
  .pd-cards h3{font-size:20px}
  .pd-sec p{font-size:18px}
  .pd-stat{font-size:48px}
}
/* Dark: follows the system unless the visitor picked light, or picked dark by hand (same as site.css). */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .pd{--pd-wash:#163328;--pd-panel:#0b3326}
  :root:not([data-theme="light"]) .pd-btn:not(.ghost){color:#062a1f}
  :root:not([data-theme="light"]) .pd-btn:not(.ghost):hover{background:#a9e4cc;border-color:#a9e4cc;color:#062a1f}
  :root:not([data-theme="light"]) .pd-btn.ghost:hover{background:rgb(139 216 185/.1)}
  :root:not([data-theme="light"]) .pd-toc,:root:not([data-theme="light"]) .pd-table-wrap{box-shadow:none}
  :root:not([data-theme="light"]) .pd-panel{border:1px solid #2b4a3f}
  :root:not([data-theme="light"]) .pd-table thead th,:root:not([data-theme="light"]) .pd-table tbody th{border-color:#2b4a3f}
}
:root[data-theme="dark"] .pd{--pd-wash:#163328;--pd-panel:#0b3326}
:root[data-theme="dark"] .pd-btn:not(.ghost){color:#062a1f}
:root[data-theme="dark"] .pd-btn:not(.ghost):hover{background:#a9e4cc;border-color:#a9e4cc;color:#062a1f}
:root[data-theme="dark"] .pd-btn.ghost:hover{background:rgb(139 216 185/.1)}
:root[data-theme="dark"] .pd-toc,:root[data-theme="dark"] .pd-table-wrap{box-shadow:none}
:root[data-theme="dark"] .pd-panel{border:1px solid #2b4a3f}
:root[data-theme="dark"] .pd-table thead th,:root[data-theme="dark"] .pd-table tbody th{border-color:#2b4a3f}