:root {
  --cream: #fbfaf4;
  --paper: #fffefa;
  --charcoal: #1a1a16;
  --green: #14874f;
  --green-dark: #0d6138;
  --mint: #b6ecce;
  --terracotta: #bc5533;
  --amber: #9a7a2e;
  --rule: rgba(26, 26, 22, 0.16);
  --display: Georgia, "Times New Roman", serif;
  --body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --utility: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--charcoal);
  background:
    repeating-linear-gradient(to bottom, transparent 0 39px, rgba(26, 26, 22, 0.035) 39px 40px),
    var(--cream);
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.65;
}
a { color: inherit; text-underline-offset: 0.2em; }
img { display: block; max-inline-size: 100%; }
.page-shell { inline-size: min(100% - 2rem, 76rem); margin-inline: auto; }
.skip-link { position: fixed; inset-block-start: 0.5rem; inset-inline-start: 0.5rem; z-index: 20; padding: 0.65rem 1rem; background: var(--charcoal); color: var(--cream); transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }
:focus-visible { outline: 3px solid var(--terracotta); outline-offset: 4px; }

.site-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-block-size: 5.5rem; border-block-end: 1px solid var(--rule); }
.brand { display: inline-flex; align-items: center; gap: 0.7rem; font-family: var(--display); font-size: 1.35rem; font-weight: 700; text-decoration: none; }
.brand img { inline-size: 2.5rem; block-size: 2.5rem; }
.site-header nav, .site-footer nav { display: flex; align-items: center; flex-wrap: wrap; gap: clamp(0.8rem, 2vw, 1.5rem); }
.site-header nav > a:not(.cta), .site-footer nav a { font-size: 0.9rem; font-weight: 650; text-decoration: none; }
.site-header nav > a:not(.cta):hover, .site-footer nav a:hover { text-decoration: underline; }

.eyebrow { margin: 0 0 0.8rem; color: var(--green-dark); font-family: var(--utility); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
h1, h2, h3 { font-family: var(--display); line-height: 1.05; text-wrap: balance; }
h1 { max-inline-size: 13ch; margin: 0; font-size: clamp(3rem, 7vw, 6.6rem); font-weight: 500; letter-spacing: -0.055em; }
h2 { margin: 0; font-size: clamp(2.25rem, 4.5vw, 4.3rem); font-weight: 500; letter-spacing: -0.04em; }
h3 { margin: 0; font-size: 1.6rem; }
.lede { max-inline-size: 40rem; margin-block: 1.5rem 2rem; font-size: clamp(1.05rem, 1.8vw, 1.28rem); }
.quiet-note { color: rgba(26, 26, 22, 0.7); font-size: 0.86rem; }
.cta { display: inline-flex; justify-content: center; align-items: center; min-block-size: 3.15rem; padding: 0.72rem 1.15rem; border: 2px solid var(--green); background: var(--green); color: white; font-weight: 750; text-decoration: none; box-shadow: 5px 5px 0 var(--mint); transition: transform 140ms ease, box-shadow 140ms ease; }
.cta:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--mint); }
.cta-small { min-block-size: 2.5rem; padding: 0.4rem 0.8rem; box-shadow: none; font-size: 0.82rem; }
.cta-disabled { border-color: var(--rule); background: transparent; color: rgba(26, 26, 22, 0.66); box-shadow: none; cursor: default; }

.hero { display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(17rem, 0.78fr); align-items: center; gap: clamp(3rem, 8vw, 8rem); min-block-size: calc(100vh - 5.5rem); padding-block: clamp(4rem, 10vw, 8rem); }
.ledger-card { position: relative; padding: clamp(1.5rem, 4vw, 2.6rem); overflow: hidden; border: 1px solid var(--rule); background: var(--paper); box-shadow: 0.8rem 0.8rem 0 var(--mint); transform: rotate(1.2deg); }
.ledger-card::after { content: ""; position: absolute; inset-block: -1rem; inset-inline-start: 51%; border-inline-start: 2px dashed rgba(188, 85, 51, 0.48); transform: rotate(-2deg); }
.ledger-heading, .ledger-rule { position: relative; z-index: 1; display: flex; justify-content: space-between; gap: 1rem; padding-block: 0.8rem; border-block-end: 1px solid var(--rule); }
.ledger-heading { color: var(--green-dark); font-family: var(--display); font-size: 1.35rem; font-weight: 700; }
.ledger-rule { font-family: var(--utility); font-size: 0.8rem; }
.ledger-people { display: flex; gap: 0.45rem; margin-block: 1.3rem 0.6rem; }
.ledger-people span { display: grid; place-items: center; inline-size: 2.35rem; block-size: 2.35rem; border-radius: 50%; background: var(--charcoal); color: var(--cream); font-family: var(--utility); }

.process, .privacy-panel, .live-split, .product-gallery, .final-cta { padding-block: clamp(5rem, 10vw, 9rem); border-block-start: 1px solid var(--rule); }
.process-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin: 3.5rem 0 0; padding: 0; background: var(--rule); list-style: none; }
.process-grid li { min-inline-size: 0; padding: clamp(1.5rem, 4vw, 2.5rem); background: var(--cream); }
.process-grid li > span { display: block; margin-block-end: 3.5rem; color: var(--terracotta); font-family: var(--utility); font-size: 0.8rem; }
.process-grid p { margin-block-end: 0; }
.privacy-panel { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(2rem, 8vw, 8rem); margin-inline: calc(50% - 50vw); padding-inline: max(1rem, calc((100vw - 76rem) / 2)); background: var(--mint); }
.privacy-panel p { max-inline-size: 47rem; font-size: 1.08rem; }
.text-link { color: var(--green-dark); font-weight: 800; }
.live-split { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(3rem, 8vw, 8rem); }
.live-copy p:last-child { max-inline-size: 38rem; }
.claim-list { border-block-start: 3px solid var(--green); background: var(--paper); }
.claim-list div { display: flex; justify-content: space-between; gap: 1rem; padding: 1rem 1.2rem; border-block-end: 1px solid var(--rule); }
.claim-list strong { color: var(--green-dark); }
.product-gallery { display: grid; grid-template-columns: minmax(14rem, 19rem) 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.gallery-copy { position: sticky; top: 2rem; }
.gallery-copy > p:last-child { margin-block-end: 0; padding: 1.25rem; border-inline-start: 4px solid var(--amber); background: rgba(154, 122, 46, 0.08); font-size: 0.95rem; }
.shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.2vw, 2rem); margin: 0; padding: 0; list-style: none; }
.shots img { display: block; inline-size: 100%; block-size: auto; border: 1px solid var(--rule); border-radius: 20px; background: var(--paper); box-shadow: 0 18px 44px rgba(26, 26, 22, 0.11); }
.shots p { margin: 1.15rem 0 0; font-size: 0.95rem; line-height: 1.55; }
.shots strong { display: block; color: var(--green-dark); }
.final-cta { text-align: center; }
.final-cta h2 { max-inline-size: 16ch; margin: 0 auto 2.5rem; }

.site-footer { display: flex; justify-content: space-between; gap: 2rem; padding-block: 3rem; border-block-start: 1px solid var(--rule); }
.site-footer p { margin: 0.6rem 0 0; color: rgba(26, 26, 22, 0.68); font-size: 0.88rem; }
.footer-brand img { inline-size: 2rem; block-size: 2rem; }
.legal-page { inline-size: min(100%, 48rem); margin-inline: auto; padding-block: clamp(4rem, 9vw, 8rem); }
.legal-page h1 { max-inline-size: none; margin-block-end: 1.5rem; font-size: clamp(3rem, 7vw, 5.6rem); }
.legal-page h2 { margin-block: 3rem 0.7rem; font-size: clamp(1.7rem, 3vw, 2.35rem); letter-spacing: -0.025em; }
.legal-lede { padding-block-end: 2rem; border-block-end: 1px solid var(--rule); font-size: 1.2rem; }
.legal-page li + li { margin-block-start: 0.55rem; }

@media (max-width: 760px) {
  .page-shell { inline-size: min(100% - 1.25rem, 76rem); }
  .site-header { align-items: flex-start; padding-block: 1rem; }
  .site-header nav { justify-content: flex-end; }
  .site-header nav > a:not(.cta) { display: none; }
  .hero, .privacy-panel, .live-split, .product-gallery { grid-template-columns: 1fr; }
  .gallery-copy { position: static; }
  .shots { grid-template-columns: 1fr; max-inline-size: 26rem; margin-inline: auto; }
  .hero { min-block-size: auto; gap: 3rem; }
  .ledger-card { max-inline-size: 30rem; margin-inline: auto; }
  .process-grid { grid-template-columns: 1fr; }
  .process-grid li > span { margin-block-end: 1rem; }
  .site-footer { flex-direction: column; }
}

@media (max-width: 390px) {
  h1 { font-size: 2.75rem; }
  .cta { inline-size: 100%; }
  .cta-small { inline-size: auto; }
  .site-header .brand span { display: none; }
}

/* Motion. Every rule below is additive: the page is complete and readable with none of it
   applied, so an unsupporting browser or a reduced-motion preference loses nothing but polish.
   ponytail: CSS-only by contract — the site ships no JavaScript. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes rise { from { opacity: 0; transform: translateY(1.75rem); } to { opacity: 1; transform: none; } }
  @keyframes settle { from { opacity: 0; transform: translateY(2.5rem) rotate(3deg); } to { opacity: 1; transform: rotate(1.2deg); } }
  @keyframes scan { 0% { transform: translateY(-100%); } 55%, 100% { transform: translateY(320%); } }
  @keyframes claim { from { opacity: 0; transform: translateX(0.9rem); } to { opacity: 1; transform: none; } }

  /* Above the fold: play once on load, since there is no scroll to drive it yet. */
  .hero-copy > * { animation: rise 720ms cubic-bezier(0.22, 0.68, 0.24, 1) both; }
  .hero-copy > :nth-child(2) { animation-delay: 90ms; }
  .hero-copy > :nth-child(3) { animation-delay: 170ms; }
  .hero-copy > :nth-child(4) { animation-delay: 250ms; }
  .hero-copy > :nth-child(5) { animation-delay: 330ms; }
  .ledger-card { animation: settle 900ms cubic-bezier(0.22, 0.68, 0.24, 1) 160ms both; }

  /* A slow band travelling down the receipt — the capture step, suggested rather than faked. */
  .ledger-card::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    block-size: 38%;
    background: linear-gradient(180deg, transparent, rgba(182, 236, 206, 0.5), transparent);
    animation: scan 6s cubic-bezier(0.5, 0, 0.5, 1) 1.4s infinite;
    pointer-events: none;
  }
  /* Children of .ledger-card in document order: heading, three rules, avatars, caption. */
  .ledger-card > * { animation: rise 620ms ease-out both; }
  .ledger-card > :nth-child(1) { animation-delay: 340ms; }
  .ledger-card > :nth-child(2) { animation-delay: 420ms; }
  .ledger-card > :nth-child(3) { animation-delay: 500ms; }
  .ledger-card > :nth-child(4) { animation-delay: 580ms; }
  .ledger-card > :nth-child(5) { animation-delay: 660ms; }
  .ledger-card > :nth-child(6) { animation-delay: 740ms; }

  .cta { transition: transform 140ms ease, box-shadow 140ms ease, background-color 140ms ease; }
  .process-grid li { transition: background-color 260ms ease, transform 260ms ease; }
  .process-grid li:hover { background: var(--paper); transform: translateY(-4px); }
  .claim-list div { transition: background-color 220ms ease; }
  .claim-list div:hover { background: rgba(182, 236, 206, 0.35); }
  .shots img { transition: transform 320ms cubic-bezier(0.22, 0.68, 0.24, 1), box-shadow 320ms ease; }
  .shots li:hover img { transform: translateY(-0.5rem); box-shadow: 0 26px 56px rgba(26, 26, 22, 0.16); }
  .text-link span { display: inline-block; transition: transform 200ms ease; }
  .text-link:hover span { transform: translateX(0.35rem); }

  /* Scroll-driven reveals. Progressive enhancement: without view timelines the content is
     simply already visible, which is why the default state is never hidden. */
  @supports (animation-timeline: view()) {
    .process > .eyebrow, .process > h2,
    .privacy-panel > *, .live-copy > *, .gallery-copy, .final-cta > * {
      animation: rise 700ms cubic-bezier(0.22, 0.68, 0.24, 1) both;
      animation-timeline: view();
      animation-range: entry 5% cover 26%;
    }

    /* The three screens arrive left to right, the order you'd actually use them in. */
    .shots li {
      animation: rise 780ms cubic-bezier(0.22, 0.68, 0.24, 1) both;
      animation-timeline: view();
      animation-range: entry 6% cover 30%;
    }
    .shots li:nth-child(2) { animation-range: entry 6% cover 35%; }
    .shots li:nth-child(3) { animation-range: entry 6% cover 40%; }
    .process-grid li {
      animation: rise 760ms cubic-bezier(0.22, 0.68, 0.24, 1) both;
      animation-timeline: view();
      animation-range: entry 8% cover 30%;
    }
    .process-grid li:nth-child(2) { animation-range: entry 8% cover 34%; }
    .process-grid li:nth-child(3) { animation-range: entry 8% cover 38%; }

    /* Each row's claimant arrives after the item, echoing how a Live Split fills in. */
    .claim-list div {
      animation: claim 640ms cubic-bezier(0.22, 0.68, 0.24, 1) both;
      animation-timeline: view();
      animation-range: entry 10% cover 32%;
    }
    .claim-list div:nth-child(2) { animation-range: entry 10% cover 38%; }
    .claim-list div:nth-child(3) { animation-range: entry 10% cover 44%; }
  }
}

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