:root{
  /* Colors */
  --bg:#ffffff;
  --card:#ffffff;
  --text:#0f172a;           /* slate-900 */
  --muted:#475569;          /* slate-600 */
  --accent:#2563eb;         /* blue-600 */

  /* Borders (slate-based) */
  --border: rgba(15,23,42,.12);
  --border-hover: rgba(15,23,42,.20);

  /* Focus */
  --border-focus: #2563eb;
  --focus-glow: rgba(37,99,235,.18);

  /* Surfaces */
  --surface:#f8fafc;        /* slate-50 */
  --surface-hover:#eef2ff;  /* indigo-50 */

  /* Effects */
  --shadow: 0 10px 28px rgba(15,23,42,.08);
  --shadow-hover: 0 14px 36px rgba(15,23,42,.12);
  --radius:18px;
}

*{ box-sizing:border-box; }

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color:var(--text);
  background:var(--bg);
  min-height:100vh;
}

/* ========== Accessibility ========== */
.skip-link{
  position:absolute;
  left:-9999px;
  top:12px;
  background:var(--card);
  color:var(--text);
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px 12px;
  box-shadow:var(--shadow);
  z-index:1000;
}
.skip-link:focus{ left:12px; }

a:focus-visible,
button:focus-visible{
  outline:2px solid var(--border-focus);
  outline-offset:3px;
  border-radius:10px;
}

/* ========== Layout ========== */
.wrap{ max-width:980px; margin:0 auto; padding:52px 18px 18px; }
main{ margin:18px 0; }

header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:32px;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;

  /* rounded focus area around title + logo */
  border-radius:14px;
  padding:4px 6px;
  margin-left:-6px;
}
.brand:focus-within{
  outline:2px solid var(--border-focus);
  outline-offset:3px;
  box-shadow:0 0 0 6px var(--focus-glow);
}

/* pill = plain text only (no button look) */
.pill{
  font-size:12px;
  color:var(--muted);
  background:none;
  border:0;
  padding:0;
  border-radius:0;
  backdrop-filter:none;
  white-space:nowrap;
}

/* ========== Brand / Logo ========== */
.logoLink{ display:inline-flex; text-decoration:none; border-radius:14px; }
.logoLink:focus-visible{ box-shadow:0 0 0 6px var(--focus-glow); }

.logo{
  width:40px; height:40px;
  border-radius:14px;
  border:1px solid var(--border);
  box-shadow:var(--shadow);
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--card);
  overflow:hidden;
}
.logo img{ width:36px; height:36px; display:block; }

h1{ margin:0; font-size:18px; line-height:1.2; }
h2{ margin:26px 0 0; font-size:18px; }

.hero{ margin-bottom:16px; }
.hero p{
  margin:0;
  font-size:15px;
  color:var(--muted);
  max-width:60ch;
  line-height:1.6;
}

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

.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:18px;
  box-shadow:var(--shadow);

  display:flex;
  flex-direction:column;
  gap:10px;
  min-height:170px;

  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
  will-change: transform;
}
.card h3{ margin:0; font-size:16px; }
.card p{
  margin:0;
  color:var(--muted);
  font-size:13px;
  line-height:1.5;
  flex:1;
}

.card:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
  border-color: var(--border-hover);
}

/* Thumb (icon/image link) */
.thumb{
  align-self:flex-start;
  padding:4px;
  border-radius:14px;
  border:1px solid transparent; /* enables clean focus shape */
  background:var(--card);
  transition: transform .12s ease;
}
.thumb:hover{ transform: scale(1.3); }

.thanks{
  font-weight:700;
  color: var(--accent);  
}

/* Buttons (link styled as button) */
.btn,
.legalBack{
  align-self:flex-start;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text);
  font-weight:600;
  font-size:13px;
  text-decoration:none;
  transition: background .12s ease, border-color .12s ease, transform .12s ease;
}
.btn:hover,
.legalBack:hover{
  background:var(--surface-hover);
  border-color: rgba(37,99,235,.40);
  transform: translateY(-1px);
}

/* Focus: remove “inner border/double border” on these button-like elements */
.btn:focus-visible,
.legalBack:focus-visible{
  box-shadow:0 0 0 6px var(--focus-glow);
  border-color: transparent;
}

/* Optional: when card is hovered, give button a tiny hint too */
.card:hover .btn{
  border-color: rgba(37,99,235,.28);
}

/* ========== Footer ========== */
footer{
  margin-top:55px;
  padding-top:6px;
  border-top:1px solid var(--border);

  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  font-size:12px;
  color:var(--muted);
  gap:10px;
}
footer a{
  color:var(--muted);
  text-decoration:none;

  /* makes rounded focus ring look good */
  padding:2px 6px;
  border-radius:10px;
}
footer a:hover{ color:var(--accent); }

/* ========== Legal pages ========== */
.legalPage .wrap{ padding-top:52px; }

.legalHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:22px;
}
.legalBrand{ display:flex; align-items:center; gap:12px; }

.legalNav{ margin:0 0 22px; }

.legalCard,
main.legalCard{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:22px;
}

.legalCard h2{ margin:18px 0 8px; font-size:16px; }
.legalCard h3{ margin:14px 0 6px; font-size:14px; }
.legalCard p{ margin:0 0 10px; color:var(--muted); line-height:1.65; }
.legalCard address{ font-style:normal; color:var(--muted); line-height:1.6; }
.legalCard a{ color:var(--accent); }

/* Visually hidden utility */
.hidden{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* Misc helpers */
.legalTitle{ margin:0 0 12px; font-size:20px; }
.panelCenter{ text-align:center; }
.clockLead{ color:var(--muted); max-width:60ch; margin:0 auto; }
.clockWrap{ margin:24px auto; }
.clockBigImg{ max-width:100%; height:auto; }
.nowrap{ white-space:nowrap; }

/* Responsive */
@media (max-width:820px){
  .grid{ grid-template-columns:1fr; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ scroll-behavior:auto !important; }
  .card, .btn, .legalBack, .thumb{ transition:none !important; }
  .card:hover, .btn:hover, .legalBack:hover, .thumb:hover{ transform:none !important; }
}