/* The Swing Check: The Backniners Club */

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}
.skip-link {
  position: absolute; left: -9999px; top: 12px;
  background: var(--char); color: var(--stone);
  padding: 12px 20px; border-radius: 10px; z-index: 10;
  font: 600 0.9rem var(--sans); text-decoration: none;
}
.skip-link:focus { left: 12px; }

.kicker.light { color: var(--sage); }

/* ---- hero (form lives here) ---- */
.sc-hero {
  position: relative;
  background:
    linear-gradient(rgba(18, 28, 22, 0.8), rgba(18, 28, 22, 0.86)),
    url("img/textures/grass.jpg") center / cover no-repeat var(--pine);
  border-radius: 28px;
  margin-top: 10px;
  padding: 84px 90px 88px;
  color: var(--cream);
  overflow: hidden;
}
.sc-hero .inner { position: relative; max-width: 680px; }
.sc-hero h1 {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(2.8rem, 7vw, 5rem);
  line-height: 1.02; letter-spacing: -0.015em;
  margin: 22px 0 20px; color: var(--cream);
  text-wrap: balance;
}
.sc-hero h1 em { font-style: normal; font-weight: 600; }
.sc-hero .sub { font-size: 1.2rem; color: var(--cream-soft); max-width: 52ch; }
.sc-form { margin-top: 34px; display: flex; flex-direction: column; gap: 18px; max-width: 640px; }
.sc-form[hidden] { display: none; }
.sc-form .row { display: flex; gap: 16px; }
.sc-form .row .field { flex: 1; min-width: 0; }
@media (max-width: 620px) { .sc-form .row { flex-direction: column; gap: 18px; } }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-size: 0.9rem; font-weight: 500; color: var(--cream); }
.field label .opt { color: rgba(243, 237, 218, 0.55); font-weight: 400; }
.sc-form input,
.sc-form select,
.sc-form textarea {
  width: 100%;
  background: rgba(243, 237, 218, 0.08);
  border: 1px solid rgba(243, 237, 218, 0.35);
  border-radius: 12px;
  padding: 15px 18px;
  font: 0.98rem var(--sans);
  color: var(--cream);
}
.sc-form input::placeholder,
.sc-form textarea::placeholder { color: rgba(243, 237, 218, 0.5); }
.sc-form textarea { resize: vertical; min-height: 58px; }
.sc-form select {
  appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 42px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23f3edda' stroke-width='1.6'/></svg>");
  background-repeat: no-repeat; background-position: right 16px center;
}
.sc-form select option { color: #21221d; }

/* upload drop zone */
.field-file .dropzone {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; text-align: center;
  min-height: 128px; padding: 22px;
  border: 1.5px dashed rgba(243, 237, 218, 0.45);
  border-radius: 16px;
  background: rgba(243, 237, 218, 0.05);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.field-file .dropzone:hover,
.field-file .dropzone.dragging,
.field-file .dropzone:focus-within { border-color: var(--cream); background: rgba(243, 237, 218, 0.1); }
.field-file .dropzone:focus-within { outline: 3px solid var(--sage); outline-offset: 2px; }
.field-file .dropzone.has-file { border-style: solid; border-color: var(--sage); }
.dropzone input[type="file"] {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer; padding: 0; border: 0;
}
.dz-icon { font-size: 1.6rem; line-height: 1; }
.dz-text { font-size: 1rem; font-weight: 500; color: var(--cream); word-break: break-word; padding: 0 10px; }
.dz-hint { font-size: 0.82rem; color: rgba(243, 237, 218, 0.6); }

/* upload progress */
.progress { height: 8px; border-radius: 999px; background: rgba(243, 237, 218, 0.18); overflow: hidden; margin-top: 4px; }
.progress[hidden] { display: none; }
.progress .bar { display: block; height: 100%; width: 2%; background: var(--sage); border-radius: 999px; transition: width 0.2s ease; }

.sc-form button.btn-cream { align-self: flex-start; margin-top: 4px; }
@media (max-width: 620px) { .sc-form button.btn-cream { align-self: stretch; } }
.btn-cream {
  background: var(--cream); color: var(--pine-deep);
  border: 0; border-radius: 12px;
  padding: 16px 32px;
  font: 600 0.95rem var(--sans);
  cursor: pointer;
}
.btn-cream:hover { background: #fff; }
.btn-cream[disabled] { opacity: 0.6; cursor: default; }
.sc-hero .trust { margin-top: 18px; font-size: 0.85rem; color: rgba(243, 237, 218, 0.65); max-width: 60ch; }
.sc-hero .trust.success { color: var(--cream); font-size: 1.05rem; line-height: 1.6; }
.sc-hero .trust a { color: var(--cream); }
.sc-hero .trust a.btn-cream {
  display: inline-block; margin-top: 16px; text-decoration: none;
  color: var(--pine-deep);
}
@media (max-width: 900px) { .sc-hero { padding: 56px 40px 64px; } }
@media (max-width: 640px) { .sc-hero { padding: 48px 26px 56px; } }

/* ---- how it works ---- */
.steps { padding: 96px 0 0; }
.steps h2 {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(1.8rem, 3.6vw, 2.8rem);
  letter-spacing: -0.01em;
  margin-bottom: 30px;
}
.step-cards {
  list-style: none;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
}
@media (max-width: 1000px) { .step-cards { grid-template-columns: 1fr; } }
.step {
  background: var(--white); border: 1px solid var(--border); border-radius: 20px;
  padding: 30px 32px 28px; min-height: 190px;
}
.step .num {
  font-family: var(--serif); font-weight: 300; font-size: 3rem;
  line-height: 1; color: var(--sage-deep); display: block;
}
.step h3 { font-family: var(--serif); font-weight: 400; font-size: 1.4rem; margin: 18px 0 10px; }
.step p { color: var(--muted); font-size: 1rem; line-height: 1.6; }
.step p a { color: var(--sage-deep); font-weight: 600; }

/* ---- filming guide ---- */
.guide { padding: 96px 0 0; }
.guide-card {
  background:
    linear-gradient(rgba(243, 237, 218, 0.74), rgba(243, 237, 218, 0.82)),
    url("img/textures/sand.jpg") center / cover no-repeat var(--cream);
  border-radius: 28px;
  padding: 64px 90px 68px;
}
@media (max-width: 900px) { .guide-card { padding: 48px 40px 52px; } }
@media (max-width: 640px) { .guide-card { padding: 40px 26px 46px; } }
.guide-card h2 {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(1.9rem, 4vw, 3rem);
  margin: 16px 0 26px;
  text-wrap: balance;
}
.guide-list { list-style: none; max-width: 62ch; }
.guide-list li {
  padding: 16px 0 16px 34px; position: relative;
  font-size: 1.05rem; line-height: 1.65;
  border-bottom: 1px solid var(--border);
}
.guide-list li:last-child { border-bottom: 0; }
.guide-list li::before {
  content: "⛳"; position: absolute; left: 0; top: 17px; font-size: 0.95rem;
}
.guide-note { margin-top: 18px; color: var(--sage-deep); font-size: 1rem; max-width: 62ch; }

/* ---- what comes back ---- */
.report {
  background:
    linear-gradient(rgba(20, 26, 24, 0.78), rgba(20, 26, 24, 0.84)),
    url("img/textures/iron.jpg") center / cover no-repeat var(--pine);
  border-radius: 28px;
  margin-top: 96px;
  padding: 72px 90px;
  color: var(--cream);
}
@media (max-width: 900px) { .report { padding: 52px 40px; } }
@media (max-width: 640px) { .report { padding: 44px 26px; } }
.report h2 {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(1.9rem, 4vw, 3.2rem);
  line-height: 1.1; margin: 18px 0 16px;
  text-wrap: balance;
}
.report p { color: var(--cream-soft); font-size: 1.1rem; line-height: 1.7; max-width: 58ch; }
.report p a { color: var(--cream); font-weight: 600; }
.report .again { margin-top: 22px; color: var(--sage); font-size: 1rem; }

/* ---- small print ---- */
.small-print { padding: 88px 0 0; max-width: 70ch; }
.small-print h2 {
  font-size: 0.76rem; font-weight: 600;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--sage-deep); margin-bottom: 18px;
}
.small-print ul { list-style: none; }
.small-print li {
  color: var(--muted); font-size: 0.95rem; line-height: 1.7;
  padding: 10px 0 10px 22px; position: relative;
}
.small-print li::before {
  content: "·"; position: absolute; left: 4px; top: 8px;
  color: var(--sage-deep); font-weight: 700; font-size: 1.3rem;
}