:root { --ink:#0c1b2a; --navy:#102235; --lime:#c8ff53; --paper:#fbfaf5; --muted:#65707c; --line:#d9ddd8; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Arial,Helvetica,sans-serif; }
a { color:inherit; text-decoration:none; }
button,input { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
.eyebrow i,.hero-actions i,.section-heading i,.principles i,.newsletter i { font-style:normal; }

.site-header { height:78px; padding:0 5vw; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); background:rgba(251,250,245,.94); position:sticky; top:0; z-index:20; backdrop-filter:blur(12px); }
.brand { display:flex; align-items:center; gap:10px; font-size:13px; letter-spacing:.15em; font-weight:700; }
.brand-mark { width:32px; height:32px; display:grid; place-items:center; background:var(--lime); color:var(--ink); border-radius:50% 50% 50% 12%; font-family:Georgia,serif; font-size:19px; font-style:italic; }
.brand b { color:#5b6874; }
nav { display:flex; gap:34px; font-size:13px; font-weight:700; }
nav a,footer a { transition:color .2s ease; }
nav a:hover,footer a:hover { color:#5b7900; }
.language-toggle { border:0; background:transparent; display:flex; gap:6px; color:#9da3a7; cursor:pointer; font-size:12px; }
.language-toggle .active { color:var(--ink); font-weight:800; }

.hero { min-height:690px; padding:75px 5vw 60px; display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:7vw; overflow:hidden; }
.hero-copy { max-width:700px; }
.eyebrow,.kicker { font-size:11px; font-weight:800; letter-spacing:.2em; color:#577000; margin:0 0 26px; }
.eyebrow { display:flex; align-items:center; gap:10px; }
.eyebrow span { width:34px; height:2px; background:var(--lime); }
.hero h1 { font-family:Georgia,"Times New Roman",serif; font-weight:400; font-size:clamp(54px,6.3vw,96px); line-height:.95; letter-spacing:-.055em; margin:0; }
.hero h1 em { font-weight:400; color:#507000; }
.hero-description { max-width:600px; color:#53606c; font-size:18px; line-height:1.7; margin:32px 0; }
.hero-actions { display:flex; align-items:center; gap:28px; }
.primary-button { display:inline-flex; align-items:center; gap:26px; padding:16px 20px; background:var(--ink); color:white; font-size:13px; font-weight:800; border-radius:2px; transition:transform .2s,background .2s; }
.primary-button:hover { background:#223c50; transform:translateY(-2px); }
.primary-button span { color:var(--lime); font-size:18px; }
.text-link { font-size:13px; font-weight:800; border-bottom:1px solid var(--ink); padding-bottom:4px; }
.trust-row { margin-top:36px; display:flex; gap:22px; flex-wrap:wrap; font-size:11px; font-weight:700; color:#6d7479; }
.hero-visual { position:relative; border-radius:2px; transform:rotate(1.8deg); box-shadow:28px 32px 0 #e2e6dd; }
.hero-visual img { width:100%; aspect-ratio:1.22; object-fit:cover; display:block; background:var(--navy); }
.score-card { position:absolute; right:-28px; bottom:26px; background:var(--lime); padding:17px 20px 14px; min-width:150px; transform:rotate(-1.8deg); box-shadow:0 10px 30px rgba(12,27,42,.18); }
.score-card span { display:block; font-size:8px; letter-spacing:.17em; font-weight:900; }
.score-card b { font-family:Georgia,serif; font-size:34px; margin-right:3px; }
.score-card small { font-size:11px; }

.ad-slot { margin:10px auto 80px; width:min(90%,970px); min-height:86px; border:1px dashed #c8cec8; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#9aa09d; gap:6px; }
.ad-slot span { font-size:8px; letter-spacing:.24em; }
.ad-slot p { margin:0; font-size:11px; }

.section { padding:86px 5vw 110px; }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:30px; margin-bottom:42px; }
.section-heading .kicker { margin-bottom:14px; }
.section-heading h2,.method-section h2,.newsletter h2 { font-family:Georgia,serif; font-weight:400; font-size:clamp(34px,4vw,55px); letter-spacing:-.035em; margin:0; }
.section-heading>a { font-size:12px; font-weight:800; border-bottom:1px solid; padding-bottom:4px; }
.article-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.article-card { min-height:405px; background:var(--paper); padding:34px; display:flex; flex-direction:column; justify-content:space-between; transition:background .25s,transform .25s; }
.article-card:hover { background:white; transform:translateY(-4px); }
.article-number { font:italic 52px Georgia,serif; color:#d1d5cf; }
.article-meta { font-size:10px!important; letter-spacing:.15em; font-weight:800; }
.article-meta span { color:#587600; }
.article-content h3 { font:400 25px/1.2 Georgia,serif; margin:18px 0; }
.article-content>p { color:var(--muted); line-height:1.65; font-size:14px; }
.article-content a { margin-top:24px; display:inline-flex; gap:10px; font-size:12px; font-weight:800; }
.article-content a span { color:#618000; }

.tool-section { padding:90px 5vw 110px; background:var(--navy); color:white; }
.section-heading.light .kicker { color:var(--lime); }
.section-heading.light>p { color:#9fabb5; font-size:12px; }
.search-box { width:min(100%,720px); background:white; color:var(--ink); display:flex; align-items:center; padding:0 18px; margin:0 0 34px; }
.search-box>span { font-size:24px; color:#85909a; }
.search-box input { width:100%; padding:18px 14px; border:0; outline:0; }
.search-box kbd { font-size:10px; color:#8b949b; border:1px solid #d7dbdc; padding:4px 6px; border-radius:3px; }
.tool-table { border-top:1px solid #385064; }
.tool-row { min-height:82px; display:grid; grid-template-columns:1.45fr 1.2fr 1fr .55fr; align-items:center; gap:18px; border-bottom:1px solid #385064; color:#dce2e6; font-size:13px; }
.table-head { min-height:45px; color:#788b9a; font-size:9px; letter-spacing:.16em; font-weight:800; }
.tool-name { display:flex; align-items:center; gap:14px; }
.tool-name i { width:37px; height:37px; border:1px solid #577084; display:grid; place-items:center; color:var(--lime); font:italic 19px Georgia,serif; }
.tool-name span { display:flex; flex-direction:column; gap:5px; }
.tool-name b { color:white; font-size:14px; }
.tool-name small { color:#8393a0; font-size:10px; }
.rating b { color:var(--lime); font:400 23px Georgia,serif; }
.empty-state { padding:30px 0; color:#a8b2ba; }

.method-section { padding:105px 5vw; display:grid; grid-template-columns:.8fr 1.2fr; gap:9vw; background:#e9eadf; }
.method-section .kicker { margin-bottom:20px; }
.principles { border-top:1px solid #bdc1ba; }
.principles p { margin:0; padding:26px 0; display:flex; gap:25px; border-bottom:1px solid #bdc1ba; }
.principles p>b { color:#718000; font:italic 18px Georgia,serif; }
.principles span { display:flex; flex-direction:column; gap:8px; color:#687078; font-size:13px; line-height:1.6; }
.principles strong { color:var(--ink); font:400 20px Georgia,serif; }

.newsletter { margin:0; padding:90px 9vw; background:var(--lime); display:grid; grid-template-columns:1.15fr .85fr; gap:8vw; align-items:center; }
.newsletter .kicker { color:#435900; margin-bottom:18px; }
.newsletter h2 { font-size:clamp(38px,4.5vw,65px); }
.newsletter p { color:#44502d; line-height:1.65; max-width:570px; }
.newsletter form { display:grid; grid-template-columns:1fr auto; }
.newsletter input { border:0; border-bottom:2px solid var(--ink); background:transparent; padding:14px 4px; outline:0; min-width:0; }
.newsletter input::placeholder { color:#64703f; }
.newsletter button { background:var(--ink); color:white; border:0; padding:0 22px; cursor:pointer; font-weight:800; font-size:12px; }
.newsletter form small { grid-column:1/-1; margin-top:12px; color:#5f6a43; }
.success-message { display:flex; align-items:center; gap:16px; padding:24px; background:rgba(255,255,255,.35); }
.success-message>b { width:42px; height:42px; display:grid; place-items:center; border:1px solid var(--ink); border-radius:50%; }
.success-message span { display:flex; flex-direction:column; gap:5px; font-size:12px; }

footer { padding:48px 5vw; display:grid; grid-template-columns:1.1fr 1fr 1fr auto; align-items:center; gap:28px; background:#081623; color:#adb6bd; }
.footer-brand { color:white; }
footer p,footer small { font-size:11px; }
footer div:nth-of-type(2) { display:flex; gap:20px; font-size:11px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

@media (max-width:900px) {
  nav { display:none; }
  .hero { grid-template-columns:1fr; padding-top:55px; }
  .hero-visual { max-width:620px; margin-top:15px; }
  .article-grid { grid-template-columns:1fr; }
  .article-card { min-height:300px; }
  .method-section,.newsletter { grid-template-columns:1fr; }
  footer { grid-template-columns:1fr 1fr; }
}
@media (max-width:600px) {
  .site-header { height:66px; }
  .hero { padding:46px 5vw 52px; min-height:auto; }
  .hero h1 { font-size:52px; }
  .hero-description { font-size:16px; }
  .hero-actions { align-items:flex-start; flex-direction:column; gap:20px; }
  .trust-row { gap:12px; flex-direction:column; }
  .hero-visual { margin-right:15px; box-shadow:15px 18px 0 #e2e6dd; }
  .score-card { right:-14px; bottom:14px; }
  .section,.tool-section,.method-section { padding:68px 5vw; }
  .section-heading { align-items:flex-start; flex-direction:column; }
  .tool-row { grid-template-columns:1.4fr .6fr; padding:16px 0; }
  .tool-row>span:nth-child(2),.tool-row>span:nth-child(3) { display:none; }
  .table-head>span:nth-child(4) { display:block; }
  .newsletter { padding:66px 5vw; }
  .newsletter form { grid-template-columns:1fr; gap:12px; }
  .newsletter button { padding:16px; }
  footer { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition-duration:.01ms!important; } }

/* Articles and trust pages */
.inner-header { position:static; border-bottom:1px solid var(--line); }
.inner-header nav { margin-left:auto; }
.article-page { background:#f7f7f2; }
.article-shell { width:min(100% - 40px,1120px); margin:0 auto; padding:38px 0 90px; }
.breadcrumbs { margin:0 0 54px; color:#68737b; font-size:12px; }
.breadcrumbs a { border-bottom:1px solid #aeb6b9; }
.article-header { max-width:880px; margin-bottom:54px; }
.article-header .kicker { margin-bottom:18px; }
.article-header h1 { margin:0 0 24px; font:400 clamp(42px,6vw,76px)/1.02 Georgia,serif; letter-spacing:-.045em; }
.article-lead { max-width:760px; color:#53606c; font-size:20px; line-height:1.65; }
.article-byline { display:flex; flex-wrap:wrap; gap:12px 22px; color:#727b82; font-size:12px; }
.article-layout { display:grid; grid-template-columns:minmax(0,760px) 260px; gap:70px; align-items:start; }
.article-body { background:white; border:1px solid var(--line); padding:clamp(28px,5vw,68px); }
.article-body h2 { margin:52px 0 18px; font:400 34px/1.15 Georgia,serif; letter-spacing:-.025em; }
.article-body h2:first-child { margin-top:0; }
.article-body h3 { margin:32px 0 12px; font-size:19px; }
.article-body p,.article-body li { color:#404d57; font-size:16px; line-height:1.8; }
.article-body li { margin-bottom:9px; }
.article-body a { color:#476600; border-bottom:1px solid #8ba348; }
.article-note,.affiliate-box,.verdict { margin:34px 0; padding:24px; border-left:4px solid var(--lime); background:#f2f3e8; }
.article-note strong,.affiliate-box strong,.verdict strong { display:block; margin-bottom:8px; }
.comparison-table { width:100%; border-collapse:collapse; margin:28px 0; font-size:14px; }
.comparison-table th,.comparison-table td { padding:14px 12px; border:1px solid #d9ddda; text-align:left; vertical-align:top; }
.comparison-table th { background:var(--navy); color:white; }
.article-aside { position:sticky; top:24px; padding:24px; border-top:4px solid var(--lime); background:var(--navy); color:white; }
.article-aside p { color:#afbbc4; font-size:13px; line-height:1.6; }
.article-aside a { display:block; color:var(--lime); margin-top:16px; font-size:13px; font-weight:800; }
.article-footer { margin-top:56px; padding-top:28px; border-top:1px solid var(--line); color:#66717a; font-size:13px; }
.legal-page .article-body { max-width:820px; margin:auto; }
.legal-page .article-header { margin-left:auto; margin-right:auto; max-width:820px; }
.legal-page .article-header h1 { font-size:clamp(40px,5vw,64px); }
.legal-page hr { border:0; border-top:1px solid var(--line); margin:48px 0; }
.inner-footer { margin-top:0; }
.newsletter button:disabled,.newsletter input:disabled { cursor:not-allowed; opacity:.7; }
@media (max-width:900px) { .article-layout { grid-template-columns:1fr; } .article-aside { position:static; } }
@media (max-width:600px) { .article-shell { width:min(100% - 24px,1120px); padding-top:24px; } .breadcrumbs { margin-bottom:36px; } .article-body { padding:26px 22px; } .article-header h1 { font-size:42px; } .article-lead { font-size:18px; } .comparison-table { display:block; overflow-x:auto; } }
