@import '_content/Lx.Razor.CommonComponents/Lx.Razor.CommonComponents.ig4rdhchjm.bundle.scp.css';

/* /Pages/FoodScanner/Kcaly.razor.rz.scp.css */
.kcaly-page[b-e5f8ww2y6r] {
    --ink: #172820;
    --muted: #62746c;
    --green: #158a68;
    --deep: #0d5b47;
    --mint: #e6f4ee;
    --cream: #f8faf7;
    color: var(--ink);
    background: #fff;
    min-height: 100vh;
    overflow: clip;
    font-family: Inter, "Segoe UI", Arial, sans-serif;
    line-height: 1.55;
}

.kcaly-page *[b-e5f8ww2y6r], .kcaly-page *[b-e5f8ww2y6r]::before, .kcaly-page *[b-e5f8ww2y6r]::after { box-sizing: border-box; }
.kcaly-page a[b-e5f8ww2y6r] { color: inherit; text-decoration: none; }
.kcaly-page a:focus-visible[b-e5f8ww2y6r] { outline: 3px solid #f4ba47; outline-offset: 4px; }
.section-shell[b-e5f8ww2y6r] { width: min(1160px, calc(100% - 48px)); margin-inline: auto; }

.site-header[b-e5f8ww2y6r] { position: relative; z-index: 5; background: #fff; border-bottom: 1px solid #eaf0eb; }
.nav-shell[b-e5f8ww2y6r] { width: min(1216px, calc(100% - 48px)); height: 84px; margin: auto; display: flex; align-items: center; gap: 40px; }
.brand[b-e5f8ww2y6r] { display: inline-flex; align-items: center; gap: 9px; font-size: 1.45rem; font-weight: 800; letter-spacing: -.055em; white-space: nowrap; }
.brand img[b-e5f8ww2y6r] { object-fit: contain; }
.brand-dot[b-e5f8ww2y6r], .footer-brand span[b-e5f8ww2y6r] { color: #f6b943; }
.nav-links[b-e5f8ww2y6r] { margin-left: auto; display: flex; gap: 30px; color: #435a4f; font-size: .91rem; font-weight: 600; }
.nav-links a:hover[b-e5f8ww2y6r], .inline-link:hover[b-e5f8ww2y6r], .site-footer a:hover[b-e5f8ww2y6r] { color: var(--green); }
.nav-cta[b-e5f8ww2y6r] { border: 1px solid #cce5d7; border-radius: 999px; padding: 10px 18px; color: var(--deep) !important; background: #f5fbf7; font-size: .9rem; font-weight: 750; white-space: nowrap; transition: background .2s, transform .2s; }
.nav-cta:hover[b-e5f8ww2y6r] { background: #e9f6ed; transform: translateY(-2px); }
.nav-cta span[b-e5f8ww2y6r] { margin-left: 6px; }

.hero[b-e5f8ww2y6r] { min-height: 640px; display: grid; grid-template-columns: 1.02fr .98fr; align-items: center; gap: 40px; padding-block: 78px 100px; }
.hero-copy[b-e5f8ww2y6r] { max-width: 590px; position: relative; z-index: 2; }
.eyebrow[b-e5f8ww2y6r] { display: inline-flex; align-items: center; gap: 9px; color: var(--green); font-size: .76rem; font-weight: 850; letter-spacing: .17em; line-height: 1.4; }
.eyebrow-mark[b-e5f8ww2y6r] { width: 8px; height: 8px; border-radius: 50%; background: #edbd4b; box-shadow: 0 0 0 5px #fff3d5; }
.kcaly-page h1[b-e5f8ww2y6r], .kcaly-page h2[b-e5f8ww2y6r], .kcaly-page h3[b-e5f8ww2y6r], .kcaly-page p[b-e5f8ww2y6r] { margin-top: 0; }
.kcaly-page h1[b-e5f8ww2y6r], .kcaly-page h2[b-e5f8ww2y6r] { letter-spacing: -.055em; line-height: 1.08; font-weight: 800; }
.hero h1[b-e5f8ww2y6r] { font-size: clamp(3.45rem, 5.2vw, 5.3rem); margin: 27px 0 23px; }
.hero h1 em[b-e5f8ww2y6r], .learning-copy h2 em[b-e5f8ww2y6r] { color: var(--green); font-style: normal; }
.hero-lead[b-e5f8ww2y6r] { color: #53665a; font-size: clamp(1.1rem, 1.6vw, 1.25rem); line-height: 1.75; max-width: 560px; }
.hero-actions[b-e5f8ww2y6r] { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin: 29px 0 20px; }
.button[b-e5f8ww2y6r] { min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 14px; padding: 12px 22px; border-radius: 12px; font-size: .96rem; font-weight: 750; transition: transform .2s, box-shadow .2s, background .2s; }
.button:hover[b-e5f8ww2y6r] { transform: translateY(-2px); }
.button-primary[b-e5f8ww2y6r] { background: var(--green); color: #fff !important; box-shadow: 0 10px 24px #168a6830; }
.button-primary:hover[b-e5f8ww2y6r] { background: #0d7054; box-shadow: 0 13px 28px #168a6840; }
.button-text[b-e5f8ww2y6r] { color: var(--deep) !important; padding-inline: 8px; }
.button-text:hover[b-e5f8ww2y6r] { background: #ebf5ef; }
.hero-note[b-e5f8ww2y6r] { display: flex; align-items: center; gap: 8px; color: #687970; font-size: .88rem; }
.hero-note span[b-e5f8ww2y6r] { color: #e2a21f; }

.hero-visual[b-e5f8ww2y6r] { position: relative; height: 630px; display: flex; align-items: center; justify-content: center; isolation: isolate; }
.hero-orbit[b-e5f8ww2y6r] { position: absolute; border-radius: 50%; z-index: -1; }
.orbit-one[b-e5f8ww2y6r] { width: 535px; height: 535px; background: radial-gradient(circle at 34% 35%, #f6fbf3, #e4f3e9 72%, #d6ecdf); }
.orbit-two[b-e5f8ww2y6r] { width: 610px; height: 610px; border: 1px solid #e7f1e9; }
.phone[b-e5f8ww2y6r] { position: relative; width: 292px; height: 570px; padding: 8px; border: 5px solid #27342d; border-radius: 42px; background: #27342d; box-shadow: 0 35px 65px #1d563622, 0 8px 18px #1d563624; transform: rotate(5deg); }
.phone-camera[b-e5f8ww2y6r] { position: absolute; width: 72px; height: 14px; top: 11px; left: calc(50% - 36px); z-index: 3; background: #27342d; border-radius: 0 0 11px 11px; }
.phone-screen[b-e5f8ww2y6r] { width: 100%; height: 100%; border-radius: 31px; overflow: hidden; background: #f5f7f5; }
.phone-topline[b-e5f8ww2y6r] { height: 70px; padding: 23px 15px 12px; display: flex; align-items: center; justify-content: space-between; background: #fff; font-size: 1rem; }
.phone-topline strong[b-e5f8ww2y6r] { font-weight: 800; }
.credit-pill[b-e5f8ww2y6r] { background: #e4f4ec; color: #0a7559; padding: 4px 8px; border-radius: 40px; font-size: .69rem; font-weight: 800; }
.phone-settings[b-e5f8ww2y6r] { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: #728278; background: #f2f5f3; }
.phone-card[b-e5f8ww2y6r] { margin: 14px 11px 0; padding: 20px 10px 16px; border-radius: 21px; background: #fff; box-shadow: 0 8px 20px #233c2b14; }
.phone-summary[b-e5f8ww2y6r] { display: grid; grid-template-columns: 48px 1fr 48px; align-items: center; gap: 5px; }
.phone-cat[b-e5f8ww2y6r], .phone-budget[b-e5f8ww2y6r] { display: flex; flex-direction: column; align-items: center; line-height: 1.2; }
.phone-cat img[b-e5f8ww2y6r] { width: 51px; height: 51px; object-fit: contain; }
.phone-summary strong[b-e5f8ww2y6r] { font-size: 1.05rem; }
.phone-summary small[b-e5f8ww2y6r] { color: #66776c; font-size: .53rem; font-weight: 600; }
.phone-budget[b-e5f8ww2y6r] { gap: 3px; }
.phone-budget strong[b-e5f8ww2y6r] { font-size: .85rem; }
.phone-budget strong:nth-of-type(2)[b-e5f8ww2y6r] { margin-top: 11px; }
.calorie-ring[b-e5f8ww2y6r] { width: 112px; height: 112px; padding: 10px; border-radius: 50%; background: conic-gradient(#2da25d 0 49%, #edf0ec 49% 100%); }
.calorie-ring > div[b-e5f8ww2y6r] { width: 100%; height: 100%; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-direction: column; background: #fff; }
.calorie-ring strong[b-e5f8ww2y6r] { font-size: 1.35rem; line-height: 1.15; }
.calorie-ring small[b-e5f8ww2y6r] { font-size: .68rem; }
.phone-macro-title[b-e5f8ww2y6r] { margin: 22px 0 10px; color: #657469; font-size: .67rem; font-weight: 800; }
.phone-macros[b-e5f8ww2y6r] { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; text-align: center; }
.phone-macros > div[b-e5f8ww2y6r] { min-width: 0; }
.macro-ring[b-e5f8ww2y6r] { width: 47px; height: 47px; margin: auto; border: 5px solid transparent; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(#fff, #fff) padding-box, conic-gradient(var(--ring-color) var(--ring-fill), #eef1ef 0) border-box; font-weight: 750; font-size: .65rem; }
.macro-fat[b-e5f8ww2y6r] { --ring-color: #f5c34d; --ring-fill: 100%; }
.macro-protein[b-e5f8ww2y6r] { --ring-color: #ff994e; --ring-fill: 55%; }
.macro-carbs[b-e5f8ww2y6r] { --ring-color: #4d8cf2; --ring-fill: 67%; }
.macro-fiber[b-e5f8ww2y6r] { --ring-color: #65be97; --ring-fill: 45%; }
.phone-macros small[b-e5f8ww2y6r] { display: block; margin-top: 4px; color: #6d7970; font-size: .49rem; white-space: nowrap; }
.phone-actions[b-e5f8ww2y6r] { margin: 34px 16px 22px; display: flex; align-items: end; justify-content: space-around; text-align: center; }
.phone-actions > span[b-e5f8ww2y6r] { width: 47px; height: 47px; padding-top: 5px; border-radius: 50%; background: #e4f3e8; color: #1f8b6a; font-size: 1.5rem; line-height: 1; }
.phone-actions .camera-action[b-e5f8ww2y6r] { width: 76px; height: 76px; padding-top: 18px; background: linear-gradient(135deg, #078667, #55c99f); color: #fff; box-shadow: 0 10px 18px #18886525; }
.phone-actions small[b-e5f8ww2y6r] { display: block; margin-top: 9px; font-size: .54rem; color: #617168; }
.phone-actions .camera-action small[b-e5f8ww2y6r] { margin-top: 16px; }
.phone-entry[b-e5f8ww2y6r] { margin: 20px 12px; display: flex; align-items: center; gap: 10px; padding: 12px; background: #fff; border-radius: 15px; }
.entry-thumb[b-e5f8ww2y6r] { width: 38px; height: 38px; border-radius: 10px; background: radial-gradient(circle at 60% 45%, #f7c86d 0 25%, #95bc70 26% 50%, #ead8ae 51%); }
.phone-entry strong[b-e5f8ww2y6r], .phone-entry small[b-e5f8ww2y6r] { display: block; }
.phone-entry strong[b-e5f8ww2y6r] { font-size: .68rem; }
.phone-entry small[b-e5f8ww2y6r] { color: #7c897f; font-size: .55rem; }
.floating-note[b-e5f8ww2y6r] { position: absolute; display: flex; align-items: center; gap: 10px; padding: 11px 15px; background: #fff; border: 1px solid #eff2ed; border-radius: 14px; box-shadow: 0 14px 35px #1953331d; line-height: 1.25; font-size: .74rem; color: #567065; }
.floating-note strong[b-e5f8ww2y6r] { color: var(--ink); font-size: .77rem; }
.floating-note-top[b-e5f8ww2y6r] { top: 18px; right: -5px; z-index: 3; transform: rotate(5deg); }
.floating-note-bottom[b-e5f8ww2y6r] { bottom: 72px; left: -9px; transform: rotate(-5deg); }
.note-icon[b-e5f8ww2y6r] { width: 31px; height: 31px; border-radius: 50%; display: grid; place-items: center; background: #e0f4e7; color: #168b58; font-weight: 800; }
.sparkle[b-e5f8ww2y6r] { font-size: 1.7rem; color: #f4bf4a; }
.visual-caption[b-e5f8ww2y6r] { position: absolute; bottom: 5px; color: #8b9a90; font-size: .69rem; }

.trust-strip[b-e5f8ww2y6r] { border-block: 1px solid #ebf0e9; background: #f9fbf8; }
.trust-grid[b-e5f8ww2y6r] { display: grid; grid-template-columns: repeat(3, 1fr); }
.trust-grid > div[b-e5f8ww2y6r] { min-height: 100px; display: flex; align-items: center; gap: 16px; padding: 18px 34px; }
.trust-grid > div + div[b-e5f8ww2y6r] { border-left: 1px solid #e1e9df; }
.trust-icon[b-e5f8ww2y6r] { flex: 0 0 auto; width: 39px; height: 39px; display: grid; place-items: center; border-radius: 12px; background: #e4f4e9; color: var(--deep); font-size: .78rem; font-weight: 850; }
.trust-grid strong[b-e5f8ww2y6r], .trust-grid small[b-e5f8ww2y6r] { display: block; }
.trust-grid strong[b-e5f8ww2y6r] { font-size: .91rem; }
.trust-grid small[b-e5f8ww2y6r] { color: #687a6e; font-size: .78rem; }

.content-section[b-e5f8ww2y6r] { padding-block: 113px 120px; scroll-margin-top: 32px; }
.section-heading[b-e5f8ww2y6r] { max-width: 740px; margin-bottom: 48px; }
.centered[b-e5f8ww2y6r] { margin-inline: auto; text-align: center; }
.section-heading h2[b-e5f8ww2y6r], .learning-copy h2[b-e5f8ww2y6r], .future-grid h2[b-e5f8ww2y6r] { margin: 16px 0; font-size: clamp(2.35rem, 4vw, 3.75rem); }
.section-heading p[b-e5f8ww2y6r], .learning-copy p[b-e5f8ww2y6r], .future-grid p[b-e5f8ww2y6r] { color: var(--muted); font-size: 1.07rem; line-height: 1.7; }
.steps-grid[b-e5f8ww2y6r] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.step-card[b-e5f8ww2y6r] { min-height: 390px; padding: 29px 30px 34px; border: 1px solid #e5ece5; border-radius: 24px; background: #fff; box-shadow: 0 13px 35px #23462c0b; }
.step-number[b-e5f8ww2y6r] { color: var(--green); font-size: .8rem; font-weight: 850; letter-spacing: .1em; }
.step-card h3[b-e5f8ww2y6r] { margin: 16px 0 8px; font-size: 1.25rem; font-weight: 800; letter-spacing: -.025em; }
.step-card p[b-e5f8ww2y6r] { color: #637369; font-size: .95rem; line-height: 1.65; margin-bottom: 0; }
.step-art[b-e5f8ww2y6r] { height: 167px; margin-top: 21px; border-radius: 18px; position: relative; overflow: hidden; background: #edf7ef; }
.step-art-photo[b-e5f8ww2y6r] { display: grid; place-items: center; background: #eef7e9; }
.photo-plate[b-e5f8ww2y6r] { width: 107px; height: 107px; display: grid; place-items: center; border: 10px solid #fff; border-radius: 50%; background: #abc977; box-shadow: 0 8px 20px #25624225; transform: rotate(-15deg); }
.photo-plate span[b-e5f8ww2y6r] { position: absolute; border-radius: 50%; }
.photo-plate span:nth-child(1)[b-e5f8ww2y6r] { width: 54px; height: 36px; background: #f5cf77; transform: rotate(-20deg); }
.photo-plate span:nth-child(2)[b-e5f8ww2y6r] { width: 23px; height: 23px; background: #f17352; transform: translate(24px, -20px); }
.photo-plate span:nth-child(3)[b-e5f8ww2y6r] { width: 22px; height: 22px; background: #f17352; transform: translate(-27px, 16px); }
.photo-corner[b-e5f8ww2y6r] { position: absolute; width: 25px; height: 25px; border: 3px solid #59b88d; }
.corner-a[b-e5f8ww2y6r] { top: 21px; left: 26px; border-right: 0; border-bottom: 0; }
.corner-b[b-e5f8ww2y6r] { right: 26px; bottom: 21px; border-left: 0; border-top: 0; }
.step-art-review[b-e5f8ww2y6r] { padding: 36px 27px; background: #f5f7f4; }
.review-line[b-e5f8ww2y6r] { display: flex; align-items: center; justify-content: space-between; color: #53655a; font-size: .85rem; }
.review-line strong[b-e5f8ww2y6r] { color: var(--deep); }
.review-bar[b-e5f8ww2y6r] { height: 9px; margin: 12px 0 23px; border-radius: 8px; background: #dfebe0; }
.review-bar span[b-e5f8ww2y6r] { display: block; width: 62%; height: 100%; border-radius: inherit; background: #4aaf72; }
.review-edit[b-e5f8ww2y6r] { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #d8eee0; color: var(--deep); }
.step-art-progress[b-e5f8ww2y6r] { display: flex; align-items: center; justify-content: center; gap: 22px; }
.mini-ring[b-e5f8ww2y6r] { width: 100px; height: 100px; border: 13px solid #4aaf72; border-left-color: #d5e6d7; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #13875e; font-size: 1.6rem; }
.progress-lines i[b-e5f8ww2y6r] { display: block; width: 70px; height: 10px; margin: 12px 0; border-radius: 10px; background: #cee8d4; }
.progress-lines i:nth-child(2)[b-e5f8ww2y6r] { width: 54px; background: #f1c853; }
.progress-lines i:nth-child(3)[b-e5f8ww2y6r] { width: 63px; background: #9ed7b8; }

.learning-section[b-e5f8ww2y6r] { padding-block: 98px 105px; background: #f1f7f2; scroll-margin-top: 0; }
.learning-grid[b-e5f8ww2y6r] { display: grid; grid-template-columns: 1fr .92fr; align-items: center; gap: 110px; }
.learning-copy[b-e5f8ww2y6r] { max-width: 550px; }
.learning-copy h2[b-e5f8ww2y6r] { margin-top: 20px; }
.learning-copy p[b-e5f8ww2y6r] { margin-bottom: 18px; }
.inline-link[b-e5f8ww2y6r] { display: inline-flex; gap: 12px; margin-top: 8px; color: var(--deep) !important; font-size: .95rem; font-weight: 800; border-bottom: 1px solid #68b596; padding-bottom: 3px; }
.learning-graphic[b-e5f8ww2y6r] { position: relative; max-width: 450px; padding: 10px 0 25px; }
.learning-card[b-e5f8ww2y6r] { position: relative; z-index: 2; width: 85%; padding: 18px 22px; border: 1px solid #deebe0; border-radius: 17px; background: #fff; box-shadow: 0 10px 28px #23613a12; }
.learning-card:nth-of-type(3)[b-e5f8ww2y6r] { margin-left: 20px; }
.learning-card-confirm[b-e5f8ww2y6r] { margin-left: 40px; border-color: #afddbd; }
.learning-label[b-e5f8ww2y6r] { color: #6a8374; font-size: .67rem; font-weight: 850; letter-spacing: .12em; }
.learning-row[b-e5f8ww2y6r] { display: flex; align-items: center; gap: 11px; margin: 8px 0 2px; font-size: .95rem; font-weight: 760; }
.learning-bullet[b-e5f8ww2y6r] { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; }
.bullet-neutral[b-e5f8ww2y6r] { background: #dfece1; }
.bullet-orange[b-e5f8ww2y6r] { background: #fff0dc; color: #d68125; }
.bullet-green[b-e5f8ww2y6r] { background: #dcf3e3; color: #188c57; }
.learning-card small[b-e5f8ww2y6r] { color: #79887d; font-size: .79rem; margin-left: 37px; }
.learning-connector[b-e5f8ww2y6r] { height: 39px; padding-left: 50%; color: #75aa8d; font-size: 1.5rem; }
.learning-mascot[b-e5f8ww2y6r] { position: absolute; right: -42px; bottom: -14px; z-index: 3; width: 128px; height: 128px; object-fit: contain; border: 5px solid #fff; border-radius: 50%; background: #fff; box-shadow: 0 14px 35px #23583720; }

.pricing-section[b-e5f8ww2y6r] { padding-block: 115px 103px; }
.pricing-grid[b-e5f8ww2y6r] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.price-card[b-e5f8ww2y6r] { min-height: 290px; display: flex; flex-direction: column; align-items: flex-start; padding: 32px 29px; border: 1px solid #e1e9e2; border-radius: 22px; background: #fff; box-shadow: 0 10px 30px #23462c09; }
.free-card[b-e5f8ww2y6r] { background: #e9f7ee; border-color: #d2ead9; }
.price-tag[b-e5f8ww2y6r] { color: var(--green); font-size: .7rem; font-weight: 850; letter-spacing: .12em; }
.price-value[b-e5f8ww2y6r] { margin: 18px 0 6px; font-size: clamp(2.2rem, 3vw, 3rem); line-height: 1.15; letter-spacing: -.06em; }
.price-value small[b-e5f8ww2y6r] { font-size: 1.1rem; letter-spacing: 0; }
.price-card h3[b-e5f8ww2y6r] { margin: 0 0 8px; font-size: 1.12rem; font-weight: 800; }
.price-card p[b-e5f8ww2y6r] { color: #627468; font-size: .91rem; line-height: 1.65; margin: 0; }
.pricing-footnote[b-e5f8ww2y6r] { max-width: 820px; margin: 25px auto 0; color: #748278; font-size: .79rem; text-align: center; line-height: 1.6; }

.future-section[b-e5f8ww2y6r] { padding-block: 95px; background: linear-gradient(125deg, #0c5945, #0d785e 68%, #168467); color: #fff; }
.future-grid[b-e5f8ww2y6r] { display: grid; grid-template-columns: 1fr .8fr; gap: 50px; align-items: center; }
.future-grid > div:first-child[b-e5f8ww2y6r] { max-width: 640px; }
.future-grid .eyebrow[b-e5f8ww2y6r] { color: #b6e4ce; }
.future-grid h2[b-e5f8ww2y6r] { margin-block: 19px; }
.future-grid p[b-e5f8ww2y6r] { max-width: 590px; color: #d8eee1; margin-bottom: 25px; }
.button-light[b-e5f8ww2y6r] { background: #fff; color: var(--deep) !important; }
.button-light:hover[b-e5f8ww2y6r] { box-shadow: 0 15px 30px #003c3029; }
.future-visual[b-e5f8ww2y6r] { height: 340px; position: relative; display: grid; place-items: center; }
.future-circle[b-e5f8ww2y6r] { position: absolute; border: 1px solid #ffffff30; border-radius: 50%; }
.circle-one[b-e5f8ww2y6r] { width: 290px; height: 290px; }
.circle-two[b-e5f8ww2y6r] { width: 345px; height: 345px; }
.future-card[b-e5f8ww2y6r] { position: absolute; width: 265px; padding: 24px 22px; border: 1px solid #ffffff55; border-radius: 21px; background: #ffffff1e; box-shadow: 0 20px 30px #01382718; backdrop-filter: blur(8px); transform: rotate(-7deg) translate(-36px, -13px); }
.future-card span[b-e5f8ww2y6r] { width: 39px; height: 39px; border-radius: 12px; display: grid; place-items: center; background: #e9b94d; color: #164c3c; font-size: 1.4rem; }
.future-card strong[b-e5f8ww2y6r], .future-card small[b-e5f8ww2y6r] { display: block; }
.future-card strong[b-e5f8ww2y6r] { margin-top: 17px; font-size: 1rem; }
.future-card small[b-e5f8ww2y6r] { color: #d7ebe0; font-size: .75rem; }
.future-visual img[b-e5f8ww2y6r] { position: absolute; width: 130px; height: 130px; object-fit: contain; transform: translate(118px, 75px) rotate(8deg); filter: drop-shadow(0 14px 12px #003c3030); }

.site-footer[b-e5f8ww2y6r] { background: #fff; border-top: 1px solid #e7eee7; }
.footer-inner[b-e5f8ww2y6r] { min-height: 115px; display: flex; align-items: center; gap: 27px; color: #69796e; font-size: .86rem; }
.footer-brand[b-e5f8ww2y6r] { color: var(--ink) !important; font-size: 1.4rem; font-weight: 850; letter-spacing: -.05em; }
.footer-inner p[b-e5f8ww2y6r] { margin: 0; }
.footer-inner > div[b-e5f8ww2y6r] { margin-left: auto; display: flex; gap: 23px; }

@media (max-width: 1050px) {
    .hero[b-e5f8ww2y6r] { gap: 10px; }
    .hero-visual[b-e5f8ww2y6r] { transform: scale(.87); margin-inline: -30px; }
    .learning-grid[b-e5f8ww2y6r] { gap: 52px; }
    .floating-note-top[b-e5f8ww2y6r] { right: 8px; }
}

@media (max-width: 760px) {
    .section-shell[b-e5f8ww2y6r], .nav-shell[b-e5f8ww2y6r] { width: min(100% - 36px, 560px); }
    .nav-shell[b-e5f8ww2y6r] { height: 70px; gap: 10px; }
    .nav-links[b-e5f8ww2y6r] { display: none; }
    .nav-cta[b-e5f8ww2y6r] { margin-left: auto; padding: 9px 12px; font-size: .78rem; }
    .hero[b-e5f8ww2y6r] { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding-block: 60px 72px; }
    .hero h1[b-e5f8ww2y6r] { font-size: clamp(2.85rem, 10vw, 4.1rem); }
    .hero-lead[b-e5f8ww2y6r] { font-size: 1.06rem; }
    .hero-visual[b-e5f8ww2y6r] { height: 600px; margin: 18px -18px -25px; transform: scale(.88); }
    .trust-grid[b-e5f8ww2y6r], .steps-grid[b-e5f8ww2y6r], .pricing-grid[b-e5f8ww2y6r], .learning-grid[b-e5f8ww2y6r], .future-grid[b-e5f8ww2y6r] { grid-template-columns: 1fr; }
    .trust-grid > div[b-e5f8ww2y6r] { min-height: 77px; padding: 14px 0; }
    .trust-grid > div + div[b-e5f8ww2y6r] { border-left: 0; border-top: 1px solid #e1e9df; }
    .content-section[b-e5f8ww2y6r] { padding-block: 82px; }
    .steps-grid[b-e5f8ww2y6r], .pricing-grid[b-e5f8ww2y6r] { gap: 14px; }
    .step-card[b-e5f8ww2y6r] { min-height: auto; padding: 23px; }
    .step-art[b-e5f8ww2y6r] { margin-top: 14px; }
    .learning-section[b-e5f8ww2y6r] { padding-block: 76px 89px; }
    .learning-grid[b-e5f8ww2y6r] { gap: 33px; }
    .learning-graphic[b-e5f8ww2y6r] { width: min(100% - 35px, 450px); }
    .learning-mascot[b-e5f8ww2y6r] { right: -40px; }
    .price-card[b-e5f8ww2y6r] { min-height: auto; }
    .future-section[b-e5f8ww2y6r] { padding-block: 72px 50px; }
    .future-visual[b-e5f8ww2y6r] { height: 280px; }
    .footer-inner[b-e5f8ww2y6r] { flex-wrap: wrap; gap: 7px 15px; padding-block: 26px; }
    .footer-inner > div[b-e5f8ww2y6r] { width: 100%; margin-left: 0; }
}

@media (max-width: 420px) {
    .section-heading h2[b-e5f8ww2y6r] { font-size: 2.1rem; }
    .hero-actions[b-e5f8ww2y6r] { align-items: stretch; flex-direction: column; }
    .hero-visual[b-e5f8ww2y6r] { transform: scale(.71); margin-block: -52px -82px; }
    .floating-note-top[b-e5f8ww2y6r] { right: -20px; }
    .floating-note-bottom[b-e5f8ww2y6r] { left: -16px; }
    .learning-card[b-e5f8ww2y6r] { width: 94%; }
    .learning-card:nth-of-type(3)[b-e5f8ww2y6r] { margin-left: 8px; }
    .learning-card-confirm[b-e5f8ww2y6r] { margin-left: 15px; }
    .learning-mascot[b-e5f8ww2y6r] { width: 93px; height: 93px; right: -27px; bottom: -40px; }
}

@media (prefers-reduced-motion: reduce) {
    .button[b-e5f8ww2y6r], .nav-cta[b-e5f8ww2y6r] { transition: none; }
}
/* /Shared/FullScreenLayout.razor.rz.scp.css */
.page[b-j1r9bm3fnv] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-j1r9bm3fnv] {
    flex: 1;
}

.sidebar[b-j1r9bm3fnv] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-j1r9bm3fnv] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    /*height: 3.5rem;*/
    padding: 6pt;
    display: flex;
    align-items: center;
}

    .top-row[b-j1r9bm3fnv]  a, .top-row .btn-link[b-j1r9bm3fnv] {
        white-space: nowrap;
        margin-left: 1.5rem;
    }

    .top-row a:first-child[b-j1r9bm3fnv] {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-j1r9bm3fnv] {
    }

    .top-row.auth[b-j1r9bm3fnv] {
        justify-content: space-between;
    }

    .top-row a[b-j1r9bm3fnv], .top-row .btn-link[b-j1r9bm3fnv] {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-j1r9bm3fnv] {
        flex-direction: row;
    }

    .sidebar[b-j1r9bm3fnv] {
        width: 250px;
        height: 100vh;
        height: 100dvh;
        overflow-y: auto;
        overscroll-behavior: contain;
        position: sticky;
        top: 0;
    }

    .top-row[b-j1r9bm3fnv] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row[b-j1r9bm3fnv], article[b-j1r9bm3fnv] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}
/* /Shared/MainLayout.razor.rz.scp.css */
.page[b-pumy60qivw] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-pumy60qivw] {
    flex: 1;
}

.sidebar[b-pumy60qivw] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-pumy60qivw] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    /*height: 3.5rem;*/
    padding: 6pt;
    display: flex;
    align-items: center;
}

    .top-row[b-pumy60qivw]  a, .top-row .btn-link[b-pumy60qivw] {
        white-space: nowrap;
        margin-left: 1.5rem;
    }

    .top-row a:first-child[b-pumy60qivw] {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-pumy60qivw] {
    }

    .top-row.auth[b-pumy60qivw] {
        justify-content: space-between;
    }

    .top-row a[b-pumy60qivw], .top-row .btn-link[b-pumy60qivw] {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-pumy60qivw] {
        flex-direction: row;
    }

    /* App shell: the document itself never scrolls; the sidebar and the main column scroll internally.
       With a scrolling document, iPadOS Safari lets the page slide under its translucent toolbar and
       offsets sticky elements below it, which showed up as a blank strip with content shimmering
       through above the login bar. dvh = the actually visible height (100vh ignores Safari's toolbar). */
    .page[b-pumy60qivw] {
        /* Pinned to the viewport instead of sized with 100vh/dvh: iPad Safari mis-measures those, which
           left the document a few pixels taller than the screen and let it bounce, exposing a white strip. */
        position: fixed;
        inset: 0;
        overflow: hidden;
    }

    .sidebar[b-pumy60qivw] {
        /* Never let a wide page squeeze the menu (flex items shrink by default). */
        flex: 0 0 250px;
        width: 250px;
        height: 100%;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    main[b-pumy60qivw] {
        min-width: 0;
        height: 100%;
        overflow: auto;
        overscroll-behavior: contain;
    }

    .top-row[b-pumy60qivw] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row[b-pumy60qivw], article[b-pumy60qivw] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}