/* ==========================================================================
   MB2S TECH — "SIGNAL & SOIL"
   One design system. One file. No build step.

   Enterprise infrastructure meeting neighborhood commerce: the precision of
   instrumentation, the warmth of a shopfront. Deep forest as ground, warm
   paper as surface, amber as the single point of heat.

   Contents
     1.  Reset
     2.  Tokens
     3.  Base
     4.  Typography
     5.  Layout
     6.  Nav
     7.  Footer
     8.  Buttons
     9.  Badges & annotations
     10. Cards
     11. Forms
     12. Pricing
     13. Stats & bento
     14. App / device frames
     15. Prose (legal pages)
     16. Motion
     17. Utilities
   ========================================================================== */


/* 1. RESET ================================================================= */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

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

input, button, textarea, select { font: inherit; color: inherit; }

button { background: none; border: 0; cursor: pointer; }

a { color: inherit; text-decoration: none; }

ul, ol { list-style: none; padding: 0; }


/* 2. TOKENS ================================================================ */

:root {
  /* --- Ground: deep night forest, where authority lives ---------------- */
  --ink:        #0A1A15;

  /* --- Structure: enterprise emerald ----------------------------------- */
  --forest:     #00443A;
  --forest-2:   #0B5D51;
  --forest-3:   #0F7263;
  --emerald:    #006D2F;

  /* --- Heat: the single accent. Spend it once per view. ---------------- */
  --amber:      #F59E0B;
  --amber-2:    #D97706;
  /* Amber on a light ground fails AA as text (3.10:1), so text uses this
     darker sibling instead. --amber stays for fills, where it sits under
     ink-coloured type and clears AA easily (8.35:1). */
  --amber-text: #9A5204;

  /* --- Surface: warm paper cream --------------------------------------- */
  --paper:      #FDFCF8;
  --paper-2:    #F6F4ED;
  --paper-3:    #EDEAE0;

  /* --- Hairlines: warm, never blue-grey -------------------------------- */
  --line:       #E3DFD2;
  --line-2:     #D5D0BF;

  /* --- Text on paper ---------------------------------------------------- */
  --text:       #14211C;
  --text-2:     #4A5A53;
  /* Deliberately darker than a typical muted grey: this carries small
     meta text (12-14px), which needs 4.5:1, not the 3:1 large-text floor. */
  --text-3:     #566058;

  /* --- Text on ink / forest --------------------------------------------- */
  --on-dark:    #FDFCF8;
  --on-dark-2:  rgba(253, 252, 248, 0.74);
  /* 0.62 alpha measures 4.26:1 on forest — just under AA for small text.
     0.72 measures 6.37:1, so this stays legible as captions and labels. */
  --on-dark-3:  rgba(253, 252, 248, 0.72);

  /* --- Semantic --------------------------------------------------------- */
  --danger:     #B42318;
  --danger-bg:  #FEF3F2;
  --success:    #027A48;
  --success-bg: #ECFDF3;

  /* --- Type ------------------------------------------------------------- */
  /* Display: Plus Jakarta Sans — modern, geometric, normal proportions.
     Body: Manrope. Both are upright, humanist sans faces that sit together
     without one shouting over the other. */
  --font-display: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
  --font-body:    'Manrope', ui-sans-serif, system-ui, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, Consolas, monospace;

  /* --- One radius scale, used everywhere -------------------------------- */
  --r-xs:   4px;
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   16px;
  --r-xl:   24px;
  --r-pill: 999px;

  /* --- One shadow scale ------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(20, 33, 28, 0.05);
  --shadow-sm: 0 1px 3px rgba(20, 33, 28, 0.07), 0 1px 2px rgba(20, 33, 28, 0.04);
  --shadow-md: 0 4px 12px rgba(20, 33, 28, 0.07), 0 2px 4px rgba(20, 33, 28, 0.04);
  --shadow-lg: 0 12px 32px rgba(20, 33, 28, 0.10), 0 4px 8px rgba(20, 33, 28, 0.04);
  --shadow-ink: 0 18px 48px rgba(10, 26, 21, 0.22);

  /* --- Spacing (4px base) ----------------------------------------------- */
  --s-1:  0.25rem;
  --s-2:  0.5rem;
  --s-3:  0.75rem;
  --s-4:  1rem;
  --s-5:  1.25rem;
  --s-6:  1.5rem;
  --s-8:  2rem;
  --s-10: 2.5rem;
  --s-12: 3rem;
  --s-16: 4rem;
  --s-20: 5rem;
  --s-24: 6rem;
  --s-32: 8rem;

  /* --- Measures --------------------------------------------------------- */
  --container:        1200px;
  --container-wide:   1360px;
  --container-text:   68ch;
  --gutter:           1.5rem;

  /* --- Motion ----------------------------------------------------------- */
  --ease:  cubic-bezier(0.22, 1, 0.36, 1);
  --dur:   220ms;
}


/* 3. BASE ================================================================== */

body {
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--text);
  font-size: 1rem;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

::selection {
  background: var(--amber);
  color: var(--ink);
}

:focus-visible {
  outline: 2px solid var(--forest-3);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--ink);
  color: var(--on-dark);
  padding: var(--s-3) var(--s-5);
  border-radius: 0 0 var(--r-md) 0;
  font-weight: 700;
  font-size: 0.875rem;
}
.skip-link:focus { left: 0; }


/* 4. TYPOGRAPHY ============================================================ */

/* Display face does the announcing. Body face does everything else.
   Contrast comes from the jump between the two poles — not from
   eight sizes pretending to be a hierarchy. */

.display-1,
.display-2,
.h1, .h2, .h3, .h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* Plus Jakarta Sans is already fairly tight, so tracking stays mild —
   enough to read as deliberate at display sizes, never enough to crowd. */
.display-1 { font-size: clamp(2.5rem, 5.6vw, 4rem);      font-weight: 800; letter-spacing: -0.028em; line-height: 1.06; }
.display-2 { font-size: clamp(2.125rem, 4.4vw, 3.125rem); font-weight: 800; letter-spacing: -0.024em; line-height: 1.1; }
.h1        { font-size: clamp(1.875rem, 3.4vw, 2.5rem);   letter-spacing: -0.022em; }
.h2        { font-size: clamp(1.5rem, 2.6vw, 2rem);       letter-spacing: -0.02em; }
.h3        { font-size: clamp(1.1875rem, 1.8vw, 1.4375rem); letter-spacing: -0.015em; line-height: 1.28; }
.h4        { font-size: 1.0625rem; line-height: 1.4; letter-spacing: -0.01em; }

.lead {
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  line-height: 1.65;
  color: var(--text-2);
  text-wrap: pretty;
}

.body    { font-size: 1rem; line-height: 1.65; color: var(--text-2); text-wrap: pretty; }
.body-sm { font-size: 0.875rem; line-height: 1.6; color: var(--text-2); }

/* Eyebrow: the small clinical label above a heading */
.eyebrow {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--forest);
}
.eyebrow--amber { color: var(--amber-text); }
.eyebrow--dark  { color: var(--on-dark-3); }

/* On a dark ground the light amber clears AA (5.18:1 on forest, 8.35:1 on
   ink), so it is used as-is there instead of the dark text variant. */
.ground-forest .eyebrow--amber, .ground-ink .eyebrow--amber,
.card--dark .eyebrow--amber, .card--ink .eyebrow--amber { color: var(--amber); }

/* Annotation: blueprint reference markers. Evidence of work, not decoration. */
.annot {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}
.annot--dark { color: var(--on-dark-3); }

.text-amber  { color: var(--amber); }
.text-forest { color: var(--forest); }
.text-muted  { color: var(--text-2); }
.text-center { text-align: center; }

.measure    { max-width: var(--container-text); }
.measure-sm { max-width: 46ch; }
.mx-auto    { margin-inline: auto; }


/* 5. LAYOUT ================================================================ */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--wide   { max-width: var(--container-wide); }
.container--narrow { max-width: 780px; }

.section { padding-block: clamp(4rem, 9vw, 7.5rem); }
.section--tight { padding-block: clamp(3rem, 6vw, 5rem); }

/* Grounds */
.ground-paper  { background: var(--paper); }
.ground-paper-2{ background: var(--paper-2); }
.ground-forest { background: var(--forest); color: var(--on-dark); }
.ground-ink    { background: var(--ink);    color: var(--on-dark); }

.ground-forest .lead, .ground-ink .lead,
.ground-forest .body, .ground-ink .body,
.ground-forest .body-sm, .ground-ink .body-sm { color: var(--on-dark-2); }

.ground-forest h1, .ground-ink h1,
.ground-forest h2, .ground-ink h2,
.ground-forest h3, .ground-ink h3,
.ground-forest h4, .ground-ink h4,
.ground-forest .h1, .ground-ink .h1,
.ground-forest .h2, .ground-ink .h2,
.ground-forest .h3, .ground-ink .h3,
.ground-forest .h4, .ground-ink .h4 { color: var(--on-dark); }

/* Warm hairline rule */
.rule {
  height: 1px;
  background: var(--line);
  border: 0;
}
.ground-forest .rule, .ground-ink .rule { background: rgba(253, 252, 248, 0.14); }

/* Section head: eyebrow + heading + optional lead, left or centered */
.section-head { max-width: 62ch; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head .eyebrow { display: block; margin-bottom: var(--s-4); }
.section-head .lead { margin-top: var(--s-4); }

.grid { display: grid; gap: var(--s-6); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--gap-lg { gap: var(--s-8); }

/* Asymmetric columns that collapse. An inline grid-template-columns cannot
   be overridden by a media query, so the ratio lives here as a class. */
.grid--sidebar { grid-template-columns: 1.6fr 1fr; align-items: start; }
.grid--split   { grid-template-columns: 1fr 1fr; align-items: center; }
.grid--wide-left { grid-template-columns: 1.05fr 0.95fr; align-items: center; }

/* Blueprint grid — the scaffolding, allowed to show */
.bp-grid {
  background-image:
    linear-gradient(to right,  rgba(0, 68, 58, 0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 68, 58, 0.045) 1px, transparent 1px);
  background-size: 64px 64px;
}
.ground-forest.bp-grid, .ground-ink.bp-grid {
  background-image:
    linear-gradient(to right,  rgba(253, 252, 248, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(253, 252, 248, 0.05) 1px, transparent 1px);
}

/* Stack helper */
.stack > * + * { margin-top: var(--s-4); }
.stack-lg > * + * { margin-top: var(--s-8); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center; }


/* 6. NAV =================================================================== */

/* One nav, everywhere. Consistent chrome across all pages. */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--forest);
  border-bottom: 1px solid rgba(253, 252, 248, 0.10);
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.nav.is-stuck {
  background: rgba(0, 68, 58, 0.92);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  box-shadow: 0 1px 0 rgba(253, 252, 248, 0.08), 0 8px 24px rgba(10, 26, 21, 0.18);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
  height: 68px;
}

.nav__brand {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.0625rem;
  letter-spacing: -0.02em;
  color: var(--on-dark);
  white-space: nowrap;
}
.nav__brand img { width: 32px; height: 32px; border-radius: var(--r-sm); object-fit: contain; }
.nav__brand:hover { opacity: 0.88; }

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--s-8);
}
.nav__link {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--on-dark-2);
  transition: color var(--dur) var(--ease);
}
.nav__link:hover { color: var(--on-dark); }
.nav__link[aria-current="page"] { color: var(--on-dark); }

.nav__actions { display: flex; align-items: center; gap: var(--s-3); }

.nav__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: var(--r-md);
  color: var(--on-dark);
  border: 1px solid rgba(253, 252, 248, 0.18);
}
.nav__toggle:hover { background: rgba(253, 252, 248, 0.08); }
.nav__toggle svg { width: 20px; height: 20px; }

.nav__mobile {
  display: none;
  border-top: 1px solid rgba(253, 252, 248, 0.12);
  background: var(--ink);
  padding: var(--s-4) var(--gutter) var(--s-6);
}
.nav__mobile.is-open { display: block; }
.nav__mobile a {
  display: block;
  padding: var(--s-3) 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--on-dark-2);
  border-bottom: 1px solid rgba(253, 252, 248, 0.07);
}
.nav__mobile a:hover { color: var(--on-dark); }
.nav__mobile .btn { margin-top: var(--s-5); width: 100%; }

/* App banner strip — Play Store, site-wide */
.nav__appbar {
  background: var(--ink);
  border-bottom: 1px solid rgba(253, 252, 248, 0.08);
  font-size: 0.8125rem;
  color: var(--on-dark-2);
}
.nav__appbar .container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  padding-block: var(--s-2);
  text-align: center;
}
.nav__appbar a {
  color: var(--amber);
  font-weight: 700;
  white-space: nowrap;
  border-bottom: 1px solid transparent;
}
.nav__appbar a:hover { border-bottom-color: var(--amber); }


/* 7. FOOTER ================================================================ */

.footer {
  background: var(--ink);
  color: var(--on-dark-2);
  padding-block: var(--s-16) var(--s-8);
  font-size: 0.875rem;
}
.footer__top {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: var(--s-10);
  padding-bottom: var(--s-12);
}
.footer__brand {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.125rem;
  letter-spacing: -0.02em;
  color: var(--on-dark);
  margin-bottom: var(--s-4);
}
.footer__brand img { width: 30px; height: 30px; border-radius: var(--r-sm); object-fit: contain; }
.footer__blurb { max-width: 34ch; color: var(--on-dark-3); line-height: 1.65; }

.footer__col h3 {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-dark-3);
  margin-bottom: var(--s-5);
}
.footer__col a {
  display: block;
  padding-block: var(--s-2);
  color: var(--on-dark-2);
  transition: color var(--dur) var(--ease);
}
.footer__col a:hover { color: var(--on-dark); }

.footer__bottom {
  border-top: 1px solid rgba(253, 252, 248, 0.10);
  padding-top: var(--s-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  justify-content: space-between;
  align-items: center;
  color: var(--on-dark-3);
  font-size: 0.8125rem;
}


/* 8. BUTTONS =============================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 0.8125rem 1.5rem;
  border-radius: var(--r-md);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.005em;
  white-space: nowrap;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--dur) var(--ease),
              color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 17px; height: 17px; flex-shrink: 0; }

.btn--primary {
  background: var(--forest);
  color: var(--on-dark);
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover { background: var(--forest-2); box-shadow: var(--shadow-md); }

/* The amber button is the one point of heat on a page. Use it once. */
.btn--amber {
  background: var(--amber);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}
.btn--amber:hover { background: var(--amber-2); box-shadow: var(--shadow-md); }

.btn--light {
  background: var(--paper);
  color: var(--forest);
  box-shadow: var(--shadow-sm);
}
.btn--light:hover { background: #fff; box-shadow: var(--shadow-md); }

.btn--outline {
  border-color: var(--line-2);
  color: var(--text);
  background: transparent;
}
.btn--outline:hover { border-color: var(--forest); color: var(--forest); background: var(--paper-2); }

.btn--outline-dark {
  border-color: rgba(253, 252, 248, 0.28);
  color: var(--on-dark);
}
.btn--outline-dark:hover { background: rgba(253, 252, 248, 0.10); border-color: rgba(253, 252, 248, 0.5); }

.btn--ghost { color: var(--forest); padding-inline: var(--s-2); }
.btn--ghost:hover { color: var(--forest-3); }

.btn--sm { padding: 0.5625rem 1rem; font-size: 0.8125rem; border-radius: var(--r-sm); }
.btn--lg { padding: 1rem 2rem; font-size: 1rem; border-radius: var(--r-md); }
.btn--block { display: flex; width: 100%; }

.btn[disabled], .btn[aria-disabled="true"] {
  opacity: 0.5;
  pointer-events: none;
}

/* Text link with arrow */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--forest);
  transition: gap var(--dur) var(--ease), color var(--dur) var(--ease);
}
.link-arrow:hover { gap: var(--s-3); color: var(--forest-3); }
.ground-forest .link-arrow, .ground-ink .link-arrow { color: var(--amber); }


/* 9. BADGES & ANNOTATIONS ================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 0.3125rem 0.75rem;
  border-radius: var(--r-pill);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid transparent;
}
.badge--amber { background: rgba(245, 158, 11, 0.14); color: var(--amber-text); border-color: rgba(245, 158, 11, 0.34); }
.badge--forest { background: rgba(0, 68, 58, 0.07); color: var(--forest); border-color: rgba(0, 68, 58, 0.14); }
.badge--muted { background: var(--paper-3); color: var(--text-3); border-color: var(--line); }
.badge--light { background: rgba(253, 252, 248, 0.12); color: var(--on-dark); border-color: rgba(253, 252, 248, 0.2); }

/* Inside a dark band the amber badge reads on the band, not on paper. */
.ground-forest .badge--amber, .ground-ink .badge--amber,
.card--dark .badge--amber, .card--ink .badge--amber {
  background: rgba(245, 158, 11, 0.18);
  color: var(--amber);
  border-color: rgba(245, 158, 11, 0.42);
}

.badge__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* Icon chip */
.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-md);
  background: rgba(0, 68, 58, 0.07);
  color: var(--forest);
  flex-shrink: 0;
}
.chip svg { width: 21px; height: 21px; }
.chip--sm { width: 34px; height: 34px; border-radius: var(--r-sm); }
.chip--sm svg { width: 17px; height: 17px; }
.chip--lg { width: 54px; height: 54px; border-radius: var(--r-lg); }
.chip--lg svg { width: 26px; height: 26px; }
.chip--solid { background: var(--forest); color: var(--on-dark); }
.chip--dark { background: rgba(253, 252, 248, 0.10); color: var(--amber); }

/* Colored top bar accent on a card */
.accent-bar {
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--forest);
}
.accent-bar--amber { background: var(--amber); }
.accent-bar--emerald { background: var(--emerald); }


/* 10. CARDS ================================================================ */

.card {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-8);
  transition: box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.card--hover:hover {
  box-shadow: var(--shadow-lg);
  border-color: var(--line-2);
  transform: translateY(-2px);
}
.card--dark {
  background: var(--forest);
  border-color: rgba(253, 252, 248, 0.12);
  color: var(--on-dark);
}
.card--ink {
  background: var(--ink);
  border-color: rgba(253, 252, 248, 0.10);
  color: var(--on-dark);
}
.card--flat { box-shadow: none; }
.card--lg { padding: var(--s-10); border-radius: var(--r-xl); }
.card--feature { overflow: hidden; }

.card__head {
  display: flex;
  align-items: flex-start;
  gap: var(--s-4);
  margin-bottom: var(--s-5);
}
.card__title { margin-bottom: var(--s-3); }
.card__body { color: var(--text-2); }
.card--dark .card__body, .card--ink .card__body { color: var(--on-dark-2); }

/* Body copy inside a dark card or band must not inherit the paper-ground
   text colours — .body-sm and .body default to --text-2/--text-3, which
   are unreadable on forest. */
.card--dark .body, .card--ink .body,
.card--dark .body-sm, .card--ink .body-sm,
.ground-forest .body, .ground-ink .body,
.ground-forest .body-sm, .ground-ink .body-sm { color: var(--on-dark-2); }

/* Feature list with check marks */
.ticks { display: grid; gap: var(--s-3); }
.ticks li {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--text-2);
}
.ticks svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 2px; color: var(--emerald); }
.card--dark .ticks li, .ground-forest .ticks li { color: var(--on-dark-2); }
.card--dark .ticks svg, .ground-forest .ticks svg { color: var(--amber); }


/* 11. FORMS ================================================================ */

.field { display: block; }
.field + .field { margin-top: var(--s-6); }

.field__label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: var(--s-2);
  letter-spacing: -0.005em;
}
.field__hint {
  display: block;
  font-size: 0.75rem;
  color: var(--text-3);
  margin-top: var(--s-2);
}

.input,
.textarea,
.select {
  display: block;
  width: 100%;
  padding: 0.8125rem 1rem;
  background: var(--paper);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  color: var(--text);
  font-size: 0.9375rem;
  line-height: 1.5;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  -webkit-appearance: none;
  appearance: none;
}
.input::placeholder,
.textarea::placeholder { color: var(--text-3); opacity: 1; }

.input:hover, .textarea:hover, .select:hover { border-color: var(--forest-3); }

.input:focus,
.textarea:focus,
.select:focus {
  outline: none;
  border-color: var(--forest);
  box-shadow: 0 0 0 3px rgba(0, 68, 58, 0.12);
}

.textarea { resize: vertical; min-height: 132px; }

.select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234A5A53' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.875rem center;
  padding-right: 2.75rem;
}

.checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--text-2);
}
.checkbox input {
  width: 17px; height: 17px;
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--forest);
  cursor: pointer;
}

.form-note {
  font-size: 0.8125rem;
  color: var(--text-3);
  margin-top: var(--s-4);
}

/* Inline form status messages */
.form-status {
  display: none;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-4);
  border-radius: var(--r-md);
  font-size: 0.875rem;
  line-height: 1.55;
  margin-top: var(--s-5);
}
.form-status.is-shown { display: flex; }
.form-status--ok   { background: var(--success-bg); color: var(--success); border: 1px solid rgba(2, 122, 72, 0.22); }
.form-status--err  { background: var(--danger-bg);  color: var(--danger);  border: 1px solid rgba(180, 35, 24, 0.22); }
.form-status svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }


/* 12. PRICING ============================================================== */

.price-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-6);
  align-items: start;
}

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: var(--s-8);
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.plan:hover { box-shadow: var(--shadow-lg); border-color: var(--line-2); }

.plan--featured {
  background: var(--forest);
  border-color: var(--forest);
  color: var(--on-dark);
  box-shadow: var(--shadow-ink);
}
.plan--featured .plan__name,
.plan--featured .plan__price { color: var(--on-dark); }
.plan--featured .plan__desc,
.plan--featured .ticks li { color: var(--on-dark-2); }
.plan--featured .ticks svg { color: var(--amber); }
.plan--featured .plan__strike { color: var(--on-dark-3); }

.plan__flag {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--amber);
  color: var(--ink);
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.375rem 0.875rem;
  border-radius: var(--r-pill);
  white-space: nowrap;
}

.plan__name {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  margin-bottom: var(--s-2);
  letter-spacing: -0.015em;
}
.plan__desc { font-size: 0.875rem; color: var(--text-2); margin-bottom: var(--s-6); }

.plan__price-row { margin-bottom: var(--s-6); }
.plan__strike {
  display: block;
  font-size: 0.8125rem;
  color: var(--text-3);
  text-decoration: line-through;
  margin-bottom: var(--s-1);
}
.plan__price {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--forest);
}
.plan__period {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-3);
  letter-spacing: 0;
}
.plan--featured .plan__period { color: var(--on-dark-3); }

.plan__features { flex: 1; margin-bottom: var(--s-8); }
.plan .btn { width: 100%; }

/* Billing toggle */
.toggle-row {
  display: inline-flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-1);
}
.toggle-row__label {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--text-3);
  transition: color var(--dur) var(--ease);
  cursor: pointer;
}
.toggle-row__label.is-active { color: var(--text); }

.switch {
  position: relative;
  width: 48px;
  height: 27px;
  border-radius: var(--r-pill);
  background: var(--forest);
  transition: background var(--dur) var(--ease);
  flex-shrink: 0;
}
.switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: var(--shadow-xs);
  transition: transform var(--dur) var(--ease);
}
.switch[aria-checked="true"]::after { transform: translateX(21px); }


/* 13. STATS & BENTO ======================================================== */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--s-6);
}
.stat {
  padding-left: var(--s-4);
  border-left: 3px solid var(--forest);
}
.stat__value {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--forest);
  margin-bottom: var(--s-2);
}
.stat__label {
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
}
.ground-forest .stat, .ground-ink .stat { border-left-color: var(--amber); }
.ground-forest .stat__value, .ground-ink .stat__value { color: var(--on-dark); }
.ground-forest .stat__label, .ground-ink .stat__label { color: var(--on-dark-3); }

.bento {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-6);
}
.bento__wide { grid-column: span 2; }
.bento__full { grid-column: 1 / -1; }


/* 14. APP / DEVICE FRAMES ================================================== */

.store-badge { display: inline-block; }
.store-badge img {
  height: 56px;
  width: auto;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.store-badge:hover img { transform: translateY(-2px); opacity: 0.92; }
.store-badge--sm img { height: 44px; }

/* Phone shell for real product screenshots */
.phone {
  width: 260px;
  max-width: 100%;
  aspect-ratio: 9 / 19;
  background: var(--ink);
  border-radius: 34px;
  padding: 9px;
  box-shadow: var(--shadow-ink);
  flex-shrink: 0;
}
.phone__screen {
  width: 100%;
  height: 100%;
  border-radius: 26px;
  overflow: hidden;
  background: var(--paper-2);
  border: 1px solid rgba(253, 252, 248, 0.08);
}
/* contain, not cover: the real captures must not lose app chrome */
.phone__screen img { width: 100%; height: 100%; object-fit: contain; }
.phone--sm { width: 210px; border-radius: 28px; padding: 7px; }
.phone--sm .phone__screen { border-radius: 22px; }

/* On-screen UI drawn in markup — stands in for a screenshot without
   faking one, and stays crisp at any resolution. */
.phone-ui {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-5) var(--s-4);
  background: var(--paper);
  color: var(--text);
}
.phone-ui__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}
.phone-ui__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.02em;
}
.phone-ui__stat-v {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--forest);
}
.phone-ui__stat-l {
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-top: 4px;
}
.phone-ui__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  font-size: 0.8125rem;
  padding-block: var(--s-2);
  border-bottom: 1px solid var(--line);
  color: var(--text-2);
}
.phone-ui__row strong { color: var(--text); font-weight: 700; }
.phone-ui__cta {
  margin-top: auto;
  text-align: center;
  background: var(--forest);
  color: var(--on-dark);
  font-size: 0.8125rem;
  font-weight: 700;
  padding: var(--s-3);
  border-radius: var(--r-md);
}

/* Screenshot gallery — horizontal scroll on small screens */
.shots {
  display: flex;
  gap: var(--s-6);
  overflow-x: auto;
  padding-bottom: var(--s-4);
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.shots > * { scroll-snap-align: center; }
.shots::-webkit-scrollbar { height: 6px; }
.shots::-webkit-scrollbar-track { background: var(--paper-3); border-radius: var(--r-pill); }
.shots::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: var(--r-pill); }

.shot { flex: 1 1 0; min-width: 0; text-align: center; }
.shot .phone { width: 100%; max-width: 240px; margin-inline: auto; }
.shot__cap {
  margin-top: var(--s-3);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}
.ground-forest .shot__cap, .ground-ink .shot__cap, .card--dark .shot__cap { color: var(--on-dark-3); }

/* Below the width where five frames can sit side by side, let the row
   scroll horizontally rather than squash every phone. */
@media (max-width: 1100px) {
  .shot { flex: 0 0 auto; }
  .shot .phone { max-width: 230px; }
}

/* Placeholder shown until real screenshots are dropped in */
.shot-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  height: 100%;
  padding: var(--s-6);
  text-align: center;
  background:
    repeating-linear-gradient(45deg, var(--paper-2), var(--paper-2) 10px, var(--paper-3) 10px, var(--paper-3) 20px);
  color: var(--text-3);
}
.shot-placeholder svg { width: 26px; height: 26px; opacity: 0.5; }
.shot-placeholder span {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  max-width: 15ch;
  line-height: 1.5;
}


/* --- Hero ---------------------------------------------------------------- */

.hero { position: relative; overflow: hidden; }

.hero__inner {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(3rem, 7vw, 6rem);
  align-items: center;
  position: relative;
  z-index: 1;
}
.hero__copy { max-width: 33rem; }
.hero__actions {
  margin-top: var(--s-8);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
}
.hero__meta {
  margin-top: var(--s-8);
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  font-size: 0.8125rem;
  color: var(--on-dark-3);
}

/* Logo row: "trusted by" or store badges under the hero */
.hero__stores {
  margin-top: var(--s-8);
  padding-top: var(--s-8);
  border-top: 1px solid rgba(253, 252, 248, 0.12);
  display: flex;
  align-items: center;
  gap: var(--s-6);
  flex-wrap: wrap;
}

@media (max-width: 980px) {
  .hero__inner { grid-template-columns: 1fr; gap: var(--s-12); }
  .hero__copy { max-width: none; }
}


/* --- App UI mock --------------------------------------------------------- */
/* A representation of the product built in markup, not a faked screenshot.
   Resolution-independent, on-brand, and swappable for real captures. */

.app-mock {
  background: var(--paper);
  border: 1px solid rgba(253, 252, 248, 0.10);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-ink);
  overflow: hidden;
  color: var(--text);
}
.app-mock__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
}
.app-mock__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: -0.015em;
}
.app-mock__body { padding: var(--s-5); display: grid; gap: var(--s-5); }

.app-mock__label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-2);
  margin-bottom: var(--s-2);
}
.app-mock__label span:last-child {
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--text-3);
}

.bar { height: 8px; border-radius: var(--r-pill); background: var(--paper-3); overflow: hidden; }
.bar__fill { height: 100%; border-radius: inherit; background: var(--forest); }
.bar__fill--amber { background: var(--amber); }

.app-mock__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); }
.app-stat {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-3) var(--s-4);
}
.app-stat__v {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.1875rem;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--forest);
}
.app-stat__l {
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-top: 3px;
}

.app-mock__thread { display: grid; gap: var(--s-3); }
.bubble {
  max-width: 84%;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  font-size: 0.8125rem;
  line-height: 1.5;
}
.bubble--out {
  background: var(--forest);
  color: var(--on-dark);
  border-bottom-right-radius: var(--r-xs);
  margin-left: auto;
}
.bubble--in {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-bottom-left-radius: var(--r-xs);
}

/* The status pill reads as a live indicator */
.live-dot {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--forest);
}
.live-dot::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--emerald);
}

@media (max-width: 520px) {
  .app-mock__stats { grid-template-columns: 1fr 1fr; }
  .app-mock__stats > :last-child { grid-column: 1 / -1; }
}


/* --- Step / number list (how it works) ----------------------------------- */

.steps { display: grid; gap: 0; counter-reset: step; }
.step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-6);
  padding-block: var(--s-8);
  border-top: 1px solid var(--line);
}
.step:last-child { border-bottom: 1px solid var(--line); }
.step__num {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--forest);
  padding-top: 0.35rem;
  min-width: 2.5rem;
}
.ground-forest .step, .ground-ink .step { border-color: rgba(253, 252, 248, 0.12); }
.ground-forest .step__num, .ground-ink .step__num { color: var(--amber); }

@media (max-width: 640px) {
  .step { grid-template-columns: 1fr; gap: var(--s-3); }
}


/* --- Comparison / checklist table --------------------------------------- */

.compare { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.compare th, .compare td {
  text-align: left;
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--line);
}
.compare thead th {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
  border-bottom: 1px solid var(--line-2);
}
.compare tbody td:first-child { font-weight: 600; color: var(--text); }
.compare tbody td { color: var(--text-2); }
.compare .yes { color: var(--emerald); font-weight: 700; }
.compare .no  { color: var(--text-3); }
.compare-scroll { overflow-x: auto; }
.ground-forest .compare th, .ground-ink .compare th,
.ground-forest .compare td, .ground-ink .compare td {
  border-color: rgba(253, 252, 248, 0.12);
}
.ground-forest .compare tbody td:first-child,
.ground-ink .compare tbody td:first-child { color: var(--on-dark); }
.ground-forest .compare tbody td,
.ground-ink .compare tbody td { color: var(--on-dark-2); }


/* --- FAQ (native details, no JS) ---------------------------------------- */

.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
  padding-block: var(--s-6);
  cursor: pointer;
  font-weight: 700;
  font-size: 1rem;
  color: var(--text);
  list-style: none;
  transition: color var(--dur) var(--ease);
}
.faq__item > summary::-webkit-details-marker { display: none; }
.faq__item > summary:hover { color: var(--forest); }
.faq__item > summary::after {
  content: "";
  flex-shrink: 0;
  width: 11px; height: 11px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--dur) var(--ease);
}
.faq__item[open] > summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.faq__answer { padding-bottom: var(--s-6); max-width: 68ch; color: var(--text-2); line-height: 1.7; }
.faq__item[open] > summary { color: var(--forest); }
.ground-forest .faq, .ground-ink .faq,
.ground-forest .faq__item, .ground-ink .faq__item { border-color: rgba(253, 252, 248, 0.12); }
.ground-forest .faq__item > summary, .ground-ink .faq__item > summary { color: var(--on-dark); }
.ground-forest .faq__answer, .ground-ink .faq__answer { color: var(--on-dark-2); }


/* --- CTA band ------------------------------------------------------------ */

.cta-band {
  position: relative;
  overflow: hidden;
  background: var(--forest);
  color: var(--on-dark);
  border-radius: var(--r-xl);
  padding: clamp(2.5rem, 5vw, 4rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-10);
  flex-wrap: wrap;
}
.cta-band__copy { max-width: 34rem; position: relative; z-index: 1; }
.cta-band__actions { position: relative; z-index: 1; display: flex; gap: var(--s-4); flex-wrap: wrap; }
.cta-band::after {
  content: "";
  position: absolute;
  right: -18%;
  top: -60%;
  width: 46%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245, 158, 11, 0.16), transparent 68%);
  pointer-events: none;
}


/* --- Store badges row --------------------------------------------------- */

.store-row { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; }
.store-row__note {
  font-size: 0.75rem;
  /* Default to the on-paper colour; the dark-ground override below wins
     wherever this sits on forest or ink (e.g. inside .cta-band). */
  color: var(--text-3);
  max-width: 20ch;
  line-height: 1.45;
}
.cta-band .store-row__note,
.ground-forest .store-row__note,
.ground-ink .store-row__note,
.card--dark .store-row__note,
.card--ink .store-row__note { color: var(--on-dark-3); }


/* --- Notice (placeholder / honest-label callout) ------------------------ */

.notice {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  border: 1px dashed var(--line-2);
  border-radius: var(--r-md);
  background: var(--paper-2);
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--text-2);
}
.notice svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 2px; color: var(--amber-2); }



/* 15. PROSE (legal pages) ================================================== */

.prose {
  max-width: 74ch;
  color: var(--text-2);
  font-size: 1rem;
  line-height: 1.75;
}
.prose > * + * { margin-top: var(--s-6); }
.prose h2 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-top: var(--s-12);
  padding-top: var(--s-6);
  border-top: 1px solid var(--line);
}
.prose h3 {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text);
  margin-top: var(--s-8);
}
.prose strong { color: var(--text); font-weight: 700; }
.prose ul, .prose ol { display: grid; gap: var(--s-3); padding-left: var(--s-6); }
.prose ul li { list-style: disc; }
.prose ol li { list-style: decimal; }
.prose li::marker { color: var(--forest); }
.prose a {
  color: var(--forest);
  font-weight: 600;
  border-bottom: 1px solid rgba(0, 68, 58, 0.3);
  transition: border-color var(--dur) var(--ease);
}
.prose a:hover { border-bottom-color: var(--forest); }
.prose code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: var(--paper-3);
  padding: 0.15em 0.4em;
  border-radius: var(--r-xs);
  color: var(--forest);
}

/* Callout box inside prose */
.callout {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--forest);
  border-radius: var(--r-md);
  padding: var(--s-6);
}

/* Centered status page (success, reset-password) */
.status-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--s-8) var(--gutter);
}
.status-card {
  width: 100%;
  max-width: 540px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: clamp(2rem, 5vw, 3rem);
  box-shadow: var(--shadow-lg);
  text-align: center;
}
.status-icon {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin: 0 auto var(--s-6);
}
.status-icon svg { width: 32px; height: 32px; }
.status-icon--ok  { background: var(--success-bg); color: var(--success); }
.status-icon--err { background: var(--danger-bg);  color: var(--danger); }
.status-icon--brand { background: rgba(0, 68, 58, 0.08); color: var(--forest); }

/* Auth card (reset-password, signup) */
.auth-card {
  width: 100%;
  max-width: 460px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: clamp(1.75rem, 4vw, 2.75rem);
  box-shadow: var(--shadow-lg);
}

/* Checkout summary rows */
.summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding-block: var(--s-4);
  border-bottom: 1px solid var(--line);
  font-size: 0.9375rem;
}
.summary-row:last-child { border-bottom: 0; }
.summary-row__label { color: var(--text-2); }
.summary-row__value { font-weight: 700; color: var(--text); }
.summary-row--total .summary-row__value {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--forest);
}


/* 16. MOTION =============================================================== */

/* Restrained reveals. No fade-up-and-zoom theater. */
/* --d is set inline per element to stagger a row: style="--d:120ms".
   It is intentionally not declared on :root — the 0ms fallback covers
   every element that does not set it. */
[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 620ms var(--ease) var(--d, 0ms),
    transform 620ms var(--ease) var(--d, 0ms);
  will-change: opacity, transform;
}
[data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* 17. UTILITIES ============================================================ */

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

.hidden { display: none !important; }
.mt-0 { margin-top: 0; }
.mt-4 { margin-top: var(--s-4); }
.mt-6 { margin-top: var(--s-6); }
.mt-8 { margin-top: var(--s-8); }
.mt-10 { margin-top: var(--s-10); }
.mt-12 { margin-top: var(--s-12); }
.mb-4 { margin-bottom: var(--s-4); }
.mb-6 { margin-bottom: var(--s-6); }
.mb-8 { margin-bottom: var(--s-8); }
.mb-10 { margin-bottom: var(--s-10); }
.mb-12 { margin-bottom: var(--s-12); }

.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-2 { gap: var(--s-2); }
.gap-3 { gap: var(--s-3); }
.gap-4 { gap: var(--s-4); }
.gap-6 { gap: var(--s-6); }
.gap-8 { gap: var(--s-8); }
.grow { flex: 1; }

.divider-dot {
  width: 3px; height: 3px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.4;
  flex-shrink: 0;
}


/* RESPONSIVE =============================================================== */

@media (max-width: 1024px) {
  .footer__top { grid-template-columns: 1fr 1fr; gap: var(--s-8); }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  :root { --gutter: 1.25rem; }

  .nav__links { display: none; }
  .nav__actions .btn { display: none; }
  .nav__toggle { display: inline-flex; }

  .grid--2, .grid--3 { grid-template-columns: 1fr; }
  .grid--sidebar, .grid--split, .grid--wide-left { grid-template-columns: 1fr; }
  .price-grid { grid-template-columns: 1fr; max-width: 440px; margin-inline: auto; }
  .plan--featured { transform: none; }

  .footer__top { grid-template-columns: 1fr; gap: var(--s-8); }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 640px) {
  :root { --gutter: 1.125rem; }

  .grid--4 { grid-template-columns: 1fr; }
  .bento { grid-template-columns: 1fr; }
  .bento__wide { grid-column: span 1; }

  .card { padding: var(--s-6); }
  .card--lg { padding: var(--s-6); }
  .plan { padding: var(--s-6); }

  .cluster > .btn { flex: 1 1 100%; }
  .store-badge img { height: 48px; }

  .btn--lg { padding: 0.875rem 1.5rem; font-size: 0.9375rem; }
}