:root{--ink:#0b0b0b;--paper:#f4f4f1;--muted:#666;--line:rgba(0,0,0,.16);--max:1180px;--gutter:clamp(1.5rem,5vw,5rem)}
*{box-sizing:border-box}
html{font-family:Arial,Helvetica,sans-serif;background:var(--paper);color:var(--ink)}
body{margin:0}
a{color:inherit}
.site-head,.page-main,.site-foot{width:min(100%,var(--max));margin-inline:auto;padding-inline:var(--gutter)}
.site-head{display:flex;justify-content:space-between;align-items:center;padding-block:1.5rem;border-bottom:1px solid var(--line)}
.brand{font-weight:800;letter-spacing:.02em;text-decoration:none}
.site-head nav,.site-foot nav{display:flex;gap:1rem;flex-wrap:wrap}
.site-head nav a,.site-foot nav a{text-decoration:none}
.page-main{padding-block:clamp(4rem,9vw,9rem)}
.eyebrow{font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
h1{font-size:clamp(3rem,7vw,7rem);line-height:.92;letter-spacing:-.05em;max-width:12ch;margin:1rem 0 2.5rem}
h2{font-size:clamp(1.8rem,3vw,3.2rem);line-height:1;letter-spacing:-.035em;margin:4rem 0 1.2rem}
.lead{font-size:clamp(1.2rem,2vw,1.8rem);line-height:1.45;max-width:42em}
.prose{max-width:68ch;font-size:1.05rem;line-height:1.75;color:#333}
.index{list-style:none;padding:0;margin:4rem 0 0;border-top:1px solid var(--line)}
.index li{border-bottom:1px solid var(--line)}
.index a{display:grid;grid-template-columns:minmax(12rem,1fr) 2fr;gap:2rem;padding:1.5rem 0;text-decoration:none}
.index strong{font-size:1.1rem}
.index span{color:var(--muted);line-height:1.55}
.breadcrumbs{font-size:.8rem;color:var(--muted);margin-bottom:2rem}
.site-foot{padding-block:2rem 4rem;border-top:1px solid var(--line);font-size:.85rem}
@media(max-width:700px){.site-head{align-items:flex-start;gap:1rem;flex-direction:column}.index a{grid-template-columns:1fr;gap:.5rem}}

/* == Phones ==============================================
   The content pages are new in v16 and had none of the phone hardening the
   portal already carries, so every one of them failed the same three checks:
   a brand mark and navigation links under 20px tall, and no tap-target floor
   anywhere. The rules below are the same ones portal.css already applies —
   44px on anything you aim at, 16px on any field so iOS Safari does not zoom
   the page when it is focused, and the notch insets honoured.
   ======================================================== */
@media (max-width:900px){
  .site-head{padding-block:.5rem}
  .site-head .brand{min-height:44px;display:inline-flex;align-items:center}
  .site-head nav,.site-foot nav{gap:.25rem 1rem}
  .site-head nav a,.site-foot nav a{min-height:44px;display:inline-flex;align-items:center}
  .site-head__login{font-family:var(--mono,ui-monospace,monospace);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;border:1px solid currentColor;padding-inline:.7rem}
  a,button,input,select,textarea,label,[role="button"]{touch-action:manipulation}
  a,button{-webkit-tap-highlight-color:transparent}
  input:not([type="checkbox"]):not([type="radio"]),select,textarea{font-size:16px}
  .page-main a:not(.btn){padding-block:.15rem}
  /* the breadcrumb trail is navigation, so it gets a navigation-sized target */
  .breadcrumbs a{min-height:44px;display:inline-flex;align-items:center}
}
@supports (padding:max(0px)){
  @media (max-width:900px){
    .site-head,.page-main,.site-foot{
      padding-left:max(var(--gutter),env(safe-area-inset-left));
      padding-right:max(var(--gutter),env(safe-area-inset-right));
    }
    .site-foot{padding-bottom:max(0px,env(safe-area-inset-bottom))}
  }
}

/* == Service pages (built by tools/build-service-pages.py) == */
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper);padding:.75rem 1rem;z-index:10}
.skip:focus{left:1rem;top:1rem}
a:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.site-head__login{font-family:ui-monospace,Menlo,monospace;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;border:1px solid currentColor;padding:.45rem .7rem}
.tags{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;padding:0;margin:2.5rem 0 0;font-family:ui-monospace,Menlo,monospace;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.tags li::before{content:"— ";color:var(--line)}
.cta{margin-top:3rem;font-size:1.1rem}
.cta a{font-weight:600;text-underline-offset:.2em}
.site-foot__legal{margin-top:1rem;color:var(--muted)}
.site-foot__rights{color:var(--muted);margin:1.25rem 0 0}
/* signed in: the account circle in the service pages' header */
.site-head .acct{position:relative}
.site-head .acct__btn{width:2rem;height:2rem;border-radius:50%;background:#231F20;color:#F4F4F1;display:inline-flex;align-items:center;justify-content:center;font:500 .68rem ui-monospace,Menlo,monospace;cursor:pointer;border:0}
.site-head .acct__menu{position:absolute;right:0;top:calc(100% + .5rem);min-width:13rem;background:#fff;color:#231F20;border:1px solid rgba(35,31,32,.3);padding:.6rem 0;z-index:80}
.site-head .acct__menu a{display:block;padding:.45rem 1rem;border:0;text-transform:none;letter-spacing:0;font:inherit}
.site-head .acct__name{padding:0 1rem;font-weight:600}
.site-head .acct__sub{padding:0 1rem .5rem;font:.65rem ui-monospace,Menlo,monospace;letter-spacing:.1em;text-transform:uppercase;opacity:.7}