/*
 * Materials (articles and the catalog) in the same visual language as the landing: soft cards, calm light/dark rhythm,
 * reveal on scroll. Loaded after seo-pages.css and landing-new.css; the pricing page does not use it.
 */
.yf-guide {
    --yfa-ink: var(--yf26-ink, #10221e);
    --yfa-muted: var(--yf26-muted, #5f706a);
    --yfa-line: rgba(16, 34, 30, .1);
    --yfa-mint-deep: #178a66;
    --yfa-gold-deep: #85702d;
    --yfa-ease: cubic-bezier(.22, 1, .36, 1);
}
.yf-guide .yf-guide-eyebrow { color: var(--yfa-gold-deep); }
.yfa-hero .yf-guide-eyebrow, .yfa-example .yf-guide-eyebrow, .yfa-steps .yf-guide-eyebrow { color: var(--yf26-gold); }
.yfa-head h2, .yfa-example h2, .yfa-method h2, .yfa-tool h2, .yfa-product h2, .yfa-faq h2, .yfa-catalog h2 {
    max-width: 820px;
    margin: 14px 0 20px;
    color: var(--yfa-ink);
    font-size: clamp(30px, 3.8vw, 46px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.02em;
    text-wrap: balance;
}

/* ── Reading progress ─────────────────────────────────────────────────────── */
.yfa-progress { position: fixed; z-index: 1300; inset: 0 0 auto; height: 3px; pointer-events: none; }
.yfa-progress i { display: block; height: 100%; transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(90deg, var(--yf26-mint), var(--yf26-gold)); }

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.yfa-aurora { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.yfa-aurora i { position: absolute; border-radius: 50%; filter: blur(90px); }
.yfa-aurora i:nth-child(1) { top: -22%; right: 4%; width: 480px; height: 480px; background: rgba(69, 190, 145, .3); animation: yfa-drift 18s ease-in-out infinite alternate; }
.yfa-aurora i:nth-child(2) { bottom: -34%; left: -6%; width: 420px; height: 420px; background: rgba(232, 200, 105, .12); animation: yfa-drift 22s ease-in-out infinite alternate-reverse; }
@keyframes yfa-drift { to { transform: translate3d(36px, 28px, 0) scale(1.1); } }
.yfa-hero .yf-guide-hero__brief { border-radius: 24px; border-color: rgba(101, 217, 174, .22); background: linear-gradient(160deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.yfa-hero .yf-guide-hero__brief > div > i { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 8px; background: rgba(101, 217, 174, .16); font-size: 14px; }

/* ── Intro: contents + prose ──────────────────────────────────────────────── */
.yfa-intro { background: #fff; }
.yfa-reading { display: grid; grid-template-columns: 230px minmax(0, 760px); justify-content: space-between; gap: 64px; }
.yfa-toc { position: sticky; top: 96px; align-self: start; display: grid; gap: 2px; border-left: 2px solid var(--yfa-line); }
.yfa-toc strong { padding: 0 0 14px 18px; color: var(--yfa-ink); font: 700 11px/1.3 "IBM Plex Mono", monospace; text-transform: uppercase; }
.yfa-toc a { position: relative; padding: 8px 0 8px 18px; color: var(--yfa-muted); font-size: 13.5px; line-height: 1.4; transition: color .25s ease, padding .3s var(--yfa-ease); }
.yfa-toc a::before { content: ""; position: absolute; top: 50%; left: -2px; width: 2px; height: 0; background: var(--yfa-mint-deep); transform: translateY(-50%); transition: height .3s var(--yfa-ease); }
.yfa-toc a:hover { color: var(--yfa-ink); }
.yfa-toc a.is-current { padding-left: 22px; color: var(--yfa-ink); font-weight: 700; }
.yfa-toc a.is-current::before { height: 72%; }

.yfa-prose { min-width: 0; }
.yfa-kicker { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 26px; padding: 7px 14px 7px 11px; border-radius: 999px; color: #0f7a58; background: #e4f5ee; font-size: 13px; font-weight: 700; line-height: 1.3; }
.yfa-kicker i { font-size: 16px; }
.yfa-prose > p { margin: 0 0 20px; color: #495a54; font-size: 17.5px; line-height: 1.8; }
.yfa-prose > p.yfa-lead { margin-bottom: 24px; color: var(--yfa-ink); font-size: clamp(20px, 2vw, 23px); font-weight: 500; line-height: 1.6; }
.yfa-block { position: relative; margin-top: 68px; }
.yfa-block__n { display: inline-grid; min-width: 46px; height: 28px; place-items: center; padding: 0 10px; border-radius: 9px; color: var(--yfa-gold-deep); background: rgba(232, 200, 105, .22); font: 600 12px/1 "IBM Plex Mono", monospace; }
.yfa-block h2 { margin: 14px 0 20px; color: var(--yfa-ink); font-size: clamp(28px, 3.2vw, 38px); font-weight: 700; line-height: 1.12; letter-spacing: -.02em; text-wrap: balance; }
.yfa-block p { margin: 0 0 18px; color: #495a54; font-size: 17px; line-height: 1.8; }
.yfa-points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 26px 0 0; padding: 0; list-style: none; }
.yfa-points li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; align-items: start; padding: 16px; border: 1px solid var(--yfa-line); border-radius: 18px; color: #2f4039; background: linear-gradient(180deg, #fbfdfc, #f3f8f5); font-size: 15px; line-height: 1.55; transition: transform .35s var(--yfa-ease), border-color .3s ease, box-shadow .35s var(--yfa-ease); }
.yfa-points li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.yfa-points li:hover { transform: translateY(-3px); border-color: rgba(23, 138, 102, .3); box-shadow: 0 22px 38px -28px rgba(5, 25, 20, .5); }
.yfa-points i { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 10px; color: #0f7a58; background: #d9f2e7; font-size: 17px; }

/* ── Worked example ───────────────────────────────────────────────────────── */
.yfa-example { position: relative; overflow: hidden; color: #edf7f2; background: radial-gradient(700px 380px at 92% 0, rgba(101, 217, 174, .15), transparent 70%), radial-gradient(520px 320px at 0 100%, rgba(232, 200, 105, .08), transparent 70%), var(--yf26-forest); }
.yfa-example__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: clamp(36px, 6vw, 80px); }
.yfa-example h2 { color: #f5fbf8; }
.yfa-example__copy > p:last-child { max-width: 560px; margin: 0; color: rgba(230, 243, 237, .7); font-size: 17px; line-height: 1.75; }
.yfa-ledger { overflow: hidden; border: 1px solid rgba(255, 255, 255, .12); border-radius: 26px; background: linear-gradient(160deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02)); box-shadow: 0 50px 80px -50px rgba(0, 0, 0, .7); }
.yfa-ledger > header { display: flex; align-items: center; gap: 12px; padding: 18px 22px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.yfa-ledger > header > span { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 11px; color: var(--yf26-mint); background: rgba(101, 217, 174, .12); font-size: 18px; }
.yfa-ledger > header strong { color: #f5fbf8; font-size: 15px; }
.yfa-ledger > header em { margin-left: auto; padding: 5px 10px; border-radius: 999px; color: var(--yf26-gold); background: rgba(232, 200, 105, .12); font-size: 11.5px; font-style: normal; font-weight: 650; white-space: nowrap; }
.yfa-ledger__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 9px 16px; padding: 15px 22px 17px; }
.yfa-ledger__row + .yfa-ledger__row { border-top: 1px dashed rgba(255, 255, 255, .09); }
.yfa-ledger__row > span { color: rgba(230, 243, 237, .74); font-size: 14px; line-height: 1.4; }
.yfa-ledger__row > strong { color: #f5fbf8; font-size: 19px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.yfa-ledger__row.positive > strong { color: var(--yf26-mint); }
.yfa-ledger__row.negative > strong { color: #ff9aa1; }
.yfa-ledger__bar { position: relative; grid-column: 1 / -1; height: 6px; overflow: hidden; border-radius: 99px; background: rgba(255, 255, 255, .07); }
.yfa-ledger__bar::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: inherit; background: linear-gradient(90deg, rgba(231, 243, 237, .28), rgba(231, 243, 237, .5)); transform-origin: 0 50%; transition: transform 1s var(--yfa-ease) .25s; }
.yfa-ledger__row.positive .yfa-ledger__bar::after { background: linear-gradient(90deg, rgba(101, 217, 174, .45), var(--yf26-mint)); }
.yfa-ledger__row.negative .yfa-ledger__bar::after { background: linear-gradient(90deg, rgba(255, 124, 132, .45), #ff8f97); }
.yfn-js .yfa-ledger:not(.is-in) .yfa-ledger__bar::after { transform: scaleX(0); animation: yfa-grow 0s 3.5s forwards; }
@keyframes yfa-grow { to { transform: none; } }
.yfa-ledger__result { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 14px; margin: 0; padding: 20px 22px; color: #06231a; background: linear-gradient(120deg, #e8c869, #65d9ae); font-weight: 700; line-height: 1.5; }
.yfa-ledger__result > i { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 12px; background: rgba(6, 35, 26, .12); font-size: 20px; }

/* ── Method: the formula drawn as an equation ─────────────────────────────── */
.yfa-method { background: var(--yf26-paper); }
.yfa-method__grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); align-items: center; gap: clamp(36px, 6vw, 72px); }
.yfa-method__copy > p:last-child { margin: 0; color: var(--yfa-muted); font-size: 17px; line-height: 1.75; }
.yfa-formula { padding: 28px; border: 1px solid var(--yfa-line); border-radius: 26px; background: #fff; box-shadow: 0 40px 80px -52px rgba(5, 25, 20, .4); }
.yfa-formula__label { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 18px; color: var(--yfa-gold-deep); font: 700 11px/1.3 "IBM Plex Mono", monospace; text-transform: uppercase; }
.yfa-formula__label i { font-size: 15px; }
.yfa-formula__eq { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 20px; border-radius: 18px; background: linear-gradient(160deg, #f2faf6, #e8f4ee); }
.yfa-term { display: inline-flex; align-items: center; padding: 10px 14px; border: 1px solid rgba(23, 138, 102, .18); border-radius: 12px; color: #0b4d39; background: #fff; box-shadow: 0 6px 14px -10px rgba(5, 25, 20, .5); font-size: 14.5px; font-weight: 700; line-height: 1.35; }
.yfa-term b { margin: 0 6px; color: #b88a1a; font-weight: 800; }
.yfa-term.is-result { border-color: transparent; color: #06231a; background: linear-gradient(135deg, #7ce6bf, #65d9ae); }
.yfa-op { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 50%; color: var(--yfa-gold-deep); background: rgba(232, 200, 105, .24); font-size: 19px; font-weight: 800; line-height: 1; }
.yfa-op.is-eq { color: var(--yfa-ink); background: transparent; font-size: 22px; }
.yfa-formula__note { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; margin: 18px 0 0; color: var(--yfa-muted); font-size: 13.5px; line-height: 1.6; }
.yfa-formula__note i { margin-top: 2px; color: var(--yfa-mint-deep); font-size: 17px; }

/* ── Calculator ───────────────────────────────────────────────────────────── */
.yfa-tool { background: linear-gradient(180deg, #e4ece8, #ebf2ee); }
.yfa-tool .yf-guide-tool { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(36px, 6vw, 64px); }
.yfa-tool .yf-guide-tool__copy > p:not(.yf-guide-eyebrow) { color: var(--yfa-muted); font-size: 17px; line-height: 1.75; }
.yfa-tool .yf-guide-tool__workspace { padding: 28px; border: 1px solid rgba(16, 34, 30, .08); border-radius: 28px; box-shadow: 0 50px 90px -56px rgba(5, 25, 20, .55); }
.yfa-tool .yf-guide-tool__workspace label > span { color: #4f625b; font-size: 12.5px; }
.yfa-tool .yf-guide-tool__workspace label > div { min-height: 54px; border: 1px solid var(--yfa-line); border-radius: 14px; background: #f6f9f7; transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease; }
.yfa-tool .yf-guide-tool__workspace label > div:focus-within { border-color: var(--yfa-mint-deep); background: #fff; box-shadow: 0 0 0 4px rgba(101, 217, 174, .22); }
.yfa-tool .yf-guide-tool__workspace input { padding: 13px 14px; font-size: 17px; font-weight: 750; }
.yfa-tool .yf-guide-tool__result { margin-top: 20px; padding: 24px; border: 1px solid rgba(23, 138, 102, .16); border-left: 1px solid rgba(23, 138, 102, .16); border-radius: 22px; background: linear-gradient(160deg, #f0faf5, #e2f3eb); }
.yfa-tool .yf-guide-tool__result strong { margin-top: 6px; font-size: clamp(34px, 4vw, 44px); font-weight: 800; line-height: 1.05; letter-spacing: -.02em; }
.yfa-tool .yft-viz { min-height: 96px; }
.yfa-tool .yf-guide-tool__workspace > a { justify-content: center; gap: 10px; margin-top: 20px; padding: 16px 22px; border-radius: 16px; color: #06231a; background: linear-gradient(180deg, #7ce6bf, #65d9ae); box-shadow: 0 1px 0 rgba(255, 255, 255, .55) inset, 0 18px 36px -16px rgba(101, 217, 174, .7); font-size: 15px; font-weight: 750; transition: transform .25s var(--yfa-ease), box-shadow .25s var(--yfa-ease); }
.yfa-tool .yf-guide-tool__workspace > a:hover { transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255, 255, 255, .55) inset, 0 24px 44px -16px rgba(101, 217, 174, .85); }
.yfa-tool .yf-guide-flow button { border-radius: 20px; transition: transform .3s var(--yfa-ease), border-color .3s ease; }
.yfa-tool .yf-guide-flow button:hover { transform: translateY(-3px); }
.yfa-tool .yf-guide-flow > div { border-style: dashed; border-radius: 20px; }

/* ── In the product ───────────────────────────────────────────────────────── */
.yfa-product { background: #fff; }
.yfa-product .yf-guide-product__copy > p:not(.yf-guide-eyebrow) { color: var(--yfa-muted); font-size: 17px; line-height: 1.75; }
.yfa-product .yf-guide-product__copy ul { gap: 10px; margin: 24px 0 0; }
.yfa-product .yf-guide-product__copy li { align-items: center; padding: 12px 14px; border: 1px solid var(--yfa-line); border-radius: 14px; background: #f6faf8; font-size: 15px; line-height: 1.45; }
.yfa-product .yf-guide-product__copy li i { display: grid; flex: none; width: 26px; height: 26px; place-items: center; border-radius: 8px; color: #0f7a58; background: #d9f2e7; font-size: 15px; }

/* ── Mistakes ─────────────────────────────────────────────────────────────── */
.yfa-mistakes { background: var(--yf26-paper); }
.yfa-mistakes__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 44px; }
.yfa-mistake { position: relative; display: grid; align-content: start; gap: 10px; padding: 26px 26px 24px; overflow: hidden; border: 1px solid var(--yfa-line); border-radius: 22px; background: #fff; transition: transform .35s var(--yfa-ease), box-shadow .35s var(--yfa-ease), border-color .35s ease; }
.yfa-mistake::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, #ff8f97, var(--yf26-gold)); opacity: 0; transition: opacity .35s ease; }
.yfa-mistake:hover { transform: translateY(-4px); border-color: rgba(217, 92, 101, .25); box-shadow: 0 34px 60px -44px rgba(5, 25, 20, .55); }
.yfa-mistake:hover::before { opacity: 1; }
.yfa-mistake__icon { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 13px; color: #c9444f; background: rgba(255, 124, 132, .14); font-size: 20px; }
.yfa-mistake h3 { margin: 6px 0 0; color: var(--yfa-ink); font-size: 19px; font-weight: 700; line-height: 1.3; }
.yfa-mistake p { margin: 0; color: var(--yfa-muted); font-size: 15px; line-height: 1.65; }

/* ── Steps ────────────────────────────────────────────────────────────────── */
.yfa-steps { color: #edf7f2; background: radial-gradient(640px 320px at 8% 0, rgba(101, 217, 174, .1), transparent 70%), var(--yf26-night); }
.yfa-steps h2 { color: #f5fbf8; }
.yfa-steps__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 46px 0 0; padding: 0; list-style: none; }
.yfa-step { position: relative; padding: 28px 26px 26px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 24px; background: linear-gradient(160deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .015)); transition: transform .35s var(--yfa-ease), border-color .35s ease; }
.yfa-step:hover { transform: translateY(-4px); border-color: rgba(101, 217, 174, .35); }
.yfa-step:not(:last-child)::after { content: ""; position: absolute; top: 51px; left: 84px; right: -44px; height: 1px; background: repeating-linear-gradient(90deg, rgba(101, 217, 174, .55) 0 6px, transparent 6px 12px); }
.yfa-step__n { display: inline-grid; position: relative; z-index: 1; width: 46px; height: 46px; place-items: center; border-radius: 14px; color: #06231a; background: linear-gradient(135deg, #7ce6bf, var(--yf26-gold)); font: 800 15px/1 "IBM Plex Mono", monospace; }
.yfa-step h3 { margin: 22px 0 10px; color: #f5fbf8; font-size: 21px; font-weight: 700; line-height: 1.25; }
.yfa-step p { margin: 0; color: rgba(230, 243, 237, .68); font-size: 15px; line-height: 1.65; }

/* ── FAQ ──────────────────────────────────────────────────────────────────── */
.yfa-faq { background: #fff; }
.yfa-faq__layout { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: clamp(36px, 6vw, 80px); }
.yfa-faq__copy > p:last-child { margin: 0; color: var(--yfa-muted); font-size: 15px; line-height: 1.7; }
.yfa-faq__list { display: grid; gap: 12px; align-content: start; border-top: 0; }
.yfa-faq details { overflow: hidden; border: 1px solid var(--yfa-line); border-radius: 20px; background: #fff; transition: border-color .3s ease, box-shadow .35s var(--yfa-ease), background-color .3s ease; }
.yfa-faq details:hover { border-color: rgba(23, 138, 102, .25); }
.yfa-faq details[open] { border-color: rgba(23, 138, 102, .35); background: linear-gradient(180deg, #fbfefd, #f3faf6); box-shadow: 0 24px 44px -34px rgba(5, 25, 20, .5); }
.yfa-faq summary { display: grid; grid-template-columns: 34px minmax(0, 1fr) 32px; align-items: center; gap: 14px; padding: 20px 22px; font-size: 16.5px; font-weight: 700; line-height: 1.4; }
.yfa-faq summary > span { color: var(--yfa-gold-deep); }
.yfa-faq summary > i { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 10px; color: #0f7a58; background: #e4f5ee; transition: background-color .3s ease, color .3s ease; }
.yfa-faq details[open] summary > i { color: #06231a; background: var(--yf26-mint); }
.yfa-faq details[open] > div > p { padding: 0 24px 22px 70px; }

/* ── Next step cards (same cards as the landing) ──────────────────────────── */
.yfa-next__grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.yfa-next .yfn-material { min-height: 232px; }

/* The shell rule `main a:not(.yf26-button) { color: inherit }` would otherwise flatten the landing buttons. */
.yf-public-page main a.yfn-cta--primary, .yf-public-page main a.yfn-cta--primary:hover { color: #06231a; }
.yf-public-page main a.yfn-cta--glass { color: rgba(245, 251, 248, .9); }
.yf-public-page main a.yfn-cta--glass:hover { color: #fff; }
.yf-public-page main a.yfn-cta--line, .yf-public-page main a.yfn-cta--line:hover { color: var(--yfa-ink); }

/* ── Catalog ──────────────────────────────────────────────────────────────── */
.yfa-catalog { background: var(--yf26-paper); }
.yfa-catalog__controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 32px 40px; margin-bottom: 40px; }
.yfa-catalog__controls h2 { margin-bottom: 0; }
.yfa-filters { display: inline-flex; flex-wrap: wrap; gap: 6px; padding: 6px; border: 1px solid var(--yfa-line); border-radius: 999px; background: #fff; }
.yfa-filters button { padding: 10px 18px; border: 0; border-radius: 999px; color: var(--yfa-muted); background: transparent; font-size: 13.5px; font-weight: 700; cursor: pointer; transition: color .2s ease, background-color .2s ease; }
.yfa-filters button:hover { color: var(--yfa-ink); }
.yfa-filters button.is-active { color: #fff; background: var(--yf26-forest); }
.yfa-catalog__grid [hidden] { display: none; }

@media (max-width: 1000px) {
    .yfa-reading { grid-template-columns: 1fr; gap: 32px; }
    .yfa-toc { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; padding: 16px 18px; border: 1px solid var(--yfa-line); border-radius: 18px; background: #f6faf8; }
    .yfa-toc strong { grid-column: 1 / -1; padding: 0 0 8px; }
    .yfa-toc a, .yfa-toc a.is-current { padding: 7px 0; }
    .yfa-toc a::before { display: none; }
    .yfa-example__grid, .yfa-method__grid, .yfa-faq__layout, .yfa-tool .yf-guide-tool { grid-template-columns: 1fr; }
    .yfa-catalog__controls { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
    .yfa-steps__list { grid-template-columns: 1fr; }
    .yfa-step:not(:last-child)::after { display: none; }
    .yfa-mistakes__grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .yfa-points { grid-template-columns: 1fr; }
    .yfa-next__grid--4 { grid-template-columns: 1fr; }
    .yfa-toc { display: none; }
    .yfa-block { margin-top: 52px; }
    .yfa-ledger__row { padding: 14px 18px 16px; }
    .yfa-ledger > header { padding: 16px 18px; flex-wrap: wrap; }
    .yfa-ledger > header em { margin-left: 0; }
    .yfa-formula { padding: 20px; }
    .yfa-formula__eq { padding: 14px; gap: 8px; }
    .yfa-term { padding: 9px 12px; font-size: 14px; }
    .yfa-tool .yf-guide-tool__workspace { padding: 20px; border-radius: 22px; }
    .yfa-faq summary { grid-template-columns: 26px minmax(0, 1fr) 30px; gap: 10px; padding: 17px 16px; font-size: 15.5px; }
    .yfa-faq details[open] > div > p { padding: 0 18px 18px; }
    .yfa-filters { width: 100%; border-radius: 22px; }
    .yfa-filters button { flex: 1 1 auto; padding: 10px 12px; }
    .yfa-aurora i:nth-child(1) { width: 320px; height: 320px; }
}
@media (prefers-reduced-motion: reduce) {
    .yfa-aurora i { animation: none; }
    .yfa-ledger__bar::after { transition: none; }
}

/* ── Narrow screens: nothing may push the page wider than the phone ───────── */
.yf-guide-hero__grid > * { min-width: 0; }
@media (max-width: 1000px) { .yf-guide-hero__grid { grid-template-columns: minmax(0, 1fr); } }
.yfw-tabs { overflow-x: auto; scrollbar-width: none; }
.yfw-tabs::-webkit-scrollbar { display: none; }
@media (max-width: 420px) { .yfw-tabs span { padding: 6px 9px; font-size: 11.5px; } }

/* ── Widget polish: the month chart keeps its numbers outside the plot so labels never sit on the lines ───── */
.yfw-chart__plot { height: 190px; }
.yfw-chart__axis span { display: grid; gap: 2px; justify-items: center; font-size: 12px; }
.yfw-chart__axis span b { color: var(--yfa-ink); font-size: 12.5px; font-weight: 750; white-space: nowrap; }
.yfw-chart__legend { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 14px 0 0; padding: 12px 0 0; border-top: 1px dashed var(--yfa-line); list-style: none; }
.yfw-chart__legend li { display: inline-flex; align-items: center; gap: 8px; color: #53655f; font-size: 12.5px; }
.yfw-chart__legend li i { width: 22px; height: 0; border-top: 2px dashed #d7a02b; }
.yfw-chart__legend li.is-base i { border-top-color: #087352; }
.yfw-chart__legend li b { color: var(--yfa-ink); font-weight: 750; white-space: nowrap; }
.yfw-donut__center strong { font-size: 19px; }
.yfw-donut__center small { max-width: 74px; font-size: 9.5px; }
.yfa-next .yf26-eyebrow { color: #8b742d; }
.yfa-next .yf26-eyebrow > span { background: #8b742d; }

/* ── Calculator console: inputs with sliders on the left, a dark verdict panel on the right ───────────────── */
.yfa-tool .yf-guide-tool { grid-template-columns: minmax(0, 1fr); gap: 34px; align-items: start; }
.yfa-tool .yf-guide-tool__copy { max-width: 760px; }
.yfa-console { display: grid; grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); overflow: hidden; border: 1px solid rgba(16, 34, 30, .1); border-radius: 30px; background: #fff; box-shadow: 0 60px 100px -60px rgba(5, 25, 20, .6); }
.yfa-console__inputs { display: grid; align-content: start; gap: 24px; padding: 30px; background: linear-gradient(180deg, #fff, #f4f9f6); }
.yfa-console__title { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--yfa-ink); font: 700 12px/1.3 "IBM Plex Mono", monospace; text-transform: uppercase; }
.yfa-console__title i { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 10px; color: #0f7a58; background: #d9f2e7; font-size: 17px; }
.yfa-field { display: grid; gap: 12px; margin: 0; }
.yfa-field__top { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.yfa-field__top > span:first-child { color: #3f524b; font-size: 14px; font-weight: 650; line-height: 1.35; }
.yfa-field__box { display: inline-flex; align-items: center; flex: none; gap: 6px; width: 156px; min-height: 44px; padding: 0 12px 0 14px; border: 1px solid var(--yfa-line); border-radius: 12px; background: #fff; transition: border-color .2s ease, box-shadow .2s ease; }
.yfa-field__box:focus-within { border-color: var(--yfa-mint-deep); box-shadow: 0 0 0 4px rgba(101, 217, 174, .22); }
.yfa-field__box input { width: 100%; min-width: 0; padding: 0; border: 0; outline: 0; color: var(--yfa-ink); background: transparent; font: 750 16px/1 "Manrope", Arial, sans-serif; text-align: right; -moz-appearance: textfield; }
.yfa-field__box input::-webkit-outer-spin-button, .yfa-field__box input::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; }
.yfa-field__box small { color: #7b8984; font-size: 13px; white-space: nowrap; }
.yfa-range { --p: 30%; width: 100%; height: 22px; margin: 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; }
.yfa-range::-webkit-slider-runnable-track { height: 6px; border-radius: 99px; background: linear-gradient(90deg, #2bb88c var(--p), #dce7e2 var(--p)); }
.yfa-range::-moz-range-track { height: 6px; border-radius: 99px; background: #dce7e2; }
.yfa-range::-moz-range-progress { height: 6px; border-radius: 99px; background: #2bb88c; }
.yfa-range::-webkit-slider-thumb { width: 20px; height: 20px; margin-top: -7px; border: 3px solid #fff; border-radius: 50%; background: #178a66; box-shadow: 0 4px 10px rgba(5, 25, 20, .35); -webkit-appearance: none; transition: transform .2s ease; }
.yfa-range::-moz-range-thumb { width: 14px; height: 14px; border: 3px solid #fff; border-radius: 50%; background: #178a66; box-shadow: 0 4px 10px rgba(5, 25, 20, .35); }
.yfa-range:hover::-webkit-slider-thumb { transform: scale(1.15); }

.yfa-console__result { position: relative; display: grid; align-content: start; gap: 14px; padding: 30px; color: #f5fbf8; background: radial-gradient(420px 260px at 100% 0, rgba(101, 217, 174, .2), transparent 70%), linear-gradient(160deg, #0f3a2f, #0a211b 75%); }
.yfa-result__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.yfa-result__label { color: rgba(231, 243, 237, .7); font-size: 13.5px; font-weight: 650; }
.yfa-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; color: var(--yf26-mint); background: rgba(101, 217, 174, .14); font-size: 12px; font-weight: 700; }
.yfa-pill:empty { display: none; }
.yfa-pill.is-warn { color: var(--yf26-gold); background: rgba(232, 200, 105, .16); }
.yfa-pill.is-risk { color: #ff9aa1; background: rgba(255, 124, 132, .16); }
.yfa-result__value { color: #fff; font-size: clamp(40px, 5vw, 60px); font-weight: 800; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.yfa-result__value.is-negative { color: #ff9aa1; }
.yfa-result__text { max-width: 54ch; margin: 0; color: rgba(231, 243, 237, .78); font-size: 14.5px; line-height: 1.6; }
.yfa-console__result .yft-viz { min-height: 96px; margin-top: 6px; padding: 16px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 18px; background: rgba(255, 255, 255, .04); }
.yfa-console__result .yft-stack, .yfa-console__result .yft-meter { background: rgba(255, 255, 255, .1); }
.yfa-console__result .yft-stack { height: 18px; }
.yfa-console__result .yft-legend, .yfa-console__result .yft-caption, .yfa-console__result .yft-hint { color: rgba(231, 243, 237, .72); }
.yfa-console__result .yft-legend b, .yfa-console__result .yft-caption b { color: #fff; }
.yfa-console__result .yft-scale, .yfa-console__result .yft-axis { color: rgba(231, 243, 237, .55); }
.yfa-console__result .yft-bars { border-bottom-color: rgba(255, 255, 255, .16); }
.yfa-console__result .yft-meter__tick { background: rgba(255, 255, 255, .45); }
.yfa-console__result .yft-bars .yft-line { border-top-color: var(--yf26-mint); }
.yfa-console__result .yft-bars .yft-line.is-median { border-top-color: var(--yf26-gold); }
.yfa-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; }
.yfa-metrics:empty { display: none; }
.yfa-metrics > div { display: grid; gap: 4px; padding: 12px 14px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 14px; background: rgba(255, 255, 255, .05); }
.yfa-metrics dt { color: rgba(231, 243, 237, .62); font-size: 11.5px; font-weight: 600; line-height: 1.3; }
.yfa-metrics dd { margin: 0; color: #fff; font-size: 15px; font-weight: 750; white-space: nowrap; }
.yfa-console__cta { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 30px; color: #06231a; background: linear-gradient(180deg, #7ce6bf, #65d9ae); font-size: 15px; font-weight: 750; transition: filter .25s ease; }
.yfa-console__cta i { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 11px; background: rgba(6, 35, 26, .12); transition: transform .25s var(--yfa-ease); }
.yfa-console__cta:hover { filter: brightness(1.04); }
.yfa-console__cta:hover i { transform: translateX(4px); }
.yf-public-page main a.yfa-console__cta, .yf-public-page main a.yfa-console__cta:hover { color: #06231a; }

/* Telegram variant: pick a message, see what lands in the cabinet */
.yfa-chat__hint { margin: 0; color: var(--yfa-muted); font-size: 14px; line-height: 1.55; }
.yfa-chat__picks { display: grid; gap: 10px; }
.yfa-chat__picks button { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid rgba(43, 150, 114, .25); border-radius: 16px 16px 16px 6px; color: #0b3d2f; background: #e7f6ef; font: 650 15px/1.3 "Manrope", Arial, sans-serif; text-align: left; cursor: pointer; transition: transform .25s var(--yfa-ease), background-color .2s ease, border-color .2s ease; }
.yfa-chat__picks button i { color: #2a9fe0; font-size: 19px; }
.yfa-chat__picks button:hover { transform: translateX(4px); border-color: rgba(43, 150, 114, .5); }
.yfa-chat__picks button.is-sent { color: #06231a; border-color: transparent; background: linear-gradient(180deg, #7ce6bf, #65d9ae); }
.yfa-chat__picks button:focus-visible { outline: 3px solid rgba(43, 150, 114, .3); outline-offset: 2px; }
.yfa-flow__idle { display: grid; justify-items: start; gap: 8px; padding: 22px; border: 1px dashed rgba(255, 255, 255, .2); border-radius: 18px; }
.yfa-flow__idle[hidden], .yfa-flow__done[hidden] { display: none; }
.yfa-flow__idle i { color: var(--yf26-mint); font-size: 28px; }
.yfa-flow__idle strong { color: #fff; font-size: 18px; }
.yfa-flow__idle p { margin: 0; color: rgba(231, 243, 237, .7); font-size: 14px; line-height: 1.55; }
.yfa-flow__done { display: grid; gap: 14px; animation: yfa-pop .45s var(--yfa-ease); }
@keyframes yfa-pop { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.yfa-flow__done .yfa-pill { justify-self: start; }
.yfa-flow__done p { margin: 0; color: rgba(231, 243, 237, .78); font-size: 14.5px; line-height: 1.55; }
.yfa-flow__month { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 16px 18px; border-radius: 16px; background: rgba(255, 255, 255, .06); }
.yfa-flow__month span { color: rgba(231, 243, 237, .75); font-size: 14px; }
.yfa-flow__month strong { font-size: 26px; font-weight: 800; }
.yfa-flow__month.is-out strong { color: #ff9aa1; }
.yfa-flow__month.is-in strong { color: var(--yf26-mint); }

@media (max-width: 900px) {
    .yfa-console { grid-template-columns: 1fr; }
    .yfa-console__inputs, .yfa-console__result { padding: 24px 20px; }
    .yfa-console__cta { padding: 16px 20px; }
}
@media (max-width: 520px) {
    .yfa-field__top { flex-direction: column; align-items: stretch; gap: 8px; }
    .yfa-field__box { width: 100%; }
    .yfa-metrics { grid-template-columns: 1fr; }
    .yfa-metrics > div { grid-template-columns: 1fr auto; align-items: center; }
}