/* base.css — Fonts, the reset and the focus ring. Design tokens live in
   theme.css.

   Design system, taken from the Fluento Figma kit, with rounded Nunito typography
   in sentence case. Depth comes from flat colour offsets, never blur. The kit
   is light-only and mobile-only; dark mode and the desktop rail are mapped in
   theme.css. */

@font-face {
  font-family: Nunito;
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url("../fonts/nunito.woff2") format("woff2");
}
@font-face {
  /* Wordmark only: Fredoka Bold (SIL Open Font License), latin subset, self-hosted. */
  font-family: Fredoka;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/fredoka-700.woff2") format("woff2");
}

*,
*::before,
*::after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

/* Apply to nested scrollers as well as controls: taps should not zoom the
   app. Scrolling and deliberate pinch zoom remain available to the browser. */
* {
  touch-action: manipulation;
}

[hidden] {
  display: none !important;
}

html,
body {
  margin: 0;
  height: 100%;
}

body {
  background: var(--paper);
  color: var(--ink);
  overflow: hidden;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
  cursor: pointer;
  padding: 0;
  user-select: none;
}

button,
.ghost {
  font-weight: 800;
}

:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  /* The ring used to be the brand blue, which made it invisible against every
     brand-blue button it was drawn around. */
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

button,
.big,
.ghost,
.chip,
.pill,
input:not([type="checkbox"]) {
  min-height: 44px;
}

/* The shell's icon sprite (index.html): symbols only, taking no room. */
.icon-sprite {
  position: absolute;
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Small label. The kit sets everything in sentence case at 14–16px, so a
   label is weight and colour rather than uppercase tracking. Buttons opt out
   below — they carry the full 16px. */
.caps {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.ghost.caps,
.why.caps {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0;
}

.q {
  color: var(--ink);
  font-weight: 900;
}

/* Native app (Capacitor): Apple requires In-App Purchase for anything sold in
   the app, and nothing is for sale yet, so pricing links never render there. */
body.native-app .price-link,
body.native-app a[href="/pricing"] {
  display: none !important;
}