/*
  Protection Connect: shared marketing-site stylesheet.
  Source of truth: design/README.md and the design/*.dc.html prototypes.
  Loaded on every page built by tools/build_site.py (see site/README.md).

  Contents
    1. Tokens
    2. Base
    3. Accessibility helpers (skip link, screen-reader text, focus ring)
    4. Layout and section rhythm
    5. Typography scale
    6. Buttons and press feedback
    7. Header: page variant (SiteHeader2) and homepage variant
    8. Footer (SiteFooter2)
    9. Cookie consent dialog
   10. Shared content components (eyebrow, guide cards, navy CTA panel,
       article template, data table, legal template, cookie table)
   11. Keyframes
   12. Reduced motion

  Note: box-sizing is NOT reset globally. The prototypes use the browser default
  (content-box) and set border-box per element, so copied inline values keep their size.
*/

/* ---------------------------------------------------------------- 1. Tokens */
:root {
  --pc-navy: #0B1B3F;
  --pc-footer-navy: #0A1540;
  --pc-blue: #245CFF;
  --pc-blue-press: #1E4FD8;
  --pc-blue-hover: #3B6DFF;
  /* Two-tone brand mark (top-left half / bottom-right half), on light and on navy. The PNG and
     SVG logo assets (pc-logo-duo*.png, pc-mark-duo-white.svg, pc-favicon.svg) bake these in. */
  --pc-mark-a: #0B1B3F;
  --pc-mark-b: #245CFF;
  --pc-mark-a-dark: #FFFFFF;
  --pc-mark-b-dark: #6E9BFF;
  --pc-muted: #5B6787;
  --pc-nav-ink: #3D4966;
  --pc-placeholder: #7A849C;
  --pc-border: #E6EAF1;
  --pc-border-2: #E3E8F0;
  --pc-border-3: #EEF1F5;
  --pc-border-4: #DDE3EC;
  --pc-border-5: #E3E8F2;
  --pc-dot: #B7C3DA;
  --pc-panel: #F3F5F9;
  --pc-hover: #F1F4F9;
  --pc-pale: #EAF0FF;
  --pc-pale-2: #F1F5FF;
  --pc-chip: #EEF2FA;
  --pc-chip-ink: #1A3A8F;
  --pc-success: #1F6E55;
  --pc-success-bg: #E6F6EF;
  --pc-check: #1F9D7A;
  --pc-ft-text: #A9BADB;
  --pc-ft-muted: #8FA2C6;

  --pc-font: 'Hanken Grotesk', system-ui, sans-serif;
  --pc-mono: 'DM Mono', monospace;
  --pc-figtree: 'Figtree', system-ui, sans-serif;

  --pc-ease-press: cubic-bezier(.2, .8, .2, 1);
  --pc-transition: transform .14s cubic-bezier(.2, .8, .2, 1), background-color .2s ease, opacity .2s ease, color .2s ease, border-color .2s ease, filter .2s ease;

  --pc-section: clamp(64px, 8vw, 96px);
  --pc-hero-gap: clamp(32px, 4vw, 48px);
  --pc-content: 1080px;

  --pc-shadow-card: 0 18px 40px -12px rgba(0, 0, 0, .45);
  --pc-shadow-note: 0 10px 28px -10px rgba(0, 0, 0, .5);
}

/* ------------------------------------------------------------------ 2. Base */
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  min-height: 100vh;
  background: #FFFFFF;
  color: var(--pc-navy);
  font-family: var(--pc-font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
/* Default link colour on content pages (About, Guides, Article, Legal, Contact). */
a { color: var(--pc-blue-press); text-decoration: none; }
a:hover { color: var(--pc-navy); }
/* The homepage uses navy links: put class="pc-home" on its <body>.
   :where() keeps this at element specificity so component classes still win. */
:where(.pc-home) a { color: var(--pc-navy); }

[hidden]:not([hidden="until-found"]) { display: none !important; }

/* Anchored sections clear the 64px sticky header. */
section[id], [data-anchor] { scroll-margin-top: 80px; }

/* ------------------------------------------------- 3. Accessibility helpers */
.pc-skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 200;
  padding: 10px 16px;
  border-radius: 9px;
  background: var(--pc-navy);
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: top .14s var(--pc-ease-press);
}
.pc-skip:focus, .pc-skip:focus-visible { top: 10px; color: #FFFFFF; }
.pc-skip:hover { color: #FFFFFF; }

.pc-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

:focus-visible { outline: 2px solid var(--pc-blue); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }
/* On navy surfaces the ring is white so it stays visible. */
.pc-ftr :focus-visible,
.pc-on-dark :focus-visible { outline-color: #FFFFFF; }
main:focus { outline: none; }

/* ------------------------------------------------ 4. Layout and section rhythm */
.pc-wrap {
  max-width: var(--pc-content);
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
}
/* Standard section: 1080px column, section spacing above. */
.pc-section {
  max-width: var(--pc-content);
  margin: 0 auto;
  padding: var(--pc-section) 24px 0;
  box-sizing: border-box;
}
.pc-section--hero { padding-top: clamp(48px, 6vw, 72px); }
.pc-center { text-align: center; }
/* Spacer above the footer: 64-96px (homepage, Cookie policy) or 96-152px (About, Contact, Terms, Privacy). */
.pc-spacer { height: var(--pc-section); }
.pc-spacer--lg { height: clamp(96px, 12vw, 152px); }
/* Heading/intro -> content gap. */
.pc-gap-32 { margin-top: 32px; }
/* Fluid card grids collapse to one column. */
.pc-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--pc-min, 300px)), 1fr)); }

/* ------------------------------------------------------- 5. Typography scale */
.pc-h1 {
  margin: 0;
  font-size: clamp(40px, 5.4vw, 68px);
  line-height: 1.03;
  letter-spacing: -0.045em;
  font-weight: 700;
  text-wrap: balance;
}
.pc-h2 {
  margin: 0;
  max-width: 14ch;
  font-size: clamp(32px, 4.2vw, 48px);
  line-height: 1.04;
  letter-spacing: -0.04em;
  font-weight: 700;
  text-wrap: balance;
}
.pc-h2--sm {
  max-width: none;
  font-size: clamp(26px, 3vw, 34px);
  line-height: 1.1;
  letter-spacing: -0.03em;
}
.pc-h2--cta {
  max-width: 14ch;
  font-size: clamp(34px, 4.6vw, 56px);
  line-height: 1.02;
  letter-spacing: -0.045em;
}
.pc-h3 {
  margin: 0;
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: -0.015em;
  font-weight: 600;
}
.pc-intro {
  margin: 14px 0 0;
  max-width: 40ch;
  font-size: 17px;
  line-height: 1.6;
  color: var(--pc-muted);
  text-wrap: pretty;
}
.pc-body {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--pc-muted);
  text-wrap: pretty;
}
.pc-small { font-size: 14px; line-height: 1.5; }
.pc-muted { color: var(--pc-muted); }
.pc-mono { font-family: var(--pc-mono); }
.pc-num { font-variant-numeric: tabular-nums; }
.pc-balance { text-wrap: balance; }
.pc-pretty { text-wrap: pretty; }
.pc-strong { color: var(--pc-navy); font-weight: 600; }

/* --------------------------------------------- 6. Buttons and press feedback */
/* Generic press feedback for any link or button. */
.pc-press { transition: var(--pc-transition); }
.pc-press:active { transform: scale(.96); }
.pc-press--fade:active { opacity: .75; }
.pc-press--soft:active { transform: scale(.985); opacity: .7; }

.pc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 20px;
  box-sizing: border-box;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--pc-navy);
  font: inherit;
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: var(--pc-transition);
}
.pc-btn:active { transform: scale(.96); }

/* Primary blue. Hover fades to .9 (homepage, Cookie policy). */
.pc-btn--primary, .pc-btn--primary:hover { background: var(--pc-blue); color: #FFFFFF; }
.pc-btn--primary:hover { opacity: .9; }
.pc-btn--primary:active { filter: brightness(.88); }
/* Primary blue that brightens on hover instead (footer, About, Contact). */
.pc-btn--bright:hover { opacity: 1; background: var(--pc-blue-hover); }

/* Outline on white (About "Contact us", Contact "Send another message"). */
.pc-btn--outline { border: 1px solid #D3DBEA; background: #FFFFFF; color: var(--pc-navy); }
.pc-btn--outline:hover { border-color: var(--pc-navy); color: var(--pc-navy); }

/* Outline on navy (footer "Log in"). */
.pc-btn--outline-dark { border: 1px solid rgba(255, 255, 255, .22); color: #FFFFFF; }
.pc-btn--outline-dark:hover { border-color: #FFFFFF; color: #FFFFFF; }
.pc-btn--outline-dark:active { opacity: .75; }

/* White pill on the navy CTA panel (Guides, Article). */
.pc-btn--pill-white { height: 54px; padding: 0 28px; border-radius: 999px; background: #FFFFFF; color: var(--pc-navy); font-size: 16px; }
.pc-btn--pill-white:hover { background: var(--pc-blue-press); color: #FFFFFF; }

/* Outline pill ("All guides"). */
.pc-btn--pill { height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--pc-border-5); background: #FFFFFF; color: var(--pc-navy); font-size: 15px; }
.pc-btn--pill:hover { border-color: var(--pc-navy); color: var(--pc-navy); }

/* Sizes. Default is 44px / 0 20px / 15.5px (hero CTA). */
.pc-btn--46 { height: 46px; }
.pc-btn--48 { height: 48px; padding: 0 22px; }
.pc-btn--42 { height: 42px; padding: 0 18px; font-size: 15px; }
.pc-btn--38 { height: 38px; padding: 0 15px; border-radius: 8px; font-size: 14.5px; }
.pc-btn--34 { height: 34px; padding: 0 14px; border-radius: 8px; font-size: 14px; }
.pc-btn--32 { height: 32px; padding: 0 12px; gap: 6px; border-radius: 7px; font-size: 13.5px; }

/* ----------------------------------------------------------------- 7. Header */
.pc-hdr {
  position: sticky;
  top: 0;
  z-index: 40;
  font-family: var(--pc-font);
  color: var(--pc-navy);
}
.pc-hdr__bar {
  max-width: 1280px;
  margin: 0 auto;
  height: 64px;
  box-sizing: border-box;
}
.pc-hdr__logo { display: flex; align-items: center; flex: none; }
.pc-hdr__logo img { display: block; width: auto; }
.pc-hdr__link {
  color: var(--pc-navy);
  font-size: 14.5px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: var(--pc-transition);
}
.pc-hdr__link:active { transform: scale(.96); }
.pc-hdr__actions { display: flex; align-items: center; flex: none; }
.pc-hdr__signup {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  color: #FFFFFF;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: var(--pc-transition);
}
.pc-hdr__signup:hover { color: #FFFFFF; }
.pc-hdr__signup:active { transform: scale(.96); filter: brightness(.88); }
.pc-hdr__toggle {
  display: none;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--pc-navy);
  cursor: pointer;
  transition: var(--pc-transition);
}
.pc-hdr__toggle svg { display: block; }
.pc-hdr__toggle:active { transform: scale(.96); opacity: .75; }
.pc-hdr__menu {
  display: flex;
  flex-direction: column;
  padding: 8px;
  box-sizing: border-box;
}
.pc-hdr__menu a {
  padding: 13px 14px;
  color: var(--pc-navy);
  font-weight: 500;
  text-decoration: none;
}
.pc-hdr__menu a:hover { color: var(--pc-navy); }

/* UK pill and flag */
.pc-uk {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 28px;
  padding: 0 9px;
  margin-right: 4px;
  box-sizing: border-box;
  border-radius: 999px;
  border: 1px solid var(--pc-border-4);
  font-size: 13px;
  font-weight: 600;
  color: var(--pc-navy);
  white-space: nowrap;
}
.pc-flag { display: inline-flex; flex: none; border-radius: 2px; overflow: hidden; }
.pc-flag svg { display: block; }
.pc-flag--ring { box-shadow: 0 0 0 1px rgba(11, 27, 63, .14); }

/* 7a. Page variant (SiteHeader2): white bar, pill links, navy Sign up. Wide from 900px. */
.pc-hdr--page {
  background: #FFFFFF;
  border-bottom: 1px solid var(--pc-border-5);
  padding: 0 12px;
}
.pc-hdr--page .pc-hdr__bar { display: flex; align-items: center; gap: 20px; padding: 0 8px; }
.pc-hdr--page .pc-hdr__logo img { height: 22px; }
.pc-hdr--page .pc-hdr__nav { flex: 1; display: flex; justify-content: center; gap: 2px; min-width: 0; }
.pc-hdr--page .pc-hdr__link { padding: 8px 12px; border-radius: 999px; background: transparent; }
.pc-hdr--page .pc-hdr__link:hover,
.pc-hdr--page .pc-hdr__link[aria-current="page"],
.pc-hdr--page .pc-hdr__link[aria-current="true"] { background: #F5F7FB; color: var(--pc-navy); }
.pc-hdr--page .pc-hdr__actions { gap: 6px; }
.pc-hdr--page .pc-hdr__login { padding: 9px 14px; }
.pc-hdr--page .pc-hdr__signup { height: 40px; padding: 0 18px; border-radius: 999px; background: var(--pc-navy); font-size: 14.5px; }
.pc-hdr--page .pc-hdr__signup:hover { background: var(--pc-blue-press); }
.pc-hdr--page .pc-hdr__toggle { border-radius: 999px; }
.pc-hdr--page .pc-hdr__i-close { display: none; }
.pc-hdr--page .pc-hdr__toggle[aria-expanded="true"] .pc-hdr__i-open { display: none; }
.pc-hdr--page .pc-hdr__toggle[aria-expanded="true"] .pc-hdr__i-close { display: inline; }
.pc-hdr--page .pc-hdr__menu {
  max-width: 1280px;
  margin: 8px auto 12px;
  background: #FFFFFF;
  border: 1px solid var(--pc-border-5);
  border-radius: 20px;
}
.pc-hdr--page .pc-hdr__menu a { border-radius: 12px; }
@media (max-width: 899.98px) {
  .pc-hdr--page .pc-hdr__nav,
  .pc-hdr--page .pc-hdr__login { display: none; }
  .pc-hdr--page .pc-hdr__actions { margin-left: auto; }
  .pc-hdr--page .pc-hdr__signup { height: 38px; padding: 0 16px; font-size: 14px; }
  .pc-hdr--page .pc-hdr__toggle { display: grid; }
}
@media (min-width: 900px) {
  .pc-hdr--page .pc-hdr__menu { display: none !important; }
}

/* 7b. Homepage variant: translucent blurred bar, 3-column grid, UK pill. Wide from 1060px
   (the prototype's breakpoint; at 924px the design screenshots show the collapsed layout). */
.pc-hdr--home {
  background: rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--pc-border-3);
}
.pc-hdr--home .pc-hdr__bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding: 0 20px;
}
.pc-hdr--home .pc-hdr__logo { justify-self: start; }
.pc-hdr--home .pc-hdr__logo img { height: clamp(17px, 4.8vw, 21px); }
.pc-hdr--home .pc-hdr__nav { display: flex; align-items: center; gap: 2px; }
.pc-hdr--home .pc-hdr__link { padding: 7px 11px; border-radius: 7px; color: var(--pc-nav-ink); }
.pc-hdr--home .pc-hdr__link:hover,
.pc-hdr--home .pc-hdr__link[aria-current="page"],
.pc-hdr--home .pc-hdr__link[aria-current="true"] { background: var(--pc-hover); color: var(--pc-navy); }
.pc-hdr--home .pc-hdr__link:active { background: #E6EBF3; }
.pc-hdr--home .pc-hdr__actions { justify-self: end; gap: 4px; }
.pc-hdr--home .pc-hdr__signup { margin-left: 4px; height: 34px; padding: 0 14px; border-radius: 8px; background: var(--pc-blue); font-size: 14px; }
.pc-hdr--home .pc-hdr__signup:hover { opacity: .9; }
.pc-hdr--home .pc-hdr__toggle { border-radius: 9px; }
.pc-hdr--home .pc-hdr__menu {
  margin: 0 12px 12px;
  background: #F6F8FB;
  border: 1px solid var(--pc-border-3);
  border-radius: 14px;
}
.pc-hdr--home .pc-hdr__menu a { border-radius: 9px; }
.pc-hdr__menu-uk {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 14px;
  font-size: 14px;
  font-weight: 500;
  color: var(--pc-muted);
}
@media (max-width: 1059.98px) {
  .pc-hdr--home .pc-hdr__nav,
  .pc-hdr--home .pc-hdr__login,
  .pc-hdr--home .pc-uk__txt { display: none; }
  .pc-hdr--home .pc-hdr__actions { grid-column: 2 / 4; gap: 6px; }
  .pc-hdr--home .pc-uk { gap: 0; padding: 0 8px; margin-right: 0; }
  .pc-hdr--home .pc-hdr__signup { margin-left: 0; height: 36px; }
  .pc-hdr--home .pc-hdr__toggle { display: grid; }
}
@media (max-width: 519.98px) {
  .pc-hdr--home .pc-uk { display: none; }
}
@media (min-width: 1060px) {
  .pc-hdr--home .pc-hdr__menu { display: none !important; }
}

/* ----------------------------------------------------------------- 8. Footer */
.pc-ftr {
  background: var(--pc-footer-navy);
  color: #FFFFFF;
  font-family: var(--pc-font);
  overflow: hidden;
}
.pc-ftr__in {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(56px, 7vw, 88px) 24px clamp(40px, 5vw, 56px);
  box-sizing: border-box;
}
.pc-ftr__top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 48px 64px;
  padding-bottom: clamp(44px, 6vw, 64px);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.pc-ftr__brand { flex: 1 1 280px; max-width: 360px; }
/* pc-logo-duo-white.png: white wordmark, two-tone mark (white + --pc-mark-b-dark) for navy. */
.pc-ftr__logo { display: block; width: auto; height: 24px; }
.pc-ftr__tag { margin: 18px 0 0; font-size: 16px; line-height: 1.55; color: var(--pc-ft-text); text-wrap: pretty; }
.pc-ftr__ctas { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 8px; }
.pc-ftr__cta {
  display: inline-flex;
  align-items: center;
  height: 42px;
  padding: 0 18px;
  box-sizing: border-box;
  border-radius: 9px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: var(--pc-transition);
}
.pc-ftr__cta--primary, .pc-ftr__cta--primary:hover { background: var(--pc-blue); color: #FFFFFF; }
.pc-ftr__cta--primary:hover { background: var(--pc-blue-hover); }
.pc-ftr__cta--primary:active { transform: scale(.96); filter: brightness(.88); }
.pc-ftr__cta--outline { padding: 0 16px; border: 1px solid rgba(255, 255, 255, .22); color: #FFFFFF; }
.pc-ftr__cta--outline:hover { border-color: #FFFFFF; color: #FFFFFF; }
.pc-ftr__cta--outline:active { transform: scale(.96); opacity: .75; }
.pc-ftr__cols {
  flex: 2 1 480px;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 36px 32px;
}
.pc-ftr__col { display: flex; flex-direction: column; gap: 11px; }
.pc-ftr__h { margin: 0 0 6px; font-size: 14px; line-height: 1.5; font-weight: 600; color: #FFFFFF; }
.pc-ftr__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 11px; }
.pc-ftr__list li { display: flex; }
.pc-ftr__a {
  display: inline-block;
  padding: 0;
  border: 0;
  background: none;
  color: var(--pc-ft-text);
  font: inherit;
  font-size: 14.5px;
  line-height: 1.5;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: var(--pc-transition);
}
.pc-ftr__a:hover { color: #FFFFFF; }
.pc-ftr__a:active { transform: scale(.96); opacity: .75; }
.pc-ftr__mid {
  padding: 28px 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 32px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.pc-ftr__fca {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #FFFFFF;
  text-decoration: none;
  transition: var(--pc-transition);
}
.pc-ftr__fca:hover { opacity: .85; color: #FFFFFF; }
.pc-ftr__fca:active { transform: scale(.96); opacity: .75; }
.pc-fca-badge {
  flex: none;
  width: 38px;
  height: 38px;
  box-sizing: border-box;
  border-radius: 10px;
  background: #13205C;
  border: 1.5px solid rgba(110, 160, 255, .55);
  display: grid;
  place-items: center;
  color: #FFFFFF;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.pc-ftr__fca-text { display: flex; flex-direction: column; gap: 1px; }
.pc-ftr__fca-title { font-size: 14.5px; font-weight: 600; }
.pc-ftr__fca-sub { font-size: 13px; color: var(--pc-ft-muted); }
.pc-ftr__uk {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 12px;
  box-sizing: border-box;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .2);
  font-size: 13.5px;
  font-weight: 600;
}
.pc-ftr__legal {
  padding: 24px 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 40px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--pc-ft-muted);
}
.pc-ftr__legal p { margin: 0; }
.pc-ftr__legal-text { max-width: 72ch; }
.pc-ftr__mail, .pc-ftr__mail:hover { color: #FFFFFF; font-weight: 600; text-decoration: none; }
.pc-ftr__mail:hover { text-decoration: underline; text-underline-offset: 2px; }

/* ------------------------------------------------- 9. Cookie consent dialog */
/*
  Markup: site/partials/cookie.html. Behaviour: site.js "cookie consent".
  From 768px a centred card over a navy-tinted backdrop; below 768px a bottom sheet with the
  same content. The overlay is fixed, so opening it never shifts the page. While it is open
  <html> gets .pc-cookie-lock (scroll locked) and, when the page had a classic scrollbar,
  .pc-cookie-lock--gutter (keeps the gutter so nothing moves sideways).
  .is-open on [data-pc-cookie] runs the fade/rise; section 12 makes it instant under reduced
  motion. "Reject all" and "Accept all" share .pc-cookie__btn on purpose: refusing must be as
  easy and as prominent as accepting (UK ICO). Do not give either its own styling.
*/
html.pc-cookie-lock { overflow: hidden; }
html.pc-cookie-lock--gutter { scrollbar-gutter: stable; }

.pc-cookie {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
  font-family: var(--pc-font);
  color: var(--pc-navy);
  -webkit-tap-highlight-color: transparent;
}
.pc-cookie__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11, 27, 63, .44);
  opacity: 0;
  transition: opacity .24s ease;
}
.pc-cookie__dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 520px;
  max-height: 100%;
  box-sizing: border-box;
  border-radius: 20px;
  background: #FFFFFF;
  box-shadow:
    0 0 0 1px rgba(11, 27, 63, .06),
    0 32px 72px -20px rgba(11, 27, 63, .5),
    0 10px 24px -12px rgba(11, 27, 63, .22);
  opacity: 0;
  transform: translateY(16px) scale(.985);
  transition: opacity .2s ease, transform .24s ease;
}
.pc-cookie__dialog:focus,
.pc-cookie__dialog:focus-visible { outline: none; }
.pc-cookie.is-open .pc-cookie__backdrop { opacity: 1; transition-duration: .32s; }
.pc-cookie.is-open .pc-cookie__dialog {
  opacity: 1;
  transform: none;
  transition: opacity .3s ease, transform .5s var(--pc-ease-press);
}

/* Scrolls on its own when the card is taller than the screen; the buttons stay in view. */
.pc-cookie__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 28px 28px 4px;
}
.pc-cookie__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--pc-pale-2);
  box-shadow: inset 0 0 0 1px rgba(36, 92, 255, .12);
}
.pc-cookie__mark img { display: block; width: 24px; height: 24px; }
.pc-cookie__title {
  margin: 18px 0 0;
  font-size: 22px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--pc-navy);
}
.pc-cookie__text {
  margin: 8px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--pc-muted);
}
.pc-cookie__text a {
  color: var(--pc-blue-press);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  white-space: nowrap;
}
.pc-cookie__text a:hover { color: var(--pc-navy); }

/* "Manage choices": the three categories. */
.pc-cookie__cats {
  margin: 20px 0 0;
  border: 1px solid var(--pc-border);
  border-radius: 14px;
}
.pc-cookie__cat {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
}
.pc-cookie__cat + .pc-cookie__cat { border-top: 1px solid var(--pc-border); }
.pc-cookie__cat[data-pc-cookie-row] { cursor: pointer; }
.pc-cookie__cat-text { flex: 1 1 auto; min-width: 0; }
.pc-cookie__cat-name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 8px;
  font-size: 15px;
  line-height: 1.4;
  font-weight: 600;
  color: var(--pc-navy);
}
.pc-cookie__cat-desc { display: block; margin-top: 2px; font-size: 13.5px; line-height: 1.5; color: var(--pc-muted); }
.pc-cookie__tag {
  padding: 0 8px;
  border-radius: 999px;
  background: var(--pc-chip);
  color: var(--pc-chip-ink);
  font-size: 11.5px;
  line-height: 20px;
  font-weight: 600;
  white-space: nowrap;
}

/* Switch (role="switch" button). Off: grey outline + grey knob (3.7:1 on white); on: blue. */
.pc-switch {
  flex: none;
  display: inline-flex;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: none;
  cursor: pointer;
}
.pc-switch:disabled { cursor: default; opacity: .5; }
.pc-switch__track {
  position: relative;
  display: block;
  width: 44px;
  height: 26px;
  box-sizing: border-box;
  border-radius: 999px;
  background: #F3F5F9;
  box-shadow: inset 0 0 0 1.5px var(--pc-placeholder);
  transition: background-color .2s ease, box-shadow .2s ease;
}
.pc-switch__knob {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--pc-placeholder);
  transition: transform .22s var(--pc-ease-press), background-color .2s ease;
}
.pc-switch[aria-checked="true"] .pc-switch__track { background: var(--pc-blue); box-shadow: none; }
.pc-switch[aria-checked="true"] .pc-switch__knob { background: #FFFFFF; transform: translateX(18px); box-shadow: 0 1px 3px rgba(11, 27, 63, .25); }
.pc-switch:not(:disabled):hover .pc-switch__track { box-shadow: inset 0 0 0 1.5px var(--pc-nav-ink); }
.pc-switch[aria-checked="true"]:not(:disabled):hover .pc-switch__track { background: var(--pc-blue-press); box-shadow: none; }

/* Buttons. The pair is identical by design; "Manage choices" is the low-emphasis third. */
.pc-cookie__actions { flex: none; padding: 20px 28px 22px; }
.pc-cookie__dialog.has-overflow .pc-cookie__actions { box-shadow: 0 -1px 0 var(--pc-border); }
.pc-cookie__pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.pc-cookie__btn,
.pc-cookie__save {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 48px;
  padding: 0 16px;
  box-sizing: border-box;
  border: 0;
  border-radius: 12px;
  font: inherit;
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: var(--pc-transition), box-shadow .2s ease;
}
.pc-cookie__btn { background: var(--pc-navy); color: #FFFFFF; }
.pc-cookie__btn:hover { background: #1A2D5C; }
.pc-cookie__save {
  margin-top: 10px;
  background: #FFFFFF;
  color: var(--pc-navy);
  box-shadow: inset 0 0 0 1.5px #C9D2E3;
}
.pc-cookie__save:hover { box-shadow: inset 0 0 0 1.5px var(--pc-navy); }
.pc-cookie__btn:active,
.pc-cookie__save:active { transform: scale(.97); }
.pc-cookie__more {
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  height: 40px;
  margin: 8px auto 0;
  padding: 0 12px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--pc-blue-press);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}
.pc-cookie__more:hover { color: var(--pc-navy); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* Short landscape screens: keep the buttons and the title in view. */
@media (min-width: 768px) and (max-height: 560px) {
  .pc-cookie { padding: 12px; }
  .pc-cookie__body { padding-top: 22px; }
  .pc-cookie__mark { display: none; }
  .pc-cookie__title { margin-top: 0; }
}

/* Phones and small tablets: bottom sheet. */
@media (max-width: 767.98px) {
  .pc-cookie { align-items: flex-end; padding: 12px 0 0; }
  .pc-cookie__dialog {
    max-width: none;
    border-radius: 22px 22px 0 0;
    box-shadow: 0 0 0 1px rgba(11, 27, 63, .06), 0 -16px 48px -16px rgba(11, 27, 63, .45);
    opacity: 1;
    transform: translateY(100%);
    transition: transform .26s cubic-bezier(.4, 0, 1, 1);
  }
  .pc-cookie.is-open .pc-cookie__dialog { transform: none; transition: transform .5s var(--pc-ease-press); }
  .pc-cookie__body { padding: 24px 20px 4px; }
  .pc-cookie__mark { width: 40px; height: 40px; border-radius: 11px; }
  .pc-cookie__title { margin-top: 14px; font-size: 20px; }
  .pc-cookie__text { font-size: 14.5px; }
  .pc-cookie__actions { padding: 16px 20px max(16px, env(safe-area-inset-bottom)); }
}

@media print {
  html.pc-cookie-lock { overflow: visible; }
  .pc-cookie { display: none !important; }
}

/* ---------------------------------------------- 10. Shared content components */

/* Mono eyebrow ("About us", "Contact", "Legal"). */
.pc-eyebrow {
  font-family: var(--pc-mono);
  font-size: 12.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pc-blue-press);
}

/* Guide cards (Guides index, Article "More guides"). */
.pc-gcards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 12px;
}
.pc-gcard {
  display: flex;
  flex-direction: column;
  min-height: 260px;
  padding: 28px;
  box-sizing: border-box;
  border-radius: 26px;
  background: #FFFFFF;
  border: 1px solid var(--pc-border-5);
  color: var(--pc-navy);
  text-decoration: none;
  transition: border-color .2s ease, transform .14s var(--pc-ease-press);
}
.pc-gcard:hover { border-color: var(--pc-navy); color: var(--pc-navy); }
.pc-gcard:active { transform: scale(.99); }
.pc-gcard__n { font-family: var(--pc-mono); font-size: 12.5px; color: var(--pc-muted); }
.pc-gcard__title {
  margin: auto 0 0;
  padding-top: 36px;
  font-size: 24px;
  line-height: 1.12;
  letter-spacing: -0.025em;
  font-weight: 600;
  text-wrap: balance;
}
.pc-gcard__desc { margin: 10px 0 0; font-size: 15.5px; line-height: 1.55; color: var(--pc-muted); }
.pc-gcard__more { margin-top: 20px; display: inline-flex; gap: 8px; font-size: 15px; font-weight: 600; color: var(--pc-blue-press); }
/* Compact card used under articles. */
.pc-gcard--sm { min-height: 240px; }
.pc-gcard--sm .pc-gcard__title { padding-top: 32px; font-size: 23px; }

/* Navy CTA panel (Guides index; Article uses the --article modifier). */
.pc-cta {
  padding: clamp(80px, 11vw, 144px) 12px 0;
}
.pc-cta__box {
  max-width: 1256px;
  margin: 0 auto;
  padding: clamp(56px, 9vw, 120px) 24px;
  box-sizing: border-box;
  border-radius: 34px;
  background: var(--pc-navy);
  color: #FFFFFF;
  text-align: center;
}
.pc-cta__title {
  margin: 0 auto;
  max-width: 14ch;
  font-size: clamp(38px, 6.4vw, 86px);
  line-height: 0.98;
  letter-spacing: -0.05em;
  font-weight: 600;
  text-wrap: balance;
}
.pc-cta__text { margin: 24px auto 0; max-width: 520px; font-size: 18px; line-height: 1.55; color: #B9C0BE; text-wrap: pretty; }
.pc-cta__btn { margin-top: 36px; }
.pc-cta--article { padding-top: clamp(72px, 9vw, 120px); }
.pc-cta--article .pc-cta__box { padding: clamp(56px, 8vw, 104px) 24px; }
.pc-cta--article .pc-cta__title { max-width: 16ch; font-size: clamp(34px, 5.4vw, 72px); }
.pc-cta--article .pc-cta__text { margin-top: 22px; }
.pc-cta--article .pc-cta__btn { margin-top: 34px; }

/* Article template (Article v2): guides and complaints. */
.pc-article { max-width: 1200px; margin: 0 auto; padding: clamp(48px, 8vw, 104px) 20px 0; }
.pc-article__head { max-width: 820px; margin: 0 auto; }
.pc-article__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--pc-mono);
  font-size: 12.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pc-muted);
}
.pc-article__back::before { content: ""; width: 6px; height: 6px; border-radius: 2px; background: var(--pc-blue-press); }
.pc-article__back:hover { color: var(--pc-navy); }
.pc-article__title {
  margin: 20px 0 0;
  font-size: clamp(38px, 6vw, 72px);
  line-height: 1;
  letter-spacing: -0.045em;
  font-weight: 600;
  text-wrap: balance;
}
.pc-article__meta { margin-top: 22px; font-family: var(--pc-mono); font-size: 13px; color: var(--pc-muted); }

/* Article body. Children: p, p.pc-lede, h2, h3, p.pc-note, ul, ol, .pc-table. */
.pc-prose {
  max-width: 720px;
  margin: clamp(36px, 5vw, 56px) auto 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
  font-size: 17.5px;
  line-height: 1.7;
  color: #2E3533;
}
.pc-prose > p { margin: 0; text-wrap: pretty; }
.pc-prose > .pc-lede { font-size: clamp(19px, 1.9vw, 22px); line-height: 1.55; color: var(--pc-navy); }
.pc-prose > h2 {
  margin: 28px 0 0;
  font-size: clamp(26px, 3vw, 34px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: 600;
  color: var(--pc-navy);
  text-wrap: balance;
}
.pc-prose > h3 { margin: 12px 0 0; font-size: 20px; line-height: 1.3; letter-spacing: -0.015em; font-weight: 600; color: var(--pc-navy); }
.pc-prose > .pc-note { font-size: 14px; line-height: 1.6; color: var(--pc-muted); }
.pc-prose strong { font-weight: 600; color: var(--pc-navy); }
.pc-prose a { color: var(--pc-blue-press); text-decoration: underline; text-decoration-color: rgba(30, 79, 216, .35); text-underline-offset: 3px; }
.pc-prose a:hover { color: var(--pc-navy); text-decoration-color: currentColor; }
.pc-prose > ul, .pc-prose > ol { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.pc-prose > ul > li, .pc-prose > ol > li { position: relative; padding-left: 28px; text-wrap: pretty; }
.pc-prose > ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: var(--pc-blue-press);
}
.pc-prose > ol { counter-reset: pc-ol; }
.pc-prose > ol > li { counter-increment: pc-ol; }
.pc-prose > ol > li::before {
  content: counter(pc-ol);
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--pc-mono);
  font-size: 13px;
  line-height: 29.75px;
  color: var(--pc-blue-press);
}

/* Data table (Article v2). Markup: div.pc-table > table[role=table] with
   rows as CSS grid; set the column template with style="--cols: ...". */
.pc-table {
  margin: 8px 0;
  border: 1px solid var(--pc-border-5);
  border-radius: 20px;
  background: #FFFFFF;
  overflow-x: auto;
}
.pc-table table, .pc-table thead, .pc-table tbody { display: block; }
.pc-table table { min-width: 560px; border-collapse: separate; border-spacing: 0; }
.pc-table tr {
  display: grid;
  grid-template-columns: var(--cols, repeat(3, minmax(0, 1fr)));
  gap: 16px;
  align-items: start;
  padding: 16px 20px;
  font-size: 15.5px;
  line-height: 1.5;
}
.pc-table th, .pc-table td { display: block; min-width: 0; padding: 0; text-align: left; font-variant-numeric: tabular-nums; }
.pc-table thead tr {
  align-items: stretch;
  padding: 14px 20px;
  border-bottom: 1px solid var(--pc-border-5);
  font-family: var(--pc-mono);
  font-size: 12px;
  line-height: 1.7;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pc-muted);
}
.pc-table thead th { font-weight: 400; }
.pc-table tbody td { font-weight: 400; color: #3E4643; }
.pc-table tbody td:first-child { font-weight: 600; color: var(--pc-navy); }
.pc-table tbody tr + tr { border-top: 1px solid #EEF0EE; }
/* Highlighted "Protection Connect" row. */
.pc-table tbody tr.is-us,
.pc-table tbody tr.is-us + tr { border-top: 0; }
.pc-table tbody tr.is-us { background: #EEF3FF; box-shadow: inset 0 0 0 2px var(--pc-blue); border-radius: 12px; }
.pc-table tbody tr.is-us td { font-weight: 600; color: var(--pc-navy); }
.pc-table tbody tr.is-us td:first-child { font-weight: 700; }
.pc-table tbody tr.is-us td.is-price { font-weight: 700; color: var(--pc-blue-press); }
.pc-table__tag {
  margin-top: 8px;
  display: flex;
  width: max-content;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 6px;
  border-radius: 999px;
  background: var(--pc-blue);
  color: #FFFFFF;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.2;
}
.pc-table__tag img { width: 14px; height: 14px; display: block; filter: brightness(0) invert(1); }

/* "More guides" header row under articles. */
.pc-related { max-width: 1200px; margin: 0 auto; padding: clamp(72px, 9vw, 120px) 20px 0; }
.pc-related__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; }
.pc-related__title { margin: 0; font-size: clamp(28px, 3.6vw, 44px); line-height: 1; letter-spacing: -0.04em; font-weight: 600; }
.pc-related .pc-gcards { margin-top: 32px; }

/* Legal template (Terms, Privacy, Cookie policy). */
.pc-legal { max-width: 760px; margin: 0 auto; padding: clamp(56px, 9vw, 104px) 24px 0; box-sizing: border-box; }
.pc-legal__title { margin: 16px 0 0; font-size: clamp(38px, 5.4vw, 60px); line-height: 1.02; letter-spacing: -0.045em; font-weight: 700; }
.pc-legal__updated { margin: 16px 0 0; font-family: var(--pc-mono); font-size: 13px; color: var(--pc-muted); }
.pc-legal__btn { margin-top: 28px; }
.pc-legal__sec { margin-top: 44px; }
.pc-legal__sec h2 { margin: 0; font-size: 22px; line-height: 1.25; letter-spacing: -0.02em; font-weight: 700; }
.pc-legal__sec h3 { margin: 20px 0 0; font-size: 17px; line-height: 1.35; letter-spacing: -0.01em; font-weight: 600; }
.pc-legal__sec p { margin: 12px 0 0; font-size: 16px; line-height: 1.7; color: var(--pc-nav-ink); text-wrap: pretty; }
.pc-legal__sec ul { margin: 12px 0 0; padding-left: 20px; font-size: 16px; line-height: 1.7; color: var(--pc-nav-ink); }
.pc-legal__sec li + li { margin-top: 6px; }
.pc-legal__sec a { text-decoration: underline; text-underline-offset: 2px; }

/* Cookie table (Cookie policy). */
.pc-ctable { margin-top: 18px; border: 1px solid var(--pc-border); border-radius: 12px; overflow: hidden; }
.pc-ctable table, .pc-ctable thead, .pc-ctable tbody { display: block; }
.pc-ctable table { border-collapse: separate; border-spacing: 0; }
.pc-ctable tr {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .8fr) minmax(0, 2fr) minmax(0, .9fr);
  gap: 12px;
  padding: 12px 16px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--pc-nav-ink);
}
.pc-ctable th, .pc-ctable td { display: block; min-width: 0; padding: 0; text-align: left; font-weight: 400; }
.pc-ctable thead tr { background: #F6F8FB; font-size: 13px; color: var(--pc-muted); }
.pc-ctable thead th { font-weight: 600; }
.pc-ctable tbody tr { border-top: 1px solid var(--pc-border); }
.pc-ctable tbody td:first-child { font-family: var(--pc-mono); font-size: 12.5px; color: var(--pc-navy); overflow-wrap: anywhere; }

/* --------------------------------------------------------------- 11. Keyframes */
@keyframes pcPing { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(2.8); opacity: 0; } }
@keyframes pcCaret { 50% { opacity: 0; } }
@keyframes hoSlideRow { from { transform: translateY(-52px); } to { transform: none; } }
@keyframes hoFlash { from { background: #E6F6FF; } to { background: rgba(230, 246, 255, 0); } }
@keyframes pcHalfA { from { transform: translate(-18px, -18px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes pcHalfB { from { transform: translate(18px, 18px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes pcSnap { 0% { transform: scale(1); } 45% { transform: scale(1.1); } 100% { transform: scale(1); } }
@keyframes pcRise { from { opacity: 0; transform: translateY(10px); } }
@keyframes pcPop { from { opacity: 0; transform: scale(.94); } }
@keyframes pcDrop { from { opacity: 0; transform: translateY(-14px); } }
@keyframes pcDim { from { opacity: 1; } }
@keyframes pcFill { from { width: 0; } }
@keyframes pcKnob { from { left: 0; } }
@keyframes pcFlow { 0% { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: 100%; opacity: 0; } }

/* ----------------------------------------------------------- 12. Reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
}