/* Okkadio layout layer: geometry retained, /_okkadio-public-20260929-4cbb75fa58bf-fix1/glass-system.css owns materials. */
@layer okkadio-layout {

: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;scrollbar-width:thin;scrollbar-color:#aaa4cf transparent}*::-webkit-scrollbar{width:10px;height:10px}*::-webkit-scrollbar-track{background:transparent;margin:9px}*::-webkit-scrollbar-thumb{border:3px solid transparent;border-radius:999px;background:#aaa4cf;background-clip:padding-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:var(--weight-label)}.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:var(--type-meta);color:var(--muted);font-weight:var(--weight-action);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:var(--type-help);color:var(--muted);font-weight:var(--weight-label)}.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:var(--type-help);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:var(--weight-action);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:var(--weight-action);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:var(--type-help);font-weight:var(--weight-label);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:var(--type-meta);text-transform:uppercase;letter-spacing:.065em;font-weight:var(--weight-action);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:var(--type-body);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:var(--type-control);color:var(--muted);font-weight:var(--weight-action)}.storebtn strong{font-size:var(--type-control);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:var(--type-help);font-weight:var(--weight-label)}.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:var(--type-help);color:#667080;font-weight:var(--weight-label);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:var(--type-help);font-weight:var(--weight-title)}.minisub{font-size:var(--type-help);color:var(--muted)}.minik{margin-top:15px;font-size:var(--type-help);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:var(--weight-label)}.minih{font-size:18.5px;line-height:1.04;letter-spacing:-.04em;font-weight:var(--weight-label);margin-top:5px}.minicopy{font-size:var(--type-help);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:var(--type-help);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:var(--type-control);font-weight:var(--weight-action)}.minipriv{margin-top:6px;background:#f5f4fb;border:1px solid #e8e5f6;border-radius:9px;padding:6px;font-size:var(--type-help);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:var(--type-help);margin-bottom:4px}.float span{font-size:var(--type-help);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:var(--type-meta);text-transform:uppercase;letter-spacing:.09em;font-weight:var(--weight-action);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:var(--type-help);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:var(--type-meta);font-weight:var(--weight-action);color:var(--muted)}.mode h3{font-size:var(--type-card);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:var(--type-help);line-height:1.45;color:var(--muted);margin:0}.checks{display:grid;gap:5px;margin-top:10px}.check{display:flex;gap:7px;font-size:var(--type-help);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:var(--type-help);font-weight:var(--weight-label)}
.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:var(--type-help);font-weight:var(--weight-label);margin-bottom:9px}.feature h3{font-size:var(--type-label);letter-spacing:-.02em;margin:0 0 5px}.feature p{font-size:var(--type-help)}.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:var(--type-help);color:var(--muted);font-weight:var(--weight-label)}.howto-card strong{font-size:var(--type-help);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:var(--type-help);color:var(--muted);font-weight:var(--weight-label)}.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:var(--type-help);margin-bottom:2px}.privacyfact span{display:block;color:var(--muted);font-size:var(--type-help);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:var(--type-help);color:var(--muted);font-weight:var(--weight-label)}.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:var(--type-help);font-weight:var(--weight-label);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:var(--type-help)}.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:var(--type-help);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:var(--type-card);letter-spacing:-.03em;margin:0}.dialog p{color:var(--muted);font-size:var(--type-help);line-height:1.58}.dialog ul{padding-left:20px;color:var(--muted);font-size:var(--type-help);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:var(--weight-label)}.dialoglink{display:inline-flex;margin-top:5px;color:var(--accent);font-size:var(--type-help);font-weight:var(--weight-label)}
/* Content / legal pages */
.contentwrap,.legalwrap{width:min(calc(100% - 40px),920px);margin:45px auto 65px}.back{color:var(--accent);font-size:var(--type-help);font-weight:var(--weight-label)}.contenthero,.legalhead{margin:22px 0 20px}.contenthero h1,.legalhead h1{font-size:clamp(36px,5.5vw,55px);margin:6px 0 10px}.contentlead{font-size:var(--type-help);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:var(--type-body);margin:20px 0 7px}.contentcard p,.contentcard li,.legalcard p,.legalcard li{color:var(--muted);font-size:var(--type-help);line-height:1.65}.contentcard strong,.legalcard strong{color:var(--text)}.contentcard a,.legalcard a{color:var(--accent-strong);font-weight:var(--weight-label)}.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:var(--type-help);margin-bottom:3px}.topic-box span{font-size:var(--type-help);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:var(--type-help);color:var(--muted);font-weight:var(--weight-label)}.notice{border:1px solid #e6d9b6;background:#fff9eb;border-radius:17px;padding:15px 16px;color:#6d6042;font-size:var(--type-help);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:var(--type-meta)}.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}}

/* Block 20 – quieter, more legible topic-page system */
.topic-page{
  background:#f6f6fb;
  color:var(--text);
}
.topic-page .nav{
  background:rgba(249,249,252,.96);
  border-color:#dedfea;
}
.topic-page .contentwrap{
  width:min(calc(100% - 48px),1040px);
  margin:32px auto 76px;
}
.topic-page .contenthero{
  position:relative;
  overflow:hidden;
  margin:0 0 22px;
  padding:52px 48px 48px;
  border:1px solid #ddd9ef;
  border-radius:26px;
  background:
    radial-gradient(circle at 88% 14%,rgba(117,111,198,.14),transparent 18rem),
    linear-gradient(145deg,#fff 0%,#f1effb 100%);
}
.topic-page.topic-reminder .contenthero{
  background:
    radial-gradient(circle at 88% 14%,rgba(47,125,99,.12),transparent 18rem),
    linear-gradient(145deg,#fff 0%,#f0f7f4 100%);
}
.topic-page.topic-business .contenthero{
  background:
    radial-gradient(circle at 88% 14%,rgba(68,91,117,.13),transparent 18rem),
    linear-gradient(145deg,#fff 0%,#eef3f7 100%);
}
.topic-page .contenthero::after{
  content:"";
  position:absolute;
  right:48px;
  bottom:-54px;
  width:170px;
  height:170px;
  border:1px solid rgba(117,111,198,.17);
  border-radius:50%;
  box-shadow:0 0 0 24px rgba(117,111,198,.035),0 0 0 52px rgba(117,111,198,.025);
  pointer-events:none;
}
.topic-page .contenthero>*{position:relative;z-index:1}
.topic-page .contenthero h1{
  max-width:850px;
  margin:10px 0 14px;
  font-size:clamp(39px,5.1vw,58px);
  line-height:1.02;
  letter-spacing:-.047em;
}
.topic-page .contentlead{
  max-width:800px;
  margin:0;
  color:#596476;
  font-size:var(--type-body);
  line-height:1.62;
}
.topic-page .contentcard{
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.topic-page .contentcard>p .brand-inline,
.topic-page .faq-item .brand-inline{color:inherit;font-weight:var(--weight-label)}
.topic-page .contentcard>h2:has(+ p){
  margin:14px 0 0;
  padding:22px 24px 6px;
  border:1px solid #e0e2eb;
  border-bottom:0;
  border-left:4px solid #b8b2e4;
  border-radius:17px 17px 0 0;
  background:#fff;
  font-size:var(--type-card);
  line-height:1.3;
}
.topic-page.topic-reminder .contentcard>h2:has(+ p){border-left-color:#8ab6a5}
.topic-page.topic-business .contentcard>h2:has(+ p){border-left-color:#9eb1c2}
.topic-page .contentcard>h2:has(+ p):nth-of-type(even),
.topic-page .contentcard>h2:has(+ p):nth-of-type(even)+p{background:#f2f0f9}
.topic-page .contentcard>h2+p{
  margin:0 0 14px;
  padding:4px 24px 22px;
  border:1px solid #e0e2eb;
  border-top:0;
  border-left:4px solid #b8b2e4;
  border-radius:0 0 17px 17px;
  background:#fff;
  color:#5d6777;
  font-size:var(--type-label);
  line-height:1.65;
}
.topic-page.topic-reminder .contentcard>h2+p{border-left-color:#8ab6a5}
.topic-page.topic-business .contentcard>h2+p{border-left-color:#9eb1c2}
.topic-page .content-cta{
  margin:24px 0;
  padding:24px;
  border:0;
  border-radius:19px;
  background:#292740;
  color:#fff;
  box-shadow:0 15px 38px rgba(40,38,63,.14);
}
.topic-page .content-cta h3{margin:0 0 6px;color:#fff;font-size:18px}
.topic-page .content-cta p{color:#d6d3e2;font-size:var(--type-label);line-height:1.55}
.topic-page .content-cta .brand-inline{color:#c9c4ff}
.topic-page .content-cta .morelink{
  border-color:rgba(255,255,255,.2);
  background:#756fc6;
  color:#fff;
  box-shadow:none;
}
.topic-page .contentcard>h2:has(+ .faq-grid),
.topic-page .contentcard>h2:has(+ .topic-grid){
  margin:38px 0 13px;
  padding:0;
  border:0;
  background:transparent;
  font-size:27px;
}
.topic-page .faq-grid{gap:13px;margin:0}
.topic-page .faq-item{
  padding:20px;
  border-color:#dcdde8;
  border-radius:17px;
  background:#eeedf6;
}
.topic-page .faq-item h3{margin:0 0 8px;font-size:var(--type-body);line-height:1.4}
.topic-page .faq-item p{font-size:.9375rem!important;line-height:1.6!important}
.topic-page .topic-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0}
.topic-page .topic-box{
  min-height:112px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:18px;
  border-color:#dddfea;
  border-radius:17px;
  background:#fff;
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease;
}
.topic-page .topic-box:hover{
  transform:translateY(-2px);
  border-color:#bdb8df;
  box-shadow:0 10px 25px rgba(52,48,94,.08);
}
.topic-page .topic-box strong{font-size:var(--type-label)}
.topic-page .topic-box span{font-size:var(--type-help);line-height:1.45}
.topic-page .footer{
  border-top:1px solid #e0e2ea;
  background:#fff;
  font-size:var(--type-help);
}
.topic-page :focus-visible{outline:3px solid #756fc6;outline-offset:3px}

@media(max-width:760px){
  .topic-page .contentwrap{width:min(calc(100% - 26px),1040px);margin:20px auto 52px}
  .topic-page .contenthero{padding:34px 22px 31px;border-radius:20px}
  .topic-page .contenthero::after{right:10px;bottom:-85px}
  .topic-page .contenthero h1{font-size:clamp(35px,10.4vw,48px)}
  .topic-page .contentlead{font-size:var(--type-help);line-height:1.56}
  .topic-page .contentcard>h2:has(+ p){padding:19px 18px 5px;font-size:18px}
  .topic-page .contentcard>h2+p{padding:4px 18px 19px;font-size:var(--type-label)}
  .topic-page .content-cta{align-items:flex-start;padding:21px}
  .topic-page .contentcard>h2:has(+ .faq-grid),.topic-page .contentcard>h2:has(+ .topic-grid){font-size:var(--type-section)}
  .topic-page .topic-grid{grid-template-columns:1fr}
}


/* 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:var(--type-help);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:var(--type-help)}.float span{font-size:var(--type-help);line-height:1.42}.fa{left:-4px;top:56px}.fb{right:-4px;bottom:72px}
.section{padding:39px 0}.section .eyebrow{font-size:var(--type-meta);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:var(--type-label)}.featuregrid5 .feature p{font-size:var(--type-help)}
.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:var(--type-body);margin:4px 0 4px}.pro-copy p{font-size:var(--type-help);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:var(--type-help);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:var(--type-label);margin:0 0 6px;letter-spacing:-.02em}.privacycard p{font-size:var(--type-help);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:var(--type-help);font-weight:var(--weight-label);margin-bottom:9px}.step-card h3{font-size:var(--type-label)!important;margin:0 0 5px!important}.step-card p{font-size:var(--type-help)!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:var(--type-label);margin:0 0 3px}.content-cta p{font-size:var(--type-help);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:var(--type-help);margin:0 0 5px}.faq-item p{font-size:var(--type-help)!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:var(--type-meta)}.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:var(--type-help);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:var(--type-help);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:var(--type-help)}

@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:var(--type-help)}
}
@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:var(--type-meta);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:var(--type-meta);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:var(--type-help);
    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:var(--type-help);
    margin-bottom:4px;
  }
  .featuregrid5 .feature p,
  .privacy-grid-v6 .privacycard p{
    font-size:var(--type-help);
    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:var(--type-control);
  }
}

@media(max-width:500px){
  .hero-copy .lead{font-size:var(--type-help);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:var(--weight-action);
  }
  .phone-store-actions .storebtn strong{
    font-size:var(--type-control);
  }
}

@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}

/* v7.7 – direct auth, anonymous quick search and shared local info popover */
.hidden{display:none!important}
.registerlink{font-size:var(--type-help);font-weight:var(--weight-label);color:var(--accent-strong);padding:9px 4px}.registerlink:hover{text-decoration:underline}
.loginbtn{display:inline-flex;align-items:center;justify-content:center}
.site-info-popover{position:fixed;z-index:120;width:min(350px,calc(100vw - 24px));max-height:min(440px,calc(100vh - 24px));overflow:auto;background:#fff;border:1px solid #cfc9eb;border-radius:15px;padding:14px 15px;box-shadow:0 18px 50px rgba(34,42,58,.18);font-size:var(--type-help);line-height:1.5;color:var(--muted);outline:none}
.site-info-popover::before{content:"";position:absolute;top:-6px;left:var(--arrow-left,24px);width:10px;height:10px;transform:rotate(45deg);background:#fff;border-left:1px solid #cfc9eb;border-top:1px solid #cfc9eb}
.site-info-popover>strong{display:block;color:var(--text);font-size:var(--type-label);margin-bottom:4px}.site-info-popover p{margin:6px 0}.site-info-popover ul{padding-left:18px;margin:7px 0}.site-info-popover .dialoglink{margin-top:3px}
.quick-search-section{background:linear-gradient(145deg,rgba(240,237,255,.84),rgba(255,255,255,.82));border-block:1px solid var(--border);scroll-margin-top:70px}
.quick-search-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(460px,1.15fr);gap:28px;align-items:start}.quick-search-card{padding:19px;box-shadow:0 16px 42px rgba(73,67,120,.08)}
.quick-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.quick-form-grid label{display:grid;gap:5px;color:var(--text);font-size:var(--type-help);font-weight:var(--weight-label)}.quick-form-grid .wide{grid-column:1/-1}
.quick-form-grid input,.quick-form-grid select,.quick-form-grid textarea{width:100%;border:1px solid var(--border);border-radius:11px;background:#fff;color:var(--text);padding:10px;font:inherit;font-size:var(--type-control);resize:vertical}
.quick-form-grid input:focus,.quick-form-grid select:focus,.quick-form-grid textarea:focus{outline:2px solid rgba(117,111,198,.22);border-color:var(--accent)}
.public-select-control{position:relative;display:block;width:100%}.public-select-native{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:0!important;opacity:0!important;pointer-events:none!important}.public-select-trigger{position:relative;display:flex;align-items:center;width:100%;min-height:42px;padding:9px 36px 9px 11px;border:1px solid var(--border);border-radius:999px;background:#fff;color:var(--text);font:inherit;font-size:var(--type-control);text-align:left;cursor:pointer}.public-select-trigger::after{content:"";position:absolute;right:14px;top:50%;width:7px;height:7px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:translateY(-68%) rotate(45deg)}.public-select-control.is-open .public-select-trigger{outline:2px solid rgba(117,111,198,.22);border-color:var(--accent)}.public-select-control.is-open .public-select-trigger::after{transform:translateY(-25%) rotate(225deg)}.public-select-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.public-select-menu{position:fixed;z-index:150;display:grid;gap:3px;overflow-y:auto;padding:7px;border:1px solid var(--border);border-radius:16px;background:#fff;box-shadow:var(--shadow)}.public-select-option{width:100%;min-height:38px;padding:9px 11px;border:0;border-radius:11px;background:transparent;color:var(--text);font:inherit;font-size:var(--type-control);text-align:left;cursor:pointer}.public-select-option:hover,.public-select-option:focus-visible{background:var(--soft);outline:none}.public-select-option[aria-selected="true"]{background:var(--soft);color:var(--accent-strong);font-weight:var(--weight-action)}.public-select-option:disabled{cursor:not-allowed;color:var(--muted);opacity:.6}
.quick-submit{width:100%;margin-top:12px;cursor:pointer}.quick-submit:disabled{opacity:.6;cursor:wait}.quick-status{min-height:18px;margin-top:8px;font-size:var(--type-help);color:var(--green);font-weight:var(--weight-label)}.quick-status.is-error{color:#a03f52}
.quick-trust{display:grid;gap:6px;margin-top:15px}.quick-trust span{position:relative;padding-left:19px;color:var(--muted);font-size:var(--type-help);font-weight:var(--weight-label)}.quick-trust span::before{content:"✓";position:absolute;left:0;color:var(--green);font-weight:var(--weight-label)}
.public-results{scroll-margin-top:84px;margin-top:22px}.public-results:empty{display:none}.public-results-head{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:12px}.public-results-head h3{margin:4px 0;font-size:22px}
.public-result-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.public-result-card{display:flex;flex-direction:column;gap:8px;min-height:205px}.public-result-card h3{font-size:var(--type-label);margin:0}.public-result-card p{font-size:var(--type-help);line-height:1.45}
.public-result-top{display:flex;justify-content:space-between;align-items:center;gap:7px}.public-result-label{padding:4px 7px;border-radius:999px;background:#fff4dc;color:#775d24;font-size:var(--type-help);font-weight:var(--weight-label)}.public-price{font-size:17px}
.public-product-meta{display:flex;gap:5px;flex-wrap:wrap;margin-top:auto}.public-product-meta span{font-size:var(--type-help);color:var(--muted);background:var(--surface2);border-radius:7px;padding:4px 6px}
.quick-no-result,.quick-save-note{border:1px solid var(--border);border-radius:15px;background:#fff;padding:15px}.quick-no-result p{color:var(--muted);font-size:var(--type-help)}.quick-save-note{display:flex;justify-content:space-between;gap:12px;margin-top:12px;background:#f8f6ff;font-size:var(--type-help)}.quick-save-note span{color:var(--muted)}
.sponsored-public{margin-top:22px;padding-top:16px;border-top:1px dashed #cfc9eb}.sponsored-public>.eyebrow{display:block;margin-bottom:9px}
@media(max-width:1040px){.quick-search-grid{grid-template-columns:1fr;gap:17px}.public-result-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:500px){.navright{gap:6px}.registerlink{font-size:var(--type-help);padding-inline:2px}.loginbtn{padding-inline:11px}.quick-form-grid,.public-result-grid{grid-template-columns:1fr}.quick-form-grid .wide{grid-column:auto}.public-results-head,.quick-save-note{display:grid}.public-results-head .btn{width:100%}}

/* Block 23 – shared audience navigation, editorial pages and interactive information. */
[hidden]{display:none!important}
.skip-link{position:fixed;left:18px;top:12px;z-index:300;transform:translateY(-160%);border-radius:10px;background:#1d2330;color:#fff;padding:12px 16px;font-size:var(--type-label);font-weight:var(--weight-label)}
.skip-link:focus{transform:translateY(0)}
.nav-ready .navin{position:relative;gap:18px;min-height:76px}
.nav-ready .navright{gap:16px}
.nav-ready .links{display:flex;align-items:center;gap:16px}
.audience-group{position:relative}
.audience-trigger{display:flex;align-items:center;gap:7px;min-height:44px;padding:8px 0;border:0;background:transparent;color:#454b60;font-size:var(--type-label);font-weight:var(--weight-label);cursor:pointer}
.audience-trigger>span{display:inline-block;transition:transform .18s ease;font-size:17px}
.audience-trigger[aria-expanded="true"]{color:#4f48a3}
.audience-trigger[aria-expanded="true"]>span{transform:rotate(180deg)}
.nav-ready .links .audience-direct{min-height:44px;display:flex;align-items:center;font-size:var(--type-label);padding:8px 0;font-weight:var(--weight-label)}
.audience-panel{position:absolute;top:100%;left:0;z-index:50;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);width:min(570px,calc(100vw - 32px));max-height:calc(100dvh - 100px);overflow:auto;padding:10px;gap:16px;border:1px solid #d9d5e9;border-radius:18px;background:#fff;box-shadow:0 20px 55px rgba(40,37,69,.17);animation:audienceOpen .2s ease}
@keyframes audienceOpen{from{opacity:0}to{opacity:1}}
.audience-benefit{display:flex;flex-direction:column;justify-content:center;border-radius:12px;background:#f0edff;padding:22px 18px}
.audience-benefit--business{background:#eaf1f7}
.audience-benefit>.eyebrow{font-size:var(--type-meta);line-height:1.5;color:#544ca4}
.audience-benefit>strong{display:block;margin:14px 0 8px;font-size:21px;line-height:1.23;letter-spacing:-.025em;color:#26263b}
.audience-benefit p{margin:0;font-size:var(--type-label);line-height:1.5;color:#5c6576}
.audience-section-label{display:block;margin:10px 8px 9px;font-size:var(--type-help);font-weight:var(--weight-label);color:#687182;text-transform:uppercase;letter-spacing:.045em}
.nav-ready .links .audience-tasks>a{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px;padding:10px 8px;border-radius:8px;font-size:var(--type-label);font-weight:var(--weight-label);color:#323446}
.nav-ready .links .audience-tasks>a:hover,.nav-ready .links .audience-tasks>a:focus-visible{background:#f1eff9}
.nav-ready .links .audience-panel a::after{content:none}
.audience-secondary{display:grid;gap:4px;margin-top:12px;padding:12px 8px 5px;border-top:1px solid #e4e2eb}
.nav-ready .links .audience-secondary a{padding:4px 0;font-size:var(--type-help);font-weight:var(--weight-label);color:#5c6576;line-height:1.4}
.public-menu-toggle{display:none;align-items:center;justify-content:center;min-height:44px;padding:8px 12px;border:1px solid #d8d3e9;border-radius:11px;background:#fff;color:#514b86;font-size:var(--type-label);font-weight:var(--weight-label);cursor:pointer}
.nav-ready :focus-visible{outline:3px solid #756fc6;outline-offset:3px}
.site-popover-heading{display:flex;align-items:start;justify-content:space-between;gap:15px;margin-bottom:10px;color:var(--text)}
.site-popover-heading strong{font-size:var(--type-body);line-height:1.3}
.site-popover-heading button{flex:none;width:34px;height:34px;border:1px solid #d9d5e9;border-radius:10px;background:#f7f6fc;color:#514b86;cursor:pointer}
.site-info-popover{font-size:var(--type-label);overscroll-behavior:contain}
.site-info-popover .dialoglink{font-size:var(--type-label);min-height:32px;align-items:center}
.site-info-popover:focus-visible,.site-info-popover :focus-visible{outline:3px solid #756fc6;outline-offset:3px}
.public-select-trigger,.public-select-option{font-size:var(--type-control)}
.topic-page .editorial-scenario{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.8fr);gap:36px;padding:32px 0 38px;margin:0 0 18px;border-bottom:1px solid #dcdde7}
.editorial-scenario h2{margin:13px 0 12px;font-size:28px;line-height:1.15;letter-spacing:-.025em}
.editorial-scenario p{max-width:620px;margin:0;color:#596476;font-size:var(--type-body);line-height:1.65}
.editorial-checklist{display:grid;align-content:center;gap:14px;list-style:none;margin:0;padding:24px;border-radius:18px;background:#eeebf9}
.editorial-checklist li{position:relative;padding-left:24px;color:#4d4867;font-size:var(--type-label);line-height:1.4;font-weight:var(--weight-label)}
.editorial-checklist li::before{content:"→";position:absolute;left:0;color:#5b53a6}
.topic-business .editorial-checklist{background:#e7eff5}
.topic-reminder .editorial-checklist{background:#e7f2ec}
.topic-page .editorial-section{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.3fr);gap:52px;padding:36px 0;border-bottom:1px solid #dedee9}
.topic-page .editorial-section:last-of-type{border-bottom:0}
.topic-page .editorial-section h2{margin:10px 0 0;font-size:29px;line-height:1.15;letter-spacing:-.027em}
.topic-page .editorial-section h3{margin:0 0 9px;font-size:18px;line-height:1.3}
.topic-page .editorial-section p{margin:0 0 23px;color:#596476;font-size:var(--type-body);line-height:1.7}
.topic-page .editorial-section p:last-child{margin-bottom:0}
.topic-page .content-cta .morelink{background:#625bb8}
.topic-page .editorial-section .brand-inline{color:inherit;font-weight:var(--weight-label)}
@media(max-width:1120px){
  .nav-ready .public-menu-toggle{display:inline-flex}
  .nav-ready .links{position:absolute;top:100%;left:0;right:0;display:none;max-height:calc(100dvh - 94px);overflow:auto;align-items:stretch;gap:0;padding:12px 16px 16px;border:1px solid #d9d5e9;border-radius:0 0 18px 18px;background:#fff;box-shadow:0 16px 38px rgba(40,37,69,.13)}
  .nav-ready.public-menu-open .links{display:flex;flex-direction:column}
  .audience-trigger{width:100%;justify-content:space-between;font-size:var(--type-body);min-height:48px}
  .audience-panel{position:relative;top:auto;left:auto;width:100%;max-height:none;grid-template-columns:1fr;border-radius:12px;box-shadow:none;gap:6px;margin:0 0 6px;padding:10px;background:#fbfaff;animation:none}
  .audience-benefit{display:none}
  .audience-tasks{min-width:0}
  .nav-ready .links .audience-direct{min-height:48px;font-size:var(--type-body)}
  .nav-ready .links .audience-tasks>a{font-size:var(--type-label)}
  .audience-secondary{grid-template-columns:1fr 1fr;gap:8px}
}
@media(max-width:620px){
  .nav-ready .navin{gap:8px;min-height:70px;flex-wrap:wrap;padding:10px 0}
  .nav-ready .brandlogoimg{width:126px}
  .nav-ready .brandsub{font-size:var(--type-meta);margin-left:34px}
  .nav-ready .navright{gap:7px}
  .nav-ready .public-menu-toggle{font-size:var(--type-help);padding:7px 10px;min-height:40px}
  .nav-ready .registerlink{font-size:var(--type-help);min-height:40px;padding:8px 10px}
  .nav-ready .loginlink,.nav-ready .loginbtn{font-size:var(--type-control);min-height:40px;padding:6px 4px}
  .topic-page .editorial-scenario,.topic-page .editorial-section{grid-template-columns:1fr;gap:20px;padding:26px 0}
  .editorial-scenario h2,.topic-page .editorial-section h2{font-size:26px}
  .editorial-checklist{padding:21px}
  .topic-page .editorial-section p{font-size:var(--type-body)}
}
@media(max-width:440px){
  .nav-ready .navin{justify-content:center}
  .nav-ready .brand{margin-right:auto}
  .nav-ready .navright{flex-wrap:wrap;justify-content:flex-end;gap:7px;width:auto}
  .home-redesign .nav-ready .registerlink.primary-nav-action{min-height:40px;padding:6px 9px;font-size:var(--type-help)}
  .nav-ready .brandlogoimg{width:105px}
  .nav-ready .brandsub{display:none}
  .nav-ready .public-menu-toggle{font-size:var(--type-help);padding:6px 8px}
  .nav-ready .loginlink{font-size:var(--type-help)}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.audience-panel{animation:none}.audience-trigger>span{transition:none}}

}