/* Articles: guides, city pages and comparisons. Read on the page's own
   ground, not inside a box; the answer first; a sidebar that stays with the
   reader on wide screens and steps out of the way on a phone. */

.ar-head{max-width:1100px; padding-block:18px 26px}
.ar-kick{margin:0 0 14px; display:inline-block; padding:5px 12px; border-radius:999px;
  background:rgba(233,184,123,.12); color:var(--tan); font-size:13px; font-weight:600}
.ar-head h1{margin:0; max-width:22ch; font-size:clamp(32px,4.6vw,56px); line-height:1.15; text-wrap:balance}
.ar-meta{display:flex; flex-wrap:wrap; gap:6px 18px; margin:18px 0 0; font-size:14px; color:var(--muted)}
.ar-meta span + span::before{content:"·"; margin-inline-end:18px; opacity:.6}

.ar-hero{max-width:1100px}
.ar-heroimg{display:block; width:100%; height:auto; aspect-ratio:21/9; object-fit:cover; border-radius:22px; background:var(--card)}

.ar-grid{max-width:1100px; display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:56px; padding-block:44px 40px; align-items:start}
.ar-side{position:sticky; top:24px; display:grid; gap:16px}

/* ── Reading text ───────────────────────────────────────────── */
.ar-body{min-width:0; font-size:17.5px; line-height:1.9; color:var(--muted)}
.ar-body > h2,.ar-body h2[id]{margin:52px 0 14px; font-size:clamp(22px,2.4vw,28px); line-height:1.35; color:var(--cream); scroll-margin-top:24px}
.ar-body h3{margin:28px 0 8px; font-size:19px; line-height:1.45; color:var(--cream)}
.ar-body p{margin:0 0 18px}
.ar-body b,.ar-body strong{color:var(--cream)}
.ar-body a{color:var(--cream); text-decoration:underline; text-decoration-color:rgba(233,184,123,.6); text-underline-offset:4px}
.ar-body a:hover{text-decoration-color:var(--tan)}
.ar-body ul,.ar-body ol{margin:0 0 20px; padding-inline-start:0; list-style:none}
.ar-body ul > li{position:relative; padding-inline-start:22px; margin:0 0 10px}
.ar-body ul > li::before{content:""; position:absolute; inset-inline-start:2px; top:.8em; width:7px; height:7px; border-radius:50%; background:var(--tan)}
.ar-body ol{counter-reset:ar}
.ar-body ol > li{counter-increment:ar; position:relative; padding-inline-start:40px; margin:0 0 14px}
.ar-body ol > li::before{content:counter(ar); position:absolute; inset-inline-start:0; top:.15em; width:28px; height:28px; border-radius:50%;
  display:grid; place-items:center; background:var(--card); color:var(--cream); font-size:14px; font-weight:700; line-height:1}
.ar-body ul.perks > li{padding:14px 18px 14px 18px; padding-inline-start:46px; border-radius:14px; background:var(--card); color:var(--cream)}
.ar-body ul.perks > li::before{content:"✓"; width:auto; height:auto; background:none; color:#7fd39a; font-weight:800; top:14px; inset-inline-start:18px}

/* The answer first: the two lines an assistant quotes. */
.ar-answer{margin:0 0 28px; padding:22px 24px; border-radius:18px; background:rgba(233,184,123,.08);
  border:1px solid rgba(233,184,123,.35); border-inline-start-width:4px}
.ar-answer .ar-lbl{margin:0 0 6px; font-size:13px; font-weight:700; color:var(--tan)}
.ar-answer p{margin:0; font-size:18px; line-height:1.8; color:var(--cream)}

.ar-h3{margin:0 0 14px !important; font-size:20px !important}
.ar-facts{margin:0 0 12px; padding:22px 24px; border-radius:18px; background:var(--card)}
.ar-facts table{width:100%; border-collapse:collapse; font-size:15.5px}
.ar-facts th,.ar-facts td{padding:10px 0; border-bottom:1px solid var(--line); text-align:start; vertical-align:top}
.ar-facts tr:last-child th,.ar-facts tr:last-child td{border-bottom:0}
.ar-facts th{width:32%; color:var(--muted); font-weight:500; padding-inline-end:16px}
.ar-facts td{color:var(--cream)}

/* Tables in the text. */
.ar-body .tablewrap{overflow-x:auto; margin:0 0 22px; border:1px solid var(--line); border-radius:16px}
.ar-body table{width:100%; border-collapse:collapse; font-size:15.5px; line-height:1.6}
.ar-body .tablewrap table{min-width:420px}
.ar-body th,.ar-body td{padding:12px 16px; text-align:start; vertical-align:top; border-bottom:1px solid var(--line)}
.ar-body tr:last-child th,.ar-body tr:last-child td{border-bottom:0}
.ar-body thead th,.ar-body table:not(:has(thead)) tr:first-child th{background:var(--card); color:var(--cream); font-weight:700}
.ar-body tbody th[scope="row"]{background:none}
.ar-body td{color:var(--muted)}
.ar-body .kartoon-option{color:#b5e7c6}
.ar-body table.vs th[scope="row"]{color:var(--cream); font-weight:600; background:none}
.ar-body table.vs .x{color:#e58a7a; font-weight:700}
.ar-body table.vs .ok{color:#7fd39a; font-weight:700}
.ar-body .dated{font-size:13.5px; opacity:.85}

/* Questions open one at a time; the text is in the page either way. */
.ar-faq{border-top:1px solid var(--line)}
.ar-q{border-bottom:1px solid var(--line)}
.ar-q summary{list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:18px 0}
.ar-q summary::-webkit-details-marker{display:none}
.ar-q summary h3{margin:0; font-size:17.5px}
.ar-q summary::after{content:""; flex:0 0 auto; width:9px; height:9px; border-right:1.6px solid var(--muted); border-bottom:1.6px solid var(--muted);
  transform:rotate(45deg); margin-top:-4px; transition:transform 220ms var(--ease-out,ease)}
.ar-q[open] summary::after{transform:rotate(-135deg); margin-top:4px}
.ar-q p{margin:0 0 18px}

/* Products named in the article. */
.ar-products{margin:48px 0 0}
.ar-pgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:12px}
.ar-p{display:flex; flex-direction:column; border-radius:16px; overflow:hidden; background:var(--card); text-decoration:none !important; color:var(--cream) !important}
.ar-p img{width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; transition:transform 600ms var(--ease-out,ease)}
.ar-p span{padding:12px 14px 2px; font-size:15px; font-weight:600; line-height:1.4}
.ar-p b{padding:0 14px 14px; font-size:13.5px; color:var(--tan); font-weight:600}
@media (hover:hover){ .ar-p:hover img{transform:scale(1.04)} }

/* Sidebar. */
.ar-toc{padding:20px 22px; border-radius:18px; background:var(--card)}
.ar-toc p{margin:0 0 10px; font-size:13px; font-weight:700; color:var(--muted)}
.ar-toc ol{margin:0; padding:0; list-style:none; display:grid; gap:2px}
.ar-toc a{display:block; padding:6px 0; color:var(--muted); font-size:14.5px; line-height:1.5; text-decoration:none}
.ar-toc a:hover,.ar-toc a.on{color:var(--cream)}
.ar-cta{padding:22px; border-radius:18px; background:var(--cream); color:var(--ink,#16211a); display:grid; gap:10px}
.ar-cta b{font-size:18px}
.ar-cta p{margin:0; font-size:14.5px; line-height:1.6; color:#4a574e}
.ar-cta .btn{justify-content:center; background:#16211a; color:var(--cream)}
.ar-cta .btn:hover{background:#263c2e}
.ar-cta .pay-logos i{border:1px solid #e6e0d3}

/* More to read. */
.ar-related{max-width:1100px; padding-block:24px 80px; border-top:1px solid var(--line)}
.ar-related h2{margin:32px 0 20px; font-size:clamp(22px,2.6vw,30px)}
.ar-rgrid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px}
.ar-r{display:flex; flex-direction:column; gap:12px; color:var(--cream); text-decoration:none}
.ar-r img{width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; border-radius:16px; transition:transform 600ms var(--ease-out,ease)}
.ar-r span{font-size:16.5px; font-weight:600; line-height:1.5}
.ar-related > p a{color:var(--cream); text-underline-offset:4px}
@media (hover:hover){ .ar-r:hover img{transform:scale(1.03)} }

@media(max-width:980px){
  .ar-grid{grid-template-columns:1fr; gap:28px; padding-block:28px 24px}
  .ar-side{position:static}
  .ar-toc{display:none}
  .ar-rgrid{grid-template-columns:1fr}
  .ar-r{flex-direction:row; align-items:center}
  .ar-r img{width:120px; flex:0 0 auto}
}
@media(max-width:600px){
  .ar-heroimg{aspect-ratio:4/3; border-radius:16px}
  .ar-body{font-size:16.5px}
  .ar-facts,.ar-answer{padding:18px}
  .ar-facts th{width:38%}
  .ar-pgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* Comparison rows become cards on a phone: the point, kartoon, then them. */
  .ar-body .tablewrap table.vs{min-width:0}
  .ar-body table.vs thead{display:none}
  .ar-body table.vs,.ar-body table.vs tbody,.ar-body table.vs tr{display:block; width:100%}
  .ar-body table.vs tr{border-bottom:1px solid var(--line); padding:12px 14px}
  .ar-body table.vs th[scope="row"],.ar-body table.vs td{display:block; border:0; padding:3px 0}
  .ar-body table.vs td::before{content:attr(data-label); display:block; font-size:12.5px; color:var(--muted); opacity:.8}
}
@media (prefers-reduced-motion:reduce){ .ar-p img,.ar-r img,.ar-q summary::after{transition:none} }

/* ── The articles list ──────────────────────────────────────── */
.bl-head{padding-bottom:10px}
.bl-head h1{max-width:20ch}
.bl-lede{margin:16px 0 0; max-width:56ch; font-size:17.5px; line-height:1.7; color:var(--muted)}
.bl-chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:24px}
.bl-chips a{padding:9px 16px; border-radius:999px; border:1px solid var(--line); color:var(--cream); font-size:14.5px; text-decoration:none}
.bl-chips a:hover{border-color:var(--cream)}
.bl-chips small{color:var(--muted); margin-inline-start:4px}
.bl-wrap{max-width:1100px; padding-bottom:80px}
.bl-sec{padding-top:40px; scroll-margin-top:16px}
.bl-sec h2{margin:0 0 20px; font-size:clamp(22px,2.6vw,30px)}
.bl-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px 16px}
.bl-card{display:flex; flex-direction:column; gap:10px; color:var(--cream); text-decoration:none}
.bl-card img{width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; border-radius:16px; background:var(--card); transition:transform 600ms var(--ease-out,ease)}
.bl-card.big{grid-column:span 2; grid-row:span 1}
.bl-card.big img{aspect-ratio:2/1.03}
.bl-t{font-size:15.5px; font-weight:600; line-height:1.45}
.bl-card.big .bl-t{font-size:19px}
.bl-d{font-size:13.5px; line-height:1.6; color:var(--muted); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
@media (hover:hover){ .bl-card:hover img{transform:scale(1.03)} }
@media(max-width:860px){
  .bl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bl-card.big{grid-row:auto}
  .bl-card.big img{aspect-ratio:3/2}
}
@media(max-width:560px){
  .bl-grid{grid-template-columns:1fr; gap:14px}
  .bl-card.big{grid-column:auto}
  /* After the first, each article is a short row: photo beside its title. */
  .bl-card:not(.big){display:grid; grid-template-columns:104px 1fr; grid-template-rows:auto auto; column-gap:14px; row-gap:4px; align-items:start}
  .bl-card:not(.big) img{grid-row:1 / 3; border-radius:12px}
  .bl-card:not(.big) .bl-t{font-size:15.5px}
  .bl-card:not(.big) .bl-d{font-size:13px; -webkit-line-clamp:2}
}