/* /class landing page. Builds on styles.css (brand tokens, nav, hero,
   buttons, lead form, footer). Mobile-first: base rules are for phones. */

.class-body { background: var(--white); }
.class-nav .nav-cta { padding: 10px 16px; font-size: 14px; }

/* Hero */
.class-hero .hero-frame { padding: 120px 20px 64px; }
.class-hero .display { font-size: clamp(48px, 13vw, 112px); max-width: 12ch; margin-bottom: 20px; }
.class-hero .lede { margin-bottom: 28px; }
.class-facts {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
}
.class-facts li {
  padding: 8px 12px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px;
  font-size: 15px;
  color: rgba(255,255,255,.88);
}
.class-cta { display: grid; gap: 12px; }
.class-cta .btn { width: 100%; font-size: 17px; padding: 18px 24px; }
.class-refund-note { font-size: 15px; color: rgba(255,255,255,.7); margin-top: 16px; }

/* Sections */
.class-section .frame { padding: 64px 20px; }
.class-section .section-title { font-size: clamp(34px, 9vw, 64px); }
.class-section .section-dek { margin-bottom: 32px; }
.class-alt { background: var(--light); }

.class-list { list-style: none; display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: 4px; overflow: hidden; }
.class-list li { background: var(--white); padding: 22px 20px; font-size: 18px; }
.class-list li strong { display: block; font-family: var(--f-display); font-style: italic; font-weight: 400; font-size: 24px; line-height: 1.15; margin-bottom: 6px; }
.class-list li strong::before { content: "/ "; color: var(--a-light); font-family: var(--f-symbol); font-style: normal; font-size: 18px; }

.class-for p { max-width: 60ch; font-size: 19px; }
.class-for p + p { margin-top: 16px; }

.class-format { display: grid; gap: 12px; list-style: none; }
.class-format li { display: flex; flex-direction: column; padding: 18px 20px; background: var(--white); border: 1px solid var(--rule); border-radius: 4px; }
.class-format li span { font-size: 13px; font-weight: 500; letter-spacing: 1.6px; text-transform: uppercase; color: var(--grey-44); }
.class-format li b { font-size: 20px; }

/* Price cards */
.class-prices { display: grid; gap: 16px; }
.price-card { border: 1px solid var(--rule); border-radius: 4px; padding: 28px 22px; background: var(--white); }
.price-card-vip { background: var(--black); color: var(--white); border-color: var(--black); }
.price-card h3 { font-size: 15px; font-weight: 500; letter-spacing: 1.6px; text-transform: uppercase; color: var(--grey-44); margin-bottom: 10px; }
.price-card-vip h3 { color: rgba(255,255,255,.6); }
.price-amount { font-family: var(--f-display); font-style: italic; font-size: 56px; line-height: 1; margin-bottom: 6px; }
.price-sub { font-size: 15px; color: var(--grey-33); margin-bottom: 20px; }
.price-card-vip .price-sub { color: rgba(255,255,255,.7); }
.price-card ul { padding-left: 1.2em; margin-bottom: 24px; }
.price-card li + li { margin-top: 8px; }
.price-card .btn { width: 100%; }
.class-section .price-card .btn-primary { background: var(--a-light); color: var(--white); box-shadow: none; }
.class-section .price-card-vip .btn-primary { background: var(--a-dark); color: var(--black); }
.class-refund { margin-top: 24px; padding: 20px; border-left: 4px solid var(--a-light); background: var(--white); font-size: 17px; }

/* FAQ */
.class-faq { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: 4px; overflow: hidden; }
.class-faq details { background: var(--white); }
.class-faq summary { cursor: pointer; padding: 20px; font-size: 18px; font-weight: 500; list-style: none; }
.class-faq summary::-webkit-details-marker { display: none; }
.class-faq summary::before { content: "+ "; color: var(--a-light); }
.class-faq details[open] summary::before { content: "\2212  "; }
.class-faq details p { padding: 0 20px 20px; color: var(--grey-33); }

/* Waitlist (reuses .contact + .lead-form) */
.class-waitlist .frame { padding: 64px 20px; }
.class-waitlist .section-title { font-size: clamp(34px, 9vw, 64px); }
.class-consent { flex-direction: row !important; align-items: flex-start; gap: 12px !important; text-transform: none !important; letter-spacing: 0 !important; font-size: 15px !important; font-weight: 400 !important; }
.class-consent input { width: 20px; height: 20px; margin-top: 2px; flex: none; padding: 0; }
.class-waitlist .btn-submit { width: 100%; }

/* Thanks */
.class-thanks .hero-frame { padding: 120px 20px 72px; }
.class-thanks .display { font-size: clamp(48px, 13vw, 96px); }
.class-thanks-steps { list-style: none; display: grid; gap: 12px; margin: 8px 0 28px; }
.class-thanks-steps li { padding: 16px 18px; border: 1px solid rgba(255,255,255,.18); border-radius: 4px; font-size: 17px; color: rgba(255,255,255,.88); }

/* Footer */
.class-foot { display: grid; gap: 10px; font-size: 13px; color: rgba(255,255,255,.55); max-width: 70ch; }
.class-body .foot-links { flex-wrap: wrap; }
.class-body :is(a, button, summary, input):focus-visible { outline: 3px solid var(--a-cyan); outline-offset: 3px; }

/* Wider screens */
@media (min-width: 761px) {
  .class-hero .hero-frame { padding: clamp(150px, 15vw, 210px) var(--pad-x) clamp(80px, 9vw, 120px); }
  .class-cta { display: flex; flex-wrap: wrap; }
  .class-cta .btn { width: auto; }
  .class-section .frame, .class-waitlist .frame { padding: clamp(72px, 9vw, 130px) var(--pad-x); }
  .class-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .class-format { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .class-prices { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 900px; }
  .class-waitlist .btn-submit { width: auto; }
  .class-thanks .hero-frame { padding: clamp(150px, 15vw, 210px) var(--pad-x) clamp(80px, 9vw, 120px); }
}

/* /privacy — plain policy text */
.privacy .frame { max-width: 760px; }
.privacy h2 { font-family: var(--f-display); font-style: italic; font-weight: 400; font-size: 28px; line-height: 1.2; margin: 40px 0 12px; }
.privacy p, .privacy li { font-size: 18px; max-width: 65ch; }
.privacy p + p, .privacy p + ul, .privacy ul + p { margin-top: 12px; }
.privacy ul { padding-left: 1.2em; }
.privacy li + li { margin-top: 8px; }
.privacy a { text-decoration: underline; }