/* The home page. Shares the palette and header from style.css; everything here is specific to the landing page. */
body.landing { min-height: 100vh; }
body.landing .site-header { position: sticky; top: 0; background: rgba(26, 39, 80, 0.95); backdrop-filter: blur(10px); }

.wrap { max-width: var(--shell); margin: 0 auto; padding: 0 24px; }
.mono { font-family: var(--font-mono); letter-spacing: 0.04em; }

.eyebrow {
  display: flex; align-items: center; gap: 12px; margin: 0 0 18px;
  font: 500 0.78rem/1 var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent);
}
.eyebrow::before { content: ""; flex: none; width: 34px; height: 2px; background: repeating-linear-gradient(90deg, var(--accent) 0 7px, transparent 7px 11px); }

/* Buttons */
.btn-lg {
  display: inline-flex; align-items: center; gap: 10px; padding: 15px 26px; border-radius: 999px;
  border: 1.5px solid transparent; text-decoration: none; cursor: pointer;
  font: 700 1rem/1 var(--font-ui); transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
.btn-cta { background: var(--cta); color: var(--on-cta); }
.btn-cta:hover { background: var(--cta-hover); transform: translateY(-1px); }
.btn-ghost { border-color: var(--line-strong); color: var(--text); }
.btn-ghost:hover { border-color: var(--text); }

/* ───────── Hero ───────── */
.hero {
  max-width: var(--shell); margin: 0 auto;
  padding: clamp(40px, 7vw, 96px) 24px clamp(48px, 6vw, 84px);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); gap: clamp(32px, 5vw, 76px); align-items: center;
}
.hero h1 {
  font: 800 clamp(2.5rem, 5.4vw, 4.4rem)/1.03 var(--font-display); font-variation-settings: "opsz" 96;
  letter-spacing: -0.035em; text-wrap: balance;
}
.hero-lead { margin-top: 22px; max-width: 34em; font-size: clamp(1.05rem, 1.6vw, 1.22rem); line-height: 1.55; color: var(--muted); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero-formats {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; margin-top: 30px;
  font-size: 0.85rem; color: var(--muted);
}
.hero-formats .mono { color: var(--text); font-size: 0.9rem; font-weight: 500; }

/* The stitch reveal: slide across to turn the picture into its stitches. */
.reveal { margin: 0; }
.reveal-stage {
  --pos: 50%;
  position: relative; aspect-ratio: 860 / 770; overflow: hidden; border-radius: 22px;
  background: #e3dbc8; border: 1px solid var(--line-strong);
  box-shadow: 0 40px 80px -34px rgba(26, 39, 80, 0.55), 0 0 0 8px rgba(26, 39, 80, 0.04);
  touch-action: pan-y; cursor: ew-resize; user-select: none; -webkit-user-select: none;
}
.reveal-stage:has(.reveal-range:focus-visible) { outline: 3px solid var(--accent); outline-offset: 5px; }
.reveal-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; user-select: none; -webkit-user-drag: none; }
.reveal-before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); background: #fff; }
.reveal-tag {
  position: absolute; top: 14px; padding: 6px 12px; border-radius: 999px;
  background: rgba(26, 39, 80, 0.82); color: #fff; backdrop-filter: blur(6px);
  font: 500 0.7rem/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase;
}
.reveal-tag-before { left: 14px; }
.reveal-tag-after { right: 14px; }
.reveal-seam { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 0; pointer-events: none; }
.reveal-seam::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -1.5px; width: 3px;
  background: repeating-linear-gradient(180deg, var(--stitch) 0 10px, transparent 10px 15px);
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.55));
}
.reveal-handle {
  position: absolute; top: 50%; left: 0; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%;
  background: #ff7b66; box-shadow: 0 8px 22px rgba(26, 39, 80, 0.45);
  display: grid; place-items: center;
}
.reveal-handle::before { content: "‹ ›"; color: #1a2750; font: 700 1.2rem/1 var(--font-ui); letter-spacing: 0.15em; padding-left: 0.1em; }
/* The picture is dragged by the stage itself (landing.js). This real range input stays for the keyboard and screen readers
   (arrow keys move the seam) and is otherwise invisible and out of the pointer's way. It is written as ".reveal-stage
   .reveal-range" so that it outranks the site-wide slider styling in style.css, which would otherwise squeeze it into a
   thin strip and make only that strip respond. */
.reveal-stage .reveal-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; pointer-events: none; }
.reveal-hint {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); padding: 7px 14px; border-radius: 999px;
  background: rgba(26, 39, 80, 0.85); color: #fff; backdrop-filter: blur(6px); pointer-events: none; white-space: nowrap;
  font: 500 0.72rem/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; transition: opacity 0.4s;
}
.reveal-stage.is-touched .reveal-hint { opacity: 0; }
.reveal-facts { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; }
.reveal-facts li {
  padding: 7px 13px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
  font: 500 0.8rem/1 var(--font-mono); color: var(--text);
}
.reveal-note { margin-top: 12px; font-size: 0.82rem; line-height: 1.45; color: var(--muted); }

/* ───────── The facts strip ───────── */
.facts { border-block: 1px solid var(--line); background: var(--surface); }
.facts ul { list-style: none; max-width: var(--shell); margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.facts li { display: grid; align-content: start; gap: 8px; padding: 30px 28px 30px 0; }
.facts li + li { padding-left: 28px; border-left: 2px dashed var(--line); }
.facts strong { font: 800 clamp(2.2rem, 4vw, 3rem)/1 var(--font-display); letter-spacing: -0.03em; color: var(--heading); }
.facts span { font-size: 0.9rem; line-height: 1.45; color: var(--muted); max-width: 22em; }

/* ───────── Sections ───────── */
.band { padding: clamp(56px, 8vw, 104px) 0; }
.band-alt { background: var(--surface); border-block: 1px solid var(--line); }
.band-title { font: 800 clamp(1.9rem, 3.8vw, 3rem)/1.08 var(--font-display); letter-spacing: -0.03em; max-width: 18em; text-wrap: balance; }
.band-lead { margin-top: 14px; max-width: 44em; color: var(--muted); line-height: 1.55; }
.band-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 32px; margin-bottom: 38px; }
.link-arrow { color: var(--accent); text-decoration: none; font-weight: 700; white-space: nowrap; }
.link-arrow:hover { color: var(--cta-hover); text-decoration: underline; text-underline-offset: 3px; }

/* How it works: a real sequence, so the steps are numbered, strung on a running stitch. */
.steps { list-style: none; margin: 56px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.steps li { position: relative; padding-top: 36px; border-top: 2px dashed var(--line-strong); }
.step-num {
  position: absolute; top: -23px; left: 0; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; background: var(--surface); border: 2px solid var(--accent); color: var(--accent);
  font: 600 1.1rem/1 var(--font-mono);
}
.steps h3 { font: 700 1.4rem/1.2 var(--font-display); color: var(--heading); letter-spacing: -0.015em; }
.steps p { margin-top: 10px; color: var(--muted); line-height: 1.6; }

/* Real results */
.shots { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.shot a { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: inherit; }
.shot-pic {
  position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: #e3dbc8;
  border: 1px solid var(--line-strong); border-radius: 18px; transition: transform 0.2s, border-color 0.2s;
}
.shot a:hover .shot-pic, .shot a:focus-visible .shot-pic { transform: translateY(-4px); border-color: var(--accent); }
.shot-after { display: block; width: 100%; height: 100%; object-fit: contain; }
.shot-before {
  position: absolute; left: 10px; top: 10px; width: 26%; height: 26%; object-fit: contain;
  background: #fff; border: 3px solid #fff; border-radius: 10px; box-shadow: 0 8px 18px rgba(26, 39, 80, 0.35);
}
.shot-title { margin-top: 10px; font: 700 1.05rem/1.25 var(--font-display); color: var(--heading); }
.shot-facts { font: 500 0.78rem/1.4 var(--font-mono); color: var(--muted); }

/* Features: a hairline grid. */
.features {
  list-style: none; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 22px; overflow: hidden;
}
.features li { background: var(--surface); padding: 30px 28px 34px; }
.tag { display: inline-block; margin-bottom: 14px; font: 500 0.72rem/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.features h3 { font: 700 1.2rem/1.25 var(--font-display); color: var(--heading); letter-spacing: -0.01em; }
.features p { margin-top: 10px; font-size: 0.96rem; line-height: 1.6; color: var(--muted); }

.machines { margin-top: 64px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px 56px; align-items: start; }
.machines h3 { font: 800 clamp(1.5rem, 2.6vw, 2rem)/1.15 var(--font-display); letter-spacing: -0.025em; }
.machines-copy p { margin-top: 12px; color: var(--muted); line-height: 1.6; }
.brands { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.brands li { padding: 8px 15px; border: 1px solid var(--line-strong); border-radius: 999px; font-weight: 600; font-size: 0.9rem; }
.table-wrap { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--surface); }
.machines table { width: 100%; border-collapse: collapse; }
.machines th {
  text-align: left; padding: 12px 20px; background: var(--raise);
  font: 500 0.72rem/1.3 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
}
.machines td { padding: 14px 20px; border-top: 1px solid var(--line); }
.machines td:first-child { width: 6.5em; font: 500 0.95rem var(--font-mono); letter-spacing: 0.04em; color: var(--accent); }

/* The closing call */
.closing {
  text-align: center; padding: clamp(64px, 9vw, 124px) 0; border-top: 1px solid var(--line);
  background: radial-gradient(900px 360px at 50% 130%, rgba(255, 123, 102, 0.25), transparent 70%), var(--bg);
}
.closing h2 { font: 800 clamp(2rem, 4.6vw, 3.5rem)/1.05 var(--font-display); letter-spacing: -0.035em; }
.closing p { margin-top: 14px; color: var(--muted); font-size: 1.1rem; }
.closing .hero-actions { justify-content: center; }

/* ───────── Footer ───────── */
.home-foot { border-top: 1px solid var(--line); padding: 56px 0 40px; background: var(--bg); }
.home-foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 36px; }
.home-foot-brand img { display: block; height: 44px; width: auto; }
.home-foot-brand p { margin-top: 14px; max-width: 24em; font-size: 0.9rem; color: var(--muted); line-height: 1.5; }
.home-foot h2 { margin-bottom: 14px; font: 500 0.72rem/1 var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.home-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.home-foot nav a { color: var(--text); text-decoration: none; font-size: 0.94rem; }
.home-foot nav a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.home-foot-legal { margin-top: 44px; padding-top: 22px; border-top: 2px dashed var(--line); font-size: 0.84rem; color: var(--muted); }

/* ───────── Narrower screens ───────── */
@media (max-width: 1000px) {
  .hero { grid-template-columns: minmax(0, 1fr); }
  .hero-visual { max-width: 640px; }
  .features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .machines { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  body.landing .site-header { position: relative; }            /* two rows tall on a phone: too much to keep pinned */
  .facts ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts li { padding: 22px 16px 22px 0; }
  .facts li + li { padding-left: 0; border-left: 0; }
  .facts li:nth-child(even) { padding-left: 18px; border-left: 2px dashed var(--line); }
  .facts li:nth-child(n+3) { border-top: 2px dashed var(--line); }
  .steps { grid-template-columns: minmax(0, 1fr); gap: 52px; }
  .home-foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .wrap, .hero { padding-left: 16px; padding-right: 16px; }
  .facts ul { padding: 0 16px; }
  .features { grid-template-columns: minmax(0, 1fr); }
  .shots { gap: 14px; }
  .btn-lg { padding: 14px 22px; }
  .hero-actions .btn-lg { flex: 1 1 100%; justify-content: center; }
}