/* Slyce expense calculator — a macOS-style glass window on the brand's violet mesh.
   Builds on site.css tokens (--ink, --accent, --cta, --display, --body). Light only, like the rest of the site. */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- hero ---------- */
.chero { position: relative; overflow: hidden; padding: 28px 0 72px; background: #f7f5fe; isolation: isolate; }
.chero__bg { position: absolute; inset: -10% -10% 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(42% 38% at 12% 18%, rgba(143, 125, 255, .38), transparent 70%),
    radial-gradient(36% 34% at 88% 10%, rgba(232, 84, 160, .20), transparent 70%),
    radial-gradient(40% 40% at 78% 72%, rgba(43, 159, 214, .18), transparent 70%),
    radial-gradient(46% 40% at 22% 88%, rgba(106, 85, 240, .20), transparent 70%); filter: saturate(1.1); }
.chero__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, #fff 100%); }
.chero__head { text-align: center; max-width: 760px; margin: 0 auto 36px; }
.chero__head .crumbs { margin-bottom: 18px; }
.chero__head .crumbs span { color: var(--ink-3); }
.chero h1 { font-size: 52px; line-height: 1.06; font-weight: 700; letter-spacing: -0.025em; }
.chero .lede { margin: 16px auto 0; font-size: 18.5px; }
.chero__trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; margin-top: 22px; font-size: 14px; font-weight: 700; color: var(--ink-2); }
.chero__trust span { display: inline-flex; align-items: center; gap: 6px; }
.chero__trust svg { width: 16px; height: 16px; fill: none; stroke: var(--green); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- window ---------- */
.mac { --glass: rgba(255, 255, 255, .72); --hair: rgba(23, 19, 43, .08); --field: rgba(255, 255, 255, .92);
  max-width: 1160px; margin: 0 auto; border-radius: 28px; background: var(--glass);
  -webkit-backdrop-filter: blur(36px) saturate(1.7); backdrop-filter: blur(36px) saturate(1.7);
  border: 1px solid rgba(255, 255, 255, .75);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 0 0 .5px rgba(23, 19, 43, .10), 0 2px 6px rgba(40, 24, 120, .05), 0 40px 90px -28px rgba(60, 36, 170, .34);
  text-align: left; overflow: hidden; }
.mac__bar { position: relative; display: flex; align-items: center; gap: 12px; height: 54px; padding: 0 16px 0 20px; border-bottom: 1px solid var(--hair);
  background: linear-gradient(180deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .35)); }
.mac__lights { display: flex; gap: 8px; }
.mac__lights i { width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .14); }
.mac__lights i:nth-child(1) { background: #ff5f57; }
.mac__lights i:nth-child(2) { background: #febc2e; }
.mac__lights i:nth-child(3) { background: #28c840; }
.mac__title { position: absolute; left: 50%; transform: translateX(-50%); font-family: var(--display); font-size: 13.5px; font-weight: 600; color: var(--ink-2); pointer-events: none; }
.mac__cur { margin-left: auto; position: relative; }
.mac__cur select { appearance: none; -webkit-appearance: none; height: 32px; max-width: 190px; padding: 0 30px 0 12px; border-radius: 9px; border: 0; cursor: pointer;
  font: 700 13px var(--body); color: var(--ink); background: rgba(118, 118, 128, .12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f5a78' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M8 10l4-4 4 4M8 14l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 8px center / 14px; }
.mac__cur select:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(106, 85, 240, .35); }
.mac__body { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); }
.mac__main { padding: 30px 34px 34px; display: flex; flex-direction: column; gap: 30px; }
.mac__side { padding: 30px 30px 34px; background: linear-gradient(180deg, rgba(240, 236, 255, .66), rgba(247, 245, 255, .5)); border-left: 1px solid var(--hair);
  display: flex; flex-direction: column; gap: 18px; scroll-margin-top: 16px; }

/* ---------- steps ---------- */
.cstep { display: flex; flex-direction: column; gap: 14px; transition: opacity .25s; }
.cstep.is-locked { opacity: .5; }
.cstep.is-locked :is(input, select, button:not([data-tab])) { pointer-events: none; }
.cstep__h { display: flex; align-items: center; gap: 10px; font-size: 21px; font-weight: 700; letter-spacing: -0.01em; }
.cstep__n { width: 26px; height: 26px; border-radius: 8px; display: inline-grid; place-items: center; font: 700 13px var(--display); color: #fff; background: var(--cta); box-shadow: 0 4px 10px rgba(106, 85, 240, .32); flex-shrink: 0; }

/* ---------- fields ---------- */
.cfield { position: relative; display: flex; align-items: center; min-width: 0; height: 48px; border-radius: 13px; background: var(--field);
  box-shadow: inset 0 0 0 1px rgba(23, 19, 43, .11), 0 1px 2px rgba(23, 19, 43, .04); transition: box-shadow .15s; }
.cfield:focus-within { box-shadow: inset 0 0 0 1.5px var(--accent), 0 0 0 4px rgba(106, 85, 240, .16); }
.cfield input, .cfield select { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; padding: 0 14px; font: 600 16px var(--body); color: var(--ink); outline: none; }
.cfield input::placeholder { color: #8f8aab; font-weight: 500; }
.cfield__sym { padding-left: 14px; font-weight: 800; color: var(--ink-3); font-size: 15px; }
.cfield__sym + input { padding-left: 6px; }
.cfield--amt input { font: 700 20px var(--display); letter-spacing: -0.01em; }
.cfield--select select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 40px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f5a78' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 14px center / 16px; }
.cfield--sm { height: 40px; border-radius: 11px; width: 132px; flex: none; }
.cfield--sm input { font-size: 15px; padding: 0 10px 0 4px; text-align: right; }
.cfield--inline { height: 40px; gap: 8px; padding-left: 12px; width: auto; }
.cfield--inline > span { font-size: 13px; font-weight: 700; color: var(--ink-3); white-space: nowrap; }
.cfield--inline select { appearance: none; -webkit-appearance: none; padding: 0 30px 0 0; font-size: 15px; cursor: pointer;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f5a78' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 8px center / 14px; }
.cfield__lbl { font-size: 12px; font-weight: 700; color: var(--ink-3); padding-left: 10px; white-space: nowrap; }
.crowform { display: flex; gap: 10px; }
.crowform .cfield { flex: 1; }
.cgrid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 12px; }
.cl { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cl__t { font-size: 14px; font-weight: 800; color: var(--ink); }
.cl__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
#c-form { display: flex; flex-direction: column; gap: 16px; }
#c-form[hidden], [data-pane][hidden] { display: none; }
.chint { margin: -6px 0 0; min-height: 0; font-size: 13.5px; font-weight: 700; color: #b4467a; }
.chint:empty { display: none; }
.cfine { margin: -4px 0 0; font-size: 13px; line-height: 1.55; color: var(--ink-2); }
.cfine a { font-weight: 700; text-decoration: underline; text-decoration-color: rgba(90, 69, 222, .3); text-underline-offset: 3px; }

/* ---------- buttons ---------- */
.cbtn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 22px; border-radius: 14px; border: 0; cursor: pointer;
  font: 800 15px var(--body); white-space: nowrap; transition: transform .12s, filter .15s, box-shadow .15s, background .15s; text-decoration: none; }
.cbtn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.cbtn:active:not(:disabled) { transform: scale(.98); }
.cbtn:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(106, 85, 240, .3); }
.cbtn--primary { color: #fff; background: var(--cta); box-shadow: 0 8px 20px rgba(106, 85, 240, .3), inset 0 1px 0 rgba(255, 255, 255, .25); }
.cbtn--primary:hover { color: #fff; filter: brightness(1.06); }
.cbtn--primary:disabled { cursor: not-allowed; background: #d9d4f2; color: #fff; box-shadow: none; filter: none; }
.cbtn--dark { color: #fff; background: var(--ink); box-shadow: 0 6px 16px rgba(23, 19, 43, .2); }
.cbtn--dark:hover { color: #fff; background: #2a2450; }
.cbtn--ghost { color: var(--ink); background: rgba(255, 255, 255, .85); box-shadow: inset 0 0 0 1px rgba(23, 19, 43, .12); }
.cbtn--ghost:hover { color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--accent); }
.cbtn--white { color: var(--accent-deep); background: #fff; }
.cbtn--white:hover { color: var(--accent-deep); filter: brightness(.97); }
.cbtn--block { width: 100%; height: 52px; font-size: 16px; }
.cbtn--sm { height: 40px; padding: 0 18px; font-size: 14px; border-radius: 12px; margin-top: 6px; }
.clink { align-self: flex-start; background: none; border: 0; padding: 2px 0; cursor: pointer; font: 700 14px var(--body); color: var(--accent-ink); }
.clink:hover { color: var(--accent-deep); }
.clink--muted { align-self: center; color: var(--ink-3); font-size: 13.5px; }
.clink[hidden] { display: none; }

/* ---------- segmented controls ---------- */
.cseg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 11px; background: rgba(118, 118, 128, .12); }
.cseg button { border: 0; background: transparent; cursor: pointer; border-radius: 8px; height: 32px; padding: 0 14px; font: 700 13.5px var(--body); color: var(--ink-2); transition: background .15s, color .15s, box-shadow .15s; white-space: nowrap; }
.cseg button.is-on { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(23, 19, 43, .12), 0 0 0 .5px rgba(23, 19, 43, .06); }
.cseg button:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(106, 85, 240, .35); }
.cseg--tabs { display: flex; }
.cseg--tabs button { flex: 1; height: 38px; font-size: 14.5px; }
.cseg--tabs em { font-style: normal; font-size: 11px; font-weight: 800; color: var(--accent-ink); background: var(--tint-2); padding: 3px 7px; border-radius: 99px; margin-left: 4px; vertical-align: 1px; }
.cseg--sm button { height: 28px; padding: 0 11px; font-size: 12.5px; }

/* ---------- people ---------- */
.cav { --c: var(--accent); width: 26px; height: 26px; border-radius: 50%; display: inline-grid; place-items: center; flex-shrink: 0;
  font: 800 12px var(--body); color: #fff; background: var(--c); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.cav--lg { width: 36px; height: 36px; font-size: 14px; }
.cchips { display: flex; flex-wrap: wrap; gap: 8px; }
.cchips:empty { display: none; }
.cchip { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 4px 0 6px; border-radius: 99px; background: rgba(255, 255, 255, .9);
  box-shadow: inset 0 0 0 1px rgba(23, 19, 43, .09), 0 1px 2px rgba(23, 19, 43, .04); }
.cchip__name { font-weight: 700; font-size: 15px; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cchip__x, .crow__x { width: 30px; height: 30px; border-radius: 50%; border: 0; background: transparent; cursor: pointer; display: grid; place-items: center; color: var(--ink-3); flex-shrink: 0; }
.cchip__x:hover, .crow__x:hover { background: rgba(118, 118, 128, .14); color: var(--ink); }
.cchip__x svg, .crow__x svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }

/* for-whom toggles */
.ctogs { display: flex; flex-wrap: wrap; gap: 8px; }
.ctog { --c: var(--accent); display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 16px 0 10px; border-radius: 99px; border: 0; cursor: pointer;
  font: 700 14.5px var(--body); color: var(--ink-3); background: rgba(255, 255, 255, .7); box-shadow: inset 0 0 0 1px rgba(23, 19, 43, .12); transition: all .15s; }
.ctog__tick { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px rgba(23, 19, 43, .2); transition: all .15s; }
.ctog__tick svg { width: 12px; height: 12px; fill: none; stroke: #fff; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.ctog.is-on { color: var(--ink); background: #fff; box-shadow: inset 0 0 0 1.5px var(--c), 0 4px 12px -4px var(--c); }
.ctog.is-on .ctog__tick { background: var(--c); box-shadow: none; }
.ctog.is-on .ctog__tick svg { opacity: 1; }
.ctog:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(106, 85, 240, .35); }

/* per-person detail (shares / amounts) */
.cdetail { display: flex; flex-direction: column; gap: 2px; padding: 6px; border-radius: 16px; background: rgba(240, 236, 255, .55); box-shadow: inset 0 0 0 1px rgba(124, 108, 242, .14); }
.cdetail[hidden] { display: none; }
.cdetail__row { display: flex; align-items: center; gap: 10px; padding: 6px 8px; min-height: 48px; }
.cdetail__name { flex: 1; font-weight: 700; font-size: 15px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cdetail__amt { min-width: 76px; text-align: right; font-weight: 800; font-size: 14.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.cdetail__left { padding: 8px 10px 6px; font-size: 13.5px; font-weight: 800; color: #b4467a; text-align: right; }
.cdetail__left.is-ok { color: var(--green); }
.cstepper { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 11px; background: #fff; box-shadow: inset 0 0 0 1px rgba(23, 19, 43, .1); }
.cstepper button { width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; cursor: pointer; font: 700 18px var(--body); color: var(--accent-ink); }
.cstepper button:hover { background: var(--tint-2); }
.cstepper b { min-width: 34px; text-align: center; font-size: 14.5px; font-variant-numeric: tabular-nums; }

/* ---------- expense list ---------- */
.clist__h { font-size: 15px; font-weight: 700; margin: 8px 0 -4px; display: flex; gap: 6px; align-items: baseline; }
.clist__h span { color: var(--ink-3); font-weight: 600; }
.clist, .cbals, .cpays, .citems { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.clist__empty { padding: 18px; border-radius: 16px; text-align: center; font-size: 14px; color: var(--ink-3); background: rgba(255, 255, 255, .5); box-shadow: inset 0 0 0 1px rgba(23, 19, 43, .07); border: 0; }
.crow { display: flex; align-items: center; gap: 12px; padding: 10px 6px 10px 12px; border-radius: 16px; background: rgba(255, 255, 255, .9);
  box-shadow: inset 0 0 0 1px rgba(23, 19, 43, .07), 0 1px 2px rgba(23, 19, 43, .03); }
.crow__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.crow__txt b { font-size: 15.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crow__txt span { font-size: 13px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crow__amt { font: 700 16px var(--display); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- results ---------- */
.cempty { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; padding: 34px 18px; border-radius: 20px;
  background: rgba(255, 255, 255, .55); box-shadow: inset 0 0 0 1px rgba(23, 19, 43, .06); }
.cempty[hidden] { display: none; }
.cempty p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-2); max-width: 300px; }
.cempty__art { display: flex; align-items: center; gap: 0; }
.cempty__art .cav { width: 40px; height: 40px; font-size: 15px; }
.cempty__line { width: 72px; height: 2px; margin: 0 6px; background: repeating-linear-gradient(90deg, var(--accent) 0 6px, transparent 6px 11px); opacity: .55; animation: cdash 1.2s linear infinite; }
@keyframes cdash { to { background-position: 22px 0; } }
#c-result { display: flex; flex-direction: column; gap: 14px; }
#c-result[hidden] { display: none; }
.cpay { display: flex; align-items: center; gap: 12px; padding: 14px 16px 14px 12px; border-radius: 18px; background: #fff;
  box-shadow: 0 0 0 .5px rgba(23, 19, 43, .08), 0 6px 18px -8px rgba(60, 36, 170, .22); }
.cpay.is-new { animation: cin .38s cubic-bezier(.2, .8, .2, 1) var(--d, 0ms) both; }
.cpay__n { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font: 800 12px var(--body); color: var(--ink-3); box-shadow: inset 0 0 0 1.5px #e3dff3; flex-shrink: 0; }
.cpay__who { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.cpay__arrow { width: 16px; height: 16px; fill: none; stroke: #b9b3d6; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.cpay__txt { flex: 1; min-width: 0; font-size: 15.5px; color: var(--ink-2); line-height: 1.35; }
.cpay__txt b { color: var(--ink); }
.cpay__amt { font: 700 18px var(--display); color: var(--accent-deep); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cpay--even .cpay__txt { text-align: center; font-weight: 700; color: var(--green); }
.cpays__note { margin: -4px 0 0; font-size: 13.5px; font-weight: 700; color: var(--ink-3); }
.cstats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cstats div { padding: 14px 16px; border-radius: 16px; background: rgba(255, 255, 255, .7); box-shadow: inset 0 0 0 1px rgba(23, 19, 43, .06); }
.cstats span { display: block; font-size: 12.5px; font-weight: 700; color: var(--ink-3); }
.cstats b { display: block; margin-top: 2px; font: 700 24px var(--display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.cbal { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 12px; align-items: center; padding: 12px 14px 12px; border-radius: 16px; background: rgba(255, 255, 255, .85);
  box-shadow: inset 0 0 0 1px rgba(23, 19, 43, .06); }
.cbal__txt { min-width: 0; display: flex; flex-direction: column; }
.cbal__txt b { font-size: 15px; }
.cbal__txt span { font-size: 12.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cbal__net { font: 700 15.5px var(--display); font-variant-numeric: tabular-nums; color: var(--ink-3); white-space: nowrap; }
.cbal__net.is-pos { color: var(--green); }
.cbal__net.is-neg { color: #d6407a; }
.cbal__bar { grid-column: 1 / -1; position: relative; height: 5px; border-radius: 99px; background: rgba(118, 118, 128, .12); margin-top: 6px; }
.cbal__bar::after { content: ''; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1.5px; background: rgba(23, 19, 43, .18); }
.cbal__bar i { position: absolute; top: 0; bottom: 0; border-radius: 99px; transition: width .45s cubic-bezier(.2, .8, .2, 1); }
.cbal__bar i.is-pos { background: linear-gradient(90deg, #4cc28a, var(--green)); }
.cbal__bar i.is-neg { background: linear-gradient(270deg, #f07aa6, #d6407a); }
.cshare { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; margin-top: 4px; }
.cshare .cbtn { padding: 0 16px; }

/* promo */
.cpromo[hidden] { display: none; }
.cpromo { position: relative; overflow: hidden; margin-top: 6px; padding: 24px 22px 22px; border-radius: 22px; color: #fff;
  background: radial-gradient(120% 90% at 100% 0%, rgba(143, 125, 255, .65), transparent 60%), linear-gradient(160deg, #241c52 0%, #17132b 70%);
  box-shadow: 0 18px 40px -16px rgba(23, 19, 43, .6), inset 0 1px 0 rgba(255, 255, 255, .12); }
.cpromo::after { content: ''; position: absolute; width: 180px; height: 180px; right: -60px; bottom: -80px; border-radius: 50%; background: radial-gradient(circle, rgba(232, 84, 160, .35), transparent 70%); pointer-events: none; }
.cpromo__tag { display: inline-block; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #cfc7ff; }
.cpromo h3 { margin: 8px 0 14px; font-size: 21px; line-height: 1.25; }
.cpromo ul { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.cpromo li { display: flex; gap: 10px; font-size: 14px; line-height: 1.5; color: #d9d5ec; }
.cpromo li b { color: #fff; }
.cpromo li svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; fill: none; stroke: #9ff0c5; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.cpromo__cta { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.cpromo__store { font-weight: 800; font-size: 14px; color: #fff; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(255, 255, 255, .4); }
.cpromo__store:hover { color: #fff; text-decoration-color: #fff; }
.cnudge { padding: 14px 16px; border-radius: 16px; font-size: 14px; line-height: 1.55; color: var(--ink-2); background: #fff8ec; box-shadow: inset 0 0 0 1px #f5dfb5; animation: cin .35s both; }
.cnudge[hidden] { display: none; }
.cnudge b { color: var(--ink); }
.cnudge a { font-weight: 800; }

/* ---------- receipt scan ---------- */
.cscan { display: flex; flex-direction: column; gap: 12px; border-radius: 18px; transition: box-shadow .15s; }
.cscan.is-drag { box-shadow: 0 0 0 3px rgba(106, 85, 240, .4); }
.cico { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--cta); box-shadow: 0 10px 22px -8px rgba(106, 85, 240, .6); }
.cico svg { width: 26px; height: 26px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cdrop { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 30px 20px; border-radius: 20px; cursor: pointer;
  background: rgba(255, 255, 255, .6); border: 1.5px dashed rgba(106, 85, 240, .35); transition: background .15s, border-color .15s; }
.cdrop:hover { background: rgba(255, 255, 255, .9); border-color: var(--accent); }
.cdrop .cico { margin-bottom: 6px; }
.cdrop b { font: 700 18px var(--display); }
.cdrop > span:not(.cico):not(.cbtn) { font-size: 14px; color: var(--ink-2); }
.cdrop.is-off { cursor: default; opacity: .7; }
.cdrop.is-off .cico { filter: grayscale(1); }
.cscan__fine { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ink-2); text-align: center; }
.cscan__loading { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 30px 20px; text-align: center; }
.cscan__loading b { font: 700 17px var(--display); margin-top: 10px; }
.cscan__loading > span { font-size: 13.5px; color: var(--ink-3); }
.cscan__paper { position: relative; width: 92px; height: 116px; padding: 14px 12px; border-radius: 6px 6px 2px 2px; background: #fff; box-shadow: 0 10px 24px -8px rgba(60, 36, 170, .3), inset 0 0 0 1px rgba(23, 19, 43, .06);
  display: flex; flex-direction: column; gap: 9px; overflow: hidden; }
.cscan__paper i { display: block; height: 6px; border-radius: 3px; background: #ece9f7; }
.cscan__paper i:nth-child(2n) { width: 70%; }
.cscan__beam { position: absolute; left: 0; right: 0; top: 0; height: 30px; background: linear-gradient(180deg, transparent, rgba(106, 85, 240, .35), transparent); animation: cbeam 1.4s ease-in-out infinite alternate; }
@keyframes cbeam { from { transform: translateY(-20px); } to { transform: translateY(110px); } }
.cscan__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cscan__head > div { display: flex; flex-direction: column; }
.cscan__head b { font: 700 18px var(--display); }
.cscan__head span { font-size: 13.5px; color: var(--ink-3); }
.citem { padding: 10px 6px 10px 14px; border-radius: 16px; background: rgba(255, 255, 255, .9); box-shadow: inset 0 0 0 1px rgba(23, 19, 43, .07); }
.citem.is-open { box-shadow: inset 0 0 0 1.5px rgba(214, 64, 122, .35); }
.citem__top { display: flex; align-items: center; gap: 10px; }
.citem__name { flex: 1; min-width: 0; font-weight: 700; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.citem__name em { font-style: normal; color: var(--accent-ink); }
.citem__amt { font: 700 15px var(--display); font-variant-numeric: tabular-nums; }
.citem__who { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.cmini { --c: var(--accent); min-width: 34px; height: 34px; padding: 0 8px; border-radius: 99px; border: 0; cursor: pointer; font: 800 13px var(--body);
  color: var(--ink-3); background: #f3f1fa; box-shadow: inset 0 0 0 1px rgba(23, 19, 43, .08); transition: all .12s; }
.cmini.is-on { color: #fff; background: var(--c); box-shadow: 0 4px 10px -4px var(--c); }
.cmini--all { padding: 0 12px; }
.cmini--all.is-on { background: var(--ink); --c: var(--ink); }
.cmini:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(106, 85, 240, .4); }
.cscan__foot { display: flex; flex-direction: column; gap: 10px; padding-top: 4px; }
.cscan__totals { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-weight: 700; font-size: 14px; color: var(--ink-2); }
.cscan__totals .cfield--sm { width: auto; }
.cscan__totals .cfield--sm input { width: 96px; flex: none; }
.cscan__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.cscan__actions .cbtn { flex: 1; }
.cscan__foot .clink { align-self: center; color: var(--ink-3); font-size: 13px; }
.cscan__used { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 24px 18px; border-radius: 20px; background: rgba(255, 255, 255, .6); box-shadow: inset 0 0 0 1px rgba(23, 19, 43, .07); }
.cscan__used h4 { margin: 6px 0 0; font: 700 18px var(--display); }
.cscan__used p { margin: 0 0 6px; font-size: 14px; line-height: 1.6; color: var(--ink-2); max-width: 420px; }
.cscan__used .cscan__actions { width: 100%; }
.cnote { padding: 12px 14px; border-radius: 14px; font-size: 14px; line-height: 1.5; background: var(--tint-2); color: var(--ink-2); }
.cnote--warn { background: #fdf0f5; color: #9c2f5c; }

/* ---------- floating bits ---------- */
.cpill { position: fixed; left: 50%; bottom: 18px; z-index: 40; transform: translate(-50%, 140%); display: none; align-items: center; gap: 8px; height: 50px; padding: 0 22px; border: 0; border-radius: 99px; cursor: pointer;
  font: 800 15px var(--body); white-space: nowrap; color: #fff; background: rgba(23, 19, 43, .86); -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6);
  box-shadow: 0 14px 34px -10px rgba(23, 19, 43, .55), inset 0 1px 0 rgba(255, 255, 255, .14); transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
.cpill svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ctoast { position: fixed; left: 50%; top: 18px; z-index: 50; transform: translate(-50%, -160%); padding: 12px 18px; border-radius: 14px; font-weight: 700; font-size: 14px; color: #fff;
  background: rgba(23, 19, 43, .88); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: 0 14px 34px -10px rgba(23, 19, 43, .5); transition: transform .3s cubic-bezier(.2, .8, .2, 1); max-width: calc(100% - 32px); }
.ctoast.is-on { transform: translate(-50%, 0); }

/* ---------- compare table ---------- */
.ccompare__card { max-width: 860px; margin: 0 auto; border-radius: 24px; background: #fff; box-shadow: 0 0 0 1px var(--line), var(--card-shadow); overflow: hidden; }
.ccompare table { width: 100%; border-collapse: collapse; }
.ccompare th, .ccompare td { padding: 15px 20px; border-bottom: 1px solid var(--line); text-align: center; font-size: 15px; }
.ccompare tbody th { text-align: left; font-weight: 700; color: var(--ink); }
.ccompare thead th { font: 700 15px var(--display); background: var(--tint); }
.ccompare thead th.is-app { color: var(--accent-ink); }
.ccompare td svg { width: 20px; height: 20px; margin: 0 auto; fill: none; stroke: var(--green); stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.ccompare td.is-no { color: #c6c2d8; font-weight: 800; }
.ccompare td b { color: var(--accent-ink); }
.ccompare__cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; padding: 24px; }

.cchip.is-new, .crow.is-new, .citem.is-new { animation: cin .3s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes cin { from { opacity: 0; transform: translateY(6px) scale(.985); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .mac *, .cpill, .ctoast { animation: none !important; transition: none !important; } }

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .mac__body { grid-template-columns: minmax(0, 1fr); }
  .mac__side { border-left: 0; border-top: 1px solid var(--hair); }
  .cpill { display: inline-flex; }
  .cpill[hidden] { display: none; }
  .cpill.is-away { transform: translate(-50%, 0); }
}
@media (max-width: 640px) {
  .chero { padding: 12px 0 48px; }
  .chero .wrap { padding: 0 12px; }
  .chero__head { padding: 0 6px; margin-bottom: 24px; }
  .chero h1 { font-size: 34px; }
  .chero .lede { font-size: 16.5px; }
  .chero__trust { gap: 6px 14px; font-size: 13px; }
  .mac { border-radius: 24px; }
  .mac__bar { height: 50px; padding: 0 10px 0 16px; }
  .mac__title { display: none; }
  .mac__main, .mac__side { padding: 22px 16px 24px; }
  .mac__main { gap: 26px; }
  .cgrid { grid-template-columns: 1fr; }
  .cl__row { align-items: flex-start; flex-direction: column; }
  .cshare { grid-template-columns: 1fr 1fr; }
  .cbal__txt span { white-space: normal; }
  .cshare #c-share { grid-column: 1 / -1; }
  .cfield--sm { width: 116px; }
  .cseg--sm button { height: 36px; padding: 0 14px; font-size: 13.5px; }
  .cchip__x, .crow__x { width: 36px; height: 36px; }
  .ccompare th, .ccompare td { padding: 12px 10px; font-size: 13.5px; }
}