/* INSTRUCTIONS PAGE (instructions.html) */
.guide-header { padding-block: clamp(50px, 8vw, 90px) clamp(24px, 4vw, 40px); }
.guide-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  color: var(--ink-60);
  margin-bottom: 28px;
  transition: color 0.15s;
}
.guide-back:hover { color: var(--tomato); }
.guide-header h1 { font-size: clamp(40px, 6vw, 64px); margin-bottom: 20px; }
.guide-intro { font-size: clamp(16px, 2vw, 19px); line-height: 1.65; color: var(--ink-60); max-width: 560px; }

.guide-toc { padding-bottom: clamp(24px, 4vw, 40px); }
.guide-toc ol { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; }
.guide-toc a {
  display: inline-block;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  border: 1.5px solid var(--ink-12);
  border-radius: var(--r-pill);
  padding: 8px 16px;
  transition: color 0.15s, border-color 0.15s;
}
.guide-toc a:hover { color: var(--tomato); border-color: var(--tomato); }

.guide-step {
  padding-block: clamp(40px, 6vw, 72px);
  border-top: 1px solid var(--ink-12);
  scroll-margin-top: 72px;
}
.guide-text { max-width: 760px; }
.guide-num {
  display: block;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 18px;
  color: var(--tomato);
  margin-bottom: 10px;
}
.guide-text h2 {
  font-family: 'Fraunces', serif;
  font-size: clamp(26px, 3.4vw, 36px);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--ink);
  margin-bottom: 18px;
}
.guide-text p { font-size: 16px; line-height: 1.7; color: var(--ink-60); margin-bottom: 14px; }
.guide-text ul, .guide-text ol { padding-left: 22px; margin-bottom: 14px; }
.guide-text li { font-size: 16px; line-height: 1.7; color: var(--ink-60); margin-bottom: 8px; }
.guide-text li ul { margin-top: 8px; margin-bottom: 0; }
.guide-text strong { color: var(--ink); font-weight: 500; }
.guide-text a { color: var(--sage); text-decoration: underline; text-underline-offset: 3px; }
.guide-text a:hover { color: var(--tomato); }

.guide-shots { display: flex; align-items: flex-start; gap: clamp(16px, 4vw, 32px); margin-top: 32px; }
.guide-shot { flex: 0 1 240px; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.guide-shot .phone-frame { width: 100%; }
.guide-shot figcaption {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  color: var(--ink-60);
  text-align: center;
  line-height: 1.5;
}

.guide-calc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 8px; }
.guide-calc-card { background: #fff; border-radius: var(--r-card); box-shadow: var(--shadow); padding: 24px; }
.guide-calc-card h3 { font-family: 'Fraunces', serif; font-size: 20px; font-weight: 500; margin-bottom: 12px; color: var(--ink); }
.guide-calc-card p { font-size: 15px; line-height: 1.7; color: var(--ink-60); margin-bottom: 0; }

.guide-help { padding-bottom: clamp(60px, 8vw, 100px); }
.guide-help p { font-size: 15px; line-height: 1.75; color: var(--ink-60); }
.guide-help a { color: var(--sage); text-decoration: underline; text-underline-offset: 3px; }