/* BounceHarmony: the shared sheet for every page. landing.css adds only what
   the wide landing layout needs on top of this.

   The palette is lifted from the channel's own brand artwork -- cream ground,
   navy ink, and the sky blue and blush that appear there as flat overlapping
   shapes -- so the site, the mark and the videos read as one thing. Two
   designed themes rather than one inverted one: cream by day, and by night
   the arena black the videos are already shot on, which the clips then sit
   flush against.

   The form is laid out to land in one phone screen: most people arrive from a
   link under a video, on a phone, and the whole ask is one line of text. */
:root{
  color-scheme:light dark;
  --bg:#f3efe4;
  --surface:#fcfbf7;
  --line:#e3ddcc;
  --field-line:#8b8672;
  --text:#1b2338;
  --dim:#5c6076;
  --accent:#1e6fb5;
  --accent-ink:#ffffff;
  --accent-ring:rgba(30,111,181,.24);
  --accent-hover:#175a94;
  --danger:#bf3350;
  --ok:#1f8a4c;
  --sky:#5fbce7;
  --blush:#f9b0b0;
  --navy:#1b2338;
  --on-navy:#f3efe4;
  --on-navy-dim:#b9bdcd;
  --shadow:0 12px 40px rgba(27,35,56,.18);
  --font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  --display:"Bricolage Grotesque",var(--font);
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#12172a;
    --surface:#1b2138;
    --line:#2b3252;
    --field-line:#626a90;
    --text:#ecebf4;
    --dim:#949ab6;
    --accent:#6cc2ea;
    --accent-ink:#0b1020;
    --accent-ring:rgba(108,194,234,.26);
    --accent-hover:#8ed2f1;
    --danger:#ff7a92;
    --ok:#4fd08a;
    --sky:#2f6f96;
    --blush:#f9b0b0;
    --navy:#1e2a4a;
    --on-navy:#f3efe4;
    --on-navy-dim:#aab3cd;
    --shadow:0 12px 40px rgba(0,0,0,.5);
  }
}
/* Bricolage Grotesque, self-hosted (latin subset, variable 400-800) so the
   page needs no third-party origin and the CSP stays 'self'. */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("fonts/bricolage.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
                 U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--text);
  font:16px/1.55 var(--font);-webkit-font-smoothing:antialiased;
}
/* The narrow centred sheet: the form, the thanks note, the privacy page. The
   landing sets its own body class and lays itself out (landing.css). */
body.page{
  padding:26px 20px 34px;
  display:flex;min-height:100vh;justify-content:center;align-items:flex-start;
}
body.page main{width:100%;max-width:540px}
a{color:inherit}

.mark{display:flex;align-items:center;gap:8px;margin:0 0 20px;
  text-decoration:none;color:inherit;width:max-content}
.mark img{display:block;flex:none;width:26px;height:26px;border-radius:50%}
.mark span{font-size:13.5px;font-weight:600;letter-spacing:-.01em;color:var(--dim)}

h1{
  margin:0 0 9px;font-family:var(--display);
  font-size:clamp(28px,7.4vw,38px);line-height:1.04;
  letter-spacing:-.032em;font-weight:700;
}
.lede{margin:0 0 22px;font-size:15.5px;line-height:1.5;color:var(--dim);max-width:44ch}

/* Three real clips, doing the job the examples list used to do ---------- */
.clips{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0 0 26px}
.clips figure{margin:0}
.clips video{
  display:block;width:100%;aspect-ratio:4/5;object-fit:cover;
  background:#000;border:1px solid var(--line);border-radius:10px;
}
.clips figcaption{
  margin-top:7px;font-size:11.5px;line-height:1.32;color:var(--dim);
  letter-spacing:-.005em;
}

/* Form ------------------------------------------------------------------ */
.fld{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.fld label{font-size:13.5px;font-weight:600;color:var(--text)}
.fld .opt{font-weight:400;color:var(--dim)}
/* Hints sit above the input so an autocomplete popover never covers them. */
.fld .hint{margin:-2px 0 2px;font-size:12.5px;line-height:1.45;color:var(--dim)}
.fld input,.fld textarea{
  font:inherit;font-size:16px;color:var(--text);
  background:var(--surface);border:1px solid var(--field-line);border-radius:9px;
  padding:11px 12px;resize:vertical;min-height:44px;
  transition:border-color .12s ease,box-shadow .12s ease;
}
.fld textarea{line-height:1.5}
.fld input::placeholder,.fld textarea::placeholder{color:var(--dim);opacity:.72}
.fld input:focus-visible,.fld textarea:focus-visible{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring);
}
.fld input:disabled{opacity:.45;cursor:not-allowed}

/* The credit row: a checkbox that enables the handle box beside it. */
.fld label.check{
  display:flex;align-items:center;gap:10px;cursor:pointer;
  font-weight:500;font-size:14px;min-height:28px;
}
.fld label.check input{width:20px;height:20px;margin:0;flex:none;accent-color:var(--accent)}

/* Validation only after the person has been in the field (or tried to
   send). `.touched` is what form.js adds where :user-invalid is missing. */
.fld .err{
  display:none;margin:0;font-size:12.5px;line-height:1.4;color:var(--danger);
}
.fld :is(input,textarea):is(:user-invalid,.touched:invalid){
  border-color:var(--danger);box-shadow:0 0 0 3px var(--accent-ring);
}
.fld :is(input,textarea):is(:user-invalid,.touched:invalid) ~ .err{display:block}
.fld :is(input,textarea):user-valid:not(:placeholder-shown){border-color:var(--ok)}

.btn{
  display:inline-block;background:var(--accent);color:var(--accent-ink);
  border:none;border-radius:9px;padding:12px 22px;min-height:44px;
  font:inherit;font-size:15px;font-weight:650;letter-spacing:-.005em;
  cursor:pointer;text-decoration:none;transition:background .12s ease;
}
.btn:hover{background:var(--accent-hover)}
.btn:focus-visible{outline:2px solid var(--text);outline-offset:2px}
form .btn{width:100%;margin-top:4px}
@media (min-width:520px){form .btn{width:auto}}

.error{
  margin:0 0 16px;padding:10px 12px;font-size:14px;line-height:1.4;
  color:var(--text);background:var(--surface);
  border:1px solid var(--danger);border-left-width:4px;border-radius:8px;
}

.foot{margin:18px 0 0;font-size:12.5px;line-height:1.45;color:var(--dim)}
.foot a{color:var(--dim)}

/* Privacy page --------------------------------------------------------- */
.prose{margin:0 0 26px;max-width:52ch}
.prose h2{margin:20px 0 4px;font-family:var(--display);font-size:15.5px;letter-spacing:-.01em}
.prose p{margin:0;font-size:14.5px;line-height:1.55;color:var(--dim)}

/* Honeypot: off-screen for humans, still present in the DOM for bots that
   skip fields hidden via display:none or the hidden attribute. */
.hp{position:absolute;left:-9999px;top:-9999px}

/* The one question, as a native <dialog> opened the moment Send is tapped.
   A card in the middle of the screen over a soft backdrop; the chips are
   plain buttons, one tap each. */
.survey{
  width:min(100% - 24px,440px);margin:auto;padding:22px 20px 16px;
  color:var(--text);background:var(--surface);border:1px solid var(--line);
  border-radius:16px;box-shadow:var(--shadow);
}
.survey::backdrop{background:rgba(14,16,32,.45);backdrop-filter:blur(2px)}
.survey-note{margin:0 0 6px;font-size:12.5px;font-weight:500;color:var(--ok)}
.survey-q{margin:0 0 14px;font-family:var(--display);font-size:19px;line-height:1.25;letter-spacing:-.02em;font-weight:700}
.chips{display:flex;flex-direction:column;gap:8px}
.chip{
  display:block;width:100%;text-align:left;
  font:inherit;font-size:15px;font-weight:500;line-height:1.3;color:var(--text);
  background:var(--bg);border:1px solid var(--field-line);border-radius:12px;
  padding:12px 14px;min-height:44px;cursor:pointer;
  transition:border-color .12s ease,background .12s ease;
}
.chip:hover{border-color:var(--accent)}
.chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.chip[disabled]{opacity:.6;cursor:progress}
.survey-skip{
  display:block;margin:10px auto 0;padding:8px 12px;border:0;background:none;
  font:inherit;font-size:13px;color:var(--dim);cursor:pointer;
}
.survey-skip:hover{color:var(--text)}
.btn[disabled]{opacity:.7;cursor:progress}
.cf-turnstile{margin:0 0 12px;min-height:0}

/* Roomier once there is height to spend, e.g. on a laptop. */
@media (min-height:820px) and (min-width:520px){
  body.page{align-items:center;padding-top:40px;padding-bottom:40px}
  h1{margin-bottom:12px}
  .lede{margin-bottom:28px}
  .clips{margin-bottom:32px}
  .fld{margin-bottom:20px}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}