/* landing layout — spec locked via approved mock (mocks/web-landing.html) */
header { border-bottom: var(--hairline); }
.header-in {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 18px 0;
}
.wordmark { font-size: 20px; letter-spacing: 0.02em; }
.wordmark svg { display: block; margin-top: 3px; }
nav { display: flex; gap: 28px; font-size: var(--size-small); }
nav a { color: var(--ink); text-decoration: none; }
nav a:hover { border-bottom: 1px dashed var(--accent); }

.hero { padding: 48px 0 0; }
.hero-zone { padding-bottom: 170px; } /* the sewing band below the copy */
.hero-zone { position: relative; overflow: hidden; }
/* the sewing canvas bleeds edge to edge: margins get patterns too */
#hero-sew {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  cursor: crosshair; touch-action: none;
}
.hero-copy { position: relative; pointer-events: none; }
.hero-copy a, .hero-copy .cta { pointer-events: auto; }
.hero-in { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.hero-copy { max-width: 620px; }
.hero h1 {
  font-weight: 400;
  font-size: var(--size-hero);
  line-height: 1.18;
  max-width: 620px;
  letter-spacing: -0.01em;
}
.hero .sub { margin-top: 22px; font-size: 17px; max-width: 480px; }
.hero .cta {
  display: inline-block;
  margin-top: 36px;
  padding: 12px 22px;
  border: var(--hairline);
  border-radius: var(--radius);
  color: var(--ink);
  text-decoration: none;
  font-size: 15px;
}
.hero .cta:hover { background: var(--ink); color: var(--paper); }
.cta2 { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; font-size: 15px; }
.cta2:hover { color: var(--navy); text-decoration-thickness: 2px; }
.platforms { margin-top: 18px; font-size: var(--size-fine); color: var(--gray); }

.sew-hint { font-size: var(--size-fine); color: var(--gray); margin-top: 20px; }
#hero-sew, #wall-canvas, .sew-strip, .wall-frame { user-select: none; -webkit-user-select: none; }

.seam { border: 0; border-top: var(--seam); }

.how { padding: 44px 0 52px; }
.how h2, .wall h2 { font-weight: 400; font-size: var(--size-h2); margin-bottom: var(--space-4); }
.steps { display: grid; grid-template-columns: 1fr 1fr 1fr; }
.step { border: var(--hairline); border-radius: var(--radius); padding: 24px 22px 28px; }
.step + .step { margin-left: -1px; }
.step .num { font-size: var(--size-fine); color: var(--gray); }
.step h3 { font-weight: 400; font-size: 18px; margin: 14px 0 8px; }
.step p { font-size: 14.5px; }
.step .thread { margin-top: 20px; }

.wall { padding: 44px 0 32px; }
.wall .lede { font-size: 15px; max-width: 520px; margin: -26px 0 28px; }
.wall-frame { border: var(--hairline); border-radius: var(--radius); }
#wall-canvas { display: block; width: 100%; height: 300px; cursor: crosshair; touch-action: none; }
.wall-meta {
  display: flex; justify-content: space-between; align-items: center;
  border-top: var(--seam);
  padding: 10px 14px;
  font-size: var(--size-fine); color: var(--gray);
}
.your-thread { display: flex; align-items: center; gap: 8px; color: var(--ink); }
.your-thread svg { display: block; }
.stitch-kinds { display: flex; }
.kind {
  display: flex; align-items: center;
  padding: 5px 9px;
  border: var(--hairline);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
}
.kind + .kind { margin-left: -1px; }
.kind[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
#wall-status { font-size: var(--size-fine); color: var(--gray); margin-top: 8px; min-height: 1.4em; }

.guestbook { padding: 8px 0 56px; }
.notes { margin-top: 26px; }
.note {
  display: flex; align-items: baseline; gap: 16px;
  padding: 13px 2px;
  border-bottom: var(--seam);
  font-size: 15px;
}
.note:first-child { border-top: var(--seam); }
.note svg { flex: none; position: relative; top: -2px; }
.note-form { display: flex; margin: 30px auto 0; max-width: 560px; }
.guestbook-handle { text-align: center; font-size: var(--size-fine); color: var(--gray); margin-top: 14px; }
.note-form input {
  flex: 1;
  font: inherit; font-size: 15px;
  padding: 11px 14px;
  border: var(--hairline);
  border-radius: var(--radius) 0 0 var(--radius);
  border-right: 0;
  outline: none;
}
.note-form input:focus { border-color: var(--accent); border-style: dashed; }
.note-form button {
  flex: none;
  font: inherit; font-size: 14px; font-weight: 700; letter-spacing: .4px;
  padding: 11px 22px;
  background: var(--ink); color: var(--paper);
  border: 1px solid var(--ink);
  border-radius: 0 var(--radius) var(--radius) 0;
  cursor: pointer;
}
.note-form button:hover { background: var(--navy); }

footer {
  border-top: var(--hairline);
  padding: 22px 0 40px;
  font-size: var(--size-fine); color: var(--gray);
}
.foot-in { display: flex; justify-content: space-between; }
footer a { color: var(--gray); }

@media (max-width: 720px) {
  .hero { padding: 64px 0 48px; }
  .hero-in { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.hero-copy { max-width: 620px; }
.hero h1 { font-size: 32px; }
  .steps { grid-template-columns: 1fr; }
  .step + .step { margin-left: 0; margin-top: -1px; }
}