/* Nichtraucher Pro landing page. Tokens from design/Landing Page DE.dc.html :root */
:root {
  --green: #2ECC71; --green-deep: #22A95C; --green-soft: #E6F8EF;
  --teal: #0E7C7B; --teal-soft: #D8F1F5;
  --orange: #FF6B35; --orange-soft: #FFE7DC;
  --ink: #1A1A2E; --text-2: #6B7280;
  --ramp-top: #F8FAF9; --ramp-mid: #EFF9F3; --ramp-bottom: #EAF6F6;
  --surface: #FFFFFF; --dark-1: #111827; --dark-2: #1A1A2E;
  --container: 1200px; --gutter: 24px;
  --font-latin: 'Urbanist', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-system: system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans', 'Helvetica Neue', Arial, sans-serif;
}
@font-face { font-family: 'Urbanist'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/urbanist-latin-500-normal.woff2?v=c45d13e9c1dc') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Urbanist'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/urbanist-latin-600-normal.woff2?v=0df215a774fa') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Urbanist'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/urbanist-latin-700-normal.woff2?v=ede48e359fb3') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Urbanist'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/urbanist-latin-800-normal.woff2?v=830d1f9909ee') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Urbanist'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/urbanist-latin-ext-500-normal.woff2?v=852032be6ebe') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Urbanist'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/urbanist-latin-ext-600-normal.woff2?v=a99b686394c4') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Urbanist'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/urbanist-latin-ext-700-normal.woff2?v=02ee8432d6cd') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Urbanist'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/urbanist-latin-ext-800-normal.woff2?v=0033ea93dec0') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; color-scheme: light; }
html.font-urbanist { font-family: var(--font-latin); }
html.font-system { font-family: var(--font-system); }
body { margin: 0; color: var(--ink); background: linear-gradient(180deg, var(--ramp-top) 0%, var(--ramp-mid) 60%, var(--ramp-bottom) 100%); font-size: 19px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--teal); text-decoration: none; }
a:hover { color: var(--green-deep); }
h1, h2, h3 { margin: 0; letter-spacing: -.025em; line-height: 1.02; font-weight: 800; text-wrap: pretty; }
h1 { font-size: clamp(52px, 7.2vw, 96px); letter-spacing: -.03em; }
h2 { font-size: clamp(40px, 4.4vw, 60px); }
p { margin: 0; text-wrap: pretty; }
.container { max-width: var(--container); margin: 0 auto; padding-inline: var(--gutter); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; inset-inline-start: 8px; top: 8px; transform: translateY(-200%); background: var(--ink); color: #fff; padding: 8px 12px; border-radius: 8px; z-index: 100; }
.skip:focus { transform: none; }
.eyebrow { font-weight: 700; color: var(--teal); font-size: 17px; display: flex; align-items: center; gap: 12px; }
.eyebrow--dot::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--orange); flex: none; }
.eyebrow--line::before { content: ""; width: 28px; height: 3px; background: var(--teal); flex: none; }
.button { display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px; padding: 12px 22px; border-radius: 999px; white-space: nowrap; }
.button--dark { background: var(--ink); color: #fff; }
.button--dark:hover { background: var(--teal); color: #fff; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 20; background: rgba(248,250,249,.82); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-bottom: 1px solid rgba(14,124,123,.10); }
.site-header__row { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 14px; }
.brand { min-width: 0; display: flex; align-items: center; gap: 12px; color: var(--ink); }
.brand__name { font-weight: 800; font-size: 22px; letter-spacing: -.01em; overflow-wrap: anywhere; }
.brand img { flex: none; }
.site-nav { display: flex; gap: clamp(16px, 2.4vw, 28px); font-weight: 600; font-size: 17px; white-space: nowrap; }
.site-nav a { color: var(--ink); }
.site-nav a:hover { color: var(--teal); }
.site-header__actions { display: flex; align-items: center; gap: 12px; flex: none; }
.lang-menu select { appearance: none; -webkit-appearance: none; font: inherit; font-weight: 600; font-size: 15px; color: var(--ink); background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231A1A2E' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 12px center; border: 1px solid rgba(14,124,123,.25); border-radius: 999px; padding: 10px 34px 10px 14px; cursor: pointer; }
[dir="rtl"] .lang-menu select { background-position: left 12px center; padding: 10px 14px 10px 34px; }
.lang-menu select:focus-visible { outline: 3px solid var(--teal-soft); outline-offset: 1px; }
@media (max-width: 1100px) { .site-nav { display: none; } .brand__name { font-size: 19px; } }
@media (max-width: 520px) { .site-header__actions .button { display: none; } .site-header__row { gap: 12px; } .lang-menu select { max-width: 145px; } }

/* Store badges */
.store-badges { display: flex; flex-wrap: wrap; gap: 14px; padding-top: 6px; }
.store-badge { display: flex; align-items: center; gap: 12px; background: var(--ink); color: #fff; border-radius: 16px; padding: 12px 24px 12px 18px; min-height: 64px; border: 1px solid rgba(255,255,255,.18); box-shadow: 0 12px 30px rgba(20,40,40,.22); flex: none; }
.store-badge:hover { background: var(--teal); color: #fff; }
.store-badge svg { width: 26px; height: 26px; flex: none; }
.store-badge__text { display: flex; flex-direction: column; line-height: 1.1; }
.store-badge__label { font-size: 12px; font-weight: 600; opacity: .8; }
.store-badge__name { font-size: 22px; font-weight: 700; white-space: nowrap; }

/* Hero */
.hero { position: relative; overflow: hidden; min-height: 760px; display: flex; align-items: stretch; }
.hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.hero__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 40%, rgba(255,255,255,0) 72%, rgba(20,40,40,.28) 100%); }
.hero__grid { position: relative; width: 100%; padding-top: 96px; display: flex; flex-wrap: wrap; gap: 80px; align-items: flex-end; justify-content: space-between; }
.hero__copy { flex: 1 1 480px; min-width: 0; max-width: 640px; margin-bottom: 120px; display: flex; flex-direction: column; gap: 28px; position: relative; z-index: 2; }
.hero__copy::before { content: ""; position: absolute; inset: -120px -100px -100px -160px; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 56% 56% at 50% 50%, rgba(255,255,255,.82) 0%, rgba(255,255,255,.60) 45%, rgba(255,255,255,0) 100%); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); -webkit-mask-image: radial-gradient(ellipse 56% 56% at 50% 50%, #000 0%, #000 40%, rgba(0,0,0,0) 90%); mask-image: radial-gradient(ellipse 56% 56% at 50% 50%, #000 0%, #000 40%, rgba(0,0,0,0) 90%); }
.hero__text { font-size: 22px; line-height: 1.5; font-weight: 500; max-width: 560px; }
.hero__note { font-size: 16px; font-weight: 700; }
.hero__phone { flex: 1 1 380px; min-width: 0; display: flex; justify-content: center; align-self: flex-end; position: relative; z-index: 1; }
.phone { background: linear-gradient(180deg, #3a3a42, #1b1b21); padding: 12px; border-radius: 61px; box-shadow: 0 40px 90px rgba(26,26,46,.28), inset 0 0 0 2px rgba(255,255,255,.08); width: 360px; max-width: 100%; }
.phone img { border-radius: 49px; }
.phone--cut { width: 400px; height: 560px; overflow: hidden; border-radius: 67px 67px 0 0; }
.phone--cut img { border-radius: 55px 55px 0 0; }
@media (max-width: 720px) { .hero { min-height: 0; } .hero__grid { padding-top: 64px; gap: 40px; } .hero__copy { margin-bottom: 40px; } .hero__copy::before { display: none; } .phone--cut { height: 420px; } }

/* Footer */
.site-footer { background: var(--dark-1); color: rgba(255,255,255,.78); padding-block: 64px 32px; font-size: 16px; }
.site-footer__grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 40px; }
.site-footer .brand { color: #fff; }
.site-footer__brand p { margin-top: 16px; max-width: 320px; }
.site-footer__heading { font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #fff; margin-bottom: 14px; }
.site-footer__grid a:not(.brand) { display: block; color: rgba(255,255,255,.78); padding-block: 5px; }
.site-footer__grid a:not(.brand):hover { color: #fff; }
.site-footer__bottom { margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.12); display: flex; flex-wrap: wrap; gap: 12px 32px; font-size: 14px; color: rgba(255,255,255,.6); }
@media (max-width: 820px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .site-footer__grid { grid-template-columns: 1fr; } }

/* Shared section layout */
.section { padding-block: 100px; }
.split { display: flex; flex-wrap: wrap; gap: 64px; align-items: center; justify-content: space-between; }
.split__copy { flex: 1 1 400px; min-width: 0; max-width: 560px; display: flex; flex-direction: column; gap: 22px; }
.split__media { flex: 0 1 520px; min-width: 300px; display: flex; justify-content: center; position: relative; }
.split--reverse { flex-direction: row-reverse; }
.muted { color: var(--text-2); }
.chips { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 6px; }
.chip { background: var(--green-soft); color: var(--green-deep); font-weight: 700; font-size: 15px; padding: 8px 14px; border-radius: 8px; white-space: nowrap; }
.chip--orange { background: var(--orange-soft); color: var(--orange); }

/* Counter dials */
.counter { padding-top: 140px; padding-bottom: 60px; }
.counter__glow { position: absolute; inset: 10% 0 0; border-radius: 50%; background: radial-gradient(circle, rgba(216,241,245,1), rgba(216,241,245,0) 70%); }
.dial { position: relative; width: clamp(160px, 42vw, 300px); height: clamp(160px, 42vw, 300px); border-radius: 50%; overflow: hidden; border: 6px solid #fff; background: #fff; box-shadow: 0 30px 70px rgba(14,124,123,.22); flex: none; }
.dial img { position: absolute; width: 234.5%; max-width: none; height: auto; top: -160%; }
.dial--money { margin-inline-end: -60px; margin-top: -40px; z-index: 1; }
.dial--money img { inset-inline-start: -11%; }
.dial--cigarettes { margin-top: 120px; }
.dial--cigarettes img { inset-inline-start: -125%; }
[dir="rtl"] .dial--money img { inset-inline-start: auto; inset-inline-end: -11%; }
[dir="rtl"] .dial--cigarettes img { inset-inline-start: auto; inset-inline-end: -125%; }
@media (max-width: 720px) { .section { padding-block: 64px; } .counter { padding-top: 80px; } .dial--money { margin-inline-end: -30px; } .dial--cigarettes { margin-top: 70px; } }

/* Body / milestones */
.body__grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; grid-template-areas: "intro phone" "cards phone" "note phone"; column-gap: 64px; row-gap: 40px; align-items: start; }
.body__intro { grid-area: intro; max-width: 720px; display: flex; flex-direction: column; gap: 22px; }
.body__phone { grid-area: phone; align-self: center; display: flex; justify-content: center; }
.phone--small { width: 300px; padding: 10px; border-radius: 51px; }
.phone--small img { border-radius: 41px; }
.milestones { grid-area: cards; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 18px; }
.milestone { background: var(--surface); border-radius: 22px; padding: 26px 24px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.milestone__bar { width: 100%; height: 8px; border-radius: 999px; display: block; }
.milestone__time { font-weight: 600; color: var(--text-2); font-size: 16px; }
.milestone__title { font-weight: 700; font-size: 20px; line-height: 1.25; }
.body__note { grid-area: note; font-size: 16px; max-width: 720px; }
@media (max-width: 960px) { .body__grid { grid-template-columns: 1fr; grid-template-areas: "intro" "phone" "cards" "note"; } }

/* Community */
.community__glow { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, rgba(230,248,239,1), rgba(230,248,239,0) 70%); }
.split__media .phone { position: relative; }
.quote { margin: 8px 0 0; background: var(--surface); border-radius: 22px; padding: 24px 26px; display: flex; flex-direction: column; gap: 14px; border-inline-start: 6px solid var(--green); }
.quote__text { margin: 0; font-size: 18px; line-height: 1.5; font-weight: 500; }
.quote__text::before { content: "\201E"; }
.quote__text::after { content: "\201C"; }
[lang="en"] .quote__text::before, [lang="fr"] .quote__text::before, [lang="es"] .quote__text::before, [lang="pt"] .quote__text::before, [lang="it"] .quote__text::before, [lang="tr"] .quote__text::before, [lang="nl"] .quote__text::before, [lang="ja"] .quote__text::before, [lang="ko"] .quote__text::before, [lang="ar"] .quote__text::before, [lang="he"] .quote__text::before { content: "\201C"; }
[lang="en"] .quote__text::after, [lang="fr"] .quote__text::after, [lang="es"] .quote__text::after, [lang="pt"] .quote__text::after, [lang="it"] .quote__text::after, [lang="tr"] .quote__text::after, [lang="nl"] .quote__text::after, [lang="ja"] .quote__text::after, [lang="ko"] .quote__text::after, [lang="ar"] .quote__text::after, [lang="he"] .quote__text::after { content: "\201D"; }
.quote__caption { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--text-2); font-weight: 600; }
.quote__avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--teal); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; }

/* Premium */
.premium__intro { max-width: 720px; display: flex; flex-direction: column; gap: 22px; margin-bottom: 48px; }
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
.plan { background: var(--surface); border-radius: 28px; padding: 36px 34px; display: flex; flex-direction: column; gap: 22px; position: relative; overflow: hidden; }
.plan--premium { background: linear-gradient(160deg, var(--dark-2), var(--dark-1)); color: #fff; }
.plan__glow { position: absolute; width: 360px; height: 360px; inset-inline-end: -140px; top: -160px; border-radius: 50%; background: radial-gradient(circle, rgba(46,204,113,.45), rgba(46,204,113,0) 70%); pointer-events: none; }
.plan__title { font-size: 26px; letter-spacing: -.01em; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; position: relative; }
.plan__badge { background: var(--green); color: var(--ink); font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; }
.plan__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; font-size: 17px; position: relative; }
.plan__list li { display: flex; gap: 12px; align-items: flex-start; }
.tick { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--green-soft); position: relative; margin-top: 2px; }
.tick::after { content: ""; position: absolute; left: 7px; top: 4px; width: 5px; height: 10px; border: solid var(--green-deep); border-width: 0 3px 3px 0; transform: rotate(45deg); }
.tick--light { background: rgba(46,204,113,.25); }
.tick--light::after { border-color: var(--green); }
.plan__note { font-size: 15px; color: rgba(255,255,255,.72); position: relative; }

/* FAQ */
.faq__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 64px; align-items: start; }
.faq__intro { display: flex; flex-direction: column; gap: 22px; position: sticky; top: 100px; }
.faq__list { display: flex; flex-direction: column; gap: 12px; }
.faq__item { background: var(--surface); border-radius: 18px; padding: 0 24px; }
.faq__q { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 0; font-weight: 700; font-size: 19px; }
.faq__q::-webkit-details-marker { display: none; }
.faq__icon { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--teal-soft); position: relative; }
.faq__icon::before, .faq__icon::after { content: ""; position: absolute; background: var(--teal); left: 50%; top: 50%; translate: -50% -50%; transition: rotate .2s; }
.faq__icon::before { width: 12px; height: 2px; }
.faq__icon::after { width: 2px; height: 12px; }
.faq__item[open] .faq__icon::after { rotate: 90deg; }
.faq__a { padding: 0 0 22px; color: var(--ink); line-height: 1.55; max-width: 62ch; }
@media (max-width: 860px) { .faq__grid { grid-template-columns: 1fr; gap: 32px; } .faq__intro { position: static; } }

/* Download */
.download { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--dark-2), var(--dark-1)); color: #fff; padding-block: 120px; text-align: center; }
.download__glow { position: absolute; width: 900px; height: 900px; left: 50%; top: 50%; translate: -50% -40%; border-radius: 50%; background: radial-gradient(circle, rgba(14,124,123,.55), rgba(14,124,123,0) 65%); pointer-events: none; }
.download__inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: 24px; max-width: 720px; }
.download__logo { width: clamp(140px, 22vw, 220px); height: auto; }
.download__text { font-size: 21px; color: rgba(255,255,255,.82); max-width: 560px; }
.download .store-badges { justify-content: center; }
.download .store-badge { background: #fff; color: var(--ink); border-color: transparent; }
.download .store-badge:hover { background: var(--green-soft); color: var(--ink); }
.download .store-badge svg path { fill: currentColor; }
@media (max-width: 720px) { .download { padding-block: 80px; } }

/* Measured responsive and keyboard refinements. */
html { scroll-padding-block-start: 100px; }
html.font-system h1, html.font-system h2 { font-weight: 700; letter-spacing: 0; }
html.font-system h1 { font-size: clamp(42px, 6.2vw, 80px); line-height: 1.12; }
.chip { color: #187540; }
.chip--orange { color: #A63812; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .faq__icon::before, .faq__icon::after { transition: none; }
}

/* Human-readable discovery and source provenance. */
.health-sources { display: flex; flex-wrap: wrap; gap: 12px 24px; padding: 0; margin: 16px 0 0; list-style: none; }
.health-sources a { text-decoration: underline; text-underline-offset: 3px; }
.footer-languages { margin-block-start: 32px; border-block-start: 1px solid rgba(255,255,255,.16); padding-block-start: 24px; }
.footer-languages summary { cursor: pointer; color: #fff; font-weight: 700; }
.language-links { list-style: none; padding: 0; margin: 20px 0 0; display: grid; grid-template-columns: repeat(auto-fit,minmax(min(220px,100%),1fr)); gap: 16px 24px; }
.language-link { display: flex; flex-direction: column; color: rgba(255,255,255,.82); overflow-wrap: anywhere; }
.language-link span { font-size: 14px; }
.language-link:hover, .publisher-link:hover { color: #fff; }
.language-link[aria-current] strong { text-decoration: underline; }
.publisher-link { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

.hero__picture { position: absolute; inset: 0; display: block; }