/* ==========================================================================
   Triply - triply.africa
   --------------------------------------------------------------------------
   One stylesheet for the whole site. The tokens below are lifted from the
   app's own design system (lib/theme/tokens.dart and lib/theme/app_theme.dart)
   so the website and the product read as the same thing.

   Never write a raw colour, radius or spacing value in a page file. Add a
   token here instead - that single rule is what keeps this looking designed.

   Sections
     1. Tokens
     2. Reset and base
     3. Typography
     4. Layout
     5. Buttons and links
     6. Header and navigation
     7. Footer
     8. Components
     9. Page-specific blocks
    10. Prose (legal pages)
    11. Utility and motion
   ========================================================================== */


/* ==========================================================================
   1. Tokens
   ========================================================================== */

:root {
  /* -- brand ------------------------------------------------------------ */
  /* Deepened from the old #6C5CE7, which measured 4.86:1 on white. This is
     6.14:1, so brand text on a white card clears AA with headroom. */
  --brand:        #5B4BD6;
  --brand-hover:  #4C3EC0;
  --brand-press:  #402FB0;
  --brand-tint:   #F1EFFC;
  --brand-edge:   #DCD7F7;
  --on-brand:     #FFFFFF;

  /* -- surfaces --------------------------------------------------------- */
  --page:      #FAFAFA;
  --card:      #FFFFFF;
  --raised:    #FFFFFF;
  --recessed:  #F4F4F6;
  --hairline:  #E8E8EA;
  --ink-block: #111113;

  /* -- text ------------------------------------------------------------- */
  --text:    #111113;
  --text-2:  #6B6B70;
  --text-3:  #9A9AA0;
  --on-ink:    #F5F5F7;
  --on-ink-2:  #A6A6AE;

  /* -- status ----------------------------------------------------------- */
  --attention:      #F2A93B;
  --attention-tint: #FDF3E3;
  --error:          #DC3545;
  --error-tint:     #FBEAEC;
  --success:        #12805C;
  --success-tint:   #E6F3EF;

  /* -- radius ----------------------------------------------------------- */
  --r-sm:   8px;
  --r-md:  12px;
  --r-lg:  16px;
  --r-xl:  28px;
  --r-full: 999px;

  /* -- spacing ---------------------------------------------------------- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;

  /* -- elevation -------------------------------------------------------- */
  /* Three levels. Shadow encodes height and nothing else. */
  --e-1: 0 1px 2px rgba(17, 17, 19, 0.04),
         0 1px 3px rgba(17, 17, 19, 0.06);
  --e-2: 0 2px 4px rgba(17, 17, 19, 0.04),
         0 8px 20px rgba(17, 17, 19, 0.07);
  --e-3: 0 4px 8px rgba(17, 17, 19, 0.05),
         0 24px 48px rgba(17, 17, 19, 0.10);

  /* -- measure ---------------------------------------------------------- */
  --wrap:        1120px;
  --wrap-narrow:  720px;
  --header-h:      64px;

  /* -- type ------------------------------------------------------------- */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;

  color-scheme: light;
}

/* Dark is the app's dark theme, not an inverted light theme. Surfaces are
   near-black rather than navy, and the brand lightens to hold contrast. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --brand:        #B7ACFF;
    --brand-hover:  #C8C0FF;
    --brand-press:  #A296F5;
    --brand-tint:   #17151F;
    --brand-edge:   #322C52;
    --on-brand:     #14103A;

    --page:      #0B0B0C;
    --card:      #171719;
    --raised:    #1F1F22;
    --recessed:  #121214;
    --hairline:  #2A2A2E;
    --ink-block: #000000;

    --text:    #F5F5F7;
    --text-2:  #9A9AA2;
    --text-3:  #6B6B74;
    --on-ink:    #F5F5F7;
    --on-ink-2:  #9A9AA2;

    --attention-tint: #241C10;
    --error-tint:     #2A1315;
    --success-tint:   #0D1F1A;

    --e-1: 0 1px 2px rgba(0, 0, 0, 0.40),
           0 1px 3px rgba(0, 0, 0, 0.32);
    --e-2: 0 2px 4px rgba(0, 0, 0, 0.36),
           0 8px 20px rgba(0, 0, 0, 0.40);
    --e-3: 0 4px 8px rgba(0, 0, 0, 0.40),
           0 24px 48px rgba(0, 0, 0, 0.52);

    color-scheme: dark;
  }
}

/* The toggle wins over the system setting in both directions. */
:root[data-theme="dark"] {
  --brand:        #B7ACFF;
  --brand-hover:  #C8C0FF;
  --brand-press:  #A296F5;
  --brand-tint:   #17151F;
  --brand-edge:   #322C52;
  --on-brand:     #14103A;

  --page:      #0B0B0C;
  --card:      #171719;
  --raised:    #1F1F22;
  --recessed:  #121214;
  --hairline:  #2A2A2E;
  --ink-block: #000000;

  --text:    #F5F5F7;
  --text-2:  #9A9AA2;
  --text-3:  #6B6B74;
  --on-ink:    #F5F5F7;
  --on-ink-2:  #9A9AA2;

  --attention-tint: #241C10;
  --error-tint:     #2A1315;
  --success-tint:   #0D1F1A;

  --e-1: 0 1px 2px rgba(0, 0, 0, 0.40),
         0 1px 3px rgba(0, 0, 0, 0.32);
  --e-2: 0 2px 4px rgba(0, 0, 0, 0.36),
         0 8px 20px rgba(0, 0, 0, 0.40);
  --e-3: 0 4px 8px rgba(0, 0, 0, 0.40),
         0 24px 48px rgba(0, 0, 0, 0.52);

  color-scheme: dark;
}


/* ==========================================================================
   2. Reset and base
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--s-5));
}

body {
  margin: 0;
  background: var(--page);
  color: var(--text);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

hr {
  border: 0;
  border-top: 1px solid var(--hairline);
  margin: var(--s-7) 0;
}

::selection { background: var(--brand); color: var(--on-brand); }

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


/* ==========================================================================
   3. Typography
   ========================================================================== */

h1, h2, h3, h4 {
  margin: 0 0 var(--s-4);
  line-height: 1.15;
  letter-spacing: -0.021em;
  font-weight: 680;
  text-wrap: balance;
}

.display {
  font-size: clamp(2.15rem, 1.45rem + 3.1vw, 3.35rem);
  line-height: 1.05;
  letter-spacing: -0.032em;
  font-weight: 720;
}

h1 { font-size: clamp(2rem, 1.35rem + 2.7vw, 3rem); letter-spacing: -0.028em; }
h2 { font-size: clamp(1.6rem, 1.2rem + 1.7vw, 2.3rem); letter-spacing: -0.026em; }
h3 { font-size: 1.2rem; letter-spacing: -0.018em; font-weight: 660; }
h4 { font-size: 1.0625rem; font-weight: 640; }

p { margin: 0 0 var(--s-4); }
p:last-child { margin-bottom: 0; }

.lede {
  font-size: clamp(1.09rem, 1.02rem + 0.35vw, 1.28rem);
  line-height: 1.6;
  color: var(--text-2);
  max-width: 62ch;
  text-wrap: pretty;
}

.eyebrow {
  display: inline-block;
  margin: 0 0 var(--s-3);
  font-size: 0.78rem;
  font-weight: 640;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--brand);
}

.muted    { color: var(--text-2); }
.quiet    { color: var(--text-3); }
.small    { font-size: 0.9375rem; }
.smaller  { font-size: 0.875rem; }
.center   { text-align: center; }

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

strong, b { font-weight: 640; }


/* ==========================================================================
   4. Layout
   ========================================================================== */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--s-5);
}

.wrap--narrow { max-width: var(--wrap-narrow); }
.wrap--mid    { max-width: 900px; }

.section        { padding-block: clamp(var(--s-7), 6vw, var(--s-9)); }
.section--tight { padding-block: clamp(var(--s-6), 4vw, var(--s-7)); }

.section--recessed { background: var(--recessed); }
.section--tinted   { background: var(--brand-tint); }

/* An inverted section is a dark SCOPE, not a dark background.
   Redefining the tokens here rather than overriding a handful of rules is
   what makes it correct: anything nested inside that reads var(--text),
   var(--card) or var(--success) - the tick lists, the sample export table,
   a button - picks up the dark values automatically. The first version set
   only `color`, and every rule that named var(--text) explicitly rendered
   near-black on near-black. */
.section--ink {
  --brand:     #B7ACFF;
  --on-brand:  #14103A;
  --brand-tint: rgba(183, 172, 255, 0.12);
  --brand-edge: rgba(183, 172, 255, 0.30);

  --text:    var(--on-ink);
  --text-2:  var(--on-ink-2);
  --text-3:  #8A8A94;

  --card:     rgba(255, 255, 255, 0.04);
  --raised:   rgba(255, 255, 255, 0.07);
  --recessed: rgba(255, 255, 255, 0.05);
  --hairline: rgba(255, 255, 255, 0.11);

  --success:      #4ECFA6;
  --success-tint: rgba(78, 207, 166, 0.14);
  --attention:      #F5BC63;
  --attention-tint: rgba(245, 188, 99, 0.14);
  --error:      #FF7A85;
  --error-tint: rgba(255, 122, 133, 0.14);

  background: var(--ink-block);
  color: var(--on-ink);
  color-scheme: dark;
}

.section-head { max-width: 64ch; margin-bottom: var(--s-7); }
.section-head.center { margin-inline: auto; }

.grid { display: grid; gap: var(--s-5); }
.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)); }

@media (max-width: 900px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); }
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(var(--s-6), 5vw, var(--s-8));
  align-items: center;
}
@media (max-width: 860px) {
  .split { grid-template-columns: minmax(0, 1fr); }
  .split--flip > *:first-child { order: 2; }
}

.stack > * + * { margin-top: var(--s-4); }
.stack-lg > * + * { margin-top: var(--s-5); }

.row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: center;
}
.row--center { justify-content: center; }


/* ==========================================================================
   5. Buttons and links
   ========================================================================== */

a {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--brand) 38%, transparent);
  transition: text-decoration-color 120ms ease, color 120ms ease;
}
a:hover { text-decoration-color: currentColor; }

.btn {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  --btn-bd: var(--hairline);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 12px 22px;
  min-height: 46px;
  border: 1px solid var(--btn-bd);
  border-radius: var(--r-full);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font: inherit;
  font-size: 0.98rem;
  font-weight: 620;
  letter-spacing: -0.008em;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 130ms ease, border-color 130ms ease,
              color 130ms ease, transform 130ms ease, box-shadow 130ms ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  --btn-bg: var(--brand);
  --btn-fg: var(--on-brand);
  --btn-bd: var(--brand);
  box-shadow: var(--e-1);
}
.btn--primary:hover {
  --btn-bg: var(--brand-hover);
  --btn-bd: var(--brand-hover);
  box-shadow: var(--e-2);
}
.btn--primary:active { --btn-bg: var(--brand-press); --btn-bd: var(--brand-press); }

.btn--secondary { --btn-bg: var(--card); box-shadow: var(--e-1); }
.btn--secondary:hover { --btn-bd: var(--text-3); }

.btn--ghost { --btn-bd: transparent; --btn-fg: var(--text-2); }
.btn--ghost:hover { --btn-fg: var(--text); --btn-bg: var(--recessed); }

/* Irreversible actions only - currently just account deletion. */
.btn--danger {
  --btn-bg: var(--error);
  --btn-fg: #FFFFFF;
  --btn-bd: var(--error);
}
.btn--danger:hover { --btn-bg: #C22C3B; --btn-bd: #C22C3B; }

.btn--lg { padding: 15px 30px; min-height: 54px; font-size: 1.03rem; }
.btn--sm { padding: 8px 16px; min-height: 38px; font-size: 0.9rem; }
.btn--block { width: 100%; }

.section--ink .btn--secondary {
  --btn-bg: transparent;
  --btn-fg: var(--on-ink);
  --btn-bd: rgba(255, 255, 255, 0.22);
}
.section--ink .btn--secondary:hover { --btn-bd: rgba(255, 255, 255, 0.45); }

.btn .icon { flex: none; }

/* A text link that behaves like a call to action */
.link-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 620;
  text-decoration: none;
}
.link-cta .icon { transition: transform 140ms ease; }
.link-cta:hover .icon { transform: translateX(3px); }


/* ==========================================================================
   6. Header and navigation
   ========================================================================== */

.skip-link {
  position: absolute;
  left: var(--s-4);
  top: -100px;
  z-index: 100;
  padding: 10px 18px;
  border-radius: var(--r-md);
  background: var(--brand);
  color: var(--on-brand);
  text-decoration: none;
  font-weight: 620;
}
.skip-link:focus { top: var(--s-3); }

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: color-mix(in srgb, var(--page) 82%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 160ms ease, background-color 160ms ease;
}
.site-header.is-stuck {
  border-bottom-color: var(--hairline);
  background: color-mix(in srgb, var(--page) 92%, transparent);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  min-height: var(--header-h);
}

/* -- logo -------------------------------------------------------------- */

.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.028em;
  flex: none;
}
.logo__mark {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  flex: none;
  background: var(--brand);
  display: grid;
  place-items: center;
}
.logo__mark svg { width: 22px; height: auto; }
.logo:hover { color: var(--text); }

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

.nav {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  margin-left: auto;
}

.nav__link {
  padding: 8px 14px;
  border-radius: var(--r-sm);
  color: var(--text-2);
  text-decoration: none;
  font-size: 0.96rem;
  font-weight: 560;
  transition: color 120ms ease, background-color 120ms ease;
}
.nav__link:hover { color: var(--text); background: var(--recessed); }
.nav__link[aria-current="page"] { color: var(--text); font-weight: 640; }

.nav__actions {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-left: var(--s-3);
  padding-left: var(--s-3);
  border-left: 1px solid var(--hairline);
}

/* -- theme toggle ------------------------------------------------------ */

.theme-toggle {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--hairline);
  border-radius: var(--r-full);
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease, background-color 120ms ease;
}
.theme-toggle:hover { color: var(--text); background: var(--recessed); }
.theme-toggle svg { width: 17px; height: 17px; }
.theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun  { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sun  { display: none; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: block; }
}

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

.nav-toggle {
  display: none;
  width: 42px;
  height: 42px;
  margin-left: auto;
  place-items: center;
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  background: transparent;
  color: var(--text);
  cursor: pointer;
}
.nav-toggle svg { width: 20px; height: 20px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-menu  { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

@media (max-width: 840px) {
  .nav-toggle { display: grid; }

  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: var(--s-1);
    margin: 0;
    padding: var(--s-4) var(--s-5) var(--s-6);
    background: var(--page);
    border-bottom: 1px solid var(--hairline);
    box-shadow: var(--e-2);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 160ms ease, transform 160ms ease, visibility 160ms;
  }
  .nav.is-open { transform: translateY(0); opacity: 1; visibility: visible; }

  .nav__link { padding: 12px var(--s-3); font-size: 1.05rem; }

  .nav__actions {
    margin: var(--s-3) 0 0;
    padding: var(--s-4) 0 0;
    border-left: 0;
    border-top: 1px solid var(--hairline);
    justify-content: space-between;
  }
  .nav__actions .btn { flex: 1; }
}


/* ==========================================================================
   7. Footer
   ========================================================================== */

.site-footer {
  border-top: 1px solid var(--hairline);
  background: var(--recessed);
  padding-block: var(--s-8) var(--s-6);
  font-size: 0.9375rem;
}

.site-footer__top {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr));
  gap: var(--s-6) var(--s-5);
  padding-bottom: var(--s-7);
}
@media (max-width: 860px) {
  .site-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .site-footer__top { grid-template-columns: minmax(0, 1fr); }
}

.site-footer__brand .logo { margin-bottom: var(--s-3); }
.site-footer__brand p { color: var(--text-2); max-width: 34ch; }

.footer-col h4 {
  margin-bottom: var(--s-3);
  font-size: 0.8rem;
  font-weight: 640;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li + li { margin-top: 10px; }
.footer-col a {
  color: var(--text-2);
  text-decoration: none;
}
.footer-col a:hover { color: var(--text); text-decoration: underline; }

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-5);
  align-items: center;
  justify-content: space-between;
  padding-top: var(--s-5);
  border-top: 1px solid var(--hairline);
  color: var(--text-3);
  font-size: 0.875rem;
}

.disclaimer {
  margin-top: var(--s-5);
  padding: var(--s-4);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  background: var(--card);
  color: var(--text-3);
  font-size: 0.84rem;
  line-height: 1.6;
}


/* ==========================================================================
   8. Components
   ========================================================================== */

/* -- card -------------------------------------------------------------- */

.card {
  padding: var(--s-5);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  background: var(--card);
}
.card--raised { box-shadow: var(--e-1); }
.card--pad-lg { padding: var(--s-6); }
.card > h3 { margin-bottom: var(--s-2); }

/* -- feature tile ------------------------------------------------------ */

.tile {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-5);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  background: var(--card);
  transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.tile:hover {
  border-color: var(--brand-edge);
  transform: translateY(-2px);
  box-shadow: var(--e-2);
}
.tile h3 { margin: 0; }
.tile p  { margin: 0; color: var(--text-2); font-size: 0.9688rem; }

.tile__icon {
  width: 40px;
  height: 40px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  background: var(--brand-tint);
  color: var(--brand);
}
.tile__icon svg { width: 21px; height: 21px; }

.tile__tag {
  align-self: flex-start;
  margin-top: auto;
  padding: 3px 10px;
  border-radius: var(--r-full);
  font-size: 0.75rem;
  font-weight: 640;
  letter-spacing: 0.02em;
}
.tag--premium { background: var(--brand-tint); color: var(--brand); }
.tag--free    { background: var(--success-tint); color: var(--success); }

/* -- pill / badge ------------------------------------------------------ */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px 6px 10px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-full);
  background: var(--card);
  color: var(--text-2);
  font-size: 0.85rem;
  font-weight: 560;
  text-decoration: none;
}
.pill__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--attention);
  flex: none;
}
.pill--live .pill__dot { background: var(--success); }

/* -- tick list --------------------------------------------------------- */

.ticks { list-style: none; margin: 0; padding: 0; }
.ticks li {
  position: relative;
  padding-left: 30px;
  margin-bottom: var(--s-3);
  color: var(--text-2);
}
.ticks li:last-child { margin-bottom: 0; }
.ticks li strong { color: var(--text); font-weight: 620; }
.ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--success-tint) no-repeat center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%2312805C' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
:root[data-theme="dark"] .ticks li::before,
.section--ink .ticks li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%234ECFA6' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ticks li::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%234ECFA6' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  }
}

.ticks--tight li { margin-bottom: var(--s-2); font-size: 0.9688rem; }

/* A crossed-out entry, for "not in the free plan" */
.ticks li.no::before {
  background-color: var(--recessed);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%239A9AA0' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E");
}
.ticks li.no { color: var(--text-3); }
.ticks li.no strong { color: var(--text-3); font-weight: 560; }

/* -- numbered steps ---------------------------------------------------- */

.steps {
  counter-reset: step;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s-5);
}
.steps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 800px) { .steps--3 { grid-template-columns: minmax(0, 1fr); } }

.steps li {
  counter-increment: step;
  padding-top: var(--s-4);
  border-top: 2px solid var(--brand);
}
.steps li h3 { margin-bottom: var(--s-2); }
.steps li p  { color: var(--text-2); margin: 0; }
.steps li::before {
  content: "0" counter(step);
  display: block;
  margin-bottom: var(--s-3);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--brand);
  font-variant-numeric: tabular-nums;
}

/* -- FAQ (details/summary) --------------------------------------------- */

.faq { border-top: 1px solid var(--hairline); }

.faq details { border-bottom: 1px solid var(--hairline); }

.faq summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-5) 0;
  cursor: pointer;
  list-style: none;
  font-size: 1.06rem;
  font-weight: 620;
  letter-spacing: -0.014em;
  color: var(--text);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 3px;
  background: no-repeat center / 20px 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6B70' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  transition: transform 180ms ease;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--brand); }
.faq__body {
  padding: 0 0 var(--s-5);
  max-width: 68ch;
  color: var(--text-2);
}
.faq__body > *:first-child { margin-top: 0; }

:root[data-theme="dark"] .faq summary::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239A9AA2' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .faq summary::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239A9AA2' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  }
}

/* -- callout ----------------------------------------------------------- */

.callout {
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--brand);
  border-radius: var(--r-md);
  background: var(--card);
  font-size: 0.9688rem;
}
.callout--warn    { border-left-color: var(--attention); background: var(--attention-tint); }
.callout--danger  { border-left-color: var(--error);     background: var(--error-tint); }
.callout--good    { border-left-color: var(--success);   background: var(--success-tint); }
.callout h4 { margin-bottom: var(--s-2); }
.callout p:last-child { margin-bottom: 0; }

/* -- phone frame (screenshot slot) ------------------------------------- */

.phone {
  position: relative;
  width: 100%;
  max-width: 300px;
  margin-inline: auto;
  aspect-ratio: 1080 / 2340;
  border-radius: 38px;
  padding: 9px;
  background: linear-gradient(160deg, #2C2C31, #101012 60%);
  box-shadow: var(--e-3), 0 0 0 1px rgba(0, 0, 0, 0.28),
              0 0 0 2px color-mix(in srgb, var(--hairline) 60%, transparent);
}
.phone__screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 30px;
  overflow: hidden;
  background: var(--recessed);
  display: grid;
  place-items: center;
}
/* The screenshot sits ON TOP of the placeholder rather than replacing it, so
   the placeholder is what shows until a real file exists. A missing file
   removes its own <img> (see the onerror in the markup) and the placeholder
   is revealed - which means adding screenshots to this site is a matter of
   uploading PNGs, with no HTML to edit. */
.phone__screen img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.phone::after {
  content: "";
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 74px;
  height: 20px;
  border-radius: var(--r-full);
  background: #0B0B0C;
  pointer-events: none;
}

/* The placeholder that shows until a real screenshot is dropped in. */
.shot-slot {
  padding: var(--s-5);
  text-align: center;
  color: var(--text-3);
  font-size: 0.8rem;
  line-height: 1.5;
  letter-spacing: 0.01em;
  background:
    repeating-linear-gradient(
      135deg,
      transparent 0 10px,
      color-mix(in srgb, var(--text-3) 8%, transparent) 10px 11px
    );
}
.shot-slot code {
  display: block;
  margin-top: var(--s-2);
  font-size: 0.7rem;
  color: var(--text-2);
  /* break-all put line breaks inside words. `anywhere` breaks only when a
     line genuinely will not fit, and prefers the slashes in the path. */
  word-break: normal;
  overflow-wrap: anywhere;
  hyphens: none;
}

.phone-cluster {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: var(--s-4);
}
.phone-cluster .phone { max-width: 236px; }
.phone-cluster .phone:nth-child(2) { max-width: 272px; margin-bottom: var(--s-6); }
@media (max-width: 760px) {
  .phone-cluster .phone:nth-child(1),
  .phone-cluster .phone:nth-child(3) { display: none; }
}

/* -- comparison table -------------------------------------------------- */

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.cmp {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 0.9688rem;
}
.cmp th, .cmp td {
  padding: 14px var(--s-4);
  border-bottom: 1px solid var(--hairline);
  text-align: left;
  vertical-align: top;
}
.cmp thead th {
  padding-top: 0;
  font-size: 0.8rem;
  font-weight: 640;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-3);
}
.cmp th[scope="row"] { font-weight: 560; color: var(--text); width: 46%; }
.cmp td { color: var(--text-2); text-align: center; width: 27%; }
.cmp thead th:not(:first-child) { text-align: center; }
.cmp tbody tr:last-child th,
.cmp tbody tr:last-child td { border-bottom: 0; }
.cmp .yes { color: var(--success); font-weight: 640; }
.cmp .no  { color: var(--text-3); }
.cmp caption {
  caption-side: top;
  text-align: left;
  padding-bottom: var(--s-4);
  color: var(--text-2);
  font-size: 0.9375rem;
}

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

.plans {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-5);
  align-items: stretch;
}
@media (max-width: 780px) { .plans { grid-template-columns: minmax(0, 1fr); } }

.plan {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-6);
  border: 1px solid var(--hairline);
  border-radius: var(--r-xl);
  background: var(--card);
}
.plan--featured {
  border-color: var(--brand);
  box-shadow: var(--e-2);
  position: relative;
}
.plan--featured::before {
  content: attr(data-badge);
  position: absolute;
  top: -12px;
  left: var(--s-6);
  padding: 4px 12px;
  border-radius: var(--r-full);
  background: var(--brand);
  color: var(--on-brand);
  font-size: 0.72rem;
  font-weight: 680;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.plan__name { margin: 0; font-size: 1.05rem; }
.plan__price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: clamp(2.2rem, 1.8rem + 1.6vw, 2.9rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
}
.plan__price .per {
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--text-2);
}
.plan__note { margin: 0; color: var(--text-2); font-size: 0.9375rem; }
.plan .ticks { margin-top: var(--s-2); }
.plan .btn { margin-top: auto; }

/* -- stat strip -------------------------------------------------------- */

.stat { text-align: center; }
.stat__value {
  display: block;
  font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.6rem);
  font-weight: 660;
  letter-spacing: -0.024em;
  line-height: 1.2;
  color: var(--brand);
  font-variant-numeric: tabular-nums;
}
.stat__label {
  display: block;
  margin-top: 6px;
  color: var(--text-2);
  font-size: 0.9375rem;
}

/* -- beta box ---------------------------------------------------------- */

.beta-box {
  padding: clamp(var(--s-5), 4vw, var(--s-6));
  border: 1px solid var(--brand-edge);
  border-radius: var(--r-xl);
  background: var(--brand-tint);
}


/* ==========================================================================
   9. Page-specific blocks
   ========================================================================== */

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

.hero {
  position: relative;
  padding-block: clamp(var(--s-7), 6vw, var(--s-9));
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: -35% 20% auto -10%;
  height: 70vh;
  background:
    radial-gradient(closest-side, color-mix(in srgb, var(--brand) 13%, transparent), transparent);
  pointer-events: none;
  z-index: 0;
}
.hero > * { position: relative; z-index: 1; }
.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(var(--s-6), 5vw, var(--s-8));
  align-items: center;
}
@media (max-width: 900px) {
  .hero__inner { grid-template-columns: minmax(0, 1fr); }
  .hero__art { order: 2; }
}
.hero h1 { margin-bottom: var(--s-5); }
.hero .lede { margin-bottom: var(--s-6); }
.hero__actions { margin-bottom: var(--s-5); }

@media (max-width: 560px) {
  /* Stacked buttons of different widths read as an accident rather than a
     pair, so below this width they match. */
  .hero__actions .btn,
  .cta-band .row .btn,
  .beta-box .row .btn { width: 100%; }

  /* A full-height device frame is most of a screen of scrolling for a
     placeholder. Keep it present but modest. */
  .phone { max-width: 232px; }
}
.hero__meta { color: var(--text-3); font-size: 0.875rem; max-width: 48ch; }

/* -- page header (interior pages) -------------------------------------- */

.page-head {
  padding-block: clamp(var(--s-7), 5vw, var(--s-8)) var(--s-6);
  border-bottom: 1px solid var(--hairline);
}
.page-head h1 { margin-bottom: var(--s-4); }
.page-head .lede { margin-bottom: 0; }

.breadcrumb {
  margin-bottom: var(--s-4);
  font-size: 0.875rem;
  color: var(--text-3);
}
.breadcrumb a { color: var(--text-2); text-decoration: none; }
.breadcrumb a:hover { color: var(--brand); }
.breadcrumb span { margin-inline: 6px; }

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

.cta-band { text-align: center; }
.cta-band h2 { margin-bottom: var(--s-4); }
.cta-band .lede { margin: 0 auto var(--s-6); }

/* -- status / auth pages ----------------------------------------------- */

.auth-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}
/* Two shapes end up here.
   404.html wraps its card:            <main><div class="wrap"><div class="auth-card">
   confirm-email and reset-password
   lift their markup verbatim, where
   <main> IS the card:                 <main class="auth-card">
   The first centres its contents; the second centres itself. */
.auth-page > main:not(.auth-card) {
  flex: 1;
  display: grid;
  place-items: center;
  padding-block: var(--s-7);
}

.auth-page > main.auth-card {
  margin: var(--s-7) auto;
  max-width: min(580px, calc(100% - var(--s-5) * 2));
}

/* The card does not flex to fill, so without this the footer floats in the
   middle of a tall window with blank page beneath it. */
.auth-page > .site-footer { margin-top: auto; }

.auth-card {
  width: 100%;
  max-width: 580px;
  padding: clamp(var(--s-5), 4vw, var(--s-7));
  border: 1px solid var(--hairline);
  border-radius: var(--r-xl);
  background: var(--card);
  box-shadow: var(--e-2);
}
.auth-card h1 { font-size: clamp(1.5rem, 1.2rem + 1.3vw, 1.95rem); }
.auth-card > p { color: var(--text-2); }
.auth-card .callout { margin-bottom: var(--s-5); }
.auth-card > p strong,
.auth-card > p em { color: var(--text); }

.mark {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  margin-bottom: var(--s-5);
  border-radius: var(--r-full);
  background: var(--success-tint);
  color: var(--success);
}
.mark svg { width: 26px; height: 26px; }
.mark--warn   { background: var(--attention-tint); color: var(--attention); }
.mark--danger { background: var(--error-tint);     color: var(--error); }
.mark--brand  { background: var(--brand-tint);     color: var(--brand); }

.next {
  margin: var(--s-5) 0;
  padding: var(--s-4) var(--s-5);
  border-radius: var(--r-md);
  background: var(--recessed);
  border: 1px solid var(--hairline);
}
.next strong { display: block; margin-bottom: var(--s-2); color: var(--text); }
.next ol, .next ul { margin: 0; padding-left: 20px; }
.next li { margin: 6px 0; color: var(--text-2); }

.auth-foot {
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--hairline);
  color: var(--text-3);
  font-size: 0.875rem;
}
.auth-foot a { color: var(--text-2); }

/* -- forms ------------------------------------------------------------- */

.field { margin-bottom: var(--s-4); }
.field label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.9375rem;
  font-weight: 600;
}
.field .hint { margin: 6px 0 0; color: var(--text-3); font-size: 0.85rem; }

input[type="email"],
input[type="text"],
input[type="password"],
textarea,
select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  background: var(--recessed);
  color: var(--text);
  font: inherit;
  font-size: 1rem;
  transition: border-color 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
}
input::placeholder, textarea::placeholder { color: var(--text-3); }
input:focus, textarea:focus, select:focus {
  outline: none;
  background: var(--card);
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent);
}
input:disabled, button:disabled, .btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.form-status { margin-top: var(--s-3); font-size: 0.9375rem; }
.form-status--ok    { color: var(--success); }
.form-status--error { color: var(--error); }

/* The deletion page's own status line. It is set with `node.className =
   "status error"`, which wipes any other class on the element, so `.status`
   has to stand alone rather than modify something else. */
.status { margin-top: var(--s-3); font-size: 0.9375rem; color: var(--text-2); }
.status.ok    { color: var(--success); font-weight: 600; }
.status.error { color: var(--error); font-weight: 600; }

/* The deletion form's labels sit above their inputs and are lifted from the
   original page, so they are plain <label> rather than .field > label. */
.prose label {
  display: block;
  margin: var(--s-4) 0 6px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text);
}
.prose input + .btn,
.prose input + button { margin-top: var(--s-3); }
.prose .btn + .btn { margin-top: var(--s-2); }

/* -- spinner ----------------------------------------------------------- */

.spinner {
  width: 22px;
  height: 22px;
  border: 2.5px solid color-mix(in srgb, var(--brand) 25%, transparent);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: spin 700ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }


/* ==========================================================================
   10. Prose (legal pages)
   ========================================================================== */

.prose {
  max-width: 70ch;
  color: var(--text-2);
}
.prose > *:first-child { margin-top: 0; }

.prose h2 {
  margin: var(--s-8) 0 var(--s-4);
  padding-top: var(--s-5);
  border-top: 1px solid var(--hairline);
  font-size: 1.45rem;
  color: var(--text);
}
.prose h2:first-of-type { margin-top: var(--s-6); }
.prose h3 {
  margin: var(--s-6) 0 var(--s-3);
  font-size: 1.09rem;
  color: var(--text);
}
.prose h4 { margin: var(--s-5) 0 var(--s-2); color: var(--text); }
.prose p  { margin: 0 0 var(--s-4); }
.prose ul, .prose ol { margin: 0 0 var(--s-4); padding-left: 22px; }
.prose li { margin: var(--s-2) 0; }
.prose li > ul, .prose li > ol { margin-top: var(--s-2); }
.prose strong { color: var(--text); }
.prose code {
  padding: 2px 6px;
  border-radius: 5px;
  background: var(--recessed);
  border: 1px solid var(--hairline);
  font-size: 0.88em;
  word-break: break-word;
}
.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 var(--s-5);
  font-size: 0.9375rem;
}
.prose th, .prose td {
  padding: 10px var(--s-3);
  border: 1px solid var(--hairline);
  text-align: left;
  vertical-align: top;
}
.prose th { background: var(--recessed); color: var(--text); font-weight: 620; }
.prose .card > *:first-child { margin-top: 0; }
.prose .notice,
.prose .callout { margin: 0 0 var(--s-5); }

/* The contact callout sits outside .prose, as a sibling, so it needs its own
   gap - .prose zeroes the top margin of its own first child. */
.callout + .prose,
.callout + .toc { margin-top: var(--s-5); }

/* Anchor targets get a quiet highlight so a deep link is obvious */
.prose :target {
  scroll-margin-top: calc(var(--header-h) + var(--s-5));
  animation: target-flash 1.6s ease-out;
}
@keyframes target-flash {
  0%, 40% { background: color-mix(in srgb, var(--brand) 12%, transparent); }
  100%    { background: transparent; }
}

/* -- table of contents ------------------------------------------------- */

.toc {
  padding: var(--s-5);
  margin-bottom: var(--s-6);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  background: var(--card);
  font-size: 0.9375rem;
}
.toc strong {
  display: block;
  margin-bottom: var(--s-3);
  font-size: 0.78rem;
  font-weight: 640;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}
.toc ul {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 2;
  column-gap: var(--s-5);
}
@media (max-width: 620px) { .toc ul { columns: 1; } }
.toc li { margin: 0 0 9px; break-inside: avoid; }
.toc a { color: var(--text-2); text-decoration: none; }
.toc a:hover { color: var(--brand); text-decoration: underline; }

/* -- doc meta ---------------------------------------------------------- */

.doc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  margin-top: var(--s-4);
  color: var(--text-3);
  font-size: 0.875rem;
}


/* ==========================================================================
   11. Utility and motion
   ========================================================================== */

.hidden { display: none !important; }

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

.mt-0 { margin-top: 0 !important; }
.mt-4 { margin-top: var(--s-4) !important; }
.mt-5 { margin-top: var(--s-5) !important; }
.mt-6 { margin-top: var(--s-6) !important; }
.mb-0 { margin-bottom: 0 !important; }

.nowrap { white-space: nowrap; }

.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 520ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.is-visible { opacity: 1; transform: none; }

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

@media print {
  .site-header, .site-footer, .skip-link, .toc, .cta-band { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .prose { max-width: none; color: #000; }
  a { color: #000; text-decoration: underline; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #444; }
}