/* ExpenseGauge — the public pages.
   ONE stylesheet decides how this site looks. No page carries its own.

   The palette is not new. It is the palette the application already draws
   with — the same deep navy, the same green — so that a visitor who signs in
   does not feel handed off to a different product. The application's own
   values are: ink #1a1a2e, green #2fae86, muted #7b8494, hairline #e9edf2,
   band #f5f8f7. Everything below is derived from those.

   Fonts are served from this server, never from a third party. The site's
   own privacy page says no other company watches you read it; a font fetched
   from elsewhere would make that sentence false. */

@font-face {
  font-family: 'Archivo Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url('fonts/archivo-var.woff2') format('woff2-variations');
}
@font-face {
  font-family: 'Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('fonts/plex-mono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url('fonts/plex-mono-500.woff2') format('woff2');
}

/* ---------- tokens: light ---------- */
:root {
  --paper:      #ffffff;
  --band:       #f5f8f7;
  --sunk:       #eef2f4;
  --hair:       #e4e9ef;
  --hair-firm:  #cfd7e0;

  --ink:        #1a1a2e;
  --ink-2:      #3c4460;
  --muted:      #6b7485;

  --green:      #17876a;   /* the app's green, darkened just enough to read as text on white */
  --green-mark: #2fae86;   /* the app's own value, for fills and marks */
  --green-soft: #e7f4ef;
  --green-line: #b7e0d0;

  /* semantic, and deliberately NOT the accent: these say how a month is going */
  --state-ok:   #17876a;
  --state-high: #9a6b12;
  --state-over: #b3453c;
  --state-ok-soft:   #e7f4ef;
  --state-high-soft: #fbf1dd;
  --state-over-soft: #fbeceb;

  --shadow: 0 1px 2px rgba(26,26,46,.05), 0 12px 32px -18px rgba(26,26,46,.28);

  --sans: 'Archivo Variable', 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --mono: 'Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;

  --measure: 66ch;
  --page: 1080px;
  --gutter: 16px;
}

@media (min-width: 720px) { :root { --gutter: 32px; } }

/* ---------- tokens: dark ----------
   Two selectors, on purpose. The first is for a visitor whose system is dark
   and who has expressed no preference for this page; the guard stops it
   overriding someone who explicitly asked for light. The second is for an
   explicit dark choice. A colour defined in only one of them would be a
   colour that sometimes does not exist. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:      #13131f;
    --band:       #1a1a2b;
    --sunk:       #202033;
    --hair:       #2a2a40;
    --hair-firm:  #3b3b56;

    --ink:        #edeff6;
    --ink-2:      #c0c6d6;
    --muted:      #8d95a8;

    --green:      #43c79c;
    --green-mark: #2fae86;
    --green-soft: #14312a;
    --green-line: #2a5c4c;

    --state-ok:   #43c79c;
    --state-high: #d9a343;
    --state-over: #e8776c;
    --state-ok-soft:   #14312a;
    --state-high-soft: #332813;
    --state-over-soft: #351e1d;

    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 32px -18px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"] {
  --paper:      #13131f;
  --band:       #1a1a2b;
  --sunk:       #202033;
  --hair:       #2a2a40;
  --hair-firm:  #3b3b56;

  --ink:        #edeff6;
  --ink-2:      #c0c6d6;
  --muted:      #8d95a8;

  --green:      #43c79c;
  --green-mark: #2fae86;
  --green-soft: #14312a;
  --green-line: #2a5c4c;

  --state-ok:   #43c79c;
  --state-high: #d9a343;
  --state-over: #e8776c;
  --state-ok-soft:   #14312a;
  --state-high-soft: #332813;
  --state-over-soft: #351e1d;

  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 32px -18px rgba(0,0,0,.8);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.62;
  font-variation-settings: 'wdth' 100;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; line-height: 1.12; text-wrap: balance; }

h1 {
  font-size: clamp(2.4rem, 6.2vw, 4rem);
  font-weight: 760;
  font-variation-settings: 'wdth' 116;
  letter-spacing: -.028em;
}
h2 {
  font-size: clamp(1.6rem, 3.4vw, 2.3rem);
  font-weight: 720;
  font-variation-settings: 'wdth' 110;
  letter-spacing: -.02em;
}
h3 {
  font-size: 1.1rem;
  font-weight: 640;
  letter-spacing: -.008em;
}

p { margin: 0; }

a { color: var(--green); text-decoration: none; text-underline-offset: .18em; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--green-mark);
  outline-offset: 3px;
  border-radius: 3px;
}

strong { font-weight: 640; }

/* ---------- shell ---------- */
.wrap {
  width: 100%;
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.prose { max-width: var(--measure); }

.stack     { display: flex; flex-direction: column; gap: 1rem; }
.stack-sm  { display: flex; flex-direction: column; gap: .5rem; }
.stack-lg  { display: flex; flex-direction: column; gap: 2rem; }

section { padding-block: clamp(3rem, 8vw, 5.5rem); }
section.band { background: var(--band); }

.eyebrow {
  font-family: var(--mono);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}

.lede { font-size: 1.16rem; color: var(--ink-2); max-width: 56ch; }
.small { font-size: .9rem; color: var(--muted); }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ---------- header ---------- */
.site-head {
  border-bottom: 1px solid var(--hair);
  background: var(--paper);
}
.site-head > .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 68px;
  flex-wrap: wrap;
}
.mark {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  color: var(--ink);
  font-weight: 720;
  font-variation-settings: 'wdth' 112;
  letter-spacing: -.018em;
  font-size: 1.08rem;
}
.mark:hover { text-decoration: none; }
.mark svg { display: block; }
footer .bk-mark { width: 22px; height: 22px; }
.site-head .bk-mark { width: 34px; height: 34px; }
.mark .brand-2 { color: var(--green); }
.nav { display: flex; align-items: center; gap: 1.35rem; flex-wrap: wrap; }
.nav a { color: var(--ink-2); font-size: .95rem; }
.nav a:hover { color: var(--ink); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .72rem 1.25rem;
  border-radius: 8px;
  border: 1px solid transparent;
  font: inherit;
  font-weight: 620;
  font-size: .98rem;
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn-solid { background: var(--green-mark); color: #08231c; }
.btn-solid:hover { filter: brightness(1.06); }
.btn-quiet { background: transparent; color: var(--ink); border-color: var(--hair-firm); }
.btn-quiet:hover { background: var(--sunk); }
.btn-row { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; }

/* ---------- receipt motif ----------
   A receipt is a narrow column of hairlines, a torn edge and figures that
   line up. These three rules are the whole vocabulary; everything on the
   site that wants to look like paper uses them. */
.tear {
  height: 8px;
  background:
    radial-gradient(circle at 5px 0, transparent 5px, var(--paper) 5.5px) repeat-x;
  background-size: 14px 8px;
}
.hair { height: 1px; background: var(--hair); border: 0; margin: 0; }
.hair-dash {
  height: 1px;
  border: 0;
  margin: 0;
  background: repeating-linear-gradient(to right, var(--hair-firm) 0 5px, transparent 5px 10px);
}

.slip {
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: 10px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.slip-body { padding: 1.15rem 1.25rem; display: flex; flex-direction: column; gap: .8rem; }

.line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  font-size: .95rem;
}
.line .what { color: var(--ink-2); }
.line .amt { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--ink); }
.line .tag {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--green);
  background: var(--green-soft);
  border: 1px solid var(--green-line);
  border-radius: 999px;
  padding: .1rem .45rem;
  white-space: nowrap;
}

/* ---------- the gauge note ----------
   The sentence the application writes on your home screen. It is the most
   characteristic thing this product makes, so the site shows the real thing
   rather than describing it. */
.note {
  display: flex;
  gap: .85rem;
  align-items: flex-start;
  padding: .95rem 1.1rem;
  border-radius: 10px;
  border: 1px solid;
  font-size: .98rem;
  line-height: 1.5;
}
.note .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; margin-top: .48rem; }
.note-ok   { background: var(--state-ok-soft);   border-color: var(--green-line); color: var(--ink); }
.note-ok   .dot { background: var(--state-ok); }
.note-high { background: var(--state-high-soft); border-color: color-mix(in srgb, var(--state-high) 35%, transparent); color: var(--ink); }
.note-high .dot { background: var(--state-high); }
.note-over { background: var(--state-over-soft); border-color: color-mix(in srgb, var(--state-over) 35%, transparent); color: var(--ink); }
.note-over .dot { background: var(--state-over); }

/* ---------- the dial ----------
   Drawn with classes rather than presentation attributes, because a colour
   written as an attribute cannot read a custom property, and this dial has to
   change with the theme like everything else. */
.dial { display: block; width: 100%; height: auto; max-width: 420px; }
.arc-ok, .arc-high, .arc-over { fill: none; stroke-width: 13; stroke-linecap: round; }
.arc-ok   { stroke: var(--state-ok); }
.arc-high { stroke: var(--state-high); }
.arc-over { stroke: var(--state-over); }
.needle { stroke: var(--ink); stroke-width: 4; stroke-linecap: round; }
.hub    { fill: var(--ink); }
.dial-label { font-family: var(--mono); font-size: 11px; fill: var(--muted); }

/* ---------- grids ---------- */
.cols { display: grid; gap: clamp(1.5rem, 4vw, 3rem); }
@media (min-width: 900px) {
  .cols-2  { grid-template-columns: 1fr 1fr; align-items: start; }
  .cols-hero { grid-template-columns: 1.05fr .95fr; align-items: center; }
}
.cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
@media (min-width: 860px) { .cards-2 { grid-template-columns: 1fr 1fr; } }
.card {
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: 10px;
  padding: 1.2rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.card h3 { font-size: 1.02rem; }
.card p { font-size: .94rem; color: var(--ink-2); }

.steps { display: grid; gap: 1.5rem; counter-reset: step; }
@media (min-width: 820px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step { display: flex; flex-direction: column; gap: .55rem; }
.step .n {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .14em;
  color: var(--muted);
}
.step p { font-size: .96rem; color: var(--ink-2); }

/* ---------- legal pages ---------- */
.legal { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); }
@media (min-width: 1000px) { .legal { grid-template-columns: 220px minmax(0, 1fr); align-items: start; } }

.toc { position: sticky; top: 1.5rem; display: flex; flex-direction: column; gap: .4rem; }
.toc .eyebrow { margin-bottom: .3rem; }
.toc a { font-size: .9rem; color: var(--ink-2); }
.toc a:hover { color: var(--green); }
@media (max-width: 999px) { .toc { position: static; } }

.doc { max-width: var(--measure); display: flex; flex-direction: column; gap: 1.6rem; }
.doc section { padding: 0; display: flex; flex-direction: column; gap: .7rem; scroll-margin-top: 1.5rem; }
.doc h2 { font-size: 1.28rem; font-variation-settings: 'wdth' 106; }
.doc p, .doc li { color: var(--ink-2); font-size: 1rem; }
.doc ul { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: .45rem; }
.updated { font-family: var(--mono); font-size: .78rem; color: var(--muted); letter-spacing: .04em; }

.doc, .doc section { min-width: 0; }
.table-wrap { overflow-x: auto; min-width: 0; max-width: 100%; }
table { border-collapse: collapse; width: 100%; font-size: .94rem; min-width: 420px; }
th, td { text-align: left; padding: .6rem .8rem; border-bottom: 1px solid var(--hair); vertical-align: top; }
th { font-family: var(--mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
td { color: var(--ink-2); }

/* ---------- pricing ---------- */
.plans { display: grid; gap: 1.25rem; }
@media (min-width: 820px) { .plans { grid-template-columns: 1fr 1fr; } }
.plan {
  min-width: 0;                 /* a card is allowed to shrink on a narrow phone */
  border: 1px solid var(--hair);
  border-radius: 12px;
  padding: 1.6rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background: var(--paper);
}
.plan-featured { border-color: var(--green-line); background: var(--green-soft); }
.plan > .btn { margin-top: auto; }   /* the button goes to the foot of the card, whatever is above it */
.plan .price { display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap; }
.plan .price .fig { font-family: var(--mono); font-size: 2.1rem; font-weight: 500; color: var(--ink); letter-spacing: -.02em; }
/* A LIST OF THINGS A PLAN INCLUDES, wherever one is drawn. It was written as
   a descendant of the pricing card, which named the place it happened to be
   used first rather than the thing it is, so the one other list that wanted it
   had to copy it or go without. Named for itself, it is asked for by name. */
.ticks { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .55rem; }
.ticks li { padding-left: 1.5em; text-indent: -1.5em; font-size: .95rem; color: var(--ink-2); }
.ticks li::before { content: '\2014\00a0'; color: var(--green); font-family: var(--mono); }

/* ---------- footer ---------- */
.site-foot { border-top: 1px solid var(--hair); background: var(--band); padding-block: 2.5rem 3rem; }
.foot-grid { display: grid; gap: 1.75rem; }
@media (min-width: 760px) { .foot-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.site-foot h4 {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  margin-bottom: .7rem;
}
.site-foot a { color: var(--ink-2); font-size: .93rem; display: block; padding-block: .18rem; }
.site-foot a:hover { color: var(--green); }
.site-foot .who { font-size: .9rem; color: var(--muted); line-height: 1.6; }
/* the operator's name and postal address: one place (the terms), small print */
.legal-small { font-size: .78rem; color: var(--muted); line-height: 1.5; }

/* ---------- the two blanks ----------
   Marked loudly on purpose. Nothing here may be published while one of these
   is still visible. Delete this rule and the spans go quiet, not away. */
.tbd {
  background: #ffe9a8;
  color: #4a3400;
  border-bottom: 2px solid #d9a343;
  padding: 0 .25em;
  border-radius: 2px;
  font-family: var(--mono);
  font-size: .9em;
  font-weight: 500;
}

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: var(--gutter);
  top: .5rem;
  position: fixed;
  z-index: 10;
  background: var(--paper);
  border: 1px solid var(--hair-firm);
  padding: .5rem .9rem;
  border-radius: 6px;
}

/* A tier that does not include something still says so, quietly, so the two
   columns can be compared line for line instead of by counting bullets. */
.plan .muted { color: var(--muted); }

/* ---------- the films ----------
   Both are 1080x1920, shot for a phone. On a wide screen a portrait film has
   to be held to a column by its WIDTH or it swallows the page; the aspect
   ratio then fixes the height, so nothing jumps while the poster loads.
   preload="none" in the markup is the other half: a visitor who never presses
   play never pays for twenty megabytes. */
.film { display: flex; flex-direction: column; align-items: center; gap: .8rem; }
.film video {
  display: block;
  width: 100%;
  max-width: 320px;
  height: auto;
  aspect-ratio: 9 / 16;
  border-radius: 16px;
  border: 1px solid var(--hair);
  background: #0f1626;
  box-shadow: 0 18px 44px rgb(0 0 0 / .18);
}
.film .small { text-align: center; max-width: 34rem; }
@media (min-width: 860px) { .film video { max-width: 360px; } }


/* A PICTURE OF THE PRODUCT. It is a piece of paper on a page, so it is given
   the same edge the slips elsewhere have, and it never grows past the column
   it sits in. The caption is the quiet half: the picture says what it looks
   like, the caption says what it is. */
figure.shot { margin: 0; display: flex; flex-direction: column; gap: .7rem; align-items: center; }
figure.shot img { width: 100%; max-width: 380px; height: auto; display: block;
                  border: 1px solid var(--hair, #e9edf2); border-radius: 10px;
                  box-shadow: 0 6px 24px rgba(26,26,46,.10); background: #fff; }
figure.shot figcaption { max-width: 46ch; text-align: center; font-size: .92rem; line-height: 1.55;
                         color: var(--muted, #7b8494); }
@media (max-width: 560px) { figure.shot img { max-width: 100%; } }

/* A WHOLE PHONE SCREEN is tall and narrow and wants to be small; a card lifted
   off one is wide and wants the column. */
figure.shot.shot-phone img { max-width: 288px; border-radius: 16px; }
figure.shot.shot-wide img { max-width: 520px; }