/* Educational / marketing sections below the workspace (plan §35–§41):
 * Understanding Metadata, Categories, Privacy Architecture, Benefits,
 * How It Works, Cleaning Mode Comparison, FAQ, Final CTA, Footer — plus the
 * sections added in the Midnight Indigo design migration: Compare, Use
 * Cases, AI Metadata, Blog.
 */

/* -- Section background variants (design migration) ----------------------- */

.section--soft {
  background: var(--section-1);
}
.section--neutral {
  background: var(--section-2);
}
.section--violet {
  background: radial-gradient(circle at 10% 5%, rgba(111, 124, 255, 0.1), transparent 34%),
    linear-gradient(180deg, var(--section-3), var(--bg));
}
.section--privacy {
  background: radial-gradient(circle at 82% 35%, rgba(43, 215, 164, 0.13), transparent 32%),
    linear-gradient(180deg, var(--section-4), var(--bg));
}
.section--dark {
  background: var(--section-5);
}

.eyebrow {
  margin-bottom: 12px;
  color: var(--accent2);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.eyebrow.success {
  color: var(--ok);
}

.two-col {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  align-items: center;
  gap: 74px;
}

/* -- Understanding Metadata (§35.1) --------------------------------------- */
/* Layout grid moved to the shared `.two-col` rule above (design migration) —
   this section and #ai-metadata both use it now instead of a bespoke class. */

.metadata-education__copy {
  font-size: var(--text-base);
  color: var(--t3);
  line-height: 1.7;
  margin: var(--space-4) 0 var(--space-5);
}

/* Matches the reference's .visual-card/.metadata-head/.sample-thumb/
   .metadata-list/.metadata-row exactly (renamed from this app's older
   .example-card/.example-row set during the design migration — these two
   cards are the only place that pattern is used, so there was no other
   caller to preserve). */
.visual-card {
  border: 1px solid var(--brd2);
  border-radius: var(--radius-xl);
  padding: 24px;
  background: linear-gradient(180deg, var(--surf), color-mix(in srgb, var(--surf) 72%, var(--bg)));
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.18);
}

.visual-card__disclaimer {
  font-size: var(--text-xs);
  color: var(--t4);
  margin-top: var(--space-3);
  font-style: italic;
}

.metadata-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}

.sample-thumb {
  width: 64px;
  height: 64px;
  border-radius: 13px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent) 33%, var(--brd2));
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.17);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--surf2), var(--surf3));
}

/* The illustration fills the rounded thumb edge to edge (the gradient above
   only shows through if it ever fails to render). */
.sample-thumb svg {
  width: 100%;
  height: 100%;
  display: block;
}

.metadata-list {
  display: grid;
  gap: 9px;
}

.metadata-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  padding: 11px 12px;
  border: 1px solid var(--brd2);
  border-radius: 11px;
  background: color-mix(in srgb, var(--bg) 65%, transparent);
  font-size: 0.79rem;
}

.metadata-row span {
  color: var(--t3);
}

.metadata-row strong {
  color: var(--text);
}

.metadata-row .present {
  color: var(--err);
}

.metadata-row .camera {
  color: var(--warn);
}

/* -- Card grids (Categories §35.2, Benefits §37) -------------------------- */

.card-grid {
  display: grid;
  /* 4 columns matching the design reference exactly (the "What We Remove"
     8-card grid) — .why-grid overrides to 3 for the 6-card "Why
     AIMetaClean" section right below. Found via live visual comparison
     against the reference: this was still the pre-migration 3-column
     value. */
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.why-grid {
  grid-template-columns: repeat(3, 1fr);
}

.info-card {
  position: relative;
  min-height: 205px;
  padding: 23px;
  border: 1px solid var(--brd);
  border-radius: 19px;
  background: color-mix(in srgb, var(--surf) 88%, transparent);
  overflow: hidden;
  transition: 0.22s var(--ease);
}

.info-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.13);
}

.info-card__icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 17px;
  color: var(--accent2);
  background: var(--accent-a);
  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
}

.info-card__icon svg {
  width: 22px;
  height: 22px;
}

.info-card__desc {
  font-size: 0.86rem;
  margin: 14px 0 0;
}

/* -- Privacy architecture (§36) -------------------------------------------- */
/* Horizontal flow (3 nodes + connecting arrows) matching the design
   reference's privacy-flow component — stacks vertically on narrow
   viewports via the media query below. */

.flow-diagram {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  max-width: 920px;
  margin: 42px auto 0;
}

/* All three nodes share the same green-tinted treatment (matching the
   design reference exactly — a uniform "everything in this flow stays
   local and verified" visual, not a per-step color progression). */
.flow-step {
  padding: 22px 20px;
  border: 1px solid color-mix(in srgb, var(--ok) 24%, var(--brd2));
  border-radius: var(--radius-md);
  background: var(--ok-a);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text);
  text-align: center;
  width: 100%;
}

.flow-step svg {
  color: var(--ok);
  margin: 0 auto 10px;
}

.flow-arrow {
  color: var(--brd2);
}

/* -- How It Works (§38) ---------------------------------------------------- */

.steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}

.step {
  text-align: center;
}

.step__number {
  width: 48px;
  height: 48px;
  margin: 0 auto 14px;
  border-radius: var(--radius-md);
  background: var(--accent-a);
  border: 1px solid var(--brd2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-md);
  font-weight: 800;
  color: var(--accent);
}

.step__number--done {
  background: color-mix(in srgb, var(--ok) 10%, transparent);
  border-color: color-mix(in srgb, var(--ok) 15%, transparent);
  color: var(--ok);
}

.step__title {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}

.step__desc {
  font-size: var(--text-sm);
  color: var(--t3);
  line-height: 1.5;
}

/* -- Cleaning mode comparison (§39) ----------------------------------------- */

.mode-compare {
  /* No max-width — the reference's .mode-compare has none either
     (display:grid;grid-template-columns:1fr 1fr;gap:18px), so the panel
     pair fills the full .container width like every other section's
     content, rather than a narrower centered block. */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.mode-compare__card {
  background: var(--surf);
  border: 1px solid var(--brd2);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  position: relative;
}

.mode-compare__card--recommended {
  border: 2px solid var(--accent);
}

.mode-compare__title {
  font-family: var(--font-heading);
  font-size: 1.85rem;
  font-weight: 800;
  color: var(--text);
  margin: 6px 0 var(--space-3);
}

.mode-compare__desc {
  font-size: var(--text-sm);
  color: var(--t3);
  line-height: 1.6;
  margin-bottom: var(--space-4);
}

.mode-compare__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.mode-compare__list li {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-sm);
  color: var(--t2);
}

/* -- Compare / Use Cases (design migration) -------------------------------- */

.use-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}

.use-card {
  padding: 25px;
  border: 1px solid var(--brd);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surf) 86%, transparent);
  transition: var(--transition-base);
}
.use-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.13);
}

.use-icon {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 19px;
  border: 1px solid color-mix(in srgb, var(--brd) 80%, transparent);
  background: color-mix(in srgb, var(--surf2) 86%, transparent);
}

.use-card h3 {
  font-size: var(--text-base);
  color: var(--text);
  margin-bottom: 4px;
}
.use-card p {
  font-size: 0.86rem;
  margin: 13px 0 0;
  color: var(--t3);
  line-height: 1.6;
}

.use-card.photo .use-icon {
  background: color-mix(in srgb, var(--warn) 10%, transparent);
}
.use-card.agency .use-icon {
  background: color-mix(in srgb, var(--agency) 12%, transparent);
}
.use-card.marketing .use-icon {
  background: color-mix(in srgb, var(--orange) 10%, transparent);
}
.use-card.privacy .use-icon {
  background: var(--ok-a);
}
.use-card.creator .use-icon {
  background: var(--accent-a);
}

.use-card.social .use-icon {
  background: linear-gradient(135deg, rgba(251, 80, 131, 0.14), rgba(111, 124, 255, 0.14));
  width: 62px;
  height: 62px;
  padding: 8px;
}
.social-icon-grid {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 5px;
}
.social-icon-grid .platform {
  min-width: 0;
  min-height: 0;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.social-icon-grid svg {
  width: 15px;
  height: 15px;
}
.platform-instagram {
  background: radial-gradient(
    circle at 30% 105%,
    #feda75 0 22%,
    #fa7e1e 36%,
    #d62976 62%,
    #962fbf 78%,
    #4f5bd5 100%
  );
}
.platform-facebook {
  background: #1877f2;
}
.platform-youtube {
  background: #ff0033;
}
.platform-tiktok {
  background: #111318;
}

.feature-list {
  list-style: none;
  padding: 0;
  margin: 22px 0 0;
  display: grid;
  gap: 10px;
}
.feature-list li {
  color: var(--t2);
  font-size: 0.86rem;
}
.feature-list li::before {
  content: '✓';
  color: var(--ok);
  font-weight: 900;
  margin-right: 8px;
}

.compare-foot {
  margin-top: 22px;
  text-align: center;
  color: var(--t2);
  max-width: 900px;
  margin-inline: auto;
  font-size: 0.9rem;
}

/* -- How It Works process shell (design migration) ------------------------- */

.process-shell {
  position: relative;
  margin-top: 54px;
}

.process-line {
  position: absolute;
  left: 9%;
  right: 9%;
  top: 44px;
  height: 2px;
  background: var(--brd);
  overflow: hidden;
}
.process-line span {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent2), var(--ok));
  transition: width 1.2s var(--ease);
}
.process-shell.active .process-line span {
  width: 100%;
}

.process-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.process-step {
  text-align: center;
  opacity: 0.4;
  transform: translateY(14px);
  transition: 0.55s var(--ease);
}
.process-shell.active .process-step {
  opacity: 1;
  transform: none;
}
.process-shell.active .process-step:nth-child(2) {
  transition-delay: 0.18s;
}
.process-shell.active .process-step:nth-child(3) {
  transition-delay: 0.36s;
}
.process-shell.active .process-step:nth-child(4) {
  transition-delay: 0.54s;
}

.process-orb {
  width: 82px;
  height: 82px;
  border-radius: 22px;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--brd));
  background: linear-gradient(180deg, var(--surf2), var(--surf));
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.14);
  position: relative;
  z-index: 2;
  color: var(--accent2);
}
.process-step:last-child .process-orb {
  border-color: color-mix(in srgb, var(--ok) 28%, var(--brd));
  background: linear-gradient(180deg, color-mix(in srgb, var(--ok) 8%, var(--surf)), var(--surf));
  color: var(--ok);
}

.process-number {
  position: absolute;
  top: -10px;
  left: -10px;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surf2);
  border: 1px solid var(--brd);
  color: var(--accent2);
  font-weight: 800;
  font-size: 0.72rem;
}
.process-step:last-child .process-number {
  color: var(--ok);
}

.process-step h3 {
  font-size: var(--text-base);
  color: var(--text);
  margin-bottom: 4px;
}
.process-step p {
  font-size: 0.85rem;
  max-width: 220px;
  margin: 10px auto 0;
  color: var(--t3);
  line-height: 1.5;
}

/* Small decorative mini-preview under each step (upload tiles / scan bar /
   verify checkmark / download progress bars), per-step visual variety
   matching the design reference. */
.process-mini {
  margin: 17px auto 0;
  max-width: 190px;
  height: 64px;
  border: 1px solid var(--brd);
  border-radius: 13px;
  background: color-mix(in srgb, var(--surf) 75%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.process-mini span {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: var(--accent-a);
  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
}
.process-mini.scan span:nth-child(2) {
  width: 74px;
  background: color-mix(in srgb, var(--surf2) 88%, transparent);
}
.process-mini.verify {
  gap: 10px;
}
.process-mini.verify b {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ok-a);
  color: var(--ok);
  font-weight: 800;
}
.process-mini.download {
  flex-direction: column;
  gap: 7px;
}
.process-mini.download i {
  width: 90px;
  height: 7px;
  border-radius: 99px;
  background: var(--brd);
  font-style: normal;
}
.process-mini.download i:first-child {
  background: linear-gradient(90deg, var(--accent), var(--ok));
}

@media (max-width: 1080px) {
  .use-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .process-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 36px 22px;
  }
  .process-line {
    display: none;
  }
}

@media (max-width: 620px) {
  .use-grid {
    grid-template-columns: 1fr;
  }
  .process-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}

/* -- Blog (design migration) ------------------------------------------------ */

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

.blog-card {
  border: 1px solid var(--brd);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surf);
  transition: var(--transition-base);
}
.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.14);
}

.blog-thumb {
  height: 190px;
  background: linear-gradient(135deg, rgba(111, 124, 255, 0.28), rgba(43, 215, 164, 0.14)),
    radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.12), transparent 22%), var(--surf2);
  position: relative;
  overflow: hidden;
}

/* Sheen that sweeps across the thumbnail on card hover (the reference's
   signature blog-card hover, on top of the shared lift + shadow). Parked
   off the left edge with no transition, so it only animates on the way
   across and snaps back invisibly when the pointer leaves. */
.blog-thumb::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.08) 28%, transparent 56%);
  transform: translateX(-100%);
  pointer-events: none;
}

.blog-card:hover .blog-thumb::before {
  transform: translateX(140%);
  transition: 1.2s var(--ease);
}

.blog-thumb svg {
  position: absolute;
  right: 14px;
  bottom: 12px;
  width: 84px;
  height: 84px;
  color: rgba(255, 255, 255, 0.18);
}

@media (prefers-reduced-motion: reduce) {
  .blog-card:hover .blog-thumb::before {
    transition: none;
  }
}

.blog-badge {
  position: absolute;
  left: 16px;
  top: 16px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(7, 10, 18, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.7rem;
  font-weight: 800;
  color: #fff;
  backdrop-filter: blur(8px);
}

.blog-content {
  padding: 19px;
}
.blog-meta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  color: var(--t3);
  font-size: 0.74rem;
  margin-bottom: 8px;
}
.blog-content h3 {
  font-size: 1rem;
  color: var(--text);
  line-height: 1.3;
}
.blog-content p {
  font-size: 0.86rem;
  margin: 10px 0 15px;
  color: var(--t3);
  line-height: 1.6;
  /* Capped at two lines so every card's "Coming soon" link sits on the same
     baseline regardless of blurb length. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--accent2);
  font-weight: 700;
  font-size: 0.87rem;
}
/* These blog posts aren't published yet — a plain, non-interactive label
   rather than a link to a page that doesn't exist (see the index.html
   comment above the Blog section for the exact URLs still needed). */
.text-link--soon {
  color: var(--t4);
  cursor: default;
}

@media (max-width: 1080px) {
  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 620px) {
  .blog-grid {
    grid-template-columns: 1fr;
  }
}

/* -- FAQ (§40) -------------------------------------------------------------- */

/* Matches the reference's `.faq-list` + `details`/`summary` metrics exactly.
   The accordion stays a button + aria-expanded/aria-controls component (see
   faq.js) rather than native <details> — only the visual metrics are aligned,
   so the accessible semantics and the JS contract are untouched. The 900px
   cap lives here rather than on a narrower .container, matching the
   reference (the FAQ column is wider than a .container--narrow 800px). */
.faq-list {
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  gap: 10px;
}

.faq-item {
  border: 1px solid var(--brd);
  border-radius: 15px;
  background: var(--surf);
  padding: 0 18px;
  overflow: hidden;
}

.faq-item__question {
  width: 100%;
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: none;
  text-align: left;
  gap: 18px;
}

.faq-item__question-text {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
}

.faq-item__icon {
  font-size: 1.2rem;
  color: var(--t3);
  flex-shrink: 0;
  transition: transform var(--transition-fast);
  line-height: 1;
}

.faq-item__answer {
  padding: 0 0 18px;
}

.faq-item__answer p {
  font-size: 0.9rem;
  color: var(--t2);
  line-height: 1.6;
  margin: 0;
}

/* -- Final CTA (§41) --------------------------------------------------------- */

/* The CTA band carries its own glow background and corner sparkle in the
   reference; it is not a plain .section, and its heading is a bare <h2> so it
   picks up the shared display scale rather than a smaller local override. */
.final-cta {
  position: relative;
  padding: 98px 0;
  text-align: center;
  overflow: hidden;
  background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 48%),
    radial-gradient(circle at 74% 36%, color-mix(in srgb, var(--ok) 7%, transparent), transparent 24%), var(--bg);
}

.final-cta::after {
  content: '\2726';
  position: absolute;
  right: 11%;
  top: 24%;
  color: var(--ok);
  font-size: 1.5rem;
  opacity: 0.58;
  filter: drop-shadow(0 0 18px color-mix(in srgb, var(--ok) 32%, transparent));
  pointer-events: none;
}

/* The global `*` reset zeroes paragraph margins, so the reference's default
   1em block spacing between the CTA heading, copy and button is restated. */
.final-cta p {
  margin: 16px 0;
}

/* -- Footer (premium redesign, design migration) --------------------------- */

.site-footer {
  position: relative;
  padding: 78px 0 28px;
  border-top: 1px solid color-mix(in srgb, var(--accent) 18%, var(--brd));
  background: radial-gradient(circle at 14% 22%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 26%),
    radial-gradient(circle at 88% 18%, color-mix(in srgb, var(--ok) 5%, transparent), transparent 24%),
    linear-gradient(180deg, color-mix(in srgb, var(--surf) 46%, var(--bg)), var(--bg));
}
.site-footer::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  width: min(980px, 70vw);
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.48;
}

.footer-top {
  display: grid;
  grid-template-columns: 1.45fr 0.8fr 0.85fr 1.05fr;
  gap: 34px;
  align-items: start;
}

.footer-brand p {
  max-width: 390px;
  font-size: 0.92rem;
  line-height: 1.72;
  color: var(--t3);
  margin-top: 10px;
}

.footer-card {
  position: relative;
  margin-top: 20px;
  padding: 17px 18px;
  border: 1px solid var(--brd);
  border-radius: var(--radius-lg);
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--accent) 6%, var(--surf)),
    color-mix(in srgb, var(--surf) 94%, transparent)
  );
}
.footer-card strong {
  font-size: 0.91rem;
  color: var(--text);
}
.footer-card small {
  line-height: 1.7;
}

/* Column headings use the brand accent rather than the reference's dim
   --text-3: requested explicitly for legibility, and it matches the
   .eyebrow treatment used for section labels elsewhere on the page. */
.site-footer__group-title {
  font-size: var(--text-xs);
  font-weight: 800;
  color: var(--accent2);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  margin-bottom: 15px;
}

.site-footer__links {
  display: grid;
  gap: 10px;
}

.site-footer__links a {
  font-size: 0.91rem;
  color: var(--t2);
  transition: var(--transition-base);
}

.site-footer__links a:hover {
  color: var(--text);
  transform: translateX(3px);
  display: inline-block;
}

.footer-connect {
  display: grid;
  gap: 14px;
}

.footer-connect__email {
  display: inline-flex;
  align-items: flex-start;
  gap: 9px;
  color: var(--t2);
  font-size: 0.91rem;
  line-height: 1.45;
  word-break: break-word;
  transition: var(--transition-base);
}
.footer-connect__email:hover {
  color: var(--text);
}
.footer-connect__email svg {
  margin-top: 2px;
  color: var(--accent2);
  flex: 0 0 auto;
}

.footer-connect__note {
  margin: 0;
  color: var(--t4);
  font-size: 0.8rem;
  line-height: 1.55;
}

/* Footer brand lockup — the footer mark is the large lockup variant in the
   reference (50px symbol + 1.22rem wordmark + tagline), not a shrunken copy
   of the 38px header mark. */
.site-footer .logo__mark {
  width: 50px;
  height: 50px;
}

.site-footer .logo__word {
  font-size: 1.22rem;
}

.site-footer__brand-tagline {
  display: block;
  margin-top: 6px;
  color: var(--t2);
  font-family: var(--font-body);
  font-size: 0.58rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  white-space: nowrap;
}

.footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 2px;
}

/* Rendered as non-interactive placeholders, not links: the accounts don't
   exist yet, and this app forbids bare "#" hrefs in the footer (enforced by
   two e2e tests). Same "Coming soon" idiom the blog cards use. Swap these
   spans for <a href="..."> once the real profiles exist — the styling below
   already covers both. */
.footer-social a,
.footer-social__soon {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  border: 1px solid var(--brd);
  background: transparent;
  color: var(--t2);
  transition: transform var(--transition-base), border-color var(--transition-base),
    background var(--transition-base), color var(--transition-base), box-shadow var(--transition-base);
}

.footer-social svg {
  width: 19px;
  height: 19px;
}

.footer-social a:hover {
  transform: translateY(-3px);
}

/* Placeholders keep the resting treatment only — no hover lift or brand
   fill, so they never read as clickable. */
.footer-social__soon {
  cursor: default;
  opacity: 0.72;
}

/* Each platform lights up in its own brand color on hover. */
.footer-social a.instagram:hover {
  border-color: transparent;
  color: #fff;
  background: radial-gradient(circle at 30% 105%, #feda75 0 20%, #fa7e1e 34%, #d62976 60%, #962fbf 78%, #4f5bd5 100%);
  box-shadow: 0 12px 30px rgba(214, 41, 118, 0.22);
}

.footer-social a.x:hover {
  border-color: #000;
  color: #fff;
  background: #000;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
}

.footer-social a.github:hover {
  border-color: #181717;
  color: #fff;
  background: #181717;
  box-shadow: 0 12px 30px rgba(24, 23, 23, 0.22);
}

.footer-bottom {
  margin-top: 38px;
  padding-top: 23px;
  border-top: 1px solid var(--brd);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  color: var(--t4);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  flex-wrap: wrap;
}

.footer-built {
  text-transform: none;
  letter-spacing: 0;
  color: var(--t2);
  font-size: 0.82rem;
}
.footer-built__heart {
  color: #ff6078;
}
.footer-built a {
  color: var(--text);
  font-weight: 750;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  transition: var(--transition-base);
}
.footer-built a:hover {
  color: var(--accent2);
  border-color: var(--accent2);
}

@media (max-width: 1080px) {
  .footer-top {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
  }
}
@media (max-width: 620px) {
  .footer-top {
    grid-template-columns: 1fr;
  }
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

/* -- Responsive: sections -------------------------------------------------- */

@media (max-width: 1080px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .steps-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5);
  }
}

@media (max-width: 820px) {
  /* Slightly smaller footer lockup on narrow viewports, matching the
     reference's own footer-brand breakpoint. */
  .site-footer .logo__mark {
    width: 46px;
    height: 46px;
  }

  .site-footer .logo__word {
    font-size: 1.12rem;
  }

  .site-footer__brand-tagline {
    font-size: 0.54rem;
    letter-spacing: 0.11em;
  }
}

/* ---------------------------------------------------------------- mobile
   Touch ergonomics and a readable floor.

   Measured on the real page at 360/390/430px rather than guessed: footer
   links rendered 23px tall with no padding and the email link 21px, all well
   under a comfortable touch target, and the footer tagline had shrunk to
   8.6px. Everything here is scoped to pointer-coarse or narrow widths, so the
   desktop composition is untouched. */
@media (max-width: 768px) {
  /* A tappable row, not just a line of text. The padding is what makes the
     target; the negative margin keeps the visual rhythm unchanged. */
  .site-footer__links {
    gap: 2px;
  }

  .site-footer__links a {
    display: block;
    padding: 11px 0;
    font-size: 0.95rem;
  }

  /* The hover nudge is a pointer affordance and reads as a jitter on touch. */
  .site-footer__links a:hover {
    transform: none;
  }

  .footer-connect__email {
    padding: 10px 0;
  }

  /* 8.6px is not a readable size on a phone. */
  .site-footer__brand-tagline {
    font-size: 0.68rem;
  }

  .site-footer__group-title {
    font-size: 0.8rem;
  }
}

@media (max-width: 768px) {
  .two-col,
  .mode-compare {
    grid-template-columns: 1fr;
  }

  .flow-diagram {
    grid-template-columns: 1fr;
  }
  .flow-arrow {
    transform: rotate(90deg);
    justify-self: center;
  }
}

@media (max-width: 480px) {
  .card-grid {
    grid-template-columns: 1fr;
  }

  /* Explicit requirement: 2 cards per row (not 1) on mobile for the "Why
     AIMetaClean" privacy/control/verified-workflow section — must come
     after the generic .card-grid rule above to win (equal specificity,
     source order decides). */
  .why-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
  }
  .why-grid .info-card {
    padding: var(--space-3);
  }

  .steps-grid {
    grid-template-columns: 1fr;
  }
}