/* ============================================================
   CaptionYourPhoto — site + editor styling
   Palette pulled from the CaptionYourPhoto logo: concentric rings
   of orange / gold / blue / cyan / purple on a speech bubble.
   ============================================================ */

:root {
  --orange:     #F47A20;
  --orange-600: #d9650f;
  --orange-700: #b5520c;
  --gold:       #FBB615;
  --blue:       #2F73E0;
  --blue-700:   #1f56b0;
  --cyan:       #18B6D9;
  --purple:     #7A4FE0;

  --ink-900: #14213D;
  --ink-700: #27354f;
  --ink-500: #566179;
  --ink-300: #9aa3b5;
  --ink-100: #e7eaf1;
  --paper:   #ffffff;
  --wash:    #f4f7fe;      /* light tint for alt sections */

  --grad-hero: linear-gradient(135deg, #7A4FE0 0%, #2F73E0 30%, #18B6D9 52%, #FBB615 80%, #F47A20 100%);
  --grad-cta:  linear-gradient(135deg, #F47A20 0%, #FBB615 100%);

  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  --shadow-sm: 0 2px 6px rgba(20, 33, 61, 0.06);
  --shadow-md: 0 12px 30px rgba(20, 33, 61, 0.10);
  --shadow-lg: 0 24px 60px rgba(20, 33, 61, 0.18);

  --font-display: "Space Grotesk", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body:    "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  --container: 1180px;

  /* The sticky header's height, as a token because two rules have to agree on it: the header
     itself, and the anchor offset that stops in-page links landing underneath it. */
  --nav-h: 72px;
  --nav-border: 1px;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* Anchors scroll the target to y=0, where the sticky header is already drawn, so without this
   #download put the store buttons completely behind it - the header is 73px and the buttons are
   about 55px, so the whole row including its badges disappeared and the page read as having
   scrolled past them. The extra 24px is breathing room so the target does not sit flush under
   the header's edge. */
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + var(--nav-border) + 24px);
}
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-700);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: var(--blue-700); text-decoration: none; transition: color .2s; }
a:hover { color: var(--orange-600); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink-900);
  line-height: 1.15;
  margin: 0 0 .5em;
  letter-spacing: -0.01em;
}
h1 { font-size: clamp(2.2rem, 5vw, 3.8rem); font-weight: 700; }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); font-weight: 700; }
h3 { font-size: 1.3rem; font-weight: 600; }
p  { margin: 0 0 1em; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- navbar ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: saturate(180%) blur(14px);
  background: rgba(255,255,255,0.82);
  border-bottom: var(--nav-border) solid rgba(20,33,61,0.06);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-h);
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--ink-900);
}
.brand img { height: 40px; width: auto; }
.brand-mark { letter-spacing: -.01em; }
.brand-mark span { color: var(--orange-600); }

.nav-links {
  display: flex;
  gap: 28px;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a {
  font-weight: 500;
  color: var(--ink-700);
  position: relative;
  padding: 6px 2px;
}
.nav-links a.active,
.nav-links a:hover { color: var(--orange-600); }
.nav-links a:not(.nav-cta)::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 2px;
  background: var(--grad-cta);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
  border-radius: 2px;
}
.nav-links a.active::after,
.nav-links a:not(.nav-cta):hover::after { transform: scaleX(1); }

.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--grad-cta);
  color: #fff !important;
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: .95rem;
  box-shadow: 0 6px 16px rgba(244,122,32,0.35);
  transition: transform .2s, box-shadow .2s;
}
.nav-cta:hover {
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(244,122,32,0.45);
}

.nav-toggle {
  display: none;
  background: transparent;
  border: 0;
  padding: 8px;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--ink-700);
  margin: 5px 0;
  border-radius: 2px;
  transition: transform .25s, opacity .2s;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 1rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .2s, box-shadow .2s, background .2s, color .2s, border-color .2s;
}
.btn-primary {
  background: var(--grad-cta);
  color: #fff;
  box-shadow: 0 10px 24px rgba(244,122,32,0.32);
}
.btn-primary:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(244,122,32,0.42);
}
.btn-ghost {
  background: rgba(255,255,255,0.6);
  border-color: var(--ink-100);
  color: var(--ink-700);
}
.btn-ghost:hover { border-color: var(--blue); color: var(--blue-700); }

/* ---------- hero ---------- */
.hero {
  position: relative;
  padding: 84px 0 110px;
  overflow: hidden;
  background:
    radial-gradient(1100px 600px at 80% -10%, rgba(47,115,224,0.18), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(244,122,32,0.18), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, var(--wash) 100%);
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 60px;
  align-items: center;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--blue-700);
  background: #eaf1fc;
  border: 1px solid #cfe0fa;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  margin-bottom: 22px;
}
.eyebrow::before {
  content: "";
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 4px rgba(244,122,32,0.18);
}
.hero h1 .accent {
  background: var(--grad-hero);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-lede {
  font-size: 1.18rem;
  color: var(--ink-500);
  max-width: 540px;
}
.hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 26px;
}
.hero-visual {
  position: relative;
  display: flex;
  justify-content: center;
}
.hero-visual img {
  width: 100%;
  max-width: 360px;
  height: auto;
  filter: drop-shadow(0 30px 50px rgba(20,33,61,0.22));
  animation: float 7s ease-in-out infinite;
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

/* ---------- resume banner (returning visitor) ---------- */
.resume-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 28px;
  padding: 16px 20px;
  border-radius: var(--radius-md);
  background: #fff;
  border: 1px solid var(--ink-100);
  box-shadow: var(--shadow-sm);
}
.resume-banner p { margin: 0; color: var(--ink-700); }

/* ---------- app-store buttons ---------- */
.store-buttons {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 28px;
}
.store-btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  border-radius: 14px;
  background: var(--ink-900);
  color: #fff;
  min-width: 200px;
  opacity: .9;
  cursor: not-allowed;
}
/* A store the app is actually on. The base .store-btn was written for the coming-soon
   state and bakes in `cursor: not-allowed`, so a live badge has to undo that as well as
   earn a hover. */
.store-btn--live {
  opacity: 1;
  cursor: pointer;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease;
}
.store-btn--live:hover,
.store-btn--live:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgb(0 0 0 / .22);
}
.store-btn svg { width: 28px; height: 28px; flex: 0 0 auto; }
.store-btn .store-label { display: flex; flex-direction: column; line-height: 1.1; }
.store-btn .store-label small { font-size: .7rem; opacity: .8; }
.store-btn .store-label strong { font-size: 1.05rem; font-weight: 600; }
.store-btn .badge {
  position: absolute;
  top: -10px; right: -10px;
  background: var(--grad-cta);
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
}

/* ---------- generic section ---------- */
.section { padding: 92px 0; }
.section.alt { background: var(--wash); }
.section-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 56px;
}
.section-head .eyebrow { margin-bottom: 16px; }
.section-head p { color: var(--ink-500); font-size: 1.1rem; }

/* ---------- features grid ---------- */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.feature {
  background: var(--paper);
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-md);
  padding: 28px;
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.feature:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: transparent;
}
.feature-icon {
  width: 56px; height: 56px;
  border-radius: 14px;
  background: linear-gradient(135deg, #eaf1fc, #fff1de);
  display: grid; place-items: center;
  margin-bottom: 18px;
}
.feature-icon svg { width: 28px; height: 28px; color: var(--orange-600); }
.feature h3 { color: var(--ink-900); }
.feature p { color: var(--ink-500); margin: 0; }

/* ---------- example mug gallery ---------- */
.example-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.example {
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--ink-100);
  transition: transform .25s, box-shadow .25s;
}
.example:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.example { margin: 0; }

/* A design is shot from three angles. The frames are stacked and cross-faded, so the
   mug appears to turn; the first one stays lit underneath, which is also what shows
   with no JavaScript. */
.example-media {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--wash);
  overflow: hidden;
}
.example-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .8s ease;
}
.example-media img:first-of-type,
.example-media img.is-on { opacity: 1; }

.example-dots {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  padding: 5px 8px;
  border-radius: var(--radius-pill);
  background: rgba(20, 33, 61, 0.35);
}
.example-dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  transition: background .3s;
}
.example-dots i.is-on { background: #fff; }

.example-cta {
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 18px;
}
.example-cta span { color: var(--ink-500); font-size: .95rem; }

.example .example-meta { padding: 16px 18px 20px; }
.example .example-meta h3 { font-size: 1.05rem; margin-bottom: 4px; }
.example .example-meta p  { font-size: .92rem; color: var(--ink-500); margin: 0; }

/* ---------- how it works (steps) ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  counter-reset: step;
}
.step {
  position: relative;
  padding: 28px 24px;
  border-radius: var(--radius-md);
  background: var(--paper);
  border: 1px solid var(--ink-100);
}
.step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.2rem;
  background: var(--grad-hero);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: block;
  margin-bottom: 8px;
}

/* ---------- CTA banner ---------- */
.cta-banner {
  position: relative;
  border-radius: var(--radius-lg);
  padding: 56px 48px;
  color: #fff;
  background: var(--grad-hero);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  box-shadow: var(--shadow-lg);
}
.cta-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(400px 200px at 90% 110%, rgba(255,255,255,0.25), transparent 60%),
    radial-gradient(400px 200px at 10% -10%, rgba(255,255,255,0.18), transparent 60%);
}
.cta-banner > * { position: relative; }
.cta-banner h2 { color: #fff; margin: 0 0 8px; }
.cta-banner p  { color: rgba(255,255,255,0.92); margin: 0; max-width: 560px; }
.cta-banner .btn-primary {
  background: #fff;
  color: var(--orange-700);
  box-shadow: 0 12px 30px rgba(0,0,0,0.18);
}
.cta-banner .btn-primary:hover { color: var(--orange-700); }

/* ---------- about ---------- */
.about-hero {
  padding: 80px 0 40px;
  background:
    radial-gradient(900px 500px at 90% 10%, rgba(47,115,224,0.14), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, var(--wash) 100%);
}
.about-grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 56px;
  align-items: center;
}
.about-card {
  background: var(--paper);
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-md);
  padding: 32px;
  box-shadow: var(--shadow-sm);
}
.about-card h3 { margin-top: 0; }

/* ---------- contact ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}
.contact-card {
  background: var(--paper);
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-md);
  padding: 32px;
  box-shadow: var(--shadow-sm);
}
.info-list { list-style: none; padding: 0; margin: 0; }
.info-list li {
  display: flex;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--ink-100);
}
.info-list li:last-child { border-bottom: 0; }
.info-icon {
  flex: 0 0 44px;
  width: 44px; height: 44px;
  border-radius: 12px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, #eaf1fc, #fff1de);
  color: var(--orange-600);
}
.info-icon svg { width: 22px; height: 22px; }
.info-text strong { display:block; color: var(--ink-900); font-weight: 600; }
.info-text span,
.info-text a { color: var(--ink-500); font-size: .95rem; }

form { display: grid; gap: 16px; }
.field { display: grid; gap: 6px; }
.field label {
  font-size: .85rem;
  font-weight: 600;
  color: var(--ink-700);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.field input,
.field textarea {
  font: inherit;
  padding: 13px 16px;
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-sm);
  background: #fbfcfe;
  transition: border-color .2s, box-shadow .2s, background .2s;
  color: var(--ink-900);
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(47,115,224,0.18);
  background: #fff;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-status { min-height: 24px; font-size: .92rem; color: var(--blue-700); }
.form-status.success { color: #2a7a3f; }
.form-status.error { color: #b03a3a; }

/* ============================================================
   Caption editor
   ============================================================ */
.editor {
  padding: 40px 0 72px;
  background: linear-gradient(180deg, #ffffff 0%, var(--wash) 100%);
  min-height: calc(100vh - 72px);
}
.editor-head { margin-bottom: 22px; }
.editor-head h1 { margin-bottom: 6px; }
.editor-head p { color: var(--ink-500); margin: 0; }

.editor-layout {
  display: grid;
  gap: 22px;
  grid-template-columns: 1fr;
}
@media (min-width: 920px) {
  .editor-layout { grid-template-columns: 1.6fr 1fr; align-items: start; }
}

.panel {
  background: var(--paper);
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-md);
  padding: 18px;
  box-shadow: var(--shadow-sm);
}
.panel + .panel { margin-top: 22px; }
.panel h2 { font-size: 1.15rem; margin: 0 0 12px; }

canvas#stage {
  width: 100%;
  height: auto;
  border-radius: 12px;
  display: block;
  /* Checkerboard "transparency" indicator behind the canvas, matching the editor
     view on the apps. Wherever a canvas pixel is transparent (PNG alpha holes,
     no-fill bubbles that erase via destination-out) the checker shows through. */
  background-color: #ffffff;
  background-image:
    linear-gradient(45deg, #d8dde8 25%, transparent 25%, transparent 75%, #d8dde8 75%),
    linear-gradient(45deg, #d8dde8 25%, transparent 25%, transparent 75%, #d8dde8 75%);
  background-size: 24px 24px;
  background-position: 0 0, 12px 12px;
}

/* mug mockups */
.mockups { margin-top: 22px; }
.mockup-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mockup-grid img {
  width: 100%;
  border-radius: 10px;
  border: 1px solid var(--ink-100);
  background: var(--wash);
}

label.field-label { display: block; margin: 12px 0 4px; font-size: .82rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-500); }
.editor input[type="text"],
.editor textarea {
  width: 100%;
  padding: 9px 12px;
  background: #fbfcfe;
  color: var(--ink-900);
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-sm);
  font: inherit;
}
.editor textarea { min-height: 60px; resize: vertical; }
.editor input[type="text"]:focus,
.editor textarea:focus {
  outline: none; border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(47,115,224,0.16); background: #fff;
}
.initials-row { display: flex; gap: 10px; align-items: flex-end; }
.initials-row .field-block { flex: 1; }
#initials { text-transform: uppercase; max-width: 140px; }

.editor button.btn { margin-top: 14px; padding: 11px 18px; font-size: .95rem; }
.editor button.btn[disabled] { opacity: .5; cursor: default; box-shadow: none; transform: none; }

.suggestion {
  padding: 12px 14px;
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-sm);
  margin-top: 10px;
  background: #fff;
  transition: border-color .2s, box-shadow .2s;
}
.suggestion:hover { border-color: var(--blue); box-shadow: var(--shadow-sm); }
.suggestion-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.suggestion .who {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px; height: 30px;
  padding: 0 8px;
  border-radius: var(--radius-pill);
  background: var(--grad-hero);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .02em;
}
.suggestion .lines { flex: 1; cursor: pointer; }
.suggestion .line { font-size: .95rem; color: var(--ink-700); }
.suggestion .use-hint { font-size: .72rem; color: var(--ink-300); margin-top: 4px; }

.like-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--ink-100);
  background: #fff;
  color: var(--ink-500);
  border-radius: var(--radius-pill);
  padding: 5px 12px;
  font: inherit;
  font-size: .88rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
  flex: 0 0 auto;
}
.like-btn:hover { border-color: var(--orange); color: var(--orange-600); }
.like-btn.liked { background: var(--grad-cta); color: #fff; border-color: transparent; }
.like-btn .heart { font-size: 1rem; line-height: 1; }
.like-btn .count { min-width: 12px; text-align: center; }

.empty { color: var(--ink-300); font-size: .92rem; }
.error { color: #b03a3a; font-size: .9rem; margin-top: 8px; }

/* ---------- footer ---------- */
.site-footer {
  background: var(--ink-900);
  color: rgba(255,255,255,0.78);
  padding: 64px 0 28px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}
.footer-brand img {
  height: 44px;
  border-radius: 10px;
  background: #fff;
  padding: 5px;
  margin-bottom: 14px;
}
.footer-brand p { color: rgba(255,255,255,0.62); max-width: 320px; }
.footer h4 {
  color: #fff;
  font-size: .95rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer ul li { margin-bottom: 10px; }
.footer ul a { color: rgba(255,255,255,0.72); }
.footer ul a:hover { color: var(--gold); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  font-size: .88rem;
  color: rgba(255,255,255,0.55);
}
.footer-bottom a { color: rgba(255,255,255,0.7); }

/* ---------- scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .hero-grid,
  .about-grid,
  .contact-grid { grid-template-columns: 1fr; gap: 40px; }
  .feature-grid,
  .example-grid,
  .steps { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .cta-banner { padding: 40px 28px; }
  .hero-visual { order: -1; }
  .hero-visual img { max-width: 220px; }
}
@media (max-width: 640px) {
  .nav-toggle { display: block; }
  .nav-links {
    position: absolute;
    top: 72px;
    left: 0; right: 0;
    background: #fff;
    flex-direction: column;
    padding: 18px 24px;
    gap: 14px;
    box-shadow: var(--shadow-md);
    transform: translateY(-10px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s, transform .2s;
  }
  .nav-links.open { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .feature-grid,
  .example-grid,
  .steps,
  .form-row,
  .footer-grid { grid-template-columns: 1fr; }
  .hero { padding: 56px 0 72px; }
  .section { padding: 60px 0; }
}