/* ============================================================
   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;white-space:nowrap}
.hdr-link:hover{background:rgba(255,255,255,.1);color:#fff}
.hdr-nav{display:flex;align-items:center;gap:10px}

/* ---------- the products menu ----------

   One product on it today and a list that grows. It is a <details> rather than a scripted
   menu on purpose: it opens on a phone, opens from the keyboard, and opens on a page whose
   JavaScript has not loaded or has thrown. A header that only works when everything else
   does is a header that hides the catalogue at exactly the moment somebody is looking for it.

   Adding a product is one <a class="menu-item"> in the panel. Nothing here counts them. */
.menu{position:relative}
.menu>summary{
  list-style:none;cursor:pointer;user-select:none;
  color:rgba(255,255,255,.8);font-size:.9rem;font-weight:500;
  padding:9px 14px;border:1px solid rgba(255,255,255,.2);border-radius:999px;
  display:flex;align-items:center;gap:7px;white-space:nowrap;
}
.menu>summary::-webkit-details-marker{display:none}
.menu>summary:hover{background:rgba(255,255,255,.1);color:#fff}
.menu>summary:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.menu[open]>summary{background:rgba(255,255,255,.12);color:#fff}
.menu-caret{width:9px;height:9px;flex:none;transition:transform .18s}
.menu[open] .menu-caret{transform:rotate(180deg)}

.menu-panel{
  position:absolute;top:calc(100% + 10px);right:0;z-index:70;
  min-width:min(320px,calc(100vw - 32px));
  background:var(--paper-2);border:1px solid var(--rule);border-radius:var(--r-md);
  padding:8px;box-shadow:0 18px 44px rgba(8,37,32,.24);
  animation:menuIn .16s ease-out;
}
@keyframes menuIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}

.menu-item{display:block;text-decoration:none;color:var(--ink);padding:11px 12px;border-radius:var(--r-sm)}
.menu-item:hover,.menu-item:focus-visible{background:var(--paper);outline:none}
.menu-item b{display:block;font-weight:650;font-size:.95rem}
.menu-item span{display:block;color:var(--ink-soft);font-size:.85rem;margin-top:3px;line-height:1.45}

/* What is not built yet, kept on the list as a row rather than left off it. A shopkeeper who
   cannot see it writes in to ask for it; one who sees it marked "soon" does not have to. */
.menu-item.soon{pointer-events:none;opacity:.5}
.menu-item .tag{
  float:right;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-soft);border:1px solid var(--rule);border-radius:999px;padding:2px 7px;margin-left:8px;
}

/* Three things across a phone's header, and on a 390px screen they came to about 390px — so
   "Your account" broke over two lines and stood the bar up. Everything shrinks together rather
   than one of them being dropped: a header that hides the account link on a phone hides it from
   the people most likely to be renewing on one. */
@media (max-width:470px){
  .hdr-link,.menu>summary{font-size:.82rem;padding:7px 11px}
  .menu>summary{gap:6px}
  .hdr-in{gap:8px}
}
@media (max-width:520px){
  .menu-panel{right:auto;left:50%;transform:translateX(-50%)}
}

/* ---------- 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,.field select,.field textarea{
  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;
}
/* Resizable down the page only. Sideways drags the card wider than its column on a phone,
   which is a layout somebody can break by accident and never put back. */
.field textarea{resize:vertical;line-height:1.55;min-height:132px}
/* The arrow, drawn rather than left to the platform: Safari and Chrome disagree by about ten
   pixels of padding, and next to a text box of the same height it shows. */
.field select{
  appearance:none;-webkit-appearance:none;padding-right:44px;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236B6A60' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;
}
.field select:invalid{color:#A9A79B}
.field input::placeholder,.field textarea::placeholder{color:#A9A79B}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--ledger);box-shadow:0 0 0 3px rgba(14,58,47,.1);outline:none}
/* Said on the label rather than by leaving a field unmarked, because everything else on this
   form is required and an unmarked box reads as one more thing that must be filled in. */
.field label .opt{font-size:9.5px;letter-spacing:.1em;color:var(--ink-soft);opacity:.75}

/* Show/hide on a password box.
   The password typed here is typed again later, into the program, often on another machine and
   often by somebody reading it off a note. A typo made behind dots costs a support call, so
   being able to read it back is worth more than hiding it from the room. */
.pw{position:relative}
.pw input{padding-right:78px}
.pw button{
  position:absolute;top:0;right:0;height:100%;padding:0 15px;
  background:none;border:0;cursor:pointer;
  font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-soft);
}
.pw button:hover{color:var(--ink)}
.pw button:focus-visible{outline:2px solid var(--ledger);outline-offset:-3px;border-radius:var(--r-md)}
.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}
}