/* ===================================================================
   STILLS — content pages (about · faq · updates · support · legal)
   Same tokens, same voice as home.css: paper ground, ink type, one
   orange, dark footer. Long-form prose in a single readable column.
   Pairs with fonts.css.

   GLYPH WARNING (see fonts.css): · © § … • ° ½ render blank in Heming.
   =================================================================== */

:root{
  --paper:#f2efe7;
  --ink:#1d1d1b;
  --orange:#ef5b27;
  --line:rgba(29,29,27,.18);
  --line-soft:rgba(29,29,27,.1);
  --dim:rgba(29,29,27,.66);
  --dimmer:rgba(29,29,27,.5);
  --pad:clamp(20px,4.2vw,72px);
  --col:760px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--heming);font-weight:430;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:inherit}
/* height:auto or the width/height attributes win over aspect-ratio */
img{display:block;max-width:100%;height:auto}
button,input{font:inherit}
.skip{position:fixed;z-index:100;left:20px;top:-60px;background:var(--ink);color:#fff;padding:12px 18px;text-decoration:none}
.skip:focus{top:20px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

/* A visible focus ring everywhere, drawn in the one accent so it reads as
   part of the design rather than as the browser's default apology. */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,summary:focus-visible{
  outline:2px solid var(--orange);outline-offset:3px;border-radius:3px;
}

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

.topbar{
  position:sticky;z-index:30;top:0;
  display:flex;align-items:center;justify-content:space-between;
  padding:22px var(--pad);
  background:rgba(242,239,231,.86);
  -webkit-backdrop-filter:saturate(1.5) blur(14px);
  backdrop-filter:saturate(1.5) blur(14px);
  border-bottom:1px solid var(--line-soft);
}
.wordmark{display:flex;align-items:center;gap:11px;text-decoration:none}
/* full-bleed PNGs: square slot + contain, never cover. */
.wordmark .icon{width:29px;height:29px;object-fit:contain;border-radius:7px;flex:none}
.wordmark .mark{width:100px;height:auto;display:block}
.top-nav{display:flex;align-items:center;gap:26px}
.top-nav a:not(.top-join){
  font-size:11px;font-weight:650;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(29,29,27,.55);text-decoration:none;transition:color .25s var(--ease);
}
.top-nav a:not(.top-join):hover,.top-nav a[aria-current]{color:var(--ink)}
.top-nav a[aria-current]{color:var(--orange)}
/* The one nav item that is a button: filled, because it is the whole point
   of the site right now and a hairline underline is not enough to say so. */
.top-join{
  display:flex;gap:9px;align-items:center;
  background:var(--ink);color:var(--paper);border-radius:100px;padding:10px 17px;
  font-size:11.5px;font-weight:650;letter-spacing:.09em;text-transform:uppercase;
  text-decoration:none;
  transition:background .3s var(--ease),transform .3s var(--ease);
}
.top-join svg{width:11px;height:11px;transition:transform .3s var(--ease)}
.top-join:hover{background:var(--orange);transform:translateY(-1px)}
.top-join:hover svg{transform:translate(3px,-3px)}

/* --- page head ---------------------------------------------------- */

.pagehead{
  position:relative;padding:clamp(74px,11vw,150px) var(--pad) clamp(48px,6vw,86px);
  border-bottom:1px solid var(--line);overflow:hidden;isolation:isolate;
}
.pagehead:before{
  content:"";position:absolute;z-index:-1;inset:auto auto 0 50%;
  width:min(90vw,900px);aspect-ratio:1;transform:translate(-50%,42%);border-radius:50%;
  background:radial-gradient(circle,rgba(239,91,39,.13),rgba(239,91,39,0) 62%);filter:blur(40px);
}
.section-no,.eyebrow{
  font-size:11px;line-height:1;letter-spacing:.21em;text-transform:uppercase;
  font-weight:700;color:var(--orange);margin:0 0 26px;
}
.eyebrow:has(.live),.section-no:has(.live){display:inline-flex;align-items:center}
/* A steady dot with a halo, not a blinking one. The page already says the
   beta is live in words; this is punctuation, not an alarm. */
.eyebrow .live{
  width:7px;height:7px;border-radius:50%;background:var(--orange);
  box-shadow:0 0 0 4px rgba(239,91,39,.17);margin-right:14px;flex:none;
  display:inline-block;vertical-align:middle;
}
.pagehead h1{
  font-size:clamp(46px,8vw,110px);line-height:.82;letter-spacing:-.048em;
  font-weight:700;margin:0;max-width:13ch;
}
.pagehead h1 em{font-style:normal;color:var(--orange);font-weight:360}
.pagehead .sub{
  font-size:clamp(17px,1.7vw,23px);line-height:1.45;color:var(--dim);
  max-width:56ch;margin:30px 0 0;
}
.pagehead .stamp{
  margin:34px 0 0;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dimmer);
}

/* --- prose -------------------------------------------------------- */

.shell{padding:clamp(56px,7vw,96px) var(--pad) clamp(80px,10vw,140px)}
.prose{max-width:var(--col);margin:0 auto}
.prose>*:first-child{margin-top:0}

.prose h2{
  font-size:clamp(28px,3.4vw,42px);line-height:1.02;letter-spacing:-.04em;font-weight:650;
  margin:clamp(56px,6vw,86px) 0 18px;padding-top:clamp(24px,3vw,36px);
  border-top:1px solid var(--line);
}
.prose h2:first-child{border-top:0;padding-top:0;margin-top:0}
.prose h3{
  font-size:clamp(18px,1.8vw,22px);line-height:1.25;letter-spacing:-.02em;font-weight:650;
  margin:34px 0 10px;
}
.prose p{font-size:17px;line-height:1.65;margin:0 0 18px;color:var(--dim)}
.prose p:last-child{margin-bottom:0}
.prose .lead{font-size:clamp(19px,2vw,24px);line-height:1.5;color:var(--ink);margin-bottom:28px}
.prose b,.prose strong{font-weight:650;color:var(--ink)}
.prose a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--orange);text-underline-offset:3px;transition:color .2s var(--ease)}
.prose a:hover{color:var(--orange)}
.prose ul,.prose ol{margin:0 0 18px;padding-left:0;list-style:none;display:grid;gap:11px}
.prose li{position:relative;padding-left:26px;font-size:17px;line-height:1.6;color:var(--dim)}
.prose ul li:before{
  content:"";position:absolute;left:2px;top:.62em;width:6px;height:6px;
  border-radius:50%;background:var(--orange);
}
.prose ol{counter-reset:n}
.prose ol li{counter-increment:n}
.prose ol li:before{
  content:counter(n);position:absolute;left:0;top:.05em;
  font-size:11px;font-weight:700;color:var(--orange);letter-spacing:.06em;
}
.prose code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em;
  background:rgba(29,29,27,.06);padding:2px 6px;border-radius:5px;
}
.prose hr{border:0;border-top:1px solid var(--line);margin:44px 0}

/* a quiet aside — used for the "plain English, not legal advice" note */
.note{
  background:rgba(239,91,39,.07);border:1px solid rgba(239,91,39,.24);
  border-radius:16px;padding:20px 22px;margin:0 0 40px;
}
.note p{font-size:14.5px;line-height:1.6;margin:0;color:rgba(29,29,27,.72)}

/* a definition row — used on support for "what breaks / what to send" */
.rows{display:grid;gap:0;margin:0 0 18px;border-top:1px solid var(--line-soft)}
.rows div{
  display:grid;grid-template-columns:minmax(140px,.5fr) 1fr;gap:12px 30px;
  padding:16px 0;border-bottom:1px solid var(--line-soft);
}
.rows dt,.rows b{font-weight:650;font-size:15px;letter-spacing:-.01em}
.rows dd,.rows span{margin:0;font-size:16px;line-height:1.55;color:var(--dim)}

/* a big contact card */
.contact{
  background:var(--ink);color:var(--paper);border-radius:22px;
  padding:clamp(28px,4vw,44px);margin:0 0 12px;
}
.contact p{color:rgba(242,239,231,.7);font-size:16px;line-height:1.6;margin:0 0 22px}
.contact .mailto{
  display:inline-flex;align-items:center;gap:14px;background:var(--orange);color:#fff;
  border-radius:100px;padding:14px 26px;font-weight:650;text-decoration:none;
  transition:transform .3s var(--ease),background .3s var(--ease);
}
.contact .mailto svg{width:15px;height:15px;transition:transform .35s var(--ease)}
.contact .mailto:hover{transform:translateY(-2px)}
.contact .mailto:hover svg{transform:translateX(4px)}
.contact h2{border:0;padding:0;margin:0 0 14px;color:var(--paper)}

/* --- the shared primary action ------------------------------------- */
/* Same component as the homepage hero, so the button that installs the
   beta looks identical wherever a visitor meets it. */

.cta-main{
  display:inline-flex;align-items:center;gap:15px;
  background:var(--ink);color:var(--paper);border-radius:100px;
  padding:17px 30px;font-size:15px;font-weight:650;letter-spacing:-.005em;
  text-decoration:none;box-shadow:0 18px 46px rgba(42,32,25,.18);
  transition:background .34s var(--ease),transform .34s var(--ease),box-shadow .34s var(--ease);
}
.cta-main svg{width:14px;height:14px;flex:none;transition:transform .38s var(--ease)}
.cta-main:hover{
  background:var(--orange);transform:translateY(-2px);
  box-shadow:0 24px 56px rgba(239,91,39,.28);
}
.cta-main:hover svg{transform:translate(3px,-3px)}

/* The primary action is an app badge, not a text button: the real app icon,
   a kicker line, and the platform name — the shape a store badge has, so it
   reads as "install this" at a glance rather than as another link. Drawn
   here rather than fetched, and the icon carries its own dark tile, so the
   badge holds together on paper, on ink and on orange without a second art
   file. TestFlight is named in type; Apple's own glyph is theirs, not ours. */
.cta-main{padding:11px 26px 11px 12px;gap:15px}
.cta-icon{
  width:44px;height:44px;flex:none;border-radius:11px;object-fit:cover;
  box-shadow:0 0 0 1px rgba(255,252,242,.16);
}
.cta-lines{display:flex;flex-direction:column;align-items:flex-start;gap:3px;line-height:1}
.cta-kicker{
  font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;font-weight:650;opacity:.62;
}
.cta-lbl{font-size:19px;font-weight:700;letter-spacing:-.028em}
.cta-big{padding:13px 30px 13px 13px}
.cta-big .cta-icon{width:50px;height:50px;border-radius:12.5px}
.cta-big .cta-lbl{font-size:21px}

/* --- the join card -------------------------------------------------- */
/* Sits between the page head and the prose on /beta: the one thing most
   visitors came for, above everything they might read afterwards. */

.shell-tight{padding-bottom:0}
.joinbox{
  max-width:var(--col);margin:0 auto;
  display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(28px,4vw,52px);
  background:#fff;border:1px solid var(--ink);border-radius:24px;
  padding:clamp(28px,3.6vw,44px);
  box-shadow:0 26px 80px rgba(42,32,25,.11);
}
.joinbox-main .eyebrow{margin-bottom:18px}
.joinbox h2{
  border:0;padding:0;margin:0 0 12px;
  font-size:clamp(30px,3.6vw,44px);line-height:1;letter-spacing:-.045em;font-weight:650;
}
.joinbox-main>p{font-size:16px;line-height:1.55;color:var(--dim);margin:0 0 26px;max-width:34ch}
.joinbox-facts{margin:0;display:grid;align-content:center;gap:0}
.joinbox-facts>div{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:11px 0;border-bottom:1px solid var(--line-soft);
}
.joinbox-facts>div:last-child{border-bottom:0;padding-bottom:0}
.joinbox-facts dt{
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:700;color:var(--dimmer);white-space:nowrap;
}
.joinbox-facts dd{margin:0;font-size:14.5px;font-weight:650;letter-spacing:-.01em;text-align:right}
.joinbox-facts>div:last-child dd{color:var(--orange)}

@media(max-width:760px){
  .joinbox{grid-template-columns:1fr;gap:26px;padding:26px 22px;border-radius:20px}
  .joinbox .cta-main{width:100%;justify-content:center;padding:17px 22px}
  .joinbox-main>p{max-width:none}
}

/* --- the support form ---------------------------------------------- */

.ticket{margin:0 0 8px}
.tf{margin-bottom:20px}
.tf > label{
  display:block;font-size:12px;letter-spacing:.13em;text-transform:uppercase;
  font-weight:650;color:var(--ink);margin-bottom:8px;
}
.tf > label i{font-style:normal;color:var(--dimmer);font-weight:430;letter-spacing:.06em}
.tf input,.tf textarea,.tf select{
  width:100%;background:#fff;color:var(--ink);
  border:1px solid var(--line);border-radius:12px;
  padding:13px 15px;outline:none;font-family:inherit;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.tf textarea{resize:vertical;line-height:1.6;min-height:150px}
.tf select{
  appearance:none;cursor:pointer;
  /* the caret, drawn rather than fetched */
  background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),
                   linear-gradient(135deg,var(--ink) 50%,transparent 50%);
  background-position:calc(100% - 19px) 50%,calc(100% - 13px) 50%;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;
  padding-right:42px;
}
.tf input:focus,.tf textarea:focus,.tf select:focus{
  border-color:var(--orange);box-shadow:0 0 0 3px rgba(239,91,39,.16);
}
.tf-row{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.tf-hint{font-size:12.5px;color:var(--dimmer);margin:8px 0 0;line-height:1.6}

/* It is a <label> and a direct child of .tf, so the uppercase label rule
   above catches it — this is a sentence, not a field name. */
.tf > label.tf-drop{
  text-transform:none;letter-spacing:normal;font-weight:430;color:var(--dim);
}
.tf-drop{
  display:block;border:1px dashed var(--line);border-radius:12px;
  padding:22px 18px;text-align:center;cursor:pointer;background:rgba(255,255,255,.4);
  font-size:13.5px;line-height:1.6;color:var(--dim);
  transition:border-color .2s var(--ease),background .2s var(--ease);
}
.tf-drop:hover,.tf-drop.over{border-color:var(--orange);background:rgba(239,91,39,.05)}
.tf-drop input[type=file]{display:none}

.tf-files{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.tf-thumb{position:relative;margin:0;width:86px}
.tf-thumb img{
  width:86px;height:86px;object-fit:cover;border-radius:10px;
  border:1px solid var(--line-soft);
}
.tf-remove{
  position:absolute;top:-7px;right:-7px;width:24px;height:24px;
  border:0;border-radius:50%;background:var(--ink);color:var(--paper);
  font-size:15px;line-height:1;cursor:pointer;
  display:grid;place-items:center;
}
.tf-remove:hover{background:var(--orange)}

.tf-error{
  min-height:20px;margin:0 0 12px;font-size:14px;color:#b83220;
}
.tf-error:not(:empty)::before{content:"\2014\00a0"}

.ticket .btn.wide{width:100%;justify-content:center;background:var(--ink);color:#fff}
.ticket .btn.wide:hover{background:var(--orange)}
.ticket.sending .btn svg{animation:advance 1.1s var(--ease) infinite}
.ticket.sending .btn{opacity:.75}

.ticket-done{
  border:1px solid var(--line);border-radius:18px;
  padding:clamp(24px,3.4vw,38px);background:#fff;
  box-shadow:0 22px 70px rgba(42,32,25,.1);
}
.ticket-done h3{
  font-size:clamp(21px,2.4vw,28px);line-height:1.2;letter-spacing:-.03em;
  font-weight:650;margin:0 0 14px;
}
.ticket-done h3 b{
  font-weight:650;color:var(--orange);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.92em;letter-spacing:.02em;
}
.ticket-done p{font-size:16px;line-height:1.6;color:var(--dim);margin:0 0 18px}
.ticket-done .eyebrow{margin-bottom:14px}
/* "Send another" has carried this class since the support form shipped and
   never had a rule, so it rendered as a second solid button with the same
   weight as the one that submits a ticket. It is the quieter of the two. */
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.btn.ghost:hover{background:var(--ink);color:#fff;box-shadow:none}

@media(max-width:620px){
  .tf-row{grid-template-columns:1fr;gap:0}
}

/* --- faq accordion ------------------------------------------------ */

.qa{border-top:1px solid var(--line)}
.qa details{border-bottom:1px solid var(--line-soft)}
.qa summary{
  list-style:none;cursor:pointer;padding:24px 44px 24px 0;position:relative;
  font-size:clamp(18px,2vw,23px);line-height:1.3;letter-spacing:-.025em;font-weight:650;
}
.qa summary::-webkit-details-marker{display:none}
.qa summary:before,.qa summary:after{
  content:"";position:absolute;right:6px;top:50%;background:var(--orange);
  transition:transform .35s var(--ease),opacity .35s var(--ease);
}
.qa summary:before{width:15px;height:1.5px;transform:translateY(-50%)}
.qa summary:after{width:1.5px;height:15px;right:12.75px;transform:translateY(-50%)}
.qa details[open] summary:after{transform:translateY(-50%) rotate(90deg);opacity:0}
.qa .answer{padding:0 0 26px;max-width:64ch}
.qa .answer p{font-size:16.5px;line-height:1.65;color:var(--dim);margin:0 0 14px}
.qa .answer p:last-child{margin:0}

/* --- updates: article cards --------------------------------------- */

.cards{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));
  gap:clamp(30px,3.4vw,52px);max-width:1180px;margin:0 auto;
}
/* The newest piece leads. With one article that fills the row instead of
   sitting in a lonely third of it; with twelve it is still the lead. */
.cards .card:first-child{
  grid-column:1/-1;display:grid;grid-template-columns:1.15fr 1fr;
  gap:clamp(24px,3vw,46px);align-items:center;
  padding-bottom:clamp(28px,3.4vw,44px);border-bottom:1px solid var(--line);
}
.cards .card:first-child .card-cover img,
.cards .card:first-child .card-blank{aspect-ratio:4/3}
.cards .card:first-child .card-body{padding-top:0}
.cards .card:first-child .card-title{
  font-size:clamp(28px,3.6vw,46px);line-height:1.04;letter-spacing:-.04em;margin-top:14px;
}
.cards .card:first-child .card-dek{font-size:17px;margin-top:13px;max-width:44ch}
.card{
  display:flex;flex-direction:column;text-decoration:none;color:inherit;
  transition:transform .45s var(--ease);
}
.card:hover{transform:translateY(-4px)}
.card-cover{
  display:block;overflow:hidden;border-radius:14px;
  background:rgba(29,29,27,.06);border:1px solid var(--line-soft);
}
.card-cover img,.card-blank{
  display:block;width:100%;aspect-ratio:16/10;height:auto;object-fit:cover;
  transition:transform .7s var(--ease);
}
.card-blank{
  background:
    radial-gradient(120% 140% at 30% 10%,rgba(239,91,39,.16),transparent 60%),
    rgba(29,29,27,.05);
}
.card:hover .card-cover img{transform:scale(1.035)}
.card-body{display:block;padding-top:18px}
.card-meta{
  display:flex;align-items:center;gap:12px;
  font-size:10px;letter-spacing:.17em;text-transform:uppercase;color:var(--dimmer);
}
.card-meta b{color:var(--orange);font-weight:700}
.card-title{
  display:block;margin-top:11px;font-size:clamp(21px,2.2vw,27px);
  line-height:1.14;letter-spacing:-.032em;font-weight:650;
}
.card:hover .card-title{color:var(--orange)}
.card-dek{
  display:block;margin-top:9px;font-size:15.5px;line-height:1.55;color:var(--dim);
}

/* nothing published yet */
.empty{
  max-width:52ch;margin:0 auto;text-align:center;
  padding:clamp(30px,6vw,70px) 0 clamp(20px,3vw,40px);
}
.empty-mark{margin:0 0 26px}
.empty-mark img{width:46px;height:46px;object-fit:contain;border-radius:11px;margin:0 auto;opacity:.9}
.empty h2{
  border:0;padding:0;margin:0 0 14px;
  font-size:clamp(28px,3.6vw,40px);line-height:1.05;letter-spacing:-.04em;font-weight:650;
}
.empty p{font-size:17px;line-height:1.6;color:var(--dim);margin:0}

/* --- an article --------------------------------------------------- */

.pagehead-article h1{max-width:19ch;font-size:clamp(38px,5.6vw,72px);line-height:.94;letter-spacing:-.045em}
.pagehead-article .sub{max-width:60ch;margin-top:22px}
.back{
  display:inline-flex;align-items:center;gap:9px;margin:0 0 30px;
  font-size:11px;font-weight:650;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dimmer);text-decoration:none;transition:color .25s var(--ease);
}
.back svg{width:13px;height:13px;transition:transform .3s var(--ease)}
.back:hover{color:var(--ink)}
.back:hover svg{transform:translateX(-3px)}

/* A draft being previewed. Loud on purpose — the whole risk of a preview
   link is someone reading it and thinking it went out. */
.preview-flag{
  display:inline-block;margin:0 0 20px;padding:8px 14px;
  background:var(--ink);color:var(--paper);border-radius:100px;
  font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:650;
}

.article-cover{
  margin:clamp(34px,4.5vw,60px) auto 0;padding:0 var(--pad);
  max-width:1180px;
}
.article-cover img{
  width:100%;aspect-ratio:16/9;height:auto;object-fit:cover;
  border-radius:16px;border:1px solid var(--line-soft);
}
.article-body>h2:first-child{border-top:0;padding-top:0;margin-top:0}
.article-body h2{font-size:clamp(26px,3vw,36px)}
.article-body h3{font-size:clamp(18px,1.9vw,23px);margin-top:38px}
.article-body h4{font-size:16px;font-weight:650;letter-spacing:.02em;margin:30px 0 8px;text-transform:uppercase;color:var(--dimmer)}
.article-body blockquote{
  margin:30px 0;padding:4px 0 4px 24px;border-left:2px solid var(--orange);
}
.article-body blockquote p{font-size:19px;line-height:1.5;color:var(--ink);margin:0}
.body-figure{margin:36px 0}
.body-figure img{width:100%;height:auto;border-radius:14px;border:1px solid var(--line-soft)}
.body-figure figcaption{
  padding-top:11px;font-size:12px;letter-spacing:.04em;color:var(--dimmer);
}

/* --- inline signup on subpages ------------------------------------ */

.strip-cta{
  background:var(--orange);color:var(--ink);padding:clamp(56px,8vw,110px) var(--pad);text-align:center;
}
.strip-cta h2{
  font-size:clamp(36px,5.5vw,74px);line-height:.86;letter-spacing:-.06em;
  font-weight:650;margin:22px auto 20px;max-width:14ch;
}
.strip-cta>p:not(.cta-under){font-size:17px;line-height:1.5;max-width:52ch;margin:0 auto 32px}
.strip-cta .section-no{color:rgba(29,29,27,.62)}
.strip-cta .section-no .live{background:var(--ink);box-shadow:0 0 0 4px rgba(29,29,27,.14)}
.strip-cta .signup{margin:0 auto}
/* Ink on orange, inverting to white on hover — the same pair the homepage
   closing uses, so the button reads identically wherever it turns up. */
.strip-cta .cta-main{background:var(--ink);color:var(--paper);box-shadow:0 20px 50px rgba(88,28,8,.22)}
.strip-cta .cta-main:hover{background:#fff;color:var(--ink);box-shadow:0 26px 62px rgba(88,28,8,.3)}
.cta-under{margin:18px 0 0;font-size:12.5px;letter-spacing:.04em;color:rgba(29,29,27,.72)}
.cta-under a{
  color:inherit;text-decoration:none;border-bottom:1px solid rgba(29,29,27,.45);
  transition:color .25s var(--ease),border-color .25s var(--ease);
}
.cta-under a:hover{color:#fff;border-color:#fff}

/* the fork between the two audiences: install it, or hear about launch */
.or{
  display:flex;align-items:center;gap:20px;
  width:min(100%,560px);margin:clamp(34px,4.5vw,50px) auto clamp(24px,3vw,32px);
}
.or:before,.or:after{content:"";flex:1;height:1px;background:rgba(29,29,27,.24)}
.or span{
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  font-weight:650;color:rgba(29,29,27,.6);
}

@media(max-width:760px){
  .strip-cta .cta-main{width:100%;justify-content:center}
}

/* form pieces shared with the homepage */
.signup{width:min(100%,560px);position:relative}
.field{
  display:flex;background:var(--paper);border:0;padding:5px;border-radius:100px;
  box-shadow:0 18px 60px rgba(42,32,25,.1);
  transition:box-shadow .4s var(--ease),transform .4s var(--ease);
}
.field input{min-width:0;flex:1;border:0;background:transparent;padding:15px 22px;color:var(--ink);outline:none}
.field input::placeholder{color:rgba(29,29,27,.42)}
.signup:focus-within .field{box-shadow:0 22px 70px rgba(42,32,25,.16),0 0 0 4px rgba(255,255,255,.5);transform:translateY(-2px)}
.btn{
  border:0;border-radius:100px;background:var(--ink);color:#fff;padding:15px 24px;
  display:flex;gap:14px;align-items:center;justify-content:center;font-weight:650;cursor:pointer;
  white-space:nowrap;transition:background .3s var(--ease),transform .3s var(--ease);
}
.btn svg{width:15px;height:15px;flex:none;transition:transform .35s var(--ease)}
.btn:hover{background:#fff;color:var(--ink);transform:translateY(-1px)}
.btn:hover svg{transform:translateX(4px)}
.btn:disabled{opacity:.6;cursor:default;transform:none}
.form-note{font-size:11px;letter-spacing:.05em;color:rgba(29,29,27,.62);margin:14px 0 0}
.err{display:none;font-size:13px;margin:14px 0 0;color:#5c1a10}
.signup.failed .err{display:block}
.signup.sending .btn svg{animation:advance 1.1s var(--ease) infinite}
@keyframes advance{
  0%{transform:translateX(0);opacity:1}
  55%{transform:translateX(15px);opacity:0}
  56%{transform:translateX(-13px);opacity:0}
  100%{transform:translateX(0);opacity:1}
}
.signup .field,.signup .form-note{transition:opacity .45s var(--ease),transform .45s var(--ease)}
.signup.done .field,.signup.done .form-note,.signup.done .err{
  opacity:0;transform:translateY(-10px);pointer-events:none;position:absolute;left:0;right:0;
}
.receipt{
  display:none;text-align:left;background:var(--paper);border:1px solid rgba(29,29,27,.25);
  border-radius:20px;padding:26px 28px;box-shadow:0 22px 70px rgba(42,32,25,.12);
}
.signup.done .receipt{display:block;animation:develop .9s var(--ease) both}
@keyframes develop{
  from{opacity:0;transform:translateY(16px) scale(.985);filter:blur(7px)}
  to{opacity:1;transform:none;filter:none}
}
.receipt-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding-bottom:14px;border-bottom:1px dashed var(--line)}
.receipt-head strong{font-size:19px;font-weight:650;letter-spacing:-.02em}
.receipt-head span{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--orange);font-weight:700}
.receipt ol{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:15px;counter-reset:none}
.receipt li{display:flex;gap:14px;align-items:flex-start;font-size:14px;line-height:1.45;padding:0;color:inherit}
.receipt li:before{display:none}
.receipt li i{
  flex:none;width:22px;height:22px;border-radius:50%;border:1px solid var(--line);
  display:grid;place-items:center;font-style:normal;font-size:10px;font-weight:700;
  color:rgba(29,29,27,.55);margin-top:1px;
}
.receipt li:first-child i{background:var(--orange);border-color:var(--orange);color:#fff}
.receipt li b{font-weight:650}
.receipt li p{margin:3px 0 0;color:rgba(29,29,27,.62);font-size:14px}
.receipt-foot{margin:18px 0 0;padding-top:14px;border-top:1px dashed var(--line);font-size:11px;letter-spacing:.05em;color:rgba(29,29,27,.5)}

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

footer{
  background:var(--ink);color:var(--paper);
  padding:clamp(52px,6vw,76px) var(--pad) clamp(30px,3.4vw,42px);
}
.foot-top{
  display:flex;align-items:center;justify-content:space-between;
  gap:32px 48px;flex-wrap:wrap;
  padding-bottom:clamp(26px,3vw,38px);
  border-bottom:1px solid rgba(242,239,231,.14);
}
.foot-brand{display:flex;align-items:center;gap:14px}
.foot-brand .icon{width:34px;height:34px;object-fit:contain;border-radius:8px;flex:none}
.footer-logo{width:118px;height:auto;display:block}
.footer-links{
  display:flex;align-items:center;gap:10px 26px;flex-wrap:wrap;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
}
.footer-links a{text-decoration:none;transition:color .25s var(--ease);white-space:nowrap}
.footer-links a:hover,.footer-links a[aria-current]{color:var(--orange)}
.foot-social{
  display:flex;flex-wrap:wrap;gap:10px 26px;
  padding:clamp(18px,2.2vw,26px) 0;
  border-bottom:1px solid rgba(242,239,231,.14);
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
}
.foot-social a{
  color:rgba(242,239,231,.58);text-decoration:none;white-space:nowrap;
  transition:color .25s var(--ease);
}
.foot-social a:hover{color:var(--orange)}
.foot-base{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px 40px;
  flex-wrap:wrap;padding-top:clamp(20px,2.4vw,28px);
}
.foot-base p{
  color:rgba(242,239,231,.4);font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;margin:0;line-height:1.8;max-width:74ch;
}
.foot-base .rights{
  color:rgba(242,239,231,.55);white-space:nowrap;font-size:10px;
  letter-spacing:.13em;text-transform:uppercase;
}

/* --- touch targets ------------------------------------------------- */
/* Header links are small type by design; the tappable area is not. The
   padding is negated by a margin so nothing moves visually. */
@media(hover:none),(pointer:coarse){
  .wordmark{padding-block:12px;margin-block:-12px}
  .back{padding-block:16px;margin-block:-16px}
  .footer-links a,.foot-social a{padding-block:7px;margin-block:-7px}
  .foot-base p,.foot-base .rights{font-size:11px}
}

/* --- reveals ------------------------------------------------------ */

.rise{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rise.in{opacity:1;transform:none}
.rise[data-delay="1"]{transition-delay:.09s}
.rise[data-delay="2"]{transition-delay:.18s}

/* --- narrow ------------------------------------------------------- */

@media(max-width:900px){
  .cards .card:first-child{grid-template-columns:1fr;gap:0}
  .cards .card:first-child .card-body{padding-top:18px}
}
@media(max-width:760px){
  .wordmark .mark{width:88px}
  .wordmark .icon{width:26px;height:26px}
  .top-nav{gap:14px}
  .top-nav a:not(.top-join){display:none}
  .top-join{font-size:10px;gap:8px;padding:11px 15px}
  .pagehead h1{font-size:clamp(40px,12vw,60px)}
  .prose p,.prose li{font-size:16px}
  .rows div{grid-template-columns:1fr;gap:4px}
  .field{flex-direction:column;border-radius:22px}
  .field input{min-height:54px;text-align:center}
  .btn{min-height:52px}
  .receipt{padding:22px}
  .foot-top{flex-direction:column;align-items:flex-start;gap:24px}
  .footer-links{gap:10px 20px}
  .foot-base{flex-direction:column;gap:14px}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rise{opacity:1;transform:none;transition:none}
  .signup.sending .btn svg{animation:none}
  .signup.done .receipt{animation:none}
}