/* /free-comp-card: the sign-up landing page. Airy and quiet: a big thin serif title beside a looping product clip, one short answer, a portrait beside the text,
   three steps, a grid of screenshots, the questions, and one call to action. Uses the home page's colours and fonts. */
.fcc{overflow:hidden}
.fcc h1,.fcc h2,.fcc h3{font-family:var(--serif);font-weight:300;color:var(--title);margin:0;text-transform:uppercase}
.fcc section{padding:clamp(56px,8vw,120px) var(--pad)}
.f-hero{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,5vw,88px);align-items:center;min-height:min(80svh,760px)}
.f-tag{margin:0 0 22px;font:400 10.5px/1 var(--sans);letter-spacing:.28em;text-transform:uppercase;color:var(--mute)}
.f-hero h1{font-size:clamp(34px,4.6vw,70px);line-height:1.1;letter-spacing:.07em}
.f-sub{margin:22px 0 0;max-width:30em;font:italic 400 clamp(16px,1.35vw,20px)/1.55 var(--serif);color:var(--mute)}
.f-btns{display:flex;flex-wrap:wrap;gap:12px;margin:34px 0 0}
.f-media{margin:0;position:relative;border:1px solid var(--hl);background:var(--grey);box-shadow:0 30px 60px -38px rgba(43,42,40,.5)}
.f-video{display:block;width:100%;height:auto;aspect-ratio:1280/724;background:var(--grey)}
.f-answer{background:var(--grey)}
.f-in{max-width:880px;margin:0 auto;text-align:center}
.f-answer h2,.f-how h2,.f-faq h2{font-size:clamp(22px,2.6vw,38px);letter-spacing:.2em;line-height:1.25}
.f-lead{margin:26px auto 0;max-width:40em;font:300 clamp(15px,1.25vw,18px)/1.85 var(--sans);color:var(--ink)}
.f-facts{display:grid;grid-template-columns:repeat(4,1fr);margin:clamp(34px,4vw,56px) 0 0;border-top:1px solid var(--hl);border-bottom:1px solid var(--hl)}
.f-facts div{padding:22px 14px;border-left:1px solid var(--hl)}.f-facts div:first-child{border-left:0}
.f-facts dt{font:400 10px/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--mute)}
.f-facts dd{margin:12px 0 0;font:400 15px/1.45 var(--sans);color:var(--ink)}
.f-about{display:grid;grid-template-columns:minmax(220px,.62fr) minmax(0,1.38fr);gap:clamp(28px,5vw,88px);align-items:start;max-width:1180px;margin:0 auto}
.f-portrait{margin:0}.f-portrait img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;filter:grayscale(1)}
.f-text h2{font-size:clamp(28px,3.4vw,52px);letter-spacing:.1em;line-height:1.12}
.f-role{margin:12px 0 26px;font:500 11px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.f-text p{max-width:38em;margin:0 0 18px;font:300 14px/1.95 var(--sans)}
.f-links{display:flex;flex-wrap:wrap;gap:8px 28px;margin-top:26px!important}.f-links a{font:400 10.5px/1.4 var(--sans);letter-spacing:.22em;text-transform:uppercase;text-decoration:none;color:var(--ink);border-bottom:1px solid var(--ink);padding-bottom:4px}
.f-how{background:var(--grey);text-align:center}
.f-steps{list-style:none;margin:clamp(34px,4vw,60px) auto 0;padding:0;max-width:1100px;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,64px);text-align:left}
.f-steps li{border-top:1px solid var(--ink);padding-top:22px}
.f-steps .n{display:block;margin-bottom:22px;font:300 13px/1 var(--sans);letter-spacing:.3em;color:var(--mute)}
.f-steps h3{font-size:clamp(20px,1.9vw,28px);letter-spacing:.12em;line-height:1.25;margin-bottom:14px}
.f-steps p{margin:0;font:300 14px/1.85 var(--sans)}
.f-shots{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,28px);max-width:980px;margin:0 auto}
.f-shots figure{margin:0}
.f-shots img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:top left;border:1px solid var(--hl);background:var(--grey)}
.f-shots figure:nth-child(2) img{object-fit:cover;object-position:top center}
.f-shots figcaption{margin-top:12px;font:300 12.5px/1.6 var(--sans);color:var(--mute)}
.f-faq{max-width:900px;margin:0 auto}
.f-faq h2{text-align:center}
.f-faqs{margin-top:clamp(28px,3.5vw,48px);border-top:1px solid var(--hl)}
.fq{border-bottom:1px solid var(--hl)}
.fq summary{list-style:none;cursor:pointer;padding:22px 34px 22px 0;position:relative;font:400 12px/1.6 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.fq summary::-webkit-details-marker{display:none}
.fq summary::after{content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);font:300 20px/1 var(--sans);color:var(--mute)}
.fq[open] summary::after{content:"\2212"}
.fq p{margin:0 0 24px;max-width:42em;font:300 14px/1.9 var(--sans)}
.f-more{margin:30px 0 0;text-align:center;font-size:13px}
.f-end{text-align:center;background:var(--grey);padding-bottom:clamp(110px,12vw,170px)!important}
.f-end h2{font-size:clamp(28px,4.2vw,64px);letter-spacing:.14em;line-height:1.15}
.f-end>p{margin:20px auto 0;max-width:30em;font:italic 400 clamp(16px,1.35vw,20px)/1.55 var(--serif);color:var(--mute)}
.f-end .f-btns{justify-content:center}
.f-end .f-small{font:300 13px/1.6 var(--sans);font-style:normal}
@media (max-width:860px){
  .f-hero{grid-template-columns:1fr;min-height:0}
  .f-about{grid-template-columns:1fr}.f-portrait{max-width:300px}
  .f-steps{grid-template-columns:1fr}
  .f-facts{grid-template-columns:1fr 1fr}.f-facts div:nth-child(3){border-left:0}.f-facts div:nth-child(n+3){border-top:1px solid var(--hl)}
  .f-shots{grid-template-columns:1fr}
}
/* no blue, anywhere: the browser paints autofilled fields light blue, selections and focus rings blue, taps blue-grey. Keep the field as designed. */
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active,textarea:-webkit-autofill,textarea:-webkit-autofill:focus,select:-webkit-autofill,select:-webkit-autofill:focus{-webkit-text-fill-color:currentColor!important;caret-color:currentColor;transition:background-color 600000s ease-in-out 0s!important;background-clip:text!important}
input:autofill,textarea:autofill,select:autofill{background:transparent!important;color:inherit!important;filter:none!important}
::selection{background:#2b2a28;color:#fbfbfa}
*{-webkit-tap-highlight-color:transparent}
input,textarea,select,progress,meter{accent-color:#2b2a28}
.f-goes{max-width:880px;margin:0 auto}
.f-goes h2{font-size:clamp(22px,2.6vw,38px);letter-spacing:.2em;line-height:1.25;text-align:center}
.f-list{list-style:none;margin:clamp(28px,3.5vw,48px) 0 0;padding:0;border-top:1px solid var(--hl)}
.f-list li{padding:20px 0;border-bottom:1px solid var(--hl);font:300 14.5px/1.85 var(--sans)}
.f-goes .f-links{justify-content:center}
.f-grid{margin:clamp(34px,4vw,60px) auto 0;max-width:560px}
.f-grid img{display:block;width:100%;height:auto;background:var(--grey)}