:root{
  /* Colors */
  --color-bg: #ffffff;
  --color-bg-alt: #f7f8fa; /* neutral-50-ish */
  --color-surface: #ffffff;
  --color-surface-muted: #fbfbfc;
  --color-muted: #f6f7f9;
  --color-border: #e5e7eb;
  --color-text: #111827;
  --color-text-muted: #4b5563;
  --color-primary: #3f7fb3;      /* matches Filament primary intent */
  --color-primary-400: #6f9fc8;
  --color-primary-700: #2d587c;
  --color-danger: #b42318;
  --color-warning: #b54708;
  --color-success: #027a48;
  --color-separator: rgba(17,24,39,.08);

  /* Typography */
  --font-sans: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-4xl: 2.25rem;
  --measure: 68ch;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* Radius / shadow */
  --radius-sm: 0.375rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
  --shadow-md: 0 6px 18px rgba(0,0,0,.08);

  /* Layout */
  --container: 1080px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
}
body{
  margin:0;
  font-family:var(--font-sans);
  color:var(--color-text);
  background:var(--color-bg);
  line-height:1.5;
}
a{color:inherit}

.measure{
  max-width: var(--measure);
}

.container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 var(--space-4);
}
@media (min-width: 768px){
  .container{padding:0 var(--space-6)}
}
@media (max-width: 480px){
  .container{padding:0 var(--space-2)}
}

/* Accessibility helpers */
.sr-only{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0);
  white-space:nowrap; border:0;
}
:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(111,159,200,.45);
  border-radius: var(--radius-sm);
}

/* Top navigation */
.nav{
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border);
}

/* Layout helpers (page shell) */
.page-container{
  padding: var(--space-12) 0 var(--space-20);
}

.section{
  padding: var(--space-12) 0;
}

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

.section-alt{
  background: var(--color-bg-alt);
}

.section-grid{
  display: grid;
  gap: var(--space-8);
}

@media (min-width: 900px){
  .section-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
  }
}

.section-copy{
  display: grid;
  gap: var(--space-4);
}

.section-copy ul{
  margin: 0;
  padding-left: 1.1rem;
  color: var(--color-text-muted);
}

.section-kicker{
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-muted);
}

.section-heading{
  font-size: var(--text-2xl);
  line-height: 1.2;
}

.trust-bar{
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 900px){
  .trust-bar{
    grid-template-columns: 1.2fr 1fr;
    align-items: center;
  }
}

.trust-pills{
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.trust-pill{
  border: 1px solid var(--color-border);
  background: #ffffff;
  border-radius: 999px;
  padding: 0.35rem 0.7rem;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.features-hero{
  padding-top: var(--space-16);
  padding-bottom: var(--space-16);
}

.features-cta{
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.exports-grid{
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 900px){
  .exports-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.export-card{
  display: grid;
  gap: var(--space-3);
  min-height: 100%;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.export-icon{
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: var(--color-muted);
  display: grid;
  place-items: center;
  color: var(--color-primary);
}

.export-card h3{
  margin: 0;
  font-size: var(--text-lg);
}

.export-card p{
  margin: 0;
  color: var(--color-text-muted);
}

.export-card ul{
  margin: 0;
  padding-left: 1.1rem;
  color: var(--color-text-muted);
}

.export-card:hover{
  transform: translateY(-2px);
  border-color: rgba(63,127,179,0.35);
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
}

.exports-grid > .card{
  height: 100%;
}

@media (max-width: 899px){
  .exports-grid{
    gap: var(--space-6);
  }
}

.exports-band{
  padding-top: var(--space-16);
  padding-bottom: var(--space-16);
}


/* Image slot (placeholder mockup) */
.image-slot{
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  min-height: 280px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-3);
  box-shadow: var(--shadow-sm);
}

.image-slot-frame{
  width: 100%;
  background: #ffffff;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  display: grid;
  place-items: center;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  text-align: center;
  /* Important: keep the frame content-box aligned with the image.
   * Padding here + img { width/height: 100% } can cause overflow and make
   * captions appear "on top of" the image (notably with very small aspect ratios).
   */
  padding: 0;
  overflow: hidden;
  max-width: 100%;
}

.image-slot-frame img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-md);
  display: block;
  max-width: 100%;
}

.image-slot-frame img.image-fit-contain{
  /* For wide/short frames (e.g. Trust badges): show the full image without cropping. */
  object-fit: contain;
}

.image-slot-frame.image-slot-frame-contain{
  aspect-ratio: auto;
}

.image-slot-frame.image-slot-frame-contain img{
  width: 100%;
  height: auto;
  object-fit: contain;
}

.feature-lightbox-trigger{
  cursor: zoom-in;
}

.lightbox-overlay{
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.72);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  z-index: 200;
}

.lightbox-overlay[hidden]{
  display: none;
}

.lightbox-content{
  max-width: min(1100px, 92vw);
  max-height: 86vh;
  background: #ffffff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  position: relative;
  padding: var(--space-4);
}

.lightbox-content img{
  max-width: 100%;
  max-height: 72vh;
  display: block;
  border-radius: var(--radius-md);
}

.lightbox-caption{
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.lightbox-close{
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  border: 1px solid var(--color-border);
  background: #ffffff;
  border-radius: 999px;
  padding: 0.25rem 0.6rem;
  font-size: 0.85rem;
  cursor: pointer;
}

.image-slot-caption{
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.image-slot-hint{
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.image-caption{
  display: grid;
  gap: 0.25rem;
  color: var(--color-text-muted);
}

.image-caption-title{
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text);
}

.image-caption-text{
  font-size: 0.8125rem;
}

@media (min-width: 900px){
  .image-slot{
    min-height: 360px;
  }
}

@media (max-width: 640px){
  .image-slot{
    padding: var(--space-4);
    min-height: auto;
  }

  .image-slot-frame{
    padding: 0;
  }

  .image-slot-frame img{
    height: auto;
  }
}
.nav-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: var(--space-4);
  padding: var(--space-2) 0;
}
.brand{
  display:flex;
  align-items:center;
  gap: var(--space-2);
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration:none;
}
.brand-logo{
  height: 28px;
  width: auto;
  display:block;
}
.nav-primary{
  flex: 1;
  display:flex;
  justify-content:center;
}
.nav-actions{
  display:flex;
  align-items:center;
  gap: var(--space-2);
}
.nav-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 40px;
  height: 40px;
  border:1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}
.nav-links{
  display:none;
  gap: var(--space-3);
  align-items:center;
  flex-wrap:wrap;
}
.nav-links a{
  text-decoration:none;
  color: var(--color-text-muted);
  padding: 0.45rem 0.6rem;
  border-radius: var(--radius-sm);
}
.nav-links a:hover{color: var(--color-text)}
.lang-toggle{
  display:inline-flex;
  gap: 0;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  overflow:hidden;
}
.lang-toggle button{
  appearance:none;
  border:0;
  background: transparent;
  padding: 0.4rem 0.65rem;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.lang-toggle button[aria-pressed="true"]{
  background: var(--color-muted);
  color: var(--color-text);
}

/* Mobile menu panel */
.mobile-panel{
  border-top: 1px solid var(--color-border);
  padding: var(--space-3) 0;
}
.mobile-panel[hidden]{display:none}
.mobile-panel a{
  display:block;
  padding: var(--space-3) var(--space-2);
  text-decoration:none;
  color: var(--color-text);
}
.mobile-panel a:focus-visible{border-radius: var(--radius-sm)}

@media (min-width: 900px){
  .nav-toggle{display:none}
  .nav-links{display:flex}
  .mobile-panel{display:none !important}
}

@media (max-width: 899px){
  .nav-primary{display:none}
}

/* Image frames (replaces placeholders) */
.placeholder-img{
  display:block;
  width:100%;
  height:auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-muted);
}

/* Components */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: var(--space-2);
  padding: 0.7rem 1rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: var(--text-sm);
  text-decoration:none;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  cursor:pointer;
}
.btn:hover{box-shadow: var(--shadow-sm)}
.btn-primary{
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
.btn-primary:hover{background: var(--color-primary-700); border-color: var(--color-primary-700)}
.btn-secondary{
  background: transparent;
}
.badge{
  display:inline-flex;
  align-items:center;
  gap: var(--space-1);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-muted);
  color: var(--color-text);
}
.badge-beta{
  border-color: rgba(181,71,8,.35);
  background: rgba(181,71,8,.08);
  color: var(--color-warning);
}
.badge-success{color: var(--color-success)}
.badge-warning{color: var(--color-warning)}
.badge-danger{color: var(--color-danger)}

.card{
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6);
}
.card:hover{
  background: var(--color-surface-muted);
}

.muted{color: var(--color-text-muted)}

/* Layout sections */
section{
  padding: var(--space-24) 0;
  border-bottom: 1px solid var(--color-separator);
}
section:last-of-type{border-bottom:0}
main > section:nth-of-type(even){
  background: var(--color-bg-alt);
}
@media (min-width: 900px){
  section{padding: calc(var(--space-24) + var(--space-4)) 0}
}

.hero{
  padding: var(--space-24) 0 var(--space-16);
}
.step-num{
  color: var(--color-text-muted);
  font-weight: 700;
  min-width: 2.25rem;
  display:inline-block;
}
.modules-mobile{display:block}
.modules-desktop{display:block}
@media (max-width: 899px){
  section{padding: var(--space-16) 0}
  .hero{padding: var(--space-16) 0 var(--space-12)}
  .modules-desktop{display:none}
}
@media (min-width: 900px){
  .modules-mobile{display:none}
}
.hero-grid{
  display:grid;
  gap: var(--space-8);
}
@media (min-width: 900px){
  .hero-grid{grid-template-columns: 1.1fr 0.9fr; align-items:start}
}
h1{
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-4);
}
h2{
  font-size: var(--text-2xl);
  margin: 0 0 var(--space-4);
  letter-spacing: -0.01em;
}
h3{
  font-size: var(--text-lg);
  margin: 0 0 var(--space-2);
}
.lead{
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-6);
}
.cta-row{
  display:flex;
  gap: var(--space-3);
  flex-wrap:wrap;
  margin-top: var(--space-6);
}
.beta-callout{
  display:flex;
  align-items:flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: var(--color-surface-muted);
}
.highlights{
  display:grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}
@media (min-width: 700px){
  .highlights{grid-template-columns: repeat(3, 1fr)}
}
.stat{
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  background: var(--color-surface);
}
.stat .kpi{
  font-weight: 700;
  letter-spacing: -0.01em;
}
@media (min-width: 900px){
  /* HERO: KPIs become supporting proof, not a competing block */
  .highlights{
    margin-top: var(--space-12);
    gap: var(--space-3);
  }
  .stat{
    border-color: rgba(17,24,39,.08);
    background: rgba(17,24,39,.02);
    box-shadow: none;
    padding: var(--space-3);
  }
  .stat .kpi{
    font-weight: 650;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
  }
}
.grid{
  display:grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}
@media (min-width: 700px){
  .grid{grid-template-columns: repeat(2, 1fr)}
}

.modules-cluster{
  margin-top: var(--space-8);
}
.modules-cluster:first-of-type{
  margin-top: var(--space-4);
}
.modules-cluster + .modules-cluster{
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-separator);
}

/* MODULES: clearer clusters + less card fatigue on desktop */
.cluster-title{
  margin: var(--space-4) 0 var(--space-3);
}
.cluster-heading{
  font-weight: 650;
  letter-spacing: -0.01em;
}
@media (min-width: 900px){
  .modules-cluster + .modules-cluster{
    padding-top: var(--space-12);
    margin-top: var(--space-8);
  }
  .modules-desktop .card{
    border-color: rgba(17,24,39,.08);
    background: rgba(17,24,39,.02);
    box-shadow: none;
    padding: var(--space-4);
  }
  .modules-desktop .card:hover{
    background: rgba(17,24,39,.03);
  }
}
@media (min-width: 1100px){
  .modules-desktop .grid{grid-template-columns: repeat(3, 1fr)}
}

/* Heavier section treatment */
#security{
  background: #f2f4f7;
}
@media (min-width: 900px){
  #security{
    background: #eef2f6;
  }
  #security h2{
    font-size: clamp(1.6rem, 1.7vw, 1.9rem);
  }
  #security .placeholder-img{
    max-width: 520px;
    margin: 0 auto;
    opacity: .95;
  }
}

/* Calm placeholders */
.placeholder{
  border: 1px dashed rgba(17,24,39,.25);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  min-height: 220px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color: var(--color-text-muted);
}
.placeholder .placeholder-label{
  font-size: var(--text-sm);
  letter-spacing: 0.01em;
}

/* Editorial layout helpers */
.stack{
  display:flex;
  flex-direction:column;
  gap: var(--space-4);
}
.two-col{
  display:grid;
  gap: var(--space-8);
}
@media (min-width: 900px){
  .two-col{grid-template-columns: 1.05fr 0.95fr}
}

/* Disclosures (mobile progressive disclosure) */
.disclosure{
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  background: var(--color-surface);
}
.disclosure + .disclosure{margin-top: var(--space-3)}
.disclosure-body{margin-top: var(--space-3)}

/* OVERVIEW: more editorial on desktop (narrative + principles, who secondary) */
@media (min-width: 900px){
  #overview .disclosure{
    background: transparent;
    border-color: rgba(17,24,39,.10);
    box-shadow: none;
  }
  #overview .disclosure-body p{
    line-height: 1.75;
  }
  /* "Who it's for" downplayed */
  #overview details:nth-of-type(2) summary{
    font-size: var(--text-base);
    color: var(--color-text-muted);
  }
  #overview details:nth-of-type(2) .muted{
    font-size: var(--text-sm);
    line-height: 1.65;
  }
}

/* HOW: directional, connected steps on desktop */
.how-steps{
  display:grid;
  gap: var(--space-3);
}

/* HOW: improved balance + sticky illustration (desktop only) */
@media (max-width: 899px){
  #how .how-illustration-col{
    order: -1; /* show illustration above accordion */
  }
}
@media (min-width: 900px){
  #how .how-illustration-sticky{
    position: sticky;
    top: 96px; /* offset for sticky header */
    align-self: start;
  }

  /* tighten accordion cards to reduce wasted space */
  #how .how-steps{
    gap: var(--space-4);
    max-width: 72ch;
  }
  #how .disclosure-step{
    padding: var(--space-3) var(--space-4);
  }
  #how .disclosure-step summary{
    align-items: baseline;
    gap: var(--space-2);
  }
  #how .disclosure-step .disclosure-body{
    margin-top: var(--space-2);
  }
  #how .disclosure-step .muted{
    max-width: 68ch;
  }
  #how .step-num{
    text-align: right;
  }
  #how summary .chev{
    flex: 0 0 12px; /* fixed area so titles align */
  }
}
@media (min-width: 900px){
  .how-steps{
    position: relative;
    grid-template-columns: 1fr;
    gap: var(--space-6);
    padding-top: var(--space-2);
    padding-left: 1.25rem; /* room for the spine */
  }
  .how-steps::before{
    content:"";
    position:absolute;
    left: 0.55rem;
    top: 0.5rem;
    bottom: 0.5rem;
    width: 1px;
    background: rgba(17,24,39,.10);
    z-index: 0;
  }
  .disclosure-step{
    position: relative;
    z-index: 1;
  }
  .disclosure-step summary{
    font-size: var(--text-base);
    padding-left: 0.25rem;
  }
  .disclosure-step .muted{
    font-size: var(--text-sm);
  }
  .step-num{
    font-size: 1.25rem;
    opacity: .45;
    min-width: 2.75rem;
  }
}

/* Module list inside grouped disclosures */
.module-list{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap: var(--space-4);
}
.module-title{
  font-weight: 650;
  letter-spacing: -0.01em;
}
.count{
  color: var(--color-text-muted);
  font-weight: 600;
  font-size: var(--text-sm);
}

/* FAQ */
.faq{
  display:grid;
  gap: var(--space-3);
}
details{
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  background: var(--color-surface);
}
summary{
  cursor:pointer;
  font-weight: 600;
  font-size: var(--text-lg);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: var(--space-3);
  user-select:none;
}
summary::-webkit-details-marker{display:none}
summary::marker{content:""}
.chev{
  width: 10px;
  height: 10px;
  border-right: 2px solid rgba(17,24,39,.35);
  border-bottom: 2px solid rgba(17,24,39,.35);
  transform: rotate(-45deg);
  transition: transform 120ms ease-out;
  flex: 0 0 auto;
  margin-left: auto;
}
details[open] > summary .chev{
  transform: rotate(45deg);
}
@media (prefers-reduced-motion: reduce){
  .chev{transition:none}
}
summary:focus-visible{border-radius: var(--radius-sm)}
details > *:not(summary){
  animation: fadeIn 140ms ease-out;
}
@media (prefers-reduced-motion: reduce){
  details > *:not(summary){animation:none}
}
@keyframes fadeIn{
  from{opacity:0; transform: translateY(2px)}
  to{opacity:1; transform: translateY(0)}
}

@media (min-width: 900px){
  /* FAQ: more breathable, less mechanical */
  .faq{gap: var(--space-4)}
  details{
    border-color: rgba(17,24,39,.10);
    box-shadow: none;
  }
  summary{font-size: 1.125rem}
}

/* Form */
form{margin-top: var(--space-6)}
.field{
  display:grid;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
label{font-weight: 600}
input, select, textarea{
  width: 100%;
  padding: 0.7rem 0.85rem;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(17,24,39,.14);
  font: inherit;
  background: var(--color-surface);
  color: var(--color-text);
}
textarea{min-height: 120px; resize: vertical}

/* Consent checkbox: keep checkbox on the left, text aligned */
#contact-form .field > label:has(input[type="checkbox"]){
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-weight: 500; /* avoid overly bold long consent text */
}

#contact-form .field > label > input[type="checkbox"]{
  width: 18px;
  height: 18px;
  margin-top: 0.2rem; /* optical align with first line */
  flex: 0 0 auto;
}
.error{
  color: var(--color-danger);
  font-size: var(--text-sm);
}
.success{
  border: 1px solid rgba(2,122,72,.35);
  background: rgba(2,122,72,.06);
  color: var(--color-success);
  padding: var(--space-4);
  border-radius: var(--radius-md);
}
.form-row{
  display:grid;
  gap: var(--space-4);
}
@media (min-width: 900px){
  .form-row{grid-template-columns: 1fr 1fr}
}
@media (max-width: 899px){
  /* Contact: reduce density without collapsing */
  .card{padding: var(--space-4)}
  form{margin-top: var(--space-4)}
  .field{margin-bottom: var(--space-3)}
}

@media (min-width: 900px){
  /* CONTACT: centered, calmer measure + reassurance */
  #contact{padding-top: calc(var(--space-24) + var(--space-8))}
  .contact-wrap{
    max-width: 760px;
    margin: 0 auto;
  }
  .contact-card{
    padding: var(--space-8);
  }
  .contact-reassurance{
    max-width: 68ch;
    font-style: italic;
    opacity: .9;
  }
}

/* Footer */
footer{
  border-top: 1px solid var(--color-separator);
  padding: var(--space-6) 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}
.footer-row{
  display:flex;
  gap: var(--space-4);
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
}
.footer-links{
  display:flex;
  gap: var(--space-3);
  flex-wrap:wrap;
}
.footer-links a{color: var(--color-text-muted); text-decoration:none}
.footer-links a:hover{color: var(--color-text)}