@charset "UTF-8";

@font-face{font-family:"Big Shoulders";src:url(assets/fonts/big-shoulders-display-latin-800-normal.woff2) format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"Source Serif";src:url(assets/fonts/source-serif-4-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Source Serif";src:url(assets/fonts/source-serif-4-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}

:root{
  /* Leather pride flag blue and white, with brass hardware. */
  --flag:#16206f;
  --deep:#0c1247;
  --bone:#f4eddd;
  --haze:#c6cbf2;
  --brass:#d8a23c;
  --brass-light:#f6d98b;
  --brass-dark:#7c5414;
  --display:"Big Shoulders",Impact,"Arial Narrow",sans-serif;
  --text:"Source Serif",Georgia,"Times New Roman",serif;
  --gutter:clamp(22px,5vw,72px);
  --ring:clamp(530px,84vw,1340px);
  --ring-top:calc(var(--ring)*-.2);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--flag);color:var(--bone);font:400 clamp(17px,1.25vw,19px)/1.6 var(--text);-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--display);font-weight:800;margin:0;letter-spacing:-.003em}
p{margin:0}
a{color:inherit;text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--brass-light);outline-offset:3px}
.light :focus-visible{outline-color:var(--flag)}
.skip-link{position:absolute;top:-80px;left:16px;z-index:5;background:var(--bone);color:var(--deep);padding:10px 16px}
.skip-link:focus{top:12px}

.wordmark{display:inline-flex;align-items:center;font:800 clamp(30px,2.8vw,38px)/1 var(--display);letter-spacing:.005em;text-decoration:none}
.wordmark img{width:.84em;height:.84em;margin:.04em .03em 0;display:block}

/* Hero: the ring is the composition, and the form sits in its opening. */
.hero{position:relative;overflow:hidden;isolation:isolate;padding:clamp(18px,2.6vw,34px) var(--gutter) clamp(44px,5.4vw,76px);text-align:center;display:flex;flex-direction:column;align-items:center}
.ring{position:absolute;z-index:-1;left:50%;top:var(--ring-top);width:var(--ring);height:var(--ring);max-width:none;margin-left:calc(var(--ring)/-2);animation:settle 1.5s cubic-bezier(.16,.8,.24,1) both;pointer-events:none}
@keyframes settle{from{transform:rotate(-14deg)}to{transform:none}}
/* Sized from the ring so the headline always fits inside it. */
.hero h1{margin-top:clamp(30px,3.2vw,50px);font-size:min(calc(var(--ring)*.102),14.4vw);line-height:.94}
.hero h1 span{display:block}
.intro{max-width:min(33em,calc(var(--ring)*.58));margin-top:clamp(14px,1.6vw,22px)}

.join{width:min(100%,700px);margin-top:clamp(24px,2.6vw,34px);text-align:left;display:grid;grid-template-columns:1fr 1fr auto;gap:14px 10px;align-items:start}
.field-metro{grid-column:2/-1}
.field label{display:block;font-weight:600;font-size:.92em;margin-bottom:5px}
.field input{width:100%;height:54px;padding:0 14px;border:0;border-radius:3px;background:var(--bone);color:var(--deep);font:400 18px var(--text)}
.field input::placeholder{color:#62648c}
.join button,.button{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:0 26px;border:0;border-radius:3px;background:var(--brass);color:var(--deep);font:800 clamp(23px,1.9vw,26px)/1 var(--display);letter-spacing:.01em;text-decoration:none;cursor:pointer;transition:background .15s}
.join button:hover,.button:hover{background:var(--brass-light)}
.consent{grid-column:1/3;align-self:center;display:flex;gap:10px;align-items:flex-start;font-size:.92em;line-height:1.45}
.consent input{flex:none;width:20px;height:20px;margin:2px 0 0;accent-color:var(--brass)}
.leave-empty{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* What we're building */
.plans{background:var(--deep);padding:clamp(64px,9vw,136px) var(--gutter)}
.plans-grid{max-width:1296px;margin:auto;display:grid;grid-template-columns:5fr 7fr;gap:clamp(36px,6vw,96px);align-items:start}
.plans-head{position:sticky;top:40px}
.plans h2,.stand h2,.questions h2{font-size:clamp(50px,6.2vw,92px);line-height:.96;text-wrap:balance}
.plans-head p{margin-top:18px;color:var(--haze);max-width:24em}
.plan{padding:clamp(22px,2.4vw,32px) 0;border-top:2px dashed #3d4693}
.plan:first-child{border-top:0;padding-top:0}
.plan h3{font-size:clamp(33px,3.3vw,46px);line-height:1.02;color:var(--brass-light)}
.plan p{margin-top:9px;max-width:34em}
.interests{max-width:1296px;margin:clamp(52px,7vw,104px) auto 0;font:800 clamp(38px,5.4vw,80px)/1.02 var(--display);color:var(--haze);text-wrap:balance}

/* Where things stand: the white stripe. */
.stand{background:var(--bone);color:var(--deep);padding:clamp(64px,9vw,136px) var(--gutter)}
.stand-inner{max-width:1296px;margin:auto}
.stand h2{max-width:12em}
.steps{list-style:none;counter-reset:step;margin:clamp(36px,5vw,72px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,4vw,64px)}
.steps li{counter-increment:step}
.steps li::before{content:counter(step);display:block;font:800 clamp(64px,7vw,104px)/.9 var(--display);color:var(--brass-dark)}
.steps h3{font-size:clamp(30px,2.8vw,40px);line-height:1.04;margin-top:10px}
.steps p{margin-top:8px}

/* Questions */
.questions{padding:clamp(64px,9vw,136px) var(--gutter)}
.questions-inner{max-width:1000px;margin:auto}
.questions details{border-top:2px dashed #4a54ad}
.questions details:last-child{border-bottom:2px dashed #4a54ad}
.questions h2{margin-bottom:clamp(26px,3.4vw,48px)}
.questions summary{display:flex;justify-content:space-between;gap:20px;align-items:baseline;list-style:none;cursor:pointer;padding:18px 0;font:800 clamp(28px,2.7vw,38px)/1.08 var(--display)}
.questions summary::-webkit-details-marker{display:none}
.questions summary::after{content:"+";color:var(--brass-light);flex:none;transition:transform .18s}
.questions details[open] summary::after{transform:rotate(45deg)}
.questions details p{padding:0 0 22px;max-width:40em}

/* Closing and footer */
.closing{background:var(--deep);padding:clamp(64px,9vw,136px) var(--gutter) clamp(44px,5vw,72px)}
.closing-inner{max-width:1296px;margin:auto}
.closing h2{font-size:clamp(72px,14.5vw,236px);line-height:.86;color:var(--brass);text-wrap:balance}
.closing p{margin-top:clamp(18px,2vw,28px);max-width:30em}
.closing .button{margin-top:clamp(22px,2.4vw,32px)}
footer{max-width:1296px;margin:clamp(52px,7vw,96px) auto 0;padding-top:20px;border-top:2px dashed #3d4693;display:flex;flex-wrap:wrap;gap:8px 28px;justify-content:space-between;font-size:.92em;color:var(--haze)}
footer nav{display:flex;flex-wrap:wrap;gap:8px 24px}

/* Short pages: privacy notice, form results, not found. */
.page{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;padding:clamp(18px,2.6vw,34px) var(--gutter)}
.page-main{width:min(100%,720px);margin:clamp(48px,8vw,104px) auto clamp(48px,6vw,80px)}
.page-main h1{font-size:clamp(58px,8vw,110px);line-height:.94}
.page-main>p{margin-top:18px}
.page-main .button{margin-top:28px}
.page-main h2{font-size:clamp(26px,2.3vw,32px);line-height:1.08;margin-top:34px;color:var(--brass-light)}
.page-main h2+p{margin-top:7px}
.page-main .updated{color:var(--haze);margin:0 0 12px}
.page footer{width:min(100%,1296px);margin-top:auto}

@media (max-width:900px){
  .plans-grid{grid-template-columns:1fr}
  .plans-head{position:static}
  .steps{grid-template-columns:1fr}
  .steps li{display:grid;grid-template-columns:clamp(52px,12vw,76px) 1fr;column-gap:10px}
  .steps li::before{grid-row:1/3;font-size:clamp(56px,11vw,72px)}
  .steps h3{margin-top:4px}
  .steps p{grid-column:2}
}
@media (max-width:720px){
  :root{--ring-top:calc(var(--ring)*-.06)}
  .join{grid-template-columns:1fr}
  .field-metro,.consent{grid-column:auto}
  .join button{width:100%}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .ring{animation:none}
  *{transition:none!important}
}