/* heycapt.co, the public page. Colours, radii, spacing and type stacks come
 * from tokens.css (copied in at build) - never inline one here. */

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
/* a display rule below would otherwise beat the browser's own [hidden] */
[hidden]{display:none !important}
body{background:var(--color-canvas);color:var(--color-ink);
     font:400 16px/24px var(--font-sans);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
.wrap{max-width:1040px;margin:0 auto;padding:0 var(--space-lg)}
.narrow{max-width:640px}

header.top{display:flex;align-items:center;justify-content:space-between;
           padding:var(--space-lg) 0}
.brand{font:500 22px/28px var(--font-serif);letter-spacing:-.3px;color:var(--color-ink);
       text-decoration:none}

section{padding:var(--space-4xl) 0}
section+section{border-top:1px solid var(--color-hairline)}
h1,h2{font-family:var(--font-serif);font-weight:500;font-optical-sizing:auto;color:var(--color-ink)}
h1{font-size:44px;line-height:50px;letter-spacing:-1px}
h2{font-size:32px;line-height:38px;letter-spacing:-.6px;margin-bottom:var(--space-xl)}
h3{font:600 17px/24px var(--font-sans)}
.lede{font-size:19px;line-height:28px;color:var(--color-body);margin-top:var(--space-lg);max-width:34em}
p{color:var(--color-body)}

.hero{padding-top:var(--space-3xl)}
.hero-form{margin-top:var(--space-2xl)}
.hero-form form.join{margin-top:var(--space-lg)}
.hero-form .picks span{background:var(--color-canvas)}
.hero-form .input{background:var(--color-canvas)}

.steps{display:grid;gap:var(--space-xl);grid-template-columns:repeat(3,minmax(0,1fr));list-style:none}
.steps li{display:grid;gap:var(--space-sm)}
.steps .n{font:500 32px/1 var(--font-serif);color:var(--color-primary)}

.qa{display:grid;gap:var(--space-lg);grid-template-columns:repeat(2,minmax(0,1fr))}
.qa .card{display:grid;gap:var(--space-md);align-content:start}
.qa .q{font:600 15px/20px var(--font-sans);color:var(--color-body-strong)}
.qa .a{font:400 19px/28px var(--font-serif);color:var(--color-ink)}
.qa .a strong{font-weight:500;color:var(--color-primary)}
.qa .src{justify-self:start}

.shots{display:grid;gap:var(--space-xl);grid-template-columns:repeat(3,minmax(0,1fr))}
.shots figure{display:grid;gap:var(--space-sm)}
.shots img{border-radius:var(--rounded-lg);background:var(--color-canvas-soft);
           box-shadow:var(--shadow-rest)}
.shots figcaption{font-size:14px;line-height:20px;color:var(--color-mute)}

.reasons{display:grid;gap:var(--space-xl);grid-template-columns:repeat(2,minmax(0,1fr))}
.trust{list-style:none;display:grid;gap:var(--space-lg)}
.trust li{display:grid;gap:var(--space-xs)}

form.join{display:grid;gap:var(--space-lg);margin-top:var(--space-xl)}
form.join label{display:grid;gap:var(--space-xs);font:600 13px/18px var(--font-sans);color:var(--color-body-strong)}
form.join .opt{font-weight:400;color:var(--color-mute)}
form.join fieldset{border:0;display:grid;gap:var(--space-sm)}
form.join legend{font:600 13px/18px var(--font-sans);color:var(--color-body-strong);margin-bottom:var(--space-sm)}
.picks{display:flex;flex-wrap:wrap;gap:var(--space-sm)}
.picks label{display:inline-flex}
.picks input{position:absolute;opacity:0;width:1px;height:1px}
.picks span{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--space-lg);
            border:1px solid var(--color-hairline);border-radius:var(--rounded-pill);
            background:var(--color-canvas);color:var(--color-primary);font:600 14px/20px var(--font-sans);cursor:pointer}
.picks input:checked+span{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-on-primary)}
.picks input:focus-visible+span{outline:2px solid var(--color-primary);outline-offset:2px}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
form.join .btn{justify-self:start;min-width:200px}
.fine{font-size:13px;line-height:18px;color:var(--color-mute)}
.status{font:400 19px/28px var(--font-serif);color:var(--color-primary)}
.status:empty{display:none}

footer.bottom{display:flex;gap:var(--space-lg);flex-wrap:wrap;padding:var(--space-xl) 0 var(--space-3xl);
              border-top:1px solid var(--color-hairline);font-size:14px}
footer.bottom span{color:var(--color-mute);margin-right:auto}

@media (max-width: 760px){
  section{padding:var(--space-3xl) 0}
  h1{font-size:36px;line-height:42px;letter-spacing:-.7px}
  h2{font-size:28px;line-height:34px}
  .steps,.qa,.shots,.reasons{grid-template-columns:minmax(0,1fr)}
  .shots{max-width:280px;margin:0 auto}
  footer.bottom span{flex-basis:100%}
  form.join .btn{justify-self:stretch}
}