/* =============================================================================
   BillGrid public site: home page only (pages/index.html).
   Loads after outer/site.css. Design source: docs/mocks/site/payday.html.
   ============================================================================= */

/* ---------- hero ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 4vw, 64px); align-items: center; padding-top: clamp(40px, 6vw, 76px); }
.hero h1 { font-size: var(--fs-d1); line-height: .98; letter-spacing: -.035em; }
.hero .lead { margin-top: 16px; }
.hero .capture { margin-top: 24px; }
@media (max-width: 900px) { .hero { grid-template-columns: minmax(0, 1fr); } }

/* ---------- moment: one invoice, sent to paid, told by a single notification ---------- */
.moment { justify-self: center; width: 100%; max-width: 470px; animation: moment-in 1.6s .4s ease both; }
@keyframes moment-in { from { opacity: 0; transform: translateY(6px); } }
.moment__from { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font-size: var(--fs-sm); color: var(--caption); }
.moment__from b { font-weight: 600; color: var(--ink); }
.moment__from .pill { margin-left: 2px; }
.moment__logo { flex: none; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--gold); color: #fff; font-family: var(--font-serif); font-weight: 700; }
.moment__label { margin-top: 30px; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--caption); }
.moment__amount { margin-top: 4px; font-family: var(--font-serif); font-size: clamp(56px, 6vw, 84px); letter-spacing: -.02em; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums lining-nums; transition: color .8s ease; }
.moment.is-paid .moment__amount { color: var(--paid-fg); }
.moment__meta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 14px 0 0; padding: 0; list-style: none; font-size: var(--fs-sm); color: var(--text-muted); }
.moment__meta li + li::before { content: "\00b7"; margin-right: 16px; color: var(--sand-300); }
.moment__reminders { display: inline-flex; align-items: center; gap: 6px; color: var(--trust); }
/* earlier notifications tuck in behind the current one */
.moment__stack { position: relative; z-index: 0; display: inline-block; margin-top: 36px; }
.moment__stack::before, .moment__stack::after { content: ""; position: absolute; z-index: -1; height: 14px; border-radius: 0 0 12px 12px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 12px 20px -14px rgba(40, 32, 16, .35); opacity: 0; transition: opacity .6s ease; }
.moment__stack::before { left: 10px; right: 10px; bottom: -7px; }
.moment__stack::after { left: 22px; right: 22px; bottom: -13px; z-index: -2; }
.moment__stack[data-depth="1"]::before, .moment__stack[data-depth="2"]::before, .moment__stack[data-depth="2"]::after { opacity: 1; }
.moment .toast { align-items: center; min-width: min(290px, 100%); max-width: none; box-shadow: 0 24px 50px -24px rgba(40, 32, 16, .45), 0 0 0 1px var(--line); transition: opacity .4s ease, transform .4s var(--ease-out); }
.moment .toast.is-swapping { opacity: 0; transform: translateY(8px); }
.moment .toast b { font-size: var(--fs-body); font-weight: 600; }
.moment .toast small { font-size: var(--fs-sm); }
.moment .toast__icon { border-radius: 10px; background: var(--sent-bg); color: var(--sent-fg); transition: background .4s, color .4s; }
.moment .toast[data-state="reminded"] .toast__icon { background: var(--overdue-bg); color: var(--overdue-fg); }
.moment .toast[data-state="paid"] .toast__icon { background: var(--paid-bg); color: var(--paid-fg); }

/* status pill, the app's palette (components/status-pill.css is app-only) */
.pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.pill::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.pill--sent { background: var(--sent-bg); color: var(--sent-fg); }
.pill--overdue { background: var(--overdue-bg); color: var(--overdue-fg); }
.pill--paid { background: var(--paid-bg); color: var(--paid-fg); }

/* ---------- while you're away: the dashboard over a painted landscape, and the day's feed ---------- */
/* the painted sky ends in a paper-coloured near ridge, so the section continues on paper without a seam */
.away { position: relative; overflow: hidden; margin-top: clamp(64px, 8vw, 110px); padding-top: clamp(64px, 8vw, 104px); background: var(--paper); border-bottom: 1px solid var(--line); }
.away__land { position: absolute; inset: 0 0 auto; width: 100%; height: clamp(440px, 46vw, 620px); }
.away__ridge--far { fill: #eddcb8; opacity: .8; }
.away__ridge--mid { fill: #e6d1a8; }
.away__ridge--near { fill: var(--paper); }
.away__copy { position: relative; max-width: 760px; text-align: center; }
.away__copy h2 { margin-top: 12px; font-size: var(--fs-d2); line-height: 1.02; }
.away__copy .lead { max-width: 36em; margin: 16px auto 0; }
.away__stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 0; align-items: end; margin-top: clamp(40px, 5vw, 64px); padding-bottom: clamp(56px, 7vw, 96px); }
.away__window { position: relative; margin: 0; overflow: hidden; border-radius: 14px; background: #fff; box-shadow: 0 50px 100px -50px rgba(40, 32, 16, .55), 0 0 0 1px var(--line); }
.away__chrome { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-bottom: 1px solid var(--line); background: var(--paper); }
.away__chrome i { width: 9px; height: 9px; border-radius: 50%; background: var(--sand-200); }
.away__chrome span { margin-inline: auto; padding: 2px 14px; border-radius: 6px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font-size: var(--fs-xs); color: var(--caption); }
/* the top of the dashboard: greeting, totals and the outstanding invoices */
.away__screen { position: relative; aspect-ratio: 16 / 8.45; overflow: hidden; }
.away__screen img { position: absolute; left: 0; top: 0; width: 100%; max-width: none; }

.away__feed { position: relative; z-index: 1; margin: 0 0 clamp(24px, 4vw, 56px) -48px; padding: 18px; border-radius: 18px; background: #fff; box-shadow: 0 40px 80px -30px rgba(40, 32, 16, .45), 0 0 0 1px var(--line); }
.away__feed-head { display: flex; justify-content: space-between; align-items: center; padding: 2px 4px 12px; border-bottom: 1px solid var(--line); }
.away__feed-head b { font-weight: 600; color: var(--ink); }
.away__live { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: 600; color: var(--paid-fg); }
.away__live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px var(--paid-bg); animation: away-pulse 2.4s ease-in-out infinite; }
@keyframes away-pulse { 50% { box-shadow: 0 0 0 6px transparent; } }
.away__feed ol { display: grid; gap: 2px; margin: 8px 0 0; padding: 0; list-style: none; }
.away__feed li { display: grid; grid-template-columns: 32px 1fr; gap: 10px; align-items: center; padding: 8px 4px; border-radius: 10px; transition: opacity .6s ease, transform .6s var(--ease-out); }
.away__feed b { display: block; font-size: var(--fs-sm); font-weight: 600; line-height: 1.35; color: var(--ink); }
.away__feed small { display: block; font-size: var(--fs-xs); color: var(--caption); }
.away__feed time { font-family: var(--font-mono); }
.away__icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--sent-bg); color: var(--sent-fg); }
.away__feed [data-kind="paid"] .away__icon { background: var(--paid-bg); color: var(--paid-fg); }
.away__feed [data-kind="late"] .away__icon { background: var(--overdue-bg); color: var(--overdue-fg); }
/* outer/home.js holds items back until the feed scrolls into view, then lets them in one by one */
.away__feed li.is-waiting { opacity: 0; transform: translateY(6px); }
@media (max-width: 980px) {
  .away__stage { grid-template-columns: minmax(0, 1fr); }
  .away__feed { margin: -40px 16px 0; }
}

/* ---------- the editor, in full: a Precision-style head over a wide screenshot ---------- */
.editor__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: end; }
.editor__head h2 { font-size: clamp(44px, 5.4vw, 80px); line-height: .98; letter-spacing: -.035em; }
.editor__pitch { font-size: var(--fs-lead); line-height: 1.55; color: var(--text-muted); }
.editor__pitch strong { font-weight: 600; color: var(--ink); }
.editor__more { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; font-weight: 600; color: var(--ink); text-decoration: none; }
.editor__more .bg-icon { transition: translate .2s var(--ease-out); }
.editor__more:hover .bg-icon { translate: 3px 0; }
.editor__shot { overflow: hidden; margin: clamp(40px, 5vw, 64px) 0 0; border-radius: 16px; background: #fff; box-shadow: 0 60px 120px -60px rgba(40, 32, 16, .55), 0 0 0 1px var(--line); }
.editor__shot img { width: 100%; }
.editor__facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px clamp(20px, 3vw, 40px); margin: 40px 0 0; padding: 0; list-style: none; }
.editor__facts li { display: flex; gap: 12px; align-items: flex-start; }
.editor__icon { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--gold-soft); color: var(--gold-deep); }
.editor__facts b { display: block; font-weight: 600; color: var(--ink); }
.editor__facts div span { display: block; margin-top: 2px; font-size: var(--fs-sm); color: var(--text-muted); }
@media (max-width: 900px) {
  .editor__head { grid-template-columns: minmax(0, 1fr); }
  .editor__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) { .editor__facts { grid-template-columns: minmax(0, 1fr); } }

/* ---------- how BillGrid fits your business ---------- */
.fit { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(30px, 5vw, 80px); align-items: start; }
.fit .section__head h2 { margin-top: 0; }
.fit__ask { overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: 0 20px 50px -30px rgba(40, 32, 16, .35); margin-bottom: 16px; }
.fit__ask textarea { width: 100%; border: 0; resize: none; padding: 18px 20px; font: inherit; font-size: var(--fs-body); color: var(--ink); outline: none; }
.fit__bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; border-top: 1px solid var(--line); background: var(--paper); }
.fit__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fit__chips button { border: 1px solid var(--line); border-radius: var(--r-pill); background: #fff; padding: 5px 11px; font-size: var(--fs-sm); color: var(--text-muted); }
.fit__chips button:hover { border-color: var(--gold); color: var(--ink); }
.fit__answer { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.fit__answer li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; animation: toast-in .5s var(--ease-out) both; }
.fit__answer b { display: block; color: var(--ink); font-weight: 600; }
.fit__answer span { font-size: var(--fs-body); color: var(--text-muted); }
.fit__icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--gold-soft); color: var(--gold-deep); }
@media (max-width: 900px) { .fit { grid-template-columns: minmax(0, 1fr); } }

/* ---------- the app, in three jobs ---------- */
.chapter { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 88px); align-items: center; margin-top: clamp(56px, 7vw, 110px); }
.chapter--flip { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
.chapter--flip .chapter__copy { order: 2; }
.chapter h3 { margin-top: 10px; font-size: clamp(28px, 2.8vw, 40px); line-height: 1.05; letter-spacing: -.03em; }
.chapter__copy > p:not(.kicker) { margin-top: 14px; color: var(--text-muted); }
/* a readable crop of a full screenshot; --w/--x/--y are set per figure in the template */
.chapter__screen { position: relative; overflow: hidden; aspect-ratio: 16 / 10; margin: 0; border-radius: 14px; background: #fff; box-shadow: 0 40px 80px -50px rgba(40, 32, 16, .5), 0 0 0 1px var(--line); }
.chapter__screen img { position: absolute; left: var(--x, 0); top: var(--y, 0); width: var(--w, 100%); max-width: none; }
/* chapter 01: the client's phone view leans on the invoices list */
.chapter__art { position: relative; }
.chapter__phone { position: absolute; right: -18px; bottom: -34px; width: 27%; padding: 6px; border-radius: 26px; background: var(--sand-900); box-shadow: 0 40px 80px -30px rgba(40, 32, 16, .6); }
.chapter__phone img { border-radius: 20px; }
@media (max-width: 900px) { .chapter, .chapter--flip { grid-template-columns: minmax(0, 1fr); } .chapter--flip .chapter__copy { order: 0; } }
@media (max-width: 560px) { .chapter__phone { right: 8px; bottom: -24px; width: 34%; } }

/* ---------- branding showcase: --doc-brand hooks mirror the app's document paper ---------- */
.branding { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 90px); align-items: center; }
.branding h2 { font-size: var(--fs-d2); line-height: 1.02; margin-top: 10px; }
.branding .lead { margin-top: 16px; max-width: 30em; }
.branding__controls { display: grid; gap: 16px; margin-top: 28px; }
.branding__row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.branding__label { width: 96px; font-size: var(--fs-sm); font-weight: 600; color: var(--ink); }
.swatches { display: flex; gap: 8px; }
.swatches button { width: 30px; height: 30px; border: 0; border-radius: 50%; background: var(--swatch); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); transition: box-shadow .2s, transform .2s; }
.swatches button:hover { transform: scale(1.08); }
.swatches button[aria-checked="true"] { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--swatch); }
/* the custom swatch: a colour wheel over a native picker, as in Settings > Branding */
.swatches__custom { position: relative; width: 30px; height: 30px; border-radius: 50%; cursor: pointer; background: conic-gradient(#d9534f, #e9b949, #58a55c, #3d8fd1, #8a5bc4, #d9534f); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); transition: box-shadow .2s, transform .2s; }
.swatches__custom:hover { transform: scale(1.08); }
.swatches__custom.is-on { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--swatch); }
.swatches__custom:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 4px; }
.swatches__custom input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.segmented { display: inline-flex; padding: 3px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); }
.segmented button { border: 0; border-radius: 7px; background: none; padding: 7px 16px; font-size: var(--fs-sm); font-weight: 600; color: var(--text-muted); }
.segmented button[aria-checked="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(40, 32, 16, .1), 0 0 0 1px var(--line); }
.branding__figure { margin: 0; text-align: center; }
.branding__figure .caption { margin-top: 14px; }

.brand-doc {
  --doc-brand: #9a7b43; --doc-brand-ink: #fff;
  --doc-brand-deep: color-mix(in srgb, var(--doc-brand) 72%, var(--ink));
  --doc-brand-soft: color-mix(in srgb, var(--doc-brand) 13%, #fff);
  overflow: hidden; text-align: left; font-size: var(--fs-sm); background: #fff; border-radius: 12px; box-shadow: var(--shadow-card);
}
.brand-doc * { transition: background-color .45s ease, color .45s ease; }
.brand-doc__rule { height: 4px; background: var(--doc-brand); }
.brand-doc__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 22px 26px 0; }
.brand-doc__from { display: flex; gap: 12px; align-items: flex-start; }
.brand-doc__logo { flex: none; width: 42px; height: 42px; border-radius: 10px; display: grid; place-items: center; background: var(--doc-brand); color: var(--doc-brand-ink); font-family: var(--font-serif); font-size: var(--fs-lg); font-weight: 700; }
.brand-doc small { display: block; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--doc-brand-deep); }
.brand-doc__from b { display: block; font-family: var(--font-serif); font-size: var(--fs-md); color: var(--ink); }
.brand-doc__from div span { font-size: var(--fs-xs); color: var(--text-muted); }
.brand-doc__title { text-align: right; }
.brand-doc__title b { display: block; font-family: var(--font-serif); font-size: var(--fs-xl); letter-spacing: .03em; line-height: 1; color: var(--ink); }
.brand-doc__title span { font-size: var(--fs-xs); color: var(--caption); }
.brand-doc__body { padding: 18px 26px 22px; }
.brand-doc__meta { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; padding-top: 14px; border-top: 1px solid var(--sand-100); }
.brand-doc__meta b { font-family: var(--font-serif); font-size: var(--fs-body); color: var(--ink); }
.brand-doc__total { padding: 7px 14px; border-radius: 8px; text-align: right; background: var(--doc-brand); color: var(--doc-brand-ink); }
.brand-doc__total small { color: inherit; opacity: .85; }
.brand-doc__total span { font-family: var(--font-serif); font-size: var(--fs-lg); font-weight: 600; }
.brand-doc table { width: 100%; margin-top: 16px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.brand-doc th { padding: 7px 8px; text-align: left; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); background: var(--sand-50); }
.brand-doc td { padding: 9px 8px; border-bottom: 1px solid var(--sand-100); }
.brand-doc td small { font-size: var(--fs-xs); font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--text-muted); }
.brand-doc .num { text-align: right; }
.brand-doc__balance { display: flex; justify-content: space-between; width: 62%; margin: 14px 0 0 auto; padding: 10px 12px; border-radius: 8px; background: var(--doc-brand-soft); color: var(--doc-brand-deep); font-weight: 700; }
.brand-doc__balance b { font-family: var(--font-serif); font-size: var(--fs-body); }
/* Bold: a full-width brand band carries the header; the table head takes the soft tint */
.brand-doc.is-bold .brand-doc__rule { display: none; }
.brand-doc.is-bold .brand-doc__head { padding-bottom: 18px; background: var(--doc-brand); }
.brand-doc.is-bold .brand-doc__logo { background: var(--doc-brand-ink); color: var(--doc-brand); }
.brand-doc.is-bold .brand-doc__head small, .brand-doc.is-bold .brand-doc__from div span, .brand-doc.is-bold .brand-doc__title span { color: var(--doc-brand-ink); opacity: .8; }
.brand-doc.is-bold .brand-doc__from b, .brand-doc.is-bold .brand-doc__title b { color: var(--doc-brand-ink); }
.brand-doc.is-bold .brand-doc__meta { padding-top: 0; border-top: 0; }
.brand-doc.is-bold th { background: var(--doc-brand-soft); color: var(--doc-brand-deep); }
@media (max-width: 900px) { .branding { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) { .brand-doc__head { padding: 18px 18px 0; } .brand-doc__body { padding: 16px 18px 18px; } .brand-doc__title b { font-size: var(--fs-lg); } .brand-doc__balance { width: 100%; } .branding__label { width: auto; } }

/* ---------- time-back calculator ---------- */
.calc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 70px); align-items: center; }
.calc h2 { font-size: var(--fs-d2); line-height: 1.02; }
.calc .lead { margin-top: 14px; }
.calc__sliders { display: grid; gap: 18px; margin-top: 28px; }
.calc__slider span { display: flex; justify-content: space-between; font-size: var(--fs-body); color: var(--text-muted); }
.calc__slider output { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.calc__slider input { width: 100%; margin-top: 6px; accent-color: var(--gold); }
.calc__result { position: relative; overflow: hidden; padding: clamp(26px, 4vw, 44px); border-radius: 22px; background: var(--ink); color: #e8e1d0; }
.calc__result::before { content: ""; position: absolute; right: -80px; top: -80px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(232, 207, 143, .35), transparent 70%); }
.calc__result .kicker { color: #a99f84; }
.calc__big { margin-top: 10px; font-family: var(--font-serif); font-size: clamp(56px, 7vw, 96px); line-height: 1; color: #faf6ea; font-variant-numeric: tabular-nums lining-nums; }
.calc__big small { font-family: var(--font-sans); font-size: .35em; color: #a99f84; }
.calc__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 26px; }
.calc__row > div { padding-top: 12px; border-top: 1px solid #392f1f; }
.calc__row b { display: block; font-family: var(--font-serif); font-size: 30px; font-weight: 400; color: var(--hl); }
.calc__fine { position: relative; margin-top: 22px; font-size: var(--fs-xs); color: #a99f84; }
@media (max-width: 900px) { .calc { grid-template-columns: minmax(0, 1fr); } }

/* ---------- four steps ---------- */
.steps-section { padding-bottom: clamp(72px, 9vw, 120px); }
.steps-section h2 { font-size: clamp(30px, 3.4vw, 44px); }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 36px 0 0; padding: 0; list-style: none; counter-reset: step; }
.steps li { padding: 20px; border: 1px solid var(--line); border-radius: 14px; }
.steps li::before { counter-increment: step; content: "0" counter(step); font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--caption); }
.steps h3 { margin-top: 10px; font-size: var(--fs-body); letter-spacing: -.01em; }
.steps p { margin-top: 4px; font-size: var(--fs-body); color: var(--text-muted); }
@media (max-width: 900px) { .steps { grid-template-columns: 1fr 1fr; } }