:root{--bg:#f7f8fb;--surface:#fff;--surface2:#f1f3f7;--text:#1d2330;--muted:#687182;--border:#e0e4eb;--accent:#756fc6;--accent2:#9a83c8;--accent-strong:#625bb8;--soft:#f0edff;--green:#2f7d63;--rose:#fff3f6;--blue:#f1f6ff;--violet:#f6f1ff;--mint:#eef8f3;--sand:#fff7e9;--shadow:0 22px 65px rgba(34,42,58,.10);--max:1180px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(circle at 84% 5%,rgba(154,131,200,.12),transparent 28rem),radial-gradient(circle at 10% 23%,rgba(117,111,198,.08),transparent 26rem),var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit}.container{width:min(calc(100% - 40px),var(--max));margin:auto}
.nav{position:sticky;top:0;z-index:40;background:rgba(247,248,251,.94);backdrop-filter:blur(16px);border-bottom:1px solid rgba(224,228,235,.84)}.navin{min-height:68px;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{display:flex;align-items:center;font-weight:850}.brand-image{flex-direction:column;align-items:flex-start;gap:0}.brandlogoimg{display:block;width:150px;height:auto;max-height:35px;object-fit:contain;object-position:left center}.brandsub{font-size:9px;color:var(--muted);font-weight:750;margin-left:40px;margin-top:-2px;white-space:nowrap}.navright{display:flex;align-items:center;gap:13px}.links{display:flex;align-items:center;gap:18px;font-size:12px;color:var(--muted);font-weight:760}.links a:hover{color:var(--text)}.mini-store-actions{display:flex;gap:5px}.mini-store{width:31px;height:31px;border-radius:10px;border:1px solid var(--border);background:#fff;color:var(--text);display:grid;place-items:center;cursor:pointer;font-size:17px;transition:.16s}.mini-store:hover{border-color:#c9c3eb;background:#f6f3ff}.playmark{font-size:12px;color:var(--accent-strong);transform:translateX(1px)}.loginbtn{border:0;border-radius:11px;min-height:36px;padding:0 15px;color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent2));font-weight:850;cursor:pointer;box-shadow:0 8px 22px rgba(117,111,198,.18)}
.btn,.btn2{display:inline-flex;align-items:center;justify-content:center;min-height:43px;border-radius:13px;padding:0 16px;font-weight:820;border:0}.btn{color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent2));box-shadow:0 10px 24px rgba(117,111,198,.20)}.btn2{background:#fff;border:1px solid var(--border)}.morelink{display:inline-flex;align-items:center;gap:7px;color:var(--accent-strong);font-size:13px;font-weight:850;padding:7px 2px;border-bottom:1px solid rgba(98,91,184,.24);transition:.18s ease}.morelink:hover{color:#4f48a3;border-color:#4f48a3}.morelink.prominent{padding:10px 13px;border:1px solid #dcd7f4;border-radius:12px;background:#f4f1ff;box-shadow:0 7px 20px rgba(117,111,198,.08)}.buttonlink{border-top:0;border-left:0;border-right:0;background:transparent;cursor:pointer}
.hero{padding:34px 0 30px}.herogrid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(300px,.88fr);gap:42px;align-items:center}.kicker{display:inline-flex;align-items:center;gap:8px;padding:6px 9px;border-radius:999px;border:1px solid var(--border);background:rgba(255,255,255,.78);font-size:9.5px;text-transform:uppercase;letter-spacing:.065em;font-weight:850;color:var(--muted)}.dot{width:7px;height:7px;background:var(--green);border-radius:50%}h1{font-size:clamp(40px,5.2vw,62px);line-height:.99;letter-spacing:-.055em;margin:15px 0 12px}.lead{font-size:16px;line-height:1.5;color:var(--muted);max-width:680px;margin:0}.lead strong{color:var(--text)}.actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:18px}.store-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:13px}.storebtn{min-width:142px;height:42px;border:1px solid #d8dbe2;border-radius:12px;background:#fff;color:#252a34;padding:5px 10px;display:flex;align-items:center;gap:8px;cursor:pointer;text-align:left;box-shadow:0 6px 18px rgba(34,42,58,.035)}.storebtn:hover{border-color:#c7c1eb;background:#fbfaff}.storebtn svg{width:22px;height:22px;fill:currentColor;flex:0 0 auto}.storebtn span{display:flex;flex-direction:column;line-height:1.05}.storebtn small{font-size:7.5px;color:var(--muted);font-weight:650}.storebtn strong{font-size:12px;margin-top:2px}.occasions{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:16px;max-width:610px}.occasion{min-height:40px;border-radius:12px;display:grid;place-items:center;text-align:center;padding:6px;border:1px solid rgba(0,0,0,.035);font-size:10.5px;font-weight:760}.birthday{background:var(--rose)}.anniv{background:var(--blue)}.life{background:var(--violet)}.mile{background:var(--mint)}.business{background:var(--sand)}.other{background:#f4f3f7}
.phonewrap{position:relative;display:grid;place-items:center;min-height:445px}.glow{position:absolute;width:315px;height:315px;border-radius:50%;background:radial-gradient(circle,rgba(117,111,198,.18),transparent 67%)}.phone{width:232px;min-height:425px;border-radius:31px;padding:9px;background:#151922;position:relative;z-index:2;box-shadow:0 28px 70px rgba(20,25,35,.23);transform:rotate(1.1deg)}.screen{min-height:407px;background:#fff;border-radius:24px;padding:13px 11px}.statusbar{font-size:7px;color:#667080;font-weight:800;display:flex;justify-content:space-between}.minibrand{display:flex;gap:6px;align-items:center;margin-top:11px}.minilogoimg{width:27px;height:27px;object-fit:contain;display:block}.minititle{font-size:11px;font-weight:850}.minisub{font-size:6.4px;color:var(--muted)}.minik{margin-top:15px;font-size:6.4px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:850}.minih{font-size:18.5px;line-height:1.04;letter-spacing:-.04em;font-weight:900;margin-top:5px}.minicopy{font-size:7.7px;line-height:1.38;color:var(--muted);margin-top:8px}.minigrid{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;margin-top:10px}.minigrid .occasion{min-height:31px;border-radius:8px;font-size:5.8px;padding:3px}.minibtn{margin-top:11px;height:31px;border-radius:9px;background:linear-gradient(135deg,var(--accent),var(--accent2));display:grid;place-items:center;color:white;font-size:7.5px;font-weight:850}.minipriv{margin-top:6px;background:#f5f4fb;border:1px solid #e8e5f6;border-radius:9px;padding:6px;font-size:6.3px;line-height:1.3;color:var(--muted)}.float{position:absolute;z-index:3;background:rgba(255,255,255,.97);border:1px solid var(--border);border-radius:15px;padding:11px 12px;box-shadow:0 14px 38px rgba(34,42,58,.12);max-width:190px}.float b{display:block;font-size:12px;margin-bottom:4px}.float span{font-size:10px;line-height:1.4;color:var(--muted)}.fa{left:0;top:62px}.fb{right:0;bottom:54px}
.section{padding:44px 0}.soft{background:rgba(255,255,255,.62);border-block:1px solid rgba(224,228,235,.82)}.head{max-width:780px;margin:0}.compact-head{margin:0}.section-row{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;margin-bottom:17px}.section-row.slim-row{align-items:center;margin:25px 0 13px}.eyebrow{font-size:10px;text-transform:uppercase;letter-spacing:.09em;font-weight:850;color:var(--accent)}h2{font-size:clamp(28px,3.25vw,40px);line-height:1.05;letter-spacing:-.045em;margin:6px 0 8px}.small-h2{font-size:clamp(24px,2.6vw,33px);margin-bottom:0}.head p,.copy{font-size:13.5px;color:var(--muted);line-height:1.48;margin:0}.head strong{color:var(--text)}.topiclink{flex:0 0 auto}
.modes{display:grid;grid-template-columns:1fr 1fr;gap:11px}.mode{padding:18px;border-radius:20px;min-height:160px}.private{background:linear-gradient(155deg,#fff,#faf8ff)}.biz{background:linear-gradient(155deg,#fff,#fffaf0)}.pill{display:inline-flex;padding:5px 8px;background:var(--surface2);border-radius:999px;font-size:9px;font-weight:850;color:var(--muted)}.mode h3{font-size:19px;margin:9px 0 6px;letter-spacing:-.035em}.card{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:17px;box-shadow:0 8px 26px rgba(40,49,65,.035)}.card p{font-size:11.8px;line-height:1.45;color:var(--muted);margin:0}.checks{display:grid;gap:5px;margin-top:10px}.check{display:flex;gap:7px;font-size:10.8px;line-height:1.35}.tick{flex:0 0 17px;width:17px;height:17px;border-radius:50%;display:grid;place-items:center;background:#edf8f2;color:var(--green);font-size:8px;font-weight:900}
.advantages{scroll-margin-top:82px}.featuregrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.feature{min-height:128px;padding:15px}.icon{width:30px;height:30px;border-radius:10px;background:var(--soft);color:var(--accent);display:grid;place-items:center;font-size:9px;font-weight:900;margin-bottom:9px}.feature h3{font-size:15px;letter-spacing:-.02em;margin:0 0 5px}.feature p{font-size:10.8px}.howto-card{width:min(380px,100%);background:#f4f1ff;border:1px solid #dcd7f4;border-radius:14px;padding:10px 13px;display:flex;justify-content:space-between;align-items:center;gap:14px;color:var(--accent-strong);box-shadow:0 7px 20px rgba(117,111,198,.06)}.howto-card span{font-size:10px;color:var(--muted);font-weight:750}.howto-card strong{font-size:11.5px;white-space:nowrap}
.recommendations{scroll-margin-top:75px}.rec-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:22px;align-items:center}.rec-grid h2{margin-top:6px}.rec-links{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:14px}.rec-card{position:relative;background:linear-gradient(145deg,#f3efff,#fff);border:1px solid rgba(117,111,198,.22);border-radius:20px;padding:18px}.rec-points{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:11px}.rec-points span{background:#fff;border:1px solid #e7e3f3;border-radius:12px;padding:10px;font-size:10.8px;color:var(--muted);font-weight:720}.info-rec{position:absolute!important;right:12px;top:13px!important;margin:0!important}
.privacy-section{scroll-margin-top:75px}.privacy-top{display:grid;grid-template-columns:1.18fr .82fr;gap:18px;align-items:stretch}.privacy-head{max-width:760px}.privacy-promises{display:grid;grid-template-columns:1fr;gap:7px}.privacyfact{background:#fff;border:1px solid var(--border);border-radius:14px;padding:12px 14px}.privacyfact strong{display:block;font-size:12px;margin-bottom:2px}.privacyfact span{display:block;color:var(--muted);font-size:10.3px;line-height:1.35}.importgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:13px;align-items:stretch}.importcard{padding:15px;height:100%;min-width:0}.importtitle h3{margin:0;font-size:15.5px}.minichecks{display:flex;gap:5px 10px;flex-wrap:wrap;margin-top:9px}.minichecks span{font-size:9.8px;color:var(--muted);font-weight:700}.privacy-links{display:flex;gap:15px;align-items:center;flex-wrap:wrap;margin-top:10px}.info{width:13px;height:13px;display:inline-grid;place-items:center;border-radius:50%;border:1px solid #c9c3eb;background:#f4f1ff;color:var(--accent-strong);font-size:7px;font-weight:900;cursor:pointer;line-height:1;vertical-align:super;position:relative;top:-.48em;margin-left:3px;padding:0}.info:hover,.info:focus-visible{background:var(--accent);color:#fff;outline:none}
.footer{padding:26px 0 34px;color:var(--muted);font-size:10.5px}.footergrid{display:grid;grid-template-columns:1.15fr 1.15fr .9fr auto;gap:28px;align-items:start}.footerbrand img{display:block;width:128px;height:auto;margin-bottom:7px}.footerbrand span{display:block;line-height:1.4}.footertopics,.footerlinks{display:flex;flex-direction:column;gap:6px}.footertopics strong,.footerlinks strong{color:var(--text);font-size:10px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:2px}.footertopics a:hover,.footerlinks a:hover{color:var(--accent-strong)}.copyright{white-space:nowrap}
.dialog{width:min(570px,calc(100% - 34px));border:0;border-radius:22px;padding:0;box-shadow:0 28px 90px rgba(25,30,42,.28);background:#fff;color:var(--text)}.dialog::backdrop{background:rgba(25,30,42,.38);backdrop-filter:blur(3px)}.dialogin{padding:24px}.dialoghead{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}.dialog h3{font-size:21px;letter-spacing:-.03em;margin:0}.dialog p{color:var(--muted);font-size:12.5px;line-height:1.58}.dialog ul{padding-left:20px;color:var(--muted);font-size:12.5px;line-height:1.55}.close{width:33px;height:33px;border-radius:11px;border:1px solid var(--border);background:#fff;cursor:pointer;color:var(--muted);font-weight:850}.dialoglink{display:inline-flex;margin-top:5px;color:var(--accent);font-size:12px;font-weight:800}
/* Content / legal pages */
.contentwrap,.legalwrap{width:min(calc(100% - 40px),920px);margin:45px auto 65px}.back{color:var(--accent);font-size:12.5px;font-weight:800}.contenthero,.legalhead{margin:22px 0 20px}.contenthero h1,.legalhead h1{font-size:clamp(36px,5.5vw,55px);margin:6px 0 10px}.contentlead{font-size:15px;line-height:1.55;color:var(--muted);max-width:780px}.contentcard,.legalcard{background:#fff;border:1px solid var(--border);border-radius:24px;padding:27px;box-shadow:0 12px 42px rgba(34,42,58,.05)}.contentcard h2,.legalcard h2{font-size:22px;letter-spacing:-.025em;margin:29px 0 8px}.contentcard h2:first-child,.legalcard h2:first-of-type{margin-top:0}.contentcard h3,.legalcard h3{font-size:16px;margin:20px 0 7px}.contentcard p,.contentcard li,.legalcard p,.legalcard li{color:var(--muted);font-size:13.2px;line-height:1.65}.contentcard strong,.legalcard strong{color:var(--text)}.contentcard a,.legalcard a{color:var(--accent-strong);font-weight:750}.topic-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px 0}.topic-box{border:1px solid var(--border);border-radius:15px;padding:14px;background:#fbfbfd}.topic-box strong{display:block;font-size:13px;margin-bottom:3px}.topic-box span{font-size:11.5px;color:var(--muted);line-height:1.4}.content-cta{margin-top:24px;border:1px solid #dcd7f4;background:#f4f1ff;border-radius:17px;padding:17px;display:flex;align-items:center;justify-content:space-between;gap:18px}.content-cta h3{margin:0 0 4px}.content-cta p{margin:0}.legalmeta{display:flex;gap:8px;flex-wrap:wrap}.legalmeta span{padding:6px 9px;background:var(--surface2);border-radius:999px;font-size:10px;color:var(--muted);font-weight:750}.notice{border:1px solid #e6d9b6;background:#fff9eb;border-radius:17px;padding:15px 16px;color:#6d6042;font-size:13px;line-height:1.55;margin-bottom:23px}.notice strong{color:#544930}
@media(max-width:1040px){.links{display:none}.herogrid,.rec-grid,.privacy-top{grid-template-columns:1fr}.phonewrap{margin-top:0}.float{display:none}.footergrid{grid-template-columns:1fr 1fr}.privacy-promises{grid-template-columns:repeat(3,1fr)}.section-row{align-items:flex-start}.howto-card{width:auto}}
@media(max-width:760px){.container{width:min(calc(100% - 26px),var(--max))}.navin{min-height:64px}.brandlogoimg{width:132px}.brandsub{margin-left:34px;font-size:8px}.mini-store-actions{display:none}.loginbtn{min-height:34px;padding:0 13px}.hero{padding-top:28px}.herogrid{gap:18px}.phonewrap{min-height:410px}.phone{width:225px;min-height:414px}.screen{min-height:396px}.occasions{grid-template-columns:repeat(2,1fr)}.section{padding:37px 0}.section-row{display:block}.topiclink{margin-top:8px}.modes,.featuregrid,.privacy-promises,.importgrid,.rec-points,.topic-grid{grid-template-columns:1fr}.section-row.slim-row{display:flex;flex-direction:column;align-items:flex-start}.howto-card{width:100%;max-width:430px}.footergrid{grid-template-columns:1fr 1fr}.copyright{grid-column:1/-1}.content-cta{align-items:flex-start;flex-direction:column}.contentcard,.legalcard{padding:21px}.contentwrap,.legalwrap{width:min(calc(100% - 26px),920px)}.storebtn{min-width:136px}.privacy-links{align-items:flex-start;flex-direction:column;gap:2px}}
@media(max-width:500px){.footergrid{grid-template-columns:1fr}.phonewrap{min-height:395px}.phone{width:218px}.store-actions{display:grid;grid-template-columns:1fr 1fr}.storebtn{min-width:0;width:100%}.howto-card{align-items:flex-start;flex-direction:column;gap:3px}.copyright{grid-column:auto}}


/* v6 – compact hierarchy, consistent bubbles and clearer sections */
.navright{gap:16px}.mini-store-actions{display:none!important}
.hero-copy h1{margin-top:0}.hero{padding:32px 0 28px}.herogrid{grid-template-columns:minmax(0,1.15fr) minmax(330px,.85fr);gap:40px}
.morelink{padding:9px 13px;border:1px solid #dcd7f4;border-radius:999px;background:#f6f3ff;box-shadow:0 5px 16px rgba(117,111,198,.055);font-size:12px;line-height:1.1}.morelink:hover{background:#eeebff;border-color:#c9c3eb;color:#4f48a3}.morelink.prominent{padding:10px 14px;border-radius:999px;background:#eeeaff;border-color:#d2ccf1}.morelink.subtle{background:#fff;border-color:#ddd9ef}.buttonlink{cursor:pointer}
.occasions{margin-top:18px}.occasion-link{transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}.occasion-link:hover{transform:translateY(-2px);border-color:#cec8ea;box-shadow:0 7px 18px rgba(34,42,58,.07)}
.phonewrap{min-height:490px}.phone-center{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:10px}.phone{width:220px;min-height:403px}.screen{min-height:385px}.phone-store-actions{margin-top:0;width:236px;display:grid;grid-template-columns:1fr 1fr;gap:6px}.phone-store-actions .storebtn{min-width:0;width:100%;height:39px;padding:5px 8px;border-radius:11px}.phone-store-actions .storebtn svg{width:19px;height:19px}.phone-store-actions .storebtn small{font-size:6.6px}.phone-store-actions .storebtn strong{font-size:10.5px}.float{max-width:210px;padding:12px 13px}.float b{font-size:12.5px}.float span{font-size:11.1px;line-height:1.42}.fa{left:-4px;top:56px}.fb{right:-4px;bottom:72px}
.section{padding:39px 0}.section .eyebrow{font-size:12.5px;letter-spacing:.075em}.section h2{font-size:clamp(25px,2.75vw,34px);margin-top:5px}.section-row{align-items:center;margin-bottom:15px}.compact-section-row{margin-bottom:13px}.overview-section{background:rgba(255,255,255,.66)}.advantages-section{background:rgba(247,248,251,.54);border-bottom:1px solid rgba(224,228,235,.72)}.recommendations-tint{background:rgba(242,239,255,.48);border-block:1px solid rgba(224,228,235,.82)}.privacy-section{background:rgba(255,255,255,.72)}
.featuregrid5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px}.featuregrid5 .feature{min-height:135px}.featuregrid5 .feature h3{font-size:14px}.featuregrid5 .feature p{font-size:10.4px}
.pro-overview{margin-top:13px;border:1px solid #ddd8f3;border-radius:18px;background:linear-gradient(135deg,#fbfaff,#f5f2ff);padding:14px 15px;display:grid;grid-template-columns:1.08fr 1.3fr auto;align-items:center;gap:14px}.pro-copy h3{font-size:16px;margin:4px 0 4px}.pro-copy p{font-size:10.8px;line-height:1.4;color:var(--muted);margin:0}.pro-compare{display:grid;grid-template-columns:1fr 1fr;gap:7px}.pro-mini{background:#fff;border:1px solid #e4e0f2;border-radius:13px;padding:9px 10px;min-height:62px}.pro-mini strong{display:block;font-size:10.2px;line-height:1.3;margin-top:5px}.pro-mini-accent{background:#fff;border-color:#e4e0f2}
.recommendation-single{max-width:900px}.recommendation-single .copy{max-width:780px}.rec-links{gap:8px;margin-top:12px}
.privacy-section-row{align-items:center}.privacy-grid-v6{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}.privacycard{min-height:132px;padding:15px}.privacycard h3{font-size:14px;margin:0 0 6px;letter-spacing:-.02em}.privacycard p{font-size:10.6px;line-height:1.43}.privacy-head h2 .info{top:-.58em}
.steps-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:15px 0 23px}.step-card{position:relative;border:1px solid var(--border);border-radius:16px;background:#fbfbfd;padding:14px;min-height:160px}.step-num{width:27px;height:27px;border-radius:9px;background:var(--soft);color:var(--accent-strong);display:grid;place-items:center;font-size:10px;font-weight:900;margin-bottom:9px}.step-card h3{font-size:14px!important;margin:0 0 5px!important}.step-card p{font-size:11.5px!important;line-height:1.48!important;margin:0!important}
.content-cta{margin-top:22px;border:1px solid #ddd8f3;background:linear-gradient(135deg,#fbfaff,#f5f2ff);border-radius:16px;padding:14px 15px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:15px}.content-cta h3{font-size:15px;margin:0 0 3px}.content-cta p{font-size:11.8px;line-height:1.45;margin:0}.cta-bubble{white-space:nowrap}.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:12px 0 4px}.faq-item{border:1px solid var(--border);background:#fbfbfd;border-radius:15px;padding:13px}.faq-item h3{font-size:13.5px;margin:0 0 5px}.faq-item p{font-size:11.8px!important;line-height:1.5!important;margin:0}
@media(max-width:1120px){.featuregrid5{grid-template-columns:repeat(3,1fr)}.pro-overview{grid-template-columns:1fr 1fr}.pro-overview>.morelink{grid-column:1/-1;justify-self:start}.privacy-grid-v6{grid-template-columns:repeat(2,1fr)}.steps-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.herogrid{grid-template-columns:1fr}.phonewrap{min-height:455px}.phone-store-actions{width:230px}.featuregrid5,.privacy-grid-v6,.pro-compare,.faq-grid,.steps-grid{grid-template-columns:1fr}.pro-overview{grid-template-columns:1fr}.pro-overview>.morelink{grid-column:auto}.content-cta{grid-template-columns:1fr}.cta-bubble{white-space:normal}.float{display:none}.section .eyebrow{font-size:12px}.section h2{font-size:27px}}

/* v6.1 – targeted layout refinements */
.recommendation-single{max-width:var(--max)}
.phone-store-actions{width:292px;gap:8px;margin-top:2px}
.phone-store-actions .storebtn{height:47px;padding:6px 11px;border-radius:13px;background:#f3f0ff;border-color:#d7d1f2;box-shadow:0 7px 20px rgba(117,111,198,.09)}
.phone-store-actions .storebtn:hover{background:#ece8ff;border-color:#c5bde9;box-shadow:0 9px 24px rgba(117,111,198,.13)}
.phone-store-actions .storebtn svg{width:23px;height:23px;color:#5d56b3}
.phone-store-actions .storebtn small{font-size:7.4px}
.phone-store-actions .storebtn strong{font-size:11.8px}
.float{padding:10px 12px}
.float b{margin-bottom:2px}
.float span{line-height:1.2}
@media(max-width:760px){.phone-store-actions{width:276px}}
@media(max-width:500px){.phone-store-actions{width:268px}}


/* v6.3 – consolidated UX, app previews and consistency refinements */
.appshot-screen{padding:0!important;overflow:hidden;background:#fff}
.appshot{display:block;width:100%;height:auto}
.appshot-phone .screen{min-height:0;height:auto}
.appshot-home{border-radius:20px}
.phonewrap .float{max-width:188px;padding:9px 11px}
.phonewrap .float b{font-size:12.2px;margin-bottom:2px}
.phonewrap .float span{font-size:10.8px;line-height:1.15}
.phonewrap .fa{left:-54px;top:50px}
.phonewrap .fb{right:-48px;bottom:78px}

/* Store badges: larger and visually connected to the Okkadio palette */
.phone-store-actions{width:322px;gap:10px;margin-top:5px;padding:6px;border-radius:17px;background:rgba(237,233,255,.72);border:1px solid #dcd5f5;box-shadow:0 9px 26px rgba(104,94,181,.10)}
.phone-store-actions .storebtn{height:54px;padding:7px 13px;border-radius:13px;background:#fbfaff;border-color:#d1caef;box-shadow:0 4px 13px rgba(88,79,156,.08)}
.phone-store-actions .storebtn:hover{background:#f4f1ff;border-color:#bfb5e8;transform:translateY(-1px)}
.phone-store-actions .storebtn svg{width:28px;height:28px;color:#5d56b3;flex:0 0 auto}
.phone-store-actions .storebtn small{font-size:7.8px;line-height:1.05}
.phone-store-actions .storebtn strong{font-size:13.2px;line-height:1.05}

/* Recommendations: full-width alignment plus a compact in-section app preview */
.recommendation-single{max-width:var(--max)}
.recommendation-showcase{display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:28px;align-items:center;min-height:248px}
.recommendation-copy{max-width:760px}
.recommendation-copy .copy{margin:0;max-width:760px}
.recommendation-phone-wrap{justify-self:end;position:relative;padding-top:18px}
.app-preview-pill{position:absolute;right:0;top:0;z-index:2;background:#f0ecff;border-color:#d5cef2;color:#5f58b8}
.recommendation-phone{width:176px;height:224px;border:7px solid #20242d;border-radius:28px;overflow:hidden;background:#fff;box-shadow:0 14px 32px rgba(30,35,50,.15);transform:rotate(1.2deg)}
.recommendation-phone .appshot-ideas{width:100%;height:auto;transform:translateY(-1px)}

/* Privacy cards use the same information affordance in every tile */
.privacycard h3{display:flex;align-items:flex-start;gap:4px}
.privacycard h3 .info{top:-.48em;flex:0 0 auto}

/* Keep all section-level follow-up links aligned consistently at the top right */
.section-row{align-items:flex-start}
.section-row>.topiclink{margin-top:1px;flex:0 0 auto}

@media(max-width:1120px){
  .phonewrap .fa{left:-24px}.phonewrap .fb{right:-20px}
  .recommendation-showcase{grid-template-columns:minmax(0,1fr) 205px;gap:20px}
}
@media(max-width:760px){
  .phone-store-actions{width:300px;max-width:92vw}
  .phonewrap .float{display:none}
  .recommendation-showcase{grid-template-columns:1fr;min-height:0;gap:16px}
  .recommendation-phone-wrap{justify-self:center;padding-top:16px}
  .recommendation-phone{width:168px;height:214px}
  .section-row{align-items:flex-start}
  .section-row>.topiclink{margin-top:4px}
}
@media(max-width:500px){
  .phone-store-actions{width:286px}
  .phone-store-actions .storebtn{height:52px;padding:7px 10px}
  .phone-store-actions .storebtn svg{width:25px;height:25px}
  .phone-store-actions .storebtn strong{font-size:12.4px}
}
/* Final v6.3 phone-frame fit: let the real app screenshot define the hero phone height. */
.appshot-phone{min-height:0}

/* v6.4 – phone proportions refined */
/* Hero phone slightly narrower so it reads clearly as a smartphone, not a tablet. */
.phone{width:198px;min-height:0}
.appshot-phone{border-width:8px;border-radius:34px}
.appshot-phone .screen{border-radius:24px}
.phonewrap{min-height:500px}

/* Lift the App & Web bubble so it no longer overlaps the store badges. */
.phonewrap .fb{right:-44px;bottom:128px}

/* Recommendation phone made narrower and taller for more realistic phone proportions. */
.recommendation-showcase{grid-template-columns:minmax(0,1fr) 210px;gap:24px}
.recommendation-phone-wrap{padding-top:20px}
.recommendation-phone{width:154px;height:296px;border-width:7px;border-radius:27px;transform:rotate(1deg)}

/* Keep proportions sensible on medium and small screens. */
@media(max-width:1120px){
  .phone{width:192px}
  .recommendation-showcase{grid-template-columns:minmax(0,1fr) 192px;gap:18px}
  .recommendation-phone{width:148px;height:286px}
  .phonewrap .fb{right:-18px;bottom:118px}
}
@media(max-width:760px){
  .phone{width:204px}
  .recommendation-phone{width:154px;height:296px}
  .phonewrap .fb{bottom:118px}
}
@media(max-width:500px){
  .phone{width:194px}
  .recommendation-phone{width:148px;height:286px}
}


/* v6.5 – final compact refinements */
/* PRO uses the same neutral card surface as the free tile. */
.pro-mini-accent{background:#fff;border-color:#e4e0f2}

/* Recommendation section: text only again; no extra phone and no artificial empty height. */
.recommendation-showcase{display:block;min-height:0}
.recommendation-copy{max-width:820px}

/* Footer: copyright belongs to the Okkadio brand block instead of a detached fourth column. */
.footergrid{grid-template-columns:1.15fr 1.15fr .9fr}
.footerbrand .footercopyright{display:block;margin-top:13px;font-size:10px;line-height:1.35;color:var(--muted);white-space:nowrap}

@media(max-width:1040px){.footergrid{grid-template-columns:1fr 1fr}}
@media(max-width:500px){.footergrid{grid-template-columns:1fr}}

/* v6.6 – tighter speech-bubble typography */
.phonewrap .float{padding:8px 10px}
.phonewrap .float b{margin-bottom:1px;line-height:1.05}
.phonewrap .float span{line-height:1.06}


/* v6.7 – collected refinement round */
/* Slightly calmer hero typography. */
.hero-copy h1{font-size:clamp(37px,4.8vw,58px);line-height:1}

/* Narrower hero device: clearly smartphone proportions. */
.phone{width:184px;min-height:0}

/* Store badge eyebrow text should remain secondary, but clearly readable. */
.phone-store-actions .storebtn small{font-size:9.1px;line-height:1.05}

/* Provider details in the imprint are deliberately understated, while remaining clearly readable. */
.legalcard .provider-details{font-size:12.2px;line-height:1.58}

@media(max-width:1120px){
  .phone{width:180px}
}
@media(max-width:760px){
  .phone{width:190px}
  .hero-copy h1{font-size:clamp(35px,9vw,49px)}
  .phone-store-actions .storebtn small{font-size:8.8px}
}
@media(max-width:500px){
  .phone{width:184px}
}

/* v6.8 – hero device and bubble refinements */
/* Use the available vertical space: the hero device is taller and its top edge sits slightly higher. */
.appshot-phone{transform:rotate(1.1deg) translateY(-12px)}
.appshot-phone .appshot-home{width:100%;height:348px;object-fit:fill}
.phonewrap{min-height:510px}
.phone-center{gap:7px}

/* Speech bubbles: materially tighter typography and less visual area. */
.phonewrap .float{max-width:182px;padding:7px 9px}
.phonewrap .float b{font-size:12px;line-height:.98;margin-bottom:0}
.phonewrap .float span{font-size:10.6px;line-height:.98}
.phonewrap .fa{top:38px}
/* Move App & Web clearly above the store badges. */
.phonewrap .fb{right:-44px;bottom:176px}

/* Occasion tiles: slightly stronger readability without changing their footprint. */
.hero-copy .occasion{font-size:11.5px}

@media(max-width:1120px){
  .appshot-phone .appshot-home{height:340px}
  .phonewrap .fb{right:-18px;bottom:168px}
}
@media(max-width:760px){
  .appshot-phone{transform:rotate(1deg) translateY(-8px)}
  .appshot-phone .appshot-home{height:352px}
  .hero-copy .occasion{font-size:11.3px}
}
@media(max-width:500px){
  .appshot-phone .appshot-home{height:342px}
}


/* v6.9 – hero alignment and recommendation wording refinement */
@media(min-width:1121px){
  .phonewrap{transform:translateX(-24px)}
}
@media(min-width:761px) and (max-width:1120px){
  .phonewrap{transform:translateX(-10px)}
}
@media(max-width:760px){
  .phonewrap{transform:none}
}

/* v6.11 – tighter hero bubbles and a unified subtle right/down shadow for bubble-like UI */
:root{--bubble-shadow:4px 4px 12px rgba(73,67,120,.085)}

/* Make the two hero speech bubbles visibly more compact. */
.phonewrap .float{padding:5px 9px;box-shadow:var(--bubble-shadow)}
.phonewrap .float b{line-height:.94;margin-bottom:0}
.phonewrap .float span{line-height:.94}

/* Consistent light shadow on compact rounded controls and labels. */
.morelink,
.occasion,
.pill,
.storebtn,
.loginbtn,
.btn,
.btn2,
.info{box-shadow:var(--bubble-shadow)}

/* Keep hover feedback restrained and consistent. */
.morelink:hover,
.occasion-link:hover,
.storebtn:hover,
.loginbtn:hover,
.btn:hover,
.btn2:hover,
.info:hover{box-shadow:5px 5px 14px rgba(73,67,120,.11)}

/* v6.12 – preserve app screenshot proportions */
/* The screenshot is no longer stretched to fill the tall phone screen. */
.appshot-phone .appshot-screen{
  height:348px;
  min-height:348px;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  background:linear-gradient(180deg,#fff 0%,#fbfaff 100%);
}
.appshot-phone .appshot-home{
  width:100%;
  height:auto;
  object-fit:contain;
  flex:0 0 auto;
}
.appshot-phone .appshot-screen::after{
  content:"";
  display:block;
  flex:1 1 auto;
  min-height:0;
  background:linear-gradient(180deg,rgba(255,255,255,0),rgba(248,246,255,.55));
}

@media(max-width:1120px){
  .appshot-phone .appshot-screen{height:340px;min-height:340px}
}
@media(max-width:760px){
  .appshot-phone .appshot-screen{height:352px;min-height:352px}
}
@media(max-width:500px){
  .appshot-phone .appshot-screen{height:342px;min-height:342px}
}

/* v6.13 – keep the app bottom navigation anchored to the phone edge */
/* The source preview now contains extra neutral content space above the bottom nav,
   so no UI text or controls need to be stretched. */
.appshot-phone .appshot-screen::after{display:none!important}
.appshot-phone .appshot-home{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center bottom;
  flex:1 1 auto;
}


/* v6.14 – slightly larger proportional app preview while keeping bottom navigation anchored */
.appshot-phone .appshot-home{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center bottom;
}

/* v6.15 – render the regenerated 470×930 app screen proportionally inside the hero phone */
.appshot-phone .appshot-screen{
  height:auto!important;
  min-height:0!important;
  aspect-ratio:470 / 930;
}
.appshot-phone .appshot-home{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center center;
}


/* v6.16 – collected brand refinements */
/* Slightly larger Okkadio brand in the header. */
.brandlogoimg{width:164px;max-height:39px}
.brandsub{font-size:9.8px;margin-left:43px;margin-top:-2px}

/* Subtle brand-color emphasis for Okkadio mentions in normal paragraph text only. */
.brand-inline{color:var(--accent-strong);font-weight:inherit}

@media(max-width:760px){
  .brandlogoimg{width:142px;max-height:36px}
  .brandsub{font-size:8.8px;margin-left:37px}
}

/* v6.17 – mobile-only density and store emphasis refinements */
@media(max-width:760px){
  /* Slightly quieter supporting copy below the hero headline. */
  .hero-copy .lead{
    font-size:14.2px;
    line-height:1.42;
  }

  /* Compact benefit and privacy bubbles without changing their content. */
  .featuregrid5,
  .privacy-grid-v6{
    gap:7px;
  }
  .featuregrid5 .feature,
  .privacy-grid-v6 .privacycard{
    min-height:0;
    padding:11px 12px;
    border-radius:15px;
  }
  .featuregrid5 .feature .icon{
    width:26px;
    height:26px;
    border-radius:9px;
    margin-bottom:6px;
  }
  .featuregrid5 .feature h3,
  .privacy-grid-v6 .privacycard h3{
    font-size:13px;
    margin-bottom:4px;
  }
  .featuregrid5 .feature p,
  .privacy-grid-v6 .privacycard p{
    font-size:10.1px;
    line-height:1.36;
  }

  /* Make the store download controls a stronger mobile focal point. */
  .phone-store-actions{
    width:min(340px,94vw);
    gap:9px;
    padding:7px;
    border-radius:18px;
    background:rgba(234,229,255,.94);
    border-color:#cfc6ef;
    box-shadow:7px 8px 20px rgba(73,67,120,.14);
  }
  .phone-store-actions .storebtn{
    height:60px;
    padding:8px 12px;
    border-radius:14px;
    background:#fff;
    border-color:#c8bee9;
    box-shadow:4px 5px 13px rgba(73,67,120,.11);
  }
  .phone-store-actions .storebtn svg{
    width:30px;
    height:30px;
  }
  .phone-store-actions .storebtn small{
    font-size:9.4px;
  }
  .phone-store-actions .storebtn strong{
    font-size:14px;
  }
}

@media(max-width:500px){
  .hero-copy .lead{font-size:13.8px;line-height:1.4}
  .phone-store-actions{width:min(330px,94vw)}
  .phone-store-actions .storebtn{height:58px;padding:8px 10px}
  .phone-store-actions .storebtn svg{width:28px;height:28px}
  .phone-store-actions .storebtn strong{font-size:13.4px}
}


/* v6.18 – mobile store badge icon and eyebrow text emphasis */
@media(max-width:760px){
  .phone-store-actions .storebtn svg{
    width:34px;
    height:34px;
  }
  .phone-store-actions .storebtn small{
    font-size:10.6px;
    line-height:1.06;
    font-weight:700;
  }
  .phone-store-actions .storebtn strong{
    font-size:14.2px;
  }
}

@media(max-width:500px){
  .phone-store-actions .storebtn svg{
    width:32px;
    height:32px;
  }
  .phone-store-actions .storebtn small{
    font-size:10.1px;
  }
  .phone-store-actions .storebtn strong{
    font-size:13.8px;
  }
}


/* v6.19 – keep Business info icon attached to the final word */
.nowrap-info{white-space:nowrap}
.nowrap-info .info{display:inline-grid;vertical-align:super;margin-left:3px}