/* The calculator-module waitlist page. Builds on ../styles.css; only what that file lacks lives here. */

.hero-shot { position: relative; justify-self: end; width: 100%; max-width: 520px; }
.hero-shot img { width: 100%; aspect-ratio: 11 / 9; object-fit: cover; border-radius: 26px; box-shadow: 14px 14px 0 -1.5px #0a1529, 14px 14px 0 0 rgba(233, 180, 76, .6), 0 30px 80px rgba(0, 0, 0, .5); }
.hero-shot figcaption { color: var(--on-dark-2); margin-top: 28px; }
.hero-shot figcaption span { color: var(--gold); }

/* sign-up box */
.join-form { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 28px; max-width: 520px; }
.join-form label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.join-form input[type="email"] { flex: 1 1 240px; min-height: 50px; padding: 12px 20px; border-radius: 999px; border: 1.5px solid var(--rule-dark); background: rgba(255, 255, 255, .08); color: #fff; font: inherit; font-size: 17px; }
.join-form input[type="email"]::placeholder { color: var(--on-dark-2); }
.join-form input[type="email"]:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; border-color: var(--gold); }
.join-form select { flex: 1 1 200px; min-height: 50px; padding: 12px 44px 12px 20px; border-radius: 999px; border: 1.5px solid var(--rule-dark); color: #fff; font: inherit; font-size: 16px; cursor: pointer; -webkit-appearance: none; appearance: none;
  background: rgba(255, 255, 255, .08) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23e9b44c' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 20px center; }
.join-form select:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; border-color: var(--gold); }
.join-form select option { color: var(--ink); background: #fff; }
.join-form button { min-height: 50px; cursor: pointer; font: inherit; font-weight: 600; }
.join-form button[disabled] { opacity: .6; cursor: progress; }
.join-form .trap { position: absolute; left: -9999px; }
.join-msg { flex-basis: 100%; min-height: 1.5em; font-size: 15px; color: var(--on-dark-2); }
.join-msg.ok { color: var(--gold); font-weight: 600; }
.join-msg.bad { color: #ffb4a8; }
.join-small { margin-top: 6px; font-size: 14px; color: var(--on-dark-2); max-width: 56ch; }
.contact .join-form { margin-top: 8px; }
.contact .wrap > p.join-small { font-size: 14px; margin-bottom: 0; }
.contact .btn.primary { background: var(--gold); border-color: var(--gold); color: var(--night); }
.contact .btn.primary:hover { background: #f4c566; }

/* sections */
.what, .models, .later, .need, .rules { padding-top: 88px; padding-bottom: 24px; }
.section-note { color: var(--ink-2); font-size: 18px; max-width: 68ch; margin: -14px 0 30px; }

/* the four launch models */
.model-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.model { display: flex; flex-direction: column; }
.model .price { font-family: var(--serif); font-size: 54px; line-height: 1; color: var(--ink); margin-top: 14px; }
.model h3 { font-family: var(--serif); font-size: 34px; font-weight: 400; line-height: 1.05; margin-top: 6px; }
.model .tag { font-family: var(--serif); font-style: italic; font-size: 19px; color: var(--gold-deep); margin: 4px 0 12px; }
.model ul { list-style: none; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--rule); }
.model li { color: var(--ink-2); font-size: 15px; padding-left: 20px; position: relative; }
.model li + li { margin-top: 6px; }
.model li::before { content: "+"; position: absolute; left: 0; font-family: var(--mono); color: var(--gold-deep); }
.all-models { margin-top: 22px; color: var(--ink-2); max-width: 78ch; }
.all-models strong { color: var(--ink); }

/* coming later */
.later-list { list-style: none; border-top: 1px solid var(--rule); }
.later-list li { display: grid; grid-template-columns: 210px 110px 1fr; gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.later-list h4 { font-family: var(--serif); font-size: 27px; font-weight: 400; line-height: 1.1; }
.later-list .price { font-family: var(--mono); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-deep); }
.later-list p { color: var(--ink-2); }

/* build-your-own card: photo instead of the drawn screen */
.calc-photo img { border-radius: 18px; box-shadow: 0 30px 70px rgba(0, 0, 0, .45); }
.calc-photo figcaption { color: var(--on-dark-2); }
.calc-photo figcaption span { color: var(--gold); }

/* the plain-language rules */
.rule-big { font-family: var(--serif); font-size: clamp(28px, 3.4vw, 40px); line-height: 1.12; color: var(--ink); margin-bottom: 10px; }

footer .legal { max-width: 78ch; margin: 10px auto 0; font-size: 13px; }
footer a { color: var(--on-dark); text-decoration: underline; }

@media (max-width: 1100px) {
  .model-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .hero-shot { justify-self: start; max-width: 460px; }
  .later-list li { grid-template-columns: 1fr auto; gap: 4px 16px; }
  .later-list p { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  .what, .models, .later, .need, .rules { padding-top: 64px; }
  .model-grid { grid-template-columns: 1fr; }
  .model .price { font-size: 46px; }
  .join-form button { flex: 1 1 100%; }
  .section-note { font-size: 17px; }
  .top nav .pill { padding: 12px 16px; }
}