/* Gravity — guest list page.

   Loaded only on this template. The page is a single column on purpose: it is
   read on a phone, from an Instagram bio link, by somebody deciding in about
   five seconds whether this is worth twenty. Everything is sized for that. */

/* Without this the download button is width:100% plus 40px of its own padding,
   which is wider than the phone it is on. The theme does not set it globally,
   so the page sets it for itself. */
.glist, .glist *, .glist *::before, .glist *::after{ box-sizing: border-box }

.glist{ background:#08080A; color:#fff; padding-top:66px; }
.glist-wrap{ max-width:520px; margin:0 auto; padding:0 24px; }

.glist,.glist input,.glist button,.glist textarea,.glist select{
  font-family:var(--body,'DM Sans',-apple-system,Helvetica,Arial,sans-serif);
}
.glist{ font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased }

.glist-top{ padding:48px 0 30px }
.gl-kicker{ font-size:10.5px; letter-spacing:.24em; text-transform:uppercase;
  color:rgba(255,255,255,.40); margin:0 0 14px; font-weight:500 }
/* !important throughout the headings, because responsive.css states
   `h1{font-size:50px !important}` and `h2{...!important}` for every element on
   the site at each breakpoint. Specificity cannot reach past that — measured:
   `main.glist h1` loses, the same rule with !important wins. Scoped to .glist,
   so nothing outside this page is touched. */
.glist h1{ font-family:var(--display,'Clash Display',sans-serif);
  font-size:clamp(40px,11vw,58px) !important; line-height:.94 !important;
  letter-spacing:-.03em; font-weight:600 !important; margin:0; color:#fff;
  text-transform:none }
.glist h1 em{ font-style:normal; color:#FF520E }
.gl-say{ font-size:21px; line-height:1.35; color:#fff; margin:20px 0 0; font-weight:500 }
.gl-say em{ font-style:normal; color:#FF520E; font-weight:700 }
.gl-sub{ font-size:16px; color:rgba(255,255,255,.62); margin:14px 0 0 }
.gl-sub em{ font-style:normal; color:#fff }
.gl-when{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px;
  letter-spacing:.06em; color:rgba(255,255,255,.40); margin:18px 0 0; text-transform:uppercase }

/* ---- the reason to do it now ----
   Tinted rather than loud: on an ink page a filled orange slab would outshout
   the headline, and the headline is the offer. */
.gl-urgent{ display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start;
  margin:24px 0 0; padding:14px 16px; border-radius:12px;
  background:rgba(255,82,14,.10); border:1px solid rgba(255,82,14,.32);
  font-size:14.5px; line-height:1.5; color:rgba(255,255,255,.80) }
.gl-urgent em{ font-style:normal; color:#FF7A45; font-weight:700 }
.gl-urgent i{ width:8px; height:8px; border-radius:50%; background:#FF520E;
  margin-top:7px; box-shadow:0 0 0 0 rgba(255,82,14,.55);
  animation:gl-pulse 2.2s cubic-bezier(.4,0,.6,1) infinite }
@keyframes gl-pulse{
  0%{ box-shadow:0 0 0 0 rgba(255,82,14,.5) }
  70%{ box-shadow:0 0 0 9px rgba(255,82,14,0) }
  100%{ box-shadow:0 0 0 0 rgba(255,82,14,0) }
}
@media (prefers-reduced-motion:reduce){ .gl-urgent i{ animation:none } }

.gl-steps{ list-style:none; margin:30px 0 0; padding:0 }
.gl-steps li{ display:grid; grid-template-columns:30px 1fr; gap:14px; align-items:baseline;
  padding:15px 0; border-top:1px solid rgba(255,255,255,.10); font-size:17px }
.gl-steps li b{ font-family:ui-monospace,Menlo,monospace; font-size:12px;
  font-weight:500; color:#FF520E }
.gl-at{ font-family:ui-monospace,Menlo,monospace; font-size:15px; color:#FF520E }

.gl-rule{ margin:24px 0 0; padding:14px 16px; border:1px solid rgba(255,255,255,.10);
  border-radius:10px; background:#101014; font-size:14px;
  color:rgba(255,255,255,.62); line-height:1.5 }
.gl-rule em{ font-style:normal; color:#fff; font-weight:700 }

/* ---- flyer + link ---- */
.gl-kit{ margin:30px 0 0; padding:22px 0 0; border-top:1px solid rgba(255,255,255,.10) }
.gl-kit h2,.gl-form h2{ font-family:var(--body,'DM Sans',sans-serif) !important;
  font-size:10.5px !important; line-height:1.3 !important; letter-spacing:.22em;
  text-transform:uppercase; color:rgba(255,255,255,.40);
  margin:0 0 16px; font-weight:500 !important }
.gl-poster{ display:block; width:200px; max-width:62%; margin:0 auto 16px; border-radius:12px;
  overflow:hidden; border:1px solid rgba(255,255,255,.12); line-height:0;
  transition:border-color .18s, transform .18s }
.gl-poster img,
.gl-poster video{ width:100%; height:auto; display:block }
/* The video preview is not a link — tapping it should play or pause, not
   navigate. The button underneath is what opens the file. */
.gl-poster-video{ cursor: default }
.gl-poster-video:hover{ border-color: rgba(255,255,255,.12); transform: none }

/* The line under the button. Quiet on purpose: it is an instruction for the
   few who need it, not a second call to action. */
.gl-save{ font-size: 13px; color: rgba(255,255,255,.40); margin: 10px 0 0; text-align: center }
.gl-poster:hover{ border-color:rgba(255,255,255,.4) }
@media (hover:hover) and (pointer:fine){ .gl-poster:hover{ transform:translateY(-2px) } }

.gl-grab{ display:flex; align-items:center; justify-content:center; gap:10px; width:100%;
  padding:16px 20px; border:1px solid rgba(255,255,255,.22); border-radius:12px;
  background:transparent; color:#fff; font-size:15.5px; font-weight:700;
  text-decoration:none; cursor:pointer;
  transition:border-color .18s,background-color .18s,transform .18s }
.gl-grab:hover,.gl-grab:focus-visible{ border-color:#fff; background:rgba(255,255,255,.06); color:#fff }
@media (hover:hover) and (pointer:fine){ .gl-grab:hover{ transform:translateY(-2px) } }
.gl-grab svg{ width:17px; height:17px; flex:none }
.gl-linkbox{ margin:12px 0 0; display:grid; grid-template-columns:1fr auto; gap:10px;
  align-items:center; padding:12px 12px 12px 15px;
  border:1px solid rgba(255,255,255,.10); border-radius:12px; background:#101014 }
.gl-linkbox code{ font-family:ui-monospace,Menlo,monospace; font-size:12px;
  color:rgba(255,255,255,.62); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.gl-copy{ border:0; border-radius:999px; padding:9px 16px; background:rgba(255,255,255,.10);
  color:#fff; font-size:13px; font-weight:700; cursor:pointer; white-space:nowrap;
  transition:background-color .18s }
.gl-copy:hover{ background:rgba(255,255,255,.18) }
.gl-copy.done{ background:rgba(62,207,142,.16); color:#3ECF8E }
.gl-hint{ font-size:13px; color:rgba(255,255,255,.40); margin:11px 0 0 }

/* ---- form ----
   Ninja Forms ships its own look, built for a white page. Restyled here rather
   than fought field by field: the visitor should not be able to tell that a
   plugin drew this. */
.gl-form{ margin:34px 0 0; padding:30px 0 0; border-top:1px solid rgba(255,255,255,.10) }
.gl-closed{ font-size:15.5px; color:rgba(255,255,255,.62); margin:0 }
.gl-closed em{ font-style:normal; color:#fff }
.gl-after{ font-size:13px; color:rgba(255,255,255,.40); margin:14px 0 0 }
.gl-foot{ padding:32px 0 64px; font-size:13px; margin:0 }
.gl-foot a{ color:rgba(255,255,255,.62) }

.glist .nf-form-fields-required{ display:none }
.glist .nf-field-container{ margin-bottom:13px }
.glist .nf-field-label{ font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(255,255,255,.40); font-weight:500; margin-bottom:6px }
.glist .nf-field-label .ninja-forms-req-symbol{ color:#FF520E }
.glist .nf-field-element input[type=text],
.glist .nf-field-element input[type=email],
.glist .nf-field-element textarea{
  width:100%; background:#101014; border:1px solid rgba(255,255,255,.10);
  border-radius:10px; padding:15px 16px; color:#fff; font-size:16px;
  box-shadow:none; height:auto; transition:border-color .18s }
.glist .nf-field-element input::placeholder,
.glist .nf-field-element textarea::placeholder{ color:rgba(255,255,255,.30) }
.glist .nf-field-element input:focus,
.glist .nf-field-element textarea:focus{ outline:0; border-color:#FF520E; background:#141418 }

/* radios and checkboxes: the plugin's own markup, given the page's spacing */
.glist .nf-field-element ul{ list-style:none; margin:0; padding:0; display:grid; gap:11px }
.glist .list-radio-wrap .nf-field-element ul{ grid-auto-flow:column; justify-content:start; gap:22px }
.glist .nf-field-element li label{ display:grid; grid-template-columns:20px 1fr; gap:12px;
  align-items:start; font-size:14.5px; line-height:1.45; color:rgba(255,255,255,.62);
  cursor:pointer; margin:0; font-weight:400 }
.glist .nf-field-element li input[type=checkbox],
.glist .nf-field-element li input[type=radio]{ width:19px; height:19px; margin:1px 0 0;
  accent-color:#FF520E }
.glist .checkbox-wrap .nf-field-element label{ display:grid; grid-template-columns:20px 1fr;
  gap:12px; align-items:start; font-size:14.5px; line-height:1.45;
  color:rgba(255,255,255,.62); cursor:pointer }

/* the group of confirmations reads as one block, the way it does on paper */
.glist .listcheckbox-wrap .nf-field-element{ padding:16px; border-radius:12px;
  background:#101014; border:1px solid rgba(255,255,255,.10) }

.glist .nf-field-element .ninja-forms-field[type=button],
.glist .nf-field-element input[type=submit]{
  background:#FF520E; color:#fff; border:0; border-radius:999px;
  padding:18px 32px; font-size:16px; font-weight:700; cursor:pointer; width:auto;
  box-shadow:0 6px 30px -8px rgba(255,82,14,.7); height:auto;
  transition:transform .18s,background-color .18s }
.glist .nf-field-element .ninja-forms-field[type=button]:hover,
.glist .nf-field-element input[type=submit]:hover{ background:#FF6B33 }
@media (hover:hover) and (pointer:fine){
  .glist .nf-field-element .ninja-forms-field[type=button]:hover{ transform:translateY(-2px) }
}
.glist .nf-error-msg,.glist .ninja-forms-field-error{ color:#FF8A65; font-size:13px; margin-top:6px }
.glist .nf-error .nf-field-element input{ border-color:#FF8A65 }
.glist .nf-response-msg,.glist .nf-form-success-msg{ color:#fff; font-size:16px }

/* ---------- phone typography ----------
   The page is opened almost entirely from an Instagram bio link, so the phone
   is the real design and the desktop is the afterthought. Three things were
   sized for a page nobody reads on: the headline, and the two section labels,
   which at 10.5px in 40% white read as captions rather than as the headings
   they are. */
@media (max-width: 640px){
  .glist h1{ font-size: clamp(48px, 13.2vw, 64px) !important;
    line-height: .94 !important; letter-spacing: -.038em }

  .gl-kit h2, .gl-form h2{
    font-size: 15px !important; font-weight: 700 !important;
    line-height: 1.3 !important; letter-spacing: .14em;
    color: rgba(255,255,255,.82); margin-bottom: 18px;
  }

  /* the offer line grows with the headline, or the two stop looking related */
  .gl-say{ font-size: 22px }
  .glist-top{ padding-top: 42px }
}