:root{
  color-scheme:light dark;

  /* Primitives — oklch brand palette */
  --p-indigo-950:oklch(21% 0.12 272);
  --p-indigo-800:oklch(35% 0.18 272);
  --p-indigo-600:oklch(49% 0.20 272);
  --p-indigo-500:oklch(56% 0.22 272);
  --p-indigo-200:oklch(90% 0.06 272);
  --p-indigo-100:oklch(95% 0.03 272);
  --p-indigo-50:oklch(97% 0.02 272);
  --p-slate-500:oklch(46% 0.02 240);
  --p-slate-200:oklch(93% 0.01 250);
  --p-white:oklch(100% 0 0);
  --p-green-600:oklch(57% 0.17 165);
  --p-red-600:oklch(53% 0.22 25);

  /* Spacing scale (base 4px) */
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-8:32px;--sp-10:40px;--sp-12:48px;

  /* Semantic tokens — hex values for light mode (accessibility check compatible) */
  --ink:#1e1b4b;
  --muted:#5e6878;
  --line:#e5e7eb;
  --paper:#f5f4ff;
  --surface:#ffffff;
  --accent:#5254eb;
  --accent-strong:#4338ca;
  --accent-dark:#312e81;
  --soft:#eef2ff;
  --success:#059669;
  --danger:#dc2626;
  --focus:#5254eb;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    /* Override primitives for dark mode */
    --p-indigo-950:oklch(90% 0.04 272);
    --p-indigo-800:oklch(78% 0.10 272);
    --p-indigo-600:oklch(68% 0.16 272);
    --p-indigo-500:oklch(72% 0.20 272);
    --p-indigo-200:oklch(40% 0.08 272);
    --p-indigo-100:oklch(22% 0.06 272);
    --p-indigo-50:oklch(25% 0.05 272);
    --p-slate-500:oklch(65% 0.02 240);
    --p-slate-200:oklch(28% 0.02 250);
    --p-white:oklch(18% 0.03 272);

    /* Semantic token overrides for dark mode — direct values (no hex, use oklch) */
    --ink:oklch(90% 0.04 272);
    --muted:oklch(65% 0.02 240);
    --line:oklch(28% 0.02 250);
    --paper:oklch(14% 0.04 272);
    --surface:oklch(18% 0.03 272);
    --accent:oklch(72% 0.20 272);
    --accent-strong:oklch(68% 0.16 272);
    --accent-dark:oklch(78% 0.10 272);
    --soft:oklch(22% 0.06 272);
    --focus:oklch(72% 0.20 272);
  }
}

:root[data-theme="dark"]{
  --p-indigo-950:oklch(90% 0.04 272);
  --p-indigo-800:oklch(78% 0.10 272);
  --p-indigo-600:oklch(68% 0.16 272);
  --p-indigo-500:oklch(72% 0.20 272);
  --p-indigo-200:oklch(40% 0.08 272);
  --p-indigo-100:oklch(22% 0.06 272);
  --p-indigo-50:oklch(25% 0.05 272);
  --p-slate-500:oklch(65% 0.02 240);
  --p-slate-200:oklch(28% 0.02 250);
  --p-white:oklch(18% 0.03 272);
  --ink:oklch(90% 0.04 272);
  --muted:oklch(65% 0.02 240);
  --line:oklch(28% 0.02 250);
  --paper:oklch(14% 0.04 272);
  --surface:oklch(18% 0.03 272);
  --accent:oklch(72% 0.20 272);
  --accent-strong:oklch(68% 0.16 272);
  --accent-dark:oklch(78% 0.10 272);
  --soft:oklch(22% 0.06 272);
  --focus:oklch(72% 0.20 272);
}

*{box-sizing:border-box}

body{margin:0;font-family:"Source Sans 3","Source Sans Pro",ui-sans-serif,system-ui,-apple-system,sans-serif;color:var(--ink);background:radial-gradient(1400px 600px at 80% -5%,var(--soft) 0%,transparent 55%),radial-gradient(900px 400px at 5% 3%,var(--p-indigo-100) 0%,transparent 50%),var(--paper);line-height:1.58;min-height:100dvh}

h1,h2,h3,.brand,button,.button{font-family:"Manrope",ui-sans-serif,system-ui,sans-serif}

.skip-link{position:absolute;left:16px;top:-48px;z-index:40;padding:10px 16px;border-radius:10px;background:var(--surface);color:var(--ink);border:2px solid var(--focus);text-decoration:none;font-weight:700;transition:top .15s}
.skip-link:focus-visible{top:12px}

.site-header{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:16px;padding:0 clamp(16px,4vw,56px);height:62px;background:oklch(21% 0.12 272 / .88);backdrop-filter:blur(14px) saturate(1.8);-webkit-backdrop-filter:blur(14px) saturate(1.8);border-bottom:1px solid oklch(56% 0.22 272 / .25)}

.brand{display:flex;align-items:center;gap:10px;font-weight:800;color:var(--p-white);text-decoration:none;letter-spacing:-.015em;font-size:1.05rem;white-space:nowrap;flex-shrink:0}
.brand span{display:inline}
.brand-icon{width:28px;height:28px;flex-shrink:0}

nav[role="tablist"]{display:flex;gap:2px;flex:1;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;min-width:0}
nav[role="tablist"]::-webkit-scrollbar{display:none}

.tab-btn{display:inline-flex;align-items:center;gap:5px;padding:7px 12px;border-radius:7px;border:none;background:transparent;color:oklch(100% 0 0 / .6);font-family:"Manrope",sans-serif;font-weight:600;font-size:.85rem;cursor:pointer;white-space:nowrap;transition:background .15s,color .15s;flex-shrink:0}
.tab-btn:hover{background:oklch(56% 0.22 272 / .2);color:var(--p-white)}
.tab-btn.active,.tab-btn[aria-selected="true"]{background:oklch(56% 0.22 272 / .28);color:var(--p-white);box-shadow:inset 0 0 0 1px oklch(72% 0.18 272 / .4)}
.tab-btn svg{width:14px;height:14px;flex-shrink:0}

.seo-nav-link{color:oklch(100% 0 0 / .65);text-decoration:none;font-size:.875rem;font-weight:600;padding:6px 10px;border-radius:7px;transition:color .15s,background .15s}
.seo-nav-link:hover{color:var(--p-white);background:oklch(56% 0.22 272 / .2)}

.language{color:oklch(100% 0 0 / .75);text-decoration:none;font-weight:700;font-size:.78rem;letter-spacing:.04em;text-transform:uppercase;padding:6px 12px;border-radius:7px;border:1px solid oklch(56% 0.22 272 / .45);white-space:nowrap;flex-shrink:0;transition:background .15s,color .15s}
.language:hover{background:oklch(56% 0.22 272 / .25);color:var(--p-white)}

.hero{padding:clamp(36px,6vw,72px) clamp(18px,6vw,88px) clamp(28px,4vw,48px);max-width:1180px;margin:auto;text-align:center}
.article-hero{text-align:left;padding-bottom:28px;max-width:1180px;margin:auto;padding-left:clamp(18px,6vw,88px);padding-right:clamp(18px,6vw,88px)}

.badge{display:inline-flex;align-items:center;gap:6px;padding:5px 14px;border-radius:100px;background:var(--soft);border:1px solid var(--p-indigo-200);color:var(--accent-strong);font-weight:700;font-size:.76rem;text-transform:uppercase;letter-spacing:.07em;margin-bottom:16px}

.kicker{color:var(--accent-strong);font-weight:800;text-transform:uppercase;letter-spacing:.07em;font-size:.76rem;margin:0 0 6px}

h1{font-size:clamp(2rem,4.5vw,4rem);line-height:1.05;margin:0 auto 16px;max-width:900px;letter-spacing:-.02em}
h2{font-size:clamp(1.35rem,2.4vw,2rem);line-height:1.2;margin:0 0 14px;letter-spacing:-.015em}

.lead{font-size:clamp(.98rem,1.7vw,1.2rem);max-width:760px;color:var(--muted);margin:0 auto 24px}
.lead-sm{font-size:1rem;color:var(--muted);margin:6px 0 20px;line-height:1.6}

.actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:24px}

.trust-bar{display:flex;gap:7px;flex-wrap:wrap;justify-content:center}
.trust-bar span{display:inline-flex;align-items:center;gap:5px;padding:4px 12px;border-radius:100px;background:var(--surface);border:1px solid var(--line);font-size:.78rem;font-weight:600;color:var(--muted)}
.trust-bar span::before{content:"✓";color:var(--success);font-weight:800}

.button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 22px;border-radius:10px;text-decoration:none;font-family:"Manrope",sans-serif;font-weight:700;font-size:.9rem;border:0;cursor:pointer;transition:transform .15s,box-shadow .15s,opacity .15s}
.button:hover{transform:translateY(-1px)}
.button:active{transform:translateY(0)}

.primary{background:linear-gradient(135deg,var(--accent) 0%,var(--accent-strong) 100%);color:#fff;box-shadow:0 4px 14px oklch(56% 0.22 272 / .4)}
.primary:hover{box-shadow:0 6px 20px oklch(56% 0.22 272 / .5)}

.secondary{border:1.5px solid var(--line);color:var(--ink);background:var(--surface);box-shadow:0 2px 6px oklch(21% 0.12 272 / .06)}

.ghost{background:oklch(56% 0.22 272 / .08);border:1.5px solid oklch(56% 0.22 272 / .28);color:var(--accent-strong)}
.ghost:hover{background:oklch(56% 0.22 272 / .14)}

.tab-panels{max-width:1180px;margin:0 auto;padding:0 clamp(18px,6vw,88px) 56px}
.view-panel{display:none}
.view-panel.active{display:block}

.panel-header{margin-bottom:24px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.panel-split{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:28px}

.diagnostic-form{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:26px;box-shadow:0 2px 12px oklch(21% 0.12 272 / .05);display:grid;gap:10px}
.diagnostic-form fieldset{margin:0;padding:0;border:0;display:grid;gap:8px}
.diagnostic-form legend{font-weight:700;font-size:.95rem;margin-bottom:4px;font-family:"Manrope",sans-serif}

.diagnostic-item{display:grid;grid-template-columns:20px minmax(0,1fr);gap:10px;align-items:start;padding:9px 10px;border-radius:8px;border:1px solid transparent;cursor:pointer;transition:background .15s,border-color .15s}
.diagnostic-item:hover{background:var(--soft);border-color:var(--p-indigo-200)}
.diagnostic-item input[type=checkbox]{margin-top:3px;accent-color:var(--accent);width:16px;height:16px;cursor:pointer}

output{margin-top:12px;padding:12px 16px;border-radius:10px;font-weight:800;color:var(--accent-strong);background:var(--soft);border:1px solid var(--p-indigo-200);display:block;font-size:.95rem}

.checklist{padding-left:22px;margin:0 0 20px}
.checklist li,.timeline li{margin:9px 0;line-height:1.55}
.columns{columns:2;column-gap:36px}

.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:8px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:22px;box-shadow:0 2px 10px oklch(21% 0.12 272 / .05);transition:box-shadow .2s,transform .2s}
.card:hover{box-shadow:0 8px 28px oklch(56% 0.22 272 / .1);transform:translateY(-2px)}
.card h3{margin:0 0 10px;font-size:1rem}
.card p{margin:0 0 8px;color:var(--muted);font-size:.9rem}
.card p:last-child{margin:0}

.vop-tool{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:26px;margin-top:22px;box-shadow:0 2px 12px oklch(21% 0.12 272 / .05)}
.vop-tool h3{margin:0 0 8px}
.vop-tool>p{margin:0 0 18px;color:var(--muted)}
.vop-form{display:grid;gap:14px}

.vop-form label,.contact-form label{display:grid;gap:5px;font-weight:600;font-size:.88rem}
.vop-form input,.contact-form input,.contact-form textarea{width:100%;padding:11px 14px;border:1.5px solid var(--line);border-radius:8px;font:inherit;font-size:.95rem;color:var(--ink);background:var(--surface);transition:border-color .15s,box-shadow .15s}
.vop-form input:focus,.contact-form input:focus,.contact-form textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px oklch(56% 0.22 272 / .1);outline:none}
.vop-form button{width:max-content}

#vop-check-status,#contact-status{min-height:22px;margin:0;font-weight:700;color:var(--accent-strong);font-size:.9rem}


.monetization{background:var(--soft);border:1px solid var(--p-indigo-200);border-radius:16px;padding:20px;display:grid;gap:12px;align-content:start}
.mono-label{margin:0;font-size:.88rem;color:var(--muted);line-height:1.5}
.partner-list{display:grid;gap:10px;padding:0;margin:0;list-style:none}
.partner-list li{display:grid;gap:3px}
.partner-link{font-weight:700;color:var(--ink);text-decoration:none}
.partner-link:hover{color:var(--accent)}
.partner-list span{color:var(--muted);font-size:.86rem}

.contact-form{display:grid;gap:14px;max-width:680px}
.contact-form textarea{resize:vertical;min-height:120px}
.contact-form button{width:max-content}

.hp-field{position:absolute;left:-9999px;opacity:0;pointer-events:none}

.timeline{display:grid;gap:8px;padding-left:22px;margin:0 0 8px}
.guide-section{margin-top:28px;padding-top:24px;border-top:1px solid var(--line)}

.seo-content{max-width:1180px;margin:0 auto;padding:28px clamp(18px,6vw,88px)}
.seo-cta-section{background:var(--soft);border-top:1px solid var(--p-indigo-200)}

.consent{position:fixed;left:16px;right:16px;bottom:16px;z-index:30;display:flex;gap:16px;align-items:center;justify-content:space-between;max-width:880px;margin:auto;padding:14px 18px;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:0 16px 40px oklch(21% 0.12 272 / .12)}
.consent-text{flex:1}
.consent-text strong{font-family:"Manrope",sans-serif;font-size:.92rem}
.consent-text p{margin:4px 0 0;color:var(--muted);font-size:.86rem}
.consent-actions{display:flex;gap:8px;flex-shrink:0}
.consent.is-hidden{display:none}

footer{padding:24px clamp(18px,6vw,88px);border-top:1px solid var(--line);color:var(--muted);max-width:1180px;margin:auto;font-size:.86rem;line-height:1.7}
footer a{color:var(--muted);text-decoration:none}
footer a:hover{color:var(--ink)}

.ad-unit{margin:22px 0 4px;border-top:1px solid var(--line);padding-top:12px}
.ad-label{margin:0 0 6px;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700}
.adsbygoogle{display:block;min-height:120px;width:100%;background:var(--soft);border-radius:10px}
.methodology{margin-top:24px;border:1px solid var(--line);border-radius:12px;padding:14px 18px;background:var(--surface)}
.methodology summary{cursor:pointer;font-family:"Manrope",sans-serif;font-weight:700;font-size:.92rem;color:var(--ink)}
.methodology summary:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.methodology p{color:var(--muted);font-size:.9rem;margin:10px 0}
.methodology-date{font-size:.82rem;font-style:italic}
.disclaimer{margin:14px 0 0;padding:12px 16px;border-left:3px solid var(--accent);background:var(--soft);border-radius:0 10px 10px 0;font-size:.86rem;color:var(--muted);line-height:1.55}

a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--focus);outline-offset:2px}

@media (max-width:860px){
  .site-header{padding:0 16px;gap:10px}
  nav[role="tablist"]{max-width:calc(100vw - 200px)}
  .tab-btn{padding:6px 9px;font-size:.78rem}
  .panel-split,.cards{grid-template-columns:1fr}
  .columns{columns:1}
  .hero{text-align:left;padding-left:18px;padding-right:18px}
  .actions{justify-content:flex-start}
  .trust-bar{justify-content:flex-start}
  .consent{flex-direction:column;align-items:stretch}
  .consent-actions{justify-content:flex-end}
  .tab-panels{padding-left:18px;padding-right:18px}
}
.legal-main{max-width:800px;margin:40px auto;padding:0 clamp(18px,5vw,56px)}
.legal-main h1{margin-top:0}
.legal-main h2{margin-top:28px}
.legal-footer{max-width:800px;margin:0 auto;padding:24px clamp(18px,5vw,56px);border-top:1px solid var(--line);font-size:.86rem;color:var(--muted)}
.legal-footer a{color:var(--muted);text-decoration:none}
.legal-footer a:hover{color:var(--ink)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .button:hover,.button:active,.card:hover{transform:none}
}
.form-privacy{margin:0 0 4px;font-size:.8rem;color:var(--muted);line-height:1.5}
.form-privacy a{color:var(--accent-strong);text-decoration:underline}