/* ============================================================================
   THOMSEN — site styles (one file)
   ----------------------------------------------------------------------------
   Sections 1-13 are copied verbatim from the real thomssen.dev stylesheet
   (as provided) so this page can be dropped into the real site without
   touching its existing pages. Section 14 adds the Thomsen Shield product
   page components (protection panel, pricing card, FAQ accordion, form
   fields, custom dropdown) using the same token/BEM conventions as the
   rest of the file.

   To recolour the site, edit the variables in the ":root" blocks right
   below. Everything else reads from those, so a colour change flows
   everywhere.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. COLOURS  (dark theme = default, light theme overrides underneath)
   ------------------------------------------------------------------------- */
:root,
:root[data-theme='dark'] {
  color-scheme: dark;

  --bg: #050607;            /* page background — nearly pure black */
  --bg-alt: #08090b;        /* the slightly lighter "band" sections */
  --surface: #0d0f11;       /* cards */
  --surface-2: #131619;     /* hover / nested surfaces */
  --nav-bg: rgba(10, 12, 14, 0.66);

  --text: #f2f3f4;          /* headings */
  --text-secondary: #b4b9be;/* body text */
  --text-muted: #7c838a;    /* small print, labels */

  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);

  --btn-primary-bg: #f3f4f5;      /* white button in dark mode */
  --btn-primary-bg-hover: #ffffff;
  --btn-primary-text: #0a0b0c;

  --btn-secondary-bg: rgba(255, 255, 255, 0.05);
  --btn-secondary-bg-hover: rgba(255, 255, 255, 0.09);
  --btn-secondary-text: var(--text);

  --accent: #ffffff;                     /* focus ring, hero dot, selection */
  --accent-soft: rgba(255, 255, 255, 0.12);
  --glow: rgba(255, 255, 255, 0.06);     /* the faint light bloom */

  --good: #6f9e8f;
  --good-soft: rgba(111, 158, 143, 0.14);
  --bad: #e5595a;
  --bad-soft: rgba(229, 89, 90, 0.14);
  --warn: #d8b24c;
  --warn-soft: rgba(216, 178, 76, 0.14);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 2px 10px rgba(0, 0, 0, 0.35), 0 14px 44px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 60px rgba(0, 0, 0, 0.5);
}

:root[data-theme='light'] {
  color-scheme: light;

  --bg: #ffffff;
  --bg-alt: #f6f7f8;
  --surface: #ffffff;
  --surface-2: #f2f3f5;
  --nav-bg: rgba(255, 255, 255, 0.72);

  --text: #0b0c0e;
  --text-secondary: #40464d;
  --text-muted: #6a7077;

  --border: rgba(11, 12, 16, 0.1);
  --border-strong: rgba(11, 12, 16, 0.16);

  --btn-primary-bg: #0b0c0e;      /* black button in light mode */
  --btn-primary-bg-hover: #000000;
  --btn-primary-text: #ffffff;

  --btn-secondary-bg: rgba(11, 12, 16, 0.04);
  --btn-secondary-bg-hover: rgba(11, 12, 16, 0.08);
  --btn-secondary-text: var(--text);

  --accent: #0b0c0e;
  --accent-soft: rgba(11, 12, 16, 0.07);
  --glow: rgba(11, 12, 16, 0.035);

  --good: #4f8a77;
  --good-soft: rgba(79, 138, 119, 0.1);
  --bad: #c73f40;
  --bad-soft: rgba(199, 63, 64, 0.1);
  --warn: #a97a1f;
  --warn-soft: rgba(169, 122, 31, 0.1);

  --shadow-sm: 0 1px 2px rgba(12, 14, 20, 0.05);
  --shadow-md: 0 2px 10px rgba(12, 14, 20, 0.05), 0 16px 44px rgba(12, 14, 20, 0.08);
  --shadow-lg: 0 14px 54px rgba(12, 14, 20, 0.12);
}

/* Sizes / spacing / motion — shared by both themes */
:root {
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --maxw: 1120px;
  --gutter: clamp(20px, 5vw, 44px);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 240ms;

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    Helvetica, Arial, sans-serif;
}

/* ---------------------------------------------------------------------------
   2. RESET + BASICS
   ------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px; /* so in-page anchors clear the sticky navbar */
}

body {
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.65;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

img, svg, video, canvas { display: block; max-width: 100%; }
button { border: 0; background: none; padding: 0; cursor: pointer; font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  color: var(--text);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
p { text-wrap: pretty; }
ul { list-style: none; padding: 0; }

::selection { background: var(--accent-soft); color: var(--text); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

[hidden] { display: none !important; }

/* ---------------------------------------------------------------------------
   3. LAYOUT HELPERS
   ------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: clamp(56px, 11vw, 120px); }

.band {
  background: var(--bg-alt);
  border-block: 1px solid var(--border);
}

.section-head { max-width: 640px; margin-bottom: clamp(32px, 5vw, 56px); }
.section-head h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); }
.section-head p { margin-top: 14px; font-size: 1rem; color: var(--text-muted); }
.section-head--center { margin-inline: auto; text-align: center; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 18px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.eyebrow::before {
  content: '';
  width: 18px;
  height: 1px;
  background: var(--border-strong);
}

.skip-link {
  position: fixed;
  top: -60px;
  left: 16px;
  z-index: 1000;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  color: var(--text);
  transition: top var(--dur) var(--ease);
}
.skip-link:focus-visible { top: 16px; }

/* gentle fade for each page load */
.page { animation: page-in 0.45s var(--ease) both; }
@keyframes page-in { from { opacity: 0; } to { opacity: 1; } }

/* smooth cross-fade only while the theme is switching */
.theme-transition,
.theme-transition *,
.theme-transition *::before,
.theme-transition *::after {
  transition:
    background-color 300ms var(--ease),
    border-color 300ms var(--ease),
    color 300ms var(--ease),
    fill 300ms var(--ease),
    box-shadow 300ms var(--ease) !important;
  transition-delay: 0s !important;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------------------------------------------------------------------------
   4. BUTTONS
   ------------------------------------------------------------------------- */
.btn {
  --btn-h: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--btn-h);
  padding-inline: 20px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition:
    background-color 160ms var(--ease),
    border-color 160ms var(--ease),
    color 160ms var(--ease);
}
.btn:active { transform: scale(0.99); }

.btn--sm { --btn-h: 36px; padding-inline: 15px; font-size: 0.85rem; }
.btn--lg { --btn-h: 48px; padding-inline: 24px; font-size: 0.96rem; }
.btn--block { width: 100%; }

.btn--primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
}
.btn--primary:hover { background: var(--btn-primary-bg-hover); }

.btn--secondary {
  background: var(--btn-secondary-bg);
  color: var(--btn-secondary-text);
  border-color: var(--border);
}
.btn--secondary:hover {
  background: var(--btn-secondary-bg-hover);
  border-color: var(--border-strong);
}

.btn--ghost {
  background: transparent;
  color: var(--text-muted);
}
.btn--ghost:hover {
  color: var(--text);
  background: var(--btn-secondary-bg);
}

.btn--disabled,
.btn--disabled:hover {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ---------------------------------------------------------------------------
   5. NAVBAR
   ------------------------------------------------------------------------- */
.nav-wrap {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--nav-bg);
  border-bottom: 1px solid var(--border);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
}

.nav {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding: 14px var(--gutter);
}

.nav__brand { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; }
.nav__mark {
  display: block;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  flex-shrink: 0;
}
.nav__brand-text {
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
}

.nav__links { display: flex; align-items: center; gap: 2px; margin-inline: auto; }
.nav__link {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding-inline: 14px;
  border-radius: var(--radius-pill);
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 500;
  transition: color 150ms var(--ease), background-color 150ms var(--ease);
}
.nav__link:hover { color: var(--text); }
.nav__link.is-active { color: var(--text); background: var(--btn-secondary-bg); }

.nav__actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

.nav__burger {
  display: none;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--btn-secondary-bg);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.nav__burger span {
  display: block;
  width: 15px;
  height: 1.5px;
  background: var(--text);
  border-radius: 2px;
  transition: transform 220ms var(--ease), opacity 160ms var(--ease);
}
.nav-wrap.is-menu-open .nav__burger span:first-child { transform: translateY(3.25px) rotate(45deg); }
.nav-wrap.is-menu-open .nav__burger span:last-child { transform: translateY(-3.25px) rotate(-45deg); }

/* mobile drop panel */
.nav-panel {
  pointer-events: auto;
  position: absolute;
  z-index: 1;
  left: var(--gutter);
  right: var(--gutter);
  top: calc(100% + 8px);
  display: grid;
  gap: 6px;
  padding: 12px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--nav-bg);
  box-shadow: var(--shadow-lg);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  opacity: 0;
  transform: translateY(-8px) scale(0.98);
  transform-origin: top;
  visibility: hidden;
  transition: opacity 200ms var(--ease), transform 200ms var(--ease),
    visibility 0s linear 200ms;
}
.nav-wrap.is-menu-open .nav-panel {
  opacity: 1;
  transform: translateY(0) scale(1);
  visibility: visible;
  transition-delay: 0s;
}
.nav-panel__links { display: grid; }
.nav-panel__link {
  display: block;
  padding: 12px;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 1rem;
  font-weight: 500;
}
.nav-panel__link:hover,
.nav-panel__link.is-active { color: var(--text); background: var(--btn-secondary-bg); }
.nav-panel__cta { width: 100%; margin-top: 6px; }

.nav-scrim {
  pointer-events: auto;
  position: fixed;
  inset: 0;
  z-index: 0;
  display: none;
  background: transparent;
}
.nav-wrap.is-menu-open .nav-scrim { display: block; }

@media (max-width: 860px) {
  .nav__links,
  .nav__cta { display: none; }
  .nav__burger { display: flex; }
}
@media (min-width: 861px) {
  .nav-panel { display: none; }
}
@media (max-width: 400px) {
  .nav { gap: 10px; padding-left: 14px; }
}
@media (max-width: 330px) {
  .nav__brand-text { display: none; }
}

/* ---------------------------------------------------------------------------
   6. THEME TOGGLE
   ------------------------------------------------------------------------- */
.theme-toggle {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--btn-secondary-bg);
  color: var(--text-secondary);
  transition:
    background-color 160ms var(--ease),
    border-color 160ms var(--ease),
    color 160ms var(--ease),
    transform 160ms var(--ease);
}
.theme-toggle:hover {
  color: var(--text);
  border-color: var(--border-strong);
  background: var(--btn-secondary-bg-hover);
  transform: translateY(-1px);
}
.theme-toggle:active { transform: translateY(0) scale(0.96); }

.theme-toggle__icons { position: relative; width: 17px; height: 17px; }
.theme-toggle__icon {
  position: absolute;
  inset: 0;
  transition: opacity 260ms var(--ease), transform 360ms var(--ease);
}
.theme-toggle__icons[data-dark='true'] .theme-toggle__icon--moon { opacity: 1; transform: rotate(0) scale(1); }
.theme-toggle__icons[data-dark='true'] .theme-toggle__icon--sun { opacity: 0; transform: rotate(-90deg) scale(0.4); }
.theme-toggle__icons[data-dark='false'] .theme-toggle__icon--moon { opacity: 0; transform: rotate(90deg) scale(0.4); }
.theme-toggle__icons[data-dark='false'] .theme-toggle__icon--sun { opacity: 1; transform: rotate(0) scale(1); }

/* ---------------------------------------------------------------------------
   7. HERO
   ------------------------------------------------------------------------- */
.hero {
  position: relative;
  padding-block: clamp(64px, 11vw, 128px) clamp(52px, 10vw, 116px);
  overflow: hidden;
}
/* A faint network grid rather than a glowing gradient blob - reads as
   technical/security-product, not generic-SaaS, and stays out of the way. */
.hero__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 60% 55% at 50% 20%, #000 0%, transparent 72%);
  mask-image: radial-gradient(ellipse 60% 55% at 50% 20%, #000 0%, transparent 72%);
  pointer-events: none;
}
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 22px;
  padding: 6px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.hero__badge .dot { animation: pulse-dot 2.4s var(--ease) infinite; }
@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 0 var(--good-soft); }
  50% { box-shadow: 0 0 0 4px var(--good-soft); }
}
.hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.28fr 0.72fr;
  align-items: center;
  gap: clamp(28px, 5vw, 64px);
}
/* Centered, single-column variant — used when there's no hero visual */
.hero__inner--centered {
  grid-template-columns: 1fr;
  max-width: 680px;
  margin-inline: auto;
  text-align: center;
}
.hero__inner--centered .hero__copy { max-width: none; margin-inline: auto; }
.hero__inner--centered .hero__desc { margin-inline: auto; }
.hero__inner--centered .hero__actions { justify-content: center; }

.hero__copy { max-width: 640px; }
.hero__title {
  font-size: clamp(2.2rem, 6.4vw, 3.8rem);
  letter-spacing: -0.03em;
  line-height: 1.06;
  text-wrap: balance;
}
.hero__desc {
  margin-top: 22px;
  max-width: 30ch;
  color: var(--text-secondary);
  font-size: clamp(1rem, 1.4vw, 1.15rem);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero__meta { margin-top: 28px; color: var(--text-muted); font-size: 0.85rem; letter-spacing: 0.01em; }
.hero__visual { justify-self: center; width: 100%; }

@media (max-width: 900px) {
  .hero__inner { grid-template-columns: 1fr; gap: 44px; }
  .hero__desc { max-width: 42ch; }
  .hero__visual { max-width: 320px; justify-self: start; }
}
@media (max-width: 560px) {
  .hero__visual { display: none; }
}

/* ---------------------------------------------------------------------------
   9. FEATURE CARDS (bento) — one featured card with a real product
   screenshot, three even cards, then a normal + wide pair. Deliberately
   not a uniform grid: see the "General" instructions this was built
   against for why.
   ------------------------------------------------------------------------- */
.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

.feature-card {
  padding: 24px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  transition: border-color 180ms var(--ease);
}
.feature-card:hover { border-color: var(--border-strong); }
.feature-card__icon {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  color: var(--text-secondary);
}
.feature-card__title { margin-top: 18px; font-size: 1.02rem; font-weight: 600; }
.feature-card__text { margin-top: 8px; color: var(--text-muted); font-size: 0.92rem; line-height: 1.6; }

/* The one featured card: full width, real Dashboard screenshot on the right */
.feature-card--dashboard {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 280px) 1fr;
  gap: 32px;
  align-items: center;
  padding: 28px;
}
.feature-card--dashboard .feature-card__body { align-self: center; }
.feature-card--dashboard .image-frame { aspect-ratio: 1266 / 519; }
.feature-card--dashboard .image-frame img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }

/* The wide closer card: icon beside the text instead of above it */
.feature-card--wide {
  grid-column: span 2;
  display: flex;
  align-items: center;
  gap: 20px;
}
.feature-card--wide .feature-card__icon { flex: none; }
.feature-card--wide .feature-card__title { margin-top: 0; }

@media (max-width: 900px) {
  .features-grid { grid-template-columns: 1fr 1fr; }
  .feature-card--dashboard { grid-column: 1 / -1; grid-template-columns: 1fr; }
  .feature-card--dashboard .image-frame { aspect-ratio: 16 / 9; }
  .feature-card--wide { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .features-grid { grid-template-columns: 1fr; }
  .feature-card--wide { flex-direction: column; align-items: flex-start; }
  .feature-card--wide .feature-card__title { margin-top: 16px; }
}

/* the framed screenshot */
.image-frame {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  padding: 8px;
}
.image-frame img { display: block; width: 100%; height: auto; border-radius: calc(var(--radius-lg) - 10px); }

/* ---------------------------------------------------------------------------
   11. FOOTER
   ------------------------------------------------------------------------- */
.footer { border-top: 1px solid var(--border); background: var(--bg-alt); }
.footer__top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 40px;
  padding-block: 48px 36px;
}
.footer__brand { display: flex; align-items: flex-start; gap: 12px; max-width: 280px; }
.footer__mark {
  display: block;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  flex-shrink: 0;
}
.footer__name { color: var(--text); font-weight: 600; font-size: 0.95rem; }
.footer__tag { margin-top: 4px; color: var(--text-muted); font-size: 0.85rem; line-height: 1.5; }

.footer__cols { display: flex; flex-wrap: wrap; gap: 40px; }
.footer__col { display: flex; flex-direction: column; gap: 10px; min-width: 100px; }
.footer__col-title { color: var(--text-muted); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.footer__link { color: var(--text-muted); font-size: 0.88rem; transition: color 150ms var(--ease); }
.footer__link:hover { color: var(--text); }
.footer__link[data-cc-open] { cursor: pointer; }

.footer__bottom { padding-block: 20px 32px; border-top: 1px solid var(--border); }
.footer__copy { color: var(--text-muted); font-size: 0.85rem; }

@media (max-width: 700px) {
  .footer__cols { gap: 28px; width: 100%; }
}
@media (max-width: 460px) {
  .footer__cols { flex-direction: column; gap: 22px; }
}

/* ---------------------------------------------------------------------------
   13. COOKIE CONSENT  (banner + settings modal — built by assets/consent.js)
   ------------------------------------------------------------------------- */
.tp-cc {
  position: fixed;
  left: max(20px, env(safe-area-inset-left));
  bottom: max(20px, env(safe-area-inset-bottom));
  z-index: 200;
  width: 360px;
  max-width: calc(100vw - 40px);
  padding: 18px 18px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 18px 50px -12px rgba(0, 0, 0, 0.55);
  transform: translateY(14px);
  opacity: 0;
  transition: transform 320ms var(--ease), opacity 260ms var(--ease);
}
.tp-cc.is-in { transform: none; opacity: 1; }
.tp-cc__title {
  color: var(--text);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
}
.tp-cc__text {
  margin-top: 7px;
  color: var(--text-secondary);
  font-size: 0.82rem;
  line-height: 1.6;
}
.tp-cc__actions {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}
.tp-cc__actions .btn { flex: 1; }
.tp-cc__link {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 4px;
  color: var(--text-muted);
  font-size: 0.76rem;
  text-align: center;
  transition: color 150ms var(--ease);
}
.tp-cc__link:hover { color: var(--text); }

.tp-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  background: rgba(3, 4, 5, 0.55);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  transition: opacity 200ms var(--ease);
}
.tp-modal.is-in { opacity: 1; pointer-events: auto; }
.tp-modal__backdrop { position: absolute; inset: 0; }
.tp-modal__card {
  position: relative;
  width: min(440px, 100%);
  max-height: 88vh;
  overflow-y: auto;
  padding: 24px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.6);
  transform: translateY(10px) scale(0.98);
  transition: transform 220ms var(--ease);
}
.tp-modal.is-in .tp-modal__card { transform: none; }
.tp-modal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.tp-modal__head h2 { font-size: 1rem; letter-spacing: -0.01em; }
.tp-modal__x {
  width: 30px;
  height: 30px;
  margin: -4px -6px -4px 0;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 20px;
  line-height: 1;
  transition: color 150ms var(--ease), background-color 150ms var(--ease);
}
.tp-modal__x:hover { color: var(--text); background: var(--btn-secondary-bg); }
.tp-modal__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 0;
  border-top: 1px solid var(--border);
}
.tp-modal__row:first-of-type { margin-top: 10px; }
.tp-modal__name { color: var(--text); font-weight: 500; font-size: 0.88rem; }
.tp-modal__name span { color: var(--text-muted); font-weight: 400; }
.tp-modal__desc { margin-top: 5px; color: var(--text-muted); font-size: 0.79rem; line-height: 1.55; }
.tp-modal__desc a { color: var(--text-secondary); text-decoration: underline; text-underline-offset: 2px; }
.tp-modal__desc a:hover { color: var(--text); }
.tp-modal .btn--primary { width: 100%; margin-top: 18px; }

.tp-switch {
  flex-shrink: 0;
  position: relative;
  width: 38px;
  height: 22px;
  border-radius: 999px;
  background: var(--btn-secondary-bg);
  border: 1px solid var(--border-strong);
  cursor: pointer;
  transition: background-color 180ms var(--ease);
}
.tp-switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.tp-switch > span {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--text-muted);
  transition: transform 180ms var(--ease), background-color 180ms var(--ease);
}
.tp-switch input:checked ~ span { transform: translateX(16px); background: var(--text); }
.tp-switch:has(input:checked) { background: var(--btn-secondary-bg-hover); }
.tp-switch--locked { cursor: default; }
.tp-switch--locked > span { transform: translateX(16px); background: var(--text-secondary); }

@media (prefers-reduced-motion: reduce) {
  .tp-cc, .tp-modal, .tp-modal__card, .tp-switch, .tp-switch > span { transition: none; }
}
@media (max-width: 460px) {
  .tp-cc {
    left: 12px;
    right: 12px;
    bottom: 12px;
    width: auto;
    max-width: none;
  }
}

/* -- Feature modal (pricing card "See more") ----------------------------------
   Same visual language as .tp-modal above (border-radius, background, blur,
   shadow, transition timing) so it reads as one system rather than a
   different popup style. Content per product lives in a hidden <template>
   next to its pricing card; site.js clones it into .feature-modal__body. */
.feature-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  background: rgba(3, 4, 5, 0.55);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  transition: opacity 200ms var(--ease);
}
.feature-modal.is-in { opacity: 1; pointer-events: auto; }
.feature-modal__backdrop { position: absolute; inset: 0; }
.feature-modal__card {
  position: relative;
  width: min(440px, 100%);
  max-height: 84vh;
  overflow-y: auto;
  padding: 28px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.6);
  transform: translateY(10px) scale(0.98);
  transition: transform 220ms var(--ease);
}
.feature-modal.is-in .feature-modal__card { transform: none; }
.feature-modal__x {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 20px;
  line-height: 1;
  transition: color 150ms var(--ease), background-color 150ms var(--ease);
}
.feature-modal__x:hover { color: var(--text); background: var(--btn-secondary-bg); }
.feature-modal__body h2 { font-size: 1.15rem; padding-right: 28px; }
.feature-modal__body .feature-modal__desc { margin-top: 8px; color: var(--text-muted); font-size: 0.92rem; line-height: 1.6; }
.feature-modal__body ul { list-style: none; padding: 0; margin: 20px 0 0; display: flex; flex-direction: column; gap: 12px; }
.feature-modal__body li { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: var(--text-secondary); }
.feature-modal__body li svg { flex: none; margin-top: 2px; color: var(--good); }

.pricing-card__more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 16px;
  color: var(--text-secondary);
  font-size: 12.5px;
  font-weight: 600;
  transition: color 150ms var(--ease);
}
.pricing-card__more:hover { color: var(--text); }

@media (prefers-reduced-motion: reduce) {
  .feature-modal, .feature-modal__card { transition: none; }
}

/* ============================================================================
   14. THOMSEN SHIELD — product page components
   ----------------------------------------------------------------------------
   Everything below is new (not part of the real thomssen.dev stylesheet),
   built to match the conventions above: same tokens, same --element__part
   naming, same button/card/section patterns reused wherever they already
   fit (badges, .feature-card, .home-features, .btn, .section, .eyebrow).
   ========================================================================== */

.dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.dot-good { background: var(--good); }
.dot-bad { background: var(--bad); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 760px) { .grid-2 { grid-template-columns: 1fr; } }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 22px; }
.card h3 { display: flex; align-items: center; gap: 8px; font-size: 14.5px; margin-bottom: 10px; }
.card ul { font-size: 14px; }
.card li { margin-bottom: 10px; }
.card li:last-child { margin-bottom: 0; }

.info-list { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 22px; font-size: 14px; }
.info-list ul, .info-list ol { padding-left: 20px; }
.info-list li { margin-bottom: 10px; }
.info-list li:last-child { margin-bottom: 0; }

/* -- How it works -------------------------------------------------------
   Deliberately not boxed cards: a numbered, rule-separated sequence reads
   as one editorial flow rather than three more bordered tiles, and drops
   the icon-in-a-square treatment repeated everywhere else on the page. */
.hiw-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; }
.hiw-card { padding-top: 20px; border-top: 1px solid var(--border); }
.hiw-card__num {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.1em;
  font-variant-numeric: tabular-nums;
}
.hiw-card h3 { margin-top: 14px; font-size: 1.15rem; }
.hiw-card p { font-size: 0.92rem; color: var(--text-muted); margin-top: 10px; line-height: 1.65; max-width: 32ch; }

@media (max-width: 760px) {
  .hiw-grid { grid-template-columns: 1fr; gap: 32px; }
}

.status-badge { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding-inline: 10px; border-radius: var(--radius-sm); background: var(--good-soft); color: var(--good); font-size: 12px; font-weight: 600; }
.status-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* -- Pricing ------------------------------------------------------------------
   Three separate cards, one shared design (same border, radius, background,
   shadow and button/list system throughout). Shield is the base card sized
   up via .pricing-card--shield (wider + more padding); OSINT/VM stay at
   the smaller base size so Shield is unmistakably the larger, main card,
   not a same-size sibling. Each card shows only 3-4 key features - the rest
   live behind its "See more"/"See all features" button in the shared
   .feature-modal (see section 13b), which keeps the three cards short and
   close in height instead of growing with every feature added. Source
   order is Shield, OSINT, VM (so Shield is first on mobile and in tab
   order); the desktop media query below reorders them visually into
   OSINT | Shield | VM without touching that source order.
-------------------------------------------------------------------------- */
.pricing {
  display: grid;
  gap: 24px;
  justify-items: center;
}
.pricing-card {
  width: 100%; max-width: 420px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 32px;
  text-align: center;
  box-shadow: var(--shadow-lg);
}
.pricing-card--shield {
  padding: 56px 44px;
  border-color: color-mix(in srgb, var(--text) 24%, transparent);
}
.pricing-card__badge {
  display: block;
  margin-bottom: 10px;
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.pricing-card__name { font-size: 13px; font-weight: 600; color: var(--text-muted); }
.pricing-card__price { margin: 12px 0 0; display: flex; align-items: baseline; justify-content: center; gap: 6px; }
.pricing-card__price-amount { font-size: 48px; font-weight: 700; letter-spacing: -0.03em; color: var(--text); }
.pricing-card__price-amount--free { font-size: 26px; }
.pricing-card__price-period { font-size: 14px; color: var(--text-muted); }
.pricing-card__note { margin: 8px 0 0; font-size: 12.5px; color: var(--text-muted); }
.pricing-card .btn { margin-top: 26px; }
.pricing-card__list { list-style: none; padding: 0; margin: 26px 0 0; text-align: left; display: flex; flex-direction: column; gap: 12px; }
.pricing-card__list li { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: var(--text-secondary); margin: 0; }
.pricing-card__list svg { flex: none; margin-top: 2px; color: var(--good); }
.pricing-card__list--tight { margin-top: 20px; gap: 10px; }
.pricing-card__refund { margin: 22px 0 0; font-size: 12.5px; color: var(--text-muted); }
.pricing-card__refund a { color: var(--text-secondary); text-decoration: underline; text-underline-offset: 2px; }

@media (min-width: 920px) {
  .pricing {
    grid-template-columns: 1fr 1.3fr 1fr;
    align-items: center;
    gap: 32px;
  }
  .pricing-card { max-width: 300px; }
  .pricing-card.pricing-card--shield { max-width: 400px; }
  .pricing-card--osint { order: 1; }
  .pricing-card--shield { order: 2; }
  .pricing-card--vm { order: 3; }
}

/* -- FAQ (accordion) ---------------------------------------------------------- */
.faq { max-width: 760px; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item:last-child { border-bottom: 0; }
.faq-item__q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 22px 22px; background: none; border: 0; text-align: left; cursor: pointer;
  font-family: inherit; font-size: 0.98rem; font-weight: 600; color: var(--text);
  transition: background-color 150ms var(--ease);
}
.faq-item__q:hover { background: var(--btn-secondary-bg); }
.faq-item__chevron { flex: none; color: var(--text-muted); transition: transform var(--dur) var(--ease), color 150ms var(--ease); }
.faq-item__q:hover .faq-item__chevron { color: var(--text); }
.faq-item[data-open="true"] .faq-item__chevron { transform: rotate(180deg); }
.faq-item__a { max-height: 0; overflow: hidden; transition: max-height 260ms var(--ease); }
.faq-item__a-inner { padding: 0 22px 22px; font-size: 0.92rem; line-height: 1.7; color: var(--text-muted); max-width: 68ch; }

/* -- Form fields + custom dropdown (Request a Refund) ------------------------- */
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field:last-of-type { margin-bottom: 0; }
.field label { font-size: 12.5px; font-weight: 600; color: var(--text-secondary); }
.required { color: var(--text-muted); font-weight: 400; }

input, textarea {
  background: color-mix(in srgb, var(--text) 4%, transparent);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 11px 14px;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  width: 100%;
}
input::placeholder, textarea::placeholder { color: var(--text-muted); }
input:focus, textarea:focus {
  background: color-mix(in srgb, var(--text) 6%, transparent);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
textarea { resize: vertical; min-height: 96px; }

.select { position: relative; }
.select-trigger {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; text-align: left; cursor: pointer;
  background: color-mix(in srgb, var(--text) 4%, transparent);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 11px 14px;
  font-size: 14px;
  font-family: inherit;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.select-trigger:hover { background: color-mix(in srgb, var(--text) 6%, transparent); }
.select-trigger:focus-visible,
.select-trigger[aria-expanded="true"] {
  background: color-mix(in srgb, var(--text) 6%, transparent);
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.select-trigger-invalid { border-color: var(--bad); }
.select-trigger-text.is-placeholder { color: var(--text-muted); }
.select-chevron { color: var(--text-muted); flex: none; margin-left: 10px; transition: transform var(--dur) var(--ease); }
.select-trigger[aria-expanded="true"] .select-chevron { transform: rotate(180deg); }

.select-list {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 20;
  margin: 0; padding: 6px; list-style: none;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  max-height: 240px; overflow-y: auto;
}
.select-list[hidden] { display: none; }
.select-list li { padding: 9px 10px; border-radius: 7px; font-size: 14px; color: var(--text-secondary); cursor: pointer; }
.select-list li:hover, .select-list li:focus { background: var(--btn-secondary-bg-hover); color: var(--text); outline: none; }
.select-list li[aria-selected="true"] { color: var(--text); background: var(--btn-secondary-bg); }

.form-card {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: var(--shadow-lg);
}
.form-card .form-sub { font-size: 14px; color: var(--text-muted); margin: 0 0 24px; }
.form-actions { margin-top: 22px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.form-note { font-size: 13px; color: var(--good); background: var(--good-soft); border-radius: var(--radius-sm); padding: 10px 14px; margin: 0; }
.form-note[hidden] { display: none; }

@media (max-width: 640px) {
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .form-card { padding: 22px; }
}

/* -- Legal-page doc layout (Terms / Privacy / Refund body copy) --------------- */
.doc { max-width: 720px; margin-inline: auto; }
.doc .updated { font-size: 12.5px; color: var(--text-muted); margin: 8px 0 28px; }
.doc h1 { font-size: clamp(1.8rem, 4vw, 2.3rem); letter-spacing: -0.02em; }
.doc section { margin-bottom: 40px; }
.doc h2 { font-size: 1.1rem; margin-bottom: 12px; }
.doc p, .doc li { margin-bottom: 12px; font-size: 0.95rem; }
.doc li:last-child { margin-bottom: 0; }
.doc ul, .doc ol { padding-left: 20px; }


/* --------------------------------------------------------------------------
   15. CUSTOM SCROLLBARS — subtle and theme-aware, matching product outlines
   -------------------------------------------------------------------------- */
:root[data-theme='dark'], :root {
  --scroll-thumb: #42474d;
  --scroll-thumb-hover: #626a72;
  --scroll-track: #08090b;
}
:root[data-theme='light'] {
  --scroll-thumb: #bec3ca;
  --scroll-thumb-hover: #989fa8;
  --scroll-track: #f6f7f8;
}
html {
  scrollbar-width: thin;
  scrollbar-color: var(--scroll-thumb) var(--scroll-track);
}
html::-webkit-scrollbar { width: 9px; }
html::-webkit-scrollbar-track { background: var(--scroll-track); }
html::-webkit-scrollbar-thumb {
  background-color: var(--scroll-thumb);
  border: 2px solid var(--scroll-track);
  border-radius: 999px;
}
html::-webkit-scrollbar-thumb:hover { background-color: var(--scroll-thumb-hover); }
/* Other scrollable panels use the same restrained appearance. */
.select-list, .feature-modal__card, .tp-modal__card {
  scrollbar-width: thin;
  scrollbar-color: var(--scroll-thumb) transparent;
}
.select-list::-webkit-scrollbar,
.feature-modal__card::-webkit-scrollbar,
.tp-modal__card::-webkit-scrollbar { width: 8px; }
.select-list::-webkit-scrollbar-thumb,
.feature-modal__card::-webkit-scrollbar-thumb,
.tp-modal__card::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb);
  border: 2px solid var(--surface);
  border-radius: 999px;
}
.select-list::-webkit-scrollbar-thumb:hover,
.feature-modal__card::-webkit-scrollbar-thumb:hover,
.tp-modal__card::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hover); }