/* "Get a free ad" form on the landing page, plus the small server-rendered notice pages
   (thank-you without JS, 404 for /free/). Loads after rb.css and uses its tokens. */

.fa-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.9fr);gap:48px;align-items:start;margin-top:40px}
.fa-form{position:relative;background:var(--paper);border:1px solid var(--rule);box-shadow:var(--lift);padding:34px 34px 30px;margin:0}
.fa-form::before{content:"";position:absolute;top:-11px;left:38px;width:86px;height:22px;background:var(--tape);border:1px solid var(--rule-soft);transform:rotate(-2.5deg)}
.fa-row{display:grid;grid-template-columns:1fr 1fr;gap:0 28px}
.fa-field{margin:0 0 22px;display:flex;flex-direction:column;gap:6px}
.fa-field label{font-family:var(--type);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.fa-opt{color:var(--accent);margin-left:6px;letter-spacing:.1em}
.fa-field input,.fa-field textarea{font:inherit;font-size:1.06rem;color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--rule);border-radius:0;padding:8px 0 7px;width:100%;transition:border-color .15s,background .15s}
.fa-field textarea{resize:vertical;min-height:5.2em;line-height:1.5;border:1px solid var(--rule);padding:10px 12px;background:rgba(255,255,255,.18)}
.fa-field input::placeholder,.fa-field textarea::placeholder{color:var(--muted);opacity:.55}
.fa-field input:focus,.fa-field textarea:focus{outline:none;border-color:var(--ink);background:rgba(255,255,255,.28)}
.fa-field input:focus-visible,.fa-field textarea:focus-visible{box-shadow:0 2px 0 0 var(--accent)}
.fa-hint{font-size:.86rem;color:var(--muted)}
.fa-field .fa-err{font-family:var(--type);font-size:.72rem;letter-spacing:.06em;color:#9B2C1F}
.fa-field.bad input,.fa-field.bad textarea{border-color:#9B2C1F}
.fa-short{max-width:320px}
.fa-trap{position:absolute!important;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.fa-send{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:6px}
.fa-send .btn[disabled]{opacity:.6;cursor:progress}
.fa-status{margin:0;font-size:1rem;color:var(--muted)}
.fa-status.bad{color:#9B2C1F}
.fa-done{padding:8px 0 4px}
.fa-done h3{font-size:clamp(2rem,4vw,2.8rem);margin-bottom:.4rem}
.fa-done p{margin:0 0 .8em}

.fa-terms{border-top:1px solid var(--rule);padding-top:16px}
.fa-terms ol{list-style:none;margin:0;padding:0}
.fa-terms li{display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--rule-soft);font-size:1.02rem}
.fa-terms .n{font-family:var(--type);font-size:.72rem;letter-spacing:.14em;color:var(--accent)}
.fa-terms strong{font-weight:600}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .fa-field textarea{background:rgba(0,0,0,.14)}
  :root:not([data-theme="light"]) .fa-field .fa-err,:root:not([data-theme="light"]) .fa-status.bad{color:#F09A8A}
  :root:not([data-theme="light"]) .fa-field.bad input,:root:not([data-theme="light"]) .fa-field.bad textarea{border-color:#F09A8A}
}
:root[data-theme="dark"] .fa-field textarea{background:rgba(0,0,0,.14)}
:root[data-theme="dark"] .fa-field .fa-err,:root[data-theme="dark"] .fa-status.bad{color:#F09A8A}

@media (max-width:980px){
  .fa-grid{grid-template-columns:1fr;gap:34px}
}
@media (max-width:620px){
  .fa-form{padding:28px 20px 24px}
  .fa-row{grid-template-columns:1fr}
  .fa-send .btn{width:100%;text-align:center}
}

/* ---- server-rendered notices (thank-you without JS, 404) ---- */
.notice{padding:72px 0 96px;min-height:60vh}
.notice h1{font-size:clamp(2.5rem,6vw,4.4rem);max-width:16ch;margin-bottom:.35em}
.notice .errs{margin:0 0 24px;padding-left:1.2em}
.notice .mailline{display:flex;flex-wrap:wrap;gap:14px;margin-top:22px}

/* ---- /free/<token> for a UGC pack: ads first, then hook / body / CTA grids ---- */
.ugcpack{padding:64px 0 84px}
.ugcpack h1{font-size:clamp(2.5rem,5.8vw,4.6rem);max-width:16ch}
.ugcpack .lede{margin-top:22px}
.ugc-dl{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin:30px 0 0}
.ugc-sec{padding:44px 0 0;border-top:0}
.ugc-sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;border-bottom:1px solid var(--rule);padding-bottom:10px;margin-bottom:12px}
.ugc-sec-head h2{font-family:var(--didone);font-weight:800;font-size:1.6rem;margin:0}
.ugc-blurb{margin:0 0 18px;max-width:60ch}
.ugc-ads{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:28px}
.ugc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:18px}
.ugc-ad,.ugc-seg{margin:0;background:var(--paper);border:1px solid var(--rule);padding:8px 8px 10px;box-shadow:var(--lift)}
.ugc-ad video,.ugc-seg video{display:block;width:100%;aspect-ratio:9/16;height:auto;background:#000;object-fit:cover}
.ugc-ad figcaption,.ugc-seg figcaption{display:flex;flex-direction:column;gap:4px;margin-top:8px}
.ugc-ad figcaption{flex-direction:row;justify-content:space-between}
.ugc-line{font-size:.95rem;line-height:1.35;unicode-bidi:plaintext}
.ugcpack .reply{margin-top:56px}
@media (max-width:620px){
  .ugcpack{padding:40px 0 64px}
  .ugc-ads{grid-template-columns:1fr 1fr;gap:14px}
  .ugc-grid{grid-template-columns:1fr 1fr;gap:12px}
}