/* ============================================================
   BILLOREN — the design system, in one place.

   Direction: "ledger cloth & thermal roll" — ledger cloth green, receipt paper,
   rubber-stamp vermilion.

   This file exists because the three pages had drifted into three different
   products: the landing page in this palette, the account and privacy pages in
   a blue-and-white one left over from before there was a design. Anything a
   visitor sees on more than one page lives here now — the tokens, the header,
   the footer, buttons, form fields — so the next page added is the same
   product as the last, without anybody having to remember to make it so.

   What stays inline in a page is what only that page has: the landing page's
   hero, its receipt animation and its plan cards; the account page's facts
   list. A rule used twice belongs here.
   ============================================================ */

:root{
  --ledger:#0E3A2F;        /* ledger cloth green  */
  --ledger-deep:#082520;   /* deeper fold          */
  --paper:#EFEDE4;        /* receipt paper        */
  --paper-2:#F7F6F1;      /* card paper           */
  --ink:#16201C;          /* writing ink          */
  --ink-soft:#5C6862;     /* faded ink            */
  --rule:#D6D2C4;         /* ledger rule line     */
  --stamp:#DB4325;        /* rubber-stamp red     */
  --amber:#FFB020;        /* the total on a bill  */
  --good:#0F7A4A;         /* nothing to do here   */

  --r-lg:20px; --r-md:14px; --r-sm:10px;
  --pad: clamp(16px, 5vw, 24px);
  --sect: clamp(56px, 11vw, 104px);

  --f-display:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;
  --f-body:"Instrument Sans",ui-sans-serif,system-ui,sans-serif;
  --f-mono:"Space Mono",ui-monospace,monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--f-body);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--f-display);margin:0;line-height:1.02;letter-spacing:-.03em;font-weight:700}
p{margin:0}

.wrap{width:min(1140px,100% - 2*var(--pad));margin-inline:auto}
.wrap-narrow{width:min(680px,100% - 2*var(--pad));margin-inline:auto}
.sect{padding-block:var(--sect)}

/* eyebrow: mono label, the vernacular of a printed slip */
.eyebrow{
  font-family:var(--f-mono);font-size:11px;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;color:var(--stamp);
  display:flex;align-items:center;gap:10px;margin-bottom:16px;
}
.eyebrow::after{content:"";height:1px;flex:1;background:var(--rule)}
.on-dark .eyebrow::after{background:rgba(255,255,255,.18)}
.on-dark .eyebrow{color:#F0B67F}

.h2{font-size:clamp(1.9rem,7vw,3rem)}
.lede{color:var(--ink-soft);font-size:clamp(1rem,3.6vw,1.12rem);max-width:56ch;margin-top:14px}
.on-dark .lede{color:rgba(255,255,255,.66)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--f-body);font-weight:600;font-size:1rem;
  padding:16px 24px;border-radius:999px;border:1px solid transparent;
  text-decoration:none;cursor:pointer;transition:transform .18s,box-shadow .18s,background .18s;
  min-height:52px;
}
.btn-primary{background:var(--stamp);color:#fff;box-shadow:0 8px 20px -8px rgba(219,67,37,.8)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 26px -10px rgba(219,67,37,.9)}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.28)}
.btn-ghost:hover{background:rgba(255,255,255,.08)}
.btn-ink{background:var(--ledger);color:#fff}
.btn-ink:hover{transform:translateY(-2px)}
.btn-block{width:100%}
.btn[disabled]{opacity:.55;cursor:default;transform:none;box-shadow:none}
:where(a,button,input,select,textarea):focus-visible{
  outline:2px solid var(--stamp);outline-offset:3px;border-radius:6px;
}

/* A button that is really a link: "sign out", "I forgot my password". */
.linkish{
  display:inline-block;margin-top:16px;background:none;border:0;padding:0;
  font:inherit;color:var(--stamp);cursor:pointer;text-decoration:underline;
  text-underline-offset:3px;
}

/* ---------- header ---------- */
.hdr{
  position:sticky;top:0;z-index:60;
  background:rgba(14,58,47,.82);backdrop-filter:blur(14px) saturate(1.3);
  border-bottom:1px solid rgba(255,255,255,0);transition:border-color .25s;
}
.hdr.stuck{border-bottom-color:rgba(255,255,255,.12)}
.hdr-in{display:flex;align-items:center;justify-content:space-between;gap:12px;height:62px}
.logo{display:flex;align-items:center;gap:9px;color:#fff;text-decoration:none;font-family:var(--f-display);font-weight:800;letter-spacing:-.03em;font-size:1.18rem}
.logo span{font-size:1.15rem}
.logo-mark{width:34px;height:34px;flex:none}
.logo-sub{
  font-family:var(--f-mono);font-size:10.5px;font-style:normal;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--stamp);
}
@media (max-width:420px){ .logo-sub{display:none} }
.hdr-link{color:rgba(255,255,255,.8);text-decoration:none;font-size:.9rem;font-weight:500;padding:9px 14px;border:1px solid rgba(255,255,255,.2);border-radius:999px}
.hdr-link:hover{background:rgba(255,255,255,.1);color:#fff}

/* ---------- forms ---------- */
.form-card{background:var(--paper-2);color:var(--ink);border-radius:var(--r-lg);padding:clamp(20px,5vw,32px)}
.field{margin-bottom:18px}
.field label{display:block;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:8px}
.field input{
  width:100%;font-family:var(--f-body);font-size:16px;color:var(--ink);
  background:#fff;border:1px solid var(--rule);border-radius:var(--r-md);
  padding:15px 16px;min-height:54px;transition:border-color .18s,box-shadow .18s;
}
.field input::placeholder{color:#A9A79B}
.field input:focus{border-color:var(--ledger);box-shadow:0 0 0 3px rgba(14,58,47,.1);outline:none}
.two{display:grid;gap:18px}
.hint{font-size:.83rem;color:var(--ink-soft);margin-top:8px}
.legal{font-size:.82rem;color:var(--ink-soft);margin-top:14px;text-align:center}

/* ---------- something to say ----------
   Three tones and no more. A page that can shout in six ways teaches people to
   stop reading it. */
.said{
  padding:13px 15px;border-radius:var(--r-md);margin-bottom:18px;
  font-size:.94rem;border:1px solid transparent;
}
.said-bad{background:#FBE9E4;border-color:#F0C4B7;color:#96301A}
.said-ok{background:#E4EFE9;border-color:#BFD8CB;color:var(--ledger)}
.said-warn{background:#FDF3E3;border-color:#EFD9AE;color:#8A5210}

/* ---------- footer ---------- */
.ftr{border-top:1px solid var(--rule);padding-block:30px;font-size:.88rem;color:var(--ink-soft)}
.ftr-in{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;justify-content:space-between}
.ftr a{text-decoration:none;border-bottom:1px solid var(--rule)}
.ftr a:hover{color:var(--ink);border-color:var(--stamp)}
.ftr nav{display:flex;flex-wrap:wrap;gap:18px}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}