/* Aisance Debt: onboarding funnel, paywall, locked parts and the sign-in window.
   Same brand as the app (pine, greens, mint, Onest). Mobile first: one column, the main button
   sits at the bottom of the screen within thumb reach. */

/* ---------- bare pages: no sidebar, no tab bar ---------- */
body.bare .side, body.bare .topbar, body.bare .tabbar, body.bare .scrim { display: none !important; }
body.bare .app { grid-template-columns: minmax(0, 1fr); }
body.bare .page { padding: 0; max-width: none; }
body.bare { background: linear-gradient(180deg, #EAF4EF 0, var(--bg) 340px) no-repeat, var(--bg); }

.fn { max-width: 600px; margin: 0 auto; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; padding: 0 20px; }
.fn-top { display: flex; align-items: center; gap: 14px; height: 64px; flex: none; }
.fn-back { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: var(--ink-2); flex: none; margin-left: -8px; }
.fn-back:hover { background: rgba(21, 79, 70, .07); color: var(--ink); }
.fn-sp { width: 32px; flex: none; }
.fn-prog { flex: 1; height: 6px; border-radius: 3px; background: rgba(21, 79, 70, .1); overflow: hidden; }
.fn-prog i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--green) 0%, var(--green-2) 100%); transition: width .55s var(--ease); }
.fn-brand { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 760; font-size: 18px; letter-spacing: -.03em; color: var(--brand); }
.fn-brand .logo-mark { width: 28px; height: 28px; }
.fn-body { flex: 1; padding: 8px 0 28px; }
.fn-foot { position: sticky; bottom: 0; margin: 0 -20px; padding: 14px 20px calc(16px + env(safe-area-inset-bottom)); background: linear-gradient(180deg, rgba(244, 247, 249, 0) 0, var(--bg) 22px); z-index: 5; }
.fn-foot-in { display: flex; flex-direction: column; gap: 10px; }
/* a text field with the phone keyboard up (util.js body.typing): the button stops sticking to the bottom, where it
   would cover the field once Android in-app browsers shrink the page to the space above the keyboard */
body.typing .fn-foot { position: static; }
.fn-next { height: 56px; border-radius: 16px; font-size: 16.5px; box-shadow: 0 8px 22px rgba(21, 79, 70, .22); }
.fn-next .ico { transition: transform .2s var(--ease); }
.fn-next:hover .ico { transform: translateX(3px); }
.fn-next[disabled] { opacity: .38; box-shadow: none; }
.fn-alt { display: flex; justify-content: center; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14px; color: var(--ink-3); }
.fn-alt .link { font-size: 14px; }
/* text links get a finger-sized target (40px) without taking more room */
.fn-alt .link, .fn-rm .link { padding: 10px 0; margin: -10px 0; }
@media (max-width: 380px) { .fn-alt-long { display: none; } } /* "Войти · Посмотреть пример" fits one line on a narrow phone */

.fn-h1 { font-size: 30px; line-height: 1.12; font-weight: 780; letter-spacing: -.035em; color: var(--brand-3); }
.fn-h2 { font-size: 25px; line-height: 1.18; font-weight: 760; letter-spacing: -.03em; color: var(--brand-3); }
.fn-lead { font-size: 16.5px; line-height: 1.5; color: var(--ink-2); margin-top: 12px; }
.fn-sub { font-size: 15px; line-height: 1.5; color: var(--ink-2); margin: 8px 0 22px; }
.fn-sub b, .fn-lead b { color: var(--ink); }
.fn-badge { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: 9px; font-size: 13px; font-weight: 650; background: var(--mint); color: var(--brand); margin-bottom: 14px; }
.fn-badge.green { background: var(--green-bg); color: var(--green-ink); }
.fn-badge.amber { background: var(--amber-bg); color: var(--amber); }

/* hook */
.fn-art { height: 200px; margin: 0 -20px 22px; overflow: hidden; border-radius: 0 0 28px 28px; }
.fn-art svg { width: 100%; height: 100%; }
.fn-ticks { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-direction: column; gap: 12px; }
.fn-ticks li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.4; color: var(--ink); }
.fn-ticks .ico-s { color: var(--green); margin-top: 2px; width: 18px; height: 18px; }
.fn-note-box { display: flex; gap: 10px; align-items: flex-start; margin-top: 20px; padding: 12px 14px; border-radius: 12px; background: var(--blue-bg); color: #24488F; font-size: 14px; line-height: 1.45; }
.fn-note-box .ico-s { margin-top: 2px; }

/* options */
.fn-opts { display: flex; flex-direction: column; gap: 10px; }
.fn-opts.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fn-opt { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 64px; padding: 12px 14px; border-radius: 16px; background: var(--surface); border: 1.5px solid var(--line); text-align: left; font-size: 15.5px; font-weight: 550; line-height: 1.35; color: var(--ink); box-shadow: var(--sh-1); transition: border-color .16s, background .16s, transform .12s, box-shadow .16s; }
.fn-opt:hover { border-color: #CFE2D9; }
.fn-opt:active { transform: scale(.985); }
.fn-opt .fn-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--mint-2); color: var(--brand); flex: none; transition: background .16s, color .16s; }
.fn-opt .fn-t { flex: 1; min-width: 0; }
.fn-opt .fn-chk { width: 24px; height: 24px; border-radius: 8px; border: 1.5px solid var(--line-3); display: grid; place-items: center; color: transparent; flex: none; transition: all .16s; }
.fn-opt.on { border-color: var(--green); background: #F3FAF6; box-shadow: 0 0 0 3px rgba(28, 137, 92, .1); }
.fn-opt.on .fn-ic { background: var(--green); color: #fff; }
.fn-opt.on .fn-chk { background: var(--green); border-color: var(--green); color: #fff; }
.fn-opts[data-single] .fn-chk { border-radius: 50%; }
.fn-opts.two .fn-opt { flex-direction: column; align-items: flex-start; gap: 10px; min-height: 118px; position: relative; }
.fn-opts.two .fn-opt .fn-chk { position: absolute; top: 12px; right: 12px; }

/* trap */
.fn-trap { padding: 20px; }
.fn-trap-cap { font-size: 13px; color: var(--ink-3); margin-bottom: 14px; }
.fn-trap-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 14.5px; color: var(--ink-2); }
.fn-trap-row b { font-size: 18px; font-weight: 760; letter-spacing: -.02em; white-space: nowrap; }
.fn-trap-foot { font-size: 12.5px; color: var(--ink-3); margin-top: 6px; }
.fn-bar { height: 12px; border-radius: 6px; background: #EEF2F4; overflow: hidden; margin-top: 10px; }
.fn-bar i { display: block; height: 100%; width: 0; border-radius: 6px; transition: width 1.1s var(--ease); }
.fn-bar.grey i { background: repeating-linear-gradient(135deg, #C9D2D7 0 8px, #BCC6CC 8px 16px); }
.fn-bar.green i { background: linear-gradient(90deg, var(--green) 0, var(--green-2) 100%); transition-delay: .35s; }
.fn-calm { display: flex; gap: 10px; align-items: flex-start; margin-top: 18px; font-size: 14.5px; line-height: 1.45; color: var(--brand); }
.fn-calm .ico-s { margin-top: 2px; }
.fn-rules { display: flex; flex-direction: column; gap: 16px; }
.fn-rule { display: flex; gap: 14px; align-items: flex-start; }
.fn-rule b { display: block; font-size: 15px; line-height: 1.35; }
.fn-rule span:not(.num-badge) { display: block; font-size: 13.5px; color: var(--ink-3); margin-top: 3px; }

/* debts */
.fn-debts { display: flex; flex-direction: column; gap: 12px; }
.fn-debt { background: var(--surface); border-radius: 16px; border: 1px solid var(--line); box-shadow: var(--sh-1); padding: 14px; animation: rise .3s var(--ease); }
.fn-debt-h { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.fn-dname { flex: 1; min-width: 0; width: 0; height: 36px; border: 0; border-bottom: 1.5px dashed var(--line-3); background: transparent; font-size: 15.5px; font-weight: 650; outline: 0; padding: 0 30px 0 2px; color: var(--ink); text-overflow: ellipsis; } /* room for the pencil drawn over its end; width 0: the field's own width (about 220px) must not widen the card past a 320px screen, flex gives it the room */
@media (max-width: 900px), (pointer: coarse) { .fn-dname { height: 40px; font-size: 16px; } } /* the lender name: a 40px tap area on touch screens, and 16px: iPhone Safari zooms the page into a smaller field */
.fn-dname:focus { border-bottom-color: var(--green); }
.fn-dname::placeholder { color: var(--ink-3); font-weight: 550; }
.fn-dgrid { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 10px; }
.fn-f label { display: block; font-size: 12.5px; color: var(--ink-3); font-weight: 500; margin-bottom: 5px; white-space: nowrap; }
.fn-f .input { height: 48px; font-size: 16px; font-weight: 600; }
.fn-dhint { font-size: 12.5px; line-height: 1.4; color: var(--ink-3); margin-top: 9px; min-height: 0; }
.fn-dhint:empty { display: none; }
.fn-add { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 16px; font-size: 13.5px; color: var(--ink-3); }
.fn-add .chip { height: 40px; padding: 0 12px; }
.fn-total { text-align: center; font-size: 13.5px; color: var(--ink-2); }
.fn-total b { color: var(--ink); }

/* extra */
.fn-extra { background: var(--surface); border-radius: 18px; box-shadow: var(--sh-1); border: 1px solid rgba(20, 44, 38, .045); padding: 20px; }
.fn-extra-v { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-bottom: 12px; }
.fn-extra-v label { font-size: 14px; line-height: 1.35; color: var(--ink-3); }
/* the amount is a field: any sum can be typed, the slider and the chips below write into it too.
   Where the caption doesn't fit beside it, the caption goes under it and the field takes the row */
.fn-xin { flex: 1 1 190px; max-width: 250px; }
.fn-xin .input.has-pre { height: 60px; padding-left: 32px; border-radius: 14px; font-size: 30px; font-weight: 800; letter-spacing: -.035em; color: var(--brand-3); font-variant-numeric: tabular-nums; }
.fn-xin .pre { left: 14px; font-size: 22px; }
.fn-extra .fn-ferr { margin: -4px 0 10px; }
.fn-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.fn-chips .chip { height: 40px; }
.fn-live { margin-top: 14px; background: linear-gradient(180deg, #EAF5F0 0%, #E3F1EB 100%); border-color: transparent; box-shadow: none; text-align: center; padding: 20px; }
.fn-live .lbl { font-size: 13px; color: var(--ink-2); }
.fn-live-date { font-size: 30px; font-weight: 800; letter-spacing: -.035em; color: var(--brand-3); margin-top: 2px; animation: pop .3s var(--ease); }
.fn-live-sub { font-size: 14px; color: var(--ink-2); margin-top: 4px; }
.fn-live-sub b { color: var(--green-ink); }

/* name */
.fn-name .input { height: 56px; font-size: 18px; font-weight: 600; border-radius: 16px; }

/* calc */
.fn-calc { text-align: center; padding-top: 6vh; }
.fn-ring { width: 132px; height: 132px; margin: 0 auto 26px; position: relative; }
.fn-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.fn-ring circle { fill: none; stroke-width: 9; }
.fn-ring .bg { stroke: rgba(21, 79, 70, .1); }
.fn-ring .fg { stroke: var(--green); stroke-linecap: round; }
.fn-ring b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 28px; font-weight: 800; letter-spacing: -.03em; color: var(--brand-3); font-variant-numeric: tabular-nums; }
.fn-checks { list-style: none; padding: 0; margin: 22px auto 0; max-width: 380px; text-align: left; display: flex; flex-direction: column; gap: 14px; }
.fn-checks li { display: flex; gap: 12px; align-items: center; font-size: 15px; color: var(--ink-4); transition: color .3s; }
.fn-checks .st { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line-3); flex: none; position: relative; transition: all .3s; }
.fn-checks li.on { color: var(--ink); }
.fn-checks li.on .st { border-color: var(--green); border-right-color: transparent; animation: spin .7s linear infinite; }
.fn-checks li.done .st { animation: none; border-color: var(--green); background: var(--green); }
.fn-checks li.done .st::after { content: ''; position: absolute; left: 6px; top: 2.5px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
@keyframes spin { to { transform: rotate(360deg); } }

/* result */
.fn-res-top { text-align: center; padding-top: 4px; }
.fn-res-h { font-size: 22px; }
.fn-date { font-size: 46px; line-height: 1.05; font-weight: 820; letter-spacing: -.045em; color: var(--green-ink); margin-top: 8px; animation: pop .45s var(--ease) .1s both; }
.fn-cmp { margin-top: 22px; padding: 18px; }
.fn-cmp-row { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 12px; }
.fn-cmp-row .lbl { display: block; font-size: 12.5px; color: var(--ink-3); }
.fn-cmp-row b { font-size: 17px; font-weight: 760; letter-spacing: -.02em; }
.fn-cmp-row .r { text-align: right; }
.fn-cmp-row.base b { color: var(--ink-2); text-decoration: line-through; text-decoration-color: rgba(200, 65, 58, .55); text-decoration-thickness: 2px; }
.fn-cmp-row.plan { background: #F1F9F5; margin-top: 6px; }
.fn-cmp-row.plan b { color: var(--green-ink); }
.fn-chart { margin-top: 12px; }
.fn-win { display: flex; gap: 10px; align-items: center; margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: var(--brand); color: #fff; font-size: 14.5px; line-height: 1.4; }
.fn-win b { color: #B9F0D3; }
.fn-notes { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.fn-note-c { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.fn-note-c b { font-size: 14.5px; }
.fn-note-c p { font-size: 13.5px; color: var(--ink-2); line-height: 1.45; margin-top: 3px; }
.fn-step1 { margin-top: 14px; padding: 18px; border: 1.5px solid #CFE7DA; box-shadow: none; }
.fn-step1 .fn-badge { margin-bottom: 12px; }
.fn-step1-in { display: flex; gap: 14px; align-items: flex-start; }
.fn-step1-in b { font-size: 16px; line-height: 1.35; }
.fn-step1-in p { font-size: 14px; color: var(--ink-2); line-height: 1.45; margin-top: 4px; }
/* what the plan does with what they have already tried: one compact card, two lines, the rest on request */
.fn-tried { margin-top: 14px; padding: 16px 18px 8px; }
.fn-tried h3 { font-size: 15px; font-weight: 720; letter-spacing: -.01em; color: var(--brand-3); margin-bottom: 2px; }
.fn-tr { display: flex; gap: 12px; align-items: flex-start; padding: 9px 0; outline: 0; }
.fn-tr + .fn-tr { border-top: 1px solid var(--line-2); }
.fn-tr .tile.xs { width: 30px; height: 30px; border-radius: 9px; }
.fn-tr .tile.xs .ico { width: 16px; height: 16px; }
.fn-tr b { display: block; font-size: 14px; line-height: 1.35; }
.fn-tr p { font-size: 13.5px; line-height: 1.45; color: var(--ink-2); margin-top: 2px; }
.fn-tried-more { min-height: 40px; font-size: 13.5px; color: var(--green-ink); }
.fn-lockprev { position: relative; margin-top: 14px; background: var(--surface); border-radius: 16px; border: 1px solid var(--line); overflow: hidden; }
.fn-lockprev .locked-in { padding: 8px 14px 0; max-height: 210px; }
.fn-lockprev .tbl td { padding: 11px 8px; font-size: 13.5px; }
.fn-lockprev .tbl th { padding: 8px 8px 8px; }
.fn-lockcap { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; gap: 10px; align-items: center; padding: 12px 14px; border-radius: 12px; background: rgba(255, 255, 255, .94); box-shadow: var(--sh-2); font-size: 13.5px; font-weight: 600; color: var(--brand-3); line-height: 1.35; }
.fn-lockcap .ico-s { color: var(--green); flex: none; }

/* ---------- paywall ---------- */
.pw .fn-body { padding-top: 0; }
.pw .fn-note-box { margin: 4px 0 18px; }
.pw .pw-h + .fn-lead { text-align: center; margin-bottom: 20px; }
.pw-h { font-size: 27px; text-align: center; }
.pw-sum { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 18px 0 20px; background: rgba(21, 79, 70, .08); border-radius: 16px; overflow: hidden; }
.pw-sum > div { background: var(--surface); padding: 14px 16px; text-align: center; }
.pw-sum .lbl { display: block; font-size: 12.5px; color: var(--ink-3); }
.pw-sum b { display: block; font-size: 21px; font-weight: 790; letter-spacing: -.03em; margin-top: 2px; color: var(--brand-3); }
.pw-sum b.pos { color: var(--green-ink); }
.pw-tiers { display: flex; flex-direction: column; gap: 12px; }
.pw-tier { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px 12px; width: 100%; padding: 18px 16px 16px; border-radius: 18px; background: var(--surface); border: 2px solid var(--line); text-align: left; box-shadow: var(--sh-1); transition: border-color .16s, box-shadow .16s, transform .12s; }
.pw-tier:active { transform: scale(.99); }
.pw-tier.on { border-color: var(--green); box-shadow: 0 0 0 4px rgba(28, 137, 92, .12), var(--sh-2); }
.pw-tier.owned { opacity: .7; cursor: default; }
.pw-rec { position: absolute; top: -11px; left: 16px; height: 22px; padding: 0 10px; border-radius: 7px; background: var(--brand); color: #fff; font-size: 12px; font-weight: 650; display: inline-flex; align-items: center; }
.pw-radio { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line-3); position: relative; transition: all .16s; }
.pw-tier.on .pw-radio { border-color: var(--green); }
.pw-tier.on .pw-radio::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--green); }
.pw-tier.owned .pw-radio { border-color: var(--green); background: var(--green); }
.pw-name { font-size: 17.5px; font-weight: 760; letter-spacing: -.02em; }
.pw-price { font-size: 24px; font-weight: 820; letter-spacing: -.035em; color: var(--brand-3); text-align: right; line-height: 1; }
.pw-price small { display: block; font-size: 12px; font-weight: 500; letter-spacing: 0; color: var(--ink-3); margin-top: 4px; }
.pw-feats { grid-column: 2 / 4; display: flex; flex-direction: column; gap: 7px; margin-top: 10px; }
.pw-feats span { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; line-height: 1.4; color: var(--ink-2); }
.pw-feats .ico-s { color: var(--green); margin-top: 2px; }
.pw-anchor { display: flex; gap: 10px; align-items: flex-start; margin: 16px 2px 0; font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.pw-anchor .ico-s { color: var(--amber-dot); margin-top: 2px; }
.pw-anchor b { color: var(--ink); }
.pw-guar { display: flex; gap: 14px; align-items: flex-start; margin-top: 18px; padding: 16px; border-radius: 16px; background: linear-gradient(180deg, #EAF5F0 0%, #E3F1EB 100%); color: var(--brand-3); }
.pw-guar .ico { width: 28px; height: 28px; color: var(--green); flex: none; }
.pw-guar b { display: block; font-size: 15.5px; }
.pw-guar span { display: block; font-size: 14px; line-height: 1.45; color: var(--ink-2); margin-top: 3px; }
.pw-trust { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin-top: 16px; }
.pw-trust span { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--ink-2); }
.pw-trust .ico-s { color: var(--brand); }
.pw-faq { margin-top: 26px; }
.pw-faq h3 { font-size: 18px; font-weight: 740; letter-spacing: -.02em; margin-bottom: 8px; }
.pw-faq details { border-bottom: 1px solid var(--line); }
.pw-faq summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 2px; font-size: 15px; font-weight: 600; cursor: pointer; list-style: none; }
.pw-faq summary::-webkit-details-marker { display: none; }
.pw-faq summary .ico-s { color: var(--ink-3); transition: transform .2s; flex: none; }
.pw-faq details[open] summary .ico-s { transform: rotate(180deg); }
.pw-faq details p { padding: 0 2px 14px; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.pw-legal { margin-top: 22px; font-size: 12px; line-height: 1.5; color: var(--ink-3); text-align: center; }
.pw-legal a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- locked parts inside the app ---------- */
.locked { position: relative; min-height: 280px; border-radius: var(--r); }
.locked-in { filter: blur(6px) saturate(.8); opacity: .75; pointer-events: none; user-select: none; overflow: hidden; max-height: 760px; -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%); mask-image: linear-gradient(180deg, #000 55%, transparent 100%); }
.locked-cta { position: absolute; top: 90px; left: 50%; transform: translateX(-50%); width: min(420px, calc(100% - 24px)); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 24px 22px 20px; border-radius: 20px; background: rgba(255, 255, 255, .97); box-shadow: var(--sh-3); border: 1px solid rgba(20, 44, 38, .06); z-index: 2; }
.locked-cta .lock-ic { width: 46px; height: 46px; border-radius: 14px; background: var(--mint); color: var(--brand); display: grid; place-items: center; margin-bottom: 4px; }
.locked-cta b { font-size: 18px; font-weight: 750; letter-spacing: -.02em; color: var(--brand-3); }
.locked-cta p { font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.locked-cta .btn { margin-top: 8px; height: 48px; padding: 0 22px; }
.locked-cta .muted { font-size: 12px; }
.locked.short { min-height: 200px; }
.locked.short .locked-cta { top: 24px; }
.step-card { display: flex; gap: 14px; align-items: flex-start; }
.step-card b { font-size: 16px; }
.step-card p { font-size: 14px; color: var(--ink-2); margin-top: 3px; line-height: 1.45; }
.upsell { display: flex; gap: 14px; align-items: center; }
.upsell .grow b { display: block; font-size: 15px; }
.upsell .grow span { display: block; font-size: 13px; color: var(--ink-2); margin-top: 2px; }
.demo-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; margin-bottom: 18px; border-radius: 14px; background: var(--blue-bg); color: #24488F; font-size: 14px; }
.demo-bar .sp { flex: 1; }
.est-pill { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px; border-radius: 6px; background: var(--amber-bg); color: var(--amber); font-size: 12px; font-weight: 650; margin-left: 6px; vertical-align: 2px; }

/* ---------- sign-in window ---------- */
.auth-modal { max-width: 440px; }
.btn-google { background: var(--surface); color: var(--ink); border: 1px solid var(--line-3); gap: 10px; }
.btn-google:hover { background: #FAFBFC; border-color: #C5D0D5; }
.au-or { display: flex; align-items: center; gap: 12px; margin: 16px 0; font-size: 13px; color: var(--ink-3); }
.au-or::before, .au-or::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.auth-modal form { display: flex; flex-direction: column; gap: 12px; }
.auth-modal .input { height: 50px; font-size: 16px; }
.auth-modal .input::placeholder { color: #6E787F; opacity: 1; } /* 4.5:1 on white, like the onboarding fields */
.au-msg { font-size: 13.5px; line-height: 1.45; color: var(--ink-2); min-height: 0; }
.au-msg:empty { display: none; }
.au-msg.err { color: var(--red); }
.au-switch { text-align: center; margin-top: 16px; font-size: 14px; color: var(--ink-2); display: flex; justify-content: center; align-items: center; gap: 6px; }
.au-legal { text-align: center; margin-top: 14px; font-size: 12px; color: var(--ink-3); line-height: 1.5; }
.au-legal a { text-decoration: underline; text-underline-offset: 2px; }
.btn.loading { position: relative; color: transparent !important; }
.btn.loading::after { content: ''; position: absolute; width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, .45); border-top-color: #fff; animation: spin .7s linear infinite; }
.btn-secondary.loading::after, .btn-google.loading::after { border-color: rgba(21, 79, 70, .25); border-top-color: var(--brand); }

.paid-modal { max-width: 440px; text-align: center; padding-top: 0; overflow-x: hidden; overflow-y: auto; } /* a short screen scrolls it (320x568, a phone on its side) */
.paid-art { height: min(120px, 18vh); margin: 0 -28px 18px; }
.paid-art svg { width: 100%; height: 100%; }
.paid-modal h2 { font-size: 23px; font-weight: 780; letter-spacing: -.025em; color: var(--brand-3); }
.paid-modal .soft { margin-top: 6px; font-size: 14.5px; }
.paid-list { list-style: none; padding: 0; margin: 18px 0 22px; display: flex; flex-direction: column; gap: 10px; text-align: left; }
.paid-list li { display: flex; gap: 10px; align-items: center; font-size: 15px; }
.paid-list .ico-s { color: var(--green); }

.acct-card .acct-h { display: flex; gap: 14px; align-items: center; }
.acct-card .avatar { width: 44px; height: 44px; font-size: 18px; }
.acct-card .grow b { display: block; font-size: 15.5px; word-break: break-all; }
.acct-card .grow span { display: block; font-size: 13px; color: var(--ink-3); margin-top: 2px; }

@media (min-width: 900px) {
  .fn { padding: 0 32px; }
  .fn-body { padding-top: 24px; flex: 0 0 auto; }
  .fn-foot { position: static; margin: 0; padding: 8px 0 40px; background: none; }
  .fn-h1 { font-size: 38px; }
  .fn-h2 { font-size: 30px; }
  .fn-art { height: 240px; margin: 0 0 26px; border-radius: 24px; }
  .fn-date { font-size: 60px; }
  .fn-res-h { font-size: 26px; }
  .pw-tiers { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
  .pw-tier { grid-template-columns: auto 1fr; align-content: start; }
  .pw-price { grid-column: 1 / 3; text-align: left; margin-top: 8px; }
  .pw-price small { display: inline; margin-left: 6px; }
  .pw-feats { grid-column: 1 / 3; }
  .pw-trust { grid-template-columns: repeat(4, auto); justify-content: center; }
  .fn.pw { max-width: 760px; }
}
@media (max-width: 420px) {
  .fn-h1 { font-size: 27px; }
  .fn-h2 { font-size: 23px; }
  .fn-dgrid { grid-template-columns: 1fr 1fr; }
  .fn-dgrid .fn-f:first-child { grid-column: 1 / 3; }
  .fn-opts.two { grid-template-columns: minmax(0, 1fr); }
  .fn-opts.two .fn-opt { flex-direction: row; align-items: center; min-height: 64px; }
  .fn-opts.two .fn-opt .fn-chk { position: static; }
  .fn-date { font-size: 40px; }
  .pw-trust { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .fn-checks li.on .st { animation: none; }
  .fn-prog i, .fn-bar i { transition: none; }
}

.ai-quota { margin-top: 8px; font-size: 12.5px; text-align: center; }
.ai-quota a { color: var(--ink-3); }
.ai-quota a:hover { color: var(--green-ink); }
.pop-sub { padding: 0 12px 8px; margin-top: -4px; font-size: 12.5px; color: var(--ink-3); word-break: break-all; }
.pop a.accent { color: var(--green-ink); font-weight: 650; }
.fn-debt-h .fn-dname-ic { color: var(--ink-4); margin-left: -30px; pointer-events: none; }
.pw-inside { margin-top: 22px; }
.pw-inside h3 { font-size: 18px; font-weight: 740; letter-spacing: -.02em; margin-bottom: 12px; }
.pw-f { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; }
.pw-f + .pw-f { border-top: 1px solid var(--line-2); }
.pw-f b { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 15px; }
.pw-f span:not(.tile):not(.pw-tag) { display: block; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); margin-top: 2px; }
.pw-tag { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 6px; background: var(--brand); color: #fff; font-size: 12px; font-weight: 650; }
/* the reason «План + AI» is recommended, from the person's own data (without one there is no badge) */
.pw-why { grid-column: 1 / -1; display: flex; gap: 8px; align-items: flex-start; margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: var(--mint-3); font-size: 13.5px; line-height: 1.45; font-weight: 500; color: var(--brand-3); }
.pw-why .ico-s { flex: none; margin-top: 2px; color: var(--green); }
/* one tier on sale: a plain card, no radio, nothing to choose */
.pw-tier.pw-one { grid-template-columns: minmax(0, 1fr) auto; cursor: default; }
.pw-tier.pw-one:active { transform: none; }
.pw-tier.pw-one .pw-feats { grid-column: 1 / -1; }
.pw-feats span.add { color: var(--ink); font-weight: 600; }
.pw-feats span.add .ico-s { color: #fff; background: var(--green); border-radius: 50%; padding: 2px; width: 16px; height: 16px; }
.pw-cta-inline { display: none; }
.pw-mini { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 8px; font-size: 12.5px; color: var(--ink-3); }
.pw-mini .ico-s { color: var(--green); }
@media (min-width: 900px) {
  .pw-cta-inline { display: block; margin-top: 16px; }
  .pw-tiers.one { grid-template-columns: minmax(0, 1fr); }
  .pw-tier.pw-one { grid-template-columns: minmax(0, 1fr) auto; padding: 22px 24px; }
  .pw-tier.pw-one .pw-price { grid-column: auto; text-align: right; margin-top: 0; }
  .pw-tier.pw-one .pw-price small { display: block; margin: 4px 0 0; }
  .pw-tier.pw-one .pw-feats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; margin-top: 14px; }
}

/* ---------- legal pages, new password, 404 ---------- */
.legal { max-width: 760px; margin: 0 auto; padding: 28px 20px 64px; }
.legal .fn-brand { justify-content: flex-start; margin-bottom: 18px; }
.legal-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.legal-nav a { height: 34px; padding: 0 12px; border-radius: 10px; display: inline-flex; align-items: center; font-size: 13.5px; font-weight: 550; color: var(--ink-2); background: var(--surface); border: 1px solid var(--line); }
.legal-nav a.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.legal h1 { font-size: 32px; font-weight: 780; letter-spacing: -.03em; color: var(--brand-3); }
.legal .updated { color: var(--ink-3); font-size: 13.5px; margin: 6px 0 22px; }
.legal h2 { font-size: 19px; font-weight: 720; letter-spacing: -.015em; margin: 28px 0 8px; }
.legal p, .legal li { font-size: 15px; line-height: 1.6; color: var(--ink); }
.legal p + p { margin-top: 10px; }
.legal ul { padding-left: 20px; margin: 8px 0; }
.legal li + li { margin-top: 6px; }
.legal a { color: var(--green-ink); text-decoration: underline; text-underline-offset: 2px; }
.legal table { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: 14px; }
.legal th, .legal td { text-align: left; vertical-align: top; padding: 10px 8px; border-top: 1px solid var(--line); }
.legal th { color: var(--ink-3); font-weight: 550; font-size: 13px; }
.legal .box { margin-top: 30px; padding: 16px 18px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); font-size: 14px; }
.legal .note { padding: 14px 16px; border-radius: 12px; background: var(--amber-bg); color: #5F4A12; font-size: 14.5px; line-height: 1.55; margin: 14px 0; }
.solo { max-width: 420px; margin: 0 auto; padding: 48px 20px; }
.solo .fn-brand { margin-bottom: 26px; }
.solo h1 { font-size: 26px; font-weight: 780; letter-spacing: -.03em; color: var(--brand-3); text-align: center; }
.solo p.lead { text-align: center; color: var(--ink-2); margin: 8px 0 22px; font-size: 15px; }
.solo form { display: flex; flex-direction: column; gap: 12px; }
.solo .input { height: 50px; font-size: 16px; }
@media (max-width: 640px) { .legal h1 { font-size: 26px; } .legal table, .legal thead, .legal tbody, .legal tr, .legal th, .legal td { display: block; } .legal thead { display: none; } .legal td { border-top: 0; padding: 4px 0; } .legal tr { border-top: 1px solid var(--line); padding: 10px 0; } }
.fn-step1-k { display: block; font-size: 12.5px; color: var(--ink-3); margin-bottom: 2px; }

/* three long labels in a segmented control on a narrow phone (Настройки: стратегия) */
@media (max-width: 420px) { .field > .seg button { padding: 4px 6px; font-size: 13px; white-space: normal; line-height: 1.15; height: auto; min-height: 40px; } }

/* ---------- the tour offer in the corner ---------- */
.tour-offer { position: fixed; right: 24px; bottom: 24px; z-index: 60; width: 340px; display: flex; gap: 14px; align-items: flex-start; padding: 16px 16px 16px 14px; border-radius: 18px; background: var(--surface); box-shadow: var(--sh-3); border: 1px solid rgba(20, 44, 38, .06); opacity: 0; transform: translateY(16px); transition: opacity .25s var(--ease), transform .25s var(--ease); }
.tour-offer.on { opacity: 1; transform: none; }
.tour-offer .to-art { width: 64px; height: 52px; flex: none; border-radius: 12px; overflow: hidden; background: var(--mint); }
.tour-offer .to-art svg { width: 100%; height: 100%; }
.tour-offer .to-body { flex: 1; min-width: 0; padding-right: 18px; }
.tour-offer b { display: block; font-size: 15px; line-height: 1.3; color: var(--brand-3); }
.tour-offer p { font-size: 13px; line-height: 1.45; color: var(--ink-2); margin-top: 4px; }
.tour-offer .to-acts { display: flex; gap: 6px; margin-top: 12px; }
.tour-offer .x-btn { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; margin: 0; }
@media (max-width: 900px) {
  .tour-offer { left: 12px; right: 12px; width: auto; bottom: calc(92px + env(safe-area-inset-bottom)); }
}
@media print { .tour-offer { display: none; } }

/* ---------- payment reminders ---------- */
.push-banner { display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 16px; margin-bottom: 18px; border-radius: 14px; background: var(--mint); color: var(--brand-3); font-size: 14px; line-height: 1.4; }
.push-banner > .ico { color: var(--green); flex: none; }
.push-banner .grow { flex: 1; min-width: 0; }
.push-banner .x-btn { margin: 0; width: 32px; height: 32px; }
.ios-steps { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 10px; font-size: 15px; line-height: 1.5; }
@media (max-width: 640px) { .push-banner { flex-wrap: wrap; } .push-banner .grow { flex-basis: calc(100% - 80px); } }

/* ---------- debts: one per screen ---------- */
.fn-count { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 8px; background: var(--mint); color: var(--brand); font-size: 13px; font-weight: 650; margin-bottom: 12px; }
.fn-debt.solo { padding: 16px; }
.fn-debt.solo .fn-debt-h { margin-bottom: 14px; }
.fn-big { margin-bottom: 12px; }
.fn-big label { font-size: 13px; }
.fn-big .input { height: 62px; font-size: 26px; font-weight: 750; letter-spacing: -.02em; border-radius: 14px; }
.fn-big .affix .pre { font-size: 22px; left: 16px; }
.fn-big .affix .input.has-pre { padding-left: 36px; }
.fn-debt.solo .fn-dgrid { grid-template-columns: 1fr 1fr; }
/* an empty field shows an example in grey (4.5:1 on white); a typed number is dark and heavy, so the two never look alike */
.fn .input::placeholder { color: #6E787F; font-weight: 400; letter-spacing: 0; opacity: 1; }
.fn-f .input::placeholder { font-size: 14.5px; }
.fn-big .input::placeholder { font-size: 19px; }
.fn-ferr { margin: -4px 0 12px; font-size: 12.5px; line-height: 1.4; color: var(--red); }
.fn-ferr:empty { display: none; }
.fn-rm { margin-top: 10px; }
.fn-rm .link { font-size: 13.5px; color: var(--ink-3); }
.fn-rm .link:hover { color: var(--red); }
.fn-total:empty { display: none; }
@media (max-width: 420px) { .fn-debt.solo .fn-dgrid { grid-template-columns: 1fr 1fr; } .fn-debt.solo .fn-dgrid .fn-f:first-child { grid-column: auto; } }
/* narrow phones: rate and minimum one per row, the label beside the field, so "например, 136" fits whole */
@media (max-width: 380px) {
  .fn-debt.solo .fn-dgrid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .fn-debt.solo .fn-dgrid .fn-f { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); align-items: center; gap: 10px; }
  .fn-debt.solo .fn-dgrid .fn-f label { margin: 0; white-space: normal; line-height: 1.3; }
}
.fn-legal { margin-top: 18px; font-size: 12px; line-height: 1.5; color: var(--ink-3); text-align: center; }
.fn-legal a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px; }