/* ============================================================
   Disconnect — site design system (landing + guides)
   Legal pages (privacy/terms/support) keep the old styles.css.
   ============================================================ */

:root {
  color-scheme: dark;
  --ink: #0c0907;
  --surface: #17110e;
  --card: #1e1713;
  --line: rgba(243, 237, 232, 0.09);
  --ember: #fe8162;
  --ember-hot: #ff9a80;
  --rust: #77351f;
  --bone: #f3ede8;
  --smoke: #a79d96;
  --max: 1120px;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", "Segoe UI", Roboto, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", Roboto, sans-serif;
  --font-mono: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

html, body { overflow-x: clip; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

img { max-width: 100%; height: auto; }

::selection { background: var(--ember); color: var(--ink); }

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}

/* ---------- type ---------- */

h1, h2, h3 {
  font-family: var(--font-display);
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(2.6rem, 6vw, 4.4rem); font-weight: 700; }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); font-weight: 700; }
h3 { font-size: 1.18rem; font-weight: 600; line-height: 1.3; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ember);
  margin: 0 0 18px;
}

.lede {
  font-size: 1.13rem;
  color: var(--smoke);
  max-width: 58ch;
}

.mono { font-family: var(--font-mono); }

/* ---------- header (original topbar, plus nav links) ---------- */

header {
  position: relative;
  z-index: 10;
}

.topbar-shell {
  display: flex;
  justify-content: center;
  padding: 0;
}

.topbar {
  width: 100%;
  max-width: var(--max);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 0 12px;
}

.topbar-head {
  display: flex;
  align-items: center;
}

.topbar-brand {
  display: inline-flex;
  align-items: center;
  margin-left: -20px;
}

.topbar-brand-icon {
  height: 120px;
  width: auto;
  object-fit: contain;
  display: block;
}

.topbar-nav { display: flex; gap: 26px; font-size: 0.95rem; font-weight: 500; }

.topbar-nav a { color: var(--smoke); transition: color 0.15s ease; }

.topbar-nav a:hover, .topbar-nav a:focus-visible { color: var(--bone); }

.topbar-right { display: flex; align-items: center; gap: 16px; }

.topbar-cta {
  background: #ffffff;
  color: #0d1115;
  padding: 10px 18px;
  border-radius: 999px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.24);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.topbar-cta:hover,
.topbar-cta:focus-visible {
  transform: scale(1.08);
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.32);
}

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

/* ---------- hero ---------- */

.hero { position: relative; overflow: clip; }

.hero .wrap {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: 64px;
  align-items: center;
  padding-top: 84px;
  padding-bottom: 110px;
}

.hero-copy p.lede { margin: 22px 0 32px; }

.hero-actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }

.appstore-badge { height: 52px; display: block; }

.badge-link {
  display: inline-block;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.badge-link:hover, .badge-link:focus-visible { transform: scale(1.1); }

@media (prefers-reduced-motion: no-preference) {
  .badge-link:hover .appstore-badge,
  .badge-link:focus-visible .appstore-badge {
    animation: subtleBounce 0.8s ease-in-out infinite;
  }
}

@keyframes subtleBounce {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-2deg); }
  75% { transform: rotate(2deg); }
}

.hero-proof {
  margin-top: 26px;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--smoke);
}

.hero-proof strong { color: var(--ember); font-weight: 500; }

/* hero images: original three-phone fan with per-phone hover shuffle */
.hero-images {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 580px;
  margin-top: 20px;
  isolation: isolate;
  width: 100%;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

.hero-images::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, var(--ember) 0%, transparent 70%);
  opacity: 0.15;
  z-index: -1;
  border-radius: 50%;
  filter: blur(60px);
}

.hero-images img {
  width: 100%;
  max-width: 260px;
  height: auto;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
  cursor: pointer;
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.5));
}

.hero-img-wrapper {
  position: absolute;
  padding: 80px; /* large padding to prevent hover flicker */
  margin: -80px;
  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-img-wrapper-left {
  z-index: 1;
  transform: translateX(-180px) translateY(30px) rotate(-15deg);
}

.hero-img-wrapper-center {
  z-index: 2;
  transform: translateX(0) translateY(0) rotate(0deg);
}

.hero-img-wrapper-right {
  z-index: 3;
  transform: translateX(180px) translateY(30px) rotate(15deg);
}

/* Hover on left: bring left forward and move towards center, push others right */
.hero-img-wrapper-left:hover {
  z-index: 10;
  transform: translateX(-120px) translateY(-10px) rotate(-5deg) scale(1.05);
}

.hero-img-wrapper-left:hover ~ .hero-img-wrapper-center {
  transform: translateX(15px) translateY(10px) rotate(2deg);
}

.hero-img-wrapper-left:hover ~ .hero-img-wrapper-right {
  transform: translateX(195px) translateY(40px) rotate(17deg);
}

/* Hover on center: bring center forward */
.hero-img-wrapper-center:hover {
  z-index: 10;
  transform: translateX(0) translateY(-30px) rotate(0deg) scale(1.1);
}

/* Hover on right: bring right forward and move towards center, push others left */
.hero-img-wrapper-right:hover {
  z-index: 10;
  transform: translateX(120px) translateY(-10px) rotate(5deg) scale(1.05);
}

.hero-images:has(.hero-img-wrapper-right:hover) .hero-img-wrapper-left {
  transform: translateX(-195px) translateY(40px) rotate(-17deg);
}

.hero-images:has(.hero-img-wrapper-right:hover) .hero-img-wrapper-center {
  transform: translateX(-15px) translateY(10px) rotate(-2deg);
}

/* keep the fan inside its own column so it never covers the headline */
@media (min-width: 1241px) {
  .hero-images { transform: scale(0.9); }
}

@media (min-width: 961px) and (max-width: 1240px) {
  .hero-images { transform: scale(0.75); }
}

/* ---------- sections ---------- */

.section { padding: 96px 0; }

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

.section-head { max-width: 680px; margin-bottom: 52px; }

.section-head p { color: var(--smoke); margin: 16px 0 0; font-size: 1.05rem; }

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

/* ---------- download strip ---------- */

.download-strip {
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.download-strip .wrap {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  padding-top: 40px;
  padding-bottom: 40px;
}

.download-icon { width: 76px; height: 76px; border-radius: 18px; box-shadow: 0 12px 30px rgba(0,0,0,0.45); }

.download-meta { flex: 1; min-width: 240px; }

.download-meta strong { font-family: var(--font-display); font-size: 1.25rem; display: block; }

.download-facts {
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--smoke);
  display: flex;
  gap: 8px 18px;
  flex-wrap: wrap;
}

.download-facts .fact-hot { color: var(--ember); }

/* ---------- scroll-reveal quote (Apple-style) ---------- */

.scrollquote {
  position: relative;
  height: 220vh;
  /* overlap the hero above and the screenshots below with the quote's empty
     top/bottom halves: the text appears sooner after the hero (the hero then
     scrolls away while the text pins, growing the gap), and the screenshots
     sit close to the text once it has fully lit up */
  margin-top: -30vh;
  margin-bottom: -28vh;
}

/* desktop: ease the overlaps so the hero and screenshots keep more distance */
@media (min-width: 961px) {
  .scrollquote { margin-top: -20vh; margin-bottom: -8vh; }
}

.scrollquote-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.scrollquote-text {
  margin: 0;
  max-width: 24ch;
  margin-left: auto;
  margin-right: auto;
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4.8vw, 3.6rem);
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -0.02em;
  text-align: center;
  text-wrap: balance;
  color: var(--bone);
}

/* words start dim only once JS has split them, so no-JS visitors see white text */
/* lit words carry a top-lit vertical gradient inside the glyphs (Apple-style);
   dimming is done with opacity so the shading is identical in both states */
html.js .scrollquote-text .sq-word {
  background: linear-gradient(180deg, #ffffff 0%, #ddd6d0 50%, #8f857d 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  opacity: 0.16;
  transition: opacity 0.35s ease;
}

html.js .scrollquote-text .sq-word.is-lit { opacity: 1; }

/* ---------- screenshots ---------- */

/* all five fit side by side on desktop; horizontal scroll only on small screens */
.shots {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  padding: 8px 0;
}

.shots figure { margin: 0; }

.shots img {
  width: 100%;
  border-radius: 18px;
  border: 1px solid var(--line);
  display: block;
}

@media (max-width: 960px) {
  .shots {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: min(272px, 68vw);
    gap: 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 8px 4px 20px;
    scrollbar-color: var(--rust) transparent;
  }

  .shots figure { scroll-snap-align: start; }
}

/* ---------- how it works ---------- */

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

.step {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 30px 28px;
}

.step-num {
  font-family: var(--font-mono);
  color: var(--ember);
  font-size: 0.85rem;
  display: block;
  margin-bottom: 16px;
}

.step h3 { margin-bottom: 10px; }

.step p { color: var(--smoke); margin: 0; font-size: 0.97rem; }

/* ---------- guides ---------- */

.guide-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 22px; }

.guide-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 26px 24px;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.guide-card:hover, .guide-card:focus-visible { border-color: rgba(254, 129, 98, 0.45); transform: translateY(-3px); }

.guide-card .guide-kicker {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ember);
}

.guide-card p { color: var(--smoke); font-size: 0.93rem; margin: 0; flex: 1; }

.guide-card .guide-more { font-size: 0.88rem; font-weight: 600; color: var(--ember); }

/* ---------- FAQ ---------- */

.faq-list { max-width: 780px; }

.faq-list details {
  border-bottom: 1px solid var(--line);
  padding: 6px 0;
}

.faq-list summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 18px 0;
  font-weight: 600;
  font-size: 1.05rem;
}

.faq-list summary::-webkit-details-marker { display: none; }

.faq-list summary::after {
  content: "+";
  font-family: var(--font-mono);
  color: var(--ember);
  font-size: 1.3rem;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.faq-list details[open] summary::after { transform: rotate(45deg); }

.faq-list .faq-body { padding: 0 0 22px; color: var(--smoke); max-width: 62ch; }

.faq-list .faq-body p { margin: 0 0 10px; }

.faq-list .faq-more { color: var(--ember); font-weight: 600; font-size: 0.92rem; }

/* ---------- CTA (blocked-screen motif) ---------- */

.cta-panel {
  position: relative;
  overflow: clip;
  border: 1px solid var(--line);
  border-radius: 32px;
  background:
    radial-gradient(120% 130% at 50% -20%, rgba(119, 53, 31, 0.75), transparent 60%),
    #120b08;
  text-align: center;
  padding: 88px 28px 72px;
}

.cta-glyph { width: 112px; height: 112px; border-radius: 26px; margin-bottom: 28px; }

.cta-panel .cta-blockline {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--smoke);
  margin: 0 0 14px;
}

.cta-panel .cta-blockline strong { color: var(--ember); font-weight: 500; }

.cta-panel h2 { font-size: clamp(2.2rem, 5vw, 3.4rem); }

.cta-panel .lede { margin: 18px auto 36px; }

.cta-actions { display: flex; justify-content: center; align-items: center; gap: 18px; flex-wrap: wrap; }

/* ---------- footer ---------- */

.site-footer { border-top: 1px solid var(--line); background: var(--surface); }

.site-footer .wrap {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: 40px;
  padding-top: 64px;
  padding-bottom: 40px;
}

.footer-brand img { width: 44px; height: 44px; border-radius: 12px; }

.footer-brand strong { display: block; margin-top: 14px; font-family: var(--font-display); font-size: 1.1rem; }

.footer-brand p { color: var(--smoke); font-size: 0.88rem; margin: 6px 0 0; max-width: 30ch; }

.site-footer h3 {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--smoke);
  margin-bottom: 16px;
}

.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 0.92rem; }

.site-footer ul a { color: var(--bone); opacity: 0.85; }

.site-footer ul a:hover, .site-footer ul a:focus-visible { opacity: 1; color: var(--ember); }

.footer-legal {
  border-top: 1px solid var(--line);
}

.footer-legal .wrap {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 20px 24px;
  font-size: 0.82rem;
  color: var(--smoke);
}

/* ---------- guide article pages ---------- */

.article-head { padding: 72px 0 40px; }

.breadcrumb {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--smoke);
  margin-bottom: 26px;
}

.breadcrumb a { color: var(--smoke); }
.breadcrumb a:hover { color: var(--ember); }
.breadcrumb span[aria-hidden] { margin: 0 8px; color: var(--rust); }

.article-head h1 { font-size: clamp(2.1rem, 4.6vw, 3.2rem); max-width: 20ch; }

.article-head .lede { margin-top: 20px; }

.article-body { max-width: 720px; padding-bottom: 40px; }

.article-body h2 {
  font-size: clamp(1.5rem, 2.6vw, 1.9rem);
  margin: 52px 0 16px;
}

.article-body h3 { margin: 34px 0 10px; }

.article-body p, .article-body li { color: #cfc6bf; }

.article-body ul, .article-body ol { padding-left: 22px; }

.article-body li { margin-bottom: 8px; }

.article-body li::marker { color: var(--ember); }

.article-body strong { color: var(--bone); }

.article-body a { color: var(--ember); text-decoration: underline; text-underline-offset: 3px; }

/* "do it with Disconnect" card inside articles */
.app-steps {
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--ember);
  border-radius: 20px;
  padding: 28px 30px;
  margin: 40px 0;
}

.app-steps .app-steps-kicker {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ember);
  display: block;
  margin-bottom: 8px;
}

.app-steps ol { margin: 12px 0 0; }

.article-cta { padding-bottom: 96px; }

.related { padding: 0 0 96px; }

.related h2 { font-size: 1.5rem; margin-bottom: 24px; }

/* ---------- legal pages (privacy / terms / support) ---------- */

.legal-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 36px 32px;
  margin: 8px 0 96px;
  display: flex;
  flex-direction: column;
  gap: 26px;
  max-width: 820px;
}

.legal-card h2 { font-size: 1.35rem; margin-bottom: 10px; }

.legal-card h3 { font-size: 1.05rem; margin: 14px 0 8px; }

.legal-card p { color: #cfc6bf; margin: 0 0 10px; font-size: 0.97rem; }

.legal-card section + section {
  border-top: 1px solid var(--line);
  padding-top: 24px;
}

.legal-card a, .contact-line { color: var(--ember); }

.legal-card a:hover { color: var(--ember-hot); }

/* support form */
.support-form { display: flex; flex-direction: column; gap: 18px; }

.support-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.support-field { display: flex; flex-direction: column; gap: 8px; }

.support-field label { font-weight: 600; font-size: 0.95rem; color: var(--bone); }

.support-field input,
.support-field textarea {
  width: 100%;
  border-radius: 14px;
  padding: 12px 14px;
  background: rgba(12, 9, 7, 0.65);
  border: 1px solid var(--line);
  color: var(--bone);
  font: inherit;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.support-field textarea { resize: vertical; min-height: 160px; }

.support-field input:focus-visible,
.support-field textarea:focus-visible {
  outline: none;
  border-color: rgba(254, 129, 98, 0.55);
  box-shadow: 0 0 0 4px rgba(254, 129, 98, 0.12);
}

.support-field--full { grid-column: 1 / -1; }

.support-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

.support-submit {
  border: none;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  padding: 12px 24px;
  border-radius: 999px;
  background: var(--ember);
  color: #1a0d08;
  transition: background 0.15s ease, transform 0.15s ease;
}

.support-submit:hover, .support-submit:focus-visible { background: var(--ember-hot); transform: translateY(-1px); }

.support-submit:disabled { opacity: 0.65; cursor: not-allowed; transform: none; }

.support-status {
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(30, 23, 19, 0.55);
}

.support-status.is-success { border-color: rgba(110, 185, 167, 0.5); background: rgba(110, 185, 167, 0.14); }

.support-status.is-error { border-color: rgba(254, 129, 98, 0.55); background: rgba(254, 129, 98, 0.12); }

.subtle-text { color: var(--smoke); }

@media (max-width: 720px) {
  .support-form-grid { grid-template-columns: 1fr; }
  .support-field--full { grid-column: auto; }
  .legal-card { padding: 28px 22px; }
}

/* ---------- reveal motion ---------- */

@media (prefers-reduced-motion: no-preference) {
  /* hidden state only applies once JS has tagged <html class="js">,
     so content is never trapped invisible without scripting */
  html.js .reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.7s ease, transform 0.7s ease;
  }
  html.js .reveal.is-in { opacity: 1; transform: none; }
  .hero-copy > * { animation: rise 0.8s ease both; }
  .hero-copy > *:nth-child(2) { animation-delay: 0.08s; }
  .hero-copy > *:nth-child(3) { animation-delay: 0.16s; }
  .hero-copy > *:nth-child(4) { animation-delay: 0.24s; }
  .hero-copy > *:nth-child(5) { animation-delay: 0.3s; }
  /* opacity-only: a transform keyframe with fill "both" would permanently
     override the responsive scale() on .hero-images */
  .hero-images { animation: fadeIn 0.9s 0.2s ease both; }
  @keyframes rise {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: none; }
  }
  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }
}

/* ---------- cookie consent banner (markup injected by cookie-consent.js) ---------- */

.cookie-consent-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: var(--surface);
  border-top: 1px solid var(--line);
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.4);
  opacity: 0;
  transform: translateY(100%);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.cookie-consent-banner.cookie-banner-visible { opacity: 1; transform: translateY(0); }

.cookie-consent-banner.cookie-banner-hidden { opacity: 0; transform: translateY(100%); }

.cookie-consent-content {
  max-width: var(--max);
  margin: 0 auto;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.cookie-consent-text { flex: 1; min-width: 280px; }

.cookie-consent-text strong { display: block; font-size: 1rem; margin-bottom: 6px; }

.cookie-consent-text p { margin: 0; font-size: 0.9rem; color: var(--smoke); line-height: 1.5; }

.cookie-consent-link { color: var(--ember); text-decoration: underline; text-underline-offset: 2px; }

.cookie-consent-buttons { display: flex; gap: 12px; flex-shrink: 0; }

.cookie-btn {
  padding: 10px 20px;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: background 0.2s ease, transform 0.1s ease;
  font-family: inherit;
}

.cookie-btn:active { transform: scale(0.97); }

.cookie-btn-accept { background: var(--ember); color: #1a0d08; }

.cookie-btn-accept:hover { background: var(--ember-hot); }

.cookie-btn-decline {
  background: var(--card);
  color: var(--smoke);
  border: 1px solid var(--line);
}

.cookie-btn-decline:hover { background: rgba(255, 255, 255, 0.08); color: var(--bone); }

@media (max-width: 600px) {
  .cookie-consent-content { flex-direction: column; text-align: center; padding: 20px 16px; }
  .cookie-consent-buttons { width: 100%; justify-content: center; }
  .cookie-btn { flex: 1; max-width: 140px; }
}

/* ---------- responsive ---------- */

@media (max-width: 960px) {
  .hero .wrap { grid-template-columns: 1fr; padding-top: 56px; padding-bottom: 80px; }
  .hero-copy {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .hero-copy .lede { max-width: 60ch; }
  .hero-actions { justify-content: center; }
  .hero-images { transform: scale(0.85); height: 500px; }
  .steps { grid-template-columns: 1fr; }
  .site-footer .wrap { grid-template-columns: 1fr 1fr; }
  .topbar-nav { display: none; }
}

@media (max-width: 640px) {
  .topbar-brand-icon { height: 96px; }
  .topbar-cta { padding: 8px 14px; font-size: 0.9rem; }
  .hero-images { height: 400px; margin-top: 40px; transform: scale(0.65); }

  .hero-img-wrapper-left { transform: translateX(-120px) translateY(20px) rotate(-15deg); }
  .hero-img-wrapper-right { transform: translateX(120px) translateY(20px) rotate(15deg); }

  .hero-img-wrapper-left:hover { transform: translateX(-80px) translateY(-5px) rotate(-5deg) scale(1.05); }
  .hero-img-wrapper-left:hover ~ .hero-img-wrapper-center { transform: translateX(10px) translateY(5px) rotate(2deg); }
  .hero-img-wrapper-left:hover ~ .hero-img-wrapper-right { transform: translateX(130px) translateY(30px) rotate(17deg); }
  .hero-img-wrapper-center:hover { transform: translateX(0) translateY(-20px) rotate(0deg) scale(1.1); }
  .hero-img-wrapper-right:hover { transform: translateX(80px) translateY(-5px) rotate(5deg) scale(1.05); }
  .hero-images:has(.hero-img-wrapper-right:hover) .hero-img-wrapper-left { transform: translateX(-130px) translateY(30px) rotate(-17deg); }
  .hero-images:has(.hero-img-wrapper-right:hover) .hero-img-wrapper-center { transform: translateX(-10px) translateY(5px) rotate(-2deg); }
  .section { padding: 72px 0; }
  .site-footer .wrap { grid-template-columns: 1fr; gap: 32px; }
  .cta-panel { padding: 64px 20px 56px; }

  /* center text and titles on phones */
  .section-head { margin-left: auto; margin-right: auto; text-align: center; }
  .related h2 { text-align: center; }
  .step { text-align: center; }
  .guide-card { text-align: center; align-items: center; }
  .faq-list { margin-left: auto; margin-right: auto; }
  .faq-list summary { text-align: center; justify-content: center; }
  .faq-list .faq-body { text-align: center; margin-left: auto; margin-right: auto; }
  .article-head { text-align: center; }
  .article-head h1, .article-head .lede { margin-left: auto; margin-right: auto; }
  .article-body h2, .article-body h3 { text-align: center; }
  .footer-brand { text-align: center; }
  .footer-brand p { margin-left: auto; margin-right: auto; }
  .site-footer nav { text-align: center; }
  .footer-legal .wrap { justify-content: center; text-align: center; }
}