/* ==========================================================
   shared.css — loaded on every page. Cached by the browser
   after the first page visit, so the second page loads faster.
   Page-specific rules (hero, pricing, tools, chat, etc.) live
   in home.css / app.css and are linked AFTER this file, so
   they can override a shared rule (e.g. section padding)
   just by redeclaring it — no need to duplicate the whole rule.
   ========================================================== */

:root{
  --paper:#F1ECDD;
  --paper-raised:#FAF6EA;
  --paper-deep:#E6DFC8;
  --ink:#16281D;
  --ink-2:#1E3627;
  --ink-soft:#3B5943;
  --ink-faint:#626D65;
  --line:#D8CFB0;
  --line-strong:#C3B78F;
  --gold:#A97A2E;
  --gold-bright:#D9A94A;
  --gold-soft:#EFDCAE;
  --gold-deep:#7C5A20;
  --clay:#A6472E;
  --teal:#2E6B78;
  --font-display:'Fraunces',serif;
  --font-mono:'JetBrains Mono',monospace;
  --shadow-color:rgba(20,38,29,0.16);
  --shadow-color-strong:rgba(20,38,29,0.28);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
html,body{margin:0;padding:0;}
body{
  font-family:'Inter',system-ui,sans-serif;
  background:var(--paper);
  color:var(--ink);
  min-height:100vh;
  /* faint paper-fiber texture — cheap to render, adds real tactility */
  background-image:
    radial-gradient(rgba(20,38,29,0.035) 1px, transparent 1px),
    radial-gradient(rgba(20,38,29,0.025) 1px, transparent 1px);
  background-size:34px 34px, 22px 22px;
  background-position:0 0, 11px 11px;
}
h1,h2,h3{font-family:var(--font-display);margin:0;}
p{margin:0;}
a{color:inherit;}
button{font-family:'Inter',sans-serif;}
.hidden{display:none !important;}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px;}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}

/* ---- Brand seal (the signature element — an embossed stamp,
   not a flat logo square, echoing the paperwork/ledger subject) ---- */
.seal{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  border:1.5px solid currentColor;
  flex-shrink:0;
  transform:rotate(-4deg);
  animation:sealPress .6s cubic-bezier(.22,1.6,.4,1) both;
}
.seal::before{
  content:"";
  position:absolute;inset:3px;
  border:1px dashed currentColor;
  border-radius:50%;
  opacity:.5;
}
.seal-text{font-family:var(--font-display);font-weight:700;position:relative;line-height:1;}
.seal-sm{width:30px;height:30px;}
.seal-sm .seal-text{font-size:11px;}
@keyframes sealPress{
  0%{transform:scale(1.7) rotate(-16deg);opacity:0;}
  55%{transform:scale(0.9) rotate(4deg);opacity:1;}
  100%{transform:scale(1) rotate(-4deg);opacity:1;}
}
@media (prefers-reduced-motion: reduce){
  .seal{animation:none;transform:rotate(-4deg);}
}

/* ---- Nav (shared shell — every page has the same header bar) ---- */
#navbar{position:sticky;top:0;z-index:40;background:rgba(241,236,221,0.86);backdrop-filter:blur(8px) saturate(1.1);border-bottom:1px solid var(--line-strong);}
#navbar .wrap{display:flex;align-items:center;justify-content:space-between;padding-top:13px;padding-bottom:13px;}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:600;font-size:19px;background:none;border:none;cursor:pointer;color:var(--ink);text-decoration:none;}
.nav-links{display:flex;gap:4px;align-items:center;}
.nav-links a, .nav-links button{background:none;border:none;cursor:pointer;font-size:14px;color:var(--ink-soft);padding:8px 12px;border-radius:4px;text-decoration:none;transition:background .15s ease, color .15s ease;}
.nav-links a:hover, .nav-links button:hover{background:var(--paper-deep);color:var(--ink);}
.nav-account{display:flex;align-items:center;gap:10px;}
.plan-badge{font-size:11px;text-transform:uppercase;letter-spacing:0.05em;padding:4px 9px;border-radius:20px;border:1px solid var(--line-strong);color:var(--ink-soft);box-shadow:inset 0 1px 2px rgba(20,38,29,0.06);}
.plan-badge.paid{background:var(--ink);color:var(--paper-raised);border-color:var(--ink);}

/* ---- Buttons ---- */
.btn{
  font-size:14px;font-weight:600;padding:9px 16px;border-radius:5px;border:1px solid var(--ink);cursor:pointer;
  text-decoration:none;display:inline-block;
  box-shadow:0 1px 0 rgba(20,38,29,0.06);
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}
.btn-primary{background:var(--ink);color:var(--paper-raised);}
.btn-primary:hover{background:#0F1E15;transform:translateY(-1px);box-shadow:0 6px 14px var(--shadow-color-strong);}
.btn-ghost{background:transparent;color:var(--ink);}
.btn-ghost:hover{background:var(--paper-deep);transform:translateY(-1px);}
.btn-gold{background:linear-gradient(180deg, var(--gold-bright), var(--gold));color:var(--paper-raised);border-color:var(--gold-deep);}
.btn-gold:hover{background:linear-gradient(180deg, var(--gold), var(--gold-deep));transform:translateY(-1px);box-shadow:0 6px 14px rgba(124,90,32,0.35);}
.btn:active{transform:translateY(0);box-shadow:0 1px 2px var(--shadow-color);}
.btn:disabled{opacity:0.5;cursor:default;transform:none !important;box-shadow:none !important;}
.btn-sm{font-size:12.5px;padding:6px 11px;}

/* ---- Section shell (page CSS may override padding, etc.) ---- */
section{padding:64px 0;}
.section-head{margin-bottom:36px;max-width:600px;}
.section-eyebrow{font-family:var(--font-mono);font-size:12px;letter-spacing:0.08em;text-transform:uppercase;color:var(--gold-deep);display:block;margin-bottom:10px;}
.section-head h2{font-size:30px;font-weight:600;letter-spacing:-0.01em;}
.section-head p{margin-top:12px;color:var(--ink-soft);font-size:15.5px;line-height:1.6;}

/* ---- Footer ---- */
footer{padding:36px 0;border-top:1px solid var(--line-strong);}
footer .wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;}
footer p{font-size:12.5px;color:var(--ink-faint);}
footer .footer-legal{margin-top:4px;}
footer a{text-decoration:underline;}

/* ---- Modals / overlay / toast ---- */
.overlay{position:fixed;inset:0;background:rgba(10,20,14,0.6);z-index:100;display:flex;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(2px);}
.modal{
  background:var(--paper-raised);border-radius:10px;max-width:460px;width:100%;padding:28px;position:relative;
  max-height:85vh;overflow-y:auto;box-shadow:0 24px 60px rgba(10,20,14,0.35);
  animation:modalIn .22s cubic-bezier(.2,.9,.3,1) both;
}
@keyframes modalIn{ from{opacity:0;transform:translateY(10px) scale(.98);} to{opacity:1;transform:translateY(0) scale(1);} }
@media (prefers-reduced-motion: reduce){ .modal{animation:none;} }
.modal.wide{max-width:640px;}
.modal-close{position:absolute;top:14px;right:14px;background:none;border:none;font-size:18px;cursor:pointer;color:var(--ink-faint);width:28px;height:28px;}
.modal-close:hover{color:var(--ink);}
.modal h3{font-size:20px;margin-bottom:6px;}
.modal .modal-sub{font-size:13.5px;color:var(--ink-soft);margin-bottom:20px;line-height:1.5;}
.field{margin-bottom:14px;}
.field label{display:block;font-size:12.5px;color:var(--ink-soft);margin-bottom:5px;}
.field input{width:100%;font-family:'Inter',sans-serif;font-size:14px;padding:9px 11px;border:1px solid var(--line-strong);border-radius:4px;background:var(--paper);color:var(--ink);}
.field input:focus{border-color:var(--gold);outline:none;box-shadow:0 0 0 2px var(--gold-soft);}
.demo-flag{font-size:12px;background:var(--gold-soft);color:var(--gold-deep);padding:8px 10px;border-radius:4px;margin-bottom:16px;line-height:1.5;}
.modal-plans{display:flex;flex-direction:column;gap:10px;margin-top:6px;}
.modal-plan-row{display:flex;justify-content:space-between;align-items:center;border:1px solid var(--line-strong);border-radius:6px;padding:12px 14px;}
.modal-plan-row .mp-name{font-weight:600;font-size:14px;}
.modal-plan-row .mp-price{font-size:12.5px;color:var(--ink-soft);}

#toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--ink);color:var(--paper-raised);padding:12px 20px;border-radius:6px;font-size:13.5px;box-shadow:0 10px 24px rgba(10,20,14,0.3);opacity:0;pointer-events:none;transition:opacity .25s ease, transform .25s ease;z-index:200;}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* ---- Scroll reveal (generic — applied by initScrollReveal() in shared.js) ---- */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1);}
.reveal.revealed{opacity:1;transform:translateY(0);}
@media (prefers-reduced-motion: reduce){
  .reveal{transition:none;opacity:1;transform:none;}
}

/* ---- Shared responsive baseline ---- */
@media (max-width:600px){
  .nav-links{display:none;}
}