/* ==========================================================================
   Smile Dental Hamtramck — "Quiet Confidence"
   Static site. No build step, no framework, no dependencies.
   ========================================================================== */

:root {
  /* Base palette */
  --clinic-cream: #FDFBF7;
  --clinic-sand: #F4ECE1;
  --clinic-line: #E4D5C2;
  --clinic-ink: #2A2E2B;
  --clinic-ink-70: rgba(42, 46, 43, 0.72);
  --clinic-white: #FFFFFF;

  /* Accent ramp — General & Family Dental */
  --accent: #4A6B5D;
  --accent-rgb: 74, 107, 93;
  --accent-deep: #2D443A;
  --accent-warm: #D68C72;

  --font-heading: 'Lora', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --text-hero: clamp(2.25rem, 5vw + 1rem, 3.75rem);
  --text-h2: clamp(1.75rem, 3vw + 1rem, 2.75rem);
  --text-h3: clamp(1.25rem, 1.5vw + 1rem, 1.625rem);
  --text-body: 1.0625rem;
  --text-small: 0.9375rem;

  --radius-card: 1rem;
  --radius-pill: 999px;
  --space-section: clamp(4rem, 8vw, 7rem);
  --space-card-pad: clamp(1.5rem, 2.5vw, 2.25rem);

  --ease-calm: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Reset -------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  /* Stops iOS inflating body text when the phone is turned to landscape. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.65;
  color: var(--clinic-ink);
  background: var(--clinic-cream);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
h1, h2, h3 { font-family: var(--font-heading); line-height: 1.15; color: var(--accent-deep); font-weight: 600; }
.container {
  width: min(1120px, 92%);
  margin-inline: auto;
  /* On a notched phone held sideways the 92% gutter (~33px) is narrower than
     the notch inset (~44px), so text would slide under it without this. */
  padding-inline: env(safe-area-inset-left) env(safe-area-inset-right);
}

/* The navbar is sticky and 5rem tall, so an un-offset anchor jump parks the
   target heading underneath it. Applies to the footer and nav jump links both. */
section[id], main[id] { scroll-margin-top: 5.5rem; }

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 100;
  background: var(--accent-deep); color: var(--clinic-cream);
  padding: 0.75rem 1.25rem; border-radius: 0 0 0.5rem 0;
}
.skip-link:focus { left: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

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

/* Buttons & chips ----------------------------------------------------------- */
.btn-primary, .btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.9rem 1.75rem; border-radius: var(--radius-pill);
  font-weight: 600; font-size: var(--text-small); min-height: 44px;
  transition: transform 0.35s var(--ease-calm), background-color 0.35s var(--ease-calm);
}
.btn-primary {
  background: var(--accent); color: var(--clinic-cream);
  animation: steady-breath 4.5s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
.btn-secondary { border: 1.5px solid var(--accent); color: var(--accent-deep); }
button[disabled] { cursor: not-allowed; }

/* Hover states are gated on a real pointer. On a touchscreen :hover latches
   after a tap, so an untouched button stays lifted until you tap elsewhere. */
@media (hover: hover) {
  .btn-primary:hover { transform: translateY(-2px); background: var(--accent-deep); }
  .btn-secondary:hover { background: var(--clinic-sand); }
}

.chip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: var(--clinic-sand); color: var(--accent-deep);
  font-size: var(--text-small); font-weight: 500;
  padding: 0.5rem 1rem; border-radius: var(--radius-pill);
}

/* Steady Breath ------------------------------------------------------------- */
@keyframes steady-breath {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.28); }
  50% { box-shadow: 0 0 0 14px rgba(var(--accent-rgb), 0); }
}
.trust-badge {
  animation: steady-breath 4.5s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  animation-delay: 0.8s;
  border-radius: var(--radius-card);
}
@media (prefers-reduced-motion: reduce) {
  .btn-primary, .trust-badge { animation: none; }
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  * { transition-duration: 0.01ms !important; }
}

/* Arch Frame ---------------------------------------------------------------- */
.arch-frame {
  clip-path: url(#archFrame);
  aspect-ratio: 4 / 5;
  width: 100%;
  object-fit: cover;
  position: relative;
}
.arch-frame-wrap { position: relative; }
.arch-frame-wrap::after {
  content: '';
  position: absolute; inset: -6px;
  clip-path: url(#archFrame);
  border: 2px solid var(--accent);
  opacity: 0.5;
  pointer-events: none;
}

/* Comfort Reveal ------------------------------------------------------------ */
.js .reveal {
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.9s var(--ease-calm), transform 0.9s var(--ease-calm);
}
.js .reveal.is-visible { opacity: 1; transform: translateY(0); }

/* Navbar -------------------------------------------------------------------- */
.navbar {
  position: sticky; top: 0; z-index: 50;
  transition: background-color 0.4s ease, box-shadow 0.4s ease;
}
.navbar.is-scrolled {
  background-color: rgba(253, 251, 247, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 var(--clinic-line);
}
.navbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 5rem; }
/* Padding, not flex: the brand is "Smile Dental <em>Hamtramck</em>", and making
   it a flex container turns the bare text node into an anonymous item whose
   trailing space collapses — the words run together. Vertical padding on an
   inline box still grows the hit area, which is all this needs. */
.brand {
  font-family: var(--font-heading); font-size: clamp(1.1rem, 3vw, 1.375rem);
  font-weight: 600; color: var(--accent-deep); white-space: nowrap;
  padding-block: 0.5rem;
}
.brand em { font-style: italic; }
.nav-links { display: none; gap: 2rem; font-size: var(--text-small); font-weight: 500; }
.nav-links a { transition: color 0.3s var(--ease-calm); }
.nav-actions { display: flex; align-items: center; gap: 1rem; }
.nav-phone { display: none; font-weight: 600; font-size: var(--text-small); color: var(--accent-deep); }
@media (hover: hover) {
  .nav-links a:hover, .nav-phone:hover { color: var(--accent); }
}
.menu-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; color: var(--accent-deep);
}
.navbar .btn-primary { display: none; }
@media (min-width: 900px) {
  .nav-links { display: flex; }
  .nav-phone { display: inline-flex; }
  .menu-toggle { display: none; }
  .navbar .btn-primary { display: inline-flex; }
}

.mobile-menu {
  position: fixed; inset: 0; z-index: 60; background: var(--clinic-cream);
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity 0.5s var(--ease-calm), transform 0.5s var(--ease-calm), visibility 0.5s;
}
.mobile-menu.is-open { opacity: 1; visibility: visible; transform: translateY(0); }

/* Six links at 1.6rem overflow a landscape phone (~390px tall). Without a scroll
   container the bottom entries are simply unreachable. Scrolling lives on this
   inner wrapper so the close button stays pinned to .mobile-menu.
   "safe center" keeps centred overflow from spilling past the top edge where it
   can't be scrolled back to; engines that don't know it fall back to plain center. */
.mobile-menu-links {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center;
  justify-content: safe center;
  gap: 1.75rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-block: 5rem calc(2rem + env(safe-area-inset-bottom));
  padding-inline: calc(1.5rem + env(safe-area-inset-left)) calc(1.5rem + env(safe-area-inset-right));
}
/* display:flex rather than block: the links are centred children of a flex
   column, so min-height alone would size the box without centring the text. */
.mobile-menu a {
  font-family: var(--font-heading); font-size: 1.6rem; color: var(--accent-deep);
  display: flex; align-items: center; min-height: 44px;
}
.menu-close {
  /* Absolute against .mobile-menu, which no longer scrolls — so this stays put
     while the links scroll underneath it. */
  position: absolute; z-index: 1;
  top: calc(1.5rem + env(safe-area-inset-top));
  right: calc(1.5rem + env(safe-area-inset-right));
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  color: var(--accent-deep);
}
body.menu-open { overflow: hidden; }

/* Hero ---------------------------------------------------------------------- */
.hero { padding-block: clamp(3rem, 6vw, 6rem) var(--space-section); border-bottom: 1px solid var(--clinic-line); }
.hero-grid { display: grid; gap: 3rem; align-items: center; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: var(--clinic-sand); color: var(--accent-deep);
  font-size: var(--text-small); font-weight: 600;
  padding: 0.5rem 1rem; border-radius: var(--radius-pill);
  margin-bottom: 1.5rem;
}
.hero h1 { font-size: var(--text-hero); margin-bottom: 1.25rem; text-wrap: balance; }
.hero h1 em { color: var(--accent); font-style: italic; }
.hero p.lede { font-size: 1.125rem; color: var(--clinic-ink-70); max-width: 42ch; margin-bottom: 2rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 2rem; }
.hero-chips { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.hero-media { position: relative; max-width: 30rem; margin-inline: auto; width: 100%; }
@media (min-width: 960px) {
  .hero-grid { grid-template-columns: 1.1fr 0.9fr; }
  .hero-media { margin-inline: 0; }
}

/* Trust bar ----------------------------------------------------------------- */
.trust-bar { padding-block: 2.5rem; background: var(--clinic-sand); }
.trust-bar-label {
  text-align: center; font-size: var(--text-small);
  color: var(--clinic-ink-70); margin-bottom: 1.25rem;
  text-transform: uppercase; letter-spacing: 0.08em;
}
.trust-bar ul { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(1rem, 3vw, 2.5rem); }
.trust-bar li { font-family: var(--font-heading); font-size: 1.0625rem; color: var(--clinic-ink-70); }

/* Section shell -------------------------------------------------------------- */
section { padding-block: var(--space-section); }
.section-head { max-width: 44rem; margin-bottom: 3rem; }
.section-head .eyebrow { margin-bottom: 1rem; }
.section-head h2 { font-size: var(--text-h2); text-wrap: balance; }
.section-head p { color: var(--clinic-ink-70); margin-top: 0.75rem; }
.section-head a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

/* Philosophy ----------------------------------------------------------------- */
.philosophy { background: var(--clinic-white); }
.philosophy-grid { display: grid; gap: 2.5rem; align-items: center; }
.philosophy-grid > div:first-child { max-width: 28rem; margin-inline: auto; width: 100%; }
.philosophy-copy h2 { font-size: var(--text-h2); margin-bottom: 1.5rem; text-wrap: balance; }
.philosophy-copy p { margin-bottom: 1.25rem; color: var(--clinic-ink-70); }
@media (min-width: 900px) { .philosophy-grid { grid-template-columns: 0.9fr 1.1fr; } }

/* Services -------------------------------------------------------------------- */
.services-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.service-card {
  background: var(--clinic-sand); border: 1px solid var(--clinic-line);
  border-radius: var(--radius-card); padding: var(--space-card-pad);
  display: flex; flex-direction: column; height: 100%;
  transition: transform 0.5s var(--ease-calm), box-shadow 0.5s var(--ease-calm);
}
@media (hover: hover) {
  .service-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px -12px rgba(42, 46, 43, 0.18); }
}
.service-card .icon { width: 2rem; height: 2rem; color: var(--accent); margin-bottom: 1rem; flex-shrink: 0; }
.service-card h3 { font-size: var(--text-h3); margin-bottom: 0.5rem; }
.service-card p { color: var(--clinic-ink-70); flex-grow: 1; font-size: var(--text-small); }
.service-card .price {
  margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--clinic-line);
  font-size: var(--text-small); font-weight: 600; color: var(--accent-deep); flex-grow: 0;
}

/* Team ------------------------------------------------------------------------ */
.team { background: var(--clinic-white); }
.team-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }
.team-card {
  background: var(--clinic-cream); border-radius: var(--radius-card);
  padding: var(--space-card-pad); border: 1px solid var(--clinic-line);
}
.team-card h3 { font-size: var(--text-h3); margin-bottom: 0.5rem; }
/* The accent rule under the credentials line is what makes a licence number read
   as a citation rather than as decoration. */
.team-card .credentials {
  color: var(--clinic-ink-70); font-size: var(--text-small);
  border-left: 2px solid var(--accent-warm); padding-left: 0.75rem; margin-bottom: 1rem;
}
.team-card > div > p { color: var(--clinic-ink-70); font-size: var(--text-small); margin-bottom: 1rem; }
.team-card .badges { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* Process --------------------------------------------------------------------- */
.process-grid { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); counter-reset: step; }
.process-step { counter-increment: step; position: relative; padding-top: 3.5rem; }
.process-step::before {
  content: counter(step);
  position: absolute; top: 0; left: 0;
  width: 2.75rem; height: 2.75rem; border-radius: 50%;
  background: var(--accent); color: var(--clinic-cream);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-size: 1.125rem;
}
.process-step h3 { font-size: 1.125rem; margin-bottom: 0.5rem; }
.process-step p { color: var(--clinic-ink-70); font-size: var(--text-small); }

/* Testimonials ----------------------------------------------------------------- */
.testimonials { background: var(--clinic-sand); }
.testimonials .section-head { margin-bottom: 0; }
.testimonials .btn-secondary { margin-top: 0.75rem; }

/* FAQ -------------------------------------------------------------------------- */
.faq-list { max-width: 44rem; }
.faq-item { border-bottom: 1px solid var(--clinic-line); padding-block: 1.25rem; }
.faq-item summary {
  cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  font-family: var(--font-heading); font-size: 1.0625rem; color: var(--accent-deep); font-weight: 600;
  min-height: 44px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+'; font-size: 1.5rem; line-height: 1;
  transition: transform 0.4s var(--ease-calm); color: var(--accent); flex-shrink: 0;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { padding-top: 0.75rem; color: var(--clinic-ink-70); }

/* Location ---------------------------------------------------------------------- */
.location { background: var(--clinic-white); }
.location-grid { display: grid; gap: 2.5rem; align-items: start; }
.location h2 { font-size: var(--text-h3); margin-bottom: 0.75rem; }
.location-lede { color: var(--clinic-ink-70); font-size: var(--text-small); }
.hours-heading { font-size: 1.0625rem; margin-top: 2rem; }
.hours-table { width: 100%; border-collapse: collapse; margin-top: 0.75rem; }
.hours-table th, .hours-table td { padding: 0.55rem 0; border-bottom: 1px solid var(--clinic-line); font-size: var(--text-small); }
.hours-table th { text-align: left; font-weight: 500; }
.hours-table td { text-align: right; color: var(--clinic-ink-70); }
.location-notes { margin-top: 1.5rem; display: grid; gap: 0.5rem; }
.location-notes li { font-size: var(--text-small); color: var(--clinic-ink-70); padding-left: 1.1rem; position: relative; }
.location-notes li::before { content: ''; position: absolute; left: 0; top: 0.72em; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.map-wrap {
  border-radius: var(--radius-card); overflow: hidden;
  border: 1px solid var(--clinic-line); line-height: 0;
}
.map-wrap iframe { width: 100%; height: clamp(18rem, 45vw, 26rem); border: 0; }
@media (min-width: 900px) { .location-grid { grid-template-columns: 1fr 1fr; } }

/* Contact ------------------------------------------------------------------------ */
.contact { background: var(--clinic-sand); }
.contact-grid { display: grid; gap: 2.5rem; align-items: start; }
.contact-lede { color: var(--clinic-ink-70); margin-bottom: 1.5rem; font-size: var(--text-small); }
.contact-info { display: grid; gap: 0.85rem; }
.contact-info li { font-size: var(--text-small); color: var(--clinic-ink-70); }
/* The phone number is the primary conversion on this page and was a 19px-tall
   tap target. inline-flex rather than flex so it does not stretch the whole li. */
.contact-info a {
  color: var(--accent-deep); font-weight: 500;
  display: inline-flex; align-items: center; min-height: 44px;
}
.contact-info a:hover { color: var(--accent); }

form { background: var(--clinic-white); border-radius: var(--radius-card); padding: var(--space-card-pad); border: 1px solid var(--clinic-line); }
.field { margin-bottom: 1.25rem; }
.field label { display: block; font-size: var(--text-small); font-weight: 600; margin-bottom: 0.4rem; }
.field input, .field textarea, .field select {
  width: 100%; padding: 0.75rem 1rem;
  border: 1px solid var(--clinic-line); border-radius: 0.6rem;
  font: inherit; color: var(--clinic-ink);
  background: var(--clinic-cream); min-height: 44px;
  transition: border-color 0.3s var(--ease-calm);
}
.field textarea { resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--accent); }
.field small { display: block; color: var(--clinic-ink-70); margin-top: 0.35rem; font-size: 0.8125rem; line-height: 1.5; }
.field-error { display: none; color: #9B2C2C; font-size: 0.8125rem; margin-top: 0.35rem; font-weight: 500; }
form.show-errors .field input:invalid { border-color: #9B2C2C; }
form.show-errors .field input:invalid ~ .field-error { display: block; }

.form-status { display: none; font-size: var(--text-small); margin-top: 1rem; font-weight: 500; }
form.is-sending .form-status--sending,
form.is-sent .form-status--sent,
form.is-error .form-status--error { display: block; }
form.is-sent .form-status--sent { color: var(--accent-deep); }
form.is-error .form-status--error { color: #9B2C2C; }
form.is-sending button[type="submit"] { opacity: 0.6; }
@media (min-width: 900px) { .contact-grid { grid-template-columns: 0.8fr 1.2fr; } }

/* Footer -------------------------------------------------------------------------- */
.footer { background: var(--accent-deep); color: rgba(253, 251, 247, 0.85); padding-block: 3rem; }
.footer a { transition: color 0.3s var(--ease-calm); }
.footer a:hover { color: var(--clinic-cream); text-decoration: underline; }
.footer-grid { display: grid; gap: 2rem; margin-bottom: 2rem; }
.footer h3 { color: var(--clinic-cream); font-size: 1rem; margin-bottom: 0.75rem; }
.footer-blurb, .footer address { font-size: var(--text-small); font-style: normal; line-height: 1.7; }
/* Stacked nav links separated by <br>, so inline-flex keeps the line breaks
   working while giving each one a 44px tap target instead of a 19px one. */
.footer-grid > div:nth-child(2) a, .footer-grid > div:nth-child(3) a,
.footer-grid > div:nth-child(4) a {
  font-size: var(--text-small);
  display: inline-flex; align-items: center; min-height: 44px;
}
.footer address { margin-bottom: 0.5rem; }
.footer-bottom {
  border-top: 1px solid rgba(253, 251, 247, 0.15); padding-top: 1.5rem;
  font-size: var(--text-small); display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
}
@media (min-width: 700px) { .footer-grid { grid-template-columns: repeat(4, 1fr); } }

/* Mobile CTA + back to top ---------------------------------------------------------- */
/* Mobile-first: the bar is present by default and removed on wider screens.
   768px is the exact complement of the old max-width:767px, so no gap opens up. */
.mobile-cta {
  position: fixed; inset: auto 0 0 0; z-index: 40; display: flex;
  background: var(--clinic-white); border-top: 1px solid var(--clinic-line);
  gap: 0.75rem;
  padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
  transform: translateY(100%); transition: transform 0.4s var(--ease-calm);
}
.mobile-cta.is-visible { transform: translateY(0); }
.mobile-cta a { flex: 1; text-align: center; }

/* The bar is fixed, so it sits on top of the end of the page. Without this the
   footer's bottom row is permanently covered and cannot be scrolled clear.
   The spacer goes on the footer rather than on <body> so the footer's dark
   background keeps running to the bottom of the page instead of leaving a
   cream strip under it. */
.footer { padding-bottom: calc(3rem + 4.5rem + env(safe-area-inset-bottom)); }

@media (min-width: 768px) {
  .mobile-cta { display: none; }
  .footer { padding-bottom: 3rem; }
}

.back-to-top {
  position: fixed; z-index: 40;
  /* Parked above the CTA bar, which is only present below 768px — the desktop
     rule below drops it back to the corner in step with the bar disappearing. */
  right: 1rem;
  bottom: calc(5.5rem + env(safe-area-inset-bottom));
  width: 3rem; height: 3rem; border-radius: 50%;
  background: var(--accent); color: var(--clinic-cream);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity 0.35s var(--ease-calm), transform 0.35s var(--ease-calm), visibility 0.35s;
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
@media (min-width: 768px) { .back-to-top { right: 1.5rem; bottom: 1.5rem; } }

/* Legal stub pages ---------------------------------------------------------------- */
.legal-page { padding-block: clamp(3rem, 6vw, 5rem); }
.legal-page .container { max-width: 44rem; }
.legal-page h1 { font-size: var(--text-h2); margin-bottom: 1rem; }
.legal-page h2 { font-size: var(--text-h3); margin-top: 2.5rem; margin-bottom: 0.75rem; }
.legal-page p, .legal-page li { color: var(--clinic-ink-70); margin-bottom: 1rem; }
.legal-page ul { list-style: disc; padding-left: 1.5rem; }
.legal-page a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.legal-back { display: inline-block; margin-bottom: 2rem; font-size: var(--text-small); font-weight: 600; color: var(--accent); }