/* Ardia — shared responsive refinements.
   Loaded on every page AFTER its inline <style>, so these win the cascade at
   equal specificity. Desktop is untouched; this only tightens phones/tablets.
   One file for the whole site's small-screen behavior. */

/* ---- hero type never overflows on small phones ----
   Inline hero mins were 40–52px and stayed fixed below 640px, so long words
   ("technician.", "written") ran past the edge at ≤400px. Re-scale by viewport. */
@media (max-width: 640px) {
  h1 { font-size: clamp(32px, 9.3vw, 50px); }
}
@media (max-width: 360px) {
  .wrap { padding-left: 18px; padding-right: 18px; }
}

/* ---- live-demo chips (homepage + active-tracking) ----
   Two nowrap chips pinned to opposite top corners collide once the status text
   grows ("[ TECH ACCEPTED · EN ROUTE 18 MIN ]"). Shrink them, and drop the
   secondary ETA chip on the narrowest screens. */
@media (max-width: 640px) {
  .demo-status, .demo-eta { font-size: 10px; padding: 6px 9px; letter-spacing: .06em; }
}
@media (max-width: 460px) {
  .demo-eta { display: none; }
}

/* ---- callout / form cards: tighter gutters on phones ---- */
@media (max-width: 560px) {
  .short { padding: 28px 22px; }
  form { padding: 30px 22px; }
}

/* ---- about: numbered promise rows keep a huge number gutter otherwise ---- */
@media (max-width: 560px) {
  .promise { grid-template-columns: 40px 1fr; gap: 16px; }
}

/* ---- analytics dashboard top bar: stack cleanly on small screens ---- */
@media (max-width: 560px) {
  .bar-in { flex-wrap: wrap; gap: 12px; }
  .bar-right { width: 100%; justify-content: flex-start; }
}

/* ---- footer alignment (all pages) ----
   The brand block, column headers, and legal hairline used to sit on three
   unrelated grids. Now: logo top-aligns with the column headers, the tagline
   top-aligns with the first row of links, and the divider spans the full grid. */
footer .foot-grid { align-items: start; }
footer .fcol a.logo { line-height: 1; margin-bottom: 6px; }
footer .fcol p { max-width: 300px; }
/* the legal row sits on the SAME 4-column grid as the footer above it: the
   disclaimer's right edge lands on the last column's edge, and the copyright
   sits under COMPANY. Nothing stops mid-page any more. */
footer .foot-legal {
  margin-top: 56px; padding-top: 30px;
  border-top: 1px solid var(--line-soft);
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; align-items: start;
}
footer .foot-legal .disclaim {
  grid-column: 1 / 4; max-width: none;
  margin-top: 0; padding-top: 0; border-top: none;
  font-size: 12.5px; line-height: 1.7;
}
footer .foot-legal .copy { grid-column: 4 / 5; margin-top: 0; }
@media (max-width: 900px) {
  footer .foot-legal { grid-template-columns: 1fr; gap: 20px; }
  footer .foot-legal .disclaim, footer .foot-legal .copy { grid-column: 1 / -1; }
}

/* ---- brand logo image (replaces the old CSS triangle mark + ARDIA wordmark) ----
   Loaded on every page after the inline styles, so this governs the logo lockup
   in both the header and the footer. The wordmark is a wide horizontal lockup;
   sizing by height keeps it crisp and lets the width follow its aspect ratio. */
.logo img { height: 30px; width: auto; display: block; }
@media (max-width: 640px) { .logo img { height: 26px; } }

/* ---- a11y: contrast + focus (shared, all pages) ----
   The legal/footer text used --ink-3 (#A29B8E ≈ 2.4:1 on the cream --bg), below
   WCAG AA. Lift the reading text to --ink-2 (≈ 4.75:1). --ink-3 stays as-is on
   dark surfaces, which this override doesn't touch. */
.disclaim, .foot-legal .disclaim, .copy, .foot-legal .copy,
footer .fcol .h, footer .fcol .fh { color: var(--ink-2); }
/* A visible keyboard focus ring — inputs currently clear their outline. Only
   shows for keyboard users (:focus-visible), so mouse clicks stay clean. */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--orange); outline-offset: 2px; border-radius: 2px;
}