/* CommonUs — role list and registration modal.
   Tokens, component names and type scale taken from the live commonus.com so
   this drops into the existing site rather than sitting beside it looking
   nearly right. */

:root{
  --ink:#10233f;--ink-2:#263d5a;--muted:#607188;--paper:#fff;
  --cloud:#f3f5f8;--line:#d8e0e9;--blue:#175cd3;--blue-2:#0f49ad;
  --teal:#008c95;--amber:#d99113;--green:#147a59;--red:#a83838;
  --brand-red:#e24c55;--mark-red:#ef5b60;--mark-teal:#27b9c2;
  --shadow:0 20px 60px rgba(21,44,79,.12);--radius:24px;
  --sans:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --serif:Georgia,"Times New Roman",serif;
}

*{box-sizing:border-box}
body{margin:0;background:var(--cloud);color:var(--ink);font:16px/1.62 var(--sans);
  -webkit-font-smoothing:antialiased}
h1,h2,h3,p{margin-top:0}
h1{font:700 clamp(52px,6.4vw,84px)/.98 var(--serif);letter-spacing:-.055em;
  margin:23px 0 27px;max-width:760px}
h1 span{color:var(--blue)}
h2{font:700 clamp(30px,3.6vw,44px)/1.08 var(--serif);letter-spacing:-.04em;
  margin:0 0 18px}
h3{font:800 19px/1.3 var(--sans);letter-spacing:-.01em;margin:0 0 8px}
a{color:var(--blue)}

.wrap{width:min(100% - 40px,1180px);margin-inline:auto}
.narrow{max-width:760px}
.center{text-align:center}
.lead{font-size:19px;line-height:1.6;color:var(--ink-2);max-width:64ch}
.eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.14em;
  font-weight:850;color:var(--teal);margin:0 0 10px}
.kicker{font-size:13px;color:var(--muted);margin:0}

/* ------------------------------------------------------------- buttons -- */

.button{border:0;border-radius:999px;padding:13px 22px;font-weight:850;
  text-decoration:none;display:inline-flex;align-items:center;
  justify-content:center;gap:9px;transition:.2s ease;cursor:pointer;
  font-family:inherit;font-size:15px}
.button:hover{transform:translateY(-1px)}
.button-primary{background:var(--blue);color:#fff;
  box-shadow:0 9px 22px rgba(23,92,211,.2)}
.button-primary:hover{background:var(--blue-2)}
.button-dark{background:var(--ink);color:#fff}
.button-light{background:#fff;color:var(--ink);border:1px solid var(--line)}
.button-small{padding:10px 17px;font-size:13px}
.button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,
summary:focus-visible{outline:3px solid var(--blue);outline-offset:2px}

/* -------------------------------------------------------------- header -- */

.site-header{background:var(--paper);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:30}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding:15px 0}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;
  color:var(--ink);font:900 23px/1 var(--sans);letter-spacing:-.03em}
.brand em{font-style:normal;color:var(--brand-red)}
.mark{width:38px;height:38px;border-radius:50%;background:var(--ink);
  display:grid;place-items:center;position:relative;flex:none}
.mark::before,.mark::after{content:"";width:9px;height:9px;border-radius:50%;
  position:absolute;top:14px}
.mark::before{left:8px;background:#fff}
.mark::after{right:8px;background:var(--mark-teal)}
.mark i{width:9px;height:9px;border-radius:50%;background:var(--mark-red);
  display:block}
.nav{display:none;align-items:center;gap:26px}
.nav a{color:var(--ink-2);text-decoration:none;font-size:14px;font-weight:650}
.nav a:hover,.nav .nav-link:hover{color:var(--ink)}
/* Sign in opens a dialog, so it is a button that has to sit in the nav as
   though it were one of the links beside it. */
/* Line-height is left to inherit rather than set in a font shorthand, so the
   row sits at the same height as the links beside it in the stacked mobile
   menu. */
.nav .nav-link{background:none;border:0;padding:0;cursor:pointer;
  color:var(--ink-2);font-family:var(--sans);font-size:14px;font-weight:650;
  line-height:inherit}
.header-actions{display:flex;align-items:center;gap:9px}
/* Two Join buttons on the first screen is one too many. The header's copy
   takes over only once the hero's has scrolled away -- and it is hidden
   only when the script is running to bring it back, so with no JS the way
   in stays where it always was. */
body.cta-managed .header-actions .button-primary{opacity:0;visibility:hidden;
  transform:translateY(-5px);transition:opacity .18s ease,transform .18s ease}
body.cta-managed.past-hero .header-actions .button-primary{opacity:1;
  visibility:visible;transform:none}
.nav-toggle{border:1px solid var(--line);background:#fff;border-radius:12px;
  padding:8px 12px;font-size:17px;cursor:pointer}
/* Below 980px the Join label would crowd the row, so it shortens rather
   than disappearing. */
@media(max-width:520px){
  .header-actions .button-primary{font-size:0;padding:10px 14px}
  .header-actions .button-primary::after{content:"Join";font-size:13px}
  .brand{font-size:19px;gap:9px}
  .mark{width:32px;height:32px}
  .mark::before,.mark::after{width:8px;height:8px;top:12px}
  .mark::before{left:6px}.mark::after{right:6px}
  .mark i{width:8px;height:8px}
}
@media(min-width:980px){.nav{display:flex}.nav-toggle{display:none}}
body.nav-open .nav{display:flex;flex-direction:column;align-items:flex-start;
  position:absolute;inset:100% 0 auto 0;background:#fff;padding:18px 20px 22px;
  border-bottom:1px solid var(--line)}

/* ---------------------------------------------------------------- hero -- */

.hero{background:linear-gradient(135deg,#fff 0%,#fff 58%,#eaf2ff 100%);
  border-bottom:1px solid var(--line)}
.hero-grid{display:grid;gap:40px;align-items:center;padding:32px 0 60px}
@media(min-width:980px){
  .hero-grid{grid-template-columns:1.13fr .87fr;gap:64px;padding:36px 0 50px}
}
.hero-copy{min-width:0}
/* The returning person's button above the statement: the same pill as the
   primary action, one step smaller than the hero's own Join so the page still
   has one loudest call. Sits in the gap the hero already keeps above the
   wordmark line; centred on a phone with the rest of the column. */
.hero-signin{margin:0 0 18px}
@media(max-width:759px){.hero-signin{margin-bottom:28px}}
/* Set in the wordmark's own sans, not the serif of the other headings:
   this line IS the logotype, and uppercasing or re-cutting it would destroy
   the wordplay it exists to make. */
h1.wordmark-line{font:900 clamp(30px,3.5vw,50px)/1.05 var(--sans);
  letter-spacing:-.045em;margin:0 0 10px;max-width:none;text-wrap:balance}
h2.wordplay-h{font-family:var(--sans);font-weight:900;letter-spacing:-.045em}
.wordmark-line em,.wordplay-h em{font-style:normal;color:var(--brand-red)}
.wordmark-line b,.wordplay-h b{color:var(--blue);font-weight:inherit}
.tagline{font:700 clamp(17px,1.6vw,22px)/1.35 var(--serif);
  letter-spacing:-.02em;color:var(--ink-2);margin:0 0 22px}
.hero-line{font:800 clamp(18px,1.7vw,23px)/1.32 var(--sans);
  letter-spacing:-.03em;margin:0 0 14px;text-wrap:balance}
.hero-line span{color:var(--blue)}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:20px;
  margin:26px 0 14px}
.button-lg{padding:16px 28px;font-size:16px}
.link-quiet{color:var(--ink-2);font-weight:800;font-size:15px;
  text-decoration:none}
.link-quiet:hover{color:var(--blue)}
.participants{font-size:13px;color:var(--muted);margin:0;line-height:1.75}
/* Each name stays whole; the line may break between them, never inside one. */
.participants b{color:var(--ink-2);font-weight:800;white-space:nowrap}
.participants span{display:block;margin-top:2px}
.hero-note{font-size:14px;color:var(--muted);margin:0}
.early-band .wrap{justify-content:flex-start}

/* On a phone the hero is one narrow column, and left-aligned text sits
   against the edge of an otherwise empty screen. Centred, the block reads as
   the single statement it is. The cut-off is the width at which the flow grid
   also collapses; above it the column is wide enough that centring long lines
   would cost more in readability than it gains, so the two-column layout
   keeps its left edge. */
@media(max-width:759px){
  .hero-copy{text-align:center}
  .hero-actions{justify-content:center}
  /* One step down, so "= Common US" stays on the wordmark's own line: at
     30px the line wants 365px and a 375px phone offers 335. */
  /* The closing line is the same logotype in the same face, so it needs the
     same step down. It inherits its size from h2, which is cut for the serif
     headings and runs wide in the sans at 900. */
  h1.wordmark-line,h2.wordplay-h{font-size:27px}
  /* The calls to action sit centred too, so a thumb-width column does not
     have one button hugging the left edge under centred copy. Each is
     centred on its own rather than by centring the block it sits in --
     the checklist above the final button reads better left-aligned. */
  .final-cta .button{display:block;margin-inline:auto}
}
/* The narrowest phones still in use offer about 280px. */
@media(max-width:359px){
  h1.wordmark-line,h2.wordplay-h{font-size:22px}
}

/* ------------------------------------------------------------ sections -- */

/* Two stacked sections contribute a bottom and a top, so a reader sees twice
   this number between them -- plus the last card's own bottom padding, which
   is why the band still reads wider than the number suggests. */
.section{padding:40px 0}
.section-paper{background:var(--paper);border-block:1px solid var(--line)}

.flow{display:grid;gap:16px;margin-top:34px;list-style:none;padding:0}
@media(min-width:760px){.flow{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}}
.flow-step{background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius);padding:24px}
.section-paper .flow-step{background:var(--cloud)}
.flow-step .num{font:800 12px/1 var(--sans);letter-spacing:.12em;
  color:var(--teal);display:block;margin-bottom:12px}
.flow-step p{margin:0;color:var(--ink-2);font-size:15px}

/* Two columns where there is room, stacked where there is not. */
.split{display:grid;gap:26px;align-items:start;margin:28px 0}
@media(min-width:860px){.split{grid-template-columns:1.05fr .95fr;gap:44px}}

.example{margin:0;background:var(--paper);border:1px solid var(--line);
  border-left:3px solid var(--teal);
  border-radius:0 var(--radius) var(--radius) 0;padding:22px 26px;
  display:grid;gap:6px}
.section-paper .example{background:var(--cloud)}
.example b{font-size:17px}
.example span{font-size:14px;color:var(--muted)}

.measures{margin:0;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius);padding:26px 28px;display:grid;
  grid-template-columns:auto 1fr;gap:13px 22px;align-items:baseline}
.measures dt{font-size:12px;font-weight:850;text-transform:uppercase;
  letter-spacing:.07em;color:var(--teal);white-space:nowrap}
.measures dd{margin:0;color:var(--ink-2);font-size:15px}

.pull{font:700 clamp(21px,2.5vw,29px)/1.25 var(--serif);letter-spacing:-.03em;
  color:var(--ink);margin:28px 0 0}

.levels{list-style:none;display:flex;flex-wrap:wrap;gap:9px;padding:0;
  margin:22px 0 10px}
.levels button{background:var(--paper);border:1px solid var(--line);
  border-radius:999px;padding:8px 17px;color:var(--ink);cursor:pointer;
  font:800 14px/1.2 var(--sans);transition:border-color .15s,color .15s}
.levels button:hover,.levels button:focus-visible{border-color:var(--blue);
  color:var(--blue)}
.levels-hint{font-size:13px;color:var(--muted);margin:0 0 4px}

/* The examples, inside the dialog the rest of the page already uses. */
.scope-examples{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.signin-note{background:var(--cloud);border:1px solid var(--line);
  border-radius:var(--radius);padding:18px 20px;margin:0 0 22px;
  color:var(--ink-2);font-size:15px;line-height:1.55}
.signin-note b{display:block;color:var(--ink);margin-bottom:4px}
.signin-actions{display:grid;gap:10px;justify-items:stretch}

.scope-examples li{background:var(--cloud);border:1px solid var(--line);
  border-radius:var(--radius);padding:16px 18px;color:var(--ink-2);
  font-size:15px;line-height:1.55}
.area-grid{border:1px solid var(--line);border-radius:var(--radius);
  background:var(--paper);padding:22px 24px}
.area-grid summary{cursor:pointer;font-weight:850;font-size:15px}
.area-grid ul{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:8px;
  color:var(--ink-2);font-size:15px}
@media(min-width:720px){.area-grid ul{grid-template-columns:1fr 1fr}}

.check{list-style:none;padding:0;margin:22px 0 30px;display:grid;gap:10px}
.check li{padding-left:28px;position:relative;color:var(--ink-2)}
.check li::before{content:"✓";position:absolute;left:0;color:var(--green);
  font-weight:850}

.trace{list-style:none;padding:0;margin:26px 0;display:grid;gap:8px}
.trace li{background:var(--paper);border:1px solid var(--line);
  border-left:3px solid var(--line);border-radius:0 12px 12px 0;
  padding:12px 16px;font-size:15px;color:var(--ink-2)}
.trace .done{border-left-color:var(--green);color:var(--ink);font-weight:800}

/* The original site's hero card, carrying the Early Access promise. */
.promise-card{background:var(--ink);color:#fff;border-radius:30px;padding:26px;
  box-shadow:var(--shadow);position:relative}
.promise-card::before{content:"";position:absolute;inset:0;border-radius:30px;
  background:radial-gradient(circle at 85% 10%,rgba(39,185,194,.28),
    transparent 35%);pointer-events:none}
.promise-card>*{position:relative}
.promise-card .label{font-size:11px;text-transform:uppercase;
  letter-spacing:.14em;color:#9dc5ff;font-weight:900}
.promise-card h2{font:700 clamp(22px,1.9vw,27px)/1.12 var(--serif);color:#fff;
  margin:10px 0 18px;letter-spacing:-.03em}
.promise-list{display:grid;gap:9px}
.promise{display:grid;grid-template-columns:30px 1fr;gap:11px;
  align-items:start;padding:11px 12px;border:1px solid rgba(255,255,255,.13);
  border-radius:14px;background:rgba(255,255,255,.055)}
.promise i{font-style:normal;width:30px;height:30px;border-radius:9px;
  background:rgba(39,185,194,.18);color:#64d8df;display:grid;
  place-items:center;font-weight:900}
.promise b{display:block;font-size:14px}
.promise span{display:block;color:#c5d0de;font-size:12px;margin-top:3px}
.availability{margin-top:16px;border-top:1px solid rgba(255,255,255,.14);
  padding-top:14px;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.availability div{font-size:12px;color:#b8c5d5}
.availability b{display:block;color:#fff;font-size:12px;margin-bottom:3px}
@media(max-width:520px){
  .promise-card{padding:24px;border-radius:22px}
  .availability{grid-template-columns:1fr}
}

/* ----------------------------------------------------------- role list -- */

.roles{display:grid;gap:18px;margin-top:34px}
@media(min-width:820px){.roles{grid-template-columns:1fr 1fr}}
.role{background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius);padding:28px;display:flex;flex-direction:column;
  box-shadow:0 1px 2px rgba(21,44,79,.04)}
.role:hover{box-shadow:var(--shadow)}
.role-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px}
.role-head h3{margin:0}
.role-price{font-size:11px;font-weight:850;text-transform:uppercase;
  letter-spacing:.08em;color:var(--teal);white-space:nowrap}
.role-summary{color:var(--ink-2);margin:12px 0 16px;font-size:15px}
.role-can{list-style:none;padding:0;margin:0 0 24px;display:grid;gap:8px;
  font-size:14px;color:var(--muted)}
.role-can li{padding-left:18px;position:relative}
.role-can li::before{content:"·";position:absolute;left:5px;font-weight:850;
  color:var(--teal)}
.role .button{margin-top:auto;align-self:flex-start}
/* Centred on a phone, beside the other calls to action. It lives here rather
   than in the hero's mobile block because both selectors are `.role .button`
   -- a media query adds no specificity, so only coming later wins. */
@media(max-width:759px){.role .button{align-self:center}}

.cta-box{background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius);padding:34px;box-shadow:var(--shadow)}
.final-cta{background:var(--ink);color:#fff}
.final-cta h2{color:#fff}
.final-cta .lead{color:#c6d3e4}
.final-cta .check li{color:#c6d3e4}
.final-cta .check li::before{color:#6ee7b7}
.final-cta .kicker{color:#9db0c9}

/* --------------------------------------------------------------- modal -- */

.modal{width:min(100% - 28px,560px);max-height:90vh;padding:0;border:0;
  border-radius:var(--radius);overflow:auto;background:var(--paper);
  box-shadow:var(--shadow)}
.modal::backdrop{background:rgba(16,35,63,.55)}
.modal-chrome{position:sticky;top:0;display:flex;justify-content:flex-end;
  padding:12px 12px 0;background:var(--paper)}
.modal-close{border:0;background:none;font-size:26px;line-height:1;cursor:pointer;
  color:var(--muted);padding:2px 8px}
.modal-body{padding:4px 32px 32px}
.modal-body h2{font-size:clamp(26px,3.4vw,32px);margin-bottom:10px}
.modal-intro{color:var(--ink-2);font-size:15px;margin-bottom:22px}
.modal-foot{font-size:13px;color:var(--muted);margin:18px 0 0}
/* A button that has to read as a link, because it opens a dialog rather than
   going anywhere -- and telling a screen reader it is a link would be a lie. */
.link-button{background:none;border:0;padding:0;font:inherit;cursor:pointer;
  color:var(--blue);font-weight:800;text-decoration:underline}

.steps{list-style:none;display:flex;gap:8px;padding:0;margin:0 0 24px}
.steps li{flex:1;font-size:11px;font-weight:850;text-transform:uppercase;
  letter-spacing:.08em;color:var(--muted);border-top:3px solid var(--line);
  padding-top:9px}
.steps li.current{color:var(--ink);border-top-color:var(--blue)}
.steps li.done{border-top-color:var(--blue)}

.picker{display:grid;gap:10px}
.picker button{text-align:left;display:grid;gap:4px;border:1px solid var(--line);
  border-radius:16px;padding:17px 19px;background:var(--paper);cursor:pointer;
  font:inherit}
.picker button:hover{border-color:var(--blue);background:#f7faff}
.picker strong{font-size:16px}
.picker span{color:var(--ink-2);font-size:14px}
.picker em{font-style:normal;font-size:11px;font-weight:850;
  text-transform:uppercase;letter-spacing:.08em;color:var(--teal)}

/* ---------------------------------------------------------------- form -- */

.form{display:grid;gap:2px}
.field{margin-bottom:15px}
.field label{display:block;font-size:11px;text-transform:uppercase;
  letter-spacing:.05em;font-weight:850;margin-bottom:7px}
.field label small{font-weight:600;color:var(--muted);text-transform:none;
  letter-spacing:0}
.field input,.field select{width:100%;border:1px solid #cbd5e1;border-radius:12px;
  padding:12px 13px;background:#fbfcfd;color:var(--ink);outline:none;
  transition:.15s;font:inherit}
.field input:focus,.field select:focus{border-color:var(--blue);background:#fff}
.field .help{margin:6px 0 0;font-size:13px;color:var(--muted)}

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;cursor:pointer;font-size:13px;
  border:1px solid #cbd5e1;border-radius:999px;padding:8px 14px;
  background:#fbfcfd;font-weight:650}
.chip input{position:absolute;opacity:0;width:0;height:0}
.chip.on{border-color:var(--blue);background:#eaf2ff;color:var(--blue-2);
  font-weight:850}

.consents{display:grid;gap:11px;margin:6px 0 4px}
.consent{display:flex;gap:11px;align-items:flex-start;font-size:14px;
  color:var(--ink-2);line-height:1.5}
.consent input{margin-top:3px;flex:none}
.consent em{font-style:normal;color:var(--muted)}

.error{margin:6px 0 0;color:var(--red);font-size:14px;font-weight:800}
.form-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;
  margin-top:18px}

.done dl{display:grid;grid-template-columns:auto 1fr;gap:8px 20px;margin:20px 0;
  font-size:15px}
.done dt{color:var(--muted)}
.done dd{margin:0;font-weight:800}

/* -------------------------------------------------------------- footer -- */

.footer{background:var(--paper);border-top:1px solid var(--line);padding:26px 0;
  color:var(--muted);font-size:14px}
.footer .wrap{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between}
.footer p{margin:0}