/* ============================================================================
   Six Walls — shared site stylesheet
   Deep navy chassis, teal + orange accents, Oswald display / Inter body.
   Used by: index, plugins, applications, support, blog, contact.

   .htaccess caches this file "immutable" for a year, so a browser that has
   already fetched styles.css?v=N never re-checks it. Bump the ?v= query on
   every <link> that loads this file when it changes, same as sixwalls.js.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
img { display: block; max-width: 100%; height: auto; }

:root {
  --sw-bg:      #0c1118;
  --sw-panel:   #121b26;
  --sw-panel-2: #0f1620;
  --sw-border:  #24323f;
  --sw-shot:    #2f3f4d;   /* lighter mat behind product screenshots */
  --sw-text:    #e7edf3;
  --sw-muted:   #8ba0b0;
  --sw-teal:    #3aa8c4;
  --sw-teal-dk: #2b8299;
  --sw-orange:  #e07b2c;
  --sw-amber:   #c9a24b;
  --font-display: 'Oswald', 'Segoe UI', sans-serif;
  --font-body:    'Inter', 'Segoe UI', system-ui, sans-serif;
  --radius: 8px;
  --wrap: 1120px;
}

body {
  min-height: 100vh;
  font-family: var(--font-body);
  line-height: 1.6;
  color: var(--sw-text);
  background:
    radial-gradient(ellipse at 78% 12%, rgba(58,168,196,0.10) 0%, transparent 55%),
    radial-gradient(ellipse at 12% 88%, rgba(224,123,44,0.08) 0%, transparent 50%),
    var(--sw-bg);
}

a { color: var(--sw-teal); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Nav ─────────────────────────────────────────────────────────────────── */
.sw-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem;
  padding: 0.85rem 1.5rem;
  background: rgba(9,13,18,0.92);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--sw-border);
}
.sw-nav-brand { display: flex; align-items: center; gap: 0.6rem; flex-shrink: 0; }
.sw-nav-brand:hover { text-decoration: none; }
.sw-nav-brand img { width: 30px; height: 30px; }
.sw-nav-brand b {
  font-family: var(--font-display); font-weight: 700; letter-spacing: 3px;
  text-transform: uppercase; font-size: 1rem; color: var(--sw-text);
}
.sw-nav-brand b span { color: var(--sw-orange); }

.sw-nav-links {
  display: flex; align-items: center; gap: 0.35rem 1.4rem; flex-wrap: wrap;
  justify-content: flex-end;
}
.sw-nav-links a {
  font-family: var(--font-display); font-size: 0.8rem; letter-spacing: 2px;
  text-transform: uppercase; color: var(--sw-muted); white-space: nowrap;
  padding: 0.35rem 0; border-bottom: 2px solid transparent; transition: 0.15s;
}
.sw-nav-links a:hover { color: var(--sw-text); text-decoration: none; }
.sw-nav-links a.is-active { color: var(--sw-text); border-bottom-color: var(--sw-orange); }
.sw-nav-links a.is-soon { opacity: 0.55; }
.sw-nav-links .soon-pill {
  font-size: 0.6rem; letter-spacing: 1px; margin-left: 0.35rem;
  padding: 0.05rem 0.35rem; border: 1px solid var(--sw-border); border-radius: 50px;
  color: var(--sw-muted);
}
/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
  font-family: var(--font-display); font-size: 0.85rem; letter-spacing: 2px;
  text-transform: uppercase; padding: 0.75rem 1.4rem; border-radius: var(--radius);
  cursor: pointer; transition: 0.2s; border: none; display: inline-block;
}
.btn-primary { background: var(--sw-teal); color: #06121a; }
.btn-primary:hover { background: var(--sw-teal-dk); color: #06121a; text-decoration: none; }
.btn-outline { border: 1px solid var(--sw-border); background: transparent; color: var(--sw-muted); }
.btn-outline:hover { border-color: var(--sw-text); color: var(--sw-text); text-decoration: none; }
.btn-lg { font-size: 0.95rem; padding: 0.95rem 1.9rem; }

/* ── Page shell ──────────────────────────────────────────────────────────── */
.sw-main { padding: 7.5rem 1.5rem 5rem; }
.sw-wrap { max-width: var(--wrap); margin: 0 auto; }

/* ============================================================================
   LANDING PAGE
   ========================================================================== */

.lp {
  padding-top: 4rem; /* clears the fixed nav; sections handle their own spacing */
}

/* ── Hero ────────────────────────────────────────────────────────────────── */
.lp-hero {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  gap: clamp(1.5rem, 5vw, 4.5rem);
  flex-wrap: wrap;
  max-width: 1240px; margin: 0 auto;
  padding: clamp(3rem, 8vw, 6.5rem) 1.5rem clamp(3rem, 7vw, 5.5rem);
}
.lp-hero-art {
  width: clamp(220px, 34vw, 420px); height: auto; flex-shrink: 0;
  filter: drop-shadow(0 24px 60px rgba(0,0,0,0.55));
}
.lp-hero-copy { flex: 1 1 420px; max-width: 620px; }
.lp-eyebrow {
  font-family: var(--font-display);
  font-size: clamp(0.72rem, 1.4vw, 0.85rem); letter-spacing: 5px;
  text-transform: uppercase; color: var(--sw-teal); margin-bottom: 1rem;
}
.lp-hero-copy h1 {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 8vw, 5rem);
  font-weight: 700; text-transform: uppercase; letter-spacing: 2px;
  line-height: 0.98; margin-bottom: 1.2rem;
}
.lp-hero-copy h1 span { color: var(--sw-orange); }
.lp-hero-copy .lp-lead { color: var(--sw-muted); font-size: clamp(1.05rem, 2.2vw, 1.3rem); font-weight: 300; }
.lp-hero-cta { margin-top: 2rem; display: flex; gap: 1rem; flex-wrap: wrap; }

/* ── Generic section ─────────────────────────────────────────────────────── */
.lp-section { padding: clamp(3.5rem, 9vw, 7rem) 1.5rem; }
.lp-section--alt {
  background: linear-gradient(180deg, var(--sw-panel) 0%, var(--sw-panel-2) 100%);
  border-top: 1px solid var(--sw-border); border-bottom: 1px solid var(--sw-border);
}
.lp-section-inner { max-width: var(--wrap); margin: 0 auto; }
.lp-h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5.2vw, 3.4rem);
  font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
  line-height: 1.05; margin-bottom: 1.5rem;
}
.lp-h2::after {
  content: ""; display: block; width: 64px; height: 4px;
  background: var(--sw-orange); margin-top: 1rem; border-radius: 2px;
}
.lp-h2--center { text-align: center; }
.lp-h2--center::after { margin-left: auto; margin-right: auto; }
.lp-lead {
  font-size: clamp(1.1rem, 2.3vw, 1.45rem); font-weight: 300; color: var(--sw-text);
  max-width: 62ch; line-height: 1.55;
}
.lp-body { margin-top: 1.5rem; color: var(--sw-muted); font-weight: 300; max-width: 66ch; }
.lp-body p + p { margin-top: 1rem; }
.lp-body strong { color: var(--sw-text); font-weight: 500; }

/* Who-we-are two-up */
.lp-who { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.lp-who-aside {
  border-left: 3px solid var(--sw-teal);
  background: var(--sw-panel-2); border-radius: 10px;
  padding: 1.6rem 1.8rem; color: var(--sw-muted); font-weight: 300; font-size: 0.95rem;
}
.lp-who-aside b {
  display: block; font-family: var(--font-display); letter-spacing: 2px;
  text-transform: uppercase; color: var(--sw-teal); font-size: 1.2rem; margin-bottom: 0.6rem;
}
@media (max-width: 860px) { .lp-who { grid-template-columns: 1fr; } }

/* ── What we offer: two big cards ────────────────────────────────────────── */
.lp-offer { display: grid; grid-template-columns: 1fr 1fr; gap: 1.75rem; margin-top: 2.5rem; }
@media (max-width: 900px) { .lp-offer { grid-template-columns: 1fr; } }
.lp-offer-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--sw-border); border-radius: 14px;
  background: var(--sw-panel); overflow: hidden;
  transition: border-color 0.2s, transform 0.2s;
}
.lp-offer-card:hover { border-color: var(--sw-teal); transform: translateY(-3px); text-decoration: none; }
.lp-offer-shot {
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.028) 0 10px, transparent 10px 20px),
    linear-gradient(180deg, #384856 0%, var(--sw-shot) 100%);
  border-bottom: 1px solid var(--sw-border);
  aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center; padding: 1.5rem;
}
.lp-offer-shot img {
  max-height: 100%; width: auto; border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 10px 28px -12px rgba(0,0,0,0.6);
}
.lp-offer-card-body { padding: 1.6rem 1.7rem 1.8rem; display: flex; flex-direction: column; gap: 0.8rem; flex: 1; }
.lp-offer-kicker {
  font-family: var(--font-display); font-size: 0.7rem; letter-spacing: 2px;
  text-transform: uppercase; color: var(--sw-teal);
}
.lp-offer-card h3 {
  font-family: var(--font-display); font-size: 1.7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px; color: var(--sw-text);
}
.lp-offer-card p { color: var(--sw-muted); font-weight: 300; font-size: 0.95rem; }
.lp-offer-more {
  margin-top: auto; font-family: var(--font-display); font-size: 0.8rem;
  letter-spacing: 2px; text-transform: uppercase; color: var(--sw-orange);
}

/* The Installer highlight strip — cream so it stands off the dark page */
.lp-installer-strip {
  display: flex; align-items: center; gap: 1.1rem;
  margin-top: 1.75rem; padding: 1.15rem 1.4rem;
  background: #f6efdd;
  border: 1px solid #e0d4b3; border-left: 4px solid var(--sw-orange);
  border-radius: 12px; text-decoration: none; color: #2a2620;
  box-shadow: 0 10px 34px -16px rgba(0, 0, 0, 0.55);
  transition: transform 0.15s, box-shadow 0.15s;
}
.lp-installer-strip:hover { transform: translateY(-2px); box-shadow: 0 14px 40px -16px rgba(0, 0, 0, 0.65); text-decoration: none; }
.lp-installer-strip img { flex-shrink: 0; }
.lp-installer-strip div { flex: 1; font-size: 0.92rem; color: #4a4436; font-weight: 400; line-height: 1.5; }
.lp-installer-strip b {
  display: block; margin-bottom: 0.15rem; color: #1f1c15;
  font-family: var(--font-display); font-size: 1.15rem; letter-spacing: 2px; text-transform: uppercase;
}
.lp-installer-arrow { color: var(--sw-orange); font-size: 1.4rem; flex-shrink: 0; font-weight: 700; }
@media (max-width: 560px) { .lp-installer-strip { flex-wrap: wrap; } .lp-installer-arrow { display: none; } }

/* Top-of-page announcement strip -- same look as the Installer strip
   above, kept as its own class so the two can be edited independently. */
.lp-announce-strip {
  display: flex; align-items: center; gap: 1.1rem;
  padding: 1.15rem 1.4rem;
  background: #f6efdd;
  border: 1px solid #e0d4b3; border-left: 4px solid var(--sw-orange);
  border-radius: 12px; text-decoration: none; color: #2a2620;
  box-shadow: 0 10px 34px -16px rgba(0, 0, 0, 0.55);
  transition: transform 0.15s, box-shadow 0.15s;
}
.lp-announce-strip:hover { transform: translateY(-2px); box-shadow: 0 14px 40px -16px rgba(0, 0, 0, 0.65); text-decoration: none; }
.lp-announce-strip img { flex-shrink: 0; }
.lp-announce-strip div { flex: 1; font-size: 0.92rem; color: #4a4436; font-weight: 400; line-height: 1.5; }
.lp-announce-strip b {
  display: block; margin-bottom: 0.15rem; color: #1f1c15;
  font-family: var(--font-display); font-size: 1.15rem; letter-spacing: 2px; text-transform: uppercase;
}
.lp-announce-arrow { color: var(--sw-orange); font-size: 1.4rem; flex-shrink: 0; font-weight: 700; }
@media (max-width: 560px) { .lp-announce-strip { flex-wrap: wrap; } .lp-announce-arrow { display: none; } }

/* principles strip */
.lp-principles {
  display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 2rem; justify-content: center;
}
.lp-principle {
  font-family: var(--font-display); font-size: 0.72rem; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--sw-muted);
  padding: 0.4rem 0.9rem; border: 1px solid var(--sw-border); border-radius: 50px;
}


/* ── Miraculous Love Kids feature ────────────────────────────────────────── */
.lp-mlk { padding: 0; overflow: hidden; }
.lp-mlk-grid { display: grid; grid-template-columns: 1.1fr 1fr; align-items: stretch; }
@media (max-width: 940px) { .lp-mlk-grid { grid-template-columns: 1fr; } }
.lp-mlk-photo { position: relative; min-height: 340px; }
.lp-mlk-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lp-mlk-credit {
  position: absolute; left: 0; bottom: 0; right: 0;
  font-size: 0.72rem; color: rgba(231,237,243,0.8);
  background: linear-gradient(0deg, rgba(6,10,15,0.75), transparent);
  padding: 1.4rem 1rem 0.6rem; text-align: right;
}
.lp-mlk-credit a { color: rgba(231,237,243,0.9); }
.lp-mlk-copy {
  padding: clamp(2.5rem, 6vw, 4.5rem);
  background: linear-gradient(180deg, var(--sw-panel) 0%, var(--sw-panel-2) 100%);
  border-left: 3px solid var(--sw-teal);
  display: flex; flex-direction: column; justify-content: center;
}
.lp-mlk-eyebrow {
  font-family: var(--font-display); font-size: 0.72rem; letter-spacing: 3px;
  text-transform: uppercase; color: var(--sw-teal); margin-bottom: 0.8rem;
}
.lp-mlk-copy h2 {
  font-family: var(--font-display); font-size: clamp(1.7rem, 4vw, 2.6rem);
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
  line-height: 1.08; margin-bottom: 1.1rem;
}
.lp-mlk-copy p { color: var(--sw-muted); font-weight: 300; margin-bottom: 0.9rem; }
.lp-mlk-copy p strong { color: var(--sw-text); font-weight: 500; }
.lp-mlk-copy em { color: var(--sw-teal); font-style: normal; }
.lp-mlk-cta { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; margin-top: 0.6rem; }
.lp-mlk-cta a.plain {
  font-family: var(--font-display); font-size: 0.78rem; letter-spacing: 1px;
  text-transform: uppercase; color: var(--sw-muted);
}
/* MLK's own social channels. Icons are inline SVG so three links don't drag in
   an icon font or a third-party script. */
.lp-mlk-social {
  display: flex; align-items: center; gap: 0.85rem; flex-wrap: wrap;
  margin-top: 1.4rem;
}
.lp-mlk-social-label {
  font-family: var(--font-display); font-size: 0.72rem; letter-spacing: 3px;
  text-transform: uppercase; color: var(--sw-muted); margin-right: 0.15rem;
}
.lp-mlk-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--sw-border); color: var(--sw-muted);
  transition: color 0.18s, border-color 0.18s, background 0.18s;
}
.lp-mlk-social a:hover,
.lp-mlk-social a:focus-visible {
  color: var(--sw-text); border-color: var(--sw-teal);
  background: rgba(58,168,196,0.12); text-decoration: none;
}
.lp-mlk-social a:focus-visible { outline: 2px solid var(--sw-teal); outline-offset: 2px; }
.lp-mlk-social svg { display: block; }
@media (prefers-reduced-motion: reduce) { .lp-mlk-social a { transition: none; } }

/* ── CTA band ────────────────────────────────────────────────────────────── */
.lp-cta-band { text-align: center; }
.lp-cta-band .lp-h2 { margin-left: auto; margin-right: auto; }
.lp-cta-band-btns { margin-top: 2rem; display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* ============================================================================
   SUB-PAGES (plugins / applications / support / blog / contact)
   ========================================================================== */

/* Back-link above a per-plugin / detail page hero. */
.sw-crumb { margin-bottom: 1rem; font-size: 0.85rem; }
.sw-crumb a { color: var(--sw-muted); font-family: var(--font-display); letter-spacing: 1px; text-transform: uppercase; font-size: 0.75rem; }
.sw-crumb a:hover { color: var(--sw-teal); text-decoration: none; }

.sw-hero {
  border: 1px solid var(--sw-border);
  border-top: 2px solid var(--sw-amber);
  border-radius: 12px;
  background: linear-gradient(180deg, var(--sw-panel) 0%, var(--sw-panel-2) 100%);
  padding: 2.5rem 2rem;
  display: flex; align-items: center; gap: 2rem; flex-wrap: wrap;
}
.sw-hero > img { width: 150px; max-width: 40vw; height: auto; flex-shrink: 0; }
.sw-hero-copy { flex: 1 1 320px; }
/* Plugin screenshot floated to the right of the hero copy. */
.sw-hero-shot {
  flex: 0 1 360px; margin-left: auto;
  min-height: 252px;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.028) 0 10px, transparent 10px 20px),
    linear-gradient(180deg, #384856 0%, var(--sw-shot) 100%);
  border: 1px solid var(--sw-border); border-radius: 8px;
  padding: 0.9rem;
  display: flex; align-items: center; justify-content: center;
}
.sw-hero-shot img {
  display: block; width: auto; height: auto; max-width: 100%; max-height: 224px;
  border-radius: 4px; border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 10px 28px -12px rgba(0,0,0,0.6);
  cursor: zoom-in; transition: filter 0.2s;
}
.sw-hero-shot img:hover { filter: brightness(1.08); }
.sw-hero-shot img:focus-visible { outline: 2px solid var(--sw-teal); outline-offset: 3px; }
.sw-hero-shot--wide { flex-basis: 460px; }
.sw-hero-shot--tall { flex-basis: 300px; }
@media (max-width: 820px) { .sw-hero-shot { flex-basis: 100%; margin-left: 0; } }
.sw-eyebrow {
  font-family: var(--font-display);
  font-size: 0.72rem; letter-spacing: 4px; text-transform: uppercase;
  color: var(--sw-teal); margin-bottom: 0.75rem;
}
.sw-hero-copy h1 {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4.5vw, 2.8rem);
  font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
  line-height: 1.05; margin-bottom: 0.9rem;
}
.sw-hero-copy h1 span { color: var(--sw-orange); }
.sw-hero-copy p { color: var(--sw-muted); font-weight: 300; max-width: 52ch; }

.sw-grid { margin-top: 2rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
@media (max-width: 820px) { .sw-grid { grid-template-columns: 1fr; } }

.sw-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--sw-border);
  border-radius: 12px;
  background: var(--sw-panel);
  overflow: hidden;
  transition: border-color 0.2s, transform 0.2s;
}
.sw-card:hover { border-color: var(--sw-teal); transform: translateY(-2px); }
/* A single card standing on its own page (not in .sw-grid) — no hover lift. */
.sw-card-solo { margin-top: 1.5rem; }
.sw-card-solo:hover { border-color: var(--sw-border); transform: none; }

/* Featured card — spans the full grid width and leads the page. */
.sw-card--feature {
  grid-column: 1 / -1;
  border: 2px solid var(--sw-orange);
  box-shadow: 0 14px 44px -20px rgba(224, 131, 96, 0.45);
}
.sw-card--feature:hover { border-color: var(--sw-orange); transform: none; }
/* the per-card header accent bar is redundant here and misreads as a glitch
   against the full orange border */
.sw-card--feature .sw-card-head { border-left: 0; }
.sw-card--feature .sw-card-title::after {
  content: "NEW";
  margin-left: 0.7rem;
  font-size: 0.6rem; letter-spacing: 2px;
  padding: 0.15rem 0.45rem; border-radius: 4px;
  background: var(--sw-orange); color: #12161c;
  vertical-align: 0.28em;
}

.sw-card-head {
  padding: 1.25rem 1.4rem 1rem;
  border-bottom: 1px solid var(--sw-border);
  border-left: 3px solid var(--sw-orange);
}
.sw-card-title {
  font-family: var(--font-display);
  font-size: 1.35rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
}
.sw-card-kicker {
  margin-top: 0.3rem;
  font-family: var(--font-display);
  font-size: 0.72rem; letter-spacing: 2px; text-transform: uppercase;
  color: var(--sw-muted);
}

.sw-shot {
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.028) 0 10px, transparent 10px 20px),
    linear-gradient(180deg, #384856 0%, var(--sw-shot) 100%);
  border-bottom: 1px solid var(--sw-border);
  height: 210px;
  display: flex; align-items: center; justify-content: center;
  padding: 1.1rem;
}
.sw-shot img {
  max-height: 100%; max-width: 100%; width: auto;
  border-radius: 4px; border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 10px 28px -12px rgba(0,0,0,0.6);
  cursor: zoom-in; transition: filter 0.2s;
}
.sw-shot img:hover { filter: brightness(1.08); }
.sw-shot img:focus-visible { outline: 2px solid var(--sw-teal); outline-offset: 3px; }

.sw-card-body { padding: 1.4rem; display: flex; flex-direction: column; gap: 0.9rem; flex: 1; }
.sw-card-body p { color: #c2ccd6; font-size: 0.92rem; font-weight: 300; }
.sw-card-body p strong { color: var(--sw-text); font-weight: 500; }

/* Feature card laid out screenshot-left / copy-right instead of stacked --
   the screenshot is the pitch, so it sits level with the text instead of
   running full-width above a long description. The shot keeps its own
   border/radius and sits inset on all sides (margin, not flush) so the
   hatched background doesn't touch the card's orange outline. */
.sw-feature-split { display: flex; flex: 1; gap: 1.4rem; padding: 1.4rem; }
.sw-feature-split .sw-shot {
  flex: 0 0 320px; height: auto; padding: 1.1rem;
  margin: 0; border: 1px solid var(--sw-border); border-radius: 10px;
}
.sw-feature-split .sw-card-body { flex: 1; padding: 0; }
@media (max-width: 760px) {
  .sw-feature-split { flex-direction: column; }
  .sw-feature-split .sw-shot { flex-basis: auto; }
}

.sw-banner {
  margin-top: 1.25rem;
  border: 1px solid rgba(201,162,75,0.35);
  border-left: 3px solid var(--sw-amber);
  background: rgba(201,162,75,0.06);
  border-radius: 8px;
  padding: 1rem 1.2rem;
  font-size: 0.86rem; font-weight: 300; line-height: 1.65;
  color: #cdd6df;
}
.sw-banner strong { color: var(--sw-text); font-weight: 600; }

/* Feature-highlight callout inside a product card */
.sw-feat-note {
  border: 1px solid rgba(58,168,196,0.35);
  border-left: 3px solid var(--sw-teal);
  background: rgba(58,168,196,0.07);
  border-radius: 8px;
  padding: 0.9rem 1.1rem;
  font-size: 0.86rem; font-weight: 300; line-height: 1.6;
  color: #cdd6df;
}
.sw-feat-note strong { color: var(--sw-text); font-weight: 500; }
.sw-feat-note-h {
  display: block;
  font-family: var(--font-display);
  font-size: 1.08rem; letter-spacing: 2px; text-transform: uppercase;
  color: var(--sw-teal); font-weight: 700; margin-bottom: 0.35rem;
}

.sw-banner-h {
  display: block;
  font-family: var(--font-display);
  font-size: 1.08rem; letter-spacing: 2px; text-transform: uppercase;
  color: var(--sw-amber); font-weight: 700; margin-bottom: 0.4rem;
}

.sw-features { margin: 0; padding-left: 1.1rem; color: #b6c1cc; font-size: 0.88rem; font-weight: 300; }
.sw-features li { margin-bottom: 0.35rem; }
.sw-features li::marker { color: var(--sw-teal); }

.sw-spec { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.sw-chip {
  font-family: var(--font-display);
  font-size: 0.68rem; letter-spacing: 1px; text-transform: uppercase;
  color: var(--sw-muted);
  padding: 0.28rem 0.6rem;
  border: 1px solid var(--sw-border); border-radius: 50px;
}

.sw-dl { display: flex; flex-wrap: wrap; gap: 0.7rem; padding-top: 0.2rem; }
.sw-dl.is-stack { flex-direction: column; align-items: stretch; gap: 0.6rem; }
.sw-dl.is-stack .btn { display: block; width: 100%; text-align: center; }
.sw-cta {
  font-size: 0.95rem; letter-spacing: 3px;
  padding: 0.8rem 1.4rem;
  box-shadow: 0 6px 22px rgba(58, 168, 196, 0.28);
}
.sw-note { font-size: 0.8rem !important; color: var(--sw-muted) !important; }
.sw-note code {
  background: var(--sw-panel-2); border: 1px solid var(--sw-border);
  border-radius: 4px; padding: 0.05rem 0.35rem; font-size: 0.9em;
}

/* A/B demo player */
.sw-demo {
  background: var(--sw-panel-2);
  border: 1px solid var(--sw-border);
  border-radius: 8px;
  padding: 0.9rem 1rem;
  display: flex; flex-direction: column; gap: 0.7rem;
}
.sw-demo-label {
  font-family: var(--font-display);
  font-size: 1.15rem; letter-spacing: 1px; text-transform: uppercase;
  color: var(--sw-muted); margin: 0;
}
.sw-demo-row { display: flex; align-items: center; gap: 0.7rem; }
.sw-demo-row > span {
  flex: 0 0 4.5rem;
  font-family: var(--font-display);
  font-size: 0.72rem; letter-spacing: 1px; text-transform: uppercase;
  color: var(--sw-text);
}
.sw-demo audio { flex: 1; height: 34px; min-width: 0; }
.sw-demo-note { margin: 0; font-size: 0.85rem; color: var(--sw-muted); line-height: 1.5; }
.sw-demo-note strong { color: var(--sw-text); }
.sw-demo-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; }
@media (max-width: 640px) { .sw-demo-modes { grid-template-columns: minmax(0, 1fr); } }
.sw-demo-mode {
  background: var(--sw-panel);
  border: 1px solid var(--sw-border);
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
  display: flex; flex-direction: column; gap: 0.6rem;
}
.sw-demo-mode-h {
  font-family: var(--font-display);
  font-size: 1.08rem; letter-spacing: 2px; text-transform: uppercase;
  color: var(--sw-teal); font-weight: 700;
}
.sw-demo-mode p { margin: 0 0 auto; font-size: 0.85rem; color: var(--sw-muted); line-height: 1.5; }
.sw-demo-mode .sw-demo-row > span { flex-basis: 3.6rem; }

.sw-disclaimer {
  margin-top: 2.5rem;
  font-size: 0.8rem; color: var(--sw-muted); font-weight: 300;
  padding: 1rem 1.2rem;
  border-left: 3px solid var(--sw-border);
  background: var(--sw-panel-2);
  border-radius: 4px;
}
.sw-disclaimer strong { color: var(--sw-text); font-weight: 500; }

/* "Pay it forward" charity block (sub-pages) */
.sw-give {
  margin-top: 2rem;
  display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap;
  border: 1px solid var(--sw-border);
  border-left: 3px solid var(--sw-teal);
  background: var(--sw-panel);
  border-radius: 10px;
  padding: 1.25rem 1.4rem;
}
.sw-give-logo { flex: 0 0 auto; background: #fff; border-radius: 8px; padding: 0.5rem 0.7rem; }
.sw-give-logo img { width: 168px; max-width: 42vw; height: auto; display: block; }
.sw-give-body { flex: 1 1 340px; }
.sw-give-h {
  display: block;
  font-family: var(--font-display);
  font-size: 1.08rem; letter-spacing: 2px; text-transform: uppercase;
  color: var(--sw-teal); font-weight: 700; margin-bottom: 0.45rem;
}
.sw-give-body p {
  font-size: 0.86rem; font-weight: 300; line-height: 1.6;
  color: #cdd6df; margin: 0 0 0.55rem;
}
.sw-give-body p strong { color: var(--sw-text); font-weight: 600; }
.sw-give-body em { color: var(--sw-teal); font-style: normal; }
.sw-give-links { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: center; margin-top: 0.3rem; }
.sw-give-links a.plain {
  font-family: var(--font-display); font-size: 0.78rem; letter-spacing: 1px;
  text-transform: uppercase; color: var(--sw-muted);
}
.sw-give-links a.plain:hover { color: var(--sw-text); text-decoration: none; }

/* ── Support index ───────────────────────────────────────────────────────── */
.sup-grid { margin-top: 2rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.25rem; }
.sup-card {
  display: flex; flex-direction: column; height: 100%;
  border: 1px solid var(--sw-border); border-left: 3px solid var(--sw-orange);
  border-radius: 10px; background: var(--sw-panel); padding: 1.5rem 1.6rem;
  transition: border-color 0.2s, transform 0.2s;
}
.sup-card:hover { border-color: var(--sw-teal); transform: translateY(-2px); text-decoration: none; }

/* Small/medium cards flip to a light "spotlight" on hover -- extra pop on
   the highlight border, and a bit more brightness against an otherwise
   all-dark page. Redefining the shared --sw-panel/--sw-text/--sw-muted/
   --sw-border variables locally does most of the work, since most card
   text already reads its color from them; only .sw-card-title (which has
   no color of its own, just inherits), the two hardcoded-hex rules
   (.sw-card-body p, .sw-features), and .sup-open (var(--sw-orange), not a
   text-color variable) need an explicit override. Excludes
   .sw-card--feature (the Installer's lead card, meant to read as
   permanently featured, not one card among many to skim) and
   .sw-card-solo (a lone product card is the whole page, not a link to
   somewhere else, so it already opts out of any hover treatment).

   Text rule: whatever was already rendering black/near-black (titles, via
   --sw-text) goes bolder instead of changing color; whatever wasn't
   (--sw-muted grey, and .sup-open's orange) goes to true black instead of
   changing weight. --sw-text stays #191f27 -- Oswald's loaded weights
   (400/600/700) top out at 700, which .sw-card-title/.sup-card h3 already
   use, so there's no bolder step actually available there; the explicit
   font-weight: 700 below is a no-op today but pins it if that ever loads
   a heavier cut. --sw-card-body p strong (Inter, no 600/700 loaded) does
   have real headroom -- the browser synthesizes the extra weight.

   --sw-panel-2 (the nested/inset shade .sw-note code and a few other
   elements use for their own background) must be redefined here too, not
   just --sw-panel -- it was missed originally, and since --sw-muted flips
   to true black in this same scope, a <code> snippet inside a hovered
   card's body rendered as an unreadable black box: black text (inherited
   --sw-muted) on the still-dark base --sw-panel-2 background. */
.sup-card:hover,
.sw-card:not(.sw-card--feature):not(.sw-card-solo):hover {
  --sw-panel: #d4dae6;
  --sw-panel-2: #c5ccd9;
  --sw-text: #191f27;
  --sw-muted: #000000;
  --sw-border: #dde2ea;
  border-color: var(--sw-teal);
}
.sup-card:hover h3,
.sw-card:not(.sw-card--feature):not(.sw-card-solo):hover .sw-card-title { font-weight: 700; }
.sw-card:not(.sw-card--feature):not(.sw-card-solo):hover .sw-card-body p strong { font-weight: 700; }
.sw-card:not(.sw-card--feature):not(.sw-card-solo):hover .sw-card-title { color: #191f27; }
.sw-card:not(.sw-card--feature):not(.sw-card-solo):hover .sw-card-body p,
.sw-card:not(.sw-card--feature):not(.sw-card-solo):hover .sw-features { color: #000000; }
.sup-card:hover .sup-open { color: #000000; }

.sup-card h3 {
  font-family: var(--font-display); font-size: 1.2rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px; color: var(--sw-text); margin-bottom: 0.4rem;
}
.sup-card p { color: var(--sw-muted); font-weight: 300; font-size: 0.9rem; }
.sup-card .sup-open {
  display: inline-block; margin-top: auto; padding-top: 1.1rem;
  font-family: var(--font-display); font-size: 0.75rem; letter-spacing: 2px;
  text-transform: uppercase; color: var(--sw-orange);
}

/* Support page changelog: a compact list, not cards (rendered from catalog.json). */
.sup-log { margin-top: 3rem; }
.sup-log h2 {
  font-family: var(--font-display); font-size: 1.2rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px; color: var(--sw-text);
}
.sup-log-sub { color: var(--sw-muted); font-weight: 300; font-size: 0.85rem; margin-bottom: 0.9rem; }
.sup-log-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--sw-border); }
.sup-log-row {
  display: grid; grid-template-columns: 7.5rem 1fr; gap: 1rem;
  padding: 0.6rem 0; border-bottom: 1px solid var(--sw-border);
}
.sup-log-row[hidden] { display: none; }
.sup-log-date { color: var(--sw-muted); font-size: 0.8rem; padding-top: 0.1rem; white-space: nowrap; }
.sup-log-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; }
.sup-log-name { font-weight: 500; color: var(--sw-text); font-size: 0.9rem; }
a.sup-log-name:hover { color: var(--sw-teal); }
.sup-log-ver { color: var(--sw-orange); font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.sup-log-os {
  font-size: 0.68rem; letter-spacing: 0.5px; color: var(--sw-muted);
  border: 1px solid var(--sw-border); border-radius: 4px; padding: 0 0.35rem;
}
.sup-log-sum { color: var(--sw-muted); font-weight: 300; font-size: 0.85rem; margin-top: 0.15rem; }
.sup-log-more {
  margin-top: 0.9rem; background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--font-display); font-size: 0.75rem; letter-spacing: 2px;
  text-transform: uppercase; color: var(--sw-orange);
}
.sup-log-more:hover { color: var(--sw-teal); }
@media (max-width: 560px) {
  .sup-log-row { grid-template-columns: 1fr; gap: 0.15rem; }
}

/* ── Coming-soon stub ────────────────────────────────────────────────────── */
.sw-soon {
  max-width: 640px; margin: 0 auto; text-align: center;
  border: 1px solid var(--sw-border); border-top: 2px solid var(--sw-amber);
  border-radius: 12px; background: linear-gradient(180deg, var(--sw-panel) 0%, var(--sw-panel-2) 100%);
  padding: clamp(2.5rem, 8vw, 5rem) 2rem;
}
.sw-soon .sw-eyebrow { text-align: center; }
.sw-soon h1 {
  font-family: var(--font-display); font-size: clamp(2rem, 6vw, 3rem);
  font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 1rem;
}
.sw-soon p { color: var(--sw-muted); font-weight: 300; margin: 0 auto 1.5rem; max-width: 44ch; }

/* ── Footer ──────────────────────────────────────────────────────────────── */
.sw-footer {
  background: var(--sw-panel-2);
  border-top: 1px solid var(--sw-border);
  padding: 3rem 1.5rem; text-align: center;
  color: var(--sw-muted); font-size: 0.82rem;
}
.sw-footer b {
  display: block; font-family: var(--font-display); font-weight: 700;
  letter-spacing: 4px; text-transform: uppercase; font-size: 1.3rem;
  color: var(--sw-text); margin-bottom: 0.75rem;
}
.sw-footer b span { color: var(--sw-orange); }
.sw-footer-links {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1.4rem; justify-content: center;
  margin-bottom: 1rem;
}
.sw-footer-links a {
  font-family: var(--font-display); font-size: 0.74rem; letter-spacing: 2px;
  text-transform: uppercase; color: var(--sw-muted);
}
.sw-footer-links a:hover { color: var(--sw-teal); }
.sw-footer-social { display: inline-flex; }
.sw-footer-social svg { display: block; }
.sw-footer a { color: var(--sw-muted); }
.sw-footer a:hover { color: var(--sw-teal); }

/* ── Screenshot lightbox (plugins / applications) ────────────────────────── */
.sw-lightbox {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(1rem, 4vw, 3.5rem);
  background: rgba(6, 10, 15, 0.9);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  cursor: zoom-out;
}
.sw-lightbox[hidden] { display: none; }
.sw-lightbox-img {
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  border: 1px solid var(--sw-border); border-radius: 8px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
  cursor: default;
}
.sw-lightbox-close {
  position: absolute; top: 1rem; right: 1.15rem;
  width: 44px; height: 44px; padding: 0;
  font: 700 1.6rem/1 var(--font-display, sans-serif);
  color: var(--sw-text); background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--sw-border); border-radius: 8px; cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.sw-lightbox-close:hover { background: rgba(255, 255, 255, 0.13); border-color: var(--sw-text); }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 780px) {
  .sw-nav { flex-wrap: wrap; padding: 0.7rem 1.1rem; gap: 0.5rem 1rem; }
  .sw-nav-brand b { font-size: 0.85rem; letter-spacing: 2px; }
  .sw-nav-links { gap: 0.3rem 1rem; }
  .sw-nav-links a { font-size: 0.72rem; letter-spacing: 1.5px; }
  .sw-main { padding-top: 8.5rem; }
  .lp { padding-top: 6.5rem; }
  .sw-hero { padding: 1.75rem 1.25rem; }
  .lp-mlk-photo { min-height: 260px; }
}

/* ── "Get It!" download picker ───────────────────────────────────────────── */
.sw-get {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(6, 10, 15, 0.9);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.sw-get[hidden] { display: none; }
.sw-get-panel {
  position: relative;
  width: 100%; max-width: 540px; max-height: 90vh; overflow-y: auto;
  background: var(--sw-panel);
  border: 1px solid var(--sw-border); border-top: 2px solid var(--sw-teal);
  border-radius: 14px;
  padding: 1.9rem 1.8rem 1.6rem;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
}
.sw-get-eyebrow {
  font-family: var(--font-display);
  font-size: 0.7rem; letter-spacing: 2px; text-transform: uppercase;
  color: var(--sw-teal); margin: 0 0 0.35rem;
}
#sw-get-title {
  font-family: var(--font-display);
  font-size: 1.7rem; letter-spacing: 1px; margin: 0 0 0.4rem; color: var(--sw-text);
}
.sw-get-close {
  position: absolute; top: 0.85rem; right: 0.9rem;
  width: 40px; height: 40px; padding: 0;
  font: 700 1.5rem/1 var(--font-display, sans-serif);
  color: var(--sw-text); background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--sw-border); border-radius: 8px; cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.sw-get-close:hover { background: rgba(255, 255, 255, 0.13); border-color: var(--sw-text); }

.sw-get-step { border: 0; margin: 1.4rem 0 0; padding: 0; }
.sw-get-step legend {
  padding: 0;
  font-family: var(--font-display);
  font-size: 1.03rem; letter-spacing: 2px; text-transform: uppercase;
  color: var(--sw-muted); margin-bottom: 0.6rem;
}
.sw-get input[type="radio"] {
  position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0;
}

.sw-get-os { display: flex; gap: 0.6rem; }
.sw-get-os label {
  flex: 1; text-align: center; cursor: pointer;
  padding: 0.7rem 0.5rem; border-radius: var(--radius);
  border: 1px solid var(--sw-border); background: var(--sw-panel-2);
  font-family: var(--font-display); font-size: 0.8rem; letter-spacing: 1px;
  text-transform: uppercase; color: var(--sw-muted); transition: 0.15s;
}
.sw-get-os label:hover { color: var(--sw-text); border-color: var(--sw-muted); }
.sw-get-os label:has(input:checked) {
  border-color: var(--sw-teal); color: var(--sw-text);
  background: rgba(58, 168, 196, 0.1);
}
.sw-get-os label:has(input:focus-visible) { outline: 2px solid var(--sw-teal); outline-offset: 2px; }

.sw-get-opts { display: grid; gap: 0.5rem; }
.sw-get-opt {
  display: flex; align-items: flex-start; gap: 0.9rem; cursor: pointer;
  padding: 0.8rem 1rem; border-radius: var(--radius);
  border: 1px solid var(--sw-border); background: var(--sw-panel-2);
  transition: 0.15s;
}
.sw-get-opt:hover { border-color: var(--sw-muted); }
.sw-get-opt.is-sel,
.sw-get-opt:has(input:checked) {
  border-color: var(--sw-teal); background: rgba(58, 168, 196, 0.1);
}
.sw-get-opt:has(input:focus-visible) { outline: 2px solid var(--sw-teal); outline-offset: 2px; }
.sw-get-opt.is-off { opacity: 0.42; cursor: not-allowed; }
.sw-get-opt-main { flex: 1; display: flex; flex-direction: column; gap: 0.15rem; }
.sw-get-opt-h {
  font-family: var(--font-display);
  font-size: 1.03rem; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--sw-text);
}
.sw-get-opt-d { font-size: 0.82rem; font-weight: 300; color: var(--sw-muted); line-height: 1.5; }
.sw-get-opt-d code {
  background: var(--sw-panel); border: 1px solid var(--sw-border);
  border-radius: 4px; padding: 0.02rem 0.3rem; font-size: 0.9em;
}
.sw-get-opt-sz {
  flex-shrink: 0; align-self: center;
  font-family: var(--font-display);
  font-size: 0.72rem; letter-spacing: 1px; color: var(--sw-teal); white-space: nowrap;
}
.sw-get-opt.is-off .sw-get-opt-sz { color: var(--sw-muted); }

.sw-get-hint {
  margin: 0.7rem 0 0;
  border-left: 3px solid var(--sw-teal);
  background: rgba(58, 168, 196, 0.07);
  border-radius: 6px; padding: 0.6rem 0.9rem;
  font-size: 0.8rem; font-weight: 300; line-height: 1.55; color: #cdd6df;
}
.sw-get-hint[hidden] { display: none; }
.sw-get-hint strong { color: var(--sw-text); font-weight: 500; }
.sw-get-hint code {
  background: var(--sw-panel); border: 1px solid var(--sw-border);
  border-radius: 4px; padding: 0.02rem 0.3rem;
}

.sw-get-foot {
  margin-top: 1.5rem; padding-top: 1.2rem;
  border-top: 1px solid var(--sw-border);
  display: flex; flex-direction: column; gap: 0.75rem;
}
.sw-get-summary {
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.78rem; letter-spacing: 1px; text-transform: uppercase;
  color: var(--sw-muted);
}
.sw-get-go { text-align: center; }
.sw-get-go.is-off { opacity: 0.4; pointer-events: none; }
.sw-get-go[hidden] { display: none; }

@media (max-width: 780px) {
  .sw-get-panel { padding: 1.6rem 1.2rem 1.3rem; }
  #sw-get-title { font-size: 1.45rem; }
  .sw-get-opt { padding: 0.75rem 0.85rem; gap: 0.7rem; }
}

/* The "revert to an older version" picker (Support page) reuses every
   .sw-get-* class above for visual consistency -- it's a second modal
   instance (#sw-revert, not #sw-get), so only its own title id and its
   product <select> (the other pickers only ever needed radio pills) need
   rules of their own. */
#sw-revert-title {
  font-family: var(--font-display);
  font-size: 1.7rem; letter-spacing: 1px; margin: 0 0 0.4rem; color: var(--sw-text);
}
@media (max-width: 780px) { #sw-revert-title { font-size: 1.45rem; } }
.sw-get select {
  display: block; width: 100%; margin-top: 0.4rem;
  font-family: var(--font-body); font-size: 0.95rem; font-weight: 400;
  color: var(--sw-text);
  background: var(--sw-panel-2);
  border: 1px solid var(--sw-border); border-radius: 8px;
  padding: 0.7rem 0.85rem;
  appearance: none; -webkit-appearance: none; cursor: pointer;
}
.sw-get select:focus {
  outline: none; border-color: var(--sw-teal);
  box-shadow: 0 0 0 2px rgba(58,168,196,0.18);
}
.sw-revert-request {
  display: flex; flex-direction: column; gap: 0.6rem;
  padding-top: 0.6rem; border-top: 1px solid var(--sw-border);
}
.sw-revert-request[hidden] { display: none; }
.sw-revert-request p { margin: 0; font-size: 0.8rem; font-weight: 300; color: var(--sw-muted); line-height: 1.5; }
.sw-revert-request label {
  display: block;
  font-family: var(--font-display);
  font-size: 0.72rem; letter-spacing: 2px; text-transform: uppercase;
  color: var(--sw-muted);
}
.sw-revert-request input[type="email"] {
  display: block; width: 100%; margin-top: 0.4rem;
  font-family: var(--font-body); font-size: 0.95rem; font-weight: 400;
  color: var(--sw-text);
  background: var(--sw-panel-2);
  border: 1px solid var(--sw-border); border-radius: 8px;
  padding: 0.7rem 0.85rem;
}
.sw-revert-request input[type="email"]:focus {
  outline: none; border-color: var(--sw-teal);
  box-shadow: 0 0 0 2px rgba(58,168,196,0.18);
}

/* ── Contact ────────────────────────────────────────────────────────────── */
.contact-card {
  margin-top: 2.25rem;
  border: 1px solid var(--sw-border);
  border-top: 2px solid var(--sw-teal);
  border-radius: 12px;
  background: linear-gradient(180deg, var(--sw-panel) 0%, var(--sw-panel-2) 100%);
  padding: clamp(1.9rem, 5vw, 2.9rem);
  text-align: center;
}
.contact-card .sw-eyebrow { text-align: center; }
.contact-addr {
  display: inline-block;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 5vw, 2.4rem);
  font-weight: 700; letter-spacing: 1px;
  color: var(--sw-text);
  word-break: break-word;
  margin: 0.35rem 0 1.4rem;
}
.contact-addr:hover { color: var(--sw-teal); text-decoration: none; }
.contact-hint {
  margin-top: 1.15rem;
  font-size: 0.8rem; color: var(--sw-muted); font-weight: 300;
}

/* contact form */
.contact-thanks {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 4vw, 2rem);
  font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
  margin: 0.3rem 0 0.8rem;
}
.contact-alert {
  max-width: 560px; margin: 0.4rem auto 0; text-align: left;
  border: 1px solid rgba(224,123,44,0.4); border-left: 3px solid var(--sw-orange);
  background: rgba(224,123,44,0.07);
  border-radius: 8px; padding: 0.75rem 1rem;
  font-size: 0.85rem; font-weight: 300; color: #e8d3c2;
}
.contact-form {
  max-width: 560px; margin: 1.5rem auto 0; text-align: left;
  display: flex; flex-direction: column; gap: 1rem;
}
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 560px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-form label {
  display: block;
  font-family: var(--font-display);
  font-size: 0.72rem; letter-spacing: 2px; text-transform: uppercase;
  color: var(--sw-muted);
}
.contact-form input,
.contact-form select,
.contact-form textarea {
  display: block; width: 100%; margin-top: 0.4rem;
  font-family: var(--font-body); font-size: 0.95rem; font-weight: 400;
  color: var(--sw-text);
  background: var(--sw-panel-2);
  border: 1px solid var(--sw-border); border-radius: 8px;
  padding: 0.7rem 0.85rem;
  letter-spacing: normal; text-transform: none;
}
.contact-form textarea { resize: vertical; min-height: 8rem; line-height: 1.55; }
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none; border-color: var(--sw-teal);
  box-shadow: 0 0 0 2px rgba(58,168,196,0.18);
}
.contact-form select { appearance: none; -webkit-appearance: none; cursor: pointer; }
.contact-hp {
  position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden;
}
.contact-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem;
  margin-top: 0.3rem;
}
.contact-fine { font-size: 0.8rem; color: var(--sw-muted); font-weight: 300; }
.contact-status {
  margin: 0; font-size: 0.85rem; font-weight: 400; color: var(--sw-teal);
}
.contact-status.is-err { color: var(--sw-orange); }
.contact-status[hidden] { display: none; }

/* Action cards -> modal form */
.contact-cards { margin-top: 2.25rem; }
.contact-cards .sup-card { cursor: pointer; }

dialog.cm {
  /* the global `* { margin: 0 }` reset kills the UA centering — restore it */
  margin: auto;
  border: none; padding: 0; background: transparent;
  width: min(640px, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  color: var(--sw-text);
  overflow: visible;
}
dialog.cm::backdrop {
  background: rgba(6, 10, 15, 0.74);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
dialog.cm[open] { animation: cm-in 0.16s ease-out; }
@keyframes cm-in { from { opacity: 0; transform: translateY(10px); } }

.cm-form {
  max-width: none; margin: 0;
  max-height: calc(100vh - 2rem); overflow-y: auto;
  border: 1px solid var(--sw-border);
  border-top: 2px solid var(--sw-teal);
  border-radius: 12px;
  background: linear-gradient(180deg, var(--sw-panel) 0%, var(--sw-panel-2) 100%);
  padding: clamp(1.5rem, 4vw, 2.4rem);
}
.cm-form [hidden] { display: none !important; }
.cm-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.cm-head h2 {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 3.5vw, 1.5rem);
  font-weight: 700; text-transform: uppercase; letter-spacing: 1px; line-height: 1.15;
}
.cm-x {
  flex: 0 0 auto;
  background: none; border: none; cursor: pointer;
  color: var(--sw-muted); font-size: 1.7rem; line-height: 1;
  padding: 0 0.2rem; margin: -0.2rem -0.2rem 0 0;
}
.cm-x:hover { color: var(--sw-text); }
.cm-x:focus-visible { outline: 2px solid var(--sw-teal); outline-offset: 2px; border-radius: 4px; }
.cm-intro {
  color: var(--sw-muted); font-weight: 300; font-size: 0.9rem;
  margin: 0.4rem 0 1.3rem;
}
.cm-bug { display: flex; flex-direction: column; gap: 1rem; }
.cm-actions {
  display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.5rem;
}
.cm-actions .btn { cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  dialog.cm[open] { animation: none; }
}