/* ══ OCRO PAGE SURFACES ═════════════════════════════════════════════════════
   Everything the standalone pages need on top of site.css: page headers, the
   contact form, the FAQ accordion, the creator landing sections, and the legal
   pages. Load order: tokens.css, site.css, then this.
   ═══════════════════════════════════════════════════════════════════════════ */

main{display:block}

/* ── page header ────────────────────────────────────────────────────────── */
.page-wrap{max-width:var(--read);margin:0 auto;padding:0 var(--sp-gutter)}

/* The legal pages use .page-header + .privacy-section / .terms-section and
   never .page-wrap, so nothing was constraining them: the prose sat at x=0
   with no gutter and no measure, running about 200 characters per line at
   1745px while the heading above it was inset by one gutter. Same measure as
   every other prose surface on the site, and now the heading and the body
   share an edge. Both classes are used by exactly two pages. */
.page-header,
.privacy-section,
.terms-section{max-width:var(--read);margin-inline:auto;padding-inline:var(--sp-gutter)}
.page-header{padding:var(--sp-tight) var(--sp-gutter) 0}

.page-label,.section-label,.hero-label,.community-eyebrow,.faq-group-label,.perk-tag{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-mono);font-size:var(--fs-mono);
  text-transform:uppercase;letter-spacing:.1em;color:var(--iron);
}
/* a short lit rule instead of a coloured dot — the rim primitive, small */
.page-label::before,.section-label::before{
  content:"";width:26px;height:1px;background:var(--hairline-lit);
}
.faq-group-label::after{content:"";flex:1;height:1px;background:var(--hairline);min-width:40px}

.page-h1,.page-title,.hero-h1,.apply-h2,.section-h2,.community-h3{
  font-family:var(--font-display);font-weight:400;
  line-height:.94;letter-spacing:.012em;text-transform:uppercase;
  color:var(--ink);margin:.35em 0 0;
}
/* ── The chrome fill ────────────────────────────────────────────────────────
   Read off the homepage rather than invented here. There, `.hero-h1` carries
   --grad-chrome and every section heading carries --grad-chrome-soft, and the
   accent phrase inside a heading repeats its PARENT'S gradient instead of
   changing hue. Both tokens already sat in tokens.css with values identical to
   the homepage's; only the wiring differed, which is how these pages ended up
   with a silver h1 that had an indigo phrase in the middle of it while the
   homepage's was silver the whole way across.

   The h1 takes the loud ramp and the section headings take the soft one,
   matching `.hero-h1` and `.how-h2` / `.partners-h2` / `.contact-h2` exactly.
   Section headings were flat --ink before, which is the other half of why an
   inner page did not look like the homepage: its headings had no light in
   them at all. */
.page-h1,.page-title,.hero-h1{
  font-size:var(--fs-6);
  background-image:var(--grad-chrome);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
.apply-h2,.section-h2{font-size:var(--fs-5)}
.community-h3{font-size:var(--fs-3);line-height:1.05}
.apply-h2,.section-h2,.community-h3{
  background-image:var(--grad-chrome-soft);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}

/* The accent phrase gets its own background BOX, not its own colour. That is
   the entire mechanism on the homepage: "Own" is painted across the h1's box
   and "virality." across the span's, so one gradient lands at two different
   phases and the phrase separates by light rather than by hue. Emphasis on
   this site is a lighting decision, never a colour one. Colour is spoken for
   by the action system, and an indigo phrase inside a heading read as a link
   that could not be clicked. */
.page-h1 .accent,.page-title .accent,.hero-h1 .accent{
  background-image:var(--grad-chrome);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
.section-h2 .accent,.apply-h2 .accent,.community-h3 .accent{
  background-image:var(--grad-chrome-soft);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
.hero-h1 .stroke{
  -webkit-text-fill-color:transparent;color:transparent;
  -webkit-text-stroke:1px var(--charcoal);
}
.page-date{
  margin-top:14px;font-family:var(--font-mono);font-size:var(--fs-mono);
  text-transform:uppercase;letter-spacing:.08em;color:var(--iron);
}
.lead,.hero-sub,.page-sub,.section-sub,.req-sub,.apply-sub,.perks-header p,.community-desc{
  margin:1.1em 0 0;max-width:60ch;color:var(--smoke);
  font-size:var(--fs-1);line-height:1.7;
}
.lead em,p em,.faq-answer em,.req-detail em{color:var(--bone);font-style:italic}

#hero,.hero-inner{position:relative}
#hero{padding:var(--sp-section) var(--sp-gutter) var(--sp-tight)}
.hero-inner{max-width:var(--page);margin:0 auto}
.hero-dot,.comm-dot{
  width:6px;height:6px;border-radius:var(--r-pill);
  background:var(--green);flex:none;
}
.hero-badge{
  display:inline-flex;align-items:center;gap:9px;
  padding:6px 14px;margin-bottom:20px;
  background:var(--lift);border:1px solid var(--hairline);
  border-radius:var(--r-pill);
  font-family:var(--font-mono);font-size:var(--fs-mono);
  text-transform:uppercase;letter-spacing:.09em;color:var(--smoke);
}
.hero-badge::before{content:"";width:6px;height:6px;border-radius:var(--r-pill);background:var(--green)}

/* ── generic prose on standalone pages ─────────────────────────────────── */
.page-wrap h2,.privacy-section h2,.terms-section h2{
  margin:2.2em 0 .6em;
  font-family:var(--font-display);font-weight:400;font-size:var(--fs-5);
  line-height:1;letter-spacing:.012em;text-transform:uppercase;color:var(--ink);
}
.page-wrap h2:first-of-type{margin-top:1.4em}
.page-wrap h3,.privacy-section h3,.terms-section h3{
  margin:1.9em 0 .5em;font-size:var(--fs-3);font-weight:500;color:var(--bone);
}
.page-wrap p,.privacy-section p,.terms-section p{
  margin:0 0 1.2em;color:var(--ash);font-size:var(--fs-1);line-height:1.75;
}
/* Underline prose links only — scoped to the elements prose actually lives in,
   so a card or tile that happens to be an <a> is left alone. */
.page-wrap p a,.page-wrap li a,
.privacy-section p a,.privacy-section li a,
.terms-section p a,.terms-section li a,
.faq-answer p a,.faq-answer li a{
  color:var(--indigo-lit);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--indigo-a45);
}
.page-wrap p a:hover,.page-wrap li a:hover,
.privacy-section p a:hover,.privacy-section li a:hover,
.terms-section p a:hover,.terms-section li a:hover,
.faq-answer p a:hover,.faq-answer li a:hover{
  text-decoration-color:var(--indigo-lit);
}
.privacy-section ul,.terms-section ul,ul.bullet-list{margin:0 0 1.4em;padding-left:1.25em}
.privacy-section li,.terms-section li{margin-bottom:.55em;color:var(--ash);line-height:1.7}
.privacy-section li::marker,.terms-section li::marker{color:var(--iron)}
ul.bullet-list{list-style:none;padding-left:0}
ul.bullet-list li{position:relative;padding-left:24px;margin-bottom:.7em;color:var(--ash);line-height:1.7}
ul.bullet-list li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:9px;height:1px;background:var(--indigo);
}

/* ── data table (legal pages) ───────────────────────────────────────────── */
.data-table{width:100%;border-collapse:collapse;margin:1.6em 0;font-size:.875rem}
.data-table th,.data-table td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--hairline)}
.data-table th{
  font-family:var(--font-mono);font-size:var(--fs-mono);font-weight:400;
  text-transform:uppercase;letter-spacing:.08em;color:var(--iron);
  border-bottom-color:var(--hairline-lit);
}
.data-table td{color:var(--ash)}
.data-table tr:last-child td{border-bottom:0}

/* ── nav back (standalone pages) ────────────────────────────────────────── */
.nav-back{
  display:inline-flex;align-items:center;gap:8px;margin-left:auto;
  font-size:.875rem;color:var(--smoke);text-decoration:none;
  transition:color var(--dur-2) var(--ease-std);
}
.nav-back:hover{color:var(--ink)}
.nav-back svg{width:15px;height:15px;transition:transform var(--dur-2) var(--ease-out)}
.nav-back:hover svg{transform:translateX(-3px)}
.nav-logo-mark{width:30px;height:30px;object-fit:contain;object-position:center}

/* ── founder / stats (about) ────────────────────────────────────────────── */
.founder-card{
    display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:center;
  margin:2em 0;padding:var(--pad-card);
  background:var(--surface-plain);border:1px solid var(--hairline);
  border-radius:var(--r-3);corner-shape:squircle;
}
.founder-card .founder-mark{
    width:76px;height:76px;overflow:hidden;flex:none;
    display:grid;place-items:center;border-radius:50%;background:var(--lift);
  }
.founder-card .founder-mark img{width:100%;height:100%;object-fit:cover;object-position:center}
.founder-card .founder-name{margin:0;font-size:var(--fs-2);font-weight:500;color:var(--ink)}
.founder-card .founder-role{
  margin:4px 0 12px;font-family:var(--font-mono);font-size:var(--fs-mono);
  text-transform:uppercase;letter-spacing:.09em;color:var(--iron);
}
.founder-card .founder-bio{margin:0 0 14px;color:var(--smoke);font-size:.9375rem;line-height:1.65}
.founder-card .founder-links{display:flex;gap:16px}
.founder-card .founder-links a{color:var(--smoke);font-size:.875rem;text-decoration:none}
.founder-card .founder-links a:hover{color:var(--indigo-lit)}

.stats-row{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));
  gap:var(--sp-7);margin:2.2em 0;padding:var(--pad-card) 0;
  border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);
}
.stats-row .s-num{
  display:block;font-family:var(--font-display);font-size:var(--fs-5);
  line-height:1;color:var(--ink);font-variant-numeric:tabular-nums;
}
.stats-row .s-label{
  display:block;margin-top:8px;
  font-family:var(--font-mono);font-size:var(--fs-mono);
  text-transform:uppercase;letter-spacing:.09em;color:var(--iron);
}

/* ── CTA block ──────────────────────────────────────────────────────────── */
.cta-block{
  margin:var(--sp-tight) 0;padding:var(--pad-card);text-align:center;
  background:var(--surface-plain);border:1px solid var(--hairline);
  border-radius:var(--r-4);corner-shape:squircle;
}
.cta-text{margin:0 0 18px;color:var(--smoke);font-size:var(--fs-1)}

/* ── contact form ───────────────────────────────────────────────────────── */
/* The contact page carries its own container rather than borrowing
   .page-wrap's --read measure: a two-column form and a sidebar do not belong
   in a prose column. .lead keeps the reading measure on its own (60ch). */
.contact-page{max-width:var(--page);margin:0 auto;padding:0 var(--sp-gutter)}

.contact-grid{
  display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,0.9fr);
  gap:clamp(20px,2.4vw,34px);align-items:start;
  padding:var(--sp-tight) 0 var(--sp-section);
}
.form-card{
  padding:clamp(22px,2.4vw,38px);
  background:var(--surface-plain);border:1px solid var(--hairline);
  border-radius:var(--r-4);corner-shape:squircle;
}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px 22px}
.form-group{display:flex;flex-direction:column;gap:9px;margin-bottom:22px}
/* the message field is the last one before the button, so its own bottom
   margin would double up with the button's top margin */
.form-group-wide{margin-bottom:0}
/* Grid and flex items default to min-width:auto, so a child's min-content
   width becomes a hard floor for the whole track. An <input> carries the
   browser's default intrinsic width (~289px in Chrome) regardless of
   width:100%, which put a 393px minimum on the contact form and scrolled the
   page sideways on any phone under 393px wide. Releasing the floor at every
   level that participates in a grid or flex context is what actually fixes
   it — width:100% alone does not. */
.form-row,
.form-row > *,
.form-group,
.form-input,
.form-textarea,
.form-select{min-width:0}
/* baseline flex rather than inline margins: "Company / Brand" + "Optional"
   then wraps as two whole words instead of stranding "Optional" on its own
   line and pushing the input down out of step with its neighbour */
.form-label{
  display:flex;align-items:baseline;flex-wrap:wrap;column-gap:6px;row-gap:2px;
  font-size:.875rem;color:var(--smoke);font-weight:500;
}
.form-label .req{color:var(--indigo-lit)}
.form-label .opt{color:var(--iron);font-weight:400;font-size:.8125rem}
.form-input,.form-textarea{
  width:100%;min-height:46px;padding:12px 14px;
  background:var(--lift);border:1px solid var(--hairline);
  border-radius:var(--r-2);corner-shape:squircle;
  color:var(--ink);font-family:var(--font-body);font-size:.9375rem;
  transition:border-color var(--dur-2) var(--ease-std),box-shadow var(--dur-2) var(--ease-std);
}
.form-textarea{min-height:156px;resize:vertical;line-height:1.65;padding-top:13px}
.form-input:focus,.form-textarea:focus{
  outline:none;border-color:var(--indigo);box-shadow:0 0 0 3px var(--indigo-a24);
}
.form-input::placeholder,.form-textarea::placeholder{color:var(--charcoal)}
.form-submit{
  width:100%;min-height:52px;margin-top:26px;
  background:var(--indigo-fill);color:var(--ink);
  border:1px solid transparent;border-radius:var(--r-2);corner-shape:squircle;
  font-family:var(--font-body);font-size:.9375rem;font-weight:500;cursor:pointer;
  transition:background var(--dur-2) var(--ease-std);
}
.form-submit:hover:not(:disabled){background:var(--indigo)}
.form-submit:disabled{background:var(--charcoal);color:var(--iron);cursor:not-allowed}
.form-submit.loading{color:transparent;position:relative}
.form-submit.loading::after{
  content:"";position:absolute;inset:0;margin:auto;width:18px;height:18px;
  border:2px solid rgba(255,255,255,.35);border-top-color:var(--ink);
  border-radius:50%;animation:ocro-spin .7s linear infinite;
}
@keyframes ocro-spin{to{transform:rotate(360deg)}}
.form-note{margin:18px 0 0;font-size:.8125rem;color:var(--iron);line-height:1.6}
.form-note a{color:var(--smoke);border-bottom:1px solid rgba(192,192,192,.3);text-decoration:none}
.form-note a:hover{color:var(--ink);border-bottom-color:var(--smoke)}

.sidebar{display:flex;flex-direction:column;gap:14px;min-width:0}
/* The email addresses in .sb-value are single unbreakable tokens ~25 chars
   long set at --fs-2, which gave the sidebar a 343px min-content width and
   pushed the contact page into horizontal scroll below 393px. `anywhere` is
   required here rather than `break-word`: only `anywhere` reduces the
   intrinsic min-content size, which is what the grid track measures. */
.sb-item{min-width:0}
.sb-value,.sb-meta{overflow-wrap:anywhere}
.sb-item{
  display:block;padding:20px;text-decoration:none;
  background:var(--surface-plain);border:1px solid var(--hairline);
  border-radius:var(--r-3);corner-shape:squircle;
  transition:border-color var(--dur-2) var(--ease-std),background var(--dur-2) var(--ease-std);
}
.sb-item:hover{border-color:var(--hairline-lit);background:var(--surface-lift)}
.sb-label{
  display:flex;align-items:center;gap:9px;
  font-family:var(--font-mono);font-size:var(--fs-mono);
  text-transform:uppercase;letter-spacing:.09em;color:var(--iron);
}
.sb-label svg{width:14px;height:14px}
/* an email is one 25-character unbreakable token, so it sets this card's
   min-content width. At --fs-2 (up to 21px) it needs ~270px of column to
   stay on one line, which the sidebar did not have — hence "partners@ocro
   partne / rs.com". --fs-1 fits, and these are labels, not headlines. */
.sb-value{display:block;margin-top:9px;color:var(--ink);font-size:var(--fs-1);font-weight:500;letter-spacing:.002em}
.sb-meta{display:block;margin-top:5px;color:var(--iron);font-size:.8125rem}

.contact-box{
  margin:1.8em 0;padding:var(--pad-card);
  background:var(--surface-plain);border:1px solid var(--hairline);
  border-radius:var(--r-3);corner-shape:squircle;
}
.contact-box h3{margin:0 0 .5em;font-size:var(--fs-2);font-weight:500;color:var(--ink)}
.contact-box p{margin:0 0 .6em;color:var(--smoke)}
.contact-box a{color:var(--indigo-lit);text-decoration:none}
.contact-box a:hover{text-decoration:underline;text-underline-offset:3px}

/* ── toast ──────────────────────────────────────────────────────────────── */
.toast{
  position:fixed;left:50%;bottom:26px;z-index:140;
  display:flex;align-items:flex-start;gap:13px;
  width:min(420px,calc(100% - 32px));padding:15px 18px;
  background:var(--surface-lift);border:1px solid var(--hairline-lit);
  border-radius:var(--r-3);corner-shape:squircle;box-shadow:var(--e-2);
  transform:translate(-50%,14px);opacity:0;pointer-events:none;
  transition:opacity var(--dur-3) var(--ease-out),transform var(--dur-3) var(--ease-out);
}
.toast.active{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.toast-icon{
  flex:none;width:22px;height:22px;display:grid;place-items:center;
  border-radius:var(--r-pill);
}
.toast-icon svg{width:13px;height:13px}
.toast.success .toast-icon{background:rgba(58,211,137,.16)}
.toast.success .toast-icon svg{color:var(--green)}
.toast.error .toast-icon{background:rgba(255,149,146,.16)}
.toast.error .toast-icon svg{color:var(--red)}
.toast-title{margin:0;font-size:.9375rem;font-weight:500;color:var(--ink)}
.toast-msg{margin:3px 0 0;font-size:.8125rem;color:var(--smoke);line-height:1.5}

/* ── FAQ ────────────────────────────────────────────────────────────────── */
#faq{padding:var(--sp-tight) var(--sp-gutter) var(--sp-section)}
.faq-inner{max-width:var(--read);margin:0 auto}
.faq-group{margin-bottom:var(--sp-tight)}
.faq-group-label{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.faq-item{border-bottom:1px solid var(--hairline)}
.faq-question{
  display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
  width:100%;padding:20px 0;
  background:none;border:0;cursor:pointer;text-align:left;
  font-family:var(--font-body);font-size:var(--fs-2);font-weight:500;color:var(--bone);
  transition:color var(--dur-2) var(--ease-std);
}
.faq-question:hover{color:var(--ink)}
.faq-question .faq-icon{
  flex:none;width:20px;height:20px;position:relative;margin-top:3px;
  transition:transform var(--dur-3) var(--ease-out);
}
.faq-question .faq-icon::before,.faq-question .faq-icon::after{
  content:"";position:absolute;left:50%;top:50%;background:var(--iron);
  transform:translate(-50%,-50%);
}
.faq-question .faq-icon::before{width:13px;height:1.5px}
.faq-question .faq-icon::after{width:1.5px;height:13px;transition:opacity var(--dur-2) var(--ease-std)}
.faq-item.open .faq-question .faq-icon::after,
.faq-item.visible .faq-question .faq-icon::after{opacity:0}
.faq-answer{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows var(--dur-3) var(--ease-out);
}
.faq-item.open .faq-answer,.faq-answer.open{grid-template-rows:1fr}
.faq-answer>*{overflow:hidden;min-height:0}
.faq-answer p{margin:0 0 1em;padding-right:40px;color:var(--ash);line-height:1.7}
/* .faq-cta sits outside .faq-inner, so without a measure of its own it ran
   the full section width (1344px at 1440) while the questions above it were
   in an 880px column. */
.faq-cta{max-width:var(--read);margin:var(--sp-tight) auto 0;text-align:center}

/* ── creators landing ───────────────────────────────────────────────────── */
.perks-header,.req-header{max-width:var(--read);margin:0 auto var(--sp-tight)}
#perks,#requirements,#apply,#public-community{padding:var(--sp-tight) var(--sp-gutter)}
#requirements{position:relative}
#requirements::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,var(--surface-plain) 0%,transparent 60%);opacity:.6;
}
.req-inner{position:relative;max-width:var(--read);margin:0 auto}

.perks-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));
  gap:var(--sp-7);max-width:var(--page);margin:0 auto;
}
.perk-card{
  position:relative;padding:var(--pad-card);overflow:hidden;
  background:var(--surface-plain);border:1px solid var(--hairline);
  border-radius:var(--r-3);corner-shape:squircle;
  transition:border-color var(--dur-2) var(--ease-std),background var(--dur-2) var(--ease-std);
}
.perk-card::after{
  content:"";position:absolute;left:12%;right:12%;top:-1px;height:1px;
  background:var(--rim);opacity:0;transition:opacity var(--dur-2) var(--ease-std);
}
.perk-card:hover{border-color:var(--hairline-lit);background:var(--surface-lift)}
.perk-card:hover::after{opacity:.9}
.perk-icon{
  width:38px;height:38px;display:grid;place-items:center;margin-bottom:16px;
  background:var(--indigo-a12);border:1px solid var(--indigo-a24);
  border-radius:var(--r-2);corner-shape:squircle;
}
.perk-icon svg{width:18px;height:18px;color:var(--indigo-lit)}
.perk-tag{display:block;margin-bottom:8px}
.perk-title{margin:0 0 .5em;font-size:var(--fs-2);font-weight:500;color:var(--ink)}
.perk-desc{margin:0;color:var(--smoke);font-size:.9375rem;line-height:1.65}

.req-list{display:grid;gap:2px;margin-top:var(--sp-tight)}
.req-item{
  display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start;
  padding:20px 0;border-bottom:1px solid var(--hairline);
  transition:background var(--dur-2) var(--ease-std);
}
.req-item:hover{background:var(--surface-plain)}
.req-num{
  font-family:var(--font-mono);font-size:var(--fs-mono);
  color:var(--iron);padding-top:4px;
}
.req-title{margin:0 0 .4em;font-size:var(--fs-2);font-weight:500;color:var(--ink)}
.req-detail{margin:0;color:var(--smoke);font-size:.9375rem;line-height:1.65}

.or-divider{display:flex;align-items:center;gap:16px;margin:var(--sp-tight) 0}
.or-divider::before,.or-divider::after{content:"";flex:1;height:1px;background:var(--hairline)}
.or-text{
  font-family:var(--font-mono);font-size:var(--fs-mono);
  text-transform:uppercase;letter-spacing:.1em;color:var(--iron);
}

.niche-pills{display:flex;flex-wrap:wrap;gap:9px;margin-top:18px}
.niche-pill{
  padding:7px 14px;
  background:var(--lift);border:1px solid var(--hairline);
  border-radius:var(--r-pill);
  font-size:.8125rem;color:var(--smoke);
  transition:border-color var(--dur-2) var(--ease-std),color var(--dur-2) var(--ease-std);
}
.niche-pill:hover{border-color:var(--hairline-lit);color:var(--ink)}

#apply{position:relative;text-align:center;overflow:hidden}
.apply-bg-text{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-family:var(--font-display);font-size:clamp(5rem,22vw,18rem);
  line-height:.8;color:var(--surface-plain);white-space:nowrap;
  pointer-events:none;user-select:none;z-index:0;
}
.apply-content{position:relative;z-index:1;max-width:var(--read);margin:0 auto}
.apply-disclaimer{margin:16px 0 0;font-size:.8125rem;color:var(--iron)}
.btn-apply,.btn-community,.btn-primary{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:48px;padding:13px 26px;
  background:var(--indigo-fill);color:var(--ink);
  border:1px solid transparent;border-radius:var(--r-2);corner-shape:squircle;
  font-size:.9375rem;font-weight:500;text-decoration:none;cursor:pointer;
  transition:background var(--dur-2) var(--ease-std);
}
.btn-apply:hover,.btn-community:hover,.btn-primary:hover{background:var(--indigo)}
.btn-community svg{width:16px;height:16px}
.btn-secondary{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:48px;padding:13px 26px;
  background:transparent;color:var(--bone);
  border:1px solid var(--hairline);border-radius:var(--r-2);corner-shape:squircle;
  font-size:.9375rem;font-weight:500;text-decoration:none;cursor:pointer;
  transition:background var(--dur-2) var(--ease-std),border-color var(--dur-2) var(--ease-std);
}
.btn-secondary:hover{background:rgba(255,255,255,.04);border-color:var(--hairline-lit)}

#public-community{max-width:var(--page);margin:0 auto}
.community-perks-list{list-style:none;margin:18px 0;padding:0;display:grid;gap:11px}
.community-perks-list li{display:flex;align-items:flex-start;gap:11px;color:var(--smoke);font-size:.9375rem}
.community-perks-list li svg{width:16px;height:16px;flex:none;margin-top:3px;color:var(--green)}

.halftone-divider{height:1px;background:var(--hairline);margin:var(--sp-tight) 0}

/* ── mobile menu (pages that ship their own) ───────────────────────────── */
.hamburger{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  width:40px;height:40px;margin-left:auto;background:none;border:0;cursor:pointer;
}
.hamburger span{display:block;height:1.5px;width:22px;background:var(--bone)}
.mobile-menu{
  position:fixed;inset:0;z-index:130;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  background:var(--void);
  opacity:0;pointer-events:none;transition:opacity var(--dur-3) var(--ease-out);
}
.mobile-menu.open{opacity:1;pointer-events:auto}
.mobile-menu a{
  padding:14px 20px;color:var(--smoke);text-decoration:none;
  font-family:var(--font-display);font-size:2rem;text-transform:uppercase;letter-spacing:.02em;
}
.mobile-menu a:hover{color:var(--ink)}
.mobile-close{position:absolute;top:20px;right:20px;width:44px;height:44px;background:none;border:0;color:var(--smoke);cursor:pointer;font-size:26px}

/* ── reveal-on-scroll ────────────────────────────────────────────────────
   Visible by default. It only hides itself where scripting is enabled, since
   the observer that adds .visible is the only thing that can bring it back —
   with JS off, or in a browser without the scripting media feature, the
   section simply stays on screen. */
.reveal{opacity:1;transform:none}
@media (prefers-reduced-motion:no-preference) and (scripting:enabled){
  .reveal{opacity:0;transform:translateY(14px);transition:opacity var(--dur-4) var(--ease-out),transform var(--dur-4) var(--ease-out)}
  .reveal.visible{opacity:1;transform:none}
  .reveal-delay-1{transition-delay:60ms}
  .reveal-delay-2{transition-delay:120ms}
  .reveal-delay-3{transition-delay:180ms}
  .reveal-delay-4{transition-delay:240ms}
}

@media (max-width:900px){
  .contact-grid{grid-template-columns:1fr}
}
@media (max-width:768px){
  .hamburger{display:flex}
  .form-row{grid-template-columns:1fr}
  .founder-card{grid-template-columns:1fr}
  .founder-card .founder-mark{justify-self:center}
  .req-item{grid-template-columns:1fr;gap:6px}
  .req-num{padding-top:0}
  .faq-answer p{padding-right:0}
  .btn-apply,.btn-community,.btn-primary,.btn-secondary{width:100%}
}