/* ============================================================
   Aurabill — aurabill.app
   One stylesheet. No JavaScript. No third-party requests.
   Tokens follow the Aurabill visual identity; the dark palette is
   derived from the app icon canvas (#060A1C), not mechanically inverted.
   ============================================================ */

/* ---- Typeface ------------------------------------------------
   The site loads no font from a third party — a fonts.googleapis.com
   request would contradict the page it renders. Today it uses the
   device's own UI face (SF Pro on Apple hardware, Segoe UI on Windows,
   Roboto on Android), with "Inter" honoured if the visitor has it.

   To self-host Inter later, drop a subset at
   assets/fonts/inter-var-latin.woff2 and uncomment this block. The
   subset must include U+2248 (≈) and U+00B7 (·) — both are load-bearing
   on this site.

   @font-face {
     font-family: "Inter var";
     src: url("/assets/fonts/inter-var-latin.woff2") format("woff2");
     font-weight: 400 700;
     font-style: normal;
     font-display: swap;
   }
------------------------------------------------------------- */

:root {
  color-scheme: light;

  /* ---- Neutrals ------------------------------------------- */
  --c-bg:            #FFFFFF;
  --c-bg-subtle:     #F4F5F7;
  --c-bg-sunken:     #EDEFF3;
  --c-surface:       #FFFFFF;
  --c-surface-2:     #FAFBFC;
  --c-band:          #060A1C;   /* the icon canvas. One band per site. */

  --c-ink:           #111217;
  --c-ink-2:         #3A3F47;
  --c-muted:         #6B6F76;   /* safe on #FFFFFF and #F4F5F7 only */
  --c-muted-strong:  #5E636B;   /* use on #EDEFF3 and tints */
  --c-inverse:       #FFFFFF;
  --c-inverse-2:     #C6CAD4;
  --c-inverse-muted: #979DAA;

  --c-border:        #E6E8EC;   /* dividers only */
  --c-border-strong: #D3D7DE;

  /* ---- Aurora ---------------------------------------------- */
  --a-blue:   #7A8CFF;
  --a-violet: #A78BFA;
  --a-rose:   #E58FB8;
  --a-peach:  #FFB67A;
  --a-cream:  #FFE1C8;

  /* Aurora derivatives that are safe as text/UI colour */
  --c-accent:        #4A5BD6;   /* 5.59 : white */
  --c-accent-strong: #3B49BE;   /* 7.29 : white */
  --c-accent-tint:   #EEF0FF;
  --c-amber:         #A4550E;   /* 5.41 : white */
  --c-amber-tint:    #FFF4E8;
  --c-focus:         #4A5BD6;

  /* ---- Sanctioned gradients -------------------------------- */
  --aurora-line: linear-gradient(90deg,
      var(--a-blue) 0%, var(--a-violet) 42%,
      var(--a-rose) 66%, var(--a-peach) 82%, var(--a-cream) 100%);
  --aurora-text: linear-gradient(96deg,
      #5B6BEE 0%, #8A63E0 44%, #C06A9E 70%, #C2703A 100%);
  --aurora-glow: radial-gradient(50% 50% at 42% 44%,
      rgba(122,140,255,.55) 0%, rgba(167,139,250,.40) 38%,
      rgba(255,182,122,.22) 70%, rgba(255,225,200,0) 100%);
  --aurora-halo: radial-gradient(50% 50% at 50% 46%,
      rgba(154,124,255,.55) 0%, rgba(101,120,255,.30) 40%,
      rgba(255,168,120,.14) 70%, rgba(6,10,28,0) 100%);

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

  --fs-display: clamp(2.5rem, 1.35rem + 4.0vw, 4.25rem);
  --fs-h1:      clamp(2rem, 1.44rem + 1.95vw, 2.875rem);
  --fs-h2:      clamp(1.6875rem, 1.41rem + 0.98vw, 2.25rem);
  --fs-h3:      clamp(1.125rem, 1.06rem + 0.24vw, 1.3125rem);
  --fs-lead:    clamp(1.0625rem, 0.98rem + 0.32vw, 1.3125rem);
  --fs-body:    clamp(1rem, 0.98rem + 0.09vw, 1.0625rem);
  --fs-small:   0.9375rem;
  --fs-caption: 0.8125rem;
  --fs-micro:   0.6875rem;

  --ls-display: -0.032em; --ls-h1: -0.026em; --ls-h2: -0.021em;
  --ls-h3: -0.014em;      --ls-body: -0.006em; --ls-over: 0.075em;

  /* ---- Space (canonical 8/16/24/40/64 + helpers) ------------ */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 40px; --s-7: 64px; --s-8: 96px;

  --sec-y:    clamp(56px, 7.2vw, 96px);
  --sec-y-lg: clamp(72px, 9.5vw, 128px);

  /* ---- Radii ------------------------------------------------ */
  --r-xs: 6px;  --r-sm: 10px; --r-md: 14px;
  --r-lg: 20px; --r-xl: 28px; --r-pill: 999px;

  /* ---- Layout ----------------------------------------------- */
  --w-page:  1200px;
  --w-text:  760px;
  --w-prose: 68ch;
  --gutter:  clamp(20px, 4.4vw, 40px);
  --col-gap: 24px;
  --nav-h:   64px;
  --scroll-offset: 96px;

  /* ---- Elevation -------------------------------------------- */
  --sh-xs: 0 1px 2px rgba(17,18,23,.06);
  --sh-sm: 0 1px 2px rgba(17,18,23,.05), 0 2px 6px -2px rgba(17,18,23,.08);
  --sh-md: 0 2px 4px rgba(17,18,23,.04), 0 8px 20px -6px rgba(17,18,23,.10);
  --sh-lg: 0 4px 8px rgba(17,18,23,.04), 0 18px 40px -12px rgba(17,18,23,.14);
  --sh-xl: 0 8px 16px rgba(17,18,23,.05), 0 32px 64px -20px rgba(17,18,23,.20);
  --sh-inset-top: inset 0 1px 0 rgba(255,255,255,0);

  /* ---- Motion ------------------------------------------------ */
  --dur-1: 120ms; --dur-2: 180ms; --dur-3: 260ms; --dur-amb: 26s;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-std: cubic-bezier(.4, 0, .2, 1);
  --ease-nudge: cubic-bezier(.34, 1.4, .64, 1);

  /* ---- Illustration surfaces -------------------------------- */
  --sf-bg:     var(--c-surface);
  --sf-line:   var(--c-border);
  --sf-bar:    #B4BAC5;
  --sf-shadow: var(--sh-xl);
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --c-bg:            #0B0D14;
    --c-bg-subtle:     #101320;
    --c-bg-sunken:     #070911;
    --c-surface:       #151824;
    --c-surface-2:     #1B1F2D;

    --c-ink:           #F2F3F7;
    --c-ink-2:         #C6CAD4;
    --c-muted:         #979DAA;
    --c-muted-strong:  #A2A8B4;

    --c-border:        #242835;
    --c-border-strong: #333949;

    --c-accent:        #9DA9FF;   /* 8.83 : --c-bg */
    --c-accent-strong: #BCC4FF;
    --c-accent-tint:   #1A1E38;
    --c-amber:         #FFC79A;
    --c-amber-tint:    #2B1F13;
    --c-focus:         #9DA9FF;

    --aurora-text: linear-gradient(96deg,
        #93A2FF 0%, #BFA0FF 42%, #FFA9C4 68%, #FFC79A 100%);
    --aurora-glow: radial-gradient(50% 50% at 42% 44%,
        rgba(122,140,255,.46) 0%, rgba(167,139,250,.32) 38%,
        rgba(255,182,122,.18) 70%, rgba(255,225,200,0) 100%);

    --sh-xs: 0 1px 2px rgba(0,0,0,.5);
    --sh-sm: 0 1px 2px rgba(0,0,0,.5), 0 2px 6px -2px rgba(0,0,0,.6);
    --sh-md: 0 2px 6px rgba(0,0,0,.5), 0 10px 24px -8px rgba(0,0,0,.66);
    --sh-lg: 0 4px 10px rgba(0,0,0,.5), 0 20px 44px -14px rgba(0,0,0,.72);
    --sh-xl: 0 8px 18px rgba(0,0,0,.5), 0 36px 72px -22px rgba(0,0,0,.78);
    --sh-inset-top: inset 0 1px 0 rgba(255,255,255,.055);

    --sf-bar: #394154;
  }
}

@media (prefers-contrast: more) {
  :root { --c-border: var(--c-border-strong); --c-muted: var(--c-ink-2); }
}

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

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

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-ink-2);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.65;
  letter-spacing: var(--ls-body);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 { color: var(--c-ink); margin: 0; text-wrap: balance; }
h1 { font-size: var(--fs-h1); font-weight: 700; line-height: 1.10; letter-spacing: var(--ls-h1); }
h2 { font-size: var(--fs-h2); font-weight: 700; line-height: 1.18; letter-spacing: var(--ls-h2); max-width: 24ch; }
h3 { font-size: var(--fs-h3); font-weight: 600; line-height: 1.32; letter-spacing: var(--ls-h3); }
p  { margin: 0 0 var(--s-4); max-width: 62ch; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--c-accent); }
a:hover { color: var(--c-accent-strong); }

img, svg { max-width: 100%; }
hr { border: 0; border-top: 1px solid var(--c-border); margin: var(--s-6) 0; }

:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}
.band :focus-visible { outline-color: #9DA9FF; }
.btn:focus-visible { outline-offset: 3px; border-radius: var(--r-pill); }

.skip {
  position: absolute; left: var(--gutter); top: -100px; z-index: 100;
  background: var(--c-ink); color: var(--c-inverse);
  padding: 12px 18px; border-radius: var(--r-sm); text-decoration: none;
  transition: top var(--dur-2) var(--ease-out);
}
.skip:focus { top: 12px; }
/* --c-inverse stays #FFFFFF in dark on purpose (the .band sits on #060A1C in
   both themes), so the skip link needs its own inversion or it renders white
   on near-white. Same pattern as .btn--primary and .chip--on. */
@media (prefers-color-scheme: dark) {
  .skip { background: #F2F3F7; color: #0B0D14; }
}

/* ---- Type helpers ------------------------------------------- */
.display {
  font-size: var(--fs-display); font-weight: 700; line-height: 1.04;
  letter-spacing: var(--ls-display); color: var(--c-ink);
  max-width: 17ch; margin: 0;
}
.lead {
  font-size: var(--fs-lead); line-height: 1.5; letter-spacing: -0.010em;
  color: var(--c-ink-2); max-width: 48ch;
}
.small   { font-size: var(--fs-small); line-height: 1.55; color: var(--c-muted); }
.caption { font-size: var(--fs-caption); line-height: 1.45; color: var(--c-muted); }
.over {
  font-size: var(--fs-micro); font-weight: 600; line-height: 1.2;
  letter-spacing: var(--ls-over); text-transform: uppercase;
  color: var(--c-muted); margin: 0 0 var(--s-3);
}

.aurora-text {
  color: var(--c-accent);
  background: var(--aurora-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-bottom: .08em; padding-right: .04em;
}
@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
  .aurora-text { background: none; -webkit-text-fill-color: currentColor; }
}

/* ============================================================
   Layout primitives
   ============================================================ */
.container { width: 100%; max-width: var(--w-page); margin-inline: auto; padding-inline: var(--gutter); }
.section    { padding-block: var(--sec-y); }
/* Anything a nav link or in-page anchor targets must clear the sticky bar. */
section[id], .faq[id], [id^="cmp"] { scroll-margin-top: var(--scroll-offset); }
.section-lg { padding-block: var(--sec-y-lg); }
.section--subtle { background: var(--c-bg-subtle); }
.section + .section--subtle, .section--subtle + .section { border-top: 1px solid var(--c-border); }
.section__head { max-width: var(--w-text); margin-bottom: var(--s-6); }
.section__head .lead { margin-top: var(--s-4); }
main { display: block; }

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 48px; padding: 0 var(--s-5);
  border-radius: var(--r-pill); border: 1px solid transparent;
  font-family: inherit; font-size: var(--fs-body); font-weight: 600; line-height: 1;
  letter-spacing: -0.008em; text-decoration: none; cursor: pointer;
  transition: background-color var(--dur-2) var(--ease-std),
              border-color var(--dur-2) var(--ease-std),
              color var(--dur-2) var(--ease-std),
              transform var(--dur-2) var(--ease-out),
              box-shadow var(--dur-2) var(--ease-out);
}
.btn:active { transform: translateY(1px); }
.btn .chev { width: 16px; height: 16px; flex: none; transition: transform var(--dur-2) var(--ease-nudge); }
.btn:hover .chev { transform: translateX(3px); }

.btn--primary { background: var(--c-ink); color: var(--c-inverse); box-shadow: var(--sh-sm); }
.btn--primary:hover { background: #24262E; color: var(--c-inverse); box-shadow: var(--sh-md); transform: translateY(-1px); }
@media (prefers-color-scheme: dark) {
  .btn--primary { background: #F2F3F7; color: #0B0D14; }
  .btn--primary:hover { background: #FFFFFF; color: #0B0D14; }
}

.btn--secondary { background: var(--c-bg-subtle); color: var(--c-ink); border-color: var(--c-border-strong); }
.btn--secondary:hover { background: var(--c-bg-sunken); border-color: #C2C7D0; color: var(--c-ink); }
@media (prefers-color-scheme: dark) {
  .btn--secondary { background: var(--c-surface); border-color: var(--c-border-strong); }
  .btn--secondary:hover { background: var(--c-surface-2); border-color: #414A5E; }
}

.btn--hero { min-height: 52px; padding: 0 28px; position: relative; isolation: isolate; }
.btn--hero::before {
  content: ""; position: absolute; inset: -8px; z-index: -1;
  border-radius: inherit; background: var(--aurora-line);
  filter: blur(18px); opacity: .40;
  transition: opacity var(--dur-3) var(--ease-out);
}
.btn--hero:hover::before { opacity: .62; }

/* ============================================================
   Site mark
   ============================================================ */
.mark { width: 28px; height: 28px; flex: none; display: block; border-radius: var(--r-sm); }

/* ============================================================
   Nav
   ============================================================ */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--c-bg);
  background: color-mix(in srgb, var(--c-bg) 86%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--c-border);
}
.nav__inner {
  min-height: var(--nav-h);
  display: flex; align-items: center; gap: var(--s-5);
  flex-wrap: wrap; padding-block: var(--s-2);
}
.nav__brand {
  display: inline-flex; align-items: center; gap: var(--s-2);
  text-decoration: none; color: var(--c-ink);
  font-size: 17px; font-weight: 700; letter-spacing: var(--ls-h3);
  padding-block: 6px;
}
.nav__links { display: flex; align-items: center; gap: var(--s-1); flex-wrap: wrap; margin-inline-start: auto; }
.nav__links a {
  font-size: 15px; font-weight: 500; color: var(--c-muted);
  text-decoration: none; padding: 10px 12px; border-radius: var(--r-xs);
  transition: color var(--dur-2) var(--ease-std);
}
.nav__links a:hover { color: var(--c-ink); }
.nav__links a[aria-current="page"] {
  color: var(--c-ink);
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px;
}
.nav__cta { margin-inline-start: var(--s-2); min-height: 40px; padding: 0 18px; font-size: 15px; }

/* 720-979px: keep one row, drop the CTA (brand + 6 links needs ~900px with it) */
@media (max-width: 979px) { .nav__cta { display: none; } }

@media (max-width: 719px) {
  .nav__inner { gap: var(--s-2); padding-block: var(--s-2) 0; }
  /* One scrollable row instead of two wrapped ones: at 390px a wrapped nav
     eats ~130px above the fold. No hamburger, because that needs JavaScript
     the CSP forbids. */
  .nav__links {
    width: 100%; margin-inline-start: 0; gap: 0;
    flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain;
    scrollbar-width: none; -ms-overflow-style: none;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent 100%);
    mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent 100%);
  }
  .nav__links::-webkit-scrollbar { display: none; }
  .nav__links a {
    font-size: 14.5px; padding: 12px 14px 12px 0; white-space: nowrap; flex: none;
  }
  .nav__links a:last-of-type { padding-right: 28px; }
}

/* ============================================================
   Hero
   ============================================================ */
.hero { padding-block: var(--sec-y-lg); overflow: clip; }
.hero__grid { display: grid; gap: var(--s-7); align-items: center; }
@media (min-width: 1024px) {
  .hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--s-8); }
}

.pill {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 30px; padding: 0 12px 0 10px; border-radius: var(--r-pill);
  background: var(--c-accent-tint); color: var(--c-accent);
  font-size: 12.5px; font-weight: 600; letter-spacing: 0;
  margin-bottom: var(--s-5);
}
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--aurora-line); flex: none; }

.hero .lead { margin-top: var(--s-4); }
.hero__cta { display: flex; gap: var(--s-3); flex-wrap: wrap; margin-top: var(--s-6); }
.hero__note { margin-top: var(--s-4); font-size: var(--fs-caption); color: var(--c-muted); max-width: 52ch; }
.proof { margin-top: var(--s-5); font-size: var(--fs-caption); color: var(--c-muted); max-width: none; }

.hero__art { position: relative; }
.hero__art::before {
  content: ""; position: absolute; z-index: 0;
  inset: -6% -22% 2% -18%;
  background: var(--aurora-glow); opacity: .85;
  pointer-events: none;
}
.hero__art > * { position: relative; z-index: 1; }

@media (min-width: 1024px) {
  .hero__art .surface--notify {
    position: absolute; top: -44px; right: -36px; z-index: 2;
    transform: rotate(-1.5deg); width: 340px;
  }
}
@media (max-width: 1023px) {
  .hero__art { max-width: 420px; margin-inline: auto; }
  .hero__art .surface--notify { margin-top: var(--s-5); }
}

/* ============================================================
   Surfaces (product depictions)
   ============================================================ */
.surface {
  font-size: 16px;
  background: var(--sf-bg);
  border: 1px solid var(--sf-line);
  border-radius: var(--r-lg);
  box-shadow: var(--sf-shadow), var(--sh-inset-top);
  overflow: hidden;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 400px) { .surface { font-size: 14px; } }

.surface__head {
  display: flex; align-items: center; justify-content: space-between;
  height: 56px; padding: 0 20px; border-bottom: 1px solid var(--sf-line);
}
.surface__title { font-size: .9375em; font-weight: 600; color: var(--c-ink); }
.surface__meta  { font-size: .78em; color: var(--c-muted); }

.chips { display: flex; gap: 8px; padding: 8px 20px; }
.chip {
  height: 28px; display: inline-flex; align-items: center; padding: 0 12px;
  border-radius: var(--r-pill); font-size: .78em; font-weight: 600;
  background: var(--c-bg-subtle); color: var(--c-muted);
}
.chip--on { background: var(--c-ink); color: var(--c-inverse); }
@media (prefers-color-scheme: dark) { .chip--on { background: #F2F3F7; color: #0B0D14; } }

.row {
  display: grid; grid-template-columns: 36px 1fr auto 14px;
  gap: 12px; align-items: center; padding: 12px 20px;
  border-top: 1px solid var(--sf-line);
}
.row:first-of-type { border-top: 0; }
.tile {
  width: 36px; height: 36px; border-radius: var(--r-sm);
  display: grid; place-items: center;
  font-size: .8em; font-weight: 700; letter-spacing: 0;
}
.row__name { display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
             font-size: .9em; font-weight: 600; color: var(--c-ink); line-height: 1.25; }
.row__sub  { display: block; font-size: .78em; color: var(--c-muted); margin-top: 3px; line-height: 1.25; }
.row__amt  { display: block; font-size: .9em; font-weight: 600; color: var(--c-ink); text-align: right; line-height: 1.25; white-space: nowrap; }
.row__amt--big { font-size: 1.06em; font-weight: 700; }
.row__when { display: block; font-size: .75em; color: var(--c-muted); text-align: right; margin-top: 3px; line-height: 1.25; white-space: nowrap; }
.row__chev { width: 14px; height: 14px; color: var(--c-border-strong); }

.badge {
  display: inline-flex; align-items: center; height: 18px; padding: 0 6px;
  border-radius: var(--r-xs); font-size: .625em; font-weight: 700;
  letter-spacing: var(--ls-over); text-transform: uppercase;
}
.badge--annual { background: var(--c-amber-tint); color: var(--c-amber); }
.badge--trial  { background: var(--c-accent-tint); color: var(--c-accent); }

/* Spend total card */
.surface--total { padding: 24px; }
.total__figure { font-size: 2.75em; font-weight: 700; line-height: 1; letter-spacing: var(--ls-display); color: var(--c-ink); font-variant-numeric: tabular-nums; }
.total__annual { font-size: .875em; font-weight: 500; color: var(--c-muted); margin-top: 8px; }
.segbar { display: flex; gap: 3px; height: 8px; margin-top: 20px; }
.segbar span { border-radius: var(--r-xs); }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; font-size: .78em; font-weight: 500; color: var(--c-muted); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.legend b { color: var(--c-ink); font-weight: 600; }
.total__foot { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--sf-line); font-size: .78em; color: var(--c-muted); }
.surface--total .over { margin-bottom: 10px; }
.surface--total p { max-width: none; }
/* Four segments, each separated by a 3px gap in the surface colour and each
   named in the legend, so hue is never the sole carrier of meaning. */
.segbar .seg-1, .legend .seg-1 { background: var(--a-blue); }
.segbar .seg-2, .legend .seg-2 { background: var(--a-violet); }
.segbar .seg-3, .legend .seg-3 { background: var(--a-peach); }
.segbar .seg-4, .legend .seg-4 { background: var(--c-border-strong); }
.segbar .seg-1 { flex: 40; }
.segbar .seg-2 { flex: 30; }
.segbar .seg-3 { flex: 15; }
.segbar .seg-4 { flex: 15; }
.totalfig { max-width: 380px; margin-inline: auto; }
@media (min-width: 900px) {
  .totalfig { max-width: none; display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: var(--s-6); align-items: center; }
  .totalfig figcaption { margin-top: 0; font-size: var(--fs-lead); line-height: 1.5; color: var(--c-ink-2); max-width: 38ch; }
}

/* Notification banner */
.surface--notify { padding: 14px 16px; border-radius: var(--r-lg); }
.notify { display: grid; grid-template-columns: 38px 1fr; column-gap: 12px; }
.notify__tile { width: 38px; height: 38px; border-radius: var(--r-sm); }
.notify__meta { display: flex; justify-content: space-between; font-size: .6875em; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--c-muted); }
.notify__title { font-size: .9375em; font-weight: 600; color: var(--c-ink); margin-top: 3px; line-height: 1.3; }
.notify__body { font-size: .84em; color: var(--c-muted); margin-top: 3px; line-height: 1.4; }
.notify__body strong { font-weight: 600; color: var(--c-ink); }

/* Calendar strip (SVG) */
.strip { width: 100%; height: auto; display: block; font-family: var(--font-sans); font-variant-numeric: tabular-nums; }
.strip text { text-anchor: middle; }
.s-price  { font-size: 16px;   font-weight: 700; fill: var(--c-ink); letter-spacing: -.02em; }
.s-month  { font-size: 11px;   font-weight: 500; fill: var(--c-muted); letter-spacing: .06em; }
.s-annual { font-size: 10.5px; font-weight: 600; fill: var(--c-amber); }
.strip .s-over { font-size: 11px; font-weight: 600; fill: var(--c-muted); letter-spacing: .075em; text-anchor: start; }
.strip .s-end  { text-anchor: end; }
/* The strip is a 720-unit viewBox scaled to fit. At 390px that is a factor of
   ~0.49, so an 11px label renders at ~5px. Hide alternate months and scale the
   type in user units so the rendered size stays legible. */
@media (max-width: 640px) {
  /* Scaling the type up is necessary but not sufficient: at 22 user units the
     long right-hand overline runs under the $180.00 label, and the "Amazon
     Prime - annual" sublabel runs under the month row. Both are secondary -
     the dashed divider still marks the 30-day boundary and the caption below
     states every figure in prose - so they drop rather than collide. */
  .strip .s-alt, .strip .s-end, .strip .s-annual { display: none; }
  .strip .s-month { font-size: 22px; }
  .strip .s-price { font-size: 30px; }
  .strip .s-over  { font-size: 20px; letter-spacing: .05em; }
}
/* Below ~400px the scale factor drops to ~0.39, so the months need another step
   up to stay above 10px rendered. Alternate months are already hidden, which
   leaves 104 user units per label - ample for a three-letter month at 26. */
@media (max-width: 400px) {
  .strip .s-month { font-size: 26px; }
  .strip .s-price { font-size: 34px; }
  .strip .s-over  { font-size: 23px; }
}

figure { margin: 0; }
figcaption { margin-top: var(--s-4); }

/* Monogram tiles — brand hue at low tint, label darkened past 4.5:1.
   Generic typography only; these never mimic a brand's own lettering. */
.tile--n  { background: #FBE3E5; color: #A5101B; }
.tile--s  { background: #DEF2E3; color: #10662F; }
.tile--ap { background: #DFEAF7; color: #10508C; }
.tile--ac { background: #FBE2E2; color: #A31418; }
.tile--h  { background: #DFF2E6; color: #0E6437; }
@media (prefers-color-scheme: dark) {
  .tile--n  { background: #2B1417; color: #FF9AA2; }
  .tile--s  { background: #10231A; color: #7BD9A0; }
  .tile--ap { background: #101D2E; color: #8CBEF0; }
  .tile--ac { background: #2B1416; color: #FF9C9F; }
  .tile--h  { background: #10241B; color: #78D9A5; }
}

/* Vertical rhythm utilities */
.mt-6 { margin-top: var(--s-6); }
.mt-7 { margin-top: var(--s-7); }
.mt-8 { margin-top: var(--s-8); }

/* ============================================================
   Cards & grids
   ============================================================ */
.cards { display: grid; gap: var(--s-5); }
@media (min-width: 720px)  { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  box-shadow: var(--sh-inset-top);
  transition: transform var(--dur-3) var(--ease-out),
              box-shadow var(--dur-3) var(--ease-out),
              border-color var(--dur-2) var(--ease-std);
}
.card:hover { transform: translateY(-2px); box-shadow: var(--sh-md), var(--sh-inset-top); border-color: var(--c-border-strong); }
.card__icon {
  width: 40px; height: 40px; border-radius: var(--r-sm);
  display: grid; place-items: center;
  background: var(--c-bg-subtle); color: var(--c-accent);
  margin-bottom: var(--s-4);
}
.card__icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.card h3 { margin-bottom: var(--s-2); }
.card .card__promise { font-size: var(--fs-small); font-style: italic; color: var(--c-accent); margin: 0 0 var(--s-3); max-width: none; }
.card p { font-size: var(--fs-small); line-height: 1.55; color: var(--c-muted); margin: 0; max-width: none; }

/* Steps */
.steps { display: grid; gap: var(--s-5); counter-reset: step; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); } }
.step { border-top: 2px solid var(--c-border); padding-top: var(--s-4); }
.step__n {
  counter-increment: step;
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: var(--ls-over);
  text-transform: uppercase; color: var(--c-accent); display: block; margin-bottom: var(--s-2);
}
.step__n::before { content: "Step " counter(step) " — "; }
.step h3 { margin-bottom: var(--s-3); }
.step p { font-size: var(--fs-small); color: var(--c-muted); }
.step__aside {
  margin-top: var(--s-4); padding: var(--s-4);
  background: var(--c-bg-subtle); border-radius: var(--r-md);
  font-size: var(--fs-small); color: var(--c-ink-2);
}
.step__aside p { color: inherit; margin-bottom: 0; }
.step__aside strong { color: var(--c-ink); }

/* Callout */
.callout {
  border: 1px solid var(--c-border); border-radius: var(--r-lg);
  padding: var(--s-5) var(--s-6); background: var(--c-surface);
  position: relative; overflow: hidden;
}
.callout::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--aurora-line); }
.callout h3 { margin-bottom: var(--s-3); }
.callout p { color: var(--c-ink-2); }

/* Notes list (non-goals) */
.notes { display: grid; gap: var(--s-4); list-style: none; padding: 0; margin: 0; }
@media (min-width: 800px) { .notes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4) var(--s-6); } }
.notes li { padding-left: var(--s-5); position: relative; font-size: var(--fs-small); color: var(--c-muted); line-height: 1.55; }
.notes li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 10px; height: 2px; border-radius: 1px; background: var(--c-border-strong);
}
.notes strong { color: var(--c-ink); font-weight: 600; display: block; margin-bottom: 2px; }

/* ============================================================
   Comparison table
   ============================================================ */
.tablewrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter);
}
.tablewrap:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.cmp { width: 100%; min-width: 820px; border-collapse: collapse; font-size: var(--fs-small); }
/* The disclaimer sits outside .tablewrap: inside it, the 820px min-width
   clipped the text on a phone. */
.cmp-note { margin-top: var(--s-4); max-width: 80ch; }
.cmp thead th {
  padding: var(--s-4) var(--s-5); vertical-align: bottom; text-align: left;
  font-weight: 600; font-size: var(--fs-caption); color: var(--c-muted);
  border-bottom: 1px solid var(--c-border-strong);
}
.cmp tbody th {
  min-width: 200px; padding: var(--s-4) var(--s-5) var(--s-4) 0;
  text-align: left; font-weight: 600; color: var(--c-ink); vertical-align: top;
}
/* Keep the row label in view while the table scrolls sideways. Off on the
   narrowest screens, where a sticky column would eat half the viewport. */
@media (min-width: 560px) {
  .cmp tbody th, .cmp thead td:first-child {
    position: sticky; left: 0; z-index: 1; background: var(--c-bg);
  }
}
.cmp td { padding: var(--s-4) var(--s-5); color: var(--c-ink-2); border-bottom: 1px solid var(--c-border); vertical-align: top; }
.cmp .col-ours { background: var(--c-bg-subtle); color: var(--c-ink); font-weight: 500; }
.cmp thead .col-ours { position: relative; color: var(--c-ink); font-weight: 700; font-size: var(--fs-small); border-radius: var(--r-md) var(--r-md) 0 0; }
.cmp thead .col-ours::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; border-radius: 2px 2px 0 0; background: var(--aurora-line); }
.cmp tbody tr:last-child .col-ours { border-radius: 0 0 var(--r-md) var(--r-md); }
.cmp .col-ours .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--c-accent); margin-right: 8px; vertical-align: middle; }

@media (min-width: 1024px) { .cmp { min-width: 0; } }

/* ============================================================
   Dark band (privacy) — the one place the icon's world appears
   ============================================================ */
.band {
  position: relative; isolation: isolate;
  background: var(--c-band); color: var(--c-inverse-2);
  overflow: clip;
}
.band::before {
  content: ""; position: absolute; z-index: -1;
  inset: -25% -10% auto -10%; height: 150%;
  background: var(--aurora-halo);
  animation: aurora-drift var(--dur-amb) var(--ease-std) infinite alternate;
}
@keyframes aurora-drift {
  from { transform: translate3d(-3%, -2%, 0) scale(1.00) rotate(-1.5deg); }
  to   { transform: translate3d( 4%,  3%, 0) scale(1.09) rotate( 1.5deg); }
}
.band h2, .band h3 { color: var(--c-inverse); }
.band .over { color: var(--c-inverse-muted); }
.band p { color: var(--c-inverse-2); }
.band a { color: #BCC4FF; }
.band a:hover { color: #FFFFFF; }
.band__grid { display: grid; gap: var(--s-6); }
@media (min-width: 900px) { .band__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-8); align-items: start; } }
.proofstrip { display: grid; gap: var(--s-3); list-style: none; padding: 0; margin: 0; }
.proofstrip li {
  display: flex; gap: var(--s-4); align-items: baseline;
  padding: var(--s-5) 0; border-top: 1px solid rgba(255,255,255,.10);
  font-size: var(--fs-small); color: var(--c-inverse-2);
}
.proofstrip li:first-child { border-top: 0; padding-top: 0; }
.proofstrip b {
  color: var(--c-inverse); font-weight: 700; font-size: 1.75rem; line-height: 1;
  font-variant-numeric: tabular-nums; letter-spacing: -0.03em; min-width: 1.6ch;
}

/* ============================================================
   Pricing
   ============================================================ */
.pricing { display: grid; gap: var(--s-5); align-items: start; }
@media (min-width: 880px) { .pricing { grid-template-columns: minmax(0, 1.14fr) minmax(0, .86fr); } }

.card--plus {
  border: 2px solid transparent; border-radius: var(--r-xl);
  background: linear-gradient(var(--c-surface), var(--c-surface)) padding-box,
              var(--aurora-line) border-box;
  padding: var(--s-6) var(--s-6) var(--s-5);
  box-shadow: var(--sh-lg);
}
.card--free { padding: var(--s-6); border-radius: var(--r-lg); }
/* .card:hover sets border-color and a smaller shadow; on .card--plus that
   paints over the border-box aurora gradient and downgrades --sh-lg. Same
   specificity, later in source, so these win. */
.card--plus:hover { transform: none; border-color: transparent; box-shadow: var(--sh-lg); }
.card--free:hover { transform: none; }

.price-badge {
  display: inline-flex; align-items: center; height: 24px; padding: 0 10px;
  border-radius: var(--r-xs); background: var(--c-accent-tint); color: var(--c-accent);
  font-size: 11px; font-weight: 700; letter-spacing: var(--ls-over); text-transform: uppercase;
  margin-bottom: var(--s-4);
}
/* Scoped under .card: the generic `.card p` rule is (0,1,1) and would
   otherwise flatten the whole pricing type scale to 15px muted. */
.card .price-name {
  font-size: var(--fs-h3); font-weight: 600; color: var(--c-ink);
  margin: 0 0 var(--s-3); max-width: none;
}
.card .price-main {
  font-size: 3rem; font-weight: 700; line-height: 1; letter-spacing: var(--ls-display);
  color: var(--c-ink); font-variant-numeric: tabular-nums;
  margin: 0; max-width: none;
}
.card .price-main span { font-size: 1.125rem; font-weight: 500; color: var(--c-muted); letter-spacing: 0; margin-left: 8px; }
.card .price-support {
  font-size: var(--fs-small); font-weight: 500; color: var(--c-ink-2);
  margin: var(--s-4) 0 0; max-width: 44ch;
}
.card .price-alt {
  font-size: 1.25rem; font-weight: 600; color: var(--c-ink-2);
  font-variant-numeric: tabular-nums; margin: 0; max-width: none;
}
.card .price-disclosure {
  font-size: var(--fs-caption); color: var(--c-muted);
  margin: var(--s-2) 0 0; max-width: 52ch;
}
.price-div { border: 0; border-top: 1px solid var(--c-border); margin: var(--s-5) 0; }

.featlist { list-style: none; padding: 0; margin: var(--s-5) 0 0; display: grid; gap: 10px; }
.featlist li { display: grid; grid-template-columns: 18px 1fr; gap: var(--s-2); font-size: var(--fs-small); color: var(--c-ink-2); line-height: 1.5; }
.featlist svg { width: 16px; height: 16px; margin-top: 3px; fill: none; stroke: var(--c-accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.card .price-foot { font-size: var(--fs-caption); color: var(--c-muted); margin: var(--s-5) 0 0; max-width: none; }

.irony { max-width: var(--w-text); margin-inline: auto; text-align: left; }
.irony h2 { margin-bottom: var(--s-4); }

.buildstate {
  border: 1px solid var(--c-border); border-left: 3px solid var(--c-amber);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  background: var(--c-bg-subtle); padding: var(--s-5);
  font-size: var(--fs-small); color: var(--c-ink-2);
  max-width: var(--w-text);
}
.buildstate strong { color: var(--c-ink); }
.buildstate p { max-width: none; color: inherit; font-size: inherit; }

/* ============================================================
   FAQ
   ============================================================ */
.faqlist { max-width: 860px; }
.faq { border-bottom: 1px solid var(--c-border); }
.faq > summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  min-height: 64px; padding-block: var(--s-5); cursor: pointer; list-style: none;
  font-size: var(--fs-h3); font-weight: 600; line-height: 1.35;
  letter-spacing: var(--ls-h3); color: var(--c-ink);
  transition: color var(--dur-2) var(--ease-std);
}
.faq > summary::-webkit-details-marker { display: none; }
.faq > summary:hover { color: var(--c-accent); }
.faq__mark {
  width: 24px; height: 24px; flex: none; fill: none;
  stroke: var(--c-muted); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
  transition: transform var(--dur-3) var(--ease-out), stroke var(--dur-2) var(--ease-std);
}
.faq[open] > summary .faq__mark { transform: rotate(180deg); stroke: var(--c-ink); }
.faq__body { padding-bottom: var(--s-5); }
.faq__body p { font-size: var(--fs-body); line-height: 1.65; color: var(--c-ink-2); max-width: 68ch; margin: 0 0 var(--s-3); }
.faq__body p:last-child { margin-bottom: 0; }

@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  .faq::details-content {
    block-size: 0; overflow: clip; opacity: 0;
    transition: block-size var(--dur-3) var(--ease-out),
                content-visibility var(--dur-3) allow-discrete,
                opacity var(--dur-2) var(--ease-std);
  }
  .faq[open]::details-content { block-size: auto; opacity: 1; }
}

/* ============================================================
   Footer
   ============================================================ */
.footer { background: var(--c-bg-subtle); border-top: 1px solid var(--c-border); padding: var(--s-7) 0 var(--s-6); }
.footer__grid { display: grid; gap: var(--s-6) var(--s-5); }
@media (min-width: 560px) { .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }
@media (min-width: 560px) and (max-width: 899px) { .footer__brand { grid-column: 1 / -1; } }

.footer__brand .nav__brand { font-size: 16px; }
.footer__tag { font-size: 14px; color: var(--c-muted); margin: var(--s-3) 0 var(--s-2); max-width: 34ch; }
.footer__desc { font-size: var(--fs-caption); color: var(--c-muted); margin: 0 0 var(--s-3); max-width: 40ch; }
.footer h2 { font-size: var(--fs-micro); font-weight: 600; letter-spacing: var(--ls-over); text-transform: uppercase; color: var(--c-muted); margin-bottom: var(--s-3); max-width: none; }
.footer nav a, .footer__col a { display: block; font-size: 14.5px; color: var(--c-ink-2); text-decoration: none; padding-block: 11px; margin-block: -3px; }
.footer nav a:hover, .footer__col a:hover { color: var(--c-ink); text-decoration: underline; text-underline-offset: 3px; }
.footer__col p { font-size: var(--fs-caption); color: var(--c-muted); margin-top: var(--s-2); max-width: 32ch; }

.footer__notice { margin-top: var(--s-7); padding: var(--s-4) var(--s-5); border-radius: var(--r-md); background: var(--c-surface); border: 1px solid var(--c-border); font-size: var(--fs-small); color: var(--c-ink-2); }
.footer__notice p { max-width: none; margin: 0; font-size: inherit; color: inherit; }
.footer__bottom {
  margin-top: var(--s-5); padding-top: var(--s-5); border-top: 1px solid var(--c-border);
  display: flex; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap;
  font-size: var(--fs-caption); color: var(--c-muted);
}
.footer__bottom p { margin: 0; max-width: none; }

/* ============================================================
   Legal / prose pages
   ============================================================ */
.pagehead { background: var(--c-bg-subtle); border-bottom: 1px solid var(--c-border); padding: var(--s-7) 0 var(--s-6); }
.pagehead .lead { margin-top: var(--s-4); }
.pagehead .caption { margin-top: var(--s-3); }
.crumb { font-size: var(--fs-caption); color: var(--c-muted); margin-bottom: var(--s-4); }
.crumb a { color: var(--c-muted); text-decoration: none; }
.crumb a:hover { color: var(--c-ink); text-decoration: underline; }

.doc { display: block; padding-block: var(--sec-y); }
@media (min-width: 1100px) {
  .doc__grid {
    display: grid;
    grid-template-columns: 220px minmax(0, var(--w-prose));
    justify-content: center;
    gap: var(--s-7);
  }
}
.toc { display: none; }
@media (min-width: 1100px) {
  .toc {
    display: block; position: sticky; top: var(--scroll-offset); align-self: start;
    max-height: calc(100dvh - var(--scroll-offset) - var(--s-6)); overflow: auto;
    font-size: var(--fs-caption);
  }
  .toc h2 { font-size: var(--fs-micro); font-weight: 600; letter-spacing: var(--ls-over); text-transform: uppercase; color: var(--c-muted); margin-bottom: var(--s-2); max-width: none; }
  .toc ol { list-style: none; padding: 0; margin: 0; }
  .toc a { display: block; padding: 8px 0; color: var(--c-muted); text-decoration: none; line-height: 1.35; }
  .toc a:hover { color: var(--c-ink); }
}

.prose { max-width: var(--w-prose); font-size: 1.0625rem; line-height: 1.72; color: var(--c-ink-2); }
/* Below the TOC breakpoint there is no rail to balance against, so centre the
   reading column and the page header on the same measure. */
@media (max-width: 1099px) {
  .doc .prose, .pagehead .container > * { max-width: var(--w-prose); margin-inline: auto; }
}
.prose > * + * { margin-top: var(--s-4); }
.prose h2 { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.012em; margin-top: var(--s-7); margin-bottom: var(--s-3); scroll-margin-top: var(--scroll-offset); max-width: none; }
.prose h3 { font-size: 1.125rem; font-weight: 600; margin-top: var(--s-5); margin-bottom: var(--s-2); scroll-margin-top: var(--scroll-offset); }
.prose > h2:first-child { margin-top: 0; }
.prose p { max-width: none; margin-bottom: 0; }
.prose ul, .prose ol { padding-left: 22px; margin-top: var(--s-3); }
.prose li { margin-bottom: var(--s-2); }
.prose li::marker { color: var(--c-muted); }
.prose a { color: var(--c-accent); text-decoration-line: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; overflow-wrap: anywhere; }
.prose a:hover { text-decoration-thickness: 2px; color: var(--c-accent-strong); }
.prose strong { color: var(--c-ink); font-weight: 600; }

.prose .claim {
  background: var(--c-bg-subtle); border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: var(--s-4) var(--s-5); position: relative; color: var(--c-ink); font-weight: 500;
}
.prose .claim::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; border-radius: 3px 0 0 3px; background: var(--aurora-line); }
.prose .claim p { color: inherit; }
.prose .claim :first-child { margin-top: 0; }

.prose .todo {
  border: 1px dashed var(--c-amber); border-radius: var(--r-md);
  background: var(--c-amber-tint); padding: var(--s-4) var(--s-5);
  font-size: var(--fs-small); color: var(--c-ink-2);
}
.prose .todo p { color: inherit; }
.prose .todo strong { color: var(--c-amber); }
.prose .todo :first-child { margin-top: 0; }
.prose .todo ul { margin-top: var(--s-2); }

.prose table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.prose thead th { text-align: left; padding: var(--s-3) var(--s-4) var(--s-3) 0; border-bottom: 1px solid var(--c-border-strong); color: var(--c-ink); font-weight: 600; }
.prose td { padding: var(--s-3) var(--s-4) var(--s-3) 0; border-bottom: 1px solid var(--c-border); vertical-align: top; }

.prose .doc-nav { margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--c-border); font-size: var(--fs-small); }

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

/* ============================================================
   Print
   ============================================================ */
@media print {
  .nav, .toc, .footer nav, .footer__col, .skip, .hero__art { display: none; }
  .prose { max-width: none; font-size: 11pt; }
  .prose a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
  .band::before { display: none; }
  body { background: #fff; color: #000; }
}

/* Inline code — used sparingly in the legal pages for identifiers */
code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: .875em;
  background: var(--c-bg-subtle);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xs);
  padding: .1em .35em;
  overflow-wrap: anywhere;
}