/* /free-website: the series offer page. Layered on css/page.css (nav, hero, blocks, grid, steps, faq, footer). */
.fw-hero h1 { max-width: 16ch; }
.fw-note { position: relative; margin-top: 22px; font: 400 15px var(--serif); font-style: italic; color: var(--muted); }
.fw-hero .ctas { margin-top: 32px; }

/* four cards per row on wide screens for "what you get" and the proof */
.block .grid { grid-template-columns: repeat(4, 1fr); }
.fw-fine { grid-template-columns: repeat(3, 1fr); }
.fw-work { grid-template-columns: repeat(4, 1fr); }
.fw-work .wk h3 { font-size: 22px; }

/* who it's for */
.fw-list { list-style: none; display: grid; gap: 14px; margin: 0 0 1.4em; }
.fw-list li { position: relative; padding-left: 28px; font-size: 17px; color: #d4cec6; }
.fw-list li::before { content: ''; position: absolute; left: 2px; top: .72em; width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 10px var(--red); }

/* application */
.fw-apply { position: relative; overflow: hidden; background: radial-gradient(ellipse 55% 60% at 100% 0%, rgba(200,255,0,.16), transparent 70%); }
.fw-apply-head { max-width: 760px; margin-bottom: 5vh; }
.fw-apply-head h2 { margin: 16px 0 14px; }
.fw-apply-head p:last-child { color: #c4beb6; max-width: 560px; }
.fw-form { max-width: 820px; display: grid; gap: 18px; background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: clamp(22px, 3vw, 40px); }
.fw-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.fw-form label { display: grid; gap: 7px; }
.fw-form label > span { font: 500 11px var(--sans); letter-spacing: .18em; text-transform: uppercase; color: #bdb7af; }
.fw-form label > span em { font-style: normal; text-transform: none; letter-spacing: 0; color: var(--muted); }
.fw-form input:not([type=radio]):not([type=checkbox]), .fw-form textarea, .fw-form select {
  width: 100%; background: #0a0a0a; border: 1px solid rgba(255,255,255,.14); border-radius: 12px; padding: 14px 16px; color: var(--ink);
  font: 400 16px var(--sans); transition: border-color .25s, box-shadow .25s; -webkit-appearance: none; appearance: none; }
.fw-form select { background-image: linear-gradient(45deg, transparent 50%, #bdb7af 50%), linear-gradient(135deg, #bdb7af 50%, transparent 50%);
  background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 42px; }
.fw-form select option { background: #0f0e0e; }
.fw-form textarea { resize: vertical; min-height: 120px; }
.fw-form input:focus, .fw-form textarea:focus, .fw-form select:focus { outline: none; border-color: rgba(200,255,0,.7); box-shadow: 0 0 0 3px rgba(200,255,0,.15); }
.fw-form .bad { border-color: #ff5a3c !important; }
.fw-form ::placeholder { color: #6f6a64; }
.fw-choice { border: 0; padding: 0; display: grid; gap: 10px; }
.fw-choice legend { font: 500 11px var(--sans); letter-spacing: .18em; text-transform: uppercase; color: #bdb7af; margin-bottom: 10px; }
.fw-choice label, .fw-agree { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; font: 400 15px var(--sans); color: #d4cec6; }
.fw-choice label { border: 1px solid rgba(255,255,255,.12); border-radius: 12px; padding: 13px 16px; transition: border-color .25s, background .25s; }
.fw-choice label:has(:checked) { border-color: rgba(200,255,0,.6); background: rgba(200,255,0,.06); }
.fw-choice input, .fw-agree input { accent-color: var(--red); width: 18px; height: 18px; margin-top: 2px; flex: none; }
.fw-choice label > span { text-transform: none; letter-spacing: 0; font-size: 15px; color: var(--ink); }
.fw-agree > span { text-transform: none; letter-spacing: 0; font-size: 14px; color: #d4cec6; }
.fw-agree.bad-box { color: #ff5a3c; }
.fw-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.fw-error { color: #ff5a3c; font-size: 14px; }
.fw-submit { justify-self: start; border: 0; cursor: pointer; font-family: var(--sans); }
.fw-submit[disabled] { opacity: .6; cursor: wait; transform: none; }
.fw-small { font-size: 13px; color: var(--muted); }
.fw-done { max-width: 720px; }
.fw-done h2 { margin: 16px 0 14px; }
.fw-done p:not(.kicker) { color: #c4beb6; }

@media (max-width: 1100px) { .block .grid, .fw-work { grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px) { .fw-fine { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) {
  .block .grid, .fw-work, .fw-fine, .fw-row { grid-template-columns: 1fr; }
  .fw-submit { justify-self: stretch; }
}