/* The site since 2026-10-21 (Noel): the one-screen home page and the few pages left beside it, in
   Risegate for iPhone's look (iphone/Risegate/Theme.swift): white page, Apple's own font, Sora only
   for the big headline, the ink pill as the main button and a grey pill as the second.
   account.html and academy/how-to-film-a-run.html still load the old styles.css first for their own
   insides (the sign-in cards, the filming drawings); body.old-insides below moves those onto these
   colours and fonts. The top bar and footer are .site-top and .site-foot so they never meet the old
   .bar and .foot. */
:root {
  --ink: #0B0C0E; --soft: #454A52; --muted: #676C74;
  --card: #F2F2F7; --card-hi: #E5E5EA; --good: #13855B; --bad: #C2410C;
  --sys: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: #FFFFFF; color: var(--ink); font: 17px/1.5 var(--sys);
  -webkit-font-smoothing: antialiased; display: flex; flex-direction: column; min-height: 100dvh;
}
body > main { flex: 1; }
a { color: inherit; }

/* top bar and footer, the same on every page */
.site-top { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; }
/* the logo's link as tall as the Sign in pill (15px text, 1.5 line height, 8px padding): the sign-in page has
   no pill, and without it the bar was shorter and the logo sat 6px higher than on every other page (Noel, 2026-10-22) */
.site-top > a:first-child { display: flex; align-items: center; min-height: 38.5px; margin-left: 4px; }   /* +4px: the logo's ink as far from the left edge as from the top, 28px (Noel, 2026-11-06) */
.site-top__word { height: 26px; width: auto; fill: var(--ink); display: block; }
.site-top__signin { font-size: 15px; font-weight: 500; text-decoration: none; padding: 8px 16px; border-radius: 999px; background: var(--card); }
.site-top__signin:hover { background: var(--card-hi); }
.site-foot { display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: center; padding: 20px 16px calc(20px + env(safe-area-inset-bottom));
  font-size: 13px; color: var(--muted); }
.site-foot a { text-decoration: none; }
.site-foot a:hover { color: var(--ink); }

/* buttons */
.btn { font: 600 17px var(--sys); border: 0; border-radius: 999px; min-height: 52px; padding: 0 24px; cursor: pointer;
  text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; }
.btn--ink, .btn--primary { background: var(--ink); color: #FFFFFF; }
.btn--ink:hover, .btn--primary:hover { background: #2A2C30; }
.btn--ink:disabled { opacity: .5; cursor: default; }
.btn--soft { background: var(--card); color: var(--ink); font-weight: 500; }
.btn--soft:hover { background: var(--card-hi); }
.btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* the home page */
.home { display: grid; place-items: center; padding: 24px 16px 48px; }
.hero { width: 100%; max-width: 560px; text-align: center; }
.hero h1 { font: 600 clamp(36px, 7vw, 56px)/1.05 Sora, var(--sys); letter-spacing: -0.035em; margin: 0 0 16px; }
.hero__lead { color: var(--soft); font-size: 19px; margin: 0 auto 32px; max-width: 30em; }
.join { display: flex; gap: 6px; padding: 8px; background: var(--card); border-radius: 999px; max-width: 520px; margin: 0 auto; }
.join:focus-within { box-shadow: 0 0 0 2px var(--ink); }
.join input { flex: 1; min-width: 0; border: 0; background: transparent; font: 18px var(--sys); color: var(--ink); padding: 0 20px; outline: none;
  border-radius: 999px; }   /* the pill's shape, so a browser's own autofill colour never shows past its rounded ends */
.join input::placeholder { color: var(--muted); }
/* a browser-filled email keeps the pill's grey, not Chrome's light-blue square (Noel, 2026-10-22) */
.join input:-webkit-autofill,
.join input:-webkit-autofill:hover,
.join input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--card) inset;
  -webkit-text-fill-color: var(--ink);
  caret-color: var(--ink);
  transition: background-color 9999s ease-out 0s;   /* Chrome's own autofill background never shows */
}
.join input:autofill { box-shadow: 0 0 0 1000px var(--card) inset; }   /* Firefox */
.join .btn { min-height: 54px; }
.msg { min-height: 24px; margin: 12px 0 0; font-size: 15px; color: var(--muted); }
.msg--bad { color: var(--bad); }
.msg--good { color: var(--good); font-weight: 500; }   /* after joining: one green line, the form stays put (Noel, 2026-10-22) */
.or { color: var(--muted); font-size: 15px; margin: 28px 0 12px; }
.demo { min-width: 220px; }

/* a page of text: privacy, terms, refunds, beta, join */
.page-head { padding: 40px 16px 8px; }
.wrap { max-width: 680px; margin: 0 auto; }
.page-head h1 { font: 600 clamp(32px, 6vw, 44px)/1.1 Sora, var(--sys); letter-spacing: -0.03em; margin: 0 0 12px; }
.page-head__lead { color: var(--soft); font-size: 19px; margin: 0 0 24px; }
.page-head--download { text-align: center; padding-top: 64px; }
.page-head--download .btn { min-width: 260px; }
.download__meta, .download__note { color: var(--muted); font-size: 15px; margin: 12px 0 0; }
.download__needs { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.download__needs li { background: var(--card); border-radius: 999px; padding: 6px 14px; font-size: 15px; }
.article { max-width: 680px; margin: 0 auto; padding: 8px 16px 64px; }
.article h2 { font-size: 22px; line-height: 1.25; letter-spacing: -0.01em; margin: 36px 0 10px; }
.article p, .article li { color: var(--soft); }
.article p { margin: 0 0 14px; }
.article ul, .article ol { margin: 0 0 14px; padding-left: 22px; }
.article li { margin: 0 0 8px; }
.article strong { color: var(--ink); }
.article a { text-decoration: underline; text-underline-offset: 2px; }

/* the old insides of account.html and the filming lesson, on these colours and fonts */
body.old-insides {
  --panel: var(--card); --panel-hi: var(--card-hi); --border: var(--card-hi);
  --text: var(--ink); --accent: var(--ink); --accent-hi: var(--ink);
  --sans: var(--sys); font-family: var(--sys);
}
body.old-insides .btn { font-family: var(--sys); }
body.old-insides h1 { font-family: Sora, var(--sys); font-weight: 600; letter-spacing: -0.03em; }
body.old-insides h2, body.old-insides h3 { font-family: var(--sys); font-weight: 700; letter-spacing: -0.01em; }
body.old-insides .page-head { background: none; }

@media (max-width: 480px) {
  .site-top { padding: 16px; }
  .site-top > a:first-child { margin-left: 8px; }   /* phone: 24px from the left and the top */
  /* on a phone, two pills of their own: the grey email field, the black button under it (Noel, 2026-10-22) */
  .join { flex-direction: column; gap: 10px; padding: 0; background: none; border-radius: 0; }
  .join:focus-within { box-shadow: none; }
  .join input { min-height: 54px; background: var(--card); padding: 0 20px; }
  .join input:focus { box-shadow: 0 0 0 2px var(--ink); }
  .join input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px var(--card) inset, 0 0 0 2px var(--ink); }
  .join .btn { width: 100%; }
  .hero__lead, .page-head__lead { font-size: 17px; }
  /* the home page on a phone, calmer (Noel, 2026-10-22): more side room, a smaller headline, more
     space between blocks, one big button with the demo as a plain link, a short light footer */
  .home { padding: 32px 24px 40px; }
  .hero h1 { font-size: 37px; margin-bottom: 20px; }
  .hero__lead { margin-bottom: 40px; }
  .or { display: none; }
  .demo { width: auto; min-width: 0; min-height: 0; margin-top: 24px; padding: 4px 8px; background: none; color: var(--muted);
    font-size: 16px; font-weight: 400; }
  .demo:hover, .demo:active { background: none; text-decoration: underline; text-underline-offset: 3px; }
  .site-top__signin, .site-top__signin:hover { background: none; padding-left: 0; padding-right: 0; }   /* same height, so the logo stays put */
  .site-foot { gap: 6px 16px; font-size: 12px; color: #8E9297; }
  .site-foot__wide { display: none; }
  .site-foot__copy { order: 1; flex-basis: 100%; text-align: center; }
  .page-head--download .btn { width: 100%; }
}

/* the back arrow on every page but home (Noel, 2026-10-22): a plain ink arrow right above the title,
   its tip lined up with the title's left edge; the 44 px tap area around it is invisible */
.site-back { display: flex; width: 44px; height: 44px; align-items: center; justify-content: center;
  margin: 0 0 2px -13px; color: var(--ink); }   /* 2026-11-06: smaller (22 px), tip exactly on the title's left edge, closer to the title */
.site-back:hover { color: var(--soft); }
.site-back svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.acct__back { width: min(100%, 460px); padding: 0 clamp(28px, 4vw, 44px); }
/* the thanks wraps onto two lines on the narrowest phones: keep room for both so the form never moves */
@media (max-width: 340px) { .msg { min-height: 45px; } }

/* Signed-in account page in the web app's Settings look (webapp/app.css .set-*), with no boxes: each
   section is just its title and its rows, divided by thin lines (Noel, 2026-11-06). */
.acct__home .acct__who h1 { font: 700 30px/1.15 var(--sys); letter-spacing: 0; }
.acct__home .acct__box, .acct__home .acct__box--danger { padding: 0; border: 0; border-radius: 0; background: none; }
.acct__home .acct__box h2 { margin: 26px 0 4px; font: 600 15px/1.3 var(--sys); color: var(--soft); }
.acct__home .acct__row { min-height: 60px; }
.acct__home .acct__row b { font-weight: 500; font-size: 16px; }
.acct__home .acct__row .btn { height: 34px; min-height: 0; padding: 0 14px; font: 500 14px var(--sys); background: #fff; color: var(--ink); border: 1px solid var(--card-hi); border-radius: 10px; }
.acct__home .acct__row .btn:hover { background: var(--card); }
.acct__home .acct__row .acct__destroy { color: #FF3B30; }   /* the web app's red chip */
/* the back arrow lines up with the page's left edge (it sat in a narrower column than the signed-in page) */
.acct:has(> .acct__home:not([hidden])) > .acct__back { width: min(100%, 620px); padding: 0; }
.acct__home { padding-bottom: 72px; }   /* room between Delete account and the footer (Noel, 2026-11-06) */

/* Sign in, create account, codes and the other signed-out screens in the web app's sign-in look
   (webapp/app.css .signin): no grey box, one 400px column, the title and its line centred, grey fields
   and the ink button with 10px corners (Noel, 2026-11-06). */
.acct__card { width: min(100%, 400px); padding: 0; border-radius: 0; background: none; }
.acct .acct__card h1 { font: 700 30px/1.15 var(--sys); letter-spacing: -.3px; text-align: center; }
.acct__card .acct__lead { margin-top: 8px; color: var(--muted); text-align: center; text-wrap: balance; }
.acct__card .field input { height: 46px; border: 0; border-radius: 10px; background: var(--card); font: 400 17px var(--sys); }
.acct__card .field input:focus { border: 0; box-shadow: 0 0 0 2px rgba(11,12,14,.15); }
.acct__card .acct__submit { height: 46px; min-height: 46px; border-radius: 10px; font: 600 17px var(--sys); }
.acct__card .acct__or::before, .acct__card .acct__or::after { background: var(--card-hi); }
.acct:has(> .acct__card:not([hidden])) > .acct__back { width: min(100%, 400px); padding: 0; }
.acct { padding-top: 16px; }   /* signed in and signed out: the page starts right under the top bar (Noel, 2026-11-06) */

/* The web app's depth on every web-app screen here (sign in, account, the dialog), copied by role from webapp/app.css
   (web v0.1.218 depth by role, v0.1.247 black keys; Noel, 2026-11-06). Scoped to .acct: the marketing pages stay flat.
   Black buttons: the black key (a black that lightens a touch toward the top, a light top edge inside, a small shadow
   under). Grey and white buttons: the grey key (--key). Fields and the switch's track: slightly sunken (--well), the
   switch's knob a white raised pill (--pill-up). The dialog floats (--lift-3). */
.acct {
  --key: inset 0 1px 0 rgba(255, 255, 255, .85), 0 1px 2px rgba(0, 0, 0, .07);
  --key-dark: inset 0 1px 0 rgba(255, 255, 255, .16), 0 1px 2px rgba(0, 0, 0, .22), 0 2px 6px rgba(0, 0, 0, .10);
  --well: inset 0 1px 2px rgba(0, 0, 0, .07);
  --pill-up: 0 1px 2px rgba(0, 0, 0, .10), 0 0 0 1px rgba(0, 0, 0, .04);
  --lift-3: 0 2px 6px rgba(0, 0, 0, .06), 0 16px 40px rgba(0, 0, 0, .10);
}
/* main buttons in the web app's orange key (Noel, 2026-11-06: "yes, orange"; webapp/app.css .ink + --key-brand) */
.acct { --brand: #FF6A00; --key-brand: inset 0 1px 0 rgba(255, 255, 255, .28), 0 1px 2px rgba(0, 0, 0, .12); }
.acct .btn--primary { background: var(--brand); color: #FFFFFF; border: 1px solid transparent; box-shadow: var(--key-brand); }
.acct .btn--primary:hover { background: #E05D00; }
.acct .btn--ghost, .acct .btn--soft, .acct__home .acct__row .btn { box-shadow: var(--key); }
.acct .btn:disabled { box-shadow: none; }
.acct .field input, .acct__dialog input:not([type=checkbox]):not([type=radio]) { box-shadow: var(--well); }
.acct .field input:focus, .acct__dialog input:not([type=checkbox]):not([type=radio]):focus { box-shadow: var(--well), 0 0 0 2px rgba(11,12,14,.15); }
.acct .switch { box-shadow: var(--well); }
.acct .switch::after { box-shadow: var(--pill-up); }
.acct .switch[aria-checked="true"] { background: var(--brand); box-shadow: var(--key-brand); }
.acct .acct__dialog { box-shadow: var(--lift-3); }

/* The dialog, its QR code and the toast in the web app's window style (webapp/app.css .sheet, .toast; Noel, 2026-11-06:
   "everything has to be in the new style"): 16px corners, the title 20px and the line under it centred, grey fields with
   10px corners as at sign in, the main button full width on top with Cancel as plain grey text under it, a lighter dim
   behind; on a phone it rises from the bottom with only its top corners rounded. */
.acct .acct__dialog { width: min(calc(100vw - 32px), 560px); padding: 16px 16px 24px; border-radius: 16px; background: #fff; }
.acct .acct__dialog::backdrop { background: rgba(0, 0, 0, .25); }
.acct .acct__dialog h2 { margin: 8px 0 4px; font: 500 20px/1.3 var(--sys); letter-spacing: 0; text-align: center; color: var(--ink); }
.acct .acct__dialog [data-sheet-lead] { margin: 0; font-size: 15px; line-height: 1.4; color: var(--muted); text-align: center; text-wrap: balance; }
.acct .acct__dialog [data-sheet-body] { margin-top: 18px; }
.acct .acct__dialog .field input { height: 46px; border: 0; border-radius: 10px; background: var(--card); font: 400 17px var(--sys); }
.acct .acct__dialog .acct__error { margin-top: 14px; color: #FF3B30; }
.acct .acct__dialog .acct__actions { flex-direction: column; flex-wrap: nowrap; gap: 6px; margin-top: 14px; }
.acct .acct__dialog [data-sheet-ok] { order: -1; width: 100%; height: 46px; min-height: 46px; border-radius: 10px; font: 500 17px var(--sys); }
.acct .acct__dialog [data-sheet-ok].acct__destroy { background: #e5372b; border-color: transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 1px 2px rgba(0, 0, 0, .12); }   /* the web app's red key */
.acct .acct__dialog [data-sheet-ok].acct__destroy:hover { background: #cc2e23; }
.acct .acct__dialog [data-sheet-cancel] { align-self: center; height: auto; padding: 10px; border: 0; border-radius: 10px; background: none;
  box-shadow: none; font: 400 15px var(--sys); color: var(--muted); }
.acct .acct__dialog [data-sheet-cancel]:hover { color: var(--ink); background: none; }
.acct .acct__qr img { width: 180px; height: 180px; padding: 10px; border-radius: 10px; border: 1px solid #e5e5ea; }
@media (max-width: 767px) {
  .acct .acct__dialog { width: 100%; max-width: none; margin: auto 0 0; border-radius: 16px 16px 0 0; padding-bottom: calc(env(safe-area-inset-bottom) + 20px); }
}
.acct__toast { border-radius: 10px; padding: 12px 18px; background: rgba(30, 30, 32, .94); font: 400 15px var(--sys);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .06), 0 16px 40px rgba(0, 0, 0, .10); }   /* only the account page makes a toast */

/* live password help under every new password (Noel, 2026-11-06): a strength bar with its word, the three
   parts of the rule ticking green as they're met, and under the retype whether the two match */
.pwcheck { display: grid; gap: 8px; margin-top: -6px; text-align: left; }
.pwcheck__head { display: flex; align-items: center; gap: 10px; }
.pwcheck__bar { flex: 1; height: 4px; border-radius: 2px; background: var(--card-hi); overflow: hidden; }
.pwcheck__bar i { display: block; height: 100%; width: 0; border-radius: 2px; background: var(--muted); transition: width .2s, background-color .2s; }
.pwcheck[data-level="1"] .pwcheck__bar i { width: 33%; background: #D92D20; }
.pwcheck[data-level="2"] .pwcheck__bar i { width: 66%; background: var(--good); }   /* green like the web app and iPhone checkers */
.pwcheck[data-level="3"] .pwcheck__bar i { width: 100%; background: var(--good); }
.pwcheck__word { min-width: 48px; font-size: 13px; font-weight: 600; text-align: right; color: var(--muted); }
.pwcheck[data-level="1"] .pwcheck__word { color: #D92D20; }
.pwcheck[data-level="2"] .pwcheck__word { color: var(--good); }
.pwcheck[data-level="3"] .pwcheck__word { color: var(--good); }
.pwcheck__list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: 13px; color: var(--muted); }
.pwcheck__list li { display: flex; align-items: center; gap: 8px; }
.pwcheck__list li::before { content: ""; flex: none; width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--card-hi); }
.pwcheck__list li.is-ok { color: var(--good); }
.pwcheck__list li.is-ok::before { box-shadow: none; background: var(--good) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M4 7.2l2 2 4-4.4' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
.pwcheck__match { margin: -6px 0 0; font-size: 13px; color: var(--muted); text-align: left; }
.pwcheck__match.is-ok { color: var(--good); }
.pwcheck__match[hidden] { display: none; }

/* ---- bug fixes after the 2026-11-06 review ---- */
/* keyboard focus on account fields clearly visible (was a 15% ring, ~1.4:1 against the page) */
.acct .field input:focus-visible, .acct__card .field input:focus-visible,
.acct__dialog input:not([type=checkbox]):not([type=radio]):focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* the "match" line inside dialogs kept the dialog's paragraph spacing and colour */
.acct__dialog p.pwcheck__match { margin: -6px 0 0; color: var(--muted); }
.acct__dialog p.pwcheck__match.is-ok { color: var(--good); }
/* "Sign in" as far from the right edge as the logo is from the left (Noel, 2026-11-06): the logo got +4px
   (desktop) / +8px (phone) so its gap matches its top gap; the right side gets the same */
.site-top__signin { margin-right: 4px; }
@media (max-width: 480px) { .site-top__signin { margin-right: 8px; } }

/* waitlist page in the web app's style (Noel, 2026-11-06: "make the waitlist in the webapp style, do in that style
   everything"; webapp/app.css v0.1.288): white page, Apple's font for the title, the web app's buttons and field with
   their depth. Join = the web app's orange key (.ink + --key-brand); Sign in and Request a demo = its grey keys
   (.soft + --key); the email = its sunken grey field (--well); 10 px corners on all of them. */
body.landing {
  --brand: #FF6A00; --brand-hi: #E05D00;
  --key: inset 0 1px 0 rgba(255, 255, 255, .85), 0 1px 2px rgba(0, 0, 0, .07);
  --key-brand: inset 0 1px 0 rgba(255, 255, 255, .28), 0 1px 2px rgba(0, 0, 0, .12);
  --well: inset 0 1px 2px rgba(0, 0, 0, .07);
  --soft-bg: #f4f4f5; --soft-hi: #e7e7ec; --line: #e4e4e7;
}
body.landing .hero { max-width: 600px; }
body.landing .hero h1 { font: 700 clamp(34px, 5.6vw, 52px)/1.1 var(--sys); letter-spacing: -.03em; }
body.landing .hero__lead { color: var(--muted); }
body.landing .or { color: var(--muted); }
/* What is Risegate? under the waitlist (Noel, 2026-11-07): plain, muted, as wide as the hero */
body.landing .about { width: 100%; max-width: 600px; margin: 72px auto 0; padding-top: 32px; border-top: 1px solid var(--line); text-align: left; }
body.landing .about h2 { font: 650 22px/1.25 var(--sys); letter-spacing: -.01em; margin: 0 0 12px; }
body.landing .about p { color: var(--soft); font-size: 16px; line-height: 1.55; margin: 0 0 10px; }
/* the form: the email field and Join side by side (stacked on a phone), each the web app's own */
body.landing .join { gap: 10px; padding: 0; background: none; border-radius: 0; max-width: 600px; }
body.landing .join:focus-within { box-shadow: none; }
body.landing .join input { min-height: 46px; padding: 0 16px; border-radius: 10px; font-size: 17px;
  background: var(--soft-bg); box-shadow: inset 0 0 0 1px var(--line), var(--well); }
body.landing .join input:focus { box-shadow: inset 0 0 0 1px var(--line), var(--well), 0 0 0 2px rgba(11, 12, 14, .15); }
body.landing .join input:-webkit-autofill, body.landing .join input:-webkit-autofill:hover, body.landing .join input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--soft-bg) inset, inset 0 0 0 1px var(--line); }
body.landing .join input:autofill { box-shadow: 0 0 0 1000px var(--soft-bg) inset, inset 0 0 0 1px var(--line); }
body.landing .join .btn { min-height: 46px; padding: 0 22px; border-radius: 10px; border: 1px solid transparent;
  background: var(--brand); color: #FFFFFF; font: 500 17px var(--sys); box-shadow: var(--key-brand); }
body.landing .join .btn:hover { background: var(--brand-hi); }
body.landing .join .btn:active { opacity: .85; }
/* Sign in and Request a demo: the web app's grey keys */
body.landing .site-top__signin, body.landing .demo { border: 1px solid var(--line); border-radius: 10px; background: var(--soft-bg);
  color: var(--ink); font: 400 14px var(--sys); box-shadow: var(--key); text-decoration: none; }
body.landing .site-top__signin { padding: 8px 14px; }
body.landing .demo { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; min-width: 0; padding: 0 16px; font-size: 15px; }
body.landing .site-top__signin:hover, body.landing .demo:hover { background: var(--soft-hi); text-decoration: none; }
body.landing .join .btn:focus-visible, body.landing .demo:focus-visible, body.landing .site-top a:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
body.landing .msg.msg--bad, body.landing .msg.msg--good { font-weight: 600; }
body.landing .msg.msg--good::before { content: "\2713\00a0"; }
@media (max-width: 480px) {
  body.landing .join { margin: 0 -8px; }
  body.landing .join input { background: var(--soft-bg); }
  body.landing .join input:focus { box-shadow: inset 0 0 0 1px var(--line), var(--well), 0 0 0 2px rgba(11, 12, 14, .15); }
  body.landing .join .btn { width: 100%; }
  /* the phone's Sign in keeps its key look (the base rule took the pill away on a phone) */
  body.landing .site-top__signin, body.landing .site-top__signin:hover { padding: 6px 12px; background: var(--soft-bg); }
  body.landing .demo, body.landing .demo:hover { margin-top: 24px; padding: 0 16px; background: var(--soft-bg); }
  body.landing .hero h1 { font-size: 34px; margin-bottom: 12px; }
  body.landing .hero__lead { font-size: 16px; line-height: 1.45; max-width: 290px; margin: 0 auto 32px; text-wrap: balance; }
}