:root {
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #101f45;
  background: #fbf9f8;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: radial-gradient(circle at 80% 4%, #f9e8ee 0, transparent 25rem), #fbf9f8; }
body:has(.version-badge:not([hidden])) { padding-top: 2.4rem; }
a { color: inherit; }
.version-badge { position: absolute; z-index: 20; right: .6rem; top: .55rem; padding: .25rem .48rem; border: 1px solid #e6dfe2; border-radius: 999px; background: #fff; color: #6d6170; font-size: .72rem; box-shadow: 0 4px 16px #34212b1c; }
.public-header, main, footer { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
.public-header { height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.public-brand { display: inline-flex; align-items: center; gap: .72rem; text-decoration: none; font-weight: 850; font-size: 1.35rem; letter-spacing: -.03em; }
.public-brand img { width: 48px; height: 48px; border-radius: 13px; box-shadow: 0 6px 20px #a33d6430; }
.public-header nav, footer nav { display: flex; align-items: center; gap: 1.8rem; }
.public-header nav > a:not(.button), footer nav a, .text-link { text-decoration: none; font-weight: 700; color: #33405f; }
.public-header nav > a:not(.button):hover, footer nav a:hover, .text-link:hover { color: #a33d64; }
.nav-menu { position: relative; }
.nav-menu > a { display: inline-flex; align-items: center; min-height: 44px; color: #33405f; text-decoration: none; font-weight: 700; }
.nav-menu > a::after { content: "⌄"; margin-left: .35rem; color: #a33d64; font-size: .82rem; }
.nav-submenu { position: absolute; z-index: 30; top: calc(100% - 2px); left: -.9rem; display: grid; min-width: 210px; padding: .55rem; border: 1px solid #e6dce1; border-radius: 14px; background: #fff; box-shadow: 0 16px 38px #38202c24; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity 120ms ease, transform 120ms ease, visibility 120ms; }
.nav-menu:hover .nav-submenu, .nav-menu:focus-within .nav-submenu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-submenu a { padding: .72rem .8rem; border-radius: 9px; color: #33405f; text-decoration: none; font-weight: 750; white-space: nowrap; }
.nav-submenu a:hover, .nav-submenu a:focus-visible { background: #f8e9ef; color: #a33d64; outline: none; }
.button { min-height: 50px; display: inline-flex; align-items: center; justify-content: center; padding: .85rem 1.4rem; border-radius: 13px; background: linear-gradient(135deg, #a33d64, #bd2e63); color: #fff; text-decoration: none; font-weight: 850; box-shadow: 0 10px 30px #a33d6433; }
.button:hover { transform: translateY(-1px); box-shadow: 0 14px 34px #a33d6444; }
.button-small { min-height: 44px; padding: .65rem 1.08rem; border-radius: 11px; }
.hero { min-height: min(650px, calc(100dvh - 82px)); display: grid; grid-template-columns: minmax(0, 1fr) minmax(380px, .82fr); gap: 3.5rem; align-items: center; padding: 2.5rem 0 3.5rem; }
.eyebrow { margin: 0 0 .9rem; color: #a33d64; font-weight: 850; font-size: .77rem; letter-spacing: .12em; text-transform: uppercase; }
h1, h2, h3, p { text-wrap: pretty; }
h1 { max-width: 710px; margin: 0; font-size: clamp(3rem, 6vw, 5.4rem); line-height: .98; letter-spacing: -.065em; }
.hero-intro { max-width: 640px; margin: 1.8rem 0 0; font-size: clamp(1.07rem, 1.7vw, 1.27rem); line-height: 1.65; color: #566078; }
.hero-actions { display: flex; align-items: center; gap: 1.4rem; margin-top: 2.1rem; }
.reassurance { margin: 1rem 0 0; color: #566078; font-size: .94rem; }
.reassurance span, .pricing-note span { color: #23895b; font-weight: 900; }
.phone-stage { display: grid; justify-items: center; align-self: end; }
.phone-stage > p { color: #6d7485; font-size: .8rem; }
.phone { width: 326px; padding: 11px; border: 2px solid #202332; border-radius: 42px; background: #12141e; box-shadow: 0 34px 80px #4e25373d, 0 7px 20px #1317252b; transform: rotate(1.2deg); }
.phone-speaker { width: 96px; height: 23px; margin: 0 auto -18px; position: relative; z-index: 2; border-radius: 0 0 18px 18px; background: #12141e; }
.phone-screen { height: min(625px, calc(100dvh - 145px)); min-height: 520px; overflow: hidden; border-radius: 31px; background: #f7f7f8; padding: 24px 12px 14px; color: #101f45; font-size: 12px; }
.demo-topbar { display: grid; grid-template-columns: 42px 1fr 34px; align-items: center; gap: 8px; padding: 7px; }
.demo-topbar img { width: 42px; height: 42px; border-radius: 12px; }
.demo-topbar strong, .demo-topbar small { display: block; }
.demo-topbar strong { font-size: 20px; letter-spacing: -.05em; }
.demo-topbar small { color: #6d7485; margin-top: 2px; }
.demo-settings { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid #e2dfe4; border-radius: 12px; background: #fff; font-size: 16px; }
.demo-tabs { display: grid; grid-template-columns: repeat(3, 1fr); margin: 8px 4px; padding: 4px; border-radius: 11px; background: #ebe9ed; text-align: center; color: #6d7485; }
.demo-tabs > * { padding: 7px 3px; border-radius: 8px; }
.demo-tabs strong { background: #fff; color: #a33d64; box-shadow: 0 2px 8px #28304913; }
.demo-week { display: grid; grid-template-columns: 27px 1fr 27px; align-items: center; gap: 5px; margin: 10px 2px; padding: 11px 9px; border: 1px solid #e8e2e5; border-radius: 15px; background: #fff; box-shadow: 0 5px 14px #30233d0c; }
.demo-week > span { font-size: 27px; text-align: center; color: #a33d64; }
.demo-week small, .demo-week strong, .demo-week em { display: block; }
.demo-week small { color: #a33d64; font-size: 8px; font-weight: 850; letter-spacing: .1em; }
.demo-week strong { margin-top: 2px; font-size: 17px; }
.demo-week em { margin-top: 3px; color: #23895b; font-size: 9px; font-style: normal; }
.demo-favorites { display: flex; gap: 6px; align-items: center; overflow: hidden; padding: 8px 2px 10px; white-space: nowrap; }
.demo-favorites strong { margin-right: 3px; font-size: 13px; }
.demo-favorites span { padding: 6px 8px; border: 1px solid #e5d9de; border-radius: 999px; background: #fff; color: #a33d64; font-weight: 700; }
.demo-store { overflow: hidden; margin: 0 2px 10px; border: 1px solid #e4e1e5; border-radius: 15px; background: #fff; box-shadow: 0 5px 15px #272d3c0d; }
.store-heading { display: grid; grid-template-columns: 35px 1fr 20px; align-items: center; gap: 8px; padding: 10px 10px 8px; border-left: 4px solid var(--store); }
.store-heading > b { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; background: color-mix(in srgb, var(--store) 13%, white); color: var(--store); }
.store-heading strong, .store-heading small { display: block; }
.store-heading strong { font-size: 13px; }
.store-heading small { margin-top: 2px; color: #747b8c; font-size: 9px; }
.store-ah { --store: #2189cf; }
.store-lidl { --store: #e5a223; }
.demo-item { display: grid; grid-template-columns: 27px 1fr 18px; align-items: center; gap: 7px; min-height: 46px; padding: 7px 10px; border-top: 1px solid #eeecef; }
.demo-item .check { width: 25px; height: 25px; display: grid; place-items: center; border: 2px solid #a33d64; border-radius: 8px; color: #fff; }
.demo-item strong, .demo-item small { display: block; }
.demo-item small { margin-top: 2px; color: #747b8c; }
.demo-item.checked { background: #f4f8f5; color: #7d8492; }
.demo-item.checked .check { border-color: #23895b; background: #23895b; }
.demo-item.checked strong { text-decoration: line-through; }
.section-heading { max-width: 720px; margin: 0 auto 2.4rem; text-align: center; }
.section-heading h2, .final-cta h2 { margin: 0; font-size: clamp(2.1rem, 4vw, 3.4rem); line-height: 1.05; letter-spacing: -.045em; }
.section-heading > p:last-child { color: #646c7f; line-height: 1.6; }
.benefits { padding: 6rem 0; }
.benefit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.benefit-grid article { padding: 2rem; border: 1px solid #e9e2e5; border-radius: 21px; background: #fff; box-shadow: 0 12px 35px #4323320b; }
.benefit-grid article > span { color: #a33d64; font-weight: 900; letter-spacing: .1em; }
.benefit-grid h3 { margin: 1.2rem 0 .55rem; font-size: 1.25rem; }
.benefit-grid p { margin: 0; color: #646c7f; line-height: 1.6; }
.pricing { padding: 6rem 0; }
.plan-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; width: min(900px, 100%); margin: 0 auto; }
.plan { position: relative; padding: 2.1rem; border: 1px solid #e7e1e4; border-radius: 24px; background: #fff; box-shadow: 0 16px 50px #351d290d; }
.plan-premium { border: 2px solid #bd4a75; background: linear-gradient(145deg, #fff 30%, #fff5f8); }
.plan-ribbon { position: absolute; right: 1.4rem; top: 1.4rem; padding: .42rem .65rem; border-radius: 999px; background: #f8e4ec; color: #a33d64; font-size: .73rem; font-weight: 850; }
.plan-name { margin: 0 0 .5rem; color: #a33d64; font-weight: 850; }
.plan h3 { margin: 0; font-size: 2rem; letter-spacing: -.04em; }
.plan h3 small { font-size: .88rem; letter-spacing: normal; font-weight: 650; color: #626b7e; }
.plan-subtitle { color: #646c7f; line-height: 1.5; }
.plan ul { display: grid; gap: .85rem; margin: 1.6rem 0 0; padding: 0; list-style: none; }
.plan li { position: relative; padding-left: 1.7rem; line-height: 1.45; }
.plan li::before { content: "✓"; position: absolute; left: 0; color: #23895b; font-weight: 900; }
.plan-premium li::before { color: #a33d64; }
.pricing-note { text-align: center; margin: 1.5rem 0 0; color: #566078; }
.final-cta { display: flex; justify-content: space-between; align-items: center; gap: 2rem; margin-top: 5rem; padding: 2.6rem; border: 1px solid #efdce4; border-radius: 26px; background: linear-gradient(120deg, #fff 25%, #f9e7ee); }
.final-cta h2 { max-width: 680px; font-size: clamp(1.8rem, 3.3vw, 2.8rem); }
.final-cta > div:last-child { min-width: 250px; text-align: center; }
.final-cta > div:last-child p { color: #6b7180; font-size: .78rem; }
footer { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 2rem; margin-top: 5rem; padding: 2.5rem 0 4rem; border-top: 1px solid #e6e1e4; color: #646c7f; }
footer .public-brand { color: #101f45; }

.feature-main { width: min(1080px, calc(100% - 40px)); padding: 3rem 0 5rem; }
.feature-breadcrumb { margin: 0 0 2.2rem; color: #a33d64; font-size: .84rem; font-weight: 800; }
.feature-breadcrumb a { text-decoration: none; }
.feature-hero { max-width: 850px; padding: 3rem; border: 1px solid #eedfe5; border-radius: 28px; background: radial-gradient(circle at 90% 5%, #f9e4ec, transparent 20rem), #fff; box-shadow: 0 18px 55px #4423310d; }
.feature-hero h1 { max-width: 820px; font-size: clamp(2.6rem, 6vw, 4.8rem); }
.feature-hero > p:last-child { max-width: 760px; margin: 1.4rem 0 0; color: #566078; font-size: 1.15rem; line-height: 1.7; }
.feature-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 2rem; margin-top: 2rem; }
.feature-article, .feature-aside { padding: 2rem; border: 1px solid #e9e2e5; border-radius: 22px; background: #fff; }
.feature-article { display: grid; gap: 1.4rem; }
.feature-article h2, .feature-article h3, .feature-article p { margin: 0; }
.feature-article h2 { font-size: clamp(1.8rem, 3vw, 2.5rem); letter-spacing: -.035em; }
.feature-article h3 { margin-bottom: .5rem; font-size: 1.25rem; }
.feature-article p, .feature-article li, .feature-aside li { color: #566078; line-height: 1.7; }
.feature-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; padding: 0; list-style: none; counter-reset: feature-step; }
.feature-steps li { counter-increment: feature-step; padding: 1.2rem; border: 1px solid #eadfe4; border-radius: 16px; background: #fffafb; }
.feature-steps li::before { content: counter(feature-step); display: grid; width: 30px; height: 30px; place-items: center; margin-bottom: .8rem; border-radius: 9px; background: #f3dfe7; color: #a33d64; font-weight: 900; }
.feature-example { padding: 1.3rem; border-radius: 17px; background: #edf7f2; color: #285e49; }
.feature-example p { color: inherit; }
.feature-aside { align-self: start; }
.feature-aside h2 { margin: 0; font-size: 1.2rem; }
.feature-aside ul { display: grid; gap: .75rem; padding-left: 1.2rem; }
.feature-aside .button { width: 100%; margin-top: .8rem; }
.feature-links { display: grid; gap: .65rem; }
.feature-links a { color: #a33d64; font-weight: 800; }
.how-main { width: min(1080px, calc(100% - 40px)); padding: 3rem 0 5rem; }
.how-hero { max-width: 760px; }
.how-hero h1 { margin: 0; font-size: clamp(2.8rem, 6vw, 5rem); line-height: 1; letter-spacing: -.055em; }
.how-hero > p:last-child { margin: 1.25rem 0 0; color: #566078; font-size: 1.12rem; line-height: 1.65; }
.how-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 2.4rem; }
.how-card { display: grid; align-content: start; min-height: 290px; padding: 1.7rem; border: 1px solid #e8dfe3; border-radius: 22px; background: #fff; color: #101f45; text-decoration: none; box-shadow: 0 14px 38px #4423310d; }
.how-card:hover { border-color: #d9aabe; transform: translateY(-2px); box-shadow: 0 20px 45px #44233116; }
.how-number { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 12px; background: #f3dfe7; color: #a33d64; font-weight: 900; }
.how-card h2 { margin: 1.3rem 0 .6rem; font-size: 1.6rem; }
.how-card p { margin: 0; color: #59637a; line-height: 1.65; }
.how-card strong { align-self: end; margin-top: 1.4rem; color: #a33d64; }
.how-cta { display: flex; align-items: center; justify-content: space-between; gap: 2rem; margin-top: 2rem; padding: 2rem; border-radius: 22px; background: #101f45; color: #fff; }
.how-cta h2 { margin: 0; font-size: clamp(1.7rem, 3vw, 2.5rem); }

@media (max-width: 860px) {
  .public-header { height: 70px; }
  .public-header nav > a:not(.button), .public-header .button-small { display: none; }
  .nav-menu > a::after, .nav-submenu { display: none; }
  .hero { grid-template-columns: 1fr; gap: 3rem; padding-top: 3rem; text-align: center; }
  .hero-copy { display: grid; justify-items: center; }
  .hero-actions { flex-direction: column; width: min(420px, 100%); }
  .hero-actions .button { width: 100%; }
  .benefit-grid { grid-template-columns: 1fr; }
  .final-cta { flex-direction: column; text-align: center; }
  footer { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .feature-layout { grid-template-columns: 1fr; }
  .feature-steps { grid-template-columns: 1fr; }
  .how-options { grid-template-columns: 1fr; }
  .how-card { min-height: 0; }
}

@media (max-width: 620px) {
  .public-header, main, footer { width: min(100% - 28px, 1180px); }
  .public-brand img { width: 43px; height: 43px; }
  .public-header nav > a:not(.button), .public-header .button-small { display: none; }
  .public-header nav::after { content: none; }
  .nav-menu { display: block; }
  .nav-menu > a { min-height: 40px; font-size: .92rem; }
  .nav-menu > a::after, .nav-submenu { display: none; }
  .how-main { width: min(100% - 28px, 1080px); padding-top: 2rem; }
  .how-hero h1 { font-size: 2.7rem; }
  .how-cta { align-items: stretch; flex-direction: column; }
  .how-cta .button { width: 100%; }
  .hero { min-height: auto; padding: 2.5rem 0 3.5rem; }
  h1 { font-size: clamp(2.75rem, 14vw, 4.1rem); }
  .hero-intro { font-size: 1.03rem; }
  .phone { width: min(326px, calc(100vw - 52px)); }
  .phone-screen { height: 610px; }
  .benefits, .pricing { padding: 4rem 0; }
  .plan-grid { grid-template-columns: 1fr; }
  .plan { padding: 1.5rem; }
  .plan-ribbon { position: static; display: inline-flex; margin-bottom: 1rem; }
  .final-cta { margin-top: 2rem; padding: 1.8rem 1.3rem; }
  footer nav { gap: 1rem; }
  .feature-main { width: min(100% - 28px, 1080px); padding-top: 1.5rem; }
  .feature-hero, .feature-article, .feature-aside { padding: 1.4rem; border-radius: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .button:hover { transform: none; }
}