/*
 * The demo page.
 *
 * Two columns: the offer on the left, the form on the right, which is the shape every club owner
 * has filled in before and is not the place to be inventive. The form sits on white against the
 * page's own wash so it reads as the thing to do, and it is the only card on the page.
 */

.start-wrap {
  display: grid;
  grid-template-columns: .9fr 1fr;
  gap: 72px;
  align-items: start;
  padding: 68px 0 96px;
}

/* Sized so the three written breaks are the only breaks. Any larger and "See how it runs," wraps
   itself, which orphans a word and makes the line look like a mistake. */
.start-copy h1 { font-size: clamp(42px, 4.5vw, 67px); line-height: 1.02; letter-spacing: -.042em; font-weight: 800; text-wrap: balance; }
.start-copy { padding-top: 36px; }
.start-copy .eyebrow { font-size: 11px; letter-spacing: 2.4px; margin-bottom: 24px; }
.start-copy .lede { font-size: 17px; line-height: 1.6; color: #3e5875; max-width: 430px; margin: 26px 0 0; }

.start-aside { margin: 40px 0 0; font-size: 12px; line-height: 1.7; color: #7a8ca1; max-width: 400px; border-top: 1px solid #e4ecf5; padding-top: 20px; }

/* ------------------------------------------------------------------ the form */

.start-form-wrap { min-width: 0; }

.start-form, .start-done {
  background: #fff;
  border: 1px solid #dfe8f3;
  border-radius: 18px;
  padding: 34px 32px 30px;
  box-shadow: 0 18px 48px #163c6216;
}
.start-form h2, .start-done h2 { font-size: 22px; letter-spacing: -.5px; margin: 0 0 22px; }

.field { display: block; margin-bottom: 16px; }
.field > span { display: block; font-size: 12px; font-weight: 600; color: #35506f; margin-bottom: 7px; }
.field > span > i { color: #0066ff; font-style: normal; margin-left: 2px; }

.field input, .field textarea {
  width: 100%;
  font: inherit;
  font-size: 14px;
  color: #07203f;
  background: #fbfdff;
  border: 1px solid #d9e4f1;
  border-radius: 9px;
  padding: 11px 13px;
  transition: border-color .15s, background .15s;
}
.field textarea { resize: vertical; line-height: 1.55; }
.field input::placeholder, .field textarea::placeholder { color: #9aabbf; }
.field input:focus, .field textarea:focus { outline: none; border-color: #0066ff; background: #fff; }
/* Only after a submit has been tried, so nothing is red before anybody has done anything wrong. */
.start-form.tried input:invalid, .start-form.tried textarea:invalid { border-color: #c62f5e; background: #fff7f9; }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field-row .field-small { max-width: 110px; }

.start-form .button { width: 100%; justify-content: center; margin-top: 8px; min-height: 50px; }
.start-form .button[disabled] { opacity: .6; pointer-events: none; }

.start-note { margin: 14px 0 0; font-size: 13px; line-height: 1.5; min-height: 0; }
.start-note.bad { color: #c62f5e; }
.start-small { margin: 16px 0 0; font-size: 11px; line-height: 1.6; color: #8294a8; }

/* The honeypot. Out of the layout and out of the tab order, but not `display:none`, which the
   scripts worth catching already know to skip. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.start-done p { font-size: 14px; line-height: 1.7; color: #3e5875; margin: 0 0 14px; max-width: 460px; }
.start-done .button { margin-top: 10px; }

@media (max-width: 980px) {
  .start-wrap { grid-template-columns: 1fr; gap: 36px; padding: 44px 0 70px; align-items: start; }
  .start-copy { padding-top: 0; }
  .start-copy h1 { font-size: 44px; }
  .start-copy .lede, .start-aside { max-width: none; }
}
@media (max-width: 540px) {
  .start-copy h1 { font-size: 36px; }
  .start-form, .start-done { padding: 26px 20px 24px; border-radius: 14px; }
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .field-row .field-small { max-width: none; }
}
/* Match the landing page collection. */
body { background:radial-gradient(ellipse at top left,#e3f5ff,transparent 65%),#f8fcff; }
.header { position:relative; background:transparent; }
.header .brand { letter-spacing:-1.2px; }
.header nav { gap:20px; }
.start-wrap { position:relative; gap:64px; padding-top:54px; }
.start-copy { position:relative; isolation:isolate; min-height:640px; }
.start-copy:after { content:''; position:absolute; z-index:-1; pointer-events:none; top:270px; left:calc((min(1200px,100vw - 80px) - 100vw)/2 - 60px); width:calc(100% + 150px); height:430px; background:url('../assets/img/club-hero-saas-v1.webp') center bottom/cover no-repeat; mask-image:linear-gradient(transparent,#000 15%,#000 80%,transparent); }
.start-copy h1 { font-size:clamp(42px,4.7vw,66px); line-height:1.06; color:#07203f; }
.start-copy .eyebrow { color:#0066ff; }.status-dot { display:none; }
.start-copy .lede { color:#60758a; font-size:16px; }
.start-aside { margin-top:330px; background:#f8fcffcc; border:0; padding:0; }
.start-form-wrap { padding:14px; border:1px solid #d7e9f6; border-radius:26px; background:linear-gradient(135deg,#e7f5ff,#f0fbfa); box-shadow:0 20px 55px #1465a30a; }
.start-form,.start-done { border:1px solid #dfeaf3; border-radius:16px; box-shadow:none; padding:30px 26px; }
.field input,.field textarea { border-radius:12px; min-height:48px; }
.field input:focus-visible,.field textarea:focus-visible { box-shadow:0 0 0 3px #0066ff18; }
.start-form .button,.start-done .button { border-radius:999px; background:#0066ff; color:white; }
.footer { border-top:1px solid #dfeaf3; background:transparent; }
@media(max-width:980px) {
 .start-wrap { gap:28px; padding-top:30px; }
 .start-copy { min-height:0; padding-bottom:170px; }
 .start-copy:after { top:auto; bottom:-15px; height:260px; left:-40px; width:calc(100% + 80px); background-size:100% auto; }
 .start-copy .lede { max-width:540px; }
 .start-aside { margin-top:20px; max-width:540px; font-size:11px; }
}
@media(max-width:540px) {
 .start-copy h1 { font-size:42px; }
 .start-copy .lede { font-size:14px; }
 .start-form-wrap { padding:8px; border-radius:22px; }
 .start-form,.start-done { padding:24px 18px; }
 .start-wrap { padding-bottom:48px; }
}
.start-copy h1 { font-family:'Figtree',sans-serif; font-weight:700; text-wrap:initial; font-size:clamp(40px,4.1vw,60px); }
@media(max-width:540px) { .start-copy h1 { font-size:40px; } }

body { overflow-x:clip; }
/* Keep the player-support note below the artwork, never over the ribbon. */
.start-aside { margin-top:410px; background:transparent; }
@media(max-width:980px) {
  .start-copy { padding-bottom:0; }
  .start-copy:after { top:220px; bottom:auto; height:260px; }
  .start-aside { margin-top:290px; }
}
@media(max-width:540px) {
  .start-copy:after { top:240px; }
  .start-aside { margin-top:290px; }
}
/* Let artwork occupy its own row so copy length cannot create overlaps. */
.start-copy { display:flex; flex-direction:column; padding-bottom:0; }
.start-copy:after { position:relative; top:auto; bottom:auto; order:1; flex:none; height:360px; margin-top:20px; }
.start-aside { order:2; margin-top:20px; }
@media(max-width:980px) { .start-copy:after { top:auto; height:220px; margin-top:16px; }.start-aside { margin-top:12px; } }
/* A full-width phone canvas with symmetric gutters. */
html,body { width:100%; max-width:100%; overflow-x:clip; }
.start-wrap>* { min-width:0; }
@media(max-width:800px) {
 .header .signin { display:inline-flex; align-items:center; min-height:40px; font-size:12px; white-space:nowrap; }
 .header .container { width:calc(100% - 32px); }
 .start-wrap,.footer.container { width:calc(100% - 32px); margin-inline:auto; }
 .start-form-wrap { width:100%; min-width:0; }
 .start-copy:after { left:-16px; width:calc(100% + 32px); }
 .start-wrap { grid-template-columns:minmax(0,1fr); }
}