/* Field House - everything below the fold.
   The critical block (tokens, reset, hero, header, footer) is inlined in the
   head of each page. This file is preloaded and applied without blocking the
   first paint. */

/* ---------------------------------------------------------------- sections */
.section{padding-block:var(--section)}
.section--tight{padding-block:calc(var(--section) * .62)}
.section-head{display:grid;gap:clamp(1.5rem,3vw,2.25rem);margin-bottom:clamp(3rem,7vw,5rem)}
.section-head--centred{justify-items:center;text-align:center;max-width:var(--measure);margin-inline:auto}
.rule{margin:0;height:1px;background:var(--rule-strong);border:0;width:100%}
.rule--short{width:3.5rem;background:var(--taupe)}

/* ------------------------------------------------- 2. the introduction */
.intro{text-align:center}
.h-section{font-size:var(--step-3);line-height:1.12;max-width:22ch}
.intro__heading{font-size:var(--step-3);max-width:22ch;margin-inline:auto;line-height:1.12}
.intro__body{max-width:var(--measure);margin-inline:auto;display:grid;gap:1.5em;
  margin-top:clamp(2rem,4vw,3rem);color:var(--ink-muted)}

/* --------------------------------------------------- 3. what's inside */
.grid--inside{width:100%;max-width:var(--wide);margin-inline:auto;display:grid;gap:1px;background:var(--rule);border-block:1px solid var(--rule);
  grid-template-columns:1fr}
.tile{background:var(--stone);padding:clamp(2rem,4vw,3rem) clamp(1.25rem,3vw,2.5rem);
  display:grid;gap:.9rem;align-content:start}
.tile__n{font-family:var(--font-display);font-size:var(--step--1);font-weight:500;
  letter-spacing:var(--track-label);color:var(--taupe-ink)}
.tile__h{font-size:var(--step-1);line-height:1.2}
.tile__p{color:var(--ink-muted);font-size:var(--step-0);max-width:34ch}
/* Drop the outer padding so the first column's text lines up with the
   section heading and the last column ends on the container edge. */
.tile{padding-inline:0}
@media (min-width:37.5em){
  .grid--inside{grid-template-columns:repeat(2,1fr)}
  .tile{padding-inline:clamp(1.25rem,3vw,2.5rem)}
  .grid--inside>.tile:nth-child(2n+1){padding-left:0}
  .grid--inside>.tile:nth-child(2n){padding-right:0}
}
@media (min-width:60em){
  .grid--inside{grid-template-columns:repeat(3,1fr)}
  .grid--inside>.tile:nth-child(2n+1),.grid--inside>.tile:nth-child(2n){padding-inline:clamp(1.25rem,3vw,2.5rem)}
  .grid--inside>.tile:nth-child(3n+1){padding-left:0}
  .grid--inside>.tile:nth-child(3n){padding-right:0}
}

/* --------------------------------------------------- full-bleed breaks */
.figure--break{position:relative;overflow:hidden;margin:0;clip-path:inset(0)}
.figure--break img{width:100%;height:clamp(18rem,46vh,32rem);object-fit:cover;object-position:50% 50%}

/* ------------------------------------------- 4. the exclusivity line */
.statement{background:var(--charcoal);color:var(--on-dark);
  padding-block:clamp(6rem,17vw,15rem)}
.statement .wrap{display:grid;gap:clamp(3rem,7vw,5.5rem);justify-items:start;max-width:64rem}
.statement__line{font-size:var(--step-5);line-height:1.02;letter-spacing:-.02em;
  color:var(--stone);max-width:14ch}
.statement__body{max-width:38rem;color:var(--on-dark-muted);font-size:var(--step-1);line-height:1.7}

/* ----------------------------------------------------------- 5. faq */
.faq__list{display:grid;max-width:46rem;border-top:1px solid var(--rule)}
.faq__item{border-bottom:1px solid var(--rule);padding-block:clamp(1.75rem,3.5vw,2.5rem);
  display:grid;gap:.85rem}
.faq__item h3{font-size:var(--step-1);line-height:1.25;max-width:32ch}
.faq__item p{color:var(--ink-muted)}
.faq__item p+p{margin-top:-.1rem}

/* Registered company details on the legal pages: a definition list rather
   than prose, because people scan for a company number, they do not read for it. */
.prose dl.entity{margin:1.5rem 0;display:grid;grid-template-columns:auto 1fr;
  gap:.35rem 1.5rem;max-width:var(--measure);font-size:var(--step--1)}
.prose dl.entity dt{font-family:var(--font-display);letter-spacing:var(--track-label);
  text-transform:uppercase;color:var(--taupe-ink);font-weight:500}
.prose dl.entity dd{margin:0}
@media (max-width:30em){.prose dl.entity{grid-template-columns:1fr;gap:.1rem 0}
  .prose dl.entity dd{margin-bottom:.6rem}}

/* --------------------------------------------------- 6. waitlist form */
.waitlist{background:var(--stone-2)}
.waitlist__grid{display:grid;gap:clamp(3rem,7vw,5rem);align-items:start}
@media (min-width:62em){.waitlist__grid{grid-template-columns:minmax(0,1fr) minmax(0,26rem);
  gap:clamp(3rem,6vw,6rem)}}
.waitlist__heading{font-size:var(--step-3);max-width:16ch;line-height:1.1}
.waitlist__body{color:var(--ink-muted);max-width:32rem;margin-top:1.5rem}
.card-figure{position:relative;overflow:hidden;margin-top:clamp(2.5rem,5vw,3.5rem);
  max-width:26rem}
.card-figure img{width:100%;height:auto}
.card-figure::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:0;
  transform:translateX(-130%);
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.14) 47%,
    rgba(255,255,255,.30) 50%,rgba(255,255,255,.14) 53%,transparent 62%)}

.form{display:grid;gap:1.75rem}
.field{display:grid;gap:.5rem}
.field label{font-family:var(--font-display);font-size:var(--step--1);font-weight:500;
  letter-spacing:var(--track-label);text-transform:uppercase;color:var(--taupe-ink)}
.field .opt{text-transform:none;letter-spacing:.04em;color:var(--ink-muted);font-weight:400}
.field input,.field select{
  width:100%;min-height:52px;padding:.85rem 1rem;
  background:var(--stone);color:var(--ink);
  border:1px solid var(--taupe);border-radius:0;
  font-family:var(--font-body);font-size:var(--step-0);line-height:1.4;
  transition:border-color .25s ease,box-shadow .25s ease}
.field select{
  appearance:none;padding-right:2.75rem;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),
    linear-gradient(135deg,var(--ink) 50%,transparent 50%);
  background-position:calc(100% - 1.35rem) 55%,calc(100% - 1rem) 55%;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat}
.field input:hover,.field select:hover{border-color:var(--taupe-ink)}
.field input:focus-visible,.field select:focus-visible{border-color:var(--charcoal);
  outline:2px solid var(--charcoal);outline-offset:1px}
.field input[aria-invalid='true'],.field select[aria-invalid='true']{border-color:var(--error);
  box-shadow:inset 0 -2px 0 var(--error)}
.field__error{color:var(--error);font-size:var(--step--1);line-height:1.5;min-height:0}
.field__error:empty{display:none}
.form__turnstile{min-height:70px}
.form__actions{display:grid;gap:1rem;justify-items:start}
.form button[type='submit']{width:100%}
@media (min-width:30em){.form button[type='submit']{width:auto}}
.form button[disabled]{opacity:.55;cursor:progress}
.form button[disabled]:hover{background:var(--charcoal);color:var(--on-dark)}
.form__status{font-size:var(--step--1);color:var(--error);line-height:1.6;max-width:34rem}
.form__status:empty{display:none}
.form__fineprint{font-size:var(--step--1);color:var(--ink-muted);max-width:34rem;line-height:1.65}
/* Links inside a sentence are exempt from WCAG 2.2 target size (the Inline
   exception), and padding them to 44px would tear the paragraph apart.
   Vertical padding on an inline box grows the hit area without moving the
   line, which is the most that can be done without breaking the text. */
.form__fineprint a,.faq__item a,.prose p a,.prose li a{padding-block:.45em}
.form__fineprint a{color:var(--ink);text-decoration-color:var(--taupe);text-underline-offset:.2em}
.faq__item a{text-decoration-thickness:1px;text-underline-offset:.2em;text-decoration-color:var(--taupe)}
.confirmation{display:grid;gap:1.25rem;padding:clamp(2rem,5vw,3rem) 0;max-width:32rem}
.confirmation p{font-size:var(--step-2);font-family:var(--font-display);font-weight:300;
  line-height:1.25;letter-spacing:-.005em}

/* ------------------------------------------------------- content pages */
.page-head{padding-block:clamp(3.5rem,8vw,6rem) clamp(2rem,4vw,3rem)}
.page-head h1{font-size:var(--step-4);max-width:16ch}
.page-head .label{margin-bottom:1.25rem}
.prose dl{display:grid;gap:1.25rem}
.prose dt{font-family:var(--font-display);font-weight:500;letter-spacing:.06em;
  text-transform:uppercase;font-size:var(--step--1);color:var(--taupe-ink)}
.prose dd{margin:.35rem 0 0}


/* ------------------------------------------------------------ motion */
/* Every final state above is the default. The rules below only ever describe
   the state an element starts FROM, and they exist only when the visitor has
   not asked for reduced motion. If the observer never runs, nothing here
   applies and the page is already finished. */
.figure--break,.figure--break img,.tile,.faq__item,.reveal{transition:none}
@media (prefers-reduced-motion:no-preference){
  .figure--break{transition:clip-path 1.15s cubic-bezier(.22,.61,.36,1)}
  .figure--break img{transition:transform 1.5s cubic-bezier(.22,.61,.36,1)}
  .tile{transition:opacity .7s ease,transform .7s cubic-bezier(.22,.61,.36,1);
    transition-delay:calc(var(--i,0) * 60ms)}
  .reveal{transition:opacity .8s ease,transform .8s cubic-bezier(.22,.61,.36,1)}
  .statement .mask__i{transition-duration:1.5s;
    transition-timing-function:cubic-bezier(.16,.84,.24,1);
    transition-delay:calc(var(--i,0) * 170ms)}

  .has-motion .grid--inside:not(.in-view) .tile{opacity:0;transform:translateY(8px)}
  .has-motion .reveal:not(.in-view){opacity:0;transform:translateY(10px)}
  .has-motion .card-figure.in-view::after{
    animation:card-sweep 2.4s cubic-bezier(.4,0,.2,1) .35s both}
}
/* M4 goes static on phones: most signups arrive on one, and a clip-path
   transition on a full-bleed image is the least useful thing to spend a
   phone's compositor on. */
@media (prefers-reduced-motion:no-preference) and (min-width:48em){
  .has-motion .figure--break:not(.in-view){clip-path:inset(14% 10%)}
  .has-motion .figure--break:not(.in-view) img{transform:scale(1.04)}
}
@keyframes card-sweep{
  0%{transform:translateX(-130%);opacity:0}
  10%{opacity:1}
  86%{opacity:1}
  100%{transform:translateX(130%);opacity:0}
}