/* Shared by the guides, the comparisons and /faq. One sheet instead of a
   copy per page so seven pages cannot drift apart. The tokens are the
   homepage's, the same set about.html carries, so these read as the same
   site. index.html and about.html keep their own inline styles. */
:root{
  --deep:#16241F; --deep-2:#1D2F29; --cream:#F3EFE6; --cream-2:#EAE4D7; --paper:#FBF9F4;
  --ink:#16241F; --ink-2:#4A5A54; --on-deep:#F3EFE6; --on-deep-2:#A9B8B1;
  --accent:#14B88A; --accent-deep:#0E7A5B; --accent-ink:#06261C;
  --line-cream:rgba(22,36,31,.10); --line-deep:rgba(243,239,230,.18);
  --warn-bg:#FBEFE3; --warn-line:#E7B98A; --warn-ink:#6B3A10;
  --display:'Bricolage Grotesque','Hanken Grotesk',system-ui,sans-serif;
  --text:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--cream); color:var(--ink); font-family:var(--text); line-height:1.6;
     -webkit-font-smoothing:antialiased; overflow-x:hidden;}
a{color:inherit}
img{max-width:100%; display:block;}
.in{max-width:760px; margin:0 auto; padding:0 20px;}

.top{background:var(--deep); color:var(--on-deep);}
.top .in{display:flex; align-items:center; justify-content:space-between; padding-top:18px; padding-bottom:18px;}
.brand{display:flex; align-items:center; gap:9px; text-decoration:none;
       font-family:var(--display); font-weight:800; font-size:20px;}
.brand img{width:30px; height:30px; border-radius:8px;}
.top-cta{font-weight:600; font-size:14px; text-decoration:none; padding:9px 15px;
         border-radius:999px; border:1px solid var(--line-deep);}

main{padding:40px 0 56px;}
.eyebrow{color:var(--accent-deep); font-weight:700; font-size:12px; letter-spacing:1.5px;
         text-transform:uppercase; margin:0 0 8px;}
h1{font-family:var(--display); font-weight:800; font-size:32px; line-height:1.08;
   letter-spacing:-.9px; margin:0 0 16px;}
h2{font-family:var(--display); font-weight:800; font-size:24px; line-height:1.15;
   letter-spacing:-.5px; margin:40px 0 12px;}
h3{font-family:var(--display); font-weight:700; font-size:18px; letter-spacing:-.2px; margin:24px 0 6px;}
p, li{font-size:16.5px;}
p{margin:0 0 14px;}
ul, ol{padding-left:22px; margin:0 0 16px;}
li{margin-bottom:6px;}
.article a{color:var(--accent-deep); font-weight:600;}

/* Byline: who wrote it and when it was last checked. */
.byline{display:flex; align-items:center; gap:12px; margin:0 0 24px; font-size:14px; color:var(--ink-2);}
.byline img{width:40px; height:40px; border-radius:50%; object-fit:cover; flex:0 0 auto;}
.byline a{color:var(--ink); font-weight:600;}

/* The direct answer. Answer engines lift the first clear answer on a page,
   so it sits in its own block straight under the headline. */
.answer{background:var(--paper); border:1px solid var(--line-cream); border-left:4px solid var(--accent);
        border-radius:0; padding:16px 18px; margin:0 0 8px;}
.answer p{margin:0 0 10px;}
.answer p:last-child{margin:0;}

.warn{background:var(--warn-bg); border:1px solid var(--warn-line); border-radius:14px;
      padding:16px 18px; margin:0 0 16px; color:var(--warn-ink);}
.warn h2{margin-top:0; color:var(--warn-ink); font-size:21px;}
.warn li, .warn p{color:var(--warn-ink);}
.warn a{color:var(--warn-ink);}

/* Comparison tables scroll sideways on a phone rather than squash. */
.table{overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 0 16px;
       border:1px solid var(--line-cream); border-radius:14px; background:var(--paper);}
table{border-collapse:collapse; width:100%; font-size:14.5px; line-height:1.45;}
/* Three and four columns don't fit a phone. Below 600px each row stacks into
   a card, and every cell shows its column from data-label. */
@media (max-width:599px){
  .table.wide{border:none; background:none; overflow:visible;}
  .table.wide thead{display:none;}
  .table.wide table, .table.wide tbody, .table.wide tr, .table.wide th, .table.wide td{display:block; width:auto;}
  .table.wide tr{background:var(--paper); border:1px solid var(--line-cream); border-radius:14px;
                 padding:12px 14px; margin-bottom:10px;}
  .table.wide tbody th{font-family:var(--display); font-size:17px; padding:0 0 6px; border:none;}
  .table.wide td{padding:6px 0; border:none; border-top:1px solid var(--line-cream);}
  .table.wide td::before{content:attr(data-label); display:block; font-size:11px; font-weight:700;
                 letter-spacing:1px; text-transform:uppercase; color:var(--accent-deep);}
}
th, td{text-align:left; vertical-align:top; padding:10px 12px; border-bottom:1px solid var(--line-cream);}
tr:last-child td{border-bottom:none;}
thead th{font-family:var(--display); font-size:15px; background:var(--cream-2);}
tbody th{font-weight:700; width:24%;}

.picks{display:grid; grid-template-columns:1fr; gap:12px; margin:0 0 16px;}
.pick{background:var(--paper); border:1px solid var(--line-cream); border-radius:14px; padding:16px 18px;}
.pick h3{margin-top:0;}
.pick ul{margin-bottom:0;}

/* A real app screen, from shots/, in the homepage's phone frame. */
.shot{max-width:240px; margin:8px 0 22px; background:#0b0b0d; border-radius:30px; padding:6px;
      box-shadow:inset 0 0 0 2px #2b2f2d, 0 18px 40px rgba(22,36,31,.20);}
.shot img{width:100%; height:auto; border-radius:24px;}

.sources{font-size:14px; color:var(--ink-2); overflow-wrap:anywhere;}
.sources li{font-size:14px;}

/* Same accordion as the homepage FAQ. */
.faq-list{border-top:1px solid var(--line-cream); margin:0 0 16px;}
.faq-list details{border-bottom:1px solid var(--line-cream);}
.faq-list summary{cursor:pointer; list-style:none; padding:15px 36px 15px 0; position:relative;
             font-family:var(--display); font-weight:700; font-size:17px; letter-spacing:-.2px;}
.faq-list summary::-webkit-details-marker{display:none;}
.faq-list summary::after{content:"+"; position:absolute; right:4px; top:50%; transform:translateY(-50%);
             font-size:22px; font-weight:500; color:var(--accent-deep);}
.faq-list details[open] summary::after{content:"\2212";}
.faq-list details p{margin:0 0 16px; color:var(--ink-2); font-size:15.5px;}

.cta{margin-top:40px; padding:24px; border-radius:18px; background:var(--deep); color:var(--on-deep);}
.cta b{display:block; font-family:var(--display); font-size:21px; margin-bottom:4px;}
.cta p{margin:0 0 16px; color:var(--on-deep-2); font-size:15px;}
.btn{display:inline-block; background:var(--accent); color:var(--accent-ink); font-weight:700;
     text-decoration:none; padding:12px 18px; border-radius:12px;}

.foot{background:var(--cream-2); color:var(--ink-2); font-size:13px; padding:28px 0 40px;}
.foot p{margin:0 0 12px; max-width:44em; font-size:13px;}
.foot a{color:var(--ink);}
/* The Compare / Guides / FAQ group. Every page on the site carries it. */
.site-links{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin:4px 0 18px;}
.site-links b{display:block; color:var(--ink); font-size:12px; letter-spacing:1px; text-transform:uppercase; margin-bottom:4px;}
.site-links a{display:block; padding:3px 0; text-decoration:none;}
.site-links a:hover{text-decoration:underline;}

@media (min-width:640px){
  .picks{grid-template-columns:1fr 1fr;}
}
@media (min-width:760px){
  main{padding:64px 0 80px;}
  h1{font-size:46px; letter-spacing:-1.4px;}
  h2{font-size:28px;}
}