/* KL 33 MLA Connect — public static site.
   Deliberately plain CSS, no build step, no framework — this site has no
   JavaScript dependency on anything at all (see nav.js's own comment for
   the one exception: a mobile menu toggle). Colors/spacing match the
   mobile app's own theme (src/constants/theme.ts) so the site reads as the
   same product, not a generic marketing template. */

:root {
  --green: #0f701e;
  --green-dark: #0b5716;
  --text-primary: #131e31;
  --text-secondary: #6a6e75;
  --red: #c0272d;
  --border: #ececec;
  --surface: #f7f8f6;
  --white: #ffffff;
  --radius: 16px;
  --max-width: 1040px;
  --shadow: 0 2px 16px rgba(19, 30, 49, 0.08);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
    sans-serif;
  color: var(--text-primary);
  background: var(--white);
  line-height: 1.55;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--green);
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 20px;
}

/* ── Header ─────────────────────────────────────────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--white);
  border-bottom: 1px solid var(--border);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text-primary);
  font-weight: 800;
  font-size: 17px;
}

.brand img {
  width: 36px;
  height: 36px;
  border-radius: 8px;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 28px;
}

.site-nav a {
  color: var(--text-primary);
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: var(--green);
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
}

.nav-toggle svg {
  display: block;
}

@media (max-width: 720px) {
  .nav-toggle {
    display: block;
  }

  .site-nav {
    position: absolute;
    top: 68px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: var(--white);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease;
  }

  .site-nav.is-open {
    max-height: 320px;
  }

  .site-nav a {
    width: 100%;
    padding: 14px 20px;
    border-top: 1px solid var(--border);
  }
}

/* ── Hero (home page only) ─────────────────────────────────────────── */

.hero {
  position: relative;
  overflow: hidden;
  background-color: #eef6ef;
  background-image: url("images/hero-bg.webp");
  background-size: cover;
  background-position: center;
}

.hero .container {
  /* Deliberately NOT position: relative — .hero-portrait needs to anchor
     to .hero's own box (the actual background image, full-bleed) via the
     `position: relative` already on .hero above. If this container were
     also positioned, it would become the nearer ancestor instead, and
     `right: 0` / `bottom: 0` would land on its padding/max-width edges —
     inset from the image's real corner, not flush with it. */
  min-height: 460px;
  padding-top: 56px;
  padding-bottom: 56px;
}

.hero-copy {
  position: relative;
  z-index: 1;
  max-width: 520px;
}

.hero-eyebrow {
  display: inline-block;
  background: rgba(15, 112, 30, 0.12);
  color: var(--green-dark);
  font-weight: 700;
  font-size: 13px;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 18px;
}

.hero-copy h1 {
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.15;
  margin: 0 0 12px;
}

.hero-copy p {
  font-size: 16px;
  color: var(--text-secondary);
  max-width: 44ch;
  margin: 0 0 24px;
}

/* Pinned to the hero's bottom-right corner at every screen size —
   matches the app's own DashboardHeader, which anchors the MLA's portrait
   the same way (right: 0, bottom: -10) rather than repositioning it for
   narrow screens. Sized as a % of the hero so it scales down gracefully
   instead of the fixed max-width this used to have, which forced it to
   drop below the copy (and re-center) once the two could no longer sit
   side by side. */
.hero-portrait {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 34%;
  min-width: 140px;
  max-width: 360px;
  pointer-events: none;
}

@media (max-width: 720px) {
  .hero .container {
    padding-top: 32px;
    /* Reserves room below the copy for the portrait, which is pinned to
       the corner rather than taking part in normal flow. */
    padding-bottom: 220px;
  }

  .hero-copy {
    max-width: 100%;
  }

  .hero-portrait {
    width: 52%;
    max-width: 220px;
  }
}

/* ── Store buttons + QR codes ──────────────────────────────────────────── */
/* Each store gets one column (.store-item): its badge on top, its own QR
   directly beneath at the exact same width — proximity and matching width
   do the work of pairing them, so nothing needs a caption spelling out
   "this QR is for this button." Badge shape/hierarchy is the standard "app
   store badge" convention — dark rounded pill, icon on the left, a small
   eyebrow line ("Download on the" / "GET IT ON") over a larger store-name
   line, the same layout both Apple's and Google's own official badge
   assets use — since there's no network access here to pull in the real
   assets. */

.store-buttons {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

/* Fixed, not stretch-derived — a percentage-width QR image inside an
   auto-sized column still contributes its real 640×640 file dimensions to
   that column's intrinsic size (the percentage can't resolve until the
   column's own width is known, so browsers fall back to the image's actual
   pixel size), blowing the whole column out to ~640px. An explicit width
   here sidesteps that circularity entirely. */
.store-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 190px;
}

.store-button {
  width: 100%;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #000000;
  color: var(--white);
  text-decoration: none;
  padding: 9px 16px;
  border-radius: 10px;
  border: 1px solid #000000;
  transition: opacity 0.15s ease;
}

.store-button:hover {
  opacity: 0.85;
}

.store-button svg {
  flex-shrink: 0;
}

.store-button .store-button-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.store-button .eyebrow {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.02em;
}

.store-button .store-name {
  font-size: 17px;
  font-weight: 600;
  font-family: -apple-system, "Helvetica Neue", Arial, sans-serif;
}

/* Not yet published — clickable (see nav.js), but visually distinct from a
   real working link, and its own click shows an inline "coming soon"
   notice rather than navigating anywhere. web-deploy.yml strips this
   attribute automatically once a real store URL is set. */
.store-button[data-unavailable="true"] {
  background: var(--white);
  border-color: var(--border);
  color: var(--text-primary);
}

.store-button[data-unavailable="true"] svg {
  opacity: 0.55;
}

/* A light frame directly on the QR image, not a separate padded card — the
   QR itself already reads as a distinct object, so wrapping it in another
   background/shadow just competed with the button above it. The image
   fills .store-item's fixed width (stretch, see above) at whatever size
   that resolves to; its own 640×640 source (see web-deploy.yml) just
   determines how sharp it stays at that size, not how big it renders. */
.qr-code img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  border: 1px solid var(--border);
}

/* Hidden entirely (not a broken-image icon) until web-deploy.yml has both a
   real store URL to encode and a generated QR image to point at — the store
   button's own "coming soon" note already covers this state for its pair. */
.qr-code[data-unavailable="true"] {
  display: none;
}

.store-note {
  width: 100%;
  font-size: 13px;
  color: var(--text-secondary);
  min-height: 1.2em;
}

/* ── Generic sections ───────────────────────────────────────────────── */

section {
  padding: 56px 0;
}

.section-title {
  font-size: 26px;
  margin: 0 0 8px;
}

.section-subtitle {
  color: var(--text-secondary);
  margin: 0 0 32px;
  max-width: 60ch;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

@media (max-width: 780px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 520px) {
  .card-grid {
    grid-template-columns: 1fr;
  }
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
}

.card h3 {
  margin: 0 0 6px;
  font-size: 16px;
}

.card p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 14px;
}

.icon-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(15, 112, 30, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  font-size: 18px;
}

/* ── Page header (non-home pages) ──────────────────────────────────── */

.page-header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 40px 0;
}

.page-header h1 {
  margin: 0 0 8px;
  font-size: 28px;
}

.page-header p {
  margin: 0;
  color: var(--text-secondary);
}

/* ── Content page (privacy) ─────────────────────────────────────────── */

.doc {
  max-width: 760px;
  margin: 0 auto;
  padding: 48px 20px;
}

.doc h2 {
  font-size: 19px;
  margin: 36px 0 10px;
}

.doc h2:first-of-type {
  margin-top: 0;
}

.doc p,
.doc li {
  color: var(--text-secondary);
  font-size: 15px;
}

.doc-updated {
  color: var(--text-secondary);
  font-size: 13px;
  margin-bottom: 32px;
}

/* ── Contact / Emergency list pages ─────────────────────────────────── */

.list-page {
  max-width: 760px;
  margin: 0 auto;
  padding: 48px 20px;
}

.list-page .lead {
  color: var(--text-secondary);
  margin-bottom: 24px;
}

.contact-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
}

.contact-row:last-child {
  border-bottom: none;
}

.contact-row .icon-circle {
  margin-bottom: 0;
  flex-shrink: 0;
}

.contact-row .details {
  flex: 1;
  min-width: 0;
}

.contact-row .details strong {
  display: block;
  font-size: 15px;
}

.contact-row .details span {
  display: block;
  color: var(--text-secondary);
  font-size: 13px;
}

.contact-row a.value {
  color: var(--green);
  text-decoration: none;
  font-weight: 700;
  white-space: nowrap;
}

.emergency-row a.value {
  color: var(--red);
}

.emergency-row[data-urgent="true"] {
  background: rgba(192, 39, 45, 0.06);
  border-radius: 12px;
  padding: 18px 14px;
  border-bottom: none;
  margin-bottom: 8px;
}

/* ── Footer ─────────────────────────────────────────────────────────── */

.site-footer {
  border-top: 1px solid var(--border);
  padding: 32px 0;
  margin-top: 40px;
}

.site-footer .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.site-footer nav {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.site-footer a {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 13px;
}

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

.site-footer .copyright {
  color: var(--text-secondary);
  font-size: 13px;
}

/* ── Delete Account (delete-account.html only) ────────────────────────
   This page's own — everything below is scoped to its .delete-account-*
   prefix so it can't leak into any other page's layout. See that file's
   own comment for why this page exists and why it isn't linked from
   anywhere in the site. */

.delete-account-wrap {
  max-width: 440px;
  margin: 0 auto;
  padding: 48px 20px 64px;
}

.delete-account-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 32px 28px;
}

.delete-account-title {
  margin: 0 0 8px;
  font-size: 22px;
}

.delete-account-subtitle {
  margin: 0 0 28px;
  color: var(--text-secondary);
  font-size: 14px;
}

.form-field {
  margin-bottom: 24px;
}

.form-field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 8px;
}

.form-input-row {
  display: flex;
  gap: 8px;
}

.form-country-code {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-weight: 600;
  font-size: 15px;
}

.form-input {
  flex: 1;
  width: 100%;
  height: 48px;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0 14px;
  font-size: 15px;
  font-family: inherit;
  color: var(--text-primary);
  box-sizing: border-box;
}

.form-input:focus {
  outline: 2px solid var(--green);
  outline-offset: -1px;
}

.otp-input-row {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-bottom: 24px;
}

.otp-digit {
  width: 48px;
  height: 56px;
  text-align: center;
  font-size: 22px;
  font-weight: 700;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  font-family: inherit;
  color: var(--text-primary);
}

.otp-digit:focus {
  outline: none;
  border-color: var(--green);
}

.btn-block {
  display: block;
  width: 100%;
  height: 50px;
  border-radius: 12px;
  border: none;
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  color: var(--white);
  transition: opacity 0.15s ease;
}

.btn-block:disabled {
  opacity: 0.6;
  cursor: default;
}

.btn-block:not(:disabled):hover {
  opacity: 0.9;
}

.btn-green {
  background: var(--green);
}

.btn-red {
  background: var(--red);
}

.notice-banner {
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  margin-bottom: 24px;
}

.notice-warning {
  background: #fdf0e3;
  color: #92600e;
}

.notice-error {
  background: rgba(192, 39, 45, 0.1);
  color: var(--red);
}

.delete-account-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 16px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
}

.delete-account-back:hover {
  color: var(--text-primary);
}

.delete-account-result {
  text-align: center;
}

.result-icon-circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  font-size: 36px;
}

.result-icon-circle.success {
  background: rgba(15, 112, 30, 0.12);
}

.delete-account-result h2 {
  margin: 0 0 10px;
  font-size: 20px;
}

.delete-account-result p {
  margin: 0 0 28px;
  color: var(--text-secondary);
  font-size: 14px;
}

.delete-account-step[hidden] {
  display: none;
}