/* Shared visual finish. Scene geometry, transforms, transitions, state selectors,
   media choreography, image crops and pointer behavior belong to section CSS. */
button, input, select, textarea {
  font-family: var(--font);
}

.headline {
  font-size: var(--type-heading);
  letter-spacing: var(--tracking-heading);
}
.headline--xl { font-size: var(--type-heading-xl); }
.body-text {
  font-size: var(--type-body);
  line-height: var(--leading-body);
}

/* One eyebrow hierarchy, including the newer independent sections. */
.eyebrow,
.sc-intro__eyebrow,
.sc-commit__eyebrow,
.sc-brand-process__eyebrow {
  color: var(--text-primary);
  font-family: var(--font);
  font-size: var(--type-eyebrow);
  font-weight: 700;
  line-height: var(--leading-eyebrow);
  letter-spacing: -.25px;
}
.sc-intro__eyebrow { margin-bottom: var(--space-eyebrow); }
/* These titles already supply their own 12px top margin. */
:is(#sect-testimonials, #sect-process, #sect-12, #sect-faq) .eyebrow {
  margin-bottom: 0;
}

.sc-intro h1 { letter-spacing: var(--tracking-heading); }
.sc-intro__description,
.sc-globe__description,
.sc-brand-process__header > p,
.sc-commit__description {
  color: var(--text-secondary);
  font-size: var(--type-body);
  font-weight: 400;
  line-height: var(--leading-body);
  letter-spacing: 0;
}
.sc-globe__description { color: var(--text-primary); }
.sc-intro__description,
.sc-globe__description { margin-top: var(--space-copy); }
.sc-intro__description strong,
.sc-commit__description strong { color: var(--text-primary); font-weight: 700; }
.sc-intro__facts > * > span,
.sc-intro__scroll,
.sc-commit__unit,
.sc-commit__closing { color: var(--text-secondary); }
.sc-intro__frame { border-color: var(--border); border-radius: var(--radius); }
.sc-intro__tag { border-color: var(--border); border-radius: var(--radius-sm); background: rgba(17,17,17,.92); }

/* Cinematic headings keep their scene-specific sizing and fixed line breaks. */
.sc-globe { background: var(--bg-primary); }
.sc-globe__titles h2 {
  font-family: var(--font);
  font-weight: 700;
  letter-spacing: var(--tracking-heading);
}
.sc-brand-process__header h2,
.sc-commit h2 {
  font-size: var(--type-heading);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  margin-bottom: var(--space-copy);
}
.sc-brand-process__step p { color: var(--text-secondary); }
.sc-brand-process__number { color: var(--text-secondary); }
.sc-brand-process__header { margin-bottom: var(--space-header); }
.sc-commit__canvas { background: var(--bg-primary); }
.sc-commit .sc-commit__canvas .sc-commit__step {
  border-radius: var(--radius-editorial);
}
.sc-commit__step p { color: var(--text-primary); line-height: var(--leading-body); }
.sc-commit__step-label { font-size: 10px; color: var(--text-secondary); }
.sc-commit__closing { border-color: var(--border); }

/* Reference scene: typography and brand accents only; retain its phone UI. */
#sect-toss-shopping {
  font-family: var(--font);
  --replica-bg: var(--bg-primary);
  background: var(--bg-primary);
}
#sect-toss-shopping ._1fdwyhxk {
  font-weight: 800;
  letter-spacing: var(--tracking-heading);
  line-height: var(--leading-heading);
}
#sect-toss-shopping ._1fdwyhxl { color: var(--text-secondary); line-height: var(--leading-body); }
#sect-toss-shopping .ts-icon { background: var(--brand-glow); color: var(--brand); border-radius: var(--radius-sm); }
#sect-toss-shopping .ts-check { color: var(--brand); }
#sect-toss-shopping .ts-link { color: var(--ink-light); background: var(--surface-light); }
#sect-toss-shopping .ts-link-arrow { background: var(--brand); }

/* Ordinary sections share spacing; sticky scenes keep their scroll distances. */
.faq-section { padding: var(--section-py) 0; }
.checklist-section__header { margin-bottom: var(--space-header); }
.process-section__header { margin-bottom: var(--space-header); }
.pain-card__text,
.checklist-card p,
.process-card__text,
.faq-item__content { line-height: var(--leading-body); }
.process-card__text { font-size: var(--type-caption); }
.pricing-card__price-note,
.pricing__note { color: var(--text-secondary); }
.pricing-card__price > span { color: var(--text-secondary) !important; }
.pricing-card__name { letter-spacing: var(--tracking-heading); }
.pricing-card__features { line-height: var(--leading-body); }
.faq-item { border-radius: var(--radius); }

/* Light contact remains the intentional tonal change at the end of the page. */
.witu-contact { background: var(--surface-light); color: var(--ink-light); }
.witu-contact__title { font-weight: 800; }
.witu-contact__description { color: var(--ink-light-secondary); line-height: var(--leading-body); }
.witu-contact__field label,
.witu-contact__privacy-label { color: var(--ink-light); }

/* Inline modal presentation needs narrow overrides; handlers and states remain. */
#modalContainer { background: var(--bg-secondary) !important; border-radius: var(--radius) !important; }
#modalContainer > p { color: var(--text-secondary) !important; }
#inquiryForm label,
#inquiryForm h3 { color: var(--text-secondary) !important; }
#inquiryForm input:not([type="checkbox"]),
#inquiryForm select,
#inquiryForm textarea { font-family: var(--font); font-size: 16px !important; }

@media (max-width: 992px) {
  :root { --type-eyebrow: 16px; --leading-eyebrow: 26px; }
  /* Retain the editorial tablet title scale. */
  .sc-commit h2 { font-size: 40px; }
}
@media (min-width: 993px) and (max-height: 760px) {
  /* This canvas must still fit the original short-desktop sticky viewport. */
  .sc-commit h2 { font-size: 38px; margin-bottom: 16px; }
  .sc-commit__description { font-size: 14px; }
}
@media (max-width: 768px) {
  :root {
    --type-heading: clamp(22px, 6vw, 30px);
    --type-heading-xl: clamp(26px, 7vw, 36px);
    --type-body: 15px;
    --space-copy: 20px;
    --space-header: 40px;
  }
  .sc-commit h2 { font-size: clamp(28px, 7.7vw, 36px); }
  /* Only ordinary header spacing, never scroll-stage or track dimensions. */
  #sect-testimonials .kakao-section__header,
  #sect-process .process-section__header { margin-bottom: var(--space-header) !important; }
}