/* PasswordFix marketing site. Colours, type and spacing follow Figma file
   O4eDVICUcSz43hiqtQSGC6 (variables on frame 1:32). Mobile layouts are ours. */

@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url("/assets/fonts/dm-sans-latin-opsz-normal.woff2") format("woff2");
}

@font-face {
  font-family: "DM Sans";
  font-style: italic;
  font-weight: 100 1000;
  font-display: swap;
  src: url("/assets/fonts/dm-sans-latin-opsz-italic.woff2") format("woff2");
}

:root {
  /* Figma variables */
  --surface-primary: #001632;
  --surface-brand: #002662;
  --surface-secondary: #097eef;
  --surface-tertiary: #00ffec;
  --surface-invert: #ffffff;
  --brand-dark-mint: #15899c;
  --grey-light: #f1f8ff;
  --text-primary: #ffffff;
  --text-invert: #001632;
  --text-secondary: #097eef;
  --border-secondary: #00ffec;
  --shadow: 0 0 20px rgb(0 0 0 / 5%);

  --font: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --container: 1376px;
  --gutter: 16px;
  --radius: 6px;
  --focus: 3px solid var(--surface-tertiary);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font);
  font-variation-settings: "opsz" 14;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text-invert);
  background: var(--surface-invert);
}

img,
svg {
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
}

:focus-visible {
  outline: var(--focus);
  outline-offset: 2px;
}

.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 10;
  padding: 10px 16px;
  background: var(--surface-tertiary);
  color: var(--text-invert);
  font-weight: 600;
  border-radius: var(--radius);
}

.skip-link:focus {
  top: var(--gutter);
}

main:focus {
  outline: none;
}

/* Buttons */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 10px 11px;
  border-radius: var(--radius);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}

.button--primary {
  background: var(--surface-tertiary);
  color: var(--text-invert);
}

.button--primary:hover {
  background: #5cfff3;
}

/* Site-wide notice */
.notice {
  background: var(--surface-brand);
  color: var(--text-primary);
  font-size: 0.875rem;
  text-align: center;
}

.notice p {
  margin: 0;
  padding-block: 6px;
}

/* Header */
.site-header {
  position: relative;
  background: var(--surface-primary);
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-secondary);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 72px;
  padding-block: 12px;
}

.logo {
  display: inline-flex;
  align-items: center;
  margin-right: auto;
  color: var(--text-primary);
  text-decoration: none;
}

/* Logo artwork is for dark backgrounds (white "Password"). */
.logo img {
  display: block;
}

@media (max-width: 479px) {
  .site-header .logo img {
    width: 150px;
    height: auto;
  }
}

.site-header__cta {
  order: 3;
}

/* Navigation - mobile first: a toggled panel under the header bar. */
.site-nav {
  order: 2;
}

.site-nav__toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 12px;
  background: none;
  border: 1px solid var(--surface-tertiary);
  border-radius: var(--radius);
  color: var(--text-primary);
  font: inherit;
  cursor: pointer;
}

.site-nav__toggle-icon,
.site-nav__toggle-icon::before,
.site-nav__toggle-icon::after {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
}

.site-nav__toggle-icon {
  position: relative;
}

.site-nav__toggle-icon::before,
.site-nav__toggle-icon::after {
  content: "";
  position: absolute;
  left: 0;
}

.site-nav__toggle-icon::before {
  top: -6px;
}

.site-nav__toggle-icon::after {
  top: 6px;
}

.site-nav__list,
.site-nav__sub,
.site-footer ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav__list {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 5;
  padding: 8px var(--gutter) 16px;
  background: var(--surface-primary);
  border-bottom: 1px solid var(--border-secondary);
}

/* Without JavaScript the menu stays open, so every link is reachable. */
.js .site-nav__list:not(.is-open),
.js .site-nav__sub:not(.is-open) {
  display: none;
}

html:not(.js) .site-nav__toggle {
  display: none;
}

html:not(.js) .site-nav__list {
  position: static;
  padding: 0;
  border: 0;
}

.site-nav__list a,
.site-nav__group-button {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 44px;
  padding: 8px 0;
  background: none;
  border: 0;
  color: var(--text-primary);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.site-nav__group-button::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-left: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}

.site-nav__group-button[aria-expanded="true"]::after {
  transform: translateY(2px) rotate(-135deg);
}

.site-nav__sub {
  padding-left: 16px;
}

.site-nav a[aria-current="page"],
.site-nav__group-button[data-current="true"] {
  color: var(--surface-tertiary);
  text-decoration: underline;
  text-underline-offset: 6px;
}

.site-nav a:hover,
.site-nav__group-button:hover {
  color: var(--surface-tertiary);
}

@media (max-width: 479px) {
  .site-header__inner {
    flex-wrap: wrap;
  }

  .site-header__cta {
    order: 4;
    width: 100%;
  }
}

/* Desktop navigation (Figma: 16px items, 32px apart, 30px vertical padding). */
@media (min-width: 1180px) {
  .site-header__inner {
    gap: 40px;
    padding-block: 30px;
    min-height: 0;
  }

  .site-nav {
    order: 2;
  }

  .site-nav__toggle {
    display: none;
  }

  .js .site-nav__list:not(.is-open),
  .site-nav__list,
  html:not(.js) .site-nav__list {
    position: static;
    display: flex;
    align-items: center;
    gap: 32px;
    padding: 0;
    background: none;
    border: 0;
  }

  .site-nav__list a,
  .site-nav__group-button {
    width: auto;
    padding: 0;
    white-space: nowrap;
  }

  .site-nav__group {
    position: relative;
  }

  .site-nav__sub {
    position: absolute;
    left: -16px;
    top: calc(100% + 12px);
    z-index: 5;
    min-width: 220px;
    padding: 8px 16px;
    background: var(--surface-primary);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
  }

  html:not(.js) .site-nav__sub {
    display: none;
  }

  html:not(.js) .site-nav__group:focus-within .site-nav__sub,
  html:not(.js) .site-nav__group:hover .site-nav__sub {
    display: block;
  }
}

/* Content sections (Figma: 1240px content, 120px/100px section padding). */
.container--content {
  max-width: calc(1240px + 2 * var(--gutter));
}

.accent {
  color: var(--text-secondary);
}

.button--large {
  min-height: 50px;
  padding: 14px 20px;
}

.section {
  padding-block: 64px;
}

.section--tint {
  background: var(--grey-light);
}

.section__title {
  margin: 0;
  font-size: clamp(2.25rem, 5vw, 4rem);
  font-weight: 500;
  line-height: 1.2;
}

.section__title .accent {
  display: block;
}

.section__body,
.hero__body,
.band__body {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 300;
  line-height: 1.5;
}

/* Images. Figma artwork is temporary until the designer delivers (owner, option B);
   a div.media without an image is a grey placeholder. */
img.media {
  display: block;
  height: auto;
  background: none;
  object-fit: cover;
}

.media {
  display: grid;
  place-items: center;
  width: 100%;
  border-radius: 12px;
  background: #e4ecf6;
  color: #3d4f66;
  font-size: 0.875rem;
}

.media--hero {
  aspect-ratio: 629 / 480;
  background: rgb(255 255 255 / 8%);
  color: #c9d6e6;
}

.media--card {
  aspect-ratio: 244 / 223;
  max-width: 244px;
}

.media--safe {
  aspect-ratio: 223 / 168;
  max-width: 223px;
}

.media--wide {
  aspect-ratio: 637 / 424;
}

.media--phones {
  aspect-ratio: 589 / 438;
}

/* Hero (navy with three translucent mint waves). */
.hero {
  position: relative;
  overflow: hidden;
  background:
    url("/assets/img/home/wave-3.svg") bottom / 100% 60% no-repeat,
    url("/assets/img/home/wave-2.svg") bottom / 100% 80% no-repeat,
    url("/assets/img/home/wave-1.svg") bottom / 100% 100% no-repeat,
    var(--surface-primary);
  color: var(--text-primary);
}

.hero__inner {
  display: grid;
  gap: 40px;
  align-items: center;
  padding-block: 56px;
}

.hero__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

.hero__title {
  margin: 0;
  font-size: clamp(2.5rem, 6vw, 4.375rem);
  font-weight: 500;
  line-height: 1.2;
}

/* Two vaults */
.split-intro {
  display: grid;
  gap: 24px;
  margin-bottom: 40px;
}

.cards {
  display: grid;
  gap: 24px;
}

.card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 24px;
  background: var(--surface-invert);
  border-radius: 12px;
  box-shadow: 0 0 10px rgb(0 0 0 / 5%), 0 0 0 1px rgb(0 22 50 / 6%);
}

.card__head {
  display: flex;
  align-items: center;
  gap: 20px;
}

.card__head img {
  flex: none;
  width: 64px;
  height: 64px;
}

.card__title {
  margin: 0 0 4px;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.43;
}

.card__subtitle {
  margin: 0;
  font-size: 1rem;
  letter-spacing: 0.12em;
  line-height: 1.5;
  text-transform: uppercase;
}

.card__body {
  display: grid;
  gap: 20px;
  align-items: center;
}

.checklist {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 1.125rem;
  font-weight: 300;
}

.checklist li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.checklist li::before {
  content: "";
  flex: none;
  width: 14px;
  height: 27px;
  margin-top: -2px;
  background: url("/assets/img/home/check-vault.svg") center / contain no-repeat;
}

.checklist--safe li::before {
  background-image: url("/assets/img/home/check-safe.svg");
  filter: brightness(0.75);
}

/* Split rows (text beside an image) */
.split {
  display: grid;
  gap: 32px;
  align-items: center;
}

.split__text {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Feature rows (icon, title, text) */
.features {
  display: grid;
  gap: 32px;
  margin: 48px 0 0;
  padding: 0;
  list-style: none;
}

.features--stacked {
  margin-top: 8px;
}

.feature {
  display: flex;
  align-items: center;
  gap: 24px;
}

.feature > img,
.feature__icon-box {
  flex: none;
  width: 84px;
  height: 84px;
}

.feature__icon-box {
  display: grid;
  place-items: center;
  border-radius: 20px;
  background: rgb(0 38 98 / 10%);
}

.feature__title {
  margin: 0 0 4px;
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.43;
}

.feature p {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 300;
}

/* Closing band */
.band {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin-top: 64px;
  padding: 48px 24px;
  border-radius: 20px;
  background: var(--surface-brand);
  color: var(--text-primary);
  text-align: center;
}

.band__title {
  max-width: 814px;
  margin: 0;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 500;
  line-height: 1.2;
}

.band__body {
  max-width: 678px;
}

@media (min-width: 768px) {
  .card__body {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .media--card {
    width: 200px;
  }

  .media--safe {
    width: 223px;
  }
}

@media (min-width: 1024px) {
  .section {
    padding-block: 120px;
  }

  .hero__inner {
    grid-template-columns: minmax(0, 503px) minmax(0, 629px);
    justify-content: space-between;
    min-height: 700px;
    padding-block: 64px;
  }

  .hero__text {
    gap: 34px;
  }

  .split-intro {
    grid-template-columns: minmax(0, 617px) minmax(0, 1fr);
    gap: 50px;
    margin-bottom: 50px;
  }

  .cards {
    grid-template-columns: 1fr 1fr;
    gap: 31px;
  }

  .card {
    padding: 40px;
  }

  .card__head {
    gap: 30px;
  }

  .card__head img {
    width: 84px;
    height: 84px;
  }

  .card__subtitle {
    font-size: 1.125rem;
  }

  .split {
    grid-template-columns: minmax(0, 520px) minmax(0, 637px);
    justify-content: space-between;
    gap: 50px;
  }

  .split--media-first {
    grid-template-columns: minmax(0, 589px) minmax(0, 617px);
    gap: 40px;
  }

  .split--media-first .split__text {
    gap: 40px;
  }

  .features {
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin-top: 120px;
  }

  .features--stacked {
    grid-template-columns: 1fr;
    gap: 40px;
    margin-top: 0;
  }

  .feature {
    gap: 30px;
  }

  .feature__title {
    font-size: 1.5rem;
  }

  .band {
    margin-top: 120px;
    padding: 80px;
  }
}

/* Features page (Figma 1:1108) */

/* Centred hero: three mint waves, 582px tall, set 0 / 123 / 247px below the bottom edge. */
.hero--center {
  background:
    url("/assets/img/features/wave-3.svg") left 0 bottom -247px / 100% 582px no-repeat,
    url("/assets/img/features/wave-2.svg") left 0 bottom -123px / 100% 582px no-repeat,
    url("/assets/img/features/wave-1.svg") left 0 bottom 0 / 100% 582px no-repeat,
    var(--surface-primary);
}

.hero--center .hero__text {
  align-items: center;
  max-width: 1116px;
  margin-inline: auto;
  text-align: center;
}

.hero--center .hero__title .accent {
  display: block;
}

.hero--center .hero__body {
  max-width: 720px;
}

.section--flush-top {
  padding-top: 0;
}

/* Three feature cards with a tinted checklist panel */
.card--feature {
  gap: 32px;
}

.card__icon {
  flex: none;
  width: 64px;
  height: 64px;
}

.feature__icon-box--mint {
  background: rgb(0 255 236 / 10%);
}

.card__content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.card__text {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 300;
}

.card__panel {
  gap: 10px;
  padding: 20px;
  border: 1px solid;
  border-radius: 12px;
}

.card__panel--navy {
  border-color: var(--surface-brand);
  background: rgb(0 38 98 / 5%);
}

.card__panel--blue {
  border-color: var(--surface-secondary);
  background: rgb(9 126 239 / 5%);
}

.card__panel--mint {
  border-color: var(--border-secondary);
  background: rgb(0 255 236 / 5%);
}

.checklist--navy li::before {
  background-image: url("/assets/img/features/check-navy.svg");
}

/* "All features": available items with ticks; planned items with a plain
   bullet and a "Planned" tag, never a tick (Website_Image_Changes rule 10). */
.feature-list {
  max-width: calc(820px + 2 * var(--gutter));
}

.feature-list__title {
  margin-bottom: 40px;
  text-align: center;
}

.feature-list__group--planned {
  display: grid;
  gap: 16px;
  margin: 32px 0 0;
  padding: 32px 0 0;
  border-top: 1px solid rgb(0 38 98 / 15%);
  list-style: none;
  font-size: 1.125rem;
  font-weight: 300;
}

.feature-list__group--planned li {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  padding-left: 24px;
}

.feature-list__group--planned li::before {
  content: "";
  position: absolute;
  top: 0.6em;
  left: 4px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--surface-brand);
}

.tag {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  background: rgb(9 126 239 / 10%);
  color: var(--surface-brand);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.5;
}

/* Band with text beside the mockup */
.band--split {
  align-items: stretch;
  gap: 40px;
  margin-top: 0;
  text-align: left;
}

.band__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.media--band {
  aspect-ratio: 518 / 394;
  max-width: 518px;
}

@media (min-width: 1024px) {
  .hero--center .hero__inner {
    grid-template-columns: minmax(0, 1fr);
    min-height: 549px;
  }

  .cards--three {
    grid-template-columns: repeat(3, 1fr);
  }

  .card--feature {
    gap: 50px;
  }

  .card__icon {
    width: 84px;
    height: 84px;
  }

  .band--split {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-top: 0;
  }

  .band--split .band__text {
    flex: 0 1 526px;
  }

  .band--split .band__body {
    max-width: 374px;
  }

  .band--split .media--band {
    flex: 0 1 518px;
  }
}

/* Emergency Safe page (Figma 1:1445) */

/* Hero: picture of the two safes with a label box under each. */
.hero__visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 25px;
}

.media--safes {
  aspect-ratio: 585 / 340;
  max-width: 585px;
  object-position: 50% 46%;
}

.vault-labels {
  display: flex;
  justify-content: center;
  gap: 16px;
  width: 100%;
}

.vault-label {
  flex: 1 1 150px;
  max-width: 208px;
  margin: 0;
  padding: 20px;
  border-radius: 14px;
  font-size: 0.75rem;
  font-weight: 300;
  line-height: 1.5;
  text-align: center;
}

.vault-label strong {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
}

.vault-label--vault {
  background: rgb(9 126 239 / 10%);
}

.vault-label--safe {
  background: rgb(0 255 236 / 10%);
}

/* Cards with an app mockup beside the checklist */
.card__body--mockup {
  align-items: start;
}

.checklist--teal li::before {
  background-image: url("/assets/img/emergency-safe/check-teal.svg");
}

.mockup {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  max-width: 320px;
  padding: 20px;
  border-radius: 14px;
  background: var(--grey-light);
}

.mockup__search {
  margin: 0;
  padding: 10px;
  border: 1px solid #e5e5e5;
  border-radius: 35px;
  font-size: 0.875rem;
  font-weight: 300;
  line-height: 1.5;
}

.mockup__list {
  display: grid;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mockup__list li {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mockup__list img {
  flex: none;
  width: 40px;
  height: 40px;
}

.mockup__list span {
  min-width: 0;
  font-size: 0.75rem;
  font-weight: 300;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.mockup__list strong {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
}

/* Devices: which vaults each device can open. The toggles are pictures, not controls. */
.devices {
  display: grid;
  gap: 48px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.device {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}

.device__picture {
  width: auto;
  max-width: 100%;
  height: 240px;
  object-fit: contain;
}

.device__card {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  max-width: 360px;
  padding: 20px;
  border-radius: 10px;
  background: var(--surface-invert);
}

.device__name {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.43;
  text-align: center;
}

.device__vaults {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 1.125rem;
  font-weight: 300;
}

.device__vaults li {
  display: flex;
  align-items: center;
  gap: 10px;
}

.device__vaults img {
  flex: none;
  width: 40px;
  height: 40px;
}

.toggle {
  display: flex;
  flex: none;
  align-items: center;
  width: 45px;
  height: 21px;
  margin-left: auto;
  padding: 5px;
  border-radius: 41px;
  background: rgb(9 126 239 / 10%);
}

.toggle::after {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 10px;
  background: var(--surface-secondary);
}

.toggle--on {
  justify-content: flex-end;
}

.toggle--safe {
  background: rgb(0 255 236 / 10%);
}

.toggle--safe::after {
  background: var(--surface-tertiary);
}

.device__result {
  display: grid;
  place-items: center;
  width: 100%;
  max-width: 309px;
  min-height: 50px;
  margin: 0;
  padding: 12px 20px;
  border-radius: var(--radius);
  background: var(--surface-tertiary);
  color: var(--text-invert);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
}

/* Setup and day-to-day panels */
.info-panels {
  display: grid;
  gap: 24px;
  margin-top: 64px;
}

.info-panel {
  padding: 24px;
  border-radius: 12px;
  background: var(--grey-light);
}

.info-panel__title {
  margin: 0 0 16px;
  font-size: 1.75rem;
  font-weight: 500;
  line-height: 1.2;
}

.info-panel p {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 300;
  line-height: 1.5;
}

/* Important limitation */
.limitation {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 64px;
  padding: 32px 24px;
  border-radius: 20px;
  background: var(--surface-brand);
  color: var(--text-primary);
}

.limitation__icon {
  flex: none;
  width: 96px;
  height: 96px;
}

.limitation__text {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 856px;
}

.limitation__label {
  margin: 0;
  color: var(--surface-tertiary);
  font-size: 1.125rem;
  line-height: 1.5;
}

.limitation__title {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 500;
  line-height: 1.2;
}

.limitation__body {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 300;
  line-height: 1.5;
}

@media (min-width: 768px) {
  .card__body--mockup {
    grid-template-columns: minmax(0, 1fr) 208px;
    gap: 50px;
  }
}

@media (min-width: 1024px) {
  .hero--safe .hero__inner {
    grid-template-columns: minmax(0, 617px) minmax(0, 585px);
    min-height: 756px;
  }

  .vault-labels {
    gap: 73px;
  }

  /* Two cards side by side leave too little room for the mockup until 1200px. */
  .card__body--mockup {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }

  .devices {
    grid-template-columns: repeat(3, 1fr);
    gap: 31px;
  }

  .device__picture {
    height: 303px;
  }

  .info-panels {
    grid-template-columns: 1fr 1fr;
    gap: 31px;
    margin-top: 120px;
  }

  .info-panel {
    padding: 40px;
  }

  .limitation {
    flex-direction: row;
    align-items: center;
    gap: 30px;
    margin-top: 120px;
    padding: 80px;
  }

  .limitation__icon {
    width: 182px;
    height: 182px;
  }
}

@media (min-width: 1200px) {
  .card__body--mockup {
    grid-template-columns: minmax(0, 1fr) 208px;
    gap: 50px;
  }
}

/* Devices and vaults page (Figma 1:2060) */

/* Section label above a heading (Figma: 18px, wide tracking, upper case). */
.eyebrow {
  margin: 0;
  font-size: 1.125rem;
  letter-spacing: 0.12em;
  line-height: 1.5;
  text-transform: uppercase;
}

.section__title--inline .accent {
  display: inline;
}

.media--devices-hero {
  aspect-ratio: 3 / 2;
}

/* White frame around the dashboard picture. */
.media-frame {
  padding: 16px;
  border-radius: 20px;
  background: var(--surface-invert);
  box-shadow: var(--shadow);
}

.media--dashboard {
  aspect-ratio: 644 / 421;
  border-radius: 0;
}

/* Placeholders for the phone mockups (owner DV-1: the Figma pictures contradict the text beside them). */
.media--approval {
  aspect-ratio: 611 / 675;
  max-width: 360px;
  margin-inline: auto;
}

.media--lost-phone {
  aspect-ratio: 327 / 685;
  max-width: 220px;
  margin-inline: auto;
}

.feature__icon-box--blue {
  background: rgb(9 126 239 / 10%);
}

.feature__icon-box--amber {
  background: rgb(255 157 0 / 10%);
}

/* Four tiles with the icon above the text. */
.features--columns .feature {
  flex-direction: column;
  align-items: flex-start;
}

/* Approval checklist: tick, title, text. */
.check-items {
  display: grid;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.check-items li {
  position: relative;
  padding-left: 34px;
}

.check-items li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 14px;
  height: 31px;
  background: url("/assets/img/devices-and-vaults/check.svg") center / contain no-repeat;
}

.check-items__title {
  margin: 0 0 5px;
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.43;
}

.check-items p {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 300;
  line-height: 1.5;
}

/* Centred section heading. */
.section-intro {
  display: grid;
  gap: 20px;
  justify-items: center;
  max-width: 1032px;
  margin: 0 auto 40px;
  text-align: center;
}

.section-intro .section__body {
  max-width: 686px;
}

/* Device state cards. */
.state-cards {
  display: grid;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.state-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  padding: 24px;
  border-radius: 12px;
  background: var(--surface-invert);
  box-shadow: var(--shadow);
}

.state-card > div {
  display: grid;
  gap: 20px;
}

.state-card .feature__title {
  margin: 0;
}

.state-card p {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 300;
}

@media (min-width: 768px) {
  .features--columns,
  .state-cards {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1024px) {
  .hero--devices .hero__inner {
    grid-template-columns: minmax(0, 617px) minmax(0, 581px);
    min-height: 756px;
  }

  .split--overview {
    grid-template-columns: minmax(0, 486px) minmax(0, 704px);
  }

  .media-frame {
    padding: 30px;
  }

  .features--columns {
    grid-template-columns: repeat(4, 1fr);
    gap: 65px;
    margin-top: 80px;
  }

  .features--columns .feature {
    gap: 50px;
  }

  .features--columns .feature__title {
    margin-bottom: 20px;
  }

  .split--approval {
    grid-template-columns: minmax(0, 611px) minmax(0, 564px);
  }

  .split--approval .split__text {
    gap: 20px;
  }

  .media--approval {
    max-width: 611px;
  }

  .check-items__title {
    font-size: 1.5rem;
  }

  .split--lost {
    grid-template-columns: minmax(0, 640px) minmax(0, 550px);
  }

  .split--lost .features--stacked {
    margin-top: 26px;
  }

  .media--lost-phone {
    max-width: 327px;
  }

  .section-intro {
    margin-bottom: 50px;
  }

  .state-cards {
    grid-template-columns: repeat(4, 1fr);
    gap: 31px;
  }

  .state-card {
    gap: 50px;
    padding: 40px;
  }
}

/* How it works page (Figma 1:2628) */

/* Steps: text first in the source (owner HW-5); odd steps show the picture on the left on wide screens. */
.step__badge {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  min-height: 50px;
  margin: 0;
  padding: 0 20px;
  border-radius: var(--radius);
  background: var(--surface-tertiary);
  font-weight: 600;
  line-height: 1.2;
}

.step__title {
  margin: 0;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 500;
  line-height: 1.2;
}

/* W2-8: Figma's white 16px on #097eef is 4.01:1 (WCAG AA needs 4.5:1); darkened to #0874dc (4.62:1),
   listed for the designer. */
.reminder {
  margin: 0;
  padding: 20px;
  border-radius: var(--radius);
  background: #0874dc;
  color: var(--text-primary);
  font-weight: 300;
  line-height: 1.2;
}

.reminder strong {
  display: block;
  font-weight: 600;
}

/* Empty frames where the Figma pictures contradict the text (owner HW-1, no wording). */
div.media--step {
  aspect-ratio: 610 / 431;
}

.compare-cards {
  display: grid;
  gap: 24px;
}

.compare-card {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 24px;
  border-radius: 12px;
  background: var(--surface-invert);
  box-shadow: var(--shadow);
}

.compare-card__head {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 20px;
  border-radius: 20px;
}

.compare-card__head img {
  flex: none;
}

.compare-card__head--mint {
  background: rgb(0 255 236 / 4%);
}

.compare-card__head--blue {
  background: rgb(9 126 239 / 5%);
}

.compare-card__title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.43;
}

.compare-card__head p {
  margin: 0;
  font-size: 1.125rem;
}

.compare-card__body {
  display: grid;
  gap: 1.25em;
  font-size: 1.125rem;
  font-weight: 300;
}

.compare-card__body p {
  margin: 0;
}

.band__eyebrow {
  color: var(--surface-tertiary);
}

@media (min-width: 768px) {
  .compare-cards {
    grid-template-columns: 1fr 1fr;
    gap: 31px;
  }
}

@media (min-width: 1024px) {
  .split--step {
    grid-template-columns: minmax(0, 550px) minmax(0, 610px);
    justify-content: space-between;
    gap: 80px;
  }

  .split--step .split__text {
    gap: 20px;
  }

  .split--image-first {
    grid-template-columns: minmax(0, 610px) minmax(0, 550px);
  }

  .split--image-first > .media {
    order: -1;
  }

  .compare-card {
    gap: 50px;
    padding: 40px;
  }

  .compare-card__head {
    gap: 50px;
  }

  .compare-cards + .band {
    margin-top: 50px;
  }
}

/* Security page (Figma 1:2923) */

.media--sec-hero {
  aspect-ratio: 1220 / 899;
  max-width: 621px;
}

img.media--sec-hero {
  object-fit: contain;
}

/* Principle cards: number badge, text, then a diagram frame pinned to the bottom. */
.sec-diagram {
  margin-top: auto;
  padding: 20px;
  border: 1px solid #e9edf3;
  border-radius: 12px;
  background: var(--surface-invert);
}

/* Cards 1 and 3: empty frames, the Figma diagrams contradict the text (table 06 rows 10-15, 29-32). */
.sec-diagram__media {
  aspect-ratio: 269 / 229;
}

img.sec-diagram__media {
  object-fit: contain;
}

/* New band (table 06 rows 34-35), styled like the Recovery page's navy band (Figma 1:3384). */
.limitation--sec {
  margin-top: 64px;
  padding: 32px 24px;
  border: 1px solid #e9edf3;
  border-radius: 12px;
  background: var(--surface-primary);
}

.limitation--sec .limitation__text {
  gap: 8px;
  max-width: none;
}

.limitation--sec .limitation__title {
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 600;
}

/* Status cards: icon, title with a mint status badge, text. */
.sec-intro {
  display: grid;
  gap: 20px;
  margin-bottom: 40px;
}

.state-card.sec-status__card {
  gap: 24px;
  border: 1px solid #e9edf3;
}

.state-card > .sec-status__head {
  gap: 8px;
  justify-items: start;
}

.state-card .sec-status__badge {
  padding: 5px 20px;
  border-radius: var(--radius);
  background: var(--surface-tertiary);
  color: var(--text-invert);
  font-weight: 400;
}

.sec-report {
  margin: 40px 0 0;
  font-size: 1.125rem;
  font-weight: 600;
}

.sec-report a {
  text-underline-offset: 4px;
}

.sec-report a:hover {
  text-decoration-thickness: 2px;
}

@media (min-width: 1024px) {
  .hero--sec .hero__inner {
    grid-template-columns: minmax(0, 580px) minmax(0, 621px);
    min-height: 756px;
  }

  .sec-card {
    gap: 50px;
  }

  .limitation--sec {
    margin-top: 50px;
    padding: 40px;
  }

  .sec-intro {
    margin-bottom: 50px;
  }

  .state-card.sec-status__card {
    gap: 30px;
  }

  .sec-report {
    margin-top: 50px;
  }
}

/* Recovery page (Figma 1:3220) */

/* Hero picture: Figma artwork as delivered (it still shows a smartwatch; table 07 row 4, go-live gate). */
.media--rec-hero {
  aspect-ratio: 1220 / 813;
  max-width: 621px;
}

img.media--rec-hero {
  object-fit: contain;
}

/* Three safeguards in columns, then the navy band (Figma 1:3384). No bottom padding, as in Figma. */
.rec-safeguards {
  padding-bottom: 0;
}

.features--columns.features--rec {
  margin-top: 0;
}

.limitation--rec {
  margin-top: 64px;
  padding: 32px 24px;
  border: 1px solid #e9edf3;
  border-radius: 12px;
  background: var(--surface-primary);
}

.limitation--rec .limitation__icon {
  width: 97px;
  height: 89px;
}

.limitation--rec .limitation__text {
  gap: 8px;
  max-width: none;
}

.limitation--rec .limitation__title {
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 600;
}

/* Recovery paths: icon, label, title, text, button pinned to the bottom (card 2 has no button). */
.rec-intro {
  display: grid;
  gap: 20px;
  margin-bottom: 40px;
}

.rec-intro .section__title {
  max-width: 891px;
}

.rec-path {
  gap: 30px;
  border: 1px solid #e9edf3;
  box-shadow: none;
}

.rec-path__icon {
  flex: none;
  width: 84px;
  height: 84px;
}

.rec-path__head {
  display: grid;
  gap: 10px;
}

.rec-path__head .card__title {
  margin: 0;
}

/* W2-8: Figma's #007aff 18px label on white is 4.02:1 (WCAG AA needs 4.5:1); darkened to #0072ef (4.51:1),
   listed for the designer. */
.rec-path__label {
  margin: 0;
  color: #0072ef;
  font-size: 1.125rem;
  line-height: 1.5;
  text-transform: uppercase;
}

.rec-path__button {
  align-self: flex-start;
  margin-top: auto;
}

/* Grey reminder box (as on the Families page, Figma 1:3722). */
.reminder--rec {
  margin-top: 40px;
  background: #ebedf0;
  color: #090909;
}

@media (min-width: 1024px) {
  .hero--rec .hero__inner {
    grid-template-columns: minmax(0, 617px) minmax(0, 621px);
    min-height: 756px;
  }

  .features--columns.features--rec {
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    margin-top: 0;
  }

  .features--rec .feature {
    padding-right: 40px;
  }

  .features--rec .feature + .feature {
    padding-left: 40px;
    border-left: 1px solid #e9edf3;
  }

  .limitation--rec {
    margin-top: 120px;
    padding: 40px;
  }

  .limitation--rec .limitation__icon {
    width: 97px;
    height: 89px;
  }

  .rec-intro {
    margin-bottom: 50px;
  }

  .rec-path {
    padding: 40px;
  }

  .reminder--rec {
    margin-top: 50px;
  }
}

/* Pricing page (Figma 1:3428) */

/* Hero: the Figma picture ("Device unavailable", from the recovery page) is left out
   (table 08 row 4); .media--hero is an empty frame of the same size (owner HW-1 rule). */

/* Centred cards: icon, "By invitation" tag, title, text, button (Figma: border only, no shadow).
   The Business page reuses .pri-card for its three capability cards. */
.pri-card {
  align-items: center;
  gap: 24px;
  border: 1px solid #e9edf3;
  box-shadow: none;
  text-align: center;
}

.pri-card .tag,
.pri-card .card__title {
  margin: 0;
}

.pri-card__icon {
  flex: none;
  width: 84px;
  height: 84px;
}

.pri-card .button {
  margin-top: auto;
}

/* "Good to know": question and answer cards, 2 x 2 from 768px (table 08 note; no Figma design). */
.pri-notes {
  display: grid;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pri-note {
  padding: 24px;
  border-radius: 12px;
  background: var(--surface-invert);
  box-shadow: var(--shadow);
}

.pri-note p {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 300;
}

.pri-band {
  margin-top: 0;
}

@media (min-width: 768px) {
  .pri-notes {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1024px) {
  .hero--pri .hero__inner {
    grid-template-columns: minmax(0, 617px) minmax(0, 621px);
    min-height: 756px;
  }

  .pri-intro__title {
    max-width: 617px;
  }

  .pri-card {
    gap: 30px;
  }

  .pri-notes {
    gap: 31px;
  }

  .pri-note {
    padding: 40px;
  }
}

/* Families page (Figma 1:3585) */

/* Hero: live text over a photo (white fade baked into the photo's left side).
   Phones: the text, then the photo cropped to the family. From 1024px: the photo fills the hero.
   The Business page reuses .fam-hero with its own photo and fade (.bus-hero). */
.fam-hero {
  position: relative;
  overflow: hidden;
  background: var(--surface-invert);
  color: var(--text-invert);
}

.fam-hero__inner {
  padding-block: 56px 32px;
}

.fam-hero .tag {
  margin: 0;
}

.fam-hero__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 75% 50%;
}

/* Section pictures (Figma 610 x 583). The phone mockup 1:3706 is an empty frame
   (table 09 rows 9-13 "Must fix": Everyday Vault / Security Vault; owner HW-1 rule). */
.fam-media {
  aspect-ratio: 610 / 583;
  border-radius: 10px;
}

/* Grey reminder box (Figma 1:3722: #ebedf0, text #090909, 16px). */
.reminder--fam {
  background: #ebedf0;
  color: #090909;
}

@media (min-width: 768px) {
  .fam-hero__img {
    aspect-ratio: 16 / 9;
  }
}

@media (min-width: 1024px) {
  .fam-hero {
    display: flex;
    align-items: center;
    min-height: 748px;
  }

  .fam-hero__inner {
    position: relative;
    z-index: 1;
    padding-block: 120px;
  }

  .fam-hero__text {
    max-width: 617px;
  }

  .fam-hero .hero__body {
    max-width: 445px;
  }

  .fam-hero__img {
    position: absolute;
    inset: 0;
    height: 100%;
    aspect-ratio: auto;
    object-position: 50% 50%;
  }
}

/* Business page (Figma 1:3875) */

/* Hero: reuses the Families photo hero (.fam-hero). From 1024px the photo starts 19.41% from the
   left at 85.37% width, under a white fade from 33.7% to 54.35% (Figma 1:3910). */
@media (min-width: 1024px) {
  .bus-hero {
    min-height: 775px;
  }

  .bus-hero .fam-hero__img {
    left: 19.41%;
    width: 85.37%;
  }

  .bus-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, var(--surface-invert) 33.7%, rgb(255 255 255 / 0%) 54.35%);
  }
}

.bus-intro {
  margin-bottom: 64px;
}

.bus-rows {
  display: grid;
  gap: 64px;
}

/* Both console mockups (1:4059, 1:4107) are empty frames: table 10 rows 15, 18, 21, 28
   ("Must fix": Vaults/Sharing menu, Everyday/Security Vault, Emergency Safe on computers). */
.bus-media--devices {
  aspect-ratio: 610 / 427;
}

.bus-media--activity {
  aspect-ratio: 610 / 421;
}

/* Planned items: a "Planned" tag where Figma has a tick (table 10 rows 10-13, 24-26);
   the last Governance item has a plain bullet (row 27). No ticks on this page. */
.bus-planned {
  display: grid;
  gap: 16px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  font-size: 1.125rem;
  font-weight: 300;
}

.bus-planned li {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  align-items: baseline;
  gap: 16px;
}

.bus-planned .tag {
  justify-self: start;
}

.bus-planned__plain::before {
  content: "";
  justify-self: center;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--surface-brand);
  transform: translateY(-0.2em);
}

/* Capability cards: the .pri-card layout with a shadow; the "Planned" tag replaces the button. */
.bus-card {
  box-shadow: var(--shadow);
}

.bus-card .tag {
  margin-top: auto;
}

@media (min-width: 1024px) {
  .bus-intro {
    margin-bottom: 120px;
  }

  .bus-capabilities {
    margin-bottom: 80px;
  }

  .bus-intro__title {
    max-width: 686px;
  }

  .bus-rows {
    gap: 120px;
  }

  .bus-planned {
    gap: 20px;
    margin-top: 30px;
  }

  .bus-planned li {
    gap: 30px;
  }
}

/* About page (Figma 1:4139) */

/* Hero: white, dark text, photo on the right under a white-to-clear gradient (Figma 7:3502).
   Below 1280px the photo sits under the text, so no text ever lies over the photo. */
.abt-hero {
  position: relative;
  overflow: hidden;
  background: var(--surface-invert);
}

.abt-hero__inner {
  position: relative;
  z-index: 1;
  padding-block: 56px 40px;
}

.abt-hero .accent {
  display: block;
}

.abt-hero__photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1220 / 813;
  object-fit: cover;
}

/* Problem: photo left, text right on wide screens (text first in the source). */
.abt-title {
  font-size: clamp(2rem, 4vw, 3rem);
}

.media--abt-problem {
  aspect-ratio: 610 / 583;
  border-radius: 10px;
}

/* Principles: four columns with dividers on wide screens. */
.section-intro.abt-intro {
  max-width: none;
}

/* Commitment: the status cards beside it were removed (table 11 rows 22-31), so the block stands alone. */
.abt-commitment {
  display: grid;
  gap: 20px;
  justify-items: start;
  max-width: 820px;
}

/* "Who we are" line above the closing band (table 11 row 32). */
.abt-who {
  margin: 0 0 40px;
  font-size: 1.125rem;
  text-align: center;
}

.band.abt-band {
  margin-top: 0;
}

@media (min-width: 1024px) {
  .split.abt-problem {
    gap: 80px;
  }

  .features--columns.features--abt {
    gap: 0;
    margin-top: 30px;
  }

  .features--abt .feature {
    padding-right: 24px;
  }

  .features--abt .feature + .feature {
    padding-left: 24px;
    border-left: 1px solid #e9edf3;
  }

  .abt-who {
    margin-bottom: 50px;
  }
}

@media (min-width: 1280px) {
  .abt-hero__inner {
    display: flex;
    align-items: center;
    min-height: 886px;
    padding-block: 120px;
  }

  .abt-hero__inner .hero__text {
    max-width: 617px;
  }

  .abt-hero__photo {
    position: absolute;
    top: 0;
    left: 18.4%;
    width: 89.48%;
    height: 100%;
  }

  .abt-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--surface-invert) 33.7%, rgb(255 255 255 / 0%) 54.35%);
  }
}

/* FAQ page (Figma 1:4543) */

/* Topics sidebar beside the questions panel. Without JavaScript the topic
   "filters" are links to the topic groups in the panel. */
.faq-layout {
  display: grid;
  gap: 24px;
  align-items: start;
}

.faq-aside {
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding: 24px;
  border-radius: 12px;
  background: #f5f5f5;
}

.faq-aside__title,
.faq-panel__title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.43;
}

.faq-topics {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.faq-topics__list {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0 0 30px;
  border-bottom: 1px solid rgb(0 22 50 / 15%);
  list-style: none;
  font-size: 1.125rem;
  font-weight: 300;
}

.faq-topics__list a {
  display: block;
  padding: 8px 10px;
  text-decoration: none;
}

.faq-topics__list a:hover {
  background: var(--surface-invert);
  text-decoration: underline;
}

.faq-prompt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.faq-prompt__title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.3;
}

.faq-prompt p {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 300;
}

.faq-button--outline {
  min-height: 50px;
  padding: 14px 20px;
  border: 1px solid var(--border-secondary);
  background: var(--surface-invert);
  color: var(--text-invert);
}

.faq-button--outline:hover {
  background: rgb(0 255 236 / 10%);
}

/* Questions panel: numbered disclosure rows, collapsed by default (table 12 note 1). */
.faq-panel {
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding: 24px;
  border: 1px solid #e9edf3;
  border-radius: 12px;
  background: var(--surface-invert);
}

.faq-group {
  scroll-margin-top: 24px;
}

.faq-group__title {
  margin: 0 0 10px;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.5;
  text-transform: uppercase;
}

.faq-item {
  border-bottom: 1px solid rgb(0 22 50 / 15%);
}

.faq-item summary {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-block: 20px;
  cursor: pointer;
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

/* Chevron (Figma 1:4745), turned up when the answer is open. */
.faq-item summary::after {
  content: "";
  flex: none;
  width: 20px;
  height: 10px;
  margin-left: auto;
  background: url("/assets/img/faq/chevron.svg") center / contain no-repeat;
}

.faq-item[open] summary::after {
  transform: rotate(180deg);
}

/* The site focus colour (mint) is faint on white; navy here so the focus is visible. */
.faq-item summary:focus-visible {
  outline-color: var(--surface-brand);
}

.faq-num {
  display: inline-grid;
  place-items: center;
  flex: none;
  min-width: 35px;
  height: 35px;
  padding-inline: 6px;
  border-radius: 46px;
  background: var(--surface-tertiary);
  font-weight: 600;
  line-height: 1.2;
}

.faq-q {
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.3;
}

.faq-item p {
  margin: 0;
  padding-bottom: 24px;
  font-size: 1.125rem;
  font-weight: 300;
}

@media (min-width: 1024px) {
  .faq-layout {
    grid-template-columns: 299px minmax(0, 1fr);
    gap: 31px;
  }

  .faq-aside,
  .faq-panel {
    padding: 40px;
  }

  .faq-item summary {
    gap: 30px;
  }
}

/* Waiting list page (Figma 1:4806) */

/* Forms (shared with the Contact page). Field look from the Contact form (Figma 1:5143):
   white card, 18px bold labels, 18px light fields with 13px corners. Markup only (W2-10):
   the submit button stays disabled until W3. */
.form-card {
  max-width: 709px;
  margin-inline: auto;
  padding: 24px;
  border: 1px solid #e9edf3;
  border-radius: 12px;
  background: var(--surface-invert);
  box-shadow: 0 0 10px rgb(0 0 0 / 5%);
}

.form {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.form-label {
  padding: 0;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.3;
}

.form-note,
.form-text {
  margin: 0;
  font-size: 1rem;
  font-weight: 300;
}

/* WCAG 1.4.11: Figma's field border #ebedf0 is 1.17:1 on white; darkened to #929395 (3.07:1),
   listed for the designer. */
.form-input {
  width: 100%;
  min-height: 47px;
  padding: 11px 20px;
  border: 1px solid #929395;
  border-radius: 13px;
  background: var(--surface-invert);
  color: var(--text-invert);
  font: inherit;
  font-size: 1.125rem;
  font-weight: 300;
}

/* Figma shows the placeholder in the text colour; grey #5c6470 (5.98:1) so it is not mistaken for an answer. */
.form-input::placeholder {
  color: #5c6470;
  opacity: 1;
}

.form-select {
  appearance: none;
  padding-right: 56px;
  background: var(--surface-invert) url("/assets/img/faq/chevron.svg") right 20px center / 20px 10px no-repeat;
}

textarea.form-input {
  min-height: 176px;
  padding: 20px;
  resize: vertical;
}

/* The site focus colour (mint) is faint on white; navy on form controls so the focus is visible. */
.form-input:focus-visible,
.form-check input:focus-visible {
  outline: 3px solid var(--surface-brand);
  outline-offset: 2px;
}

.form-choices {
  gap: 12px;
}

.form-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 1.125rem;
  font-weight: 300;
}

.form-check input {
  flex: none;
  width: 23px;
  height: 23px;
  margin: 1px 0 0;
  accent-color: var(--surface-brand);
}

.form-hint {
  margin: 0;
  font-size: 1rem;
  font-weight: 300;
}

/* Error texts are hidden until W3 shows them; red #b3261e is ours (6.54:1 on white), no Figma state yet. */
.form-error {
  margin: 0;
  color: #b3261e;
  font-size: 1rem;
  font-weight: 600;
}

.form-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

.form-actions .button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.form-notice {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 300;
}

.form-success p {
  margin: 0;
  font-size: 1.125rem;
}

/* Company fields only when "A business" is chosen (table 13 note 3); CSS only, and only where
   :has() works, so older browsers simply show them. */
.wl-business {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

@supports selector(:has(*)) {
  .form:not(:has(#wl-iam-business:checked)) .wl-business {
    display: none;
  }
}

/* "What to expect" cards: icon, title and text centred (.wl-intro and .wl-cards are reused on Contact). */
.wl-cards {
  margin: 0;
  padding: 0;
  list-style: none;
}

.wl-card {
  align-items: center;
  gap: 30px;
  text-align: center;
}

.wl-card img,
.wl-card .feature__icon-box {
  flex: none;
}

.wl-card .card__title {
  margin: 0;
}

/* Privacy text beside three tick points. */
.wl-privacy {
  display: grid;
  gap: 32px;
}

.wl-privacy__text {
  gap: 20px;
}

.wl-points {
  display: grid;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 1.125rem;
  font-weight: 300;
}

.wl-points li {
  display: flex;
  align-items: center;
  gap: 10px;
}

.wl-points li::before {
  content: "";
  flex: none;
  width: 52px;
  height: 52px;
  background: url("/assets/img/waiting-list/check.svg") center / contain no-repeat;
}

@media (min-width: 1024px) {
  .form-card {
    padding: 40px;
  }

  .wl-intro {
    margin-bottom: 80px;
  }

  .wl-card {
    padding: 40px;
  }

  .wl-privacy {
    grid-template-columns: minmax(0, 654px) minmax(0, 506px);
    gap: 80px;
  }

  .wl-points {
    padding-top: 70px;
  }

  .wl-privacy + .band {
    margin-top: 80px;
  }
}

/* Contact page (Figma 1:5102). Form styles: see the Waiting list page (.form-*). */

/* Shorter hero without a button (Figma: 411px tall). */
.con-hero .hero__text {
  gap: 20px;
}

/* Four topic cards (reusing the Waiting list card look); heights level by layout, not by
   Figma's empty trailing lines (table 14 note 7). */
.con-cards {
  align-items: stretch;
}

/* Security reporting text beside the "Please do not submit" box. */
.con-security {
  display: grid;
  gap: 32px;
  align-items: center;
}

.con-security__text {
  align-items: flex-start;
  gap: 20px;
}

.con-warning {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  padding: 29px 20px;
  border-radius: 13px;
  background: var(--surface-primary);
  color: var(--text-primary);
}

.con-warning img {
  flex: none;
}

.con-warning > div {
  display: grid;
  gap: 10px;
}

.con-warning__title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
}

.con-warning p {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 300;
}

@media (min-width: 768px) {
  .con-cards {
    grid-template-columns: 1fr 1fr;
  }

  .con-warning {
    flex-direction: row;
    gap: 30px;
  }
}

@media (min-width: 1024px) {
  .con-hero .hero__inner {
    min-height: 411px;
  }

  .con-cards {
    grid-template-columns: repeat(4, 1fr);
    gap: 31px;
  }

  .con-security {
    grid-template-columns: minmax(0, 654px) minmax(0, 506px);
    gap: 80px;
  }

  .con-security + .band {
    margin-top: 80px;
  }
}

/* Placeholder pages ("being prepared") */
.page-intro {
  padding-block: 80px;
}

.page-intro h1 {
  margin: 0 0 16px;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.2;
}

.page-intro p {
  margin: 0;
  font-size: 1.25rem;
}

/* Footer (Figma 1:1065: 9px mint top border, 100/110px padding, 20px text). */
.site-footer {
  background: var(--surface-primary);
  color: var(--text-primary);
  border-top: 9px solid var(--border-secondary);
  padding-block: 56px 40px;
  font-size: 1.125rem;
  line-height: 1.6;
}

.site-footer a {
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--surface-tertiary);
  text-decoration: underline;
}

.site-footer__columns {
  display: grid;
  gap: 40px;
}

.site-footer p {
  margin: 0 0 20px;
}

.site-footer__tagline {
  font-weight: 700;
}

.site-footer__disclaimer {
  font-size: 1rem;
  font-style: italic;
}

.logo--footer {
  margin-bottom: 20px;
}

.site-footer__heading {
  margin: 0 0 20px;
  font-size: 1.125rem;
  line-height: 25px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--surface-tertiary);
}

.site-footer__subheading {
  margin: 0 0 12px;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--surface-tertiary);
}

.site-footer__explore li {
  line-height: 1.76;
}

.site-footer__explore a {
  display: inline-block;
  padding-block: 2px;
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px 40px;
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid rgb(255 255 255 / 50%);
  font-size: 1rem;
}

.site-footer__bottom p {
  margin: 0;
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}

@media (min-width: 768px) {
  .site-footer__columns {
    grid-template-columns: 1fr 1fr;
  }

  .site-footer__about {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1024px) {
  .site-footer {
    padding-block: 100px;
    font-size: 1.25rem;
  }

  .site-footer .container {
    max-width: calc(1220px + 2 * var(--gutter));
  }

  .site-footer__columns {
    grid-template-columns: minmax(0, 476px) auto minmax(0, 322px);
    justify-content: space-between;
  }

  .site-footer__about {
    grid-column: auto;
  }

  .site-footer__bottom {
    margin-top: 80px;
    padding-top: 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}