@font-face{font-family:Satoshi;src:url('../../fonts/Satoshi-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:Satoshi;src:url('../../fonts/Satoshi-Bold.ttf') format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:Anton;src:url('../../fonts/Anton-Regular.ttf') format('truetype');font-weight:400;font-display:swap}

:root{
  --paper:#fff8ec;
  --cream:#efe4d1;
  --ink:#171512;
  --muted:#514a40;
  --red:#d5282f;
  --red-text:#a8231b;
  --line:#cec4b3;
  --white:#fffdf8;
  --max:1160px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:108px}
body{margin:0;background:var(--paper);color:var(--ink);font:20px/1.7 Satoshi,Arial,sans-serif}
a{color:inherit;text-underline-offset:4px;text-decoration-thickness:1px}
a:hover{color:var(--red)}
button,a,summary{-webkit-tap-highlight-color:transparent}
:focus-visible{outline:3px solid var(--red);outline-offset:5px}
::selection{background:var(--red);color:#fff}
img{max-width:100%;display:block}
h1,h2,h3,p,figure{margin:0}
h1,h2,h3{line-height:1.2;letter-spacing:-.025em;text-wrap:balance}
p+p{margin-top:24px}
.wrap{width:min(var(--max),calc(100% - 80px));margin-inline:auto}
.skip-link{position:fixed;top:-100px;left:16px;z-index:20;background:var(--ink);color:white;padding:12px 20px}
.skip-link:focus{top:12px}
.site-header{background:var(--paper);position:sticky;top:0;z-index:10;border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:28px;min-height:80px}
.brand{display:block;flex:none}
.brand img{width:145px;height:auto}
.nav-middle{display:flex;gap:28px;align-items:center;font-size:16px;font-weight:700;margin-left:auto;margin-right:16px}
.nav-middle a{text-decoration:none;min-height:44px;display:flex;align-items:center}
.nav-middle a[aria-current]{border-bottom:2px solid var(--red)}
.nav-cta{text-decoration:none;font-size:15px;font-weight:700;border:1px solid var(--ink);padding:10px 16px;display:flex;align-items:center;gap:16px;min-height:48px;line-height:1.4}
.nav-cta:hover{background:var(--ink);color:var(--paper)}
.reading-progress{height:3px;background:var(--red);transform:scaleX(0);transform-origin:left;position:absolute;bottom:-2px;width:100%;pointer-events:none}
.breadcrumb{display:flex;flex-wrap:wrap;gap:10px;align-items:center;color:var(--muted);font-size:14px;padding-top:28px}
.breadcrumb a{text-decoration:none;display:inline-flex;align-items:center;min-height:36px}
.hero{display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:center;padding:30px 0 36px}
.eyebrow{font-weight:700;text-transform:uppercase;letter-spacing:.075em;font-size:13px;line-height:1.5;display:flex;gap:10px;align-items:center}
.eyebrow::before{content:'';width:24px;height:2px;background:var(--red);flex:none}
.hero h1{font:700 clamp(38px,4.25vw,58px)/1.14 Satoshi,Arial,sans-serif;letter-spacing:-.035em;margin-top:18px;max-width:680px}
.hero h1 span{color:var(--red)}
.hero-deck{font-size:21px;line-height:1.55;margin-top:24px;max-width:580px}
.hero-art{position:relative;min-width:0;padding:8px 0 20px}
.photo-frame{border:1px solid var(--ink);padding:8px;background:var(--white)}
.photo-frame img{width:100%;height:290px;object-fit:cover;object-position:60% center}
.photo-label{font-size:13px;font-weight:700;display:flex;justify-content:space-between;gap:12px;padding:12px 4px 4px}
.edition-stamp{position:absolute;right:-8px;bottom:0;background:var(--red);color:#fff;width:98px;height:98px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;outline:1px solid var(--paper);outline-offset:-6px;transform:rotate(-8deg)}
.edition-stamp b{font:36px/1 Anton,Impact,sans-serif;font-weight:400}
.edition-stamp span{font-size:11px;margin-top:5px;font-weight:700}
.hero-meta{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);padding:14px 0;gap:16px;font-size:14px}
.hero-meta div{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.jump-link{display:flex;gap:12px;text-decoration:none;font-weight:700;white-space:nowrap;min-height:44px;align-items:center}
.introduction{display:grid;grid-template-columns:minmax(0,760px) minmax(0,1fr);gap:48px;padding:36px 0 44px}
.intro-copy p{max-width:66ch}
.quick-answer{font-size:21px;font-weight:700;line-height:1.6;border-left:4px solid var(--red);padding-left:24px}
.disclosure{font-size:15px;line-height:1.65;color:var(--muted);align-self:start}
.disclosure strong{display:block;color:var(--ink);font-size:15px;margin-bottom:12px}
.mobile-toc{display:none}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:24px}
.section-head h2{font-size:36px;font-weight:700;line-height:1.2;max-width:700px}
.section-head .eyebrow{margin-bottom:12px}
.section-head>span{font-size:15px;color:var(--muted);max-width:200px}
.table-shell{border:1px solid var(--ink);background:var(--white)}
.comparison-table{width:100%;border-collapse:collapse;text-align:left;font-size:17px;line-height:1.65;table-layout:fixed}
.comparison-table caption{position:absolute;clip-path:inset(50%);width:1px;height:1px;overflow:hidden;white-space:nowrap}
.comparison-table thead{background:var(--ink);color:var(--paper)}
.comparison-table th{font-weight:700}
.comparison-table th,.comparison-table td{padding:24px 20px;vertical-align:top}
.comparison-table thead th{padding-block:18px;font-size:15px}
.comparison-table thead th:first-child{width:22%}
.comparison-table thead th:nth-child(2){width:23%}
.comparison-table thead th:nth-child(3){width:26%}
.comparison-table tbody tr+tr{border-top:1px solid var(--line)}
.comparison-table tbody tr:first-child{background:#f8eee1;box-shadow:inset 4px 0 var(--red)}
.table-app{display:flex;align-items:baseline;gap:12px;text-decoration:none;font-size:21px;line-height:1.4;min-height:44px}
.table-app .rank-small{font-family:Anton,sans-serif;font-size:24px;color:var(--muted);flex:none}
.comparison-table tbody tr:first-child .table-app,.comparison-table tbody tr:first-child .rank-small{color:var(--red)}
.table-pick{display:block;font-size:14px;line-height:1.5;margin-top:8px;font-weight:700;color:var(--red-text)}
.selection-note{font-size:16px;color:var(--muted);max-width:78ch;margin-top:22px}
.article-layout{display:grid;grid-template-columns:minmax(0,760px) minmax(0,1fr);gap:48px;margin-top:56px;align-items:start}
.article-body{min-width:0}
.app-review{margin-bottom:64px}
.review-heading{display:flex;gap:24px;align-items:flex-start;border-top:2px solid var(--ink);padding-top:28px;margin-bottom:28px}
.rank{font-family:Anton,Impact,sans-serif;font-size:56px;line-height:1;color:var(--muted);flex:none;margin-top:4px}
.app-review.featured .rank{color:var(--red)}
.review-heading h2{font-size:32px;line-height:1.25;margin:8px 0 0;text-wrap:pretty}
.review-heading .category{font-size:14px;font-weight:700;line-height:1.5;color:var(--muted)}
.featured .category{color:var(--red)}
.app-overview{font-size:20px;line-height:1.75}
.app-overview p{max-width:66ch}
.featured-overview{display:block}
.product-proof{background:var(--cream);border:1px solid var(--line);padding:28px;margin-top:32px;display:grid;grid-template-columns:180px minmax(0,1fr);gap:16px 32px;align-items:center}
.product-proof .proof-label{font-size:21px;font-weight:700;grid-column:2;grid-row:1;margin:0;align-self:end;line-height:1.4}
.product-proof>a{display:block;grid-column:1;grid-row:1 / 3}
.product-proof img{width:180px;height:auto;margin:auto}
.product-proof figcaption{font-size:17px;line-height:1.65;grid-column:2;grid-row:2;align-self:start}
.pros-cons{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);margin-top:32px;background:var(--white)}
.pros-cons>div{padding:24px}
.pros-cons>div+div{border-left:1px solid var(--line);background:#f4ecdf}
.pros-cons h3{font-size:20px;font-weight:700;letter-spacing:0;display:flex;align-items:center;gap:10px}
.list-icon{border:1px solid var(--ink);width:23px;height:23px;display:inline-flex;justify-content:center;align-items:center;font-size:20px;line-height:1;flex:none}
.pros-cons ul{padding-left:20px;margin:20px 0 0;font-size:18px;line-height:1.7}
.pros-cons li+li{margin-top:18px}
.pros-cons li::marker{font-size:12px}
.fit{margin:26px 0;font-size:18px;line-height:1.7}
.review-links{display:flex;flex-wrap:wrap;align-items:center;gap:24px}
.button{min-height:52px;display:inline-flex;align-items:center;justify-content:space-between;gap:24px;border:1px solid var(--ink);padding:12px 20px;font-size:16px;font-weight:700;text-decoration:none;line-height:1.4;transition:background .15s,color .15s}
.button:hover{background:var(--ink);color:var(--paper)}
.button-primary{background:var(--red);border-color:var(--red);color:#fff}
.button-primary:hover{background:#b11f26;border-color:#b11f26;color:white}
.review-links>a:not(.button){font-size:16px;min-height:44px;display:flex;align-items:center}
.sidebar{position:sticky;top:112px;font-size:16px}
.sidebar-label{font-size:16px;font-weight:700;padding-bottom:16px;border-bottom:1px solid var(--ink)}
.toc{margin-top:8px}
.toc a{display:flex;align-items:center;gap:12px;min-height:52px;padding:12px 0;text-decoration:none;border-bottom:1px solid var(--line);line-height:1.4}
.toc a span{color:var(--muted);font-size:14px;font-weight:400;min-width:20px}
.toc a[aria-current]{font-weight:700;color:var(--red)}
.toc a[aria-current] span{color:var(--red)}
.side-note{padding-top:28px;color:var(--muted);font-size:15px;line-height:1.65}
.side-note strong{color:var(--ink);display:block;font-size:16px;margin-bottom:10px}
.side-note a{display:inline-flex;min-height:44px;align-items:center;margin-top:8px}
.verdict,.choosing-guide{border-top:2px solid var(--ink);padding-top:30px;margin:6px 0 54px;font-size:20px}
.verdict h2,.faq h2,.choosing-guide h2,.related-guides h2{font-size:32px;line-height:1.25;margin-bottom:28px}
.verdict .eyebrow{margin-bottom:16px}
.workflow{list-style:none;padding:0;margin:28px 0;background:var(--cream);border:1px solid var(--line);counter-reset:steps}
.workflow li{padding:20px 24px;display:flex;align-items:baseline;gap:20px;font-size:18px;counter-increment:steps}
.workflow li+li{border-top:1px solid var(--line)}
.workflow li::before{content:'0' counter(steps);font-family:Anton,sans-serif;font-size:24px;color:var(--red);flex:none}
.choosing-guide ul{padding-left:24px;margin:24px 0}
.choosing-guide li+li{margin-top:20px}
.faq{margin-bottom:48px}
.faq details{border-top:1px solid var(--line)}
.faq details:last-of-type{border-bottom:1px solid var(--line)}
.faq summary{font-size:20px;font-weight:700;list-style:none;cursor:pointer;padding:24px 38px 24px 0;position:relative;line-height:1.5}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';position:absolute;right:6px;top:20px;font-size:27px;font-weight:400;color:var(--red)}
.faq details[open] summary::after{content:'−'}
.faq-answer{font-size:19px;padding:0 0 26px}
.before-subscribing{font-size:18px;margin-top:28px}
.related-guides{border-top:1px solid var(--line);padding-top:30px;margin-bottom:54px}
.related-guides ul{padding-left:24px;font-size:18px}
.related-guides li+li{margin-top:16px}
.closing{background:var(--ink);color:var(--paper);padding:40px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:center;margin-bottom:54px}
.closing .eyebrow{color:var(--cream);margin-bottom:16px}
.closing h2{font-size:38px;line-height:1.2;max-width:680px}
.closing-actions{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.closing-actions>a:not(.button){font-size:16px;padding-block:10px}
.site-footer{border-top:1px solid var(--line);padding:28px 0 36px}
.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:24px;color:var(--muted);font-size:14px}
.footer-inner img{width:112px;height:auto}
.footer-inner>a{min-height:44px;display:flex;align-items:center}
.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:1050px){
  .wrap{width:calc(100% - 56px)}
  .hero{gap:32px}
  .hero h1{font-size:46px}
  .photo-frame img{height:270px}
  .article-layout,.introduction{grid-template-columns:minmax(0,700px);justify-content:center;gap:28px}
  .sidebar{display:none}
  .disclosure{border-top:1px solid var(--line);padding-top:20px;font-size:16px}
  .mobile-toc{display:block;margin-bottom:36px;font-size:17px}
  .mobile-toc summary{font-weight:700;cursor:pointer;min-height:48px;padding:12px 0}
  .mobile-toc ol{display:grid;grid-template-columns:1fr 1fr;gap:8px 32px;padding-left:24px;margin-top:8px}
  .mobile-toc a{min-height:44px;display:inline-flex;align-items:center}
  .comparison-table th,.comparison-table td{padding:20px 16px}
}
@media(max-width:900px){
  .nav-middle{display:none}
  .hero{grid-template-columns:minmax(0,1fr)}
  .hero h1{font-size:52px;max-width:720px}
  .hero-deck{max-width:660px}
  .hero-art{max-width:680px;width:100%}
  .photo-frame img{height:280px}
  .comparison-table,.comparison-table tbody{display:block}
  .comparison-table thead{display:none}
  .comparison-table tbody tr{display:grid;grid-template-columns:minmax(0,1fr);padding:24px}
  .comparison-table th,.comparison-table td{display:block;padding:0}
  .comparison-table tbody th{margin-bottom:8px}
  .table-app{font-size:25px;gap:14px}
  .table-pick{padding-left:40px;margin-top:0}
  .comparison-table td{font-size:18px;line-height:1.6;margin-top:16px;display:grid;grid-template-columns:116px minmax(0,1fr);gap:20px}
  .comparison-table td::before{content:attr(data-label);font-size:16px;font-weight:700;line-height:1.6}
  .section-head>span{display:none}
  .closing{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:640px){
  html{scroll-padding-top:96px}
  body{font-size:18px;line-height:1.7}
  .wrap{width:calc(100% - 40px)}
  .nav{min-height:74px;gap:16px}
  .brand img{width:112px}
  .nav-cta{font-size:14px;padding:10px 12px;gap:10px}
  .breadcrumb{padding-top:20px;font-size:14px;gap:7px}
  .hero{gap:24px;padding-top:24px;padding-bottom:24px}
  .hero h1{font-size:38px;line-height:1.16;margin-top:16px}
  .hero-deck{font-size:19px;line-height:1.6;margin-top:20px}
  .eyebrow{font-size:12px;letter-spacing:.045em;gap:8px}
  .hero-art{padding:0 4px 22px 0}
  .photo-frame img{height:205px;object-position:50% center}
  .photo-label{font-size:12px;padding-top:10px}
  .photo-label>span:last-child{display:none}
  .edition-stamp{right:0;bottom:0;width:86px;height:86px}
  .edition-stamp b{font-size:32px}
  .edition-stamp span{font-size:10px}
  .hero-meta{font-size:14px;align-items:flex-start;padding:16px 0;flex-wrap:wrap}
  .hero-meta div{gap:6px;flex-direction:column;align-items:flex-start}
  .jump-link{font-size:15px}
  .introduction{padding:28px 0 24px;gap:24px}
  .intro-copy p{font-size:18px;line-height:1.7}
  .intro-copy .quick-answer{font-size:19px;padding-left:18px}
  .disclosure{font-size:15px}
  .mobile-toc{margin-bottom:32px}
  .mobile-toc ol{grid-template-columns:minmax(0,1fr);gap:4px}
  .section-head h2{font-size:30px}
  .comparison-table tbody tr{padding:22px 18px}
  .comparison-table td{grid-template-columns:minmax(0,1fr);gap:4px;margin-top:18px}
  .comparison-table td::before{font-size:15px}
  .table-app{font-size:24px}
  .table-pick{font-size:14px}
  .selection-note{font-size:16px}
  .article-layout{margin-top:40px}
  .app-review{margin-bottom:48px}
  .review-heading{gap:16px;padding-top:24px;margin-bottom:26px}
  .rank{font-size:44px;margin-top:3px}
  .review-heading h2{font-size:27px;line-height:1.3}
  .review-heading .category{font-size:14px}
  .app-overview{font-size:18px;line-height:1.75}
  .product-proof{grid-template-columns:minmax(0,1fr);padding:24px;gap:20px}
  .product-proof .proof-label{grid-column:1;grid-row:1;font-size:20px;text-align:center}
  .product-proof>a{grid-column:1;grid-row:2}
  .product-proof img{width:200px}
  .product-proof figcaption{grid-column:1;grid-row:3;font-size:16px}
  .pros-cons{grid-template-columns:minmax(0,1fr);margin-top:28px}
  .pros-cons>div{padding:22px}
  .pros-cons>div+div{border-left:0;border-top:1px solid var(--line)}
  .pros-cons ul{font-size:18px}
  .fit{font-size:18px}
  .review-links{gap:12px 22px}
  .button{font-size:16px;min-height:52px}
  .verdict,.choosing-guide{padding-top:26px;margin-bottom:42px;font-size:18px}
  .verdict h2,.faq h2,.choosing-guide h2,.related-guides h2{font-size:28px;line-height:1.3}
  .workflow li{font-size:18px;gap:15px;padding:20px 18px}
  .faq summary{font-size:18px;padding-block:22px}
  .faq-answer{font-size:18px}
  .before-subscribing{font-size:17px}
  .closing{padding:28px 24px;gap:28px;margin-bottom:36px}
  .closing h2{font-size:32px}
  .footer-inner{flex-wrap:wrap;gap:16px 24px}
  .footer-inner p{order:3;width:100%;font-size:14px}
  .footer-inner>a:last-child{margin-left:auto}
}
@media(max-width:360px){
  .wrap{width:calc(100% - 32px)}
  .brand img{width:100px}
  .nav-cta{font-size:13px;gap:8px;padding-inline:10px}
  .hero h1{font-size:34px}
  .review-heading{gap:12px}
  .review-heading h2{font-size:25px}
  .rank{font-size:38px}
  .pros-cons>div{padding:20px 18px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
@media print{
  .site-header,.sidebar,.mobile-toc,.hero-art,.reading-progress,.closing,.site-footer{display:none}
  .wrap{width:100%;max-width:none}
  .hero,.introduction,.article-layout{display:block}
  .hero h1{font-size:36px}
  .disclosure{margin-top:20px}
  .pros-cons,.review-heading{break-inside:avoid}
  .faq details .faq-answer{display:block}
  .app-review{margin-bottom:32px}
  a{color:inherit}
  .article-layout{margin-top:36px}
  body{background:white;font-size:12pt}
}
