/* Claude Terminal Coding Course offer page. Only what tokens.css + site.css don't already give. */
.nav-logo span { display: inline; }
.price { display: flex; align-items: baseline; gap: 16px; margin-top: 36px; flex-wrap: wrap; }
.price strong { font: 800 64px/1 var(--tt-font-display); letter-spacing: -.045em; color: var(--fg); }
.price s { font: 700 30px var(--tt-font-display); color: var(--tt-red); text-decoration-thickness: 3px; text-decoration-color: var(--tt-red); }
.offer-line { margin-top: 18px; font: 800 22px/1.3 var(--tt-font-display); letter-spacing: -.015em; color: var(--fg); }
.price span { font: 500 15px var(--tt-font-body); color: var(--body); }
.incl { margin-top: 14px; max-width: 560px; font: 600 16px/1.5 var(--tt-font-body); color: var(--fg); }
.lv .new { display: inline-block; margin-left: 10px; padding: 3px 10px; border-radius: 999px; background: var(--tt-yellow); color: var(--tt-ink); font: 600 11px var(--tt-font-body); font-style: normal; letter-spacing: .08em; text-transform: uppercase; vertical-align: 2px; }
.lv.l8 { border-color: rgba(255,221,0,.35); }
.cta-row { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 28px; }
.closed-msg { display: inline-block; padding: 14px 22px; border-radius: 999px; border: 1px solid var(--line); font: 600 15px var(--tt-font-body); color: var(--fg); }
.gapnote { margin-top: 14px; padding: 10px 14px; border: 1px dashed var(--tt-yellow); border-radius: 8px; font-size: 13px; color: var(--muted); }
.hero .shot img { aspect-ratio: 4 / 4.4; object-position: center 30%; }

.lv { display: grid; grid-template-columns: 48px 1fr; gap: 4px 16px; align-items: baseline; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 20px 24px; }
.lv b { grid-row: span 2; font: 800 22px var(--tt-font-display); color: var(--accent); }
.lv span { font: 600 18px var(--tt-font-body); color: var(--fg); }
.lv p { font-size: 15px; line-height: 1.55; }

.get { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.get .card { padding: 26px; }
.get .stat { font-size: 44px; }
.get p { margin-top: 8px; font-size: 15px; }

.screens { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 56px; }
.screens figure { position: relative; margin: 0; }
.screens img { border-radius: 12px; border: 1px solid var(--line); box-shadow: 0 30px 80px -40px rgba(0,0,0,.45); }
.screens figcaption { margin-top: 14px; font-size: 14px; color: var(--muted); }
.chip { position: absolute; right: 12px; top: -12px; background: var(--tt-yellow); color: var(--tt-ink); font: 600 11px var(--tt-font-body); letter-spacing: .08em; text-transform: uppercase; padding: 5px 11px; border-radius: 999px; }

.fit h3 { margin-bottom: 14px; }
.rail.r4 li { padding-right: 18px; }
.faq { display: grid; gap: 12px; margin-top: 48px; }
.faq div { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 22px 26px; }
.faq h3 { font-size: 19px; margin-bottom: 6px; }
.foot-in a { font-size: 13px; color: var(--muted); }

@media (max-width: 960px) {
  .get { grid-template-columns: 1fr 1fr; }
  .hero .shot { max-width: 420px; }
}
@media (max-width: 600px) {
  .get, .screens { grid-template-columns: 1fr; }
  .price strong { font-size: 52px; }
  .lv { grid-template-columns: 36px 1fr; padding: 18px; }
}