/* ===========================================================================
   allora — marketing site
   Palette and type are lifted straight from the app so the site and the
   product read as one thing:
     - shore gradient + blob tints from lib/features/auth/widgets/auth_background.dart
     - text / accent / divider from lib/core/theme/app_colors.dart
     - Pacifico wordmark from lib/features/auth/widgets/auth_brand_header.dart
   Fonts are self-hosted rather than pulled from the Google Fonts CDN: allora
   sells privacy, and a font request that ships every visitor's IP to a third
   party would undercut that on the front page.
   =========================================================================== */

@font-face {
  font-family: 'Pacifico';
  /* ?v= is a cache-buster. Filenames here aren't content-hashed, so without it
     a swapped font file keeps rendering from cache after a deploy — which is
     exactly how the latin-ext subset survived its own replacement once. */
  src: url('fonts/pacifico.woff2?v=2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'InterVar';
  src: url('fonts/inter.woff2?v=2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* Shore gradient */
  --sky: #6fb6e8;
  --ocean: #3ebfb0;
  --sand: #f5dfb8;
  --blob-sky: #bee4f5;
  --blob-ocean: #6ed9cb;
  --blob-sand: #ffedd1;

  /* App tokens */
  --text: #000000;
  --text-secondary: #666666;
  --surface: #f5f5f5;
  --divider: #e0e0e0;
  --accent: #3897f0;
  --teal: #00ccbc;

  --ink: #0d2a3a;

  --max: 1080px;
  --radius: 18px;

  --sans: 'InterVar', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    Helvetica, Arial, sans-serif;
  --script: 'Pacifico', cursive;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--text);
  background: #fff;
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.wrap {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------------------------------------------------------------- nav ---- */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--divider);
}

.nav-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  height: 64px;
}

.brand {
  font-family: var(--script);
  font-size: 27px;
  color: var(--ink);
  line-height: 1;
  padding-bottom: 6px; /* Pacifico sits high in its box */
  margin-right: auto;
}

.brand:hover {
  text-decoration: none;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 22px;
}

.nav-links a {
  color: var(--text-secondary);
  font-size: 15px;
  font-weight: 500;
}

.nav-links a:hover {
  color: var(--text);
  text-decoration: none;
}

.btn {
  display: inline-block;
  border-radius: 999px;
  padding: 11px 22px;
  font-weight: 600;
  font-size: 15px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.12s ease;
  white-space: nowrap;
}

.btn:hover {
  text-decoration: none;
  transform: translateY(-1px);
}

.btn-primary {
  background: var(--ink);
  color: #fff;
  box-shadow: 0 6px 18px rgba(13, 42, 58, 0.22);
}

.btn-light {
  background: #fff;
  color: var(--ink);
  box-shadow: 0 6px 20px rgba(13, 42, 58, 0.16);
}

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--divider);
}

.nav-toggle {
  display: none;
}

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

.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(
    to bottom,
    var(--sky) 0%,
    var(--sky) 22%,
    var(--ocean) 55%,
    var(--sand) 90%,
    var(--sand) 100%
  );
  padding: 96px 0 108px;
  text-align: center;
  isolation: isolate;
}

/* Three oversized soft blobs drifting on independent loops — the CSS twin of
   the Lissajous paths on the app's auth screen. */
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.55;
  z-index: -1;
  pointer-events: none;
}

.blob-1 {
  width: 560px;
  height: 560px;
  background: var(--blob-ocean);
  top: -8%;
  left: -6%;
  animation: drift1 28s ease-in-out infinite;
}

.blob-2 {
  width: 520px;
  height: 520px;
  background: var(--blob-sky);
  top: 22%;
  right: -10%;
  animation: drift2 34s ease-in-out infinite;
}

.blob-3 {
  width: 540px;
  height: 540px;
  background: var(--blob-sand);
  bottom: -18%;
  left: 28%;
  opacity: 0.5;
  animation: drift3 31s ease-in-out infinite;
}

@keyframes drift1 {
  0%,
  100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(90px, 60px);
  }
}

@keyframes drift2 {
  0%,
  100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(-70px, 80px);
  }
}

@keyframes drift3 {
  0%,
  100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(60px, -70px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .blob {
    animation: none;
  }
  html {
    scroll-behavior: auto;
  }
}

.hero-wordmark {
  font-family: var(--script);
  font-size: clamp(64px, 13vw, 116px);
  color: #fff;
  line-height: 1.1;
  margin: 0 0 10px;
  text-shadow: 0 4px 30px rgba(13, 42, 58, 0.28);
}

.hero-tagline {
  font-size: clamp(19px, 2.6vw, 25px);
  color: #fff;
  font-weight: 500;
  margin: 0 auto 14px;
  max-width: 640px;
  text-shadow: 0 2px 16px rgba(13, 42, 58, 0.3);
}

.hero-sub {
  font-size: 17px;
  color: rgba(255, 255, 255, 0.92);
  max-width: 560px;
  margin: 0 auto 34px;
  text-shadow: 0 1px 10px rgba(13, 42, 58, 0.28);
}

.hero-cta {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.hero-note {
  margin-top: 18px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
}

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

section {
  padding: 84px 0;
}

.section-tight {
  padding: 60px 0;
}

.section-surface {
  background: var(--surface);
}

h1,
h2,
h3 {
  color: var(--text);
  line-height: 1.22;
  letter-spacing: -0.02em;
}

h2 {
  font-size: clamp(29px, 4.2vw, 40px);
  margin: 0 0 14px;
  font-weight: 700;
}

h3 {
  font-size: 19px;
  margin: 0 0 8px;
  font-weight: 650;
}

.lede {
  font-size: 19px;
  color: var(--text-secondary);
  max-width: 620px;
  margin: 0 0 40px;
}

.center {
  text-align: center;
}

.center .lede {
  margin-left: auto;
  margin-right: auto;
}

.page-head {
  padding: 64px 0 8px;
}

.page-head h1 {
  font-size: clamp(34px, 5.5vw, 50px);
  margin: 0 0 12px;
  font-weight: 700;
}

/* Manifesto — the three "no"s, stated plainly. */
.nos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 20px;
  margin-top: 8px;
}

.no {
  background: #fff;
  border: 1px solid var(--divider);
  border-radius: var(--radius);
  padding: 26px 24px;
}

.no-mark {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 10px;
}

.no p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 15.5px;
}

/* Feature grid */
.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 30px 34px;
}

.feature h3 {
  display: flex;
  align-items: center;
  gap: 9px;
}

.feature p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 15.5px;
}

.dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--teal), var(--sky));
  flex: none;
}

/* Pricing */
.tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: 22px;
  align-items: start;
}

.tier {
  background: #fff;
  border: 1px solid var(--divider);
  border-radius: var(--radius);
  padding: 30px 26px;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.tier-featured {
  border-color: var(--teal);
  box-shadow: 0 10px 34px rgba(0, 204, 188, 0.14);
  position: relative;
}

.tier-flag {
  position: absolute;
  top: -12px;
  left: 26px;
  background: var(--teal);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
}

.tier-name {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 12px;
}

.tier-price {
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
}

.tier-price span {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-secondary);
  letter-spacing: 0;
}

.tier-alt {
  color: var(--text-secondary);
  font-size: 14.5px;
  margin: 10px 0 20px;
}

.tier ul {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  flex: 1;
}

.tier li {
  padding-left: 26px;
  position: relative;
  margin-bottom: 10px;
  font-size: 15.5px;
  color: var(--text-secondary);
}

.tier li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 8px;
  width: 6px;
  height: 11px;
  border: solid var(--teal);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* FAQ */
.faq {
  max-width: 760px;
}

.faq details {
  border-bottom: 1px solid var(--divider);
  padding: 4px 0;
}

.faq summary {
  cursor: pointer;
  padding: 20px 30px 20px 0;
  font-weight: 600;
  font-size: 17.5px;
  list-style: none;
  position: relative;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: '+';
  position: absolute;
  right: 4px;
  top: 17px;
  font-size: 24px;
  font-weight: 400;
  color: var(--text-secondary);
  transition: transform 0.18s ease;
}

.faq details[open] summary::after {
  transform: rotate(45deg);
}

.faq details p {
  margin: 0 0 20px;
  color: var(--text-secondary);
  font-size: 16px;
}

/* Long-form legal copy */
.legal {
  max-width: 760px;
}

.legal h2 {
  font-size: 23px;
  margin: 42px 0 12px;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.legal p,
.legal li {
  color: #333;
  font-size: 16.5px;
}

.legal ul {
  padding-left: 22px;
}

.legal li {
  margin-bottom: 9px;
}

.updated {
  color: var(--text-secondary);
  font-size: 15px;
  margin: 0;
}

.callout {
  background: #fff8e6;
  border: 1px solid #f0d999;
  border-left: 4px solid #e0a800;
  border-radius: 10px;
  padding: 16px 18px;
  margin: 22px 0;
  font-size: 15.5px;
}

.callout strong {
  color: #8a6100;
}

/* Closing CTA band */
.band {
  background: linear-gradient(135deg, var(--ocean), var(--sky));
  color: #fff;
  text-align: center;
  border-radius: 26px;
  padding: 62px 30px;
  margin: 0 0 84px;
}

.band h2 {
  color: #fff;
  margin-bottom: 10px;
}

.band p {
  color: rgba(255, 255, 255, 0.94);
  max-width: 520px;
  margin: 0 auto 28px;
  font-size: 17.5px;
}

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

.footer {
  border-top: 1px solid var(--divider);
  padding: 46px 0 60px;
  color: var(--text-secondary);
  font-size: 14.5px;
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: space-between;
}

.footer-brand {
  font-family: var(--script);
  font-size: 25px;
  color: var(--ink);
  display: block;
  margin-bottom: 8px;
}

.footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
}

.footer nav a {
  color: var(--text-secondary);
}

.footer nav a:hover {
  color: var(--text);
}

.footer-legal {
  margin-top: 30px;
  font-size: 13.5px;
}

/* ------------------------------------------------------------- mobile ---- */

@media (max-width: 720px) {
  body {
    font-size: 16.5px;
  }

  .nav-toggle {
    display: inline-block;
    background: none;
    border: 1px solid var(--divider);
    border-radius: 10px;
    padding: 7px 11px;
    font-size: 15px;
    color: var(--ink);
    cursor: pointer;
  }

  .nav-links {
    display: none;
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    background: #fff;
    border-bottom: 1px solid var(--divider);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 24px 18px;
  }

  .nav-links.open {
    display: flex;
  }

  .nav-links a {
    padding: 13px 0;
    font-size: 16.5px;
    border-bottom: 1px solid var(--divider);
  }

  .nav-links .btn {
    margin-top: 14px;
    text-align: center;
    border-bottom: none;
  }

  .hero {
    padding: 66px 0 78px;
  }

  section {
    padding: 60px 0;
  }

  .band {
    padding: 48px 22px;
    margin-bottom: 60px;
  }
}

/* ---------------------------------------------------------------------
   Forms — sign-in and the membership page.

   The only pages on this site that take input. Deliberately plain: a
   password field is not the place for the shore gradient, and the two
   pages behind it are utilities rather than marketing.
   --------------------------------------------------------------------- */

.form {
  max-width: 400px;
  margin: 0 auto;
}

.field {
  display: block;
  margin-bottom: 18px;
}

.field span {
  display: block;
  margin-bottom: 7px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
}

.field input {
  width: 100%;
  padding: 13px 15px;
  font: inherit;
  font-size: 16px; /* Under 16px, iOS Safari zooms the page on focus. */
  color: var(--text);
  background: #fff;
  border: 1px solid var(--divider);
  border-radius: 12px;
  box-sizing: border-box;
}

.field input:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(0, 204, 188, 0.18);
}

.form .btn {
  width: 100%;
  margin-top: 4px;
}

.form-error {
  padding: 12px 15px;
  margin-bottom: 18px;
  font-size: 14.5px;
  color: #8c1d18;
  background: #fceceb;
  border: 1px solid #f3c9c6;
  border-radius: 12px;
}

.form-note {
  margin-top: 16px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-secondary);
}

#plans .btn {
  width: 100%;
  margin-top: 18px;
}

/* The `hidden` attribute is only a UA-stylesheet `display: none`, so any
   author rule that sets display — .btn, .tiers — silently beats it. The
   account page toggles both, and without this the "Manage billing" button
   shows for people with no web billing and the plan grid stays on screen
   for people who already subscribe. */
[hidden] {
  display: none !important;
}

/* ---------------------------------------------------------------------
   Sign-in and the membership page.

   Both sit on the shore gradient rather than plain white, because they
   are the two pages a member sees after the marketing pages have done
   their job — and the app's own sign-in screen is this same gradient.
   A billing console that looks like a billing console is the wrong
   answer for the one page that says "you're a member".
   --------------------------------------------------------------------- */

.hero-compact {
  padding: 68px 0 76px;
}

/* Status copy sits on the gradient, so it inverts. Scoped to .hero so the
   marketing pages' own .lede is untouched. */
.hero .lede,
.hero .form-note {
  color: rgba(255, 255, 255, 0.94);
  text-shadow: 0 1px 10px rgba(13, 42, 58, 0.28);
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
}

.hero .hero-cta {
  margin-top: 26px;
}

/* .btn-ghost is drawn for a white background; on the gradient it needs a
   light edge or it disappears into the ocean band. */
.btn-on-dark {
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.5);
}

.auth-card {
  max-width: 400px;
  margin: 0 auto;
  padding: 32px 30px 30px;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: 0 18px 50px rgba(13, 42, 58, 0.22);
  text-align: left;
}

.auth-card h1 {
  margin: 0 0 6px;
  font-size: 26px;
}

.auth-card .form-note:last-child {
  margin-bottom: 0;
}

/* Each tier can be bought on more than one rhythm, so the card ends in a
   stack of buttons rather than a single call to action. margin-top:auto
   keeps them aligned across cards of different heights. */
.tier-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: auto;
  padding-top: 20px;
}

.tier-actions .btn {
  width: 100%;
}

/* The card is white even though it sits inside .hero, so the inverted
   hero text colour above must not reach inside it. */
.auth-card .form-note,
.auth-card .lede {
  color: var(--text-secondary);
  text-shadow: none;
}

.hero-title {
  font-size: clamp(28px, 4.2vw, 40px);
  font-weight: 700;
  color: #fff;
  margin: 0 auto 10px;
  text-shadow: 0 2px 16px rgba(13, 42, 58, 0.3);
}