/* ============================================================
   heySec — 2026 refresh
   The heySec Home design language (docs/app-brief.md in the Home
   repo) carried onto the marketing site: warm grounds, ink on
   yellow, capsule controls, grouped cards without borders, status
   pills with a dot, the shield watermark on brand surfaces.

   Loaded after theme.css. Tokens first, then components in the
   order they appear on a page (nav → heroes → sections → footer),
   then the new multi-product components (hs-*).
   ============================================================ */

:root {
  /* Ink and grounds (heySec Portal tokens) */
  --ink: #030107;
  --black: #030107;
  --ground: #f7f7f4;
  --surface: #ffffff;
  --surface-2: #efefe9;
  --text-2: #5d5d57;
  --text-3: #74746d;
  --sep: rgba(3, 1, 7, 0.08);
  --fill: rgba(3, 1, 7, 0.05);
  --warm: #f7f7f4;
  --gray-50: #f7f7f4;
  --gray-100: #efefe9;
  --gray-500: #5d5d57;
  --gray-600: #3f3e3a;
  --sage: #f7f7f4;
  --sage-dark: #74746d;

  /* Brand yellow and its states — always ink on it */
  --yellow: #f9ce19;
  --yellow-hover: #ffdf58;
  --yellow-dark: #efc000;
  --yellow-deep: #a57f00;     /* yellow that must read on a light page (text, checks) */
  --yellow-tint: rgba(249, 206, 25, 0.16);

  /* Night — the warm dark of heySec Home's dark theme, replacing navy */
  --night: #0e0d0a;
  --night-2: #1a1915;
  --night-3: #24231e;
  --navy: #1a1915;
  --navy-light: #24231e;

  /* Status + product accents, deep enough for white text */
  --teal: #146c79;
  --teal-dark: #0f5661;
  --teal-bright: #3fb4c6;
  --teal-light: #e6f1f2;
  --green: #18753b;
  --orange: #d85c2e;
  --orange-dark: #b94a20;
  --orange-bright: #ff8a3d;
  --red: #b92f28;
  --green-tint: rgba(24, 117, 59, 0.11);
  --orange-tint: rgba(216, 92, 46, 0.12);
  --red-tint: rgba(185, 47, 40, 0.10);
  --teal-tint: rgba(20, 108, 121, 0.10);

  /* Product accents — one per audience, used by heroes and product tiles */
  --acc-cloud: #146c79;
  --acc-enterprise: #d85c2e;
  --acc-home: #f9ce19;

  /* Shape (continuous-corner feel) and depth */
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 28px;
  --r-xl: 36px;
  --shadow-sm: 0 1px 3px rgba(3, 1, 7, 0.05), 0 1px 2px rgba(3, 1, 7, 0.025);
  --shadow-md: 0 10px 30px rgba(42, 38, 25, 0.08), 0 2px 6px rgba(3, 1, 7, 0.04);
  --shadow-lg: 0 30px 80px rgba(20, 16, 4, 0.18), 0 8px 24px rgba(3, 1, 7, 0.08);
  --focus: #146c79;

  --shield-white: url("../images/brand/shield-white.svg");
  --shield-yellow: url("../images/brand/shield.svg");
}

/* ─── Base ─── */
body { color: var(--ink); background: var(--surface); }
::selection { background: var(--yellow); color: var(--ink); }
.display, .h1, .h2, .h3, h1, h2, h3 { text-wrap: balance; }
.body-lg, .body-md, p { text-wrap: pretty; }
.body-lg, .body-md { color: var(--text-2); }
.label { color: var(--text-3); }
.label::before { box-shadow: none; }

/* ─── Buttons: capsules, ink on yellow ─── */
.btn:not(.wp-block-button),
.wp-block-button.btn .wp-block-button__link,
.wp-block-button[class*="btn--"] .wp-block-button__link { border-radius: 999px; }
.btn--lg:not(.wp-block-button), .wp-block-button.btn--lg .wp-block-button__link { border-radius: 999px; padding: 16px 32px; }
.btn--sm:not(.wp-block-button), .wp-block-button.btn--sm .wp-block-button__link { border-radius: 999px; }

.btn--primary:not(.wp-block-button),
.wp-block-button.btn--primary .wp-block-button__link,
.section--teal .wp-block-button.btn--primary .wp-block-button__link,
.section--orange .wp-block-button.btn--primary .wp-block-button__link,
.section--navy .wp-block-button.btn--primary .wp-block-button__link,
.section--teal .btn--primary:not(.wp-block-button), .section--orange .btn--primary:not(.wp-block-button), .section--navy .btn--primary:not(.wp-block-button) {
  background: var(--yellow);
  color: var(--ink);
  box-shadow: none;
}
.btn--primary:not(.wp-block-button):hover,
.wp-block-button.btn--primary .wp-block-button__link:hover { background: var(--yellow-hover); box-shadow: 0 6px 20px rgba(249, 206, 25, 0.35); }
.btn--primary:not(.wp-block-button):active,
.wp-block-button.btn--primary .wp-block-button__link:active { background: var(--yellow-dark); }

.btn--dark:not(.wp-block-button),
.wp-block-button.btn--dark .wp-block-button__link { background: var(--ink); color: #fff; }
.btn--dark:not(.wp-block-button):hover,
.wp-block-button.btn--dark .wp-block-button__link:hover { background: #26241f; }

.btn--secondary:not(.wp-block-button),
.wp-block-button.btn--secondary .wp-block-button__link { background: var(--fill); color: var(--ink); box-shadow: none; }
.btn--secondary:not(.wp-block-button):hover,
.wp-block-button.btn--secondary .wp-block-button__link:hover { background: rgba(3, 1, 7, 0.09); box-shadow: none; }

/* Ghost = a quiet text link with an arrow that moves */
.btn--ghost:not(.wp-block-button),
.wp-block-button.btn--ghost .wp-block-button__link { color: var(--ink); font-weight: 600; border-bottom-color: transparent; }
.btn--ghost:not(.wp-block-button):hover,
.wp-block-button.btn--ghost .wp-block-button__link:hover { color: var(--ink); border-bottom-color: var(--yellow); }

/* Focus: a teal ring that follows the capsule, readable on yellow too */
.btn:not(.wp-block-button):not(.btn--ghost):focus-visible,
.wp-block-button:not(.btn--ghost) .wp-block-button__link.wp-element-button:focus-visible,
.hs-btn:focus-visible,
.nav__cta:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--focus);
}
a:focus-visible, summary:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ─── Navigation: a glass capsule once you scroll ─── */
.nav { padding: 0 16px; transition: padding 0.35s var(--ease); }
.nav__inner {
  height: 84px;
  max-width: 1296px;
  padding: 0 32px;
  border-radius: 999px;
  transition: height 0.35s var(--ease), max-width 0.35s var(--ease), background 0.35s var(--ease), box-shadow 0.35s var(--ease), margin 0.35s var(--ease);
}
.nav--scrolled,
.nav--on-dark.nav--scrolled { background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.nav--scrolled .nav__inner {
  height: 60px;
  max-width: 1120px;
  margin-top: 10px;
  padding: 0 8px 0 24px;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  backdrop-filter: saturate(180%) blur(22px);
  box-shadow: 0 0 0 1px rgba(3, 1, 7, 0.06), 0 10px 30px rgba(3, 1, 7, 0.08);
}
.nav__center { gap: 2px; }
.nav__link,
.nav__dropdown-toggle {
  font-size: 14.5px;
  font-weight: 550;
  color: var(--text-2);
  padding: 8px 14px;
  border-radius: 999px;
  transition: color 0.2s, background 0.2s;
}
.nav__link:hover,
.nav__dropdown-toggle:hover { color: var(--ink); background: var(--fill); }
.nav__link--active,
.nav__dropdown-toggle.nav__link--active { color: var(--ink); font-weight: 650; }
.nav__cta {
  padding: 11px 22px;
  border-radius: 999px;
  background: var(--yellow);
  color: var(--ink);
  font-weight: 650;
}
.nav__cta:hover { background: var(--yellow-hover); }
.nav--scrolled .nav__cta { padding: 10px 20px; }

.nav--on-dark .nav__link,
.nav--on-dark .nav__dropdown-toggle { color: rgba(255, 255, 255, 0.78); }
.nav--on-dark .nav__link:hover,
.nav--on-dark .nav__dropdown-toggle:hover { color: #fff; background: rgba(255, 255, 255, 0.1); }
.nav--on-dark .nav__link--active,
.nav--on-dark .nav__dropdown-toggle.nav__link--active { color: #fff; }
.nav--on-dark .nav__cta,
.nav--on-dark.nav--scrolled .nav__cta { background: var(--yellow); color: var(--ink); }
.nav--on-dark.nav--scrolled .nav__link,
.nav--on-dark.nav--scrolled .nav__dropdown-toggle { color: var(--text-2); }
.nav--on-dark.nav--scrolled .nav__link:hover,
.nav--on-dark.nav--scrolled .nav__dropdown-toggle:hover { color: var(--ink); background: var(--fill); }
.nav--on-dark.nav--scrolled .nav__link--active,
.nav--on-dark.nav--scrolled .nav__dropdown-toggle.nav__link--active { color: var(--ink); }

/* Dropdown panel — opens on hover and on keyboard focus */
.nav__dropdown:focus-within .nav__dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(10px);
}
.nav__dropdown:focus-within .nav__dropdown-toggle svg { transform: rotate(180deg); }
.nav__dropdown-menu {
  padding: 8px;
  border: 0;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(3, 1, 7, 0.06), 0 28px 70px rgba(3, 1, 7, 0.18);
}
/* The hover bridge: the gap between toggle and panel must not close it */
.nav__dropdown-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }

/* Mega panel: one column per audience, then a photo promo */
.nav__dropdown-menu:has(.nav__group) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.92fr);
  gap: 6px;
  width: min(920px, 94vw);
  padding: 12px;
}
.nav__group { display: flex; flex-direction: column; padding: 10px 6px 8px; }
.nav__group + .nav__group { box-shadow: inset 1px 0 0 var(--sep); padding-left: 12px; }
.nav__group-title {
  margin: 2px 10px 10px;
  font-size: 11.5px;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}
.nav__group-items { display: flex; flex-direction: column; gap: 2px; flex: 1; }

.nav__dropdown-menu a.nav__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px;
  border-radius: 14px;
  white-space: normal;
  color: var(--ink);
  transition: background 0.15s;
}
.nav__dropdown-menu a.nav__item:hover { background: var(--ground); }
.nav__item-icon {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--ground);
  color: var(--ink);
  transition: background 0.15s, color 0.15s;
}
.nav__dropdown-menu a.nav__item:hover .nav__item-icon { background: var(--yellow); }
.nav__item-sym { width: 20px; height: 20px; }
.nav__item-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nav__item-title { font-size: 14.5px; font-weight: 650; letter-spacing: -0.01em; }
.nav__item-desc { font-size: 13px; line-height: 1.45; color: var(--text-2); font-weight: 450; }
/* The current page is marked with a small yellow dot, not a filled row */
.nav__dropdown-menu a.nav__item.nav__link--active .nav__item-title::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 8px;
  border-radius: 50%;
  background: var(--yellow-dark);
  vertical-align: middle;
}
/* Quick links: compact rows under the products, separated by a hairline */
.nav__dropdown-menu a.nav__item--compact { padding: 7px 10px; border-radius: 10px; font-size: 13.5px; }
.nav__dropdown-menu a.nav__item--compact .nav__item-title { font-size: 13.5px; font-weight: 550; color: var(--text-2); }
.nav__dropdown-menu a.nav__item--compact:hover .nav__item-title { color: var(--ink); }
.nav__item:not(.nav__item--compact) + .nav__item--compact { margin-top: auto; position: relative; }
.nav__dropdown-menu a.nav__item:not(.nav__item--compact):has(+ .nav__item--compact) { margin-bottom: 12px; }
.nav__item:not(.nav__item--compact) + .nav__item--compact::before {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  top: -6px;
  height: 1px;
  background: var(--sep);
}

/* Promo card: a photo, one line, one door */
.nav__dropdown-menu a.nav__feature {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 4px;
  min-height: 240px;
  padding: 20px;
  border-radius: 18px;
  overflow: hidden;
  isolation: isolate;
  color: #fff;
  background: var(--night) center / cover no-repeat;
  white-space: normal;
  transition: none;
}
.nav__dropdown-menu a.nav__feature:hover { background-color: var(--night); color: #fff; }
.nav__feature::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(14, 13, 10, 0) 25%, rgba(14, 13, 10, 0.88) 100%);
}
.nav__dropdown-menu a.nav__feature.nav-feature--home { background-image: url("../images/photos_home/living-room-watch.webp"); background-position: 80% 50%; }
.nav__feature-title { font-size: 16px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.25; }
.nav__feature-desc { font-size: 13px; line-height: 1.45; color: rgba(255, 255, 255, 0.78); }
.nav__feature-go {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--yellow);
  color: var(--ink);
  transition: transform 0.3s var(--ease-out);
}
.nav__feature:hover .nav__feature-go { transform: rotate(-45deg); }

/* Free tools: a row under the audience columns, the promo card beside both */
.nav__dropdown-menu:has(.nav-group--wide) a.nav__feature { grid-row: span 2; }
.nav__group.nav-group--wide { grid-column: 1 / 3; padding: 14px 6px 4px; box-shadow: inset 0 1px 0 var(--sep); }
.nav-group--wide .nav__group-items { flex-direction: row; flex-wrap: wrap; }
.nav__dropdown-menu .nav-group--wide a.nav__item { flex: 0 1 50%; }

@media (max-width: 768px) {
  .nav { padding: 0; }
  .nav__inner,
  .nav--scrolled .nav__inner { height: 64px; max-width: none; margin: 0; padding: 0 16px 0 20px; border-radius: 0; }
  .nav--scrolled .nav__inner { background: rgba(255, 255, 255, 0.9); box-shadow: 0 1px 0 rgba(3, 1, 7, 0.06); }
  .nav__center { background: var(--surface); }
  .nav__center .nav__link,
  .nav__center .nav__dropdown-toggle { border-radius: 0; padding: 16px 4px; font-size: 18px; justify-content: space-between; }
  .nav__center .nav__link:hover,
  .nav__center .nav__dropdown-toggle:hover { background: transparent; }
  .nav__dropdown-menu,
  .nav__dropdown-menu:has(.nav__group) {
    display: block;
    width: auto;
    padding: 4px 0 8px;
    background: transparent;
    box-shadow: none;
    transform: none;
  }
  .nav__dropdown:focus-within .nav__dropdown-menu { transform: none; }
  .nav__group, .nav__group + .nav__group, .nav__group.nav-group--wide { box-shadow: none; padding: 4px 0; }
  .nav-group--wide .nav__group-items { flex-direction: column; }
  .nav__dropdown-menu .nav-group--wide a.nav__item { flex: none; }
  .nav__group-title { margin: 8px 4px 4px; text-align: left; }
  .nav__dropdown-menu a.nav__item { text-align: left; border-bottom: 0; padding: 10px 4px; }
  .nav__item:not(.nav__item--compact) + .nav__item--compact::before { display: none; }
  .nav__dropdown-menu a.nav__feature { min-height: 150px; margin-top: 12px; text-align: left; }
  .nav__right .nav__cta,
  .nav--scrolled .nav__cta { padding: 8px 16px; font-size: 13px; }
}

/* ─── Page heroes: one finished night surface and the brand shield in line ─── */
.page-hero,
.page-hero.page-hero--content,
body.page-template-page-product .page-hero,
body.page-template-page-waitlist .page-hero,
.waitlist-hero,
.page-hero--404,
.pricing-hero,
.bl-hero,
.post-hero,
.legal-hero {
  background: var(--night);
  color: #fff;
  isolation: isolate;
}
/* The shield, drawn as a fine outline and cropped by the right edge */
.page-hero::after,
.bl-hero::after,
.post-hero::after,
.legal-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: max(-180px, -12vw);
  top: 50%;
  width: min(760px, 64vw);
  aspect-ratio: 1;
  background: url("../images/brand/shield-outline.svg") no-repeat center / contain;
  opacity: 0.16;
  transform: translateY(-46%);
  pointer-events: none;
}
/* The legal hero had no positioning of its own, so its shield hung off the page */
.legal-hero { position: relative; overflow: hidden; }
/* It is a short hero: the shield's top shows, tilted a little, and the rest runs off below */
.legal-hero::after { top: -110px; transform: rotate(-8deg); transform-origin: 50% 0; }
/* A hairline where the night meets the page */
.page-hero::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: rgba(255, 255, 255, 0.06); }
.page-hero__bg { display: none; }
/* A post's cover is an illustration, so it sits as a card over the hero's lower
   edge (cropped to the 1.91:1 social-share ratio) instead of behind the title.
   Specific enough to beat core's flow-layout first-child margin reset. */
main:has(.post-cover) .post-hero { padding-bottom: 200px; }
main .wp-block-post-featured-image.post-cover { position: relative; z-index: 2; max-width: 960px; margin: -224px auto 56px; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
.post-cover img { display: block; width: 100%; aspect-ratio: 1.91 / 1; object-fit: cover; }
.page-hero { padding: 188px 48px 120px; }
.page-hero .label,
.pricing-hero .label,
.bl-hero .label,
.legal-hero .label,
.post-hero .label { color: rgba(255, 255, 255, 0.62); }
.page-hero .h1, .page-hero h1 { max-width: 860px; margin-left: auto; margin-right: auto; font-size: clamp(40px, 5vw, 68px); letter-spacing: -0.04em; }
.page-hero .body-lg,
.page-hero__subtitle { color: rgba(255, 255, 255, 0.72); max-width: 620px; }
/* About and Contact: the hero keeps its size, centred copy and shield; a photo
   lies underneath, held dark behind the copy and opening up under the shield */
.page-hero--underlay .page-hero__photo { position: absolute; inset: 0; z-index: -2; }
.page-hero--underlay .page-hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
.page-hero--underlay .page-hero__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 60% at 50% 50%, rgba(14, 13, 10, 0.55) 0%, transparent 100%),
    linear-gradient(90deg, rgba(14, 13, 10, 0.75) 0%, rgba(14, 13, 10, 0.4) 50%, rgba(14, 13, 10, 0.1) 100%),
    linear-gradient(0deg, rgba(14, 13, 10, 0.7) 0%, transparent 35%);
}
.page-hero--underlay::after { opacity: 0.3; }
/* Blog: the same idea as a background, since the hero lives in a template */
.bl-hero.bl-hero--photo {
  background:
    radial-gradient(ellipse 55% 60% at 30% 50%, rgba(14, 13, 10, 0.5) 0%, transparent 100%),
    linear-gradient(90deg, rgba(14, 13, 10, 0.82) 0%, rgba(14, 13, 10, 0.5) 50%, rgba(14, 13, 10, 0.15) 100%),
    linear-gradient(0deg, rgba(14, 13, 10, 0.7) 0%, transparent 35%),
    url("../images/photos_home/blog-hero-telliskivi-projected.webp") 70% 50% / cover no-repeat,
    var(--night);
}
.bl-hero--photo::after { opacity: 0.3; }

/* Photo heroes (Prompt Firewall, Enterprise): the photo replaces the shield,
   darkened on the copy side, with the copy left-aligned as on heySec Home. */
.page-hero.page-hero--photo { min-height: max(640px, 88svh); display: flex; align-items: center; padding: 150px 0 96px; text-align: left; }
.page-hero--photo::after { display: none; }
.page-hero__photo { position: absolute; inset: 0; z-index: -2; }
.page-hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
.page-hero__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(14, 13, 10, 0.92) 0%, rgba(14, 13, 10, 0.72) 38%, rgba(14, 13, 10, 0.12) 72%),
    linear-gradient(0deg, rgba(14, 13, 10, 0.7) 0%, transparent 30%);
}
.page-hero--photo > .container { width: 100%; max-width: 1140px; }
.page-hero--photo .h1, .page-hero--photo h1 { max-width: 720px; margin-left: 0; }
.page-hero--photo .body-lg { max-width: 560px; margin-left: 0; color: rgba(255, 255, 255, 0.8); }

/* ─── Sections and grounds ─── */
.section--warm,
.section--gray { background: var(--ground); }
.section__head { max-width: 680px; }
.section--teal { background: var(--teal); }
.section--orange { background: var(--orange); }
.section--navy { background: var(--night-2); }
.section--teal-light { background: var(--teal-light); }

/* Photo sections: a warm-night scrim instead of navy-teal */
.photo-section__overlay,
.photo-section::after {
  background: linear-gradient(100deg, rgba(14, 13, 10, 0.8) 0%, rgba(14, 13, 10, 0.5) 55%, rgba(14, 13, 10, 0.2) 100%);
}
/* Split sections carry text across the full width, so the scrim stays even */
.photo-section--split::after {
  background: linear-gradient(100deg, rgba(14, 13, 10, 0.82) 0%, rgba(14, 13, 10, 0.66) 55%, rgba(14, 13, 10, 0.5) 100%);
}
/* A plain photo section's copy starts at the page's left edge, over the dark side
   of the scrim and the photo, not as a centred column over the subject */
.photo-section:not(.photo-section--center):not(.photo-section--split) .photo-section__content { width: 100%; max-width: 1140px; }
.photo-section:not(.photo-section--center):not(.photo-section--split) .photo-section__content > * { max-width: 560px; }
@media (min-width: 769px) {
  .photo-section:not(.photo-section--center):not(.photo-section--split) .photo-section__content { padding-inline: 48px; }
}

/* FAQ rows */
.faq-item { border-bottom-color: var(--sep); }
.faq-item__q:hover { color: var(--text-2); }

/* ─── CTA: the brand-yellow surface — white display type, white shield ─── */
.cta-section {
  background: var(--yellow);
  color: #fff;
  isolation: isolate;
  padding: clamp(96px, 11vw, 150px) 24px;
}
.cta-section .section__watermark { display: none; }
.cta-section::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -10%;
  bottom: -46%;
  width: min(820px, 84vw);
  aspect-ratio: 1;
  background: var(--shield-white) no-repeat center / contain;
  opacity: 0.3;
  transform: rotate(-12deg);
  pointer-events: none;
}
.cta-section .h1,
.cta-section .h2 {
  color: #fff;
  font-size: clamp(40px, 5vw, 68px);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(122, 88, 0, 0.22);
}
.cta-section .body-lg { max-width: 34rem; margin-left: auto; margin-right: auto; color: #fff; font-weight: 600; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.5; text-shadow: 0 1px 2px rgba(122, 88, 0, 0.4); }
.cta-section .btn--primary:not(.wp-block-button),
.cta-section .wp-block-button.btn--primary .wp-block-button__link { background: var(--ink); color: #fff; }
.cta-section .btn--primary:not(.wp-block-button):hover,
.cta-section .wp-block-button.btn--primary .wp-block-button__link:hover { background: #26241f; box-shadow: 0 10px 30px rgba(120, 90, 0, 0.3); }
.cta-section .btn--secondary:not(.wp-block-button),
.cta-section .wp-block-button.btn--secondary .wp-block-button__link { background: #fff; color: var(--ink); box-shadow: none; }
.cta-section .btn--secondary:not(.wp-block-button):hover,
.cta-section .wp-block-button.btn--secondary .wp-block-button__link:hover { background: #fffbe6; box-shadow: 0 10px 30px rgba(120, 90, 0, 0.2); }
.cta-section .wp-block-buttons { gap: 12px; }
.cta-section .btn:not(.wp-block-button):not(.btn--ghost):focus-visible,
.cta-section .wp-block-button .wp-block-button__link:focus-visible { box-shadow: 0 0 0 2px var(--yellow), 0 0 0 4px var(--ink); }

/* ─── Footer: night ─── */
.footer { background: var(--night); }
.footer__links a { color: rgba(255, 255, 255, 0.6); }
.footer__col-title { color: rgba(255, 255, 255, 0.45); }
.footer__brand-text { color: rgba(255, 255, 255, 0.5); }

/* ─── Page-level polish ─── */
/* Yellow that has to read as text or an icon on a light ground is the deep gold */
.pricing-card__features li svg,
.blog-card__tag,
.heysec-vs-timing__result--heysec .heysec-vs-timing__name,
.heysec-perf-table__time,
body.page-template-page-product .heysec-perf-table__row:last-child .heysec-perf-table__time,
.principle__num,
.flow__num,
.heysec-compare-card__value--accent,
.heysec-arch-card__label,
.heysec-tier-card__label { color: var(--yellow-deep); }
body.page-template-page-product .heysec-perf-table__time { color: var(--ink); }
body.page-template-page-product .heysec-perf-table__row:last-child .heysec-perf-table__time { color: var(--yellow-deep); }
.flow__content .body-md { color: var(--text-2); }
.flow__step:hover { background: var(--ground); }
.principles-grid .body-md { color: var(--text-2); }

/* Two paragraphs on a photo keep their breathing room at every width */
.photo-section__content p + p { margin-top: 16px; }

/* The Enterprise support illustration is transparent now; its slot paints no card */
body.page-template-page-enterprise :is(.enterprise-support, .section--warm:has(+ .cta-section)) .feature-row > :last-child:not(.feature-row__text):not(.feature-row__img) {
  background-color: transparent;
  border: 0;
  box-shadow: none;
}

/* About: the team note reads as one centred paragraph */
.team-note .body-md { max-width: 40rem; margin-left: auto; margin-right: auto; }

/* About: why heySec exists, the heading beside its two lines */
.about-mission__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; align-items: start; }
.about-mission__head .h2 { margin-top: 14px; }
.about-mission__text .body-lg { color: var(--ink); margin-bottom: 20px; }
.about-mission__text .body-md { color: var(--text-2); }
@media (max-width: 900px) { .about-mission__grid { grid-template-columns: 1fr; gap: 24px; } }

/* About: the Estonia part borrows Brand Estonia's ideas, drawn our own way:
   a sparse misty photo with room for text, Estonian blue (#0030de, sea and
   sky) as its one accent, and a photo held in a stone outline */
.about-estonia-band,
.about-estonia { --ee-blue: #0030de; --ee-blue-light: #00c3ff; }
.about-estonia-band { min-height: 600px; background-size: cover; background-position: 70% center; }
.about-estonia-band .label { color: rgba(255, 255, 255, 0.75); }
.about-estonia-band .label::before { background: var(--ee-blue-light); }
.about-estonia-band .h2 { color: var(--white); margin: 14px 0 18px; }
.about-estonia-band .body-lg { color: rgba(255, 255, 255, 0.82); }

.about-estonia__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 72px;
  align-items: start;
}
.about-estonia__stone { margin: 0; position: sticky; top: calc(env(safe-area-inset-top, 0px) + 110px); }
.about-estonia__stone img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  -webkit-mask: url("../images/shapes/stone.svg") center / 100% 100% no-repeat;
  mask: url("../images/shapes/stone.svg") center / 100% 100% no-repeat;
}
.about-estonia__story .body-md { color: var(--text-2); }
.about-estonia__closing { margin-top: 28px; color: var(--ink); font-weight: 600; }
@media (max-width: 900px) {
  .about-estonia__grid { grid-template-columns: 1fr; gap: 40px; }
  .about-estonia__stone { position: static; max-width: 420px; margin-inline: auto; width: 100%; }
}

/* About: the Estonia timeline, one year per hairline row */
.about-timeline { list-style: none; margin: 0 0 32px; padding: 0; }
.about-timeline li {
  position: relative;
  padding: 14px 0 14px 4.5rem;
  border-top: 1px solid var(--sep);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-2);
}
.about-timeline li:last-child { border-bottom: 1px solid var(--sep); }
.about-timeline strong { position: absolute; left: 0; color: var(--ee-blue); font-weight: 700; font-variant-numeric: tabular-nums; }

/* Contact: the form sits on the warm ground, the details on white cards */
.contact-section .section__watermark { display: none; }
.contact-section .contact-info__item { border-bottom-color: var(--sep); }
.contact-section .contact-info__icon,
.contact-info__icon { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
.contact-section .wp-block-image img { border-radius: var(--r-md) !important; }
.contact-early {
  margin-top: 28px;
  padding: 22px 24px;
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.contact-early h4 { font-size: 15px; font-weight: 650; margin: 0 0 6px; color: var(--ink); }
.contact-early p { font-size: 14px; line-height: 1.55; margin: 0 0 12px; color: var(--text-2); }
.contact-early .hs-link { font-size: 14px; }
.contact-section .heysec-contact-form__status { color: var(--text-2); }
.contact-section .heysec-contact-form__status--success { color: var(--green); }
.contact-section .heysec-contact-form__status--error { color: var(--red); }
.contact-section .heysec-contact-success { background: var(--surface); border: 0; box-shadow: var(--shadow-sm); color: var(--ink); border-radius: var(--r-lg); }
.contact-section .heysec-contact-success__title { color: var(--ink); }
.contact-section .heysec-contact-success__body { color: var(--text-2); }
.form-input, .form-textarea { border-radius: 14px; }
.form-input:focus, .form-textarea:focus { border-color: var(--focus); box-shadow: 0 0 0 3px var(--teal-tint); }
.form-input::placeholder, .form-textarea::placeholder { color: #8f8e87; }

/* ============================================================
   hs-* — components for the multi-product site
   ============================================================ */

.hs-sym { width: 22px; height: 22px; flex: none; }

/* Status pill with a dot — the same words and colours as the product */
.hs-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 12px 4px 10px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 650;
  line-height: 1.4;
  background: var(--fill);
  color: var(--text-2);
  white-space: nowrap;
}
.hs-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.hs-pill--green { background: var(--green-tint); color: var(--green); }
.hs-pill--orange { background: var(--orange-tint); color: var(--orange); }
.hs-pill--red { background: var(--red-tint); color: var(--red); }
.hs-pill--teal { background: var(--teal-tint); color: var(--teal); }
.hs-pill--yellow { background: var(--yellow-tint); color: var(--ink); }
.hs-pill--yellow::before { background: var(--yellow-dark); }
.hs-pill--on-dark { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.86); }
.hs-pill--on-dark::before { background: var(--yellow); }

/* Buttons for hand-written markup (forms, cards) */
.hs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 24px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 650;
  text-decoration: none;
  transition: background 0.2s var(--ease), box-shadow 0.2s var(--ease), transform 0.15s var(--ease);
}
.hs-btn:active { transform: scale(0.97); }
.hs-btn--primary { background: var(--yellow); color: var(--ink); }
.hs-btn--primary:hover { background: var(--yellow-hover); }
.hs-btn--dark { background: var(--ink); color: #fff; }
.hs-btn--dark:hover { background: #26241f; }
.hs-btn--quiet { background: var(--fill); color: var(--ink); }
.hs-btn--quiet:hover { background: rgba(3, 1, 7, 0.09); }

.hs-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 650;
  color: var(--ink);
  text-decoration: none;
}
.hs-link::after { content: "→"; transition: transform 0.2s var(--ease); }
.hs-link:hover::after { transform: translateX(3px); }

/* Eyebrow: small caps caption with the product's dot */
.hs-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}
.hs-eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--dot, var(--yellow)); }
.hs-eyebrow--cloud { --dot: var(--teal-bright); }
.hs-eyebrow--enterprise { --dot: var(--orange-bright); }

.hs-section { padding: clamp(88px, 11vw, 140px) 0; position: relative; }
.hs-section--ground { background: var(--ground); }
.hs-section--night { background: var(--night); color: #fff; }
.hs-section--night .body-lg, .hs-section--night .body-md { color: rgba(255, 255, 255, 0.7); }
.hs-section--night .hs-eyebrow { color: rgba(255, 255, 255, 0.6); }
.hs-head { max-width: 720px; margin: 0 0 56px; }
.hs-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.hs-head .h1, .hs-head .h2 { margin-bottom: 16px; }

/* ── Homepage stage: two worlds under one shield ── */
.hs-stage {
  position: relative;
  min-height: max(780px, 100svh);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: 160px;
  overflow: hidden;
  background: var(--night);
  color: #fff;
  isolation: isolate;
}
.hs-stage__worlds { position: absolute; inset: 0; z-index: -2; }
.hs-stage__world { position: absolute; top: 0; bottom: 0; width: 58%; overflow: hidden; }
.hs-stage__world--business { left: 0; -webkit-mask-image: linear-gradient(90deg, #000 62%, transparent 100%); mask-image: linear-gradient(90deg, #000 62%, transparent 100%); }
.hs-stage__world--home { right: 0; -webkit-mask-image: linear-gradient(270deg, #000 62%, transparent 100%); mask-image: linear-gradient(270deg, #000 62%, transparent 100%); }
.hs-stage__world img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.6;
  transition: opacity 0.9s var(--ease-out), transform 1.6s var(--ease-out), filter 0.9s var(--ease-out);
}
.hs-stage__world--business img { object-position: 62% 40%; filter: saturate(0.8); }
.hs-stage__world--home img { object-position: 86% 50%; }
.hs-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(14, 13, 10, 0.55) 0%, rgba(14, 13, 10, 0.05) 30%, rgba(14, 13, 10, 0.55) 62%, rgba(14, 13, 10, 0.96) 100%);
  pointer-events: none;
}
/* Pointing at a door brings its world forward */
.hs-stage:has(.hs-door--business:hover) .hs-stage__world--business img,
.hs-stage:has(.hs-door--home:hover) .hs-stage__world--home img { opacity: 0.92; transform: scale(1.035); filter: none; }
.hs-stage:has(.hs-door--business:hover) .hs-stage__world--home img,
.hs-stage:has(.hs-door--home:hover) .hs-stage__world--business img { opacity: 0.32; }

/* The animated shield stands to the right, cropped by the edge, clear of the headline */
.hs-stage .hero__shield-field { z-index: 0; overflow: hidden; }
.hs-stage .hero__shield-svg {
  --shield-size: min(920px, 100vh, 66vw);
  top: 45%;
  left: auto;
  right: calc(var(--shield-size) * -0.3);
  transform: translateY(-50%);
}
.hs-stage .shield-path { stroke: rgba(255, 255, 255, 0.2); }
/* Its inner ring would land on the phone in the photo; the phone carries the dot instead */
.hs-stage .hero__shield-svg circle { display: none; }

.hs-stage__copy { position: relative; z-index: 2; padding-bottom: clamp(40px, 6vh, 72px); }
.hs-stage .hs-eyebrow { color: rgba(255, 255, 255, 0.72); }
.hs-stage .display {
  max-width: 12ch;
  margin: 0 0 24px;
  color: #fff;
  font-size: clamp(56px, 8.6vw, 136px);
  font-weight: 750;
  line-height: 0.92;
  letter-spacing: -0.058em;
}
.hs-stage__sub { max-width: 30rem; margin: 0; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.5; color: rgba(255, 255, 255, 0.78); }

.hs-stage__doors {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
}
.hs-door {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 30px 72px 52px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
  text-decoration: none;
  transition: border-color 0.4s var(--ease-out);
}
.hs-door + .hs-door { padding-left: 40px; }
.hs-door + .hs-door::before { content: ""; position: absolute; left: 0; top: 30px; bottom: 52px; width: 1px; background: rgba(255, 255, 255, 0.16); }
.hs-door:hover { border-top-color: var(--yellow); }
.hs-door__kicker { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 650; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.62); }
.hs-door__kicker::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--yellow); }
.hs-door__name { font-size: clamp(30px, 3.4vw, 50px); font-weight: 750; letter-spacing: -0.045em; line-height: 1.05; }
.hs-door__line { max-width: 28rem; font-size: 16px; line-height: 1.55; color: rgba(255, 255, 255, 0.7); }
.hs-door__go {
  position: absolute;
  top: 30px;
  right: 16px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
  color: #fff;
  transition: background 0.35s var(--ease-out), color 0.35s, box-shadow 0.35s, transform 0.45s var(--ease-out);
}
.hs-door__go .hs-sym { width: 22px; height: 22px; }
.hs-door:hover .hs-door__go { background: var(--yellow); color: var(--ink); box-shadow: none; transform: rotate(45deg); }

/* ── Product rows on the homepage ── */
.hs-product {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}
.hs-product--flip .hs-product__copy { order: 2; }
.hs-product__copy .h1 { margin-bottom: 18px; }
.hs-product__copy .body-lg { margin-bottom: 28px; }
.hs-product__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 32px; }

.hs-bullets { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.hs-bullets li { display: flex; gap: 14px; align-items: flex-start; font-size: 16px; line-height: 1.5; color: var(--text-2); }
.hs-bullets li strong { color: var(--ink); font-weight: 650; }
.hs-bullets .hs-tile { margin-top: -2px; }
.hs-section--night .hs-bullets li { color: rgba(255, 255, 255, 0.72); }
.hs-section--night .hs-bullets li strong { color: #fff; }

/* Symbol tile — 28% of its size, like the app's leading tiles */
.hs-tile {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--yellow-tint);
  color: var(--ink);
}
.hs-tile .hs-sym { width: 20px; height: 20px; }
.hs-tile--teal { background: var(--teal-tint); color: var(--teal); }
.hs-tile--orange { background: var(--orange-tint); color: var(--orange); }
.hs-tile--green { background: var(--green-tint); color: var(--green); }
.hs-tile--red { background: var(--red-tint); color: var(--red); }
.hs-tile--lg { width: 48px; height: 48px; border-radius: 14px; }
.hs-tile--lg .hs-sym { width: 26px; height: 26px; }
.hs-section--night .hs-tile { background: rgba(249, 206, 25, 0.14); color: var(--yellow); }

/* Figure strip: three numbers on an open, ruled row */
.hs-figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 36px; border-top: 1px solid var(--sep); }
.hs-figure { padding: 20px 20px 0 0; }
.hs-figure + .hs-figure { padding-left: 20px; box-shadow: inset 1px 0 0 var(--sep); }
.hs-figure__num { display: block; font-size: clamp(21px, 2vw, 28px); font-weight: 750; letter-spacing: -0.04em; line-height: 1.05; color: var(--ink); white-space: nowrap; }
.hs-figure__text { display: block; margin-top: 8px; font-size: 13.5px; line-height: 1.45; color: var(--text-2); }

/* Two product tiles for the business offer */
.hs-offer { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.hs-offer__tile {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px;
  border-radius: var(--r-lg);
  background: var(--surface);
  text-decoration: none;
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
}
.hs-offer__tile:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.hs-offer__tile h3 { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; margin: 6px 0 0; }
.hs-offer__tile p { font-size: 14.5px; line-height: 1.5; color: var(--text-2); margin: 0; }
.hs-offer__tile .hs-link { margin-top: auto; padding-top: 8px; font-size: 14.5px; }

/* Media panels */
.hs-media {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--surface-2);
  aspect-ratio: 4 / 3;
  box-shadow: var(--shadow-md);
}
.hs-media > img { width: 100%; height: 100%; object-fit: cover; }
.hs-media--plain > img { height: auto; }
.hs-media--wide { aspect-ratio: 16 / 10; }
.hs-media--plain { background: transparent; box-shadow: none; aspect-ratio: auto; overflow: visible; }

/* ── Device frames ── */
/* The frame hugs the screenshot at its own proportions (never cropped), with
   a thin dark bezel and continuous corners. Bezel, corners and island scale
   with --phone-w, so a small phone keeps the proportions of a large one. */
.hs-phone {
  --phone-w: min(290px, 70vw);
  position: relative;
  width: var(--phone-w);
  padding: calc(var(--phone-w) * 0.031);
  border-radius: calc(var(--phone-w) * 0.172);
  background: linear-gradient(150deg, #34322c 0%, #0e0d0a 45%, #2a2823 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), 0 0 0 1px rgba(3, 1, 7, 0.3), var(--shadow-lg);
  flex: none;
}
.hs-phone img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: calc(var(--phone-w) * 0.141);
  background: var(--ground);
}
.hs-phone::before {  /* the island */
  content: "";
  position: absolute;
  z-index: 1;
  top: calc(var(--phone-w) * 0.066);
  left: 50%;
  width: 29%;
  height: calc(var(--phone-w) * 0.072);
  border-radius: 999px;
  background: #050505;
  transform: translateX(-50%);
}
.hs-phone--sm { --phone-w: min(236px, 60vw); }

.hs-browser {
  border-radius: 18px;
  overflow: hidden;
  background: var(--surface);
  box-shadow: 0 0 0 1px rgba(3, 1, 7, 0.07), var(--shadow-lg);
}
.hs-browser__bar {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 16px;
  background: var(--surface-2);
}
.hs-browser__bar i { width: 11px; height: 11px; border-radius: 50%; background: rgba(3, 1, 7, 0.14); }
.hs-browser__url {
  margin: 0 auto;
  padding: 3px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  font-weight: 550;
  color: var(--text-3);
}
.hs-browser img { display: block; width: 100%; height: auto; }

/* A stack of phones, the middle one lifted */
.hs-phones { display: flex; justify-content: center; align-items: flex-end; gap: clamp(12px, 3vw, 36px); }
.hs-phones .hs-phone:nth-child(2) { transform: translateY(-36px); }
.hs-phone-caption { text-align: center; margin-top: 18px; font-size: 14px; font-weight: 600; color: var(--text-2); }
.hs-phone-col { display: flex; flex-direction: column; align-items: center; }
.hs-phones .hs-phone-col:nth-child(2) { transform: translateY(-36px); }

/* ── Home security page ── */
.hs-hs-hero {
  position: relative;
  min-height: max(760px, 100svh);
  display: flex;
  align-items: center;
  padding: 150px 0 90px;
  overflow: hidden;
  color: #fff;
  background: var(--night);
  isolation: isolate;
}
.hs-hs-hero__bg { position: absolute; inset: 0; z-index: -2; }
.hs-hs-hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
.hs-hs-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(14, 13, 10, 0.92) 0%, rgba(14, 13, 10, 0.72) 38%, rgba(14, 13, 10, 0.12) 72%),
    linear-gradient(0deg, rgba(14, 13, 10, 0.7) 0%, transparent 30%);
}
.hs-hs-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 48px;
  align-items: center;
}
.hs-hs-hero .display { font-size: clamp(46px, 5.8vw, 84px); line-height: 1; letter-spacing: -0.05em; margin: 0 0 24px; color: #fff; }
.hs-hs-hero .display em { font-style: normal; color: var(--yellow); }
.hs-hs-hero__sub { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.55; color: rgba(255, 255, 255, 0.8); max-width: 540px; margin: 0 0 36px; }
.hs-hs-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.hs-hs-hero__actions .hs-btn--quiet { background: rgba(255, 255, 255, 0.12); color: #fff; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.hs-hs-hero__actions .hs-btn--quiet:hover { background: rgba(255, 255, 255, 0.2); }
.hs-hs-hero__note { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13.5px; font-weight: 600; color: rgba(255, 255, 255, 0.7); }
.hs-hs-hero__note span { display: inline-flex; align-items: center; gap: 8px; }
.hs-hs-hero__note .hs-sym { width: 18px; height: 18px; color: var(--yellow); }
.hs-hs-hero__device { display: flex; justify-content: center; }
.hs-hs-hero__device .hs-phone { --phone-w: min(290px, 64vw); transform: rotate(4deg); }

/* Platform strip */
.hs-platforms {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  background: var(--sep);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.hs-platform { display: flex; align-items: center; gap: 12px; padding: 22px 20px; background: var(--surface); }
.hs-platform strong { display: block; font-size: 15px; font-weight: 650; letter-spacing: -0.01em; }
.hs-platform div > span { display: block; font-size: 13px; color: var(--text-2); }

/* Dual-use story */
.hs-dual { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 28px; }
.hs-dual__card { padding: 22px; border-radius: var(--r-lg); background: var(--surface); }
.hs-dual__when { font-size: 12px; font-weight: 650; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-3); margin: 0 0 12px; display: flex; align-items: center; gap: 8px; }
.hs-dual__card p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--text-2); }
.hs-dual__card--armed { background: var(--yellow); }
.hs-dual__card--armed .hs-dual__when { color: rgba(3, 1, 7, 0.6); }
.hs-dual__card--armed p { color: rgba(3, 1, 7, 0.78); }

/* Steps */
.hs-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; counter-reset: hs-step; list-style: none; margin: 0; padding: 0; }
.hs-step {
  position: relative;
  padding: 30px 28px 32px;
  border-radius: var(--r-lg);
  background: var(--surface);
  counter-increment: hs-step;
}
.hs-step::before {
  content: counter(hs-step);
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-bottom: 22px;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--ink);
  font-size: 15px;
  font-weight: 750;
}
.hs-step h3 { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 8px; }
.hs-step p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--text-2); }
.hs-step__code {
  display: inline-block;
  margin-top: 16px;
  padding: 8px 14px;
  border-radius: 12px;
  background: var(--yellow);
  font-family: var(--font-mono);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--ink);
}
.hs-step__modes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }

/* Device capability cards */
.hs-devices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.hs-device { padding: 28px; border-radius: var(--r-lg); background: var(--surface); display: flex; flex-direction: column; }
.hs-device__head { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.hs-device__head h3 { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; margin: 0; }
.hs-device__head p { margin: 2px 0 0; font-size: 13.5px; color: var(--text-2); }
.hs-senses { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; }
.hs-senses li { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 8px 0; border-top: 1px solid var(--sep); font-size: 15px; }
.hs-senses li:first-child { border-top: 0; }
.hs-senses .hs-sym { width: 20px; height: 20px; color: var(--text-3); }
.hs-senses small { margin-left: auto; font-size: 12.5px; color: var(--text-3); text-align: right; }
.hs-device__foot { margin-top: auto; padding-top: 16px; font-size: 13px; color: var(--text-3); }

/* The four modes, drawn as the app's hero states */
.hs-modes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.hs-mode {
  position: relative;
  overflow: hidden;
  padding: 22px 20px 24px;
  border-radius: var(--r-lg);
  background: var(--surface);
  isolation: isolate;
}
.hs-mode::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -48px;
  bottom: -44px;
  width: 140px;
  aspect-ratio: 1;
  background: var(--shield-yellow) no-repeat center / contain;
  opacity: 0.18;
}
.hs-mode .hs-mode__state { font-size: 12.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; margin: 0 0 6px; display: flex; align-items: center; gap: 6px; }
.hs-mode__state .hs-sym { width: 16px; height: 16px; }
.hs-mode .hs-mode__title { color: inherit; font-size: 26px; font-weight: 800; letter-spacing: -0.04em; line-height: 1.1; margin: 0 0 8px; }
.hs-mode p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text-2); }
.hs-mode--disarmed .hs-mode__state { color: var(--green); }
.hs-mode--armed { background: var(--yellow); }
.hs-mode--armed p { color: rgba(3, 1, 7, 0.72); }
.hs-mode--armed::after, .hs-mode--pending::after, .hs-mode--alarm::after { background-image: var(--shield-white); opacity: 0.3; }
.hs-mode--pending { background: var(--orange); color: #fff; }
.hs-mode--alarm { background: var(--red); color: #fff; }
.hs-mode--pending p, .hs-mode--alarm p { color: rgba(255, 255, 255, 0.88); }

/* Feature list (2 columns of symbol + text) */
.hs-features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 40px; list-style: none; margin: 0; padding: 0; }
.hs-features li { display: flex; gap: 16px; align-items: flex-start; }
.hs-features h3 { font-size: 17px; font-weight: 700; letter-spacing: -0.015em; margin: 4px 0 4px; }
.hs-features p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--text-2); }
.hs-section--night .hs-features h3 { color: #fff; }
.hs-section--night .hs-features p { color: rgba(255, 255, 255, 0.68); }
.hs-features--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 32px; }
.hs-features--4 li { flex-direction: column; gap: 14px; }

/* Split layout used by several sections */
.hs-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 88px); align-items: center; }
.hs-split--wide-media { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.25fr); }
.hs-split--media-lead { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.9fr); }
.hs-split__media--stack { position: relative; container-type: inline-size; }
.hs-split__media--stack .hs-phone { --phone-w: min(210px, 36cqi); position: absolute; right: -18px; bottom: -40px; }

/* Roles list */
.hs-roles { list-style: none; margin: 0; padding: 0; border-radius: var(--r-lg); background: var(--surface); overflow: hidden; }
.hs-roles li { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 12px 20px; border-top: 1px solid var(--sep); }
.hs-roles li:first-child { border-top: 0; }
.hs-roles strong { display: block; font-size: 15.5px; font-weight: 650; }
.hs-roles div > span { display: block; font-size: 13.5px; color: var(--text-2); }
.hs-avatar { line-height: 1; flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; background: var(--surface-2); color: var(--text-2); }
.hs-avatar--owner { background: var(--yellow); color: var(--ink); }

/* FAQ — native disclosure, no script */
.hs-faq { max-width: 760px; margin: 0 auto; border-radius: var(--r-lg); background: var(--surface); overflow: hidden; }
.hs-faq details { border-top: 1px solid var(--sep); }
.hs-faq details:first-child { border-top: 0; }
.hs-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 26px;
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -0.01em;
  cursor: pointer;
  list-style: none;
}
.hs-faq summary::-webkit-details-marker { display: none; }
.hs-faq summary::after {
  content: "";
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--fill) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23030107' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") no-repeat center / 14px;
  transition: transform 0.25s var(--ease);
}
.hs-faq details[open] summary::after { transform: rotate(45deg); }
.hs-faq details > div { padding: 0 26px 24px; font-size: 15.5px; line-height: 1.65; color: var(--text-2); }
.hs-faq details > div p { margin: 0 0 10px; }

/* Promise strip (privacy) */
.hs-promises { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.hs-promise { padding: 28px; border-radius: var(--r-lg); background: var(--night-2); }
.hs-promise h3 { font-size: 18px; font-weight: 700; letter-spacing: -0.015em; margin: 18px 0 8px; color: #fff; }
.hs-promise p { margin: 0; font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, 0.68); }

/* Footnote under a claim */
.hs-note { font-size: 13px; line-height: 1.5; color: var(--text-3); margin-top: 18px; }
.hs-section--night .hs-note { color: rgba(255, 255, 255, 0.5); }

/* ── Spy Check (free Mac app) ── */
/* A download page, not a banner: the app, what it does, and the button, on the warm ground */
.sc-intro { padding: clamp(136px, 15vw, 184px) 0 clamp(72px, 9vw, 120px); background: var(--ground); }
.sc-intro__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: clamp(40px, 6vw, 88px); align-items: center; }
.sc-app { display: flex; align-items: center; gap: 12px; margin: 0 0 28px; }
.sc-app img { width: 68px; height: 68px; margin: -6px; }  /* the macOS icon carries its own margin */
.sc-app strong { display: block; font-size: 17px; font-weight: 700; letter-spacing: -0.015em; color: var(--ink); }
.sc-app span span { display: block; font-size: 13.5px; color: var(--text-2); }
.sc-intro .display { margin: 0 0 24px; font-size: clamp(38px, 3.9vw, 56px); line-height: 1.04; letter-spacing: -0.045em; }
.sc-intro .display em { font-style: normal; color: var(--yellow-deep); }
.sc-intro__sub { max-width: 540px; margin: 0 0 36px; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.55; color: var(--text-2); }
/* The screenshots keep the window's own rounded corners, so the shadow follows the pixels */
.sc-window img { display: block; width: 100%; height: auto; filter: drop-shadow(0 0 0.5px rgba(3, 1, 7, 0.35)) drop-shadow(0 24px 48px rgba(20, 16, 4, 0.16)); }

/* The download: one button, then what you get and what you need */
.sc-download { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.sc-download .hs-pill, .sc-download__meta { margin: 0; }
.sc-intro .sc-download__meta { align-self: stretch; }  /* full column width: shrink-to-fit plus text-wrap: pretty broke the two lines into three */
.sc-download__btn { min-height: 56px; padding: 0 32px; font-size: 16px; }
.sc-download__meta { font-size: 13.5px; line-height: 1.6; color: var(--text-3); }
.sc-download--soon .hs-pill { padding: 8px 16px 8px 14px; font-size: 14px; }
.cta-section .sc-download { align-items: center; margin-top: 36px; }
.cta-section .sc-download__btn { background: var(--ink); color: #fff; }
.cta-section .sc-download__btn:hover { background: #26241f; box-shadow: 0 10px 30px rgba(120, 90, 0, 0.3); }
.cta-section .sc-download__meta { color: #fff; font-weight: 600; text-shadow: 0 1px 2px rgba(122, 88, 0, 0.4); }
.cta-section .sc-download--soon .hs-pill { background: rgba(255, 255, 255, 0.55); color: var(--ink); }
.cta-section .sc-download--soon .hs-pill::before { background: var(--ink); }

/* Built on MVT: the authors' logos as the screenshot's caption, each linking to them */
.sc-intro__media { display: flex; flex-direction: column; gap: 28px; }
.sc-builton { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; font-size: 13.5px; font-weight: 600; color: var(--text-3); }
.sc-builton a { display: inline-flex; border-radius: 4px; transition: opacity var(--dur); }
.sc-builton a:hover { opacity: 0.75; }
.sc-builton img { width: auto; height: 44px; }
.sc-builton .sc-builton__lab { border-radius: 3px; box-shadow: 0 0 0 1px var(--sep); }

/* Built on MVT: why Spy Check exists, and who made what it runs */
.sc-mvt__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 36px clamp(36px, 5vw, 80px); align-items: start; }
.sc-mvt__why h3 { margin: 0 0 16px; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: #fff; }
.sc-mvt__why p { margin: 0 0 18px; font-size: 17px; line-height: 1.65; color: rgba(255, 255, 255, 0.72); }
.sc-mvt__why .sc-mvt__also { margin: 28px 0 0; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.12); font-size: 14.5px; color: rgba(255, 255, 255, 0.6); }
.sc-credits { display: grid; gap: 16px; }
.sc-credit { --link: var(--ink); padding: 28px 30px; border-radius: var(--r-lg); background: var(--surface); color: var(--ink); }
.sc-credit__logo { display: block; width: auto; height: 64px; margin: 0 0 22px; }
.sc-credit .sc-credit__logo--lab { height: 52px; border-radius: 3px; box-shadow: 0 0 0 1px var(--sep); }
.sc-credit h3 { margin: 0 0 8px; font-size: 19px; font-weight: 700; letter-spacing: -0.02em; }
.sc-credit p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--text-2); }
.sc-credit q { color: var(--ink); font-weight: 500; }
.sc-credit__links { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 18px 0 0; padding: 0; list-style: none; font-size: 14.5px; font-weight: 600; }
.sc-caveat { display: flex; gap: 18px; align-items: flex-start; margin: 56px 0 0; padding: 26px 28px; border-radius: var(--r-lg); background: var(--night-2); box-shadow: inset 0 0 0 1px rgba(249, 206, 25, 0.22); }
.sc-caveat p { margin: 0; font-size: 16px; line-height: 1.65; color: rgba(255, 255, 255, 0.78); }
.sc-caveat q { color: #fff; font-weight: 600; }
.sc-disclaimer { margin: 18px 0 0; font-size: 13px; line-height: 1.6; color: rgba(255, 255, 255, 0.5); }

/* What it looks for */
.sc-threats { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.sc-threat { display: flex; flex-direction: column; padding: 28px; border-radius: var(--r-lg); background: var(--ground); }
.sc-threat h3 { margin: 20px 0 8px; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
.sc-threat p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--text-2); }
.sc-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: auto 0 0; padding: 22px 0 0; list-style: none; }
.sc-tags li { padding: 6px 12px; border-radius: 999px; background: var(--surface); box-shadow: var(--shadow-sm); font-size: 13.5px; font-weight: 600; }
.sc-threat .sc-threat__count { margin-top: auto; padding-top: 22px; font-size: 15px; font-weight: 600; color: var(--ink); }
.sc-threat__count strong { margin-right: 4px; font-size: clamp(36px, 3.4vw, 48px); font-weight: 800; letter-spacing: -0.05em; line-height: 1; }

/* Where the traces come from: MVT's list, credited to the researchers behind each spyware */
.sc-sources { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 2fr); gap: 24px clamp(32px, 5vw, 72px); margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--sep); }
.sc-sources__head h3 { margin: 0 0 10px; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
.sc-sources__head p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--text-2); }
.sc-sources__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 32px; margin: 0; }
.sc-sources__list dt { font-size: 14.5px; font-weight: 700; color: var(--ink); }
.sc-sources__list dd { margin: 4px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--text-2); }

/* How it works: what each phone needs, beside the app's own guide */
.sc-needs { grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 4px; }

/* The result: the app's three verdicts */
.sc-verdicts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sc-verdicts .hs-mode--disarmed { background: var(--ground); }

/* ─── Waitlist: which product ─── */
.waitlist-product { border: 0; margin: 0 0 24px; padding: 0; min-width: 0; }
.waitlist-product legend { font-size: 13px; font-weight: 600; margin-bottom: 10px; color: var(--ink); }
.waitlist-product__options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.waitlist-product__option { position: relative; display: block; cursor: pointer; }
.waitlist-product__option input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.waitlist-product__card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--ground);
  box-shadow: inset 0 0 0 1.5px transparent;
  color: var(--ink);
  transition: background 0.2s, box-shadow 0.2s;
}
.waitlist-product__card strong { font-size: 15px; font-weight: 650; }
.waitlist-product__card span { font-size: 13px; color: var(--text-2); }
.waitlist-product__option:hover .waitlist-product__card { background: var(--surface-2); }
.waitlist-product__option input:checked + .waitlist-product__card { background: var(--yellow-tint); box-shadow: inset 0 0 0 2px var(--yellow-dark); }
.waitlist-product__option input:focus-visible + .waitlist-product__card { outline: 2px solid var(--focus); outline-offset: 3px; }
.waitlist-gone-note { font-size: 13px; color: var(--text-2); background: var(--ground); border-radius: 12px; padding: 10px 14px; margin: 0 0 18px; }

/* ─── Blog list: covers keep their own 3:2 drawing instead of a thin strip or a square crop ─── */
.bl-card__img { height: auto; aspect-ratio: 3 / 2; }
.bl-list-item { grid-template-columns: 84px 1fr auto; }
.bl-list-item__img { width: 84px; height: 56px; }
@media (max-width: 768px) {
  .bl-list-item { grid-template-columns: 72px 1fr; }
  .bl-list-item__img { width: 72px; height: 48px; }
  .bl-featured__img { min-height: 0; height: auto; aspect-ratio: 3 / 2; }
}

/* ─── Pagination: one capsule of pages between two capsule buttons ─── */
.wp-block-query-pagination {
  --pg-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 3.5 10.5 8 6 12.5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0;
  padding: 56px 0 0;
}
.wp-block-query-pagination > * { margin: 0 !important; }
.wp-block-query-pagination-previous,
.wp-block-query-pagination-next {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--sep);
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: box-shadow var(--dur), transform var(--dur);
}
.wp-block-query-pagination-previous { padding-left: 14px; }
.wp-block-query-pagination-next { padding-right: 14px; }
.wp-block-query-pagination-previous::before,
.wp-block-query-pagination-next::after {
  content: "";
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background: currentColor;
  -webkit-mask: var(--pg-chevron) no-repeat center / contain;
  mask: var(--pg-chevron) no-repeat center / contain;
}
.wp-block-query-pagination-previous::before { transform: scaleX(-1); }
.wp-block-query-pagination-previous:hover,
.wp-block-query-pagination-next:hover { box-shadow: var(--shadow-md), inset 0 0 0 1px var(--sep); transform: translateY(-1px); }
.wp-block-query-pagination-numbers {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--sep);
}
.wp-block-query-pagination-numbers .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border-radius: 999px;
  color: var(--text-2);
  font-size: 14px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  transition: background var(--dur), color var(--dur);
}
.wp-block-query-pagination-numbers a.page-numbers:hover { background: var(--fill); color: var(--ink); }
.wp-block-query-pagination-numbers .page-numbers.current { background: var(--yellow); color: var(--ink); font-weight: 700; }
.wp-block-query-pagination-numbers .page-numbers.dots { min-width: 24px; padding: 0; color: var(--text-3); }
.wp-block-query-pagination a:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

/* ─── Text links: a plain underline, the same everywhere ───
   A link inside running text is ink (white on night) and underlined, never just a
   word in the text colour. Links that are components (buttons, cards, menu items,
   pills) carry a class and keep their own look; query-loop items (li.wp-block-post)
   are cards, not text. Links to other sites open in a new tab (inc/links.php), which
   screen readers are told. */
:root { --link: var(--ink); }
.hs-section--night, .section--navy { --link: #fff; }
main :where(p, li:not(.wp-block-post), dd, dt, td, th, blockquote, figcaption, label) a:where(:not([class])) {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
main :where(p, li:not(.wp-block-post), dd, dt, td, th, blockquote, figcaption, label) a:where(:not([class])):hover { text-decoration-thickness: 2px; }
main :where(p, li:not(.wp-block-post), dd, dt, td, th, blockquote, figcaption, label) a:where(:not([class]))[target="_blank"]::after { content: "" / " (opens in a new tab)"; }

/* ─── Small utilities ─── */
.hs-section--night .hs-link { color: #fff; }
.hs-section--tight { padding: 48px 0; }
.hs-gap-top { margin-top: 72px; }
.hs-pill--on-yellow { background: rgba(255, 255, 255, 0.55); color: var(--ink); }
.hs-pill--on-yellow::before { background: var(--ink); }
.hs-roles { margin-top: 28px; box-shadow: var(--shadow-sm); }
.hs-offer { margin-top: 16px; }
.waitlist-product { margin-top: 22px; }
.waitlist-panel > .h3 { margin-bottom: 8px; }
.waitlist-panel > .body-sm { margin-bottom: 24px; }
.contact-info__icon .hs-sym { width: 20px; height: 20px; }
.pricing-hero__pill .hs-sym { width: 16px; height: 16px; color: var(--yellow); }
/* hidden must win over component display rules (grid/flex) */
[data-for-product][hidden], .heysec-waitlist-form[hidden] { display: none !important; }
/* On a white section, cards sit on the warm ground tone instead */
.hs-section:not(.hs-section--ground):not(.hs-section--night) .hs-offer__tile,
.hs-section:not(.hs-section--ground):not(.hs-section--night) .hs-device,
.hs-section:not(.hs-section--ground):not(.hs-section--night) .hs-dual__card:not(.hs-dual__card--armed),
.hs-section:not(.hs-section--ground):not(.hs-section--night) .hs-roles { background: var(--ground); box-shadow: none; }

/* ─── Responsive ─── */
@media (max-width: 1024px) {
  /* Five items never fill a 3- or 2-column grid: wrap instead, so the last row stretches rather than leaving an empty cell */
  .hs-platforms { display: flex; flex-wrap: wrap; }
  .hs-platform { flex: 1 1 calc(33.334% - 1px); }
  .hs-modes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hs-promises { grid-template-columns: 1fr; }
  .hs-features--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hs-features--4 li { flex-direction: row; gap: 16px; }
  .nav__dropdown-menu:has(.nav__group) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nav__dropdown-menu a.nav__feature { grid-column: 1 / -1; min-height: 150px; }
  .nav__dropdown-menu:has(.nav-group--wide) a.nav__feature { grid-row: auto; }
  .nav__group.nav-group--wide { grid-column: 1 / -1; }
  .sc-verdicts { grid-template-columns: minmax(0, 1fr); }
  .sc-sources { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .hs-product, .hs-split, .hs-split--wide-media, .hs-split--media-lead, .hs-hs-hero__grid, .hs-devices, .hs-steps, .hs-stage__doors, .sc-intro__grid, .sc-threats, .sc-mvt__grid { grid-template-columns: minmax(0, 1fr); }
  .sc-sources__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hs-product--flip .hs-product__copy { order: 0; }
  .hs-hs-hero__device { display: none; }
  /* Overhang the photo edge as on desktop: an inset phone leaves a sliver of the photo's corner showing */
  .hs-split__media--stack .hs-phone { right: -10px; bottom: -28px; }
  .hs-hs-hero { min-height: 0; padding: 120px 0 64px; }
  .hs-hs-hero__bg img { object-position: 88% 50%; }
  .hs-hs-hero::after { background: linear-gradient(180deg, rgba(14, 13, 10, 0.25) 0%, rgba(14, 13, 10, 0.6) 35%, rgba(14, 13, 10, 0.92) 70%); }
  .page-hero.page-hero--photo { min-height: 0; padding: 120px 0 64px; }
  .page-hero__photo img { object-position: 82% 50%; }
  .page-hero__photo::after { background: linear-gradient(180deg, rgba(14, 13, 10, 0.25) 0%, rgba(14, 13, 10, 0.6) 35%, rgba(14, 13, 10, 0.92) 70%); }
  .hs-door + .hs-door { padding-left: 0; }
  .hs-door + .hs-door::before { display: none; }
  .hs-door { padding: 24px 64px 28px 0; }
  .hs-stage__doors { padding-bottom: 24px; }
}
@media (max-width: 640px) {
  .hs-figures, .hs-offer, .hs-dual, .hs-features, .hs-modes { grid-template-columns: minmax(0, 1fr); }
  /* One row per platform: side by side, the tile left too little room and names broke mid-phrase */
  .hs-platform { flex-basis: 100%; padding: 16px 20px; }
  .hs-phones .hs-phone-col:nth-child(1), .hs-phones .hs-phone-col:nth-child(3) { display: none; }
  .hs-phones .hs-phone-col:nth-child(2) { transform: none; }
  .hs-faq summary { padding: 18px 20px; font-size: 16px; }
  .hs-faq details > div { padding: 0 20px 20px; }
  .sc-credit, .sc-caveat { padding: 24px 22px; }
  .sc-caveat { flex-direction: column; gap: 14px; }
  .page-hero { padding: 132px 24px 80px; }
  .waitlist-product__options { grid-template-columns: minmax(0, 1fr); }
  .hs-figure, .hs-figure + .hs-figure { padding: 16px 0; box-shadow: none; }
  .hs-figure + .hs-figure { border-top: 1px solid var(--sep); }
  .hs-stage { padding-top: 120px; }
  .hs-stage .hero__shield-svg { --shield-size: 120vw; top: 30%; right: -52vw; }
  .hs-stage__world { width: 70%; }
  .hs-door__go { width: 44px; height: 44px; right: 0; top: 24px; }
  /* Previous / Next keep their text as the accessible name but show only the chevron */
  main:has(.post-cover) .post-hero { padding-bottom: 120px; }
  main .wp-block-post-featured-image.post-cover { margin: -144px auto 40px; border-radius: var(--r-md); }
  .wp-block-query-pagination { gap: 8px; }
  .wp-block-query-pagination-previous,
  .wp-block-query-pagination-next { width: 44px; padding: 0; justify-content: center; font-size: 0; }
  .wp-block-query-pagination-numbers .page-numbers { min-width: 32px; height: 32px; padding: 0 8px; }
  .wp-block-query-pagination-numbers .page-numbers.dots { min-width: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .hs-stage__world img, .hs-door, .hs-door__go, .hs-offer__tile, .nav__inner, .nav__feature-go { transition: none; }
}