/* ==========================================================================
   Grigoris Eginitis — auto body repair, Paros
   Single stylesheet. No imports, no @font-face, no external requests.
   Typography is a system font stack: nothing is fetched from a third party,
   and every stack member covers the Greek alphabet on its platform.
   ========================================================================== */

:root {
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue",
    Helvetica, Arial, "Noto Sans", "DejaVu Sans", sans-serif;

  /* Light theme (default) */
  --bg: #ffffff;
  --surface: #f2f4f6;
  --surface-2: #e4e9ee;
  --text: #14181c;
  --text-muted: #4c545c;
  --border: #8b959e;
  --border-strong: #6b757e;

  --accent: #17456e;
  --accent-hover: #0e2f4d;
  --on-accent: #ffffff;
  --link: #14456f;

  --gap-bg: #fff3d6;
  --gap-text: #4d3200;
  --gap-border: #8a6100;

  --footer-bg: #14304d;
  --footer-text: #ffffff;
  --footer-muted: #d7e3f0;

  /* Two-tone focus ring: one of the two tones always clears 3:1 against
     whatever sits behind it, on light or dark surfaces alike. */
  --focus-a: #0b1f33;
  --focus-b: #ffd24a;

  /* ---- the "shell": header, hero and footer -----------------------------
     A dark spray-booth panel that stays dark in BOTH themes, so the brand
     reads the same way whatever the visitor's system is set to, and so the
     text over it has exactly one contrast case to satisfy instead of two. */
  --shell-bg: #0c1826;
  --shell-bg-2: #0f2436;
  --on-shell: #ffffff;
  --on-shell-muted: #c3d3e3;
  --shell-link: #e2eefb;

  /* Booth light. Decorative and for the primary button only — never used as
     text on a light background, where cyan cannot reach 4.5:1. */
  --spark: #35d6f5;
  --on-spark: #05131b;
  --spark-edge: #0a2f3e;

  /* Overlay strengths. contrast.py composites these over the shell base and
     measures the text against the brightest resulting pixel, so changing a
     number here changes what the check has to prove. */
  --crease-alpha: 0.03;
  --grid-alpha: 0.03;
  --glow-alpha: 0.18;
  --sweep-alpha: 0.03;

  --radius: 10px;
  /* Must be >= the rendered height of .call-bar (measured 75px), so the
     reserved body padding always clears it. */
  --bar-h: 5rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1418;
    --surface: #19212a;
    --surface-2: #232d38;
    --text: #eef2f6;
    --text-muted: #b6c0ca;
    --border: #5a6672;
    --border-strong: #8c98a4;

    --accent: #a9c9ea;
    --accent-hover: #c7dcf3;
    --on-accent: #0c1620;
    --link: #a9c9ea;

    --gap-bg: #3a2f10;
    --gap-text: #ffe6a8;
    --gap-border: #d9ad3a;

    --footer-bg: #0a1017;
    --footer-text: #ffffff;
    --footer-muted: #c3ceda;

    --focus-a: #ffd24a;
    --focus-b: #0b1f33;
  }
}

/* --------------------------------------------------------------- reset ---- */

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

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  /* Room for the fixed one-handed call bar so it never covers content
     or a focused control (WCAG 2.4.11). */
  padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 48em) {
  body { padding-bottom: 0; }
}

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

h1, h2, h3 {
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}

h1 { font-size: clamp(1.9rem, 6vw, 3rem); }
h2 { font-size: clamp(1.45rem, 4vw, 2rem); }
h3 { font-size: 1.15rem; }

p { margin: 0 0 1rem; max-width: 68ch; }

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

ul { padding-inline-start: 1.25rem; }

/* ---------------------------------------------------------------- focus ---- */

:focus { outline: 3px solid var(--focus-a); outline-offset: 2px; }

:focus:not(:focus-visible) { outline: none; box-shadow: none; }

:focus-visible {
  outline: 3px solid var(--focus-a);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--focus-b);
  border-radius: 4px;
}

/* ------------------------------------------------------------ skip link ---- */

.skip-link {
  position: absolute;
  left: 0.5rem;
  top: -100vh;
  z-index: 100;
  padding: 0.75rem 1rem;
  background: var(--bg);
  color: var(--text);
  border: 2px solid var(--border-strong);
  border-radius: var(--radius);
  font-weight: 600;
  text-decoration: none;
}

.skip-link:focus { top: 0.5rem; }

/* --------------------------------------------------------------- layout ---- */

.wrap {
  width: 100%;
  max-width: 68rem;
  margin-inline: auto;
  padding-inline: 1.125rem;
}

@media (min-width: 40em) {
  .wrap { padding-inline: 1.75rem; }
}

section { padding-block: 2.75rem; scroll-margin-top: 1rem; }

section + section { border-top: 1px solid var(--border); }

/* A short lit bar above each section heading, echoing the booth light. */
main section:not(.hero) > .wrap > h2 {
  position: relative;
  padding-top: 0.85rem;
}

main section:not(.hero) > .wrap > h2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 2.5rem;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--spark), rgba(53, 214, 245, 0.15));
}

@media (min-width: 48em) {
  section { padding-block: 4rem; }
}

.lede { font-size: 1.125rem; color: var(--text-muted); }

/* ------------------------------------------------- shared shell surface ---- */

/* Panel creases + a fine measuring grid, both pure gradients so nothing is
   fetched. Applied as a background layer stack, lightest layer first. */
.shell {
  position: relative;
  isolation: isolate;
  background-color: var(--shell-bg);
  background-image:
    /* diagonal body-panel creases */
    repeating-linear-gradient(
      114deg,
      transparent 0 38px,
      rgba(255, 255, 255, var(--crease-alpha)) 38px 39px,
      transparent 39px 96px
    ),
    /* technical grid */
    repeating-linear-gradient(
      to right, rgba(255, 255, 255, var(--grid-alpha)) 0 1px, transparent 1px 34px
    ),
    repeating-linear-gradient(
      to bottom, rgba(255, 255, 255, var(--grid-alpha)) 0 1px, transparent 1px 34px
    ),
    /* booth light, top right */
    radial-gradient(
      120% 150% at 88% -20%,
      rgba(53, 214, 245, var(--glow-alpha)) 0%,
      rgba(53, 214, 245, 0.05) 38%,
      transparent 68%
    ),
    linear-gradient(158deg, var(--shell-bg) 0%, var(--shell-bg-2) 58%, var(--shell-bg) 100%);
  color: var(--on-shell);
}

/* The lit edge where the booth panel ends. */
.shell-edge {
  position: relative;
}

.shell-edge::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(
    90deg, transparent 0%, var(--spark) 22%, rgba(53, 214, 245, 0.25) 55%, transparent 100%
  );
}

/* --------------------------------------------------------------- header ---- */

.site-header {
  padding-block: 0.875rem;
}

.header-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  align-items: center;
  justify-content: space-between;
}

.brand {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  text-decoration: none;
  color: var(--on-shell);
  font-weight: 700;
  font-size: 1.0625rem;
}

.brand .brand-trade {
  font-weight: 400;
  font-size: 0.8125rem;
  color: var(--on-shell-muted);
  letter-spacing: 0.01em;
}

/* Language toggle: a real link to the other language's page. No JS. */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.75rem;
  padding: 0.5rem 0.875rem;
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--on-shell);
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
}

.lang-switch:hover { background: rgba(255, 255, 255, 0.16); border-color: var(--spark); }

/* Decorative flag beside the language name. The hairline ring keeps a dark
   flag edge (the Union Flag's navy, the Greek canton) from merging into the
   dark shell behind it. */
.flag {
  flex: none;
  width: 1.4rem;
  height: 0.95rem;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6);
}

.lang-switch .globe { font-size: 1rem; line-height: 1; }

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

.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.375rem 0.75rem;
  border-radius: var(--radius);
  color: var(--shell-link);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9375rem;
}

.site-nav a:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--on-shell);
  text-decoration: underline;
}

@media (min-width: 56em) {
  .site-nav ul { width: auto; margin-top: 0; }
  .header-row { flex-wrap: nowrap; }
}

/* ----------------------------------------------------------------- hero ---- */

.hero {
  padding-block: 3.25rem 3.5rem;
  overflow: hidden;
}

/* A slow sheen travelling across the panel, like a light passing over wet
   paint. Decorative only: it carries no information, it is under the text in
   the stacking order, and it is switched off entirely for anyone who has asked
   for reduced motion. */
.hero::before {
  content: "";
  position: absolute;
  inset: -40% -60%;
  z-index: -1;
  background: linear-gradient(
    100deg,
    transparent 38%,
    rgba(255, 255, 255, var(--sweep-alpha)) 47%,
    rgba(53, 214, 245, 0.07) 50%,
    transparent 60%
  );
  transform: translateX(-30%);
  animation: sheen 14s linear infinite;
}

@keyframes sheen {
  0%   { transform: translateX(-35%); }
  100% { transform: translateX(35%); }
}

@media (prefers-reduced-motion: reduce) {
  .hero::before { animation: none; }
}

.hero .wrap { position: relative; z-index: 1; }

.hero .trade {
  display: inline-block;
  margin: 0 0 0.85rem;
  padding: 0.3rem 0.7rem 0.3rem 0.6rem;
  background: rgba(255, 255, 255, 0.1);
  border-left: 3px solid var(--spark);
  border-radius: 4px;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-shell);
}

.hero h1 { color: var(--on-shell); }

.hero .tagline {
  font-size: 1.1875rem;
  margin-bottom: 1.25rem;
  color: var(--on-shell);
}

.hero-meta {
  margin: 0 0 1.75rem;
  color: var(--on-shell-muted);
  font-size: 0.9375rem;
}

.hero-meta li { list-style: none; }

.hero-meta ul { margin: 0; padding: 0; display: grid; gap: 0.25rem; }

/* --------------------------------------------------------------- button ---- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3.25rem;
  /* An inline-flex box sizes to max-content, so a long label would push the
     document wider than a narrow phone viewport instead of wrapping. */
  max-width: 100%;
  padding: 0.75rem 1.25rem;
  border: 2px solid transparent;
  border-radius: var(--radius);
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  text-align: center;
}

/* Calling is the action that matters, so it gets the booth light. The dark
   border is not decoration: cyan on white is only ~1.8:1, so the button needs
   its own edge to clear the 3:1 non-text bar against a light page. */
.btn-primary {
  background: var(--spark);
  color: var(--on-spark);
  border-color: var(--spark-edge);
  font-size: 1.125rem;
  min-height: 3.5rem;
  box-shadow: 0 0 0 1px rgba(5, 19, 27, 0.15), 0 6px 18px -8px rgba(53, 214, 245, 0.7);
}

.btn-primary:hover { background: #6ce4fa; border-color: var(--spark-edge); }

.btn-secondary {
  background: var(--bg);
  color: var(--link);
  border-color: var(--border-strong);
}

.btn-secondary:hover { background: var(--surface-2); }

/* Secondary actions sitting on the dark shell need the inverse treatment. */
.shell .btn-secondary {
  background: rgba(255, 255, 255, 0.07);
  color: var(--on-shell);
  border-color: rgba(255, 255, 255, 0.5);
}

.shell .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: var(--spark);
}

.btn-row {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 34em) {
  .btn-row { grid-auto-flow: column; grid-auto-columns: max-content; align-items: stretch; }
}

/* ------------------------------------------------------------- services ---- */

.card-grid {
  display: grid;
  gap: 1rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 44em) {
  .card-grid { grid-template-columns: repeat(3, 1fr); }
}

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

.card h3 { margin-bottom: 0.35rem; }

.card p { margin: 0; color: var(--text-muted); font-size: 0.9375rem; }

.note { color: var(--text-muted); font-size: 0.9375rem; }

.card-grid + .note, .slot-grid + .note { margin-top: 1rem; }

/* -------------------------------------------------------------- gallery ---- */

.slot-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 44em) {
  .slot-grid { grid-template-columns: repeat(3, 1fr); }
}

.slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  /* No aspect-ratio here. With an auto minimum size, aspect-ratio transfers the
     slot's content height back into a minimum WIDTH (measured: 191px per column
     on a 320px viewport), which pushed the whole document into horizontal
     scroll. min-height keeps the boxes uniform without that coupling, and
     min-width:0 lets the 1fr tracks actually shrink. */
  min-width: 0;
  min-height: 7.5rem;
  padding: 0.75rem 0.5rem;
  /* Blueprint grid, so an empty slot reads as a marked-out space waiting for a
     photo rather than a broken image. */
  background-color: var(--surface);
  background-image:
    repeating-linear-gradient(to right, var(--border) 0 1px, transparent 1px 16px),
    repeating-linear-gradient(to bottom, var(--border) 0 1px, transparent 1px 16px);
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius);
  color: var(--text-muted);
  font-size: 0.8125rem;
  text-align: center;
}

.slot .slot-num { font-weight: 700; font-size: 1rem; color: var(--text); }

/* Real photographs, once the owner has dropped them in. min-width:0 for the
   same reason as .slot: an aspect-ratio box in a 1fr track would otherwise
   claim a content-derived minimum width and force horizontal scroll. */
.shot {
  min-width: 0;
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.shot img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--surface-2);
}

.shot-cap {
  margin: 0;
  padding: 0.5rem 0.7rem 0.6rem;
  font-size: 0.875rem;
  color: var(--text-muted);
}

/* ------------------------------------------------- hours / gap marker ---- */

.split {
  display: grid;
  gap: 1.5rem;
  margin-top: 1.5rem;
}

@media (min-width: 46em) {
  .split { grid-template-columns: 1fr 1fr; gap: 2rem; }
}

.data-list { margin: 0; }

.data-list dt {
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.data-list dd {
  margin: 0.15rem 0 1rem;
  font-size: 1.0625rem;
}

.data-list dd.big { font-size: 1.5rem; font-weight: 700; }

/* Opening hours: one row per band, days left, time right. The <div> wrapper
   around each dt/dd pair is valid inside <dl> and lets each pair be a grid row,
   which keeps the pairing intact for screen readers. */
.hours-list {
  margin: 0;
  border-top: 1px solid var(--border);
}

.hours-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  justify-content: space-between;
  align-items: baseline;
  padding-block: 0.7rem;
  border-bottom: 1px solid var(--border);
}

.hours-row dt {
  margin: 0;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: normal;
  text-transform: none;
  color: var(--text);
}

.hours-row dd {
  margin: 0;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* A reusable marked-gap block, kept for any fact the business has not yet
   supplied. Deliberately loud rather than silently blank. */
.gap {
  margin: 0.15rem 0 1rem;
  padding: 0.875rem 1rem;
  background: var(--gap-bg);
  color: var(--gap-text);
  border: 2px solid var(--gap-border);
  border-left-width: 6px;
  border-radius: var(--radius);
}

.data-list dd > .gap { margin: 0; }

.gap p { margin: 0.4rem 0 0; color: inherit; font-size: 0.9375rem; }

.gap-badge {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border: 2px solid var(--gap-border);
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

address { font-style: normal; }

/* The address doubles as the link to the workshop's spot on Google Maps. */
.map-link {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.45rem;
  padding: 0.3rem 0.4rem 0.3rem 0;
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 2px;
  border-radius: 4px;
}

.map-link:hover { text-decoration-thickness: 2px; }

.map-link .pin {
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.1rem;
  color: var(--spark-edge);
}

/* On the dark footer the navy pin would disappear, and the body link colour is
   tuned for a light page. */
.site-footer .map-link { color: var(--footer-text); }

.site-footer .map-link .pin { color: var(--spark); }

/* ----------------------------------------------------------------- form ---- */

.contact-cards {
  display: grid;
  gap: 1rem;
  margin: 1.5rem 0 2.25rem;
}

@media (min-width: 44em) {
  .contact-cards { grid-template-columns: 1fr 1fr; }
}

.contact-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.contact-card .label,
.microlabel {
  display: block;
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.site-footer .microlabel { color: var(--footer-muted); margin-bottom: 0.15rem; }

.contact-card .value {
  font-size: 1.1875rem;
  font-weight: 700;
  word-break: break-word;
}

.form-block {
  padding: 1.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

@media (min-width: 44em) {
  .form-block { padding: 1.75rem; }
}

/* Full-width submit on a phone: biggest possible thumb target, and it keeps the
   long label on wrapped lines inside the button rather than overflowing. */
#booking-form button[type="submit"] { width: 100%; }

@media (min-width: 34em) {
  #booking-form button[type="submit"] { width: auto; }
}

.field { margin-bottom: 1.25rem; }

.field label {
  display: block;
  font-weight: 700;
  margin-bottom: 0.3rem;
}

.req { font-weight: 400; font-size: 0.875rem; color: var(--text-muted); }

.hint {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.875rem;
  color: var(--text-muted);
}

input[type="text"],
input[type="tel"],
input[type="date"],
select,
textarea {
  width: 100%;
  min-height: 3rem;
  padding: 0.625rem 0.75rem;
  font: inherit;
  color: var(--text);
  background: var(--bg);
  border: 2px solid var(--border-strong);
  border-radius: var(--radius);
}

select { appearance: none; background-image: none; }

input[aria-invalid="true"],
select[aria-invalid="true"] { border-color: var(--gap-border); border-width: 3px; }

.field-error {
  display: block;
  margin-top: 0.35rem;
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--gap-text);
  background: var(--gap-bg);
  border-left: 4px solid var(--gap-border);
  padding: 0.35rem 0.6rem;
  border-radius: 4px;
}

.field-error:empty { display: none; }

.error-summary {
  margin-bottom: 1.25rem;
  padding: 1rem;
  background: var(--gap-bg);
  color: var(--gap-text);
  border: 2px solid var(--gap-border);
  border-radius: var(--radius);
}

.error-summary:empty { display: none; }

.error-summary h3 { margin: 0 0 0.5rem; font-size: 1rem; }

.error-summary ul { margin: 0; }

.error-summary a { color: var(--gap-text); font-weight: 700; }

.form-status {
  margin-top: 1rem;
  font-weight: 600;
}

.privacy-line { font-size: 0.9375rem; margin-top: 1rem; }

/* Standalone links inside running text or a definition list would otherwise be
   under 24px tall. Vertical padding lifts every one of them over the WCAG 2.2
   2.5.8 minimum target size without relying on the inline-sentence exception. */
.privacy-line a,
.site-footer .data-list dd a,
.doc p a,
.doc li a {
  display: inline-block;
  padding-block: 0.25rem;
}

.noscript-note {
  margin-bottom: 1.25rem;
  padding: 0.875rem 1rem;
  background: var(--gap-bg);
  color: var(--gap-text);
  border: 2px solid var(--gap-border);
  border-radius: var(--radius);
  font-weight: 600;
}

/* --------------------------------------------------------------- footer ---- */

.site-footer {
  color: var(--footer-text);
  padding-block: 2.25rem 2.75rem;
  position: relative;
}

/* The lit edge, mirrored at the top of the footer so the page closes the way
   it opened. */
.site-footer::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(
    90deg, transparent 0%, rgba(53, 214, 245, 0.25) 45%, var(--spark) 78%, transparent 100%
  );
}

.site-footer h2 { font-size: 1.1875rem; }

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

.footer-grid {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 44em) {
  .footer-grid { grid-template-columns: 1.2fr 1fr 1fr; }
}

.site-footer .data-list dt { color: var(--footer-muted); }

.site-footer .note { color: var(--footer-muted); }

.footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.25rem;
}

.footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-weight: 600;
}

.site-footer .lang-switch {
  background: transparent;
  color: var(--footer-text);
  border-color: var(--footer-muted);
}

.site-footer .lang-switch:hover { background: rgba(255, 255, 255, 0.14); }

.footer-bottom {
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--footer-muted);
  font-size: 0.875rem;
  color: var(--footer-muted);
}

/* ------------------------------------------- fixed one-handed call bar ---- */

.call-bar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 50;
  display: flex;
  padding: 0.5rem 0.75rem calc(0.5rem + env(safe-area-inset-bottom, 0px));
  background: var(--shell-bg);
  border-top: 2px solid var(--spark);
}

.call-bar .btn { width: 100%; }

@media (min-width: 48em) {
  .call-bar { display: none; }
}

/* -------------------------------------------------------- privacy page ---- */

.doc { padding-block: 2rem 3rem; }

.doc h2 { margin-top: 2.25rem; }

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

.doc li { margin-bottom: 0.35rem; }

.doc .updated {
  font-size: 0.9375rem;
  color: var(--text-muted);
  margin-bottom: 1.5rem;
}

.doc .gap { margin-block: 1rem; }

.doc .gap p:first-child { margin-top: 0; }

.back-link { display: inline-flex; align-items: center; min-height: 2.75rem; font-weight: 600; }

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