/* Perch guide/comparison pages — light only, shared with the landing page palette */
:root{
  --ground:#F7F6F2; --ground-2:#EDECE8; --card:#FFFFFF; --ink:#1D1D1F; --ink-2:#6E6E73;
  --faint:#98989D; --line:#E6E5DF; --hair:rgba(0,0,0,.08);
  --butter:#F2CF5B; --sky:#7DB4E6; --mint:#7FCB9B; --peach:#F0A07A; --rose:#E68AA6; --lilac:#B39DE0;
  --yes:#3D8B57; --no:#B0B0B5;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue",sans-serif;
  font-size:17.5px; line-height:1.65; -webkit-font-smoothing:antialiased; text-wrap:pretty;
}
main{max-width:760px; margin:0 auto; padding:40px 24px 96px}
a{color:inherit}
h1{font-size:clamp(1.9rem,5vw,2.6rem); letter-spacing:-.022em; line-height:1.12; margin:.2em 0 .3em; text-wrap:balance}
h2{font-size:1.38rem; letter-spacing:-.015em; line-height:1.25; margin-top:2.4em; text-wrap:balance}
h3{font-size:1.08rem; letter-spacing:-.01em; margin-top:1.9em; margin-bottom:.3em}
p{margin:.85em 0}
ul,ol{padding-left:1.25em}
li{margin:.4em 0}
.muted{color:var(--ink-2)}
.small{font-size:.88rem}

/* header / breadcrumb */
.top{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:28px; font-size:.9rem}
.brand{display:inline-flex; align-items:center; gap:9px; text-decoration:none; font-weight:600; letter-spacing:-.2px; font-size:1rem}
.mark{width:20px; height:19px; position:relative; flex:none}
.mark::before{content:""; position:absolute; left:0; top:0; width:20px; height:4px; border-radius:2px; background:radial-gradient(circle at 2.5px 50%, #F5F5F7 0 .9px, transparent 1.1px), #26262A}
.mark i{position:absolute; left:2.5px; top:5.5px; width:15px; height:13px; border-radius:3px; background:
  linear-gradient(#EAEAED,#EAEAED) 4.5px 2.5px / 8px 3.5px no-repeat,
  linear-gradient(#EAEAED,#EAEAED) 4.5px 7px / 8px 3.5px no-repeat, #FFFFFF; border:1px solid rgba(0,0,0,.12)}
.mark i::before{content:""; position:absolute; left:2px; top:2.5px; width:2px; height:3.5px; border-radius:1px; background:var(--butter)}
.mark i::after{content:""; position:absolute; left:2px; top:7px; width:2px; height:3.5px; border-radius:1px; background:var(--sky)}
.top nav{color:var(--ink-2)}
.top nav a{text-decoration:none; margin-left:18px}
.top nav a:hover{color:var(--ink)}

/* quick answer — the block AI assistants and featured snippets lift */
.answer{
  background:var(--card); border:1px solid var(--line); border-left:4px solid var(--butter);
  border-radius:12px; padding:20px 22px; margin:1.6em 0 0;
}
.answer p{margin:0}
.answer p + p{margin-top:.7em}
.answer .label{display:block; font-size:.72rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); margin-bottom:8px}

/* tables */
.tablewrap{overflow-x:auto; margin:1.5em 0; border:1px solid var(--line); border-radius:12px; background:var(--card)}
table{border-collapse:collapse; width:100%; min-width:560px; font-size:.92rem; line-height:1.45}
th,td{padding:11px 15px; text-align:left; border-bottom:1px solid var(--line); vertical-align:top}
thead th{font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2); background:var(--ground); font-weight:600}
tbody tr:last-child td{border-bottom:none}
td:first-child,th[scope="row"]{font-weight:500}
.yes{color:var(--yes); font-weight:600}
.no{color:var(--no)}

/* app cards in the roundup */
.app{border-top:1px solid var(--line); padding-top:.6em}
.app h2{margin-top:1.6em}
.tagline{display:inline-block; font-size:.74rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-2); background:var(--ground-2); border-radius:999px; padding:3px 11px}
.meta{margin:.6em 0 .2em; font-size:.9rem; color:var(--ink-2)}
.meta b{color:var(--ink); font-weight:600}
.pro-con{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:1.1em 0}
.pro-con > div{background:var(--card); border:1px solid var(--line); border-radius:11px; padding:14px 16px}
.pro-con h4{margin:0 0 .4em; font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2); font-weight:600}
.pro-con ul{margin:0; padding-left:1.05em; font-size:.94rem}

/* disclosure */
.disclosure{background:var(--ground-2); border:1px solid var(--line); border-radius:11px; padding:14px 18px; font-size:.92rem; color:var(--ink-2); margin:1.4em 0}

/* faq */
.faq h3{margin-top:1.6em; font-size:1.05rem}

/* cta */
.cta{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:24px; margin-top:2.6em; display:flex; flex-direction:column; gap:10px; align-items:flex-start}
.badge{display:inline-flex; align-items:center; gap:10px; background:#000; color:#fff; border-radius:11px; padding:10px 18px 10px 14px; text-decoration:none; line-height:1.15; margin-top:4px}
.badge small{display:block; font-size:.66rem; opacity:.8}
.badge b{font-size:1rem; font-weight:600}

/* related + footer */
.related{margin-top:3em; border-top:1px solid var(--line); padding-top:1.4em}
.related h2{margin-top:0; font-size:1.05rem}
.related ul{list-style:none; padding:0; margin:.6em 0 0}
.related li{margin:.5em 0}
.related a{text-decoration:none; font-weight:500}
.related a:hover{text-decoration:underline}
.related span{color:var(--ink-2); font-weight:400}
.pfoot{margin-top:2.4em; border-top:1px solid var(--line); padding-top:1.2em; font-size:.85rem; color:var(--faint); display:flex; gap:18px; flex-wrap:wrap}
.pfoot a{text-decoration:none}

@media (max-width:620px){
  body{font-size:17px}
  main{padding:28px 18px 72px}
  .pro-con{grid-template-columns:1fr}
  .top nav a{margin-left:12px}
}