:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html,body{margin:0}
img{max-width:100%}
[hidden]{display:none!important}

/* Layout: one narrow column, phone-first; the agreement is a receipt-like card, the only object on the page. */
:root{
  --bg:#F5F7FA; --fg:#0F0E47; --muted:#434C68; --line:#D6DCE8; --surface:#FFFFFF; --paste-bg:#FFFFFF; --paste-line:#8E98B4;
  --accent:#1F7A4D; --accent-ink:#FFFFFF; --accent-soft:#E2F1E9;
  --warn:#8F4D08; --warn-soft:#FBEBD6; --bad:#B3362B; --bad-soft:#F8E1DE;
  --r:12px; --r-lg:16px; --r-pill:999px;
  --shadow:0 1px 2px rgba(15,14,71,.06),0 4px 14px rgba(15,14,71,.07);
  --shadow-lift:0 2px 4px rgba(15,14,71,.08),0 10px 24px rgba(15,14,71,.10);
  --display:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif;
  --body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --shadow:0 1px 2px rgba(0,0,0,.35),0 4px 14px rgba(0,0,0,.30);
  --shadow-lift:0 2px 4px rgba(0,0,0,.4),0 10px 24px rgba(0,0,0,.38);
  --bg:#0A0930; --fg:#E8EAF5; --muted:#B2B7D6; --line:#272657; --surface:#14134A; --paste-bg:#1C1B5E; --paste-line:#4F4E91;
  --accent:#4ABF7C; --accent-ink:#06210F; --accent-soft:#163A2B;
  --warn:#E8A452; --warn-soft:#3A2A14; --bad:#F08A80; --bad-soft:#3E1F1C; color-scheme:dark}}
:root[data-theme="dark"]{
  --shadow:0 1px 2px rgba(0,0,0,.35),0 4px 14px rgba(0,0,0,.30);
  --shadow-lift:0 2px 4px rgba(0,0,0,.4),0 10px 24px rgba(0,0,0,.38);
  --bg:#0A0930; --fg:#E8EAF5; --muted:#B2B7D6; --line:#272657; --surface:#14134A; --paste-bg:#1C1B5E; --paste-line:#4F4E91;
  --accent:#4ABF7C; --accent-ink:#06210F; --accent-soft:#163A2B;
  --warn:#E8A452; --warn-soft:#3A2A14; --bad:#F08A80; --bad-soft:#3E1F1C; color-scheme:dark}

*{box-sizing:border-box}
body{background:var(--bg);color:var(--fg);font-family:var(--body);font-size:16px;line-height:1.5;margin:0;padding-inline:16px;padding-block:0 96px}
.wrap{max-width:520px;margin:0 auto}
header{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-block:20px 8px}
header a{color:inherit;text-decoration:none}
.brand{font-family:var(--display);font-weight:800;font-size:21px;letter-spacing:-.01em;white-space:nowrap}
.brand span{color:var(--accent);margin-left:4px}
.tag{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
h1{font-family:var(--display);font-weight:700;font-size:30px;line-height:1.1;text-wrap:balance;margin:16px 0 8px}
h2{font-family:var(--display);font-weight:700;font-size:18px;margin:28px 0 10px}
p{margin:0 0 12px}
.muted{color:var(--muted)}
.small{font-size:13px}
label{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:4px}
textarea,input,select{width:100%;font:inherit;color:inherit;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;min-width:0}
textarea{min-height:120px;resize:vertical}
textarea:focus,input:focus,select:focus,button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.field{margin-bottom:12px}
.row{display:flex;gap:10px;flex-wrap:wrap}
.row>*{flex:1 1 140px;min-width:0}
button{font:inherit;font-weight:600;cursor:pointer;border-radius:var(--r);border:1px solid var(--line);background:var(--surface);color:var(--fg);padding:13px 16px;min-height:48px}
button.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);box-shadow:var(--shadow)}
button.danger{color:var(--bad);border-color:var(--bad)}
/* These are real choices, not footnotes - big enough to read and to hit with a thumb. */
button.link{border:0;background:none;font-size:15px;padding:8px 2px;min-height:0;color:var(--accent);font-weight:600;text-decoration:underline}
button[disabled]{opacity:.55;cursor:default}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.actions button{flex:1 1 auto}
.note{font-size:13px;color:var(--muted);margin-top:8px}
.err{color:var(--bad);font-size:14px;margin-top:8px}

/* the receipt */
.receipt{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:20px 18px 22px;position:relative;margin-top:16px}
.receipt::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:8px;background:
  radial-gradient(circle at 6px 8px,var(--bg) 5px,transparent 5.5px) repeat-x;background-size:14px 8px}
.r-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.r-title{font-family:var(--display);font-weight:700;font-size:22px;line-height:1.15;margin:0}
.r-id{font-family:var(--mono);font-size:11px;color:var(--muted);white-space:nowrap;padding-top:6px}
.terms{list-style:none;padding:0;margin:14px 0 0;border-top:1px dashed var(--line)}
.terms li{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px dashed var(--line);font-size:15px}
.terms li span:first-child{color:var(--muted);flex:0 0 auto}
.terms li span:last-child{text-align:right;min-width:0}
.amount{font-family:var(--mono);font-size:26px;font-weight:500;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.conds{margin:12px 0 0;padding-left:18px;font-size:14px}
.conds li{margin-bottom:4px}
.parties{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.party{border:1px solid var(--line);border-radius:6px;padding:10px 12px;min-width:0}
.party b{display:block;font-weight:600;overflow-wrap:anywhere}
.party .st{font-size:12px;text-transform:uppercase;letter-spacing:.06em;margin-top:4px}
.party.ok{border-color:var(--accent);background:var(--accent-soft)}
.party.ok .st{color:var(--accent)}
.party.wait .st{color:var(--warn)}
.stamp{position:absolute;right:14px;top:14px;transform:rotate(-8deg);font-family:var(--display);font-weight:800;font-size:14px;letter-spacing:.14em;text-transform:uppercase;border:2px solid currentColor;border-radius:4px;padding:3px 8px;opacity:.9}
.stamp.agreed{color:var(--accent)}
.stamp.done{color:var(--accent)}
.stamp.cancelled{color:var(--bad)}
.pill{display:inline-block;font-size:12px;font-weight:600;padding:3px 9px;border-radius:999px;background:var(--warn-soft);color:var(--warn)}
.pill.ok{background:var(--accent-soft);color:var(--accent)}
.pill.bad{background:var(--bad-soft);color:var(--bad)}
.due{margin-top:12px;font-size:14px}
.cal{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:12px}
.cal .btnlink{display:inline-block;padding:8px 14px;font-size:14px}
.cal .link{font-size:13px}
.history{list-style:none;padding:0;margin:8px 0 0;font-size:13px;color:var(--muted)}
.history li{display:flex;gap:10px;padding:5px 0;border-bottom:1px solid var(--line)}
.history time{font-family:var(--mono);font-size:12px;flex:0 0 auto}

/* lists */
.list{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.list a{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:4px 10px;align-items:center;padding:14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);color:inherit;text-decoration:none}
.list a:hover{border-color:var(--accent)}
.list .t{display:block;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Title and the who/when line stack in one flexible column so long names shorten instead of pushing the row wide. */
.list .w{display:block;font-size:13px;color:var(--muted);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.list .meta{flex:1 1 auto;min-width:0}
.list .a{font-family:var(--mono);font-size:14px;flex:0 0 auto}
.list .pill{flex:0 1 auto;max-width:8.5em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.empty{border:1px dashed var(--line);border-radius:6px;padding:16px;color:var(--muted);font-size:14px}
.example{font-size:12px;color:var(--muted);display:flex;justify-content:space-between;gap:8px;margin-bottom:4px}
.share{background:var(--accent-soft);border-radius:6px;padding:12px 14px;margin-top:16px}
.tell{background:var(--accent-soft);border:1px solid var(--accent);border-radius:6px;padding:12px 14px;margin-top:16px}
.share code{display:block;font-family:var(--mono);font-size:12px;overflow-wrap:anywhere;margin:6px 0 10px;color:var(--fg)}
.toast{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--fg);color:var(--bg);padding:8px 14px;border-radius:999px;font-size:14px;opacity:0;transition:opacity .2s;pointer-events:none}
.toast.on{opacity:1}
.how{display:grid;gap:6px;margin:0;padding-left:20px;font-size:14px;color:var(--muted)}
@media (prefers-reduced-motion:reduce){.toast{transition:none}}
.foot{font-size:11px;line-height:1.45;color:var(--muted);opacity:.85;margin-top:64px;border-top:1px solid var(--line);padding-top:12px}
.btnlink{display:block;text-align:center;font-weight:600;border-radius:var(--r);border:1px solid var(--accent);background:var(--accent);color:var(--accent-ink);padding:14px 16px;text-decoration:none;box-shadow:var(--shadow)}
.btnlink:hover{opacity:.92}
/* Secondary link-button: the loop invitation must not compete with the real next step. */
.btnlink.quiet{background:var(--surface);border-color:var(--line);color:var(--fg)}
.r-meta{font-family:var(--mono);font-size:11px;color:var(--muted);margin-top:14px}
a{color:var(--accent)}
/* The moment after confirming. Big, calm, obviously finished. */
.done-hero{text-align:center;padding:28px 0 18px}
.done-tick{width:72px;height:72px;margin:0 auto 14px;border-radius:50%;background:var(--accent);color:#fff;font-size:36px;line-height:72px}
.done-hero h1{margin:0 0 6px}
.done-hero p{margin:0}
/* Two jobs, two tabs: making a new record, and finding one you already have. */
.tabs{display:flex;gap:6px;margin:0 0 16px}
.tabs button{flex:1 1 auto;padding:9px 10px;border:1px solid var(--line);background:var(--surface);color:var(--muted);border-radius:8px;font:inherit;font-weight:600;cursor:pointer}
.tabs button.on{background:var(--fg);border-color:var(--fg);color:var(--bg)}
.filters{display:flex;gap:6px;margin:0 0 12px}
.filters button{padding:6px 12px;border:1px solid var(--line);background:var(--surface);color:var(--muted);border-radius:999px;font:inherit;font-size:13px;cursor:pointer}
.filters button.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
/* The check screen: one line per thing we found, text until you tap Change. Reading, not auditing. */
.check{list-style:none;padding:0;margin:14px 0 18px;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--surface);box-shadow:var(--shadow)}
.crow + .crow{border-top:1px solid var(--line)}
.crow-head{display:flex;align-items:center;gap:12px;width:100%;padding:13px 14px;background:none;border:0;text-align:left;cursor:pointer;color:var(--fg);font:inherit}
.crow-icon{flex:0 0 34px;height:34px;border-radius:10px;background:var(--accent-soft);display:flex;align-items:center;justify-content:center;font-size:14px}
.crow-text{flex:1 1 auto;min-width:0}
.crow-label{display:block;font-size:12px;color:var(--muted);letter-spacing:.02em}
.crow-val{display:block;font-weight:600;line-height:1.35;word-break:break-word}
.crow.empty .crow-val{font-weight:400;color:var(--muted)}
.crow-edit{flex:0 0 auto;font-size:13px;color:var(--accent);font-weight:600}
.crow.open{background:var(--accent-soft)}
.crow-body{padding:0 14px 14px}
.crow-body .field:last-child{margin-bottom:0}
/* The first thing a stranger from WhatsApp reads. Sits above the receipt and explains the page. */
.welcome{background:var(--accent-soft);border:1px solid var(--accent);border-radius:6px;padding:12px 14px;margin-bottom:16px}
/* Three numbered steps on the home screen: people asked for instructions, not a paragraph. */
.steps{margin:14px 0 12px;padding-left:22px}
.steps li{margin:6px 0;line-height:1.45}
.banner{background:var(--warn-soft);color:var(--fg);border-radius:6px;padding:10px 12px;font-size:14px;margin-top:12px}
.banner .link{display:inline;padding:0;font-size:inherit}
.mine{margin-top:16px;font-size:14px}
.mine summary{cursor:pointer;color:var(--muted)}
.mine code{display:block;font-family:var(--mono);font-size:12px;overflow-wrap:anywhere;margin:6px 0 8px}
/* The paste box must be the obvious thing on the page, in both themes. */
.pastebox{position:relative}
.pastebox textarea{min-height:150px;padding-right:84px;background:var(--paste-bg);border:2px solid var(--paste-line);box-shadow:inset 0 1px 2px rgba(0,0,0,.06)}
.pastebox textarea:focus{border-color:var(--accent);outline:none}
.pastebox textarea::placeholder{color:var(--muted);opacity:1;font-size:16px}
.pastebtn{position:absolute;right:10px;top:10px;padding:6px 12px;font-size:14px;background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
@media (max-width:480px){header{flex-wrap:wrap;gap:2px 12px}header .tag{flex-basis:100%;font-size:11px}}
/* invoice */
.invcard{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:12px 14px;margin-top:14px}
.invcard .actions{margin-top:10px}.invcard .actions .btnlink{flex:1 1 auto}
.inv-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-end;flex-wrap:wrap}
.inv-label{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:2px}
.inv-meta{text-align:right;font-size:14px}
.inv-parties{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:18px;padding-top:14px;border-top:1px dashed var(--line)}
.inv-parties>div{min-width:0;overflow-wrap:anywhere}
.inv-table{width:100%;border-collapse:collapse;margin-top:18px;font-size:15px}
.inv-table th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);padding:6px 0;border-bottom:1px solid var(--line)}
.inv-table td{padding:10px 0;border-bottom:1px dashed var(--line);vertical-align:top}
.inv-table .num{text-align:right;font-family:var(--mono);white-space:nowrap}
.inv-table .total td{border-bottom:0;font-weight:600;font-size:18px;padding-top:12px}
.inv-pay{margin-top:16px;padding:12px 14px;background:var(--accent-soft);border-radius:6px;font-size:14px}
@media print{body{background:#fff;color:#000}.noprint,header .tag,.foot,.toast{display:none!important}.receipt{border:1px solid #999;box-shadow:none}.receipt::after{display:none}.inv-pay{background:#eee}}
.receipt.invoice .stamp{top:12px;right:12px}
.receipt.invoice .inv-head{padding-top:30px}
.theme{border:1px solid var(--line);background:var(--surface);color:var(--fg);border-radius:999px;width:34px;height:34px;padding:0;font-size:16px;line-height:1;flex:0 0 auto}
.theme:hover{border-color:var(--accent)}
@media (max-width:480px){header{align-items:center}header .brand{flex:1 1 auto}header .theme{order:2}header .tag{order:3}}
.accept{margin:6px 0 0;font-size:13px}
.accept a{color:inherit}
.vatbox{border:1px solid var(--line);border-radius:6px;padding:10px 12px;margin:4px 0 12px;background:var(--surface)}
.vatbox .check{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0 0 6px;cursor:pointer;text-transform:none;letter-spacing:0;font-size:15px;color:var(--fg)}
.vatbox .check b{white-space:nowrap}
.vatbox .check input{width:auto;margin:0}
.pastehint{margin:8px 0 0;padding:10px 12px;border-radius:6px;background:var(--warn-soft);font-size:14px}
.shots{margin-top:8px}
.shots .link{font-size:14px}
.shotlist{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;align-items:flex-start}
.shotlist p{flex-basis:100%;margin:0}
.shot{position:relative;display:inline-block}
.shot img{width:72px;height:128px;object-fit:cover;object-position:top;border:1px solid var(--line);border-radius:6px;display:block;background:var(--surface)}
.shot button{position:absolute;top:-6px;right:-6px;width:22px;height:22px;padding:0;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--fg);font-size:14px;line-height:20px;cursor:pointer}

/* ---- app shell: source cards, step strip, bottom bar ---- */
/* Big tappable choices rather than a bare textarea: the first screen should look like something you use. */
.srcs{display:grid;gap:12px;margin:18px 0 10px}
.srccard{display:flex;align-items:center;gap:14px;width:100%;text-align:left;font-weight:400;padding:16px;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow);color:var(--fg);min-height:0}
.srccard:hover{box-shadow:var(--shadow-lift)}
.srccard .ic{flex:0 0 46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:21px;background:var(--accent-soft)}
.srccard .tx{flex:1 1 auto;min-width:0}
.srccard .tx b{display:block;font-family:var(--display);font-size:18px;font-weight:700;line-height:1.2}
.srccard .tx span{display:block;font-size:13px;font-weight:400;opacity:.8;margin-top:2px;line-height:1.35}
.srccard .go{flex:0 0 auto;font-size:19px;opacity:.6}
.srccard[aria-expanded="true"] .go{transform:rotate(90deg)}
.srcpanel{margin:-2px 0 10px}
/* Where you are in the journey, without a sentence explaining it. */
.strip{display:flex;align-items:center;gap:8px;background:var(--accent-soft);border-radius:var(--r-lg);padding:14px 12px;margin:18px 0 0}
.strip .st{flex:1 1 0;text-align:center;font-size:12px;line-height:1.25;color:var(--fg)}
.strip .st b{display:block;width:26px;height:26px;margin:0 auto 6px;border-radius:50%;background:var(--surface);border:1px solid var(--line);color:var(--fg);font-size:13px;line-height:24px}
.strip .st.on{color:var(--fg);font-weight:600}
.strip .st.on b{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.strip .bar{flex:0 0 18px;height:1px;background:var(--line);margin-top:-18px}
/* Bottom bar: the single clearest signal that this is an app and not a page. */
.navbar{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;background:var(--surface);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom,0px)}
.navbar button{flex:1 1 0;border:0;border-radius:0;background:none;min-height:58px;padding:8px 4px;color:var(--muted);font-size:11px;font-weight:600;display:flex;flex-direction:column;align-items:center;gap:3px}
.navbar button .ic{font-size:19px;line-height:1}
.navbar button.on{color:var(--accent)}
@media (min-width:560px){.navbar{border-radius:var(--r-lg) var(--r-lg) 0 0;max-width:520px;margin:0 auto}}


/* ---- first screen hierarchy ---- */
/* "AI" is the answer to "what does this do", so it carries the accent rather than a bigger font. */
h1 .ai{color:var(--accent)}
/* A quiet divider between the demo and handing over your own chat. */
.orline{display:flex;align-items:center;gap:12px;margin:14px 0 10px;color:var(--muted);font-size:13px}
.orline::before,.orline::after{content:"";flex:1 1 auto;height:1px;background:var(--line)}
.privacy{display:block;margin:14px 0 0;text-align:center;background:var(--accent-soft);color:var(--fg);border-radius:var(--r);padding:10px 12px;font-weight:500}
.reassure{margin:8px 0 0;text-align:center}