/* ==========================================================================
   AthlosID · site stylesheet
   Built on the Enidog design system, direction E1 "Clean Product"
   (enidog/brand → DESIGN.md, STRUCTURE.md, tokens.json).

   Units: rem throughout, and no root font-size is declared, so the page
   respects the reader's operating system text size. Hairlines stay at 1px.
   See DESIGN-NOTES.md for why this resolves the px/rem conflict between
   DESIGN.md §3 and STRUCTURE.md §3.1.
   ========================================================================== */

/* ---------- Brand fonts, self hosted, variable ---------- */
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-Variable.ttf") format("truetype-variations"),
       url("../fonts/Inter-Variable.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/JetBrainsMono-Variable.ttf") format("truetype-variations"),
       url("../fonts/JetBrainsMono-Variable.ttf") format("truetype");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* brand and role colour */
  --cyan: #05D4F8;        /* hero accent, glow, chip. never a fill on white */
  --cyan-deep: #0496B4;   /* the cyan used in UI: buttons, links, labels */
  --ink: #0F172A;
  --ok: #1EA672;          /* verified, human reviewed */
  --ai: #6366F1;          /* AI and AthlosID identity */
  --live: #EF4444;
  --watch: #F59E0B;

  /* type */
  --display: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
  --body: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;

  /* radius */
  --r-xs: 0.25rem;
  --r-sm: 0.5rem;
  --r-card: 0.75rem;
  --r-lg: 1rem;
  --r-pill: 999px;

  /* space, named by their pixel value at the default root */
  --s-4: 0.25rem;
  --s-8: 0.5rem;
  --s-10: 0.625rem;
  --s-12: 0.75rem;
  --s-16: 1rem;
  --s-24: 1.5rem;
  --s-32: 2rem;
  --s-40: 2.5rem;
  --s-48: 3rem;
  --s-64: 4rem;
  --s-80: 5rem;
  --s-96: 6rem;

  /* motion */
  --fast: 150ms;
  --normal: 300ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);

  --measure: 62ch;
  --page: 68rem;
}

/* light face, the default */
:root,
[data-theme="light"] {
  --bg: #F8FAFC;
  --surface: #FFFFFF;
  --surface2: #F1F5F9;
  --border: #E2E8F0;
  --text: #0F172A;
  --text2: #64748B;
  --shadow: 0 1px 3px rgba(15, 23, 42, .08), 0 1px 2px rgba(15, 23, 42, .04);
  --scrim: rgba(15, 23, 42, .55);
  --logo-athlosid: url("../logos/athlosid-logo.svg");
  --logo-enidog: url("../logos/enidog-logo.svg");
}

/* dark face, an equal peer and not a variant */
[data-theme="dark"] {
  --bg: #0F172A;
  --surface: #1E293B;
  --surface2: #263244;
  --border: #334155;
  --text: #F1F5F9;
  --text2: #94A3B8;
  --shadow: 0 1px 3px rgba(0, 0, 0, .3);
  --scrim: rgba(0, 0, 0, .6);
  /* real white wordmarks, so the cyan chip stays cyan. never a CSS filter */
  --logo-athlosid: url("../logos/athlosid-logo-white.svg");
  --logo-enidog: url("../logos/enidog-logo-white.svg");
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0F172A;
    --surface: #1E293B;
    --surface2: #263244;
    --border: #334155;
    --text: #F1F5F9;
    --text2: #94A3B8;
    --shadow: 0 1px 3px rgba(0, 0, 0, .3);
    --scrim: rgba(0, 0, 0, .6);
    --logo-athlosid: url("../logos/athlosid-logo-white.svg");
    --logo-enidog: url("../logos/enidog-logo-white.svg");
  }
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

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

body {
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.6;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* height:auto matters: the width and height attributes on an <img> arrive as
   presentational hints, and a hinted height gives the box a definite height,
   which makes the browser ignore aspect-ratio below. */
img, svg { display: block; max-width: 100%; height: auto; }

a { color: var(--cyan-deep); text-decoration: none; }
a:hover { text-decoration: underline; }

:is(a, button, input, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--cyan-deep);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

::selection { background: rgba(5, 212, 248, .28); }

/* ---------- Type ---------- */
h1, h2, h3 { font-family: var(--display); text-wrap: balance; }

.hero-title {
  font-size: clamp(2.375rem, 6vw, 3.875rem);
  line-height: 1.02;
  font-weight: 800;
  letter-spacing: -0.035em;
}
/* The h1 on an inner page. Smaller than the home page headline, because those
   pages are a level down, and still clearly the title of what follows. */
.page-title {
  font-size: clamp(1.875rem, 4.6vw, 2.625rem);
  line-height: 1.06;
  font-weight: 800;
  letter-spacing: -0.03em;
}
h2 {
  font-size: clamp(1.5rem, 3.4vw, 1.75rem);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.02em;
}
/* Inside a card, a step or a bound, the h2 is a third level heading by position
   even though the page only has one h1 above it. It keeps the smaller size so
   the reading order in the markup and the visual order on screen agree. */
h3,
.card > h2,
.step > h2 {
  font-size: 1.25rem;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.lead {
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--text2);
  max-width: var(--measure);
}
p { max-width: var(--measure); }

.label {
  font-family: var(--mono);
  font-size: 0.75rem;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cyan-deep);
  display: block;
}
.data {
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--text2);
}

/* ---------- Layout ---------- */
.wrap {
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: var(--s-24);
}
section { padding-block: var(--s-64); border-top: 1px solid var(--border); }
@media (min-width: 48rem) { section { padding-block: var(--s-96); } }

/* An inner page is one section, so it takes the hero's spacing and drops the
   rule above it. The header already draws a line there. */
.page { border-top: 0; padding-block: var(--s-64); }
@media (min-width: 48rem) { .page { padding-block: var(--s-80) var(--s-96); } }

.sec-head { margin-bottom: var(--s-40); }
.sec-head :is(h1, h2) { margin-top: var(--s-10); }
.sec-head p { margin-top: var(--s-16); }

/* The links that carry a reader on to the next page, at the foot of the content
   rather than in the header, where they are easy to miss on a phone. */
.page-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-12);
  margin-top: var(--s-48);
}

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: var(--s-16);
  top: var(--s-16);
  z-index: 100;
  background: var(--surface);
  color: var(--text);
  padding: var(--s-12) var(--s-16);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}

/* ---------- Buttons ---------- */
.btn {
  font-family: var(--body);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  padding: var(--s-16) var(--s-24);
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-10);
  cursor: pointer;
  background: var(--cyan-deep);
  color: #FFFFFF;
  transition: background var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.btn:hover { background: #037e97; text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn.ghost {
  background: var(--surface2);
  color: var(--text);
  border-color: var(--border);
}
.btn.ghost:hover { background: var(--border); }

/* ---------- Nav ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.nav .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-16);
  min-height: 4rem;
}
/* min-height, not visible padding: the logo is 22px tall but the link it sits
   in has to be reachable with a thumb. */
.brand { display: flex; align-items: center; gap: var(--s-12); min-height: 2.75rem; }
.wordmark {
  background-image: var(--logo-athlosid);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
  height: 1.375rem;
  width: 8rem;
  flex: none;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: var(--s-24);
  font-size: 0.9375rem;
}
.nav-links a:not(.btn) {
  color: var(--text);
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}
.nav-links .btn { padding: var(--s-12) var(--s-16); }
/* The page you are on. Three signals, not one: the colour, the heavier weight
   and the underline, so it still reads for anyone who cannot see the colour. */
.nav-links a[aria-current="page"]:not(.btn) {
  color: var(--cyan-deep);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--cyan-deep);
}
@media (max-width: 56rem) {
  .nav-links a:not(.btn) { display: none; }
}

/* Icon only: a sun while the light face is on, a moon while the dark one is.
   The icon reports the state, the title and aria-label report the action, so
   nobody has to guess which of the two a bare word meant. */
.theme-toggle {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text2);
  width: 2.75rem;
  height: 2.75rem;
  flex: none;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: color var(--fast) var(--ease),
              border-color var(--fast) var(--ease),
              background var(--fast) var(--ease);
}
.theme-toggle svg {
  width: 1.125rem;
  height: 1.125rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.theme-toggle:hover {
  color: var(--text);
  border-color: var(--text2);
  background: var(--surface2);
}
/* the moon stays hidden by default, so the button still reads correctly if the
   script never runs and no data-theme attribute is ever set */
.theme-toggle .i-moon { display: none; }
[data-theme="dark"] .theme-toggle .i-sun { display: none; }
[data-theme="dark"] .theme-toggle .i-moon { display: block; }

/* ---------- Hero ---------- */
/* The bottom padding used to be shorter than the top because a photograph
   closed the hero and gave it weight. The hero is text only now, so it needs
   the same room underneath as any other section, or it reads as cut off
   rather than as a deliberate opening. If the figure comes back, put the
   smaller bottom values back with it: s-48, and s-64 above 48rem. */
.hero { border-top: 0; padding-block: var(--s-64); }
@media (min-width: 48rem) { .hero { padding-block: var(--s-80) var(--s-96); } }
.hero-title { margin-block: var(--s-16) var(--s-24); }
.hero-cta { display: flex; flex-wrap: wrap; gap: var(--s-12); margin-top: var(--s-32); }
.hero-note { margin-top: var(--s-24); }

.figure {
  margin-top: var(--s-48);
  border-radius: var(--r-card);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface2);
  position: relative;
}
.figure img { width: 100%; height: auto; aspect-ratio: 21 / 9; object-fit: cover; }
@media (max-width: 34rem) { .figure img { aspect-ratio: 4 / 3; } }
.figure figcaption {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: var(--s-32) var(--s-16) var(--s-12);
  background: linear-gradient(to top, var(--scrim), transparent);
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, .92);
}

/* ---------- Bento grid, non uniform on purpose ---------- */
.bento { display: grid; gap: var(--s-16); }
/* two columns on a tablet, three only when the cells stay wide enough to read:
   at 768 the three column version gave 224px cells, which is too narrow. */
@media (min-width: 48rem) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento > :first-child { grid-column: span 2; }
}
@media (min-width: 60rem) {
  .bento { grid-template-columns: repeat(3, 1fr); }
  .bento > :first-child { grid-column: span 2; }
}
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: var(--s-24);
  display: flex;
  flex-direction: column;
  gap: var(--s-10);
}
.card.lead-cell { justify-content: flex-end; gap: var(--s-16); padding: var(--s-32); }
.card p { color: var(--text2); font-size: 1rem; max-width: 46ch; }
.card .label { color: var(--text2); }

.mark {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--r-sm);
  background: rgba(4, 150, 180, .12);
  display: grid;
  place-items: center;
  flex: none;
}
.mark i { width: 0.875rem; height: 0.875rem; border-radius: var(--r-xs); background: var(--cyan-deep); }
.mark.ai { background: rgba(99, 102, 241, .12); }
.mark.ai i { background: var(--ai); }
.mark.ok { background: rgba(30, 166, 114, .12); }
.mark.ok i { background: var(--ok); }

/* ---------- Steps ---------- */
.steps { display: grid; gap: var(--s-24); counter-reset: step; }
@media (min-width: 48rem) { .steps { grid-template-columns: repeat(3, 1fr); gap: var(--s-32); } }
.step { padding-top: var(--s-16); border-top: 2px solid var(--border); }
.step:first-child { border-top-color: var(--cyan-deep); }
.step .n {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--cyan-deep);
}
.step :is(h2, h3) { margin-block: var(--s-8) var(--s-8); }
.step p { color: var(--text2); font-size: 1rem; }

/* ---------- Where it fits ---------- */
/* The two cards that used to sit beside this held the sibling products' names and
   wordmarks, and those are not to appear on this site, so the section keeps its
   argument and drops the examples. The .eco grid that laid the cards out went
   with them. */
.foundation {
  margin-top: var(--s-16);
  padding: var(--s-24);
  border: 1px solid var(--border);
  border-left: 3px solid var(--ai);
  border-radius: var(--r-card);
  background: var(--surface);
}
.foundation .wordmark { height: 1.125rem; width: 7rem; margin-bottom: var(--s-12); }
.foundation p { color: var(--text2); font-size: 1rem; }

/* A selective disclosure section with a working permission panel also sat here.
   That one was removed on request, and every rule that served it went too. */

/* ---------- Boundaries list ---------- */
.bounds { display: grid; gap: var(--s-12); margin-top: var(--s-8); }
.bound {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-16);
  padding: var(--s-16);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}
.bound .tag {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text2);
  padding-top: 0.1875rem;
  white-space: nowrap;
}
.bound p { font-size: 1rem; max-width: 58ch; }

/* ---------- Long form prose, the privacy notice ---------- */
/* The only page here that is read rather than scanned, so it gets one column,
   generous space above each heading, and lists that look like lists. The reset
   at the top took the indent off every ul, so it is put back here rather than
   globally, where it would have changed the nav and the footer too. */
.prose { max-width: 44rem; }
.prose h2 { margin-top: var(--s-48); }
.prose h3 { margin-top: var(--s-32); }
.prose :is(p, ul) { margin-top: var(--s-16); }
.prose ul { padding-left: var(--s-24); max-width: var(--measure); }
.prose li { margin-top: var(--s-8); }
.prose li::marker { color: var(--text2); }
.prose li p { margin-top: var(--s-8); }
.prose a { text-decoration: underline; }
.prose .updated {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text2);
}

/* ---------- Contact ---------- */
.contact-layout { display: grid; gap: var(--s-32); align-items: start; }
@media (min-width: 60rem) {
  .contact-layout { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); gap: var(--s-64); }
}
.contact-aside p { color: var(--text2); font-size: 1rem; }
.contact-aside dl { margin-top: var(--s-24); display: grid; gap: var(--s-16); }
.contact-aside dt {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text2);
}
.contact-aside dd { font-size: 1rem; margin-top: var(--s-4); }
.contact-aside dd a { display: inline-flex; align-items: center; min-height: 2.75rem; }

.form {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: var(--s-24);
}
@media (min-width: 48rem) { .form { padding: var(--s-32); } }

.field-row { display: grid; gap: var(--s-16); }
@media (min-width: 34rem) { .field-row { grid-template-columns: 1fr 1fr; } }

.field { display: block; margin-bottom: var(--s-16); }
.field > .lab {
  display: flex;
  align-items: baseline;
  gap: var(--s-8);
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: var(--s-8);
}
.field .opt {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text2);
}
.field .hint { font-size: 0.8125rem; color: var(--text2); margin-top: var(--s-8); }

input[type="text"],
input[type="email"],
input[type="tel"],
textarea {
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.5;
  width: 100%;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: var(--s-12);
  min-height: 2.75rem;
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
textarea { min-height: 6.5rem; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--text2); opacity: .8; }
input:focus, textarea:focus {
  outline: none;
  border-color: var(--cyan-deep);
  box-shadow: 0 0 0 3px rgba(4, 150, 180, .2);
}
input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--live); }
input[aria-invalid="true"]:focus, textarea[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, .2);
}

.err {
  display: none;
  font-size: 0.8125rem;
  color: var(--live);
  margin-top: var(--s-8);
  align-items: center;
  gap: var(--s-8);
}
.err::before { content: "!"; font-family: var(--mono); font-weight: 700; }
.err.show { display: flex; }

/* file upload */
.drop {
  border: 1px dashed var(--border);
  border-radius: var(--r-sm);
  background: var(--surface2);
  padding: var(--s-24);
  text-align: center;
  cursor: pointer;
  display: block;
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.drop:hover, .drop.over { border-color: var(--cyan-deep); background: rgba(4, 150, 180, .06); }
.drop input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.drop .prompt { font-size: 1rem; font-weight: 600; }
.drop .prompt u { color: var(--cyan-deep); text-decoration: none; border-bottom: 1px solid currentColor; }
.drop .types { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.04em; color: var(--text2); margin-top: var(--s-8); }

.file-chosen {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-12);
  padding: var(--s-12);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface2);
}
.file-chosen.show { display: flex; }
.file-chosen .meta { min-width: 0; }
.file-chosen .name {
  font-size: 0.875rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.file-chosen .size { font-family: var(--mono); font-size: 0.75rem; color: var(--text2); }
.file-remove {
  font-family: var(--body);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  min-height: 2.75rem;
  padding-inline: var(--s-16);
  cursor: pointer;
  flex: none;
}
.file-remove:hover { border-color: var(--live); color: var(--live); }

.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-16);
  margin-top: var(--s-24);
  padding-top: var(--s-24);
  border-top: 1px solid var(--border);
}
.form-actions .btn { flex: none; }
.privacy { font-size: 1rem; color: var(--text2); max-width: 34ch; }

.form-status {
  display: none;
  gap: var(--s-12);
  align-items: flex-start;
  padding: var(--s-16);
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  background: var(--surface2);
  margin-bottom: var(--s-24);
  font-size: 1rem;
}
.form-status.show { display: flex; }
.form-status .icon { font-family: var(--mono); font-weight: 700; flex: none; }
.form-status.ok { border-left-color: var(--ok); }
.form-status.ok .icon { color: var(--ok); }
.form-status.bad { border-left-color: var(--live); }
.form-status.bad .icon { color: var(--live); }
.form-status p { max-width: 54ch; }
.form-status a { text-decoration: underline; }

/* ---------- The thank you panel ---------- */
/* A native <dialog>, so the browser owns the focus trap, the Escape key and the
   stacking. It opens only after a server has accepted a message. */
.modal {
  width: min(28rem, calc(100vw - var(--s-32)));
  /* the reset at the top sets margin 0 on everything, which beats the browser's
     own margin auto on a dialog and pins the panel to the top of the screen */
  margin: auto;
  padding: var(--s-32);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 10px 30px rgba(15, 23, 42, .18);
}
/* ::backdrop sits outside the normal tree in older engines, so --scrim cannot be
   relied on to reach it. Both faces are written out, same values as the token. */
.modal::backdrop { background: rgba(15, 23, 42, .55); }
:root[data-theme="dark"] .modal::backdrop { background: rgba(0, 0, 0, .6); }

/* the page behind must not scroll while the panel is open */
html:has(.modal[open]) { overflow: hidden; }

@keyframes modal-in {
  from { opacity: 0; transform: translateY(0.5rem); }
  to { opacity: 1; transform: none; }
}
.modal[open] { animation: modal-in var(--normal) var(--ease); }

.modal-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--r-pill);
  background: var(--surface2);
  color: var(--ok);
  margin-bottom: var(--s-24);
}
.modal-mark svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.modal-title { font-size: 1.5rem; line-height: 1.2; font-weight: 700; }
.modal p { color: var(--text2); max-width: 40ch; margin-top: var(--s-12); }
.modal .btn { margin-top: var(--s-32); }

/* ---------- Footer, the only dark surface on the light face ---------- */
.site-foot {
  background: var(--ink);
  color: #94A3B8;
  padding-block: var(--s-48);
  border-top: 1px solid var(--border);
}
.site-foot .wrap {
  display: grid;
  gap: var(--s-32);
}
@media (min-width: 48rem) {
  .site-foot .wrap { grid-template-columns: 1fr auto; align-items: start; }
}
.site-foot .wordmark {
  background-image: url("../logos/athlosid-logo-white.svg");
  height: 1.25rem;
  width: 7.5rem;
}
.site-foot .powered {
  display: flex;
  align-items: center;
  gap: var(--s-10);
  margin-top: var(--s-16);
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #64748B;
}
.site-foot .powered .em {
  background-image: url("../logos/enidog-logo-white.svg");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
  height: 0.875rem;
  width: 4.5rem;
  opacity: .85;
}
.site-foot nav { display: flex; flex-wrap: wrap; gap: var(--s-8) var(--s-24); font-size: 0.875rem; }
.site-foot a { color: #CBD5E1; }
/* the footer links are the smallest targets on the page, so they get the floor */
.site-foot nav a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.site-foot nav a[aria-current="page"] { color: #FFFFFF; text-decoration: underline; }
.site-foot .fine {
  grid-column: 1 / -1;
  padding-top: var(--s-24);
  border-top: 1px solid #1E293B;
  font-size: 0.8125rem;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-8) var(--s-24);
  justify-content: space-between;
}
.site-foot .fine span { max-width: none; }