:root {
  --bg: #f8f9fc;
  --surface: #ffffff;
  --surface-soft: #f4f5fb;
  --ink: #17203b;
  --muted: #69718b;
  --muted-2: #98a0b5;
  --line: #e6e8f1;
  --line-strong: #d7dbeb;
  --primary: #4f46e5;
  --primary-dark: #3448d8;
  --primary-soft: #eef0ff;
  --mint: #dff7ec;
  --mint-strong: #27a977;
  --peach: #fff0e7;
  --peach-strong: #e9875a;
  --lavender: #eeeaff;
  --shadow: 0 20px 55px rgba(29, 39, 82, .08);
  --shadow-soft: 0 8px 25px rgba(30, 39, 75, .06);
  --radius-lg: 24px;
  --radius-md: 16px;
  --radius-sm: 11px;
  --font: Arial, Helvetica, sans-serif;
  color: var(--ink);
  font-family: var(--font);
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
body.bill-locked .items-panel,
body.bill-locked .people-list,
body.bill-locked #add-person,
body.bill-locked #add-item { opacity: .68; }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; }
button:disabled, input:disabled, select:disabled { cursor: not-allowed; opacity: .58; }
:focus-visible { outline: 3px solid rgba(79, 70, 229, .35); outline-offset: 3px; }
[hidden] { display: none !important; }

.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; flex: 0 0 auto; }
.icon.small { width: 15px; height: 15px; }

.topbar, main, footer { width: min(1240px, calc(100% - 48px)); margin-inline: auto; }
.topbar { min-height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 9px; color: var(--ink); font-size: 21px; font-weight: 800; letter-spacing: -.045em; white-space: nowrap; }
.brand-mark { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 10px; background: var(--primary-dark); color: white; font-size: 17px; font-weight: 800; letter-spacing: -.1em; position: relative; }
.brand-mark span { width: 7px; height: 7px; border: 2px solid #fff; border-radius: 50%; position: absolute; right: 5px; bottom: 6px; }
.brand-dot { color: var(--primary); }
nav { display: flex; align-items: center; gap: 28px; margin-left: auto; }
nav a, nav button { color: var(--muted); font-size: 13px; font-weight: 700; border: 0; background: transparent; padding: 9px 0; }
nav a:hover, nav a.active, nav button:hover { color: var(--primary); }
.connect-button { margin-left: 18px; }
.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--mint-strong); box-shadow: 0 0 0 4px rgba(39,169,119,.12); }
.status-dot.muted { background: var(--muted-2); box-shadow: none; }

.button { border: 1px solid transparent; border-radius: 10px; min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 10px 16px; font-size: 13px; font-weight: 800; transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease; }
.button:hover { transform: translateY(-1px); }
.button-primary { color: #fff; background: var(--primary); box-shadow: 0 9px 18px rgba(79,70,229,.19); }
.button-primary:hover { background: var(--primary-dark); box-shadow: 0 12px 24px rgba(79,70,229,.26); }
.button-secondary { color: var(--primary-dark); background: var(--primary-soft); }
.button-ghost { color: var(--ink); background: rgba(255,255,255,.65); border-color: var(--line-strong); }
.button-ghost:hover { background: #fff; border-color: #bfc5df; }
.text-button, .inline-link { color: var(--primary); background: transparent; border: 0; font-weight: 800; font-size: 12px; padding: 5px 0; }
.text-button:hover, .inline-link:hover { color: var(--primary-dark); text-decoration: underline; }

.hero { min-height: 570px; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 55px; padding: 58px 20px 66px; }
.eyebrow { color: var(--primary); font-size: 10px; font-weight: 800; letter-spacing: .16em; }
.tiny-spark { color: var(--peach-strong); font-size: 17px; margin-right: 5px; }
h1, h2, h3, h4, p { margin-top: 0; }
h1 { font-size: clamp(53px, 6.1vw, 70px); line-height: .99; letter-spacing: -.075em; margin: 17px 0 22px; }
h1 span { color: var(--primary); }
.hero-content > p { color: var(--muted); font-size: 17px; line-height: 1.65; margin-bottom: 28px; }
.hero-cta { padding: 14px 19px; min-height: 49px; }
.hero-trust { display: flex; align-items: center; gap: 0; color: var(--muted); font-size: 12px; margin-top: 27px; }
.mini-avatar { display: grid; place-items: center; width: 27px; height: 27px; border: 2px solid var(--bg); border-radius: 50%; color: #fff; background: #ef9a72; font-size: 10px; font-weight: 800; margin-right: -6px; }
.mini-avatar.second { background: #5f75df; }.mini-avatar.third { background: #45b78c; margin-right: 11px; }
.hero-art { min-height: 410px; position: relative; display: grid; place-items: center; }
.orbit { position: absolute; border: 1px dashed #cfd4e7; border-radius: 50%; transform: rotate(-17deg); }
.orbit-one { width: 430px; height: 295px; }.orbit-two { width: 310px; height: 420px; transform: rotate(38deg); border-color: #e0dff4; }
.hero-receipt { width: 278px; min-height: 350px; z-index: 1; padding: 26px 25px 22px; background: #fffef9; border: 1px solid #ece9dc; box-shadow: 13px 21px 0 #e8e7f6, 0 24px 45px rgba(35,40,84,.14); transform: rotate(4deg); position: relative; }
.hero-receipt:after { content: ''; position: absolute; left: 0; right: 0; bottom: -10px; height: 18px; background: linear-gradient(135deg, transparent 7px, #fffef9 0) 0 0/14px 14px repeat-x; }
.receipt-restaurant { text-align: center; font-size: 10px; font-weight: 800; letter-spacing: .13em; }.receipt-dashes { height: 1px; border-top: 1px dashed #c9c7be; margin: 20px 0 14px; }
.mini-line { display: flex; justify-content: space-between; gap: 10px; color: #77796f; font-size: 10px; margin: 10px 0; }.mini-line b { color: #30352f; }.receipt-total { display: flex; align-items: flex-end; justify-content: space-between; margin-top: 22px; }.receipt-total small { color: #92938a; font-size: 9px; }.receipt-total strong { font-size: 28px; letter-spacing: -.06em; }.receipt-total strong span { color: #90918b; font-size: 17px; }.color-dot { width: 7px; height: 7px; display: inline-block; border-radius: 50%; margin: 0 4px 1px 0; }.color-dot.alex { background: #ef9a72; }.color-dot.maya { background: #5f75df; }.color-dot.sam { background: #45b78c; }
.receipt-stamp { display: flex; align-items: center; gap: 5px; margin-top: 20px; color: var(--mint-strong); font-size: 9px; font-weight: 800; }.receipt-stamp .icon { width: 14px; height: 14px; }
.float-badge { position: absolute; z-index: 2; display: flex; align-items: center; gap: 8px; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-soft); font-size: 11px; font-weight: 800; padding: 10px 12px; }.ai-float { top: 38px; left: 8px; color: var(--primary); }.paid-float { right: 3px; bottom: 45px; padding: 11px 13px; }.paid-float small { display: block; color: var(--muted); font-size: 9px; font-weight: 600; margin-top: 2px; }.paid-check { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--mint); color: var(--mint-strong); }.paid-check .icon { width: 15px; height: 15px; }.decorative-star { position: absolute; color: var(--peach-strong); font-size: 23px; }.star-one { top: 87px; right: 45px; }.star-two { bottom: 70px; left: 38px; color: #9b9dea; }
.feature-strip { display: flex; justify-content: space-between; gap: 18px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 18px 2px; color: var(--muted); font-size: 11px; font-weight: 700; }.feature-strip span { display: flex; align-items: center; gap: 8px; }.feature-strip .icon { color: var(--primary); width: 15px; height: 15px; }

.workspace-section { padding: 104px 0 88px; }.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 30px; }.section-heading h2, .how-section h2 { font-size: 35px; line-height: 1.08; letter-spacing: -.055em; margin: 10px 0 8px; }.section-heading p { color: var(--muted); font-size: 14px; margin: 0; }
.workspace-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(350px, 1fr); gap: 22px; align-items: start; }.workspace-left { display: grid; gap: 22px; }.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); padding: 27px; }.panel-heading { display: flex; align-items: flex-start; gap: 13px; position: relative; }.panel-heading h3 { font-size: 18px; letter-spacing: -.035em; margin: 1px 0 4px; }.panel-heading p { color: var(--muted); font-size: 12px; margin: 0; }.step-number { display: grid; place-items: center; width: 31px; height: 31px; color: var(--primary); background: var(--primary-soft); border-radius: 10px; font-size: 11px; font-weight: 800; }.badge { border-radius: 99px; padding: 5px 8px; font-size: 9px; font-weight: 800; letter-spacing: .1em; margin-left: auto; white-space: nowrap; }.badge-lavender { color: #6355cf; background: var(--lavender); }.badge-sandbox { color: #9b5a38; background: var(--peach); }
.receipt-upload { display: flex; gap: 17px; align-items: center; margin: 25px 0 15px; padding: 17px; background: var(--surface-soft); border: 1px dashed #cbd0e4; border-radius: 17px; transition: border-color .2s, background .2s; }.receipt-upload.drag-over { background: var(--primary-soft); border-color: var(--primary); }.receipt-thumbnail { width: 92px; height: 119px; flex: 0 0 auto; border: 4px solid #fff; border-radius: 8px; box-shadow: 0 5px 14px rgba(20,30,70,.1); overflow: hidden; background: #fff; transform: rotate(-3deg); }.receipt-thumbnail img { width: 100%; height: 100%; object-fit: cover; }.upload-copy { min-width: 0; }.upload-icon { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 8px; background: var(--mint); color: var(--mint-strong); margin-bottom: 7px; }.upload-icon .icon { width: 16px; height: 16px; }.upload-copy h4 { font-size: 16px; line-height: 1.15; letter-spacing: -.035em; margin: 0 0 5px; }.upload-copy p { color: var(--muted); font-size: 11px; line-height: 1.5; margin: 0 0 12px; }.upload-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 13px; }.upload-actions .button { min-height: 35px; padding: 7px 12px; font-size: 11px; }.scan-status { display: flex; align-items: center; gap: 8px; color: var(--muted); min-height: 22px; font-size: 11px; }.scan-status .status-dot { width: 6px; height: 6px; }.scan-status #scan-confidence { color: var(--mint-strong); font-weight: 800; margin-left: auto; }.progress-track { height: 4px; overflow: hidden; background: var(--surface-soft); border-radius: 4px; margin-top: 8px; }.progress-track > div { width: 0; height: 100%; background: var(--primary); transition: width .3s; }.manual-details { color: var(--muted); border-top: 1px solid var(--line); margin-top: 16px; padding-top: 14px; font-size: 12px; }.manual-details summary { cursor: pointer; color: var(--ink); font-weight: 700; }.manual-details label { display: block; color: var(--ink); font-size: 11px; font-weight: 700; margin: 15px 0 7px; }.label-hint { color: var(--muted-2); font-weight: 400; margin-left: 5px; }.manual-details textarea { display: block; width: 100%; resize: vertical; border: 1px solid var(--line-strong); border-radius: 10px; padding: 10px; color: var(--ink); background: #fff; font-size: 12px; }.manual-details .button { margin-top: 10px; min-height: 36px; font-size: 11px; }

.bill-name-row { display: flex; align-items: center; gap: 17px; margin: 25px 0 16px; }.bill-name-row label, .extras-row label { color: var(--muted); font-size: 11px; font-weight: 800; white-space: nowrap; }.bill-name-row input { min-width: 0; flex: 1; border: 0; border-bottom: 1px solid var(--line-strong); padding: 6px 0; color: var(--ink); background: transparent; font-weight: 700; outline: none; }.bill-name-row input:focus { border-color: var(--primary); }
.items-table { width: 100%; overflow-x: auto; }.item-table-head, .item-row { display: grid; grid-template-columns: minmax(150px, 1.35fr) 95px minmax(145px, 1fr) 24px; align-items: center; gap: 12px; min-width: 480px; }.item-table-head { color: var(--muted-2); font-size: 9px; font-weight: 800; letter-spacing: .1em; padding: 0 9px 8px; }.item-row { border-top: 1px solid var(--line); padding: 12px 9px; }.item-name, .item-price { min-width: 0; border: 0; color: var(--ink); background: transparent; font-size: 12px; font-weight: 700; outline: none; }.item-name { width: 100%; }.item-name:focus, .item-price:focus { border-bottom: 1px solid var(--primary); }.item-price { width: 100%; text-align: right; }.item-assignees { display: flex; gap: 5px; flex-wrap: wrap; }.person-toggle { width: 24px; height: 24px; padding: 0; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--muted); background: #fff; font-size: 9px; font-weight: 800; }.person-toggle:hover { border-color: var(--person-color, var(--primary)); color: var(--person-color, var(--primary)); }.person-toggle.is-selected { color: #fff; border-color: var(--person-color, var(--primary)); background: var(--person-color, var(--primary)); }.remove-item, .person-remove { width: 23px; height: 23px; display: grid; place-items: center; padding: 0; color: var(--muted-2); border: 0; background: transparent; border-radius: 7px; }.remove-item:hover, .person-remove:hover { color: #d75e63; background: #fff0f0; }.remove-item .icon, .person-remove .icon { width: 14px; height: 14px; }.add-item { margin-top: 13px; }.extras-row { display: grid; grid-template-columns: 1fr 1fr 1.4fr; align-items: end; gap: 15px; border-top: 1px solid var(--line); margin-top: 16px; padding-top: 17px; }.extras-row label { display: grid; gap: 6px; }.money-input { display: flex; align-items: center; color: var(--muted); border-bottom: 1px solid var(--line-strong); font-size: 12px; }.money-input input { width: 100%; min-width: 0; border: 0; padding: 5px 0; outline: 0; color: var(--ink); background: transparent; font-weight: 700; text-align: right; }.extras-explainer { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 10px; line-height: 1.3; }.extras-explainer .icon { color: var(--mint-strong); }.validation-note { color: #b45348; background: #fff1ed; border-radius: 8px; padding: 8px 10px; margin-top: 14px; font-size: 11px; }

.people-header { display: flex; justify-content: space-between; align-items: center; margin: 26px 0 9px; color: var(--muted-2); font-size: 9px; font-weight: 800; letter-spacing: .1em; }.people-header .text-button { letter-spacing: normal; }.people-list { display: grid; gap: 9px; }.person-row { display: grid; grid-template-columns: 31px minmax(0, 1fr) 23px; align-items: center; gap: 10px; }.person-avatar, .share-row .person-avatar { --person-color: var(--primary); display: grid; place-items: center; width: 31px; height: 31px; border-radius: 10px; color: #fff; background: var(--person-color); font-size: 10px; font-weight: 800; }.person-avatar.alex, .share-row.alex .person-avatar { --person-color: #ef9a72; }.person-avatar.maya, .share-row.maya .person-avatar { --person-color: #5f75df; }.person-avatar.sam, .share-row.sam .person-avatar { --person-color: #45b78c; }.person-name { width: 100%; min-width: 0; border: 0; border-bottom: 1px solid var(--line); outline: 0; padding: 6px 0; background: transparent; color: var(--ink); font-size: 12px; font-weight: 700; }.person-name:focus { border-color: var(--primary); }
.split-mode { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; background: var(--surface-soft); border-radius: 10px; margin: 22px 0; }.mode-button { border: 0; border-radius: 7px; color: var(--muted); background: transparent; padding: 8px; font-size: 11px; font-weight: 800; }.mode-button.selected { color: var(--ink); background: #fff; box-shadow: 0 2px 7px rgba(25,35,70,.08); }.summary-numbers { display: grid; gap: 9px; padding-bottom: 17px; border-bottom: 1px solid var(--line); }.summary-numbers > div { display: flex; justify-content: space-between; color: var(--muted); font-size: 11px; }.summary-numbers b { color: var(--ink); font-size: 12px; }.summary-numbers .summary-grand { align-items: center; color: var(--ink); font-weight: 800; padding-top: 4px; }.summary-grand strong { color: var(--primary); font-size: 23px; letter-spacing: -.045em; }
.share-list { display: grid; gap: 7px; padding: 17px 0; }.share-row { display: grid; grid-template-columns: 31px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid transparent; border-radius: 12px; background: var(--surface-soft); }.share-row.is-payer { border-color: #cfd4fa; background: var(--primary-soft); }.share-person { min-width: 0; font-size: 11px; font-weight: 800; }.share-person small, .share-person .sublabel { display: block; color: var(--muted); font-size: 9px; font-weight: 600; margin-top: 2px; }.share-value { color: var(--ink); font-size: 12px; font-weight: 800; }.paid-label { color: var(--mint-strong); font-size: 9px; font-weight: 800; }.share-row.is-paid .share-value { color: var(--mint-strong); }.cent-check { display: flex; align-items: center; gap: 7px; color: var(--mint-strong); background: var(--mint); border-radius: 9px; padding: 9px 10px; font-size: 10px; font-weight: 800; }.cent-check .icon { width: 14px; height: 14px; }.checkout-section { border-top: 1px solid var(--line); margin-top: 19px; padding-top: 20px; }.checkout-heading { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 10px; margin-bottom: 17px; }.payer-label { display: block; color: var(--muted); font-size: 10px; font-weight: 800; margin-bottom: 6px; }.checkout-section select { width: 100%; color: var(--ink); background: #fff; border: 1px solid var(--line-strong); border-radius: 9px; padding: 10px; font-weight: 700; outline: 0; }.pay-amount { display: flex; align-items: center; justify-content: space-between; margin: 14px 0; color: var(--muted); font-size: 11px; }.pay-amount strong { color: var(--ink); font-size: 21px; letter-spacing: -.04em; }.paypal-buttons { min-height: 42px; }.payment-status { min-height: 19px; color: var(--muted); font-size: 10px; margin-top: 7px; }.sandbox-note { color: var(--muted); font-size: 9px; line-height: 1.55; margin: 13px 0 0; }.sandbox-note b { color: var(--ink); }.inline-link { font-size: inherit; }.export-button { width: 100%; margin-top: 18px; }.privacy-note { display: flex; align-items: center; gap: 10px; color: var(--muted); padding: 18px 10px 0; font-size: 11px; }.privacy-note .icon { color: var(--mint-strong); }.privacy-note p { margin: 0; }.privacy-note span { color: var(--muted-2); font-size: 10px; }

.how-section { padding: 72px 0 110px; border-top: 1px solid var(--line); }.how-section > h2 { margin: 10px 0 33px; }.how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }.how-grid article { padding: 25px; background: #fff; border: 1px solid var(--line); border-radius: 20px; }.how-icon { display: grid; place-items: center; width: 41px; height: 41px; color: var(--primary); background: var(--primary-soft); border-radius: 12px; margin-bottom: 22px; }.how-icon.green { color: var(--mint-strong); background: var(--mint); }.how-icon.peach { color: var(--peach-strong); background: var(--peach); }.how-grid small { color: var(--muted-2); font-size: 9px; font-weight: 800; letter-spacing: .12em; }.how-grid h3 { font-size: 17px; letter-spacing: -.035em; margin: 10px 0 8px; }.how-grid p { color: var(--muted); font-size: 12px; line-height: 1.65; margin: 0; }
footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 23px 0 30px; border-top: 1px solid var(--line); }footer p { color: var(--muted-2); font-size: 10px; margin: 0; }.footer-brand { font-size: 17px; }

.dialog-backdrop, dialog::backdrop { background: rgba(19, 26, 52, .48); backdrop-filter: blur(4px); }dialog { width: min(560px, calc(100% - 30px)); max-height: min(720px, calc(100dvh - 30px)); overflow: auto; border: 1px solid var(--line); border-radius: 22px; padding: 29px; color: var(--ink); background: #fff; box-shadow: 0 25px 80px rgba(11,18,52,.25); }dialog:not([open]) { display: none; }.modal-heading { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; }.modal-heading h2 { font-size: 27px; line-height: 1.1; letter-spacing: -.055em; margin: 9px 0 0; }.icon-button { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; color: var(--muted); background: var(--surface-soft); border: 0; border-radius: 9px; }.icon-button:hover { color: var(--ink); }.icon-button .icon { width: 17px; height: 17px; }dialog form > p, .notes-content p { color: var(--muted); font-size: 12px; line-height: 1.65; }dialog form > label { display: block; color: var(--ink); font-size: 11px; font-weight: 800; margin: 20px 0 7px; }dialog input { width: 100%; border: 1px solid var(--line-strong); border-radius: 9px; padding: 11px; outline: 0; }dialog input:focus { border-color: var(--primary); }.field-help { color: var(--muted-2) !important; font-size: 10px !important; }.notice { display: flex; gap: 9px; color: #80604f; background: var(--peach); border-radius: 10px; padding: 11px; font-size: 10px; line-height: 1.5; }.notice .icon { color: var(--peach-strong); width: 16px; }.modal-actions { display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: 18px; margin-top: 24px; }.modal-actions .button { font-size: 11px; }.notes-content { max-height: 55vh; overflow: auto; padding-right: 4px; margin-top: 23px; }.notes-content h3 { font-size: 14px; margin: 21px 0 5px; }.notes-content h3:first-child { margin-top: 0; }.notes-content p { margin-bottom: 12px; }.notes-content a { color: var(--primary); font-weight: 700; }.notes-last { color: var(--muted-2) !important; font-size: 10px !important; border-top: 1px solid var(--line); padding-top: 13px; }.toast { position: fixed; z-index: 10; left: 50%; bottom: 24px; transform: translateX(-50%); max-width: min(420px, calc(100% - 32px)); color: #fff; background: var(--ink); border-radius: 10px; box-shadow: 0 12px 35px rgba(20,25,50,.2); padding: 12px 16px; font-size: 12px; font-weight: 700; }

@media (max-width: 960px) { .topbar, main, footer { width: min(100% - 34px, 760px); }.topbar { min-height: 72px; }.topbar nav { display: none; }.connect-button { margin-left: auto; }.hero { grid-template-columns: 1fr; gap: 20px; padding: 58px 0 60px; }.hero-content { text-align: center; }.hero-content > p br { display: none; }.hero-trust { justify-content: center; }.hero-art { min-height: 390px; }.workspace-grid { grid-template-columns: 1fr; }.workspace-right { min-width: 0; }.how-grid { grid-template-columns: 1fr; }.how-grid article { min-height: 0; } }
@media (max-width: 600px) { .topbar, main, footer { width: calc(100% - 28px); }.topbar { min-height: 65px; }.brand { font-size: 19px; }.connect-button { padding-inline: 10px; font-size: 11px; }.connect-button .icon { display: none; }.hero { padding: 43px 0 45px; }.hero h1 { font-size: clamp(48px, 15vw, 65px); }.hero-content > p { font-size: 15px; }.hero-art { min-height: 340px; transform: scale(.88); margin: -13px 0; }.orbit-one { width: 350px; }.orbit-two { height: 340px; }.feature-strip { display: grid; gap: 11px; padding: 16px 0; }.workspace-section { padding: 67px 0 65px; }.section-heading { display: block; }.section-heading .button { margin-top: 18px; }.section-heading h2, .how-section h2 { font-size: 29px; }.panel { padding: 19px 16px; border-radius: 19px; }.panel-heading .badge { font-size: 8px; padding-inline: 6px; }.receipt-upload { align-items: flex-start; padding: 14px; }.receipt-thumbnail { width: 68px; height: 92px; }.upload-copy h4 { font-size: 14px; }.upload-copy p { font-size: 10px; }.upload-actions { display: grid; gap: 7px; }.upload-actions .button { width: 100%; }.extras-row { grid-template-columns: 1fr 1fr; }.extras-explainer { grid-column: 1 / -1; margin-top: 4px; }.how-section { padding: 55px 0 72px; }.how-grid article { padding: 20px; } footer { align-items: flex-start; flex-direction: column; gap: 10px; }dialog { padding: 22px 18px; border-radius: 17px; }.modal-actions { justify-content: stretch; }.modal-actions .button { flex: 1; }.modal-actions .text-button { width: 100%; } }
@media (max-width: 420px) { .hero-art { transform: scale(.76); margin: -45px 0; }.panel-heading { gap: 9px; }.panel-heading h3 { font-size: 16px; }.panel-heading p { font-size: 11px; }.badge { display: none; }.bill-name-row { display: block; }.bill-name-row label { display: block; margin-bottom: 5px; }.extras-row { gap: 10px; }.receipt-upload { gap: 10px; }.receipt-thumbnail { width: 57px; height: 78px; } }