/* The landing, sign-in and sign-up pages.
 *
 * Built on app.css: its tokens, type and components (cards, buttons, fields,
 * notices) are used as they are, so these pages follow the theme and match
 * the app. Only page layout lives here; the landing page's hero and its demo
 * are in landing.css.
 */
.site { min-height: 100vh; display: flex; flex-direction: column; }
.site a:not(.btn) { color: var(--accenttext); }
.site-top { display: flex; align-items: center; justify-content: space-between; gap: 16px;
            padding: 16px 40px; border-bottom: 1px solid var(--rule); }
.site-top .btn { text-decoration: none; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
         font-size: 19px; letter-spacing: -.01em; }
.site .brand { color: var(--text); }
.brand .mark { width: 32px; height: 32px; flex: none; }

.display { font-family: "Newsreader", Georgia, serif; font-weight: 500;
           font-size: clamp(36px, 5vw, 58px); line-height: 1.06; letter-spacing: -.02em; margin: 0; }
.lede { font-size: 18px; line-height: 1.6; color: var(--text3); margin: 0; max-width: 60ch; }
.promises { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.promises li { position: relative; padding-left: 26px; color: var(--text3); }
.promises li::before { content: ""; position: absolute; left: 3px; top: .42em; width: 11px; height: 6px;
                       border-left: 2px solid var(--ok); border-bottom: 2px solid var(--ok);
                       transform: rotate(-45deg); }

.form-card { padding: 26px 26px 22px; display: flex; flex-direction: column; gap: 16px; }
.auth-form { display: flex; flex-direction: column; gap: 14px; }
.auth-form input { min-height: 46px; font-size: 16px; }
.auth-form .btn:disabled { opacity: .6; cursor: progress; }
/* Signing in with Google: Google's mark on a plain button, and "or" between
   it and the form. Shown only when the server offers it (/capabilities). */
.site a.google-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px;
                     min-height: 48px; padding: 0 18px; border: 1px solid var(--rule2);
                     border-radius: 13px; background: var(--panel); color: var(--text);
                     font-weight: 600; font-size: 15.5px; text-decoration: none; }
.site a.google-btn:hover { border-color: var(--text); }
.google-btn svg { width: 18px; height: 18px; flex: none; }
.or-rule { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 13px; }
.or-rule::before, .or-rule::after { content: ""; flex: 1; height: 1px; background: var(--rulesoft); }
#signin, #signup, #forgot { display: flex; flex-direction: column; gap: 14px; }

.howtos { max-width: 1280px; width: 100%; margin: 0 auto; padding: 24px 40px 72px;
         display: flex; flex-direction: column; gap: 20px; }
.howto-list { list-style: none; margin: 0; padding: 0; display: grid;
             grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.howto { padding: 20px 22px; display: flex; flex-direction: column; gap: 8px; }
.howto p { margin: 0; color: var(--text3); }
.howto-n { width: 30px; height: 30px; border-radius: 999px; display: inline-flex; align-items: center;
          justify-content: center; background: var(--accentsoft); color: var(--accenttext); }

.site-foot { display: flex; justify-content: space-between; gap: 16px; padding: 20px 40px;
             border-top: 1px solid var(--rule); font-size: 14px; }
.auth-main { flex: 1 0 auto; display: flex; justify-content: center; align-items: flex-start;
             padding: 64px 16px; }
.auth-main .form-card { width: min(440px, 100%); }

.narrow { display: none; }

@media (max-width: 900px) {
  .howtos { padding: 8px 16px 48px; }
  .howto-list { grid-template-columns: 1fr; }
  .site-top, .site-foot { padding-left: 16px; padding-right: 16px; }
  .auth-main { padding: 32px 16px; }
}
@media (max-width: 520px) {
  .wide { display: none; }
  .narrow { display: inline; }
  .site-top { gap: 8px; }
  .site-top .btn { padding: 0 12px; }
  .brand { font-size: 17px; gap: 8px; }
  .brand .mark { width: 28px; height: 28px; }
}
/* A phone's header holds the brand and two buttons: three pushed "Sign up"
   past the edge at 375px. The guide stays a link in the footer. */
@media (max-width: 420px) {
  .site-top .top-docs { display: none; }
}

/* The footer's links wrap on a narrow screen instead of pushing the page wider. */
.site-foot { flex-wrap: wrap; }
.foot-links { gap: 8px 16px; flex-wrap: wrap; }

/* Pricing on the front page: the packs and paying as you go, side by side. */
.price-lede { margin: 0; max-width: 72ch; color: var(--text3); }
.price-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.price-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.price-usd { font-size: 30px; line-height: 1.1; color: var(--text); }
.price-per { font-size: 13px; color: var(--muted); }
.price-notes { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px;
               max-width: 90ch; color: var(--text3); font-size: 14.5px; }
@media (max-width: 1100px) { .price-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .price-list { grid-template-columns: 1fr; } }