:root {
  --bg: #f7f7f5;
  --fg: #111;
  --body: #222;
  --muted: #333;
  --hint: #666;
  --line: #111;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--bg);
  color: var(--fg);
  min-height: 100%;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
}

a { color: var(--fg); }

a:hover { opacity: .7; }

.stage {
  min-height: auto;
  display: flex;
  flex-direction: column;
  padding: 5vh 4vw 6vh;
}

.word {
  font-size: clamp(3.2rem, 18vw, 14rem);
  font-weight: 800;
  letter-spacing: -.07em;
  line-height: .82;
  text-transform: uppercase;
}

.cut {
  margin-top: 18px;
  max-width: 34em;
  font-size: clamp(16px, 1.7vw, 19px);
  line-height: 1.5;
  color: var(--body);
}

.offer {
  margin-top: 48px;
  padding-top: 28px;
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 32px;
  border-top: 1px solid var(--line);
}

.offer p,
.block p {
  font-size: 15px;
  line-height: 1.55;
  max-width: 48ch;
  color: var(--muted);
}

.price {
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1;
}

.price span {
  font-size: .42em;
  font-weight: 650;
  letter-spacing: -.02em;
  display: block;
  margin-top: 6px;
}

.aside {
  font-size: 13px;
  line-height: 1.5;
  color: var(--hint);
  max-width: 36ch;
  margin-top: 10px;
}

.mail {
  font-size: 18px;
  font-weight: 650;
  letter-spacing: -.03em;
}

.mail a {
  color: var(--fg);
  text-decoration: none;
  border-bottom: 2px solid var(--fg);
}

.hint {
  margin-top: 8px;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--hint);
}

.rest {
  padding: 0 4vw 8vh;
}

.block {
  border-top: 1px solid var(--line);
  padding: 28px 0 8px;
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 32px;
}

h2 {
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--hint);
  margin-bottom: 14px;
}

.steps {
  list-style: none;
  max-width: 48ch;
}

.steps li {
  font-size: 15px;
  line-height: 1.55;
  color: var(--muted);
  margin-top: 12px;
}

.steps li:first-child { margin-top: 0; }

.steps strong {
  color: var(--fg);
  font-weight: 650;
}

.page {
  min-height: 100vh;
  padding: 5vh 4vw 8vh;
  display: flex;
  flex-direction: column;
}

.kicker {
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--hint);
  margin-bottom: 10px;
}

.kicker a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid #ccc;
}

.subword {
  font-size: clamp(2.4rem, 8vw, 6.5rem);
  font-weight: 800;
  letter-spacing: -.06em;
  line-height: .86;
  text-transform: uppercase;
}

.beats {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  border-top: 1px solid var(--line);
  padding-top: 28px;
}

.beats h2 {
  color: var(--fg);
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 800;
  letter-spacing: -.03em;
  text-transform: none;
  margin-bottom: 10px;
}

.beats p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--muted);
  max-width: 36ch;
}

.foot {
  margin-top: auto;
  padding-top: 40px;
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 32px;
  border-top: 1px solid var(--line);
}

.foot p {
  font-size: 15px;
  line-height: 1.55;
  max-width: 48ch;
  color: var(--muted);
}

@media (max-width: 720px) {
  .word { font-size: clamp(3rem, 22vw, 6rem); }
  .offer,
  .block,
  .foot,
  .beats { grid-template-columns: 1fr; gap: 20px; }
  .stage { padding: 4vh 5vw 5vh; }
  .rest, .page { padding-left: 5vw; padding-right: 5vw; }
}

.mail-hire {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.cursor {
  display: inline;
  font: inherit;
  font-weight: 400;
  color: #111;
  margin-left: 4px;
  text-decoration: none;
  border-bottom: none;
  animation: blink 1.15s steps(1) infinite;
}

@keyframes blink {
  0%, 50% { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .cursor { animation: none; }
}