.counter-page h1 { font-size: clamp(40px, 5vw, 68px); line-height: 1.12; letter-spacing: -2px; margin: 24px 0; }
.counter-page h2 { text-wrap: balance; }
.counter-page h3 { font-size: 23px; line-height: 1.3; margin-bottom: 16px; }
.counter-page p { text-wrap: pretty; }
.counter-hero { display: grid; grid-template-columns: 1.2fr 1fr; align-items: center; gap: 64px; padding-block: 96px; }
.counter-hero > div > p { max-width: 620px; font-size: 17px; }
.counter-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: 28px; }
.counter-link { color: #d1cbe8; text-decoration: underline; text-underline-offset: 4px; font-size: 14px; }
button.counter-link { padding: 0; border: 0; background: none; font: inherit; font-size: 14px; text-align: left; }
.counter-walkthrough { display: block; margin-top: 8px; }
.counter-hero .signup-note { margin: 18px 0 0; font-size: 13px; }
.counter-example { min-width: 0; padding: 36px; border: 1px solid #e1bd6040; border-radius: 20px; background: linear-gradient(140deg, #3c3320, #1a2025); box-shadow: 0 24px 60px #0003; }
.counter-example h2 { font-size: 26px; margin: 16px 0; }
.counter-example > p { font-size: 14px; }
.counter-example .counter-example-number { font-size: 96px; line-height: 1; margin: 24px 0; color: #f2d387; letter-spacing: -3px; }
.counter-example-number span { display: block; margin-top: 14px; color: #ddd1b2; letter-spacing: 0; font-size: 14px; }
.counter-example-line { height: 3px; border-radius: 2px; background: linear-gradient(90deg, #705b27, #e5c372); margin: 28px 0; }
.counter-section { padding-block: 80px; }
.counter-explanations, .counter-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.counter-explanations article, .counter-steps li { padding: 32px; border: 1px solid #ffffff0d; border-radius: 16px; background: #1b1e23; }
.counter-explanations p, .counter-steps p, .counter-comparison p { font-size: 15px; }
.counter-steps { padding-left: 28px; }
.counter-steps li::marker { color: #e1bd60; font-size: 20px; }
.counter-workspace { padding-block: 80px; background: #0c0e11; }
.counter-workspace-inner { display: grid; grid-template-columns: .7fr 1fr; align-items: center; gap: 80px; }
.counter-workspace figure { width: min(100%, 340px); margin: 0 auto; }
.counter-workspace img { display: block; width: 100%; height: auto; border: 1px solid #ffffff18; border-radius: 16px; }
.counter-workspace figcaption { color: #a6a6b0; font-size: 12px; line-height: 1.6; margin-top: 16px; }
.counter-workspace h2 { font-size: clamp(30px, 4vw, 44px); line-height: 1.2; margin: 16px 0 24px; }
.counter-workspace p { margin-bottom: 20px; }
.counter-comparison { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.counter-questions { padding-top: 40px; }
.counter-invitation { text-align: center; padding: 64px 32px; margin-block: 20px 96px; border: 1px solid #e1bd6033; border-radius: 20px; background: radial-gradient(ellipse at top, #e1bd6012, transparent 75%); }
.counter-invitation h2 { margin: 16px 0; font-size: clamp(28px, 4vw, 40px); }
.counter-invitation p { max-width: 680px; margin: 16px auto 0; }
.counter-invitation .counter-actions { justify-content: center; }
@media (max-width: 1000px) {
  .counter-hero, .counter-workspace-inner { gap: 36px; }
  .counter-example, .counter-explanations article, .counter-steps li { padding: 24px; }
}
@media (max-width: 740px) {
  .counter-hero, .counter-explanations, .counter-steps, .counter-workspace-inner, .counter-comparison { grid-template-columns: 1fr; }
  .counter-hero { padding-block: 56px; gap: 40px; }
  .counter-section, .counter-workspace { padding-block: 56px; }
  .counter-page .section-intro { margin-bottom: 36px; }
  .counter-page .section-intro h2 { font-size: 32px; }
  .counter-actions { align-items: flex-start; flex-direction: column; }
  .counter-workspace figure { max-width: 300px; }
  .counter-invitation { padding: 40px 24px; margin-bottom: 56px; }
  .counter-invitation .counter-actions { align-items: center; }
}