/* HeyName · Studio · Schwarz / Weiß · 2026-10-24. Shared marketing design, localized live UI. */
:root{--charcoal:#161b20;--accent-text:#192127;--ice:#f3f4f5;--ink:#20262c;--muted:#626a72;--paper:#fff;--bg:#fff;--accent:#192127;--coral:#192127;--line:#e2e5e8;--tint:#f2f4f6}
body{background:#fff;color:var(--ink)}
h1,h2,h3{color:var(--charcoal)}
h1 em,h2 em{color:var(--accent)}
.site-header{background:#fff;border-bottom:1px solid var(--line);padding-top:22px;padding-bottom:22px}
.site-header .header-download,.button,.modern-cta{background:var(--charcoal);border-color:var(--charcoal);color:#fff}
.site-header .header-download:hover,.button:hover,.modern-cta:hover{background:#192127;border-color:#192127}
.hero{grid-template-columns:1fr 1.03fr;gap:30px;min-height:690px;padding:48px 0 36px;position:relative}
.hero-copy{position:relative;z-index:2;padding-bottom:20px}
.hero .eyebrow{font-size:10px;letter-spacing:.12em;color:var(--accent-text);max-width:30rem}
.hero h1{font-size:clamp(42px,4.5vw,66px);line-height:1.1;letter-spacing:-.05em;max-width:620px}
.hero-copy .lead{font-size:16px;line-height:1.85;margin-top:26px;max-width:30rem;color:var(--muted)}
.hero .store-badges{margin-top:30px;gap:12px}
.store-badge{background:#192127;border:1px solid #192127;border-radius:10px;box-shadow:none;transition:transform .2s,background .2s}
.store-badge:hover{background:#192127;transform:translateY(-2px)}
.hero .actions{margin-top:24px;margin-bottom:12px}
.hero .text-link{color:var(--charcoal)}
.hero-reassurance{font-size:12px;color:var(--muted)}
.hero-product{height:590px;min-width:0;display:flex;align-items:center;justify-content:center;padding:10px 20px 25px;gap:24px;isolation:isolate;perspective:1400px}
.hero-product::before{content:'';position:absolute;z-index:-2;inset:42px -15px 12px -4px;background:radial-gradient(ellipse at 50% 92%,#dedede 0%,#f3f3f3 48%,#fafafa 78%);border-radius:26px}
.hero-product::after{content:'';position:absolute;z-index:-1;left:12%;right:12%;height:18px;bottom:48px;background:#192127;opacity:.12;filter:blur(18px);border-radius:50%}
.hero-product .device{position:relative;width:47%;max-width:236px;flex-shrink:0;margin:0;transform-style:preserve-3d}
.hero-product .device-discover{transform:perspective(1400px) rotateY(-6deg) rotateX(1deg)!important;z-index:1;margin-right:0}
.hero-product .device-matches{transform:perspective(1400px) rotateY(-6deg) rotateX(1deg)!important;z-index:1;margin-left:0}
.hero-product figcaption{position:absolute;width:1px!important;height:1px;padding:0!important;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.hero-product .phone,.choice-phone{position:relative;border:1px solid #8a8c8e;border-radius:30px;background:#1b1d1f;padding:16px 4px 6px;overflow:hidden;box-shadow:3px 2px 0 #555759,0 3px 5px #00000014,8px 16px 26px #00000024,0 28px 48px #00000014}
.hero-product .phone::before,.choice-phone::before{content:'';position:absolute;width:22%;height:3px;background:#080808;left:39%;top:6px;border-radius:5px;box-shadow:0 1px 0 #ffffff18}
.hero-product .phone img,.choice-phone img{width:100%;height:auto;border-radius:21px 21px 24px 24px}
.hero-product .device-note{display:none}
.benefit-strip{margin-top:4px;background:var(--ice);border-radius:14px;border:1px solid #e5e8ec;color:var(--charcoal)}
.benefit-strip p{color:var(--charcoal)}
.benefit-strip span{color:var(--accent-text)}
.section{margin-top:90px;margin-bottom:90px}
.steps{gap:24px}
.steps li{background:#f6f6f7;padding:28px;border:1px solid #e5e6e8;border-radius:18px}
.steps .step,.mini-step{background:#eef0f2;color:var(--charcoal)}
.steps p{color:var(--muted)}
.shared-choice{padding:60px 75px;gap:100px;overflow:hidden;position:relative;background:radial-gradient(ellipse at 85% 90%,#494949,transparent 60%),linear-gradient(125deg,#121518,#282d33);border-radius:24px}
.shared-choice h2,.shared-choice .eyebrow{color:#fff}
.shared-choice .choice-copy p:not(.eyebrow){color:#e5e8ec}
.choice-copy{max-width:410px}
.choice-phone{width:235px;flex-shrink:0;max-width:30%;transform:perspective(1200px) rotateY(-5deg);border-width:1px}
.insight-card{border:1px solid #e9ebee;background:#fafafa;border-radius:18px;padding:24px 22px 16px;overflow:visible;box-shadow:none}
.insight-card .screenshot-link{padding:12px 5px 0 2px}
.insight-card .phone,.blog-app .phone{position:relative;border:1px solid #8a8c8e;border-radius:26px;background:#1b1d1f;padding:13px 4px 5px;overflow:hidden;outline:0;box-shadow:2px 1px 0 #5d5f61,0 2px 4px #00000012,7px 13px 20px #00000020,0 22px 35px #00000012;transform:none;transition:box-shadow .2s}
.insight-card:nth-child(even) .phone{transform:none}
.insight-card .phone::before,.blog-app .phone::before{content:'';position:absolute;width:22%;height:2px;border-radius:5px;background:#080808;top:5px;left:39%;box-shadow:0 1px 0 #ffffff18}
.insight-card .phone img,.blog-app .phone img{border-radius:18px 18px 20px 20px;width:100%;height:auto}
.insight-card .screenshot-link:hover .phone,.insight-card .screenshot-link:focus-visible .phone{transform:none;box-shadow:2px 1px 0 #5d5f61,0 2px 4px #00000012,7px 15px 24px #0000002b,0 24px 38px #00000016}
.insight-card .zoom-label{min-height:44px;padding-top:16px;margin-top:10px;color:var(--muted)}

.modern-pro{background:#f4f5f6;border:1px solid #e5e7e9;border-radius:24px;gap:60px}
.modern-pro p,.pro-benefits p{color:var(--muted)}
.pro-badge{background:#eef0f2;color:#192127}
.pro-benefits>div{border-color:#d9dde1}
.language-band{background:#fff;border-radius:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.language-list a{background:#f2f4f5;border:1px solid #e3e6e9;color:var(--charcoal)}
.language-menu a[aria-current],nav>a:hover{color:var(--accent-text)}
.blog-card,.blog-toc{background:#f4f5f6;border:1px solid #e2e6e9;border-radius:18px}
.blog-app{background:#f2f4f5;border-color:#dce2e6}
.closing-cta{background:radial-gradient(ellipse at 50% 120%,#444444,transparent 65%),#171c21;color:#fff;border:0;padding:65px 30px;border-radius:24px}
.closing-cta h2,.closing-cta .eyebrow{color:#fff}
.closing-cta>p{color:#e5e8ec}
.closing-cta .store-badge{border-color:#737373}
.faq summary{color:var(--charcoal)}
.site-footer{border-color:var(--line)}
@media(min-width:1500px){.site-header,main,.site-footer{max-width:1380px}.hero h1{font-size:72px}.hero-product{height:640px}.hero-product .device{max-width:256px}}
@media(max-width:1050px){.hero{gap:20px;min-height:610px}.hero h1{font-size:48px}.hero-product{height:520px;padding:0 10px 30px}.hero-copy .lead{font-size:14px}.hero-product .phone{border-radius:26px;border-width:1px;padding:14px 3px 5px}.hero-product .phone img{border-radius:19px 19px 21px 21px}.shared-choice{padding:45px;gap:60px}.choice-phone{max-width:38%}.hero-product figcaption{font-size:9px}}
@media(max-width:800px) and (min-width:701px){.hero h1{font-size:40px}.hero-product{height:460px}.hero .store-badges{gap:8px}.hero .store-badge{min-width:0;padding:10px;gap:7px}.hero .store-badge strong{font-size:14px}.hero .store-badge svg{width:24px}.hero .store-badge small{font-size:8px}.hero-product figcaption{font-size:8px}.hero-copy .lead{font-size:13px}}
@media(max-width:700px){.hero{grid-template-columns:1fr;gap:20px;padding-top:34px;padding-bottom:26px;min-height:0}.hero-copy{padding-bottom:0}.hero h1{font-size:clamp(37px,9.1vw,55px);max-width:570px}.hero .eyebrow{font-size:9px;line-height:1.7;margin-bottom:18px}.hero-copy .lead{font-size:14px;line-height:1.85;margin-top:22px}.hero .store-badges{margin-top:24px}.hero .actions{margin-top:18px;flex-direction:row}.hero-reassurance{font-size:11px}.hero-product{height:auto;aspect-ratio:1/1.12;width:100%;max-width:480px;justify-self:center;gap:18px;padding:16px 13px 25px}.hero-product::before{inset:35px -8px 0;clip-path:none;border-radius:20px}.hero-product::after{bottom:33px}.hero-product .device{width:44%;max-width:none}.hero-product .device-discover{transform:perspective(1400px) rotateY(-6deg) rotateX(1deg)!important;margin-right:0}.hero-product .device-matches{transform:perspective(1400px) rotateY(-6deg) rotateX(1deg)!important;margin-left:0}.hero-product .phone{border-radius:26px;border-width:1px;padding:14px 3px 5px}.hero-product .phone::before{top:5px;height:2px}.hero-product .phone img{border-radius:19px 19px 21px 21px}.hero-product figcaption{font-size:8px;padding-top:12px}.section{margin-top:60px;margin-bottom:60px}.benefit-strip{border-radius:12px}.steps li{padding:25px}.shared-choice{flex-direction:column;gap:35px;padding:36px 26px 48px;border-radius:20px}.choice-copy{max-width:none}.choice-phone{width:215px;max-width:80%}.modern-pro{gap:20px;padding:30px 25px}.closing-cta{padding:42px 23px;border-radius:20px}.blog-card{padding:25px}}
@media(max-width:380px){.hero .store-badge{gap:7px;padding:9px}.hero .store-badge strong{font-size:13px}.hero .store-badge small{font-size:8px}.hero .store-badge svg{width:23px}.hero-product{padding-left:7px;padding-right:7px}.hero h1{font-size:36px}.hero-product figcaption{font-size:7px}.hero-reassurance{font-size:10px}}

/* Smaller devices keep a readable app image and visible chassis depth. */
@media(max-width:640px){
 .insight-card{grid-template-columns:minmax(0,1fr) minmax(118px,43%);gap:18px;padding:24px 18px}
 .insight-card .screenshot-link{padding:6px 7px 0 0;min-width:0}
 .insight-card .phone{width:100%;max-width:none;border-width:1px;border-radius:18px;padding:10px 3px 4px}
 .insight-card .phone::before{height:2px;top:4px}
 .insight-card .phone img{border-radius:12px 12px 14px 14px}
 .insight-card .zoom-label{padding-top:16px;font-size:9px;line-height:1.6}
}
@media(prefers-reduced-motion:reduce){.insight-card .phone{transition:none}}

/* A consistent app palette and a common baseline for every feature view. */
.insight-card:nth-child(n){background:linear-gradient(180deg,#fbfbfb 45%,#f4f4f4)}
.insight-card .phone,.blog-app .phone,.decision-visual .phone{transform:none}
a:focus-visible,button:focus-visible,select:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline-color:var(--accent-text)}
.deletion-proof input:focus-visible,.deletion-proof textarea:focus-visible{outline-color:var(--accent-text)}

/* Compact copy and generous spacing keep attention on the app. */
.insight-grid{gap:24px}
.insight-copy{margin-bottom:20px}
.insight-copy h3{font-size:20px;line-height:1.35;letter-spacing:-.025em}
.insight-copy p{line-height:1.85;margin-top:14px}
.insight-copy .mini-step{display:inline-block;background:none;width:auto;color:var(--accent-text);font-size:11px;font-weight:600;letter-spacing:.06em;margin-bottom:14px}
.insight-card .zoom-label{font-weight:400}
.insight-card .screenshot-link:hover .zoom-label{color:var(--accent-text)}
@media(min-width:641px) and (max-width:1050px){.insight-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.insight-card{padding:28px}.insight-card .phone{max-width:235px}.insight-copy p{max-width:32ch}}
@media(max-width:640px){.insight-copy h3{font-size:18px}.insight-copy{margin-bottom:0}.insight-grid{gap:20px}}

/* Marketing type is neutral; color remains inside the authentic app screens. */
.steps .step{border-color:#d9dde1}