/* The public pages -- the home pages and sign-in. Bootstrap does the layout;
   this is spacing, type and a few cards, all on Bootstrap's own colour
   variables so dark mode follows. */

.public-page { background: var(--bs-body-bg); }
html {
  scroll-behavior: smooth;
  scroll-padding-top: 4.5rem;          /* anchors land below the sticky bar */
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.public-nav .navbar-brand .bi { color: var(--bs-primary); }

/* ---------------------------------------------------------------- hero */

.hero { padding: 4.5rem 0 3.5rem; }
.hero-eyebrow {
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--bs-primary);
  margin-bottom: .75rem;
}
.hero-title {
  font-size: clamp(2.1rem, 5vw, 3.4rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.01em;
  margin-bottom: 1.25rem;
}
.hero-lead {
  max-width: 44rem;
  margin: 0 auto 2rem;
  font-size: 1.2rem;
  line-height: 1.6;
  color: var(--bs-secondary-color);
}
.hero-note {
  margin: 1rem 0 3rem;
  font-size: .9rem;
  color: var(--bs-secondary-color);
}

/* The screenshot, in a plain browser frame. */
.shot { margin: 0; }
.shot-frame {
  overflow: hidden;
  border: 1px solid var(--bs-border-color);
  border-radius: .75rem;
  background: var(--bs-body-bg);
  box-shadow: 0 1.5rem 3rem -1rem rgba(15, 23, 42, .25);
}
.shot-bar {
  display: flex;
  gap: .4rem;
  padding: .6rem .8rem;
  border-bottom: 1px solid var(--bs-border-color);
  background: var(--bs-tertiary-bg);
}
.shot-bar span {
  width: .65rem;
  height: .65rem;
  border-radius: 50%;
  background: var(--bs-border-color);
}
.shot img {
  display: block;
  width: 100%;
  height: auto;
}
.shot figcaption {
  margin-top: .9rem;
  text-align: center;
  font-size: .9rem;
  color: var(--bs-secondary-color);
}

/* ------------------------------------------------------------- sections */

.section { padding: 5rem 0; }
.section-alt { background: var(--bs-tertiary-bg); }
.section-head {
  max-width: 42rem;
  margin: 0 auto 3rem;
  text-align: center;
}
.section-head h2 {
  font-size: clamp(1.7rem, 3.5vw, 2.3rem);
  font-weight: 700;
  margin-bottom: .75rem;
}
.section-head p {
  font-size: 1.1rem;
  color: var(--bs-secondary-color);
  margin: 0;
}
.section-note {
  margin: 2rem 0 0;
  text-align: center;
  color: var(--bs-secondary-color);
}

.feature {
  height: 100%;
  padding: 1.5rem;
  border: 1px solid var(--bs-border-color);
  border-radius: .75rem;
  background: var(--bs-body-bg);
}
.feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: 1rem;
  border-radius: .6rem;
  font-size: 1.35rem;
  color: var(--bs-primary);
  background: var(--bs-primary-bg-subtle);
}
.feature h3 {
  font-size: 1.15rem;
  font-weight: 600;
  margin-bottom: .5rem;
}
.feature p {
  margin: 0;
  color: var(--bs-secondary-color);
  line-height: 1.6;
}

.lang-card {
  height: 100%;
  padding: 1.5rem 1.75rem;
  border: 1px solid var(--bs-border-color);
  border-radius: .75rem;
}
.lang-card h3 {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 1rem;
}
.lang-card h3 .bi { color: var(--bs-primary); margin-right: .25rem; }
.lang-list {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lang-list li {
  padding: .35rem .8rem;
  border-radius: 2rem;
  background: var(--bs-secondary-bg);
}

/* -------------------------------------------------------------- pricing */

.price-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1.75rem 1.5rem;
  border: 1px solid var(--bs-border-color);
  border-radius: .75rem;
  background: var(--bs-body-bg);
}
.price-name {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: .75rem;
}
.price { margin-bottom: .25rem; }
.price-amount {
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1;
}
.price-period { color: var(--bs-secondary-color); }
/* The allowance on two lines: the number, then what it counts. */
.price-chars {
  margin: .75rem 0 1.25rem;
  color: var(--bs-secondary-color);
}
.price-chars strong,
.price-chars span { display: block; }
.price-chars strong {
  font-size: 1.15rem;
  color: var(--bs-body-color);
}
.price-points {
  flex-grow: 1;
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
}
.price-points li { padding: .2rem 0; }
.price-points .bi { color: var(--bs-success); margin-right: .35rem; }

.price-notes {
  margin-top: 3rem;
  color: var(--bs-secondary-color);
  line-height: 1.6;
}
.price-notes h3 {
  margin: 1.5rem 0 .5rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--bs-body-color);
}
.price-notes ul { padding-left: 1.2rem; margin: 0; }
.price-notes li + li { margin-top: .25rem; }

/* ------------------------------------------------------------------ FAQ */

.faq {
  border-bottom: 1px solid var(--bs-border-color);
}
.faq summary {
  position: relative;
  padding: 1.1rem 2rem 1.1rem 0;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: .25rem;
  top: .9rem;
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--bs-secondary-color);
}
.faq[open] summary::after { content: "\2212"; }
.faq p {
  margin: 0 0 1.1rem;
  color: var(--bs-secondary-color);
  line-height: 1.6;
}

/* ------------------------------------------------------------ closing */

.cta {
  padding: 4rem 0;
  background: var(--bs-primary-bg-subtle);
}
.cta h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  margin-bottom: 1.5rem;
}

/* ------------------------------------------------------------------ sign in */

/* Tall enough that the footer sits at the foot of the window, not under a
   short card. */
.login-main {
  padding: 3.5rem 0 5rem;
  min-height: calc(100vh - 14rem);
}
.login-card {
  max-width: 26rem;
  margin: 0 auto;
  padding: 2rem;
  border: 1px solid var(--bs-border-color);
  border-radius: .75rem;
  background: var(--bs-body-bg);
}

/* Sign in with Google.

   Not on Bootstrap's colour variables, unlike everything else here: Google's
   terms set the colours of this button and the mark on it, so it stays the
   button they specify in both themes rather than following ours. It is still a
   plain <a> -- there is no script from Google on this page, deliberately; see
   the template. */
.btn-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  padding: .55rem 1rem;
  font-weight: 500;
  color: #1f1f1f;
  background: #fff;
  border: 1px solid #747775;
}
.btn-google:hover,
.btn-google:focus-visible { color: #1f1f1f; background: #f2f2f2; }

[data-bs-theme="dark"] .btn-google {
  color: #e3e3e3;
  background: #131314;
  border-color: #8e918f;
}
[data-bs-theme="dark"] .btn-google:hover,
[data-bs-theme="dark"] .btn-google:focus-visible { color: #e3e3e3; background: #1e1f20; }

/* Fixed, not em-based: this is artwork, and it is the one part of the button
   that may not be redrawn. */
.btn-google svg { width: 18px; height: 18px; flex: none; }

/* "or" on a rule. The two ways in are alternatives, and a plain gap between
   them reads as a sequence -- fill this in, then that. */
.login-or {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 1.25rem 0;
  font-size: .85rem;
  color: var(--bs-secondary-color);
}
.login-or::before,
.login-or::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--bs-border-color);
}

/* The agreement, under the button it refers to rather than in a box of its
   own: it has to be read at the moment it applies, not noticed and dismissed.
   Quiet enough not to compete with the button above it, and the link
   underlines instead of turning blue -- it is there to be findable, not to be
   clicked on the way in. */
.legal-note {
  margin: .75rem 0 0;
  font-size: .78rem;
  line-height: 1.5;
  color: var(--bs-secondary-color);
  text-align: center;
}

.legal-note a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: .15em;
}

.legal-note a:hover,
.legal-note a:focus-visible { color: var(--bs-link-hover-color); }
.login-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: .5rem;
}
.login-lead {
  margin-bottom: 1.5rem;
  color: var(--bs-secondary-color);
}
/* Six digits, spaced out: this is read off a phone and typed once. */
#code {
  font-size: 1.6rem;
  letter-spacing: .5rem;
  text-align: center;
  font-family: ui-monospace, Consolas, monospace;
}

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

.public-footer {
  padding: 1.5rem 0;
  border-top: 1px solid var(--bs-border-color);
  font-size: .9rem;
  color: var(--bs-secondary-color);
}
.public-footer a { color: inherit; text-decoration: none; }
.public-footer a:hover { color: var(--bs-body-color); text-decoration: underline; }

@media (max-width: 575.98px) {
  .hero { padding-top: 3rem; }
  .section { padding: 3.5rem 0; }
}