/* Ledgerbird landing page. Minimalism and Swiss style on the brand kit: light only, IBM Plex Sans, Slate text on
   Paper, Copper for actions and for the bookkeeper's double rule.
   Layout: a ruled ledger page. A 12-column grid; each section's heading sits in the left four columns like an account
   name, its entries run to the right on ruled lines, and a copper double rule closes what adds up. */

@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/plex-regular.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/fonts/plex-medium.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/fonts/plex-semibold.woff2") format("woff2"); }

:root {
  color-scheme: light;
  /* Colour. Ratios are against Paper unless named. */
  --ink: #1D2B3A;            /* text, 14.39:1 */
  --ink-2: #3A4A5C;          /* secondary text, 9.08:1; 8.38:1 on Ground */
  --muted: #5B6878;          /* captions, 5.68:1; 5.24:1 on Ground */
  --rule: #D3DCE5;           /* ledger rules and frames, never text */
  --line: #E4E9EE;           /* rules inside a card */
  --edge: #7D8A99;           /* control borders, 3.52:1 */
  --paper: #FFFFFF;
  --ground: #F4F6F8;
  --copper: #B4501F;         /* actions and the double rule, 5.11:1; white on it the same */
  --copper-strong: #963F15;  /* hover */
  --error: #9B1C1C;
  --ok: #1E6B3A;

  /* Type: one family, three weights. */
  --font: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --t-xs: 0.8125rem;
  --t-sm: 0.875rem;
  --t-base: 1rem;
  --t-md: 1.125rem;
  --t-lg: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);
  --t-xl: 1.375rem;
  --t-h2: clamp(1.75rem, 1.45rem + 1.1vw, 2.25rem);
  --t-h1: clamp(2.25rem, 1.55rem + 2.9vw, 3.75rem);

  /* Space, on a 4 px base. */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;
  --gutter: 16px;
  --gap: 24px;
  --section: var(--s8);
  --r-card: 16px;
  --r-ctl: 10px;
  --sh-1: 0 1px 2px rgba(29, 43, 58, .06), 0 2px 6px rgba(29, 43, 58, .04);
  --sh-2: 0 24px 56px rgba(29, 43, 58, .16), 0 2px 8px rgba(29, 43, 58, .08);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}
@media (min-width: 768px) { :root { --gutter: 32px; --gap: 32px; } }
@media (min-width: 1024px) { :root { --gutter: 40px; --section: var(--s9); } }

/* Base */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 var(--t-base)/1.6 var(--font);
  overflow-wrap: break-word;
}
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; }
h1, h2, h3 { font-weight: 600; text-wrap: balance; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--copper); text-underline-offset: 3px; }
a:hover { color: var(--copper-strong); }
code { font-family: var(--mono); font-size: 0.92em; }
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--copper); outline-offset: 3px; border-radius: 4px; }
main:focus { outline: none; }

.skip {
  position: absolute; left: var(--s2); top: -64px; z-index: 100;
  padding: var(--s3) var(--s4); border-radius: var(--r-ctl);
  background: var(--ink); color: var(--paper); font-weight: 600; text-decoration: none;
}
.skip:focus { top: var(--s2); color: var(--paper); }

.wrap { width: 100%; max-width: calc(1200px + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }

/* The bookkeeper's double rule: two copper lines under what adds up. */
.hero h1::after, .ledger-rows::after, .pull::before {
  content: ""; display: block; height: 7px;
  border-top: 2px solid var(--copper); border-bottom: 2px solid var(--copper);
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 44px; padding: 0 var(--s5); border-radius: var(--r-ctl);
  border: 1px solid var(--edge); background: var(--paper); color: var(--ink);
  font-weight: 500; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer;
  touch-action: manipulation;
  transition: background-color 180ms var(--ease-out), border-color 180ms var(--ease-out), transform 120ms var(--ease-out);
}
.btn:hover { border-color: var(--ink); background: var(--ground); color: var(--ink); }
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--copper); border-color: var(--copper); color: var(--paper); font-weight: 600; }
.btn-primary:hover { background: var(--copper-strong); border-color: var(--copper-strong); color: var(--paper); }
.btn-lg { min-height: 48px; font-size: var(--t-md); }

/* Header */
.site-head { border-bottom: 1px solid var(--line); background: var(--paper); }
.head-row { display: flex; align-items: center; gap: var(--s4); min-height: 72px; }
.brand { display: block; padding: var(--s2); margin-left: calc(-1 * var(--s2)); border-radius: var(--r-ctl); }
.brand img { width: 145px; height: 32px; }
.site-nav { display: none; margin-left: auto; }
.site-nav ul { list-style: none; display: flex; gap: var(--s1); }
.site-nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s3); border-radius: var(--r-ctl);
  color: var(--ink-2); font-weight: 500; text-decoration: none;
  transition: background-color 180ms var(--ease-out), color 180ms var(--ease-out);
}
.site-nav a:hover { background: var(--ground); color: var(--ink); }
.head-cta { margin-left: auto; }
@media (min-width: 1024px) {
  .site-nav { display: block; }
  .head-cta { margin-left: var(--s2); }
}

/* Hero */
.hero { position: relative; overflow: hidden; padding-block: var(--s7) var(--s7); }
.hero-hills {
  position: absolute; left: 0; bottom: 0; width: 100%; height: clamp(200px, 30vw, 440px);
  object-fit: cover; object-position: 50% 100%; pointer-events: none;
}
.hero-grid { position: relative; display: grid; gap: var(--s5); }
.hero h1 { font-size: var(--t-h1); line-height: 1.06; letter-spacing: -0.02em; }
.hero h1 span { display: block; }
.hero h1::after { width: 72px; margin-top: var(--s5); }
.hero-side { display: grid; gap: var(--s5); align-content: end; }
.lead { font-size: var(--t-lg); line-height: 1.6; color: var(--ink-2); max-width: 36em; }
.actions { display: flex; flex-wrap: wrap; gap: var(--s3); }
.actions .btn { flex: 1 1 auto; }
.facts { list-style: none; display: grid; border-top: 1px solid var(--rule); }
.facts li { padding: var(--s3) 0; border-bottom: 1px solid var(--line); color: var(--ink-2); font-weight: 500; }
.hero-shot { margin-top: var(--s4); }
.hero-shot .frame { box-shadow: var(--sh-2); }
.hero-shot figcaption { justify-self: start; padding: var(--s1) var(--s2); margin-left: calc(-1 * var(--s2)); border-radius: 6px; background: var(--paper); }
@media (min-width: 640px) {
  .actions .btn { flex: 0 0 auto; }
}
@media (min-width: 768px) {
  .hero { padding-block: var(--s8) var(--s8); }
  .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
}
@media (min-width: 1024px) {
  .hero-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: var(--s7); }
  .hero h1 { grid-column: 1 / span 7; }
  .hero-side { grid-column: 8 / span 5; }
  .facts { grid-column: 1 / -1; }
  .hero-shot { grid-column: 2 / -1; margin-top: 0; }
}

/* Device frame around a real desk screenshot */
.shot { display: grid; gap: var(--s3); }
.frame { overflow: hidden; border: 1px solid var(--rule); border-radius: 12px; background: var(--paper); box-shadow: var(--sh-1); }
.frame-bar { display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 var(--s3); border-bottom: 1px solid var(--line); }
.frame-bar span { width: 8px; height: 8px; border-radius: 50%; background: var(--rule); }
.frame img { width: 100%; }
figcaption { font-size: var(--t-sm); color: var(--muted); }

/* Sections */
.section { padding-block: var(--section); }
.section-ground { background: var(--ground); }
.section-ruled { padding-top: 0; }
.section-ruled .section-head { border-top: 1px solid var(--rule); padding-top: var(--section); }
.section-head { display: grid; gap: var(--s3); margin-bottom: var(--s7); }
.section-head h2, .why h2 { font-size: var(--t-h2); line-height: 1.15; letter-spacing: -0.01em; }
.intro { font-size: var(--t-lg); color: var(--ink-2); max-width: 36em; }
h3 { font-size: var(--t-xl); line-height: 1.3; }
@media (min-width: 1024px) {
  .section-head { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: baseline; }
  .section-head h2 { grid-column: 1 / span 4; }
  .section-head .intro { grid-column: 5 / span 8; }
}

/* Two ways in */
.ways { display: grid; gap: var(--gap); }
.card { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-card); }
.way { display: grid; align-content: start; gap: var(--s4); padding: var(--s5); }
.way > p { color: var(--ink-2); }
.way .shot, .way .chat { margin-top: var(--s2); }
@media (min-width: 768px) { .way { padding: var(--s6); } }
@media (min-width: 1024px) { .ways { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.chat { display: grid; gap: var(--s3); }
.chat-log {
  list-style: none; display: grid; gap: var(--s3);
  padding: var(--s4); border: 1px solid var(--line); border-radius: 12px; background: var(--ground);
}
.msg { display: grid; gap: var(--s1); min-width: 0; }
.msg .who { font-size: var(--t-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.msg-you, .msg-agent { max-width: 88%; }
.msg-you { justify-self: end; justify-items: end; }
.msg-you p, .msg-agent p { padding: var(--s2) var(--s3); border-radius: 12px; }
.msg-you p { background: var(--ink); color: var(--paper); border-bottom-right-radius: 4px; }
.msg-agent p { background: var(--paper); border: 1px solid var(--rule); border-bottom-left-radius: 4px; }
.msg-tool {
  display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--s2); row-gap: 0;
  padding-left: var(--s3); border-left: 2px solid var(--rule);
  font-size: var(--t-sm); color: var(--muted);
}
.msg-tool .who { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--ink-2); }
.msg-tool .who code { font-size: var(--t-xs); }

/* Split: an illustration in the account column, the entries beside it */
.split { display: grid; gap: var(--s6); }
.split-body { display: grid; gap: var(--s7); min-width: 0; }
.illo { width: 100%; max-width: 340px; }
@media (min-width: 1024px) {
  .split { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; }
  .split .illo { grid-column: 1 / span 4; max-width: none; }
  .split-body { grid-column: 5 / span 8; }
}

/* Ruled entries: the points of "Your data" and the steps of the exit */
.points, .steps { list-style: none; border-top: 1px solid var(--rule); }
.points li, .steps li { display: grid; gap: var(--s2); padding: var(--s5) 0; border-bottom: 1px solid var(--line); }
.points h3, .steps h3 { font-size: var(--t-md); }
.points p, .steps p { color: var(--ink-2); max-width: 40em; }
@media (min-width: 768px) {
  .points li { grid-template-columns: 15rem minmax(0, 1fr); column-gap: var(--gap); align-items: baseline; }
}
.steps { counter-reset: step; }
.steps li { counter-increment: step; grid-template-columns: 2.5rem minmax(0, 1fr); column-gap: var(--s4); }
.steps li::before {
  content: counter(step); grid-row: 1 / span 2;
  display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%;
  border: 1px solid var(--edge); font-weight: 600; color: var(--ink);
}
.steps h3, .steps p { grid-column: 2; }

.panel { background: var(--ground); border: 1px solid var(--rule); border-radius: var(--r-card); }
.converter { display: grid; gap: var(--s5); padding: var(--s5); }
.converter h3 { margin-bottom: var(--s2); }
.converter p { color: var(--ink-2); max-width: 36em; }
.converter-get { display: grid; gap: var(--s2); justify-items: start; }
.converter-get .meta { font-size: var(--t-sm); color: var(--muted); }
@media (min-width: 768px) {
  .converter { grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: var(--s6); column-gap: var(--s6); }
}

/* What it does today: a ledger page */
.ledger { display: grid; gap: var(--s7); padding: var(--s5); }
.ledger { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-card); }
.ledger-title {
  padding-bottom: var(--s3); border-bottom: 2px solid var(--ink);
  font-size: var(--t-sm); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink);
}
.ledger-rows > div { display: grid; gap: var(--s1); padding: var(--s4) 0; border-bottom: 1px solid var(--line); }
.ledger-rows dt { font-weight: 600; }
.ledger-rows ul, .ledger-not ul { list-style: none; }
.ledger-rows li { padding: 2px 0; color: var(--ink-2); }
.ledger-rows::after { margin-top: var(--s4); }
.ledger-not li { padding: var(--s3) 0; border-bottom: 1px solid var(--line); color: var(--ink-2); }
.tax-note { margin-top: var(--s5); font-size: var(--t-sm); color: var(--muted); }
@media (min-width: 768px) {
  .ledger { padding: var(--s6); }
  .ledger-rows > div { grid-template-columns: 9rem minmax(0, 1fr); column-gap: var(--gap); }
}
@media (min-width: 1024px) {
  .ledger { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); column-gap: var(--s8); padding: var(--s7); }
}

/* Why it is free */
.why { display: grid; gap: var(--s6); }
.why-body { display: grid; gap: var(--s4); max-width: 36em; }
.why-body p { font-size: var(--t-md); color: var(--ink-2); }
.why-body .pull { margin-top: var(--s3); font-size: var(--t-xl); line-height: 1.35; font-weight: 600; color: var(--ink); }
.pull::before { width: 48px; margin-bottom: var(--s4); }
.why-illo { max-width: 360px; }
@media (min-width: 1024px) {
  .why { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; }
  .why h2 { grid-column: 1 / span 4; }
  .why-body { grid-column: 5 / span 5; }
  .why-illo { grid-column: 10 / span 3; max-width: none; margin-top: var(--s2); }
}

/* Waiting list */
.waitlist { display: grid; gap: var(--s3); max-width: 40rem; }
.field label { display: block; margin-bottom: var(--s2); font-weight: 600; }
.field-row { display: flex; flex-wrap: wrap; gap: var(--s3); }
.field-row input {
  flex: 1 1 16rem; min-width: 0; min-height: 48px; padding: 0 var(--s4);
  border: 1px solid var(--edge); border-radius: var(--r-ctl); background: var(--paper); font-size: 1rem;
  transition: border-color 180ms var(--ease-out);
}
.field-row input:hover { border-color: var(--ink); }
.field-row input[aria-invalid="true"] { border-color: var(--error); }
.field-row .btn { flex: 1 1 auto; }
.hint { margin-top: var(--s2); font-size: var(--t-sm); color: var(--muted); }
.error { font-size: var(--t-sm); font-weight: 600; color: var(--error); }
.error:empty, .done:empty { display: none; }
.done { font-weight: 600; color: var(--ok); }
@media (min-width: 640px) { .field-row .btn { flex: 0 0 auto; } }
@media (min-width: 1024px) { .waitlist { margin-left: calc((100% + var(--gap)) / 3); } }

/* Footer */
.site-foot { border-top: 1px solid var(--rule); padding-block: var(--s7); }
.foot-grid { display: grid; gap: var(--s5); }
.foot-brand { display: grid; gap: var(--s3); justify-items: start; }
.foot-brand p, .foot-contact p { color: var(--ink-2); }
.foot-contact p:first-child { font-weight: 600; color: var(--ink); }
.foot-links ul { list-style: none; display: flex; gap: var(--s5); }
.foot-contact a, .foot-links a { display: inline-flex; align-items: center; min-height: 44px; }
.foot-note { font-size: var(--t-sm); color: var(--muted); }
@media (min-width: 768px) {
  .foot-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto; column-gap: var(--gap); align-items: start; }
  .foot-note { grid-column: 1 / -1; padding-top: var(--s5); border-top: 1px solid var(--line); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}