:root{
  --paper:#fafafa;
  --card:#ffffff;
  --ink:#16161a;
  --ink-soft:#43434c;
  --muted:#7c7c86;
  --rule:#e4e3e0;
  --rule-strong:#cfcec9;
  --accent:#2f4858;
  /* Self-hosted faces go here. See deploy/README.md for the @font-face block.
     No webfont is loaded from a third party, so no request leaves the visitor's
     browser before they have consented to anything. */
  --display:"Newsreader","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --wrap:64rem;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--accent);text-underline-offset:.18em;text-decoration-thickness:.06em}
a:hover{color:var(--ink)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
hr{border:0;border-top:1px solid var(--rule);margin:0}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 1.5rem}
.narrow{max-width:44rem}

/* ---------- type ---------- */
h1,h2,h3,h4{font-family:var(--display);font-weight:400;letter-spacing:-.012em;margin:0}
h1{font-size:clamp(2.05rem,4.9vw,3.15rem);line-height:1.1}
h2{font-size:clamp(1.6rem,3.4vw,2.3rem);line-height:1.15}
h3{font-size:1.22rem;line-height:1.3}
h4{font-size:1.02rem}
.em{font-style:italic}
.eyebrow{
  font-family:var(--body);font-size:.72rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  margin:0 0 1rem;
}
.lede{font-size:1.1rem;color:var(--ink-soft);max-width:38rem}
.small{font-size:.86rem;color:var(--muted)}
p{margin:0 0 1rem}
.legal p,.legal li{color:var(--ink-soft);font-size:.95rem}
.legal h2{margin:2.5rem 0 .75rem;font-size:1.35rem}
.legal h3{margin:1.75rem 0 .5rem;font-size:1.02rem;font-family:var(--body);font-weight:600}
.legal ul{padding-left:1.1rem}
.legal li{margin-bottom:.4rem}

/* ---------- header ---------- */
.masthead{
  position:sticky;top:0;z-index:40;
  background:rgba(250,250,250,.92);
  backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid var(--rule);
}
.masthead .wrap{display:flex;align-items:center;gap:1.5rem;height:60px}
.brand{display:flex;align-items:center;gap:.6rem;font-family:var(--display);font-size:1.15rem;color:var(--ink);text-decoration:none}
.brand .mark{
  width:26px;height:26px;border:1px dashed var(--rule-strong);border-radius:3px;
  display:grid;place-items:center;font-family:var(--mono);font-size:.5rem;color:var(--muted);
}
.nav{margin-left:auto;display:flex;gap:1.4rem;align-items:center}
.nav a{font-size:.9rem;color:var(--ink-soft);text-decoration:none}
.nav a:hover,.nav a[aria-current]{color:var(--ink);text-decoration:underline}
@media(max-width:720px){
  .nav{gap:.9rem}
  .nav a{font-size:.8rem}
  .nav .hide-sm{display:none}
}

/* ---------- sections ---------- */
section{padding:4.5rem 0}
section+section{border-top:1px solid var(--rule)}
body.beats section+section{border-top:0}
.hero{padding:6rem 0 5rem}
.hero h1{max-width:20ch}
.hero .lede{margin-top:1.5rem}
.stack>*+*{margin-top:1.25rem}

/* ---------- grids & cards ---------- */
.grid{display:grid;gap:1.25rem}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
@media(max-width:800px){.g2,.g3{grid-template-columns:1fr}}
.card{
  background:var(--card);border:1px solid var(--rule);border-radius:4px;
  padding:1.5rem;
}
.card h3{margin-bottom:.4rem}
.card p{font-size:.94rem;color:var(--ink-soft)}
.card>:last-child{margin-bottom:0}
.card .status{
  display:inline-block;font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);border:1px solid var(--rule-strong);
  border-radius:2px;padding:.15rem .4rem;margin-bottom:.75rem;
}

/* charter pull quote: the one loud element */
.charter{
  border-left:2px solid var(--ink);
  padding:.25rem 0 .25rem 1.6rem;
  font-family:var(--display);font-size:clamp(1.15rem,2.4vw,1.5rem);
  line-height:1.45;font-style:italic;color:var(--ink);
  max-width:42rem;
}
.charter ol{margin:0;padding-left:1.2rem}
.charter li+li{margin-top:.75rem}

/* facts table */
table.facts{border-collapse:collapse;width:100%;font-size:.92rem}
table.facts td{border-bottom:1px solid var(--rule);padding:.65rem 0;vertical-align:top}
table.facts td:first-child{width:36%;color:var(--muted)}
table.data{border-collapse:collapse;width:100%;font-size:.88rem;margin:1rem 0}
table.data th,table.data td{border:1px solid var(--rule);padding:.5rem .6rem;text-align:left;vertical-align:top}
table.data th{background:#f2f1ee;font-weight:600}

/* people */
.person{display:flex;gap:1rem;align-items:flex-start}
.avatar{
  flex:0 0 64px;height:64px;border:1px dashed var(--rule-strong);border-radius:50%;
  display:grid;place-items:center;font-family:var(--mono);font-size:.55rem;color:var(--muted);text-align:center;
}
.role{font-size:.82rem;color:var(--muted);margin:.1rem 0 .5rem}

/* placeholders */
.ph{
  border:1px dashed var(--rule-strong);border-radius:3px;background:#f3f2ef;
  display:grid;place-items:center;text-align:center;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;color:var(--muted);
  padding:1rem;min-height:120px;
}

/* buttons */
.btn{
  display:inline-block;font:inherit;font-size:.9rem;cursor:pointer;
  background:var(--ink);color:#fafafa;border:1px solid var(--ink);
  border-radius:3px;padding:.62rem 1.15rem;text-decoration:none;
}
.btn:hover{background:#000;color:#fff}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--paper)}

/* forms */
.form{max-width:34rem}
.field{margin-bottom:1.1rem}
label{display:block;font-size:.84rem;font-weight:500;margin-bottom:.35rem}
input,select,textarea{
  width:100%;font:inherit;font-size:.94rem;color:var(--ink);
  background:var(--card);border:1px solid var(--rule-strong);border-radius:3px;
  padding:.55rem .7rem;
}
textarea{min-height:130px;resize:vertical}
.check{display:flex;gap:.6rem;align-items:flex-start;font-size:.86rem;color:var(--ink-soft)}
.check input{width:auto;margin-top:.25rem;flex:0 0 auto}
.req{color:var(--muted)}

/* social */
.social{display:flex;flex-wrap:wrap;gap:.6rem;list-style:none;padding:0;margin:0}
.social a{
  display:inline-block;font-size:.85rem;text-decoration:none;color:var(--ink-soft);
  border:1px solid var(--rule-strong);border-radius:2rem;padding:.35rem .9rem;background:var(--card);
}
.social a:hover{border-color:var(--ink);color:var(--ink)}

/* ---------- cookie banner ---------- */
.cookie{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:var(--card);border-top:1px solid var(--rule-strong);
  padding:1rem 0;
}
.cookie .wrap{display:flex;gap:1rem;align-items:center;flex-wrap:wrap}
.cookie p{margin:0;font-size:.85rem;color:var(--ink-soft);flex:1 1 22rem}
.cookie .btn{font-size:.82rem;padding:.45rem .9rem}
.cookie[hidden]{display:none}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--rule);padding:3rem 0 4rem;background:#f5f4f1}
.fgrid{display:grid;gap:2rem;grid-template-columns:repeat(4,1fr)}
@media(max-width:800px){.fgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.fgrid{grid-template-columns:1fr}}
footer h4{font-family:var(--body);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:.8rem}
footer ul{list-style:none;margin:0;padding:0}
footer li{margin-bottom:.45rem}
footer a{font-size:.88rem;color:var(--ink-soft);text-decoration:none}
footer a:hover{color:var(--ink);text-decoration:underline}
.colophon{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--rule);font-size:.8rem;color:var(--muted)}
.linkbtn{background:none;border:0;padding:0;font:inherit;font-size:.88rem;color:var(--ink-soft);cursor:pointer;text-decoration:none}
.linkbtn:hover{color:var(--ink);text-decoration:underline}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ================= v2: beats, pager, brand, portraits ================= */
html{scroll-padding-top:64px}
body.beats{scroll-snap-type:y proximity}
.beat{
  min-height:100svh;display:flex;align-items:center;
  padding:6rem 0 7rem;scroll-snap-align:start;
}
.beat:first-of-type{padding-top:4.5rem}
.beat>.wrap{width:100%}
@media(max-width:800px){.beat{align-items:flex-start;min-height:auto;padding:4.5rem 0 5rem}}

/* pager */
.pager{
  position:fixed;right:1.1rem;bottom:1.1rem;z-index:70;
  display:inline-flex;align-items:center;gap:.55rem;
  background:rgba(250,250,250,.92);backdrop-filter:saturate(180%) blur(8px);
  border:1px solid var(--rule-strong);border-radius:2rem;
  padding:.45rem .85rem;cursor:pointer;
  font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;color:var(--ink-soft);
}
.pager:hover{border-color:var(--ink);color:var(--ink)}
.pager svg{width:11px;height:11px;transition:transform .25s ease}
.pager[data-last="true"] svg{transform:rotate(180deg)}
body.banner-open .pager{bottom:7.5rem}
body.banner-open{padding-bottom:5rem}
@media(max-width:600px){.pager{right:.75rem;bottom:.75rem}}

/* brand lockups */
.brand img{height:24px;width:auto}
.brand .name{font-family:var(--display);font-size:1.12rem;color:var(--ink)}
.hero-lockup{width:min(330px,58vw);margin:0 0 2.25rem}
@media(max-width:600px){.hero-lockup{width:min(300px,80vw);margin-bottom:2rem}}

/* product beat */
.product{display:grid;grid-template-columns:1.05fr .95fr;gap:3rem;align-items:center}
@media(max-width:880px){.product{grid-template-columns:1fr;gap:2rem}}
.product-logo{width:180px;margin-bottom:1.5rem}
.shot{
  max-width:262px;margin:0 auto;border:1px solid var(--rule);border-radius:14px;
  overflow:hidden;background:var(--card);box-shadow:0 18px 40px -28px rgba(0,0,0,.45);
}
.shot img{width:100%;height:auto}

/* portraits */
.people{display:grid;grid-template-columns:repeat(2,1fr);gap:2.5rem;max-width:46rem}
@media(max-width:700px){.people{grid-template-columns:1fr;gap:2rem}}
.portrait{
  width:132px;height:132px;border-radius:50%;object-fit:cover;
  border:1px solid var(--rule);margin-bottom:1.1rem;display:block;
}
.person-block h3{margin-bottom:.15rem}
.person-block .role{margin-bottom:.6rem}
.li{display:inline-flex;align-items:center;gap:.35rem;font-size:.85rem;text-decoration:none}
.li svg{width:13px;height:13px}

/* form status */
.form-status{margin-top:1rem;font-size:.88rem;padding:.7rem .9rem;border-radius:3px;display:none}
.form-status[data-state="ok"]{display:block;background:#eef4ee;border:1px solid #cfe0cf;color:#2c4a2f}
.form-status[data-state="err"]{display:block;background:#fbeeee;border:1px solid #e6cccc;color:#7a2f2f}
.form-status[data-state="busy"]{display:block;background:#f2f1ee;border:1px solid var(--rule-strong);color:var(--ink-soft)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.btn[disabled]{opacity:.55;cursor:progress}

/* policy index */
.policy-list{list-style:none;padding:0;margin:1.25rem 0 0}
.policy-list li{border-top:1px solid var(--rule);padding:1rem 0}
.policy-list li:last-child{border-bottom:1px solid var(--rule)}
.policy-list a{font-family:var(--display);font-size:1.1rem;text-decoration:none;color:var(--ink)}
.policy-list a:hover{text-decoration:underline}
.policy-list p{margin:.2rem 0 0;font-size:.88rem;color:var(--muted)}

@media(max-width:640px){
  .masthead .wrap{gap:.55rem;height:56px}
  .brand .name{display:none}
  .brand img{height:22px}
  .nav{gap:.8rem}
  .nav a{font-size:.8rem}
  html{scroll-padding-top:60px}
}

/* ================= v3: wordmark, expander, socials ================= */

/* brand lockup: mark + wordmark, left-aligned with body copy */
.brand{display:flex;align-items:center;gap:.55rem;text-decoration:none;color:var(--ink)}
.brand img{height:22px;width:auto}
.brand .wm{height:13px;width:auto;color:var(--ink);display:block}

.hero-mark{width:min(190px,42vw);margin:0 0 1.4rem;display:block}
.hero-wm{width:min(330px,72vw);color:var(--ink);margin:0 0 1.75rem;display:block}
@media(max-width:600px){
  .hero-mark{width:min(150px,40vw);margin-bottom:1.1rem}
  .hero-wm{width:min(270px,76vw);margin-bottom:1.4rem}
}

/* disabled call to action */
.btn.is-disabled{
  background:transparent;color:var(--muted);border:1px dashed var(--rule-strong);
  cursor:not-allowed;pointer-events:none;
}

/* in-beat expander */
.expander{border-top:1px solid var(--rule);margin-top:2.25rem}
.expander>summary{
  list-style:none;cursor:pointer;padding:1rem 0;
  display:flex;align-items:center;gap:.6rem;
  font-size:.9rem;color:var(--ink-soft);
}
.expander>summary::-webkit-details-marker{display:none}
.expander>summary:hover{color:var(--ink)}
.expander>summary::after{
  content:"";width:8px;height:8px;margin-left:.1rem;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .2s ease;
}
.expander[open]>summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.expander-body{padding-bottom:1.25rem;animation:reveal .25s ease}
@keyframes reveal{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* social icon row */
.social-icons{display:flex;gap:.6rem;list-style:none;padding:0;margin:0}
.social-icons a{
  width:40px;height:40px;border-radius:50%;
  border:1px solid var(--rule-strong);background:var(--card);color:var(--ink-soft);
  display:grid;place-items:center;transition:border-color .15s ease,color .15s ease;
}
.social-icons a:hover{border-color:var(--ink);color:var(--ink)}
.social-icons svg,.social-icons img{width:19px;height:19px;display:block}

/* contact layout */
.contact-cols{display:grid;grid-template-columns:1.15fr 1fr;gap:3rem;align-items:start}
@media(max-width:820px){.contact-cols{grid-template-columns:1fr;gap:2.25rem}}
.contact-list{list-style:none;padding:0;margin:0}
.contact-list li{border-top:1px solid var(--rule);padding:.95rem 0}
.contact-list li:last-child{border-bottom:1px solid var(--rule)}
.contact-list .who{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:.2rem}
.contact-list>li>a{font-family:var(--display);font-size:1.12rem;text-decoration:none;color:var(--ink);display:inline-block}
.contact-list>li>a:hover{text-decoration:underline}
.contact-list p a{font-family:var(--body);font-size:inherit;color:var(--accent)}
.contact-list p{margin:.25rem 0 0;font-size:.86rem;color:var(--muted)}
.notice-card{background:var(--card);border:1px solid var(--rule);border-radius:4px;padding:1.4rem 1.5rem}
.notice-card h4{font-family:var(--body);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 .8rem}
.notice-card h4+h4{margin-top:1.6rem}
.notice-card p{margin:0 0 .5rem;font-size:.9rem;color:var(--ink-soft)}

/* privacy policy navigation aids */
.applies{
  border-left:2px solid var(--rule-strong);padding:.15rem 0 .15rem 1rem;
  font-size:.92rem;color:var(--ink-soft);margin:1.25rem 0 0;
}
.backlink{margin:2.5rem 0 0;padding-top:1.25rem;border-top:1px solid var(--rule)}
.backlink a{font-size:.86rem;text-decoration:none}
.backlink a:hover{text-decoration:underline}

/* anchored headings in long documents clear the sticky header,
   and keep their eyebrow label visible */
.legal h2[id],.legal h3[id],#sections{scroll-margin-top:6.5rem}
.backlink a+a{margin-left:1.5rem}
.applies a{font-weight:inherit}

/* ---------- notice under the short version (terms: arbitration) ---------- */
.card.notice{border-left:3px solid var(--ink);}

/* ---------- legal index (/legal) ----------
   One card per document, the whole card is the link. The effective date and
   version line comes from the document's own front matter. */
.legal-index{padding:0 0 5rem}
.legal-list{list-style:none;margin:0;padding:0;display:grid;gap:1rem}
.legal-item{display:block;text-decoration:none;color:inherit;transition:border-color .15s}
.legal-item:hover,.legal-item:focus-visible{border-color:var(--ink)}
.legal-item h2{font-size:1.25rem;margin:0 0 .35rem}
.legal-item p{margin:0}
.legal-item .meta{margin-top:.6rem}
.legal-item:hover h2{text-decoration:underline;text-underline-offset:3px}

/* ---------- mobile navigation ----------
   site.js adds .js-nav to the masthead and injects the toggle button, so
   the seven pages keep identical header markup. With JavaScript off the
   class is never added and the nav renders as the inline list it is
   today, which means the header is never left with no way through. */
.navtoggle{display:none}
@media(max-width:700px){
  .masthead.js-nav .navtoggle{
    display:flex;flex-direction:column;justify-content:center;gap:4px;
    margin-left:auto;width:38px;height:34px;padding:0 9px;flex:0 0 auto;
    background:none;border:1px solid var(--rule-strong);border-radius:3px;
    color:var(--ink-soft);cursor:pointer;
  }
  .masthead.js-nav .navtoggle:hover{border-color:var(--ink);color:var(--ink)}
  .masthead.js-nav .navtoggle span{
    display:block;height:1.5px;background:currentColor;border-radius:1px;
    transition:transform .2s ease,opacity .2s ease;
  }
  .masthead.js-nav .navtoggle[aria-expanded="true"] span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
  .masthead.js-nav .navtoggle[aria-expanded="true"] span:nth-child(2){opacity:0}
  .masthead.js-nav .navtoggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

  .masthead.js-nav .nav{
    position:absolute;top:100%;left:0;right:0;margin-left:0;
    display:none;flex-direction:column;align-items:stretch;gap:0;
    background:var(--paper);border-bottom:1px solid var(--rule);
    box-shadow:0 8px 20px rgba(22,22,26,.06);
  }
  .masthead.js-nav .nav[data-open="true"]{display:flex}
  .masthead.js-nav .nav a{
    font-size:.95rem;padding:.9rem 1.5rem;
    border-top:1px solid var(--rule);text-decoration:none;
  }
  .masthead.js-nav .nav a:first-child{border-top:0}
  .masthead.js-nav .nav a:hover,
  .masthead.js-nav .nav a[aria-current]{background:var(--card);color:var(--ink)}
}