/* MyNikkahMate website: one stylesheet, no external resources.
   Palette: docs/product-spec.md "Visual style (plum / gold)", the same tokens as the app
   (app/src/theme/tokens.js, mirrored by hand: keep in step).
   The hero scene is the plum ground band with the mark's rings (see "The hero's ground" below). */

/* ---------- Tokens ---------- */
:root {
  color-scheme: light dark;

  /* Canvas, cards, text (cool greys with a faint plum cast): tokens canvas / card / card-muted / ink / ink-secondary / border */
  --bg: #f1eef3;
  --bg-alt: #ffffff;
  --surface: #ffffff;
  --surface-muted: #f3f0f6;
  --text: #1a1420;
  --muted: #5f5668;
  --border: #d8d2dd;

  /* Brand plum (the mark's tile). --primary for icons, borders and markers; --primary-strong for plum text (links,
     labels). The mark's gold #d4a72c (the rings) is the chrome edge, the pills and the main action. Values mirror
     app/src/theme/tokens.js; keep the two in step. */
  --primary: #6f3f8f;
  --primary-strong: #5b2f78;
  --primary-soft: #efe6f5;
  --brand-gold: #d4a72c;
  --link: var(--primary-strong);
  --link-hover: #1a1420;

  /* Main action (the rings' gold): label is near-black, because white on this gold is only 2.2:1. */
  --action: #d4a72c;
  --action-hover: #ac841a;
  --on-action: #1a1420;

  --focus: #6f3f8f;
  --focus-on-hero: #ffd166;
  --shadow: 0 1px 2px rgb(26 20 32 / 6%), 0 8px 24px rgb(26 20 32 / 10%);

  /* Hero band (the brand plum, the mark's tile: tokens primary-hero / chrome) */
  --hero: #3b1f4e;
  --hero-bg: var(--hero);
  --hero-text: #ffffff;
  --hero-muted: #dccce6;

  /* Status chips (the due-soon amber: paler than the brand gold, always in its chip) */
  --amber-soft: #fff1d6;
  --amber-ink: #8a5a00;

  /* Section colours (tinted square + strong icon), as in the app */
  --sec-signatures-soft: #fdebdd;
  --sec-signatures-icon: #9a4a0a;
  --sec-mahr-soft: #dff5f7;
  --sec-mahr-icon: #0b7f8a;
  --sec-checklists-soft: #e0f6e8;
  --sec-checklists-icon: #0d8040;
  --sec-documents-soft: #e3ecfb;
  --sec-documents-icon: #2458b8;
  --sec-people-soft: #e4eaf3;
  --sec-people-icon: #3b5b8a;
  --sec-institution-soft: #f6ecdf;
  --sec-institution-icon: #7a4a10;

  --icon-bg: var(--primary-soft);
  --icon-fg: var(--primary-strong);

  --radius: 14px;
  --radius-sm: 8px;
  --wrap: 72rem;
  --gutter: clamp(1rem, 4vw, 2rem);

  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Deep plum-black canvas, lighter cards */
    --bg: #171120;
    --bg-alt: #1c1524;
    --surface: #251c2f;
    --surface-muted: #1c1524;
    --text: #f3f0f5;
    --muted: #b0a7b9;
    --border: #3b3145;

    --primary: #b98ad6;
    --primary-strong: #d3b0e8;
    --primary-soft: #3a2749;
    --link-hover: #f3f0f5;

    --action: #e3b53a;
    --action-hover: #d4a72c;

    --focus: #d3b0e8;
    --shadow: 0 1px 2px rgb(0 0 0 / 35%), 0 8px 24px rgb(0 0 0 / 28%);

    --hero: #452659;
    --hero-muted: #dccce6;

    --amber-soft: #4a3a12;
    --amber-ink: #ffd166;

    --sec-signatures-soft: #4a2e18;
    --sec-signatures-icon: #ffab73;
    --sec-mahr-soft: #123f4b;
    --sec-mahr-icon: #4fd6e2;
    --sec-checklists-soft: #143f2e;
    --sec-checklists-icon: #5cd68e;
    --sec-documents-soft: #1e3358;
    --sec-documents-icon: #8fb4f5;
    --sec-people-soft: #253a57;
    --sec-people-icon: #9db9e0;
    --sec-institution-soft: #3f2e1c;
    --sec-institution-icon: #e3ae6c;
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 1rem;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.65;
  overflow-wrap: break-word;
}

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

h1,
h2,
h3 {
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: 0 0 0.6em;
}

h1 {
  font-size: clamp(2rem, 5.5vw, 3.25rem);
}

h2 {
  font-size: clamp(1.5rem, 3.5vw, 2.1rem);
}

h3 {
  font-size: 1.15rem;
}

p,
ul,
ol {
  margin: 0 0 1em;
}

a {
  color: var(--link);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--link-hover);
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  padding: 0.6rem 1rem;
  background: var(--action);
  color: var(--on-action);
  font-weight: 700;
  border-radius: var(--radius-sm);
  text-decoration: none;
}

.skip-link:focus {
  top: 1rem;
  color: var(--on-action);
}

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

.site-header .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  padding-block: 0.9rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--text);
  font-weight: 750;
  font-size: 1.2rem;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.brand:hover {
  color: var(--text);
}

.brand img {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.4rem;
  flex: none;
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav a {
  color: var(--text);
  text-decoration: none;
  font-size: 0.975rem;
  font-weight: 550;
  padding: 0.25rem 0;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

.hero :focus-visible,
.page-head :focus-visible,
.get-app :focus-visible {
  outline-color: var(--focus-on-hero);
}

/* ---------- Hero ---------- */
.hero {
  background: var(--hero-bg);
  color: var(--hero-text);
  position: relative;
  overflow: hidden;
}

.hero-inner {
  display: grid;
  gap: 2.5rem;
  align-items: center;
  padding-block: clamp(2.5rem, 7vw, 5rem) clamp(7rem, 15vw, 11rem);
}

@media (min-width: 52rem) {
  .hero-inner {
    grid-template-columns: 1.15fr 0.85fr;
  }
}

.eyebrow {
  display: inline-block;
  margin-bottom: 1rem;
  padding: 0.25rem 0.75rem;
  border: 1px solid rgb(212 167 44 / 55%);
  border-radius: 999px;
  background: rgb(212 167 44 / 10%);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--hero-text);
  letter-spacing: 0.02em;
}

.hero h1 {
  color: var(--hero-text);
  max-width: 18ch;
}

.hero .lede {
  font-size: clamp(1.1rem, 2.3vw, 1.3rem);
  color: var(--hero-muted);
  max-width: 36rem;
}

.hero .lede strong {
  color: var(--hero-text);
  font-weight: 650;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

.hero-note {
  margin-top: 1rem;
  font-size: 0.9rem;
  color: var(--hero-muted);
}

/* The hero's foot: the mark's glyph (website/images/logo-glyph.svg: the rings and the diamond in white, no
   figures), large and faint at the right of the hero band. Decorative; no motion. */
.hero-scene {
  --scene-h: clamp(84px, 12vw, 160px);
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--scene-h);
  pointer-events: none;
  overflow: clip;
}

.hero-rings {
  position: absolute;
  right: max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter)));
  bottom: calc(var(--scene-h) * 0.1);
  width: clamp(140px, 16vw, 240px);
  height: auto;
  display: block;
  opacity: 0.22;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 3rem;
  padding: 0.7rem 1.3rem;
  border-radius: 999px;
  border: 2px solid transparent;
  font-weight: 650;
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none;
  transition: transform 0.15s ease, background-color 0.15s ease;
}

.btn:hover {
  text-decoration: none;
  transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
  .btn,
  .btn:hover {
    transition: none;
    transform: none;
  }
}

.btn-primary {
  background: var(--action);
  color: var(--on-action);
  box-shadow: 0 6px 16px rgb(212 167 44 / 28%);
}

.btn-primary:hover {
  background: var(--action-hover);
  color: var(--on-action);
}

/* On the hero: outlined in the brand gold */
.btn-ghost {
  border-color: rgb(212 167 44 / 85%);
  color: #fff;
}

.btn-ghost:hover {
  background: rgb(212 167 44 / 14%);
  color: #fff;
}

/* ---------- Sections ---------- */
.section {
  padding-block: clamp(3rem, 8vw, 5.5rem);
}

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

.section-head {
  max-width: 44rem;
  margin-bottom: 2.5rem;
}

.section-head p {
  color: var(--muted);
  font-size: 1.1rem;
}

.kicker {
  display: block;
  margin-bottom: 0.4rem;
  color: var(--primary-strong);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---------- Features ---------- */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow);
}

.card p:last-child {
  margin-bottom: 0;
}

.card p {
  color: var(--muted);
}

.icon {
  display: inline-grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: 1rem;
  border-radius: 12px;
  background: var(--icon-bg);
  color: var(--icon-fg);
}

.icon svg {
  width: 1.6rem;
  height: 1.6rem;
}

/* Section colours, as on the app's tiles */
.icon-signatures {
  --icon-bg: var(--sec-signatures-soft);
  --icon-fg: var(--sec-signatures-icon);
}

.icon-mahr {
  --icon-bg: var(--sec-mahr-soft);
  --icon-fg: var(--sec-mahr-icon);
}

.icon-checklists {
  --icon-bg: var(--sec-checklists-soft);
  --icon-fg: var(--sec-checklists-icon);
}

.icon-documents {
  --icon-bg: var(--sec-documents-soft);
  --icon-fg: var(--sec-documents-icon);
}

.icon-people {
  --icon-bg: var(--sec-people-soft);
  --icon-fg: var(--sec-people-icon);
}

.icon-institution {
  --icon-bg: var(--sec-institution-soft);
  --icon-fg: var(--sec-institution-icon);
}

/* ---------- Screenshots ---------- */
/* Phones: a swipeable strip that snaps to each screen. Wide screens: a centred grid, four across. */
.screens-scroller {
  margin-inline: calc(-1 * var(--gutter));
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: thin;
  border-radius: 0;
}

.screens-scroller:focus-visible {
  outline-offset: -3px;
}

.screens {
  display: flex;
  gap: 1.25rem;
  width: max-content;
  margin: 0;
  padding: 0.5rem var(--gutter) 1.5rem;
  list-style: none;
}

.screens > li {
  flex: none;
  width: min(62vw, 15rem);
  scroll-snap-align: start;
}

.screen {
  margin: 0;
}

.screen figcaption {
  margin-top: 1rem;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.5;
}

.screen figcaption strong {
  display: block;
  margin-bottom: 0.15rem;
  color: var(--text);
  font-size: 1.05rem;
}

@media (prefers-color-scheme: dark) {
  .phone {
    border-color: rgb(212 167 44 / 30%);
    box-shadow: 0 14px 32px rgb(0 0 0 / 45%);
  }
}

@media (min-width: 60rem) {
  .screens-scroller {
    margin-inline: 0;
    overflow: visible;
  }

  .screens {
    width: auto;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2.5rem 2rem;
    padding: 0;
  }

  .screens > li {
    width: calc((100% - 3 * 2rem) / 4);
    max-width: 15rem;
  }
}

/* ---------- Core loop steps ---------- */
.steps {
  counter-reset: step;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.steps li {
  counter-increment: step;
  position: relative;
  padding: 1.25rem 1.25rem 1.25rem 4rem;
  border-left: 3px solid var(--primary);
  background: var(--surface);
  box-shadow: var(--shadow);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.steps li::before {
  content: counter(step);
  position: absolute;
  left: 1rem;
  top: 1.1rem;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--brand-gold);
  color: #1a1420;
  font-weight: 700;
  font-size: 0.95rem;
}

.steps strong {
  display: block;
}

.steps span {
  color: var(--muted);
}

/* ---------- Get the app ---------- */
.get-app {
  background: var(--hero-bg);
  color: var(--hero-text);
  border-radius: calc(var(--radius) * 1.5);
  padding: clamp(1.75rem, 5vw, 3rem);
  display: grid;
  gap: 1.5rem;
  box-shadow: var(--shadow);
}

.get-app h2 {
  color: var(--hero-text);
}

.get-app p {
  color: var(--hero-muted);
  max-width: 40rem;
}

.store-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.store-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 13.5rem;
  min-height: 3.5rem;
  padding: 0.6rem 1.1rem;
  border-radius: 12px;
  background: #241230;
  border: 1px solid rgb(212 167 44 / 55%);
  color: #fff;
  text-decoration: none;
  line-height: 1.2;
}

.store-btn:hover {
  color: #fff;
  background: #000000;
}

.store-btn svg {
  width: 1.7rem;
  height: 1.7rem;
  flex: none;
}

.store-btn .store-text {
  display: flex;
  flex-direction: column;
}

.store-btn small {
  font-size: 0.75rem;
  color: #d9cfe3;
}

.store-btn b {
  font-size: 1.1rem;
  font-weight: 650;
}

.store-btn.web {
  background: var(--action);
  color: var(--on-action);
  border-color: transparent;
}

.store-btn.web small {
  color: var(--on-action);
}

.store-btn.web:hover {
  background: var(--action-hover);
  color: var(--on-action);
}

/* ---------- Coming soon ---------- */
/* Holding page (coming-soon.html), where /app-store and /google-play lead until the store listings are live.
   The hero band with its ground and rings, everything centred.
   The header and the hero together fill at least the screen, so the footer starts below it. The content sits in
   the middle of the plum above the ground scene, with the same clear space above the pill as between the button and
   the top of the scene; on a short screen the page just flows. */
.coming-soon-screen {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
}

.coming-soon-screen main,
.coming-soon {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}

.coming-soon {
  /* The ground scene is the home page hero's, at the same size (--scene-h of .hero-scene) */
  --soon-scene-h: clamp(84px, 12vw, 160px);
  /* The least clear plum above the pill and between the button and the scene: 64px on phones, up to 96px on wide
     screens. The 8vh term keeps it at 64px on a wide but short screen (a laptop), so the whole scene still fits
     on the first screen there; on a taller screen the centring adds more than this anyway. */
  --soon-gap: clamp(4rem, min(7.5vw, 8vh), 6rem);
}

.coming-soon .hero-scene {
  --scene-h: var(--soon-scene-h);
}

.coming-soon-inner {
  position: relative;
  z-index: 1;
  margin-block: auto;
  text-align: center;
  padding-block: var(--soon-gap) calc(var(--soon-scene-h) + var(--soon-gap));
}

.coming-soon h1,
.coming-soon .lede {
  margin-inline: auto;
}

.coming-soon h1 {
  max-width: none;
  text-wrap: balance;
}

.coming-soon .store-buttons {
  justify-content: center;
  margin-top: 1.75rem;
}

/* Store markers: the look of the store buttons, but plain text, not links */
.store-soon {
  text-align: left;
  cursor: default;
}

.store-soon:hover {
  background: #241230;
}

.coming-soon .hero-note {
  margin: 1.25rem 0 0;
  font-size: 1rem;
}

/* "Email us" line: a link that reads on the blue (white, underlined), as the hero's other text does */
.coming-soon-notify {
  margin: 0.75rem 0 0;
  color: var(--hero-muted);
  text-wrap: balance;
}

.coming-soon-notify a,
.coming-soon-notify a:hover {
  color: var(--hero-text);
  font-weight: 650;
}

.coming-soon-back {
  margin: 1.5rem 0 0;
}

/* ---------- FAQ ---------- */
.faq {
  max-width: 48rem;
}

.faq details {
  border-bottom: 1px solid var(--border);
}

.faq details:first-of-type {
  border-top: 1px solid var(--border);
}

.faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 0.25rem;
  font-weight: 650;
  font-size: 1.075rem;
}

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

.faq summary::after {
  content: "+";
  flex: none;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--primary-strong);
}

.faq details[open] summary::after {
  content: "\2212";
}

.faq .answer {
  padding: 0 0.25rem 1.1rem;
  color: var(--muted);
}

.faq .answer p:last-child {
  margin-bottom: 0;
}

/* ---------- Contact ---------- */
.contact-card {
  display: grid;
  gap: 1.5rem;
  align-items: center;
}

@media (min-width: 48rem) {
  .contact-card {
    grid-template-columns: 1fr auto;
  }
}

.contact-card p {
  color: var(--muted);
}

.contact-email {
  font-size: clamp(1.1rem, 3vw, 1.35rem);
  font-weight: 650;
  word-break: break-word;
}

.btn-outline {
  border-color: var(--link);
  color: var(--link);
}

.btn-outline:hover {
  background: var(--primary-soft);
  color: var(--link-hover);
}

/* ---------- Legal / content pages ---------- */
.page-head {
  background: var(--hero-bg);
  color: var(--hero-text);
  padding-block: clamp(2.25rem, 6vw, 3.5rem);
}

.page-head h1 {
  color: var(--hero-text);
  margin-bottom: 0.3em;
  font-size: clamp(1.9rem, 5vw, 2.75rem);
}

.page-head p {
  color: var(--hero-muted);
  margin: 0;
}

.prose {
  max-width: 46rem;
  padding-block: clamp(2rem, 6vw, 3.5rem) clamp(3rem, 8vw, 5rem);
}

.prose h2 {
  font-size: clamp(1.3rem, 3vw, 1.6rem);
  margin-top: 2.5rem;
  padding-top: 0.5rem;
}

.prose h3 {
  margin-top: 1.75rem;
}

.prose ul,
.prose ol {
  padding-left: 1.3rem;
}

.prose li {
  margin-bottom: 0.4rem;
}

.prose li::marker {
  color: var(--primary);
}

.summary-box {
  margin: 0 0 2rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--border);
  border-left: 4px solid var(--primary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--surface);
}

.summary-box h2 {
  margin-top: 0;
  padding-top: 0;
  font-size: 1.15rem;
}

.summary-box ul {
  margin-bottom: 0;
}

.toc {
  margin: 0 0 2rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.toc h2 {
  margin: 0 0 0.5rem;
  padding: 0;
  font-size: 1rem;
}

.toc ol {
  margin: 0;
  columns: 2 16rem;
  column-gap: 2rem;
}

.toc li {
  break-inside: avoid;
}

.table-wrap {
  overflow-x: auto;
  margin: 0 0 1.25rem;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.975rem;
}

th,
td {
  text-align: left;
  vertical-align: top;
  padding: 0.65rem 0.75rem;
  border-bottom: 1px solid var(--border);
}

th {
  background: var(--surface-muted);
  font-weight: 650;
}

.callout {
  margin: 1.5rem 0;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.callout h2,
.callout h3 {
  margin-top: 0;
  padding-top: 0;
}

.callout p:last-child {
  margin-bottom: 0;
}

.option-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  margin: 1.5rem 0 2rem;
}

.option-grid .callout {
  margin: 0;
}

.path {
  display: inline-block;
  padding: 0.05rem 0.45rem;
  border-radius: 6px;
  background: var(--primary-soft);
  color: var(--text);
  font-weight: 600;
  white-space: nowrap;
}

/* ---------- 404 ---------- */
.not-found {
  text-align: center;
  padding-block: clamp(3rem, 10vw, 6rem);
}

.not-found img {
  width: min(100%, 9rem);
  height: auto;
  margin-bottom: 1.5rem;
  border-radius: 22%;
}

.not-found p {
  color: var(--muted);
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--surface);
  border-top: 1px solid var(--border);
  color: var(--muted);
  padding-block: 2.5rem 2rem;
  font-size: 0.95rem;
}

.site-footer a {
  color: var(--text);
}

.site-footer a:hover {
  color: var(--link);
}

.footer-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
}

.footer-top .brand {
  font-size: 1.05rem;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-legal {
  padding-top: 1.25rem;
  font-size: 0.85rem;
  color: var(--muted);
}

.footer-legal p {
  margin-bottom: 0.4rem;
}

/* The copyright line is two parts ("© 2026 Purple Loop Limited," and the rest): one line where it fits, and on a
   narrow screen it breaks between the parts instead of mid-phrase. */
.footer-legal span {
  display: inline-block;
}

/* Wordmark: "Mate" in the wordmark gold (see /brand): 3.5:1 on white as large bold text */
.brand .mate { color: #AC841A; }