/* freeinstead.com
   Design brief: we ask strangers to install software on their own machine, so the
   page has to read as trustworthy first and clever second. Plain, warm, unhurried.
   Nothing that resembles a download-farm or an AI listicle. */

:root{
  --paper:#fbfaf7;
  --card:#ffffff;
  --raise:#f3f1ec;
  --ink:#1c1a17;
  --ink-2:#4a463f;
  --ink-3:#7a7469;
  --rule:#e2ded4;
  --pine:#1f5d45;
  --pine-soft:#e4efe8;
  --clay:#9a4a30;
  --clay-soft:#f7e7e0;
  --amber:#8a6714;
  --amber-soft:#f7edd6;
  --lift:0 1px 2px rgba(28,26,23,.05), 0 10px 30px -18px rgba(28,26,23,.35);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#141312;
    --card:#1c1b19;
    --raise:#252320;
    --ink:#f0ece4;
    --ink-2:#bdb6a9;
    --ink-3:#8b8478;
    --rule:#332f2a;
    --pine:#6fbf9b;
    --pine-soft:#163025;
    --clay:#e0987f;
    --clay-soft:#33201a;
    --amber:#d9b45f;
    --amber-soft:#312716;
    --lift:0 1px 2px rgba(0,0,0,.5), 0 10px 30px -18px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"]{
  --paper:#141312; --card:#1c1b19; --raise:#252320;
  --ink:#f0ece4; --ink-2:#bdb6a9; --ink-3:#8b8478; --rule:#332f2a;
  --pine:#6fbf9b; --pine-soft:#163025; --clay:#e0987f; --clay-soft:#33201a;
  --amber:#d9b45f; --amber-soft:#312716;
  --lift:0 1px 2px rgba(0,0,0,.5), 0 10px 30px -18px rgba(0,0,0,.8);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Source Serif 4",Georgia,"Times New Roman",serif;
  font-size:18px; line-height:1.65; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.brand,.eyebrow,.btn,.tag,th,.flabel,.byline,.card-meta,summary{
  font-family:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif;
}
h1,h2,h3{margin:0;letter-spacing:-.02em;text-wrap:balance;line-height:1.12}
h1{font-size:clamp(2rem,5.2vw,3.15rem);font-weight:800}
h2{font-size:clamp(1.42rem,3vw,1.85rem);font-weight:700}
h3{font-size:1.06rem;font-weight:700;letter-spacing:-.01em}
p{margin:0}
a{color:var(--pine);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--pine);outline-offset:3px;border-radius:3px}
s{color:var(--ink-3)}
code{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;font-size:.87em;
  background:var(--raise);padding:.12em .38em;border-radius:3px}

.eyebrow{font-size:.7rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--pine)}

/* ---------- chrome ---------- */
header.site{border-bottom:1px solid var(--rule);background:var(--card)}
.bar{max-width:1020px;margin:0 auto;padding:16px 24px;display:flex;
  align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.brand{font-size:1.16rem;font-weight:800;letter-spacing:-.03em;color:var(--ink);text-decoration:none}
.brand .mark{color:var(--pine)}
header nav ul{list-style:none;display:flex;gap:18px;margin:0;padding:0;flex-wrap:wrap}
header nav a{font-family:"Bricolage Grotesque",sans-serif;font-size:.83rem;font-weight:500;
  color:var(--ink-2);text-decoration:none}
header nav a:hover,header nav a[aria-current]{color:var(--pine)}

main{max-width:1020px;margin:0 auto;padding:0 24px}
article{max-width:680px;margin:0 auto;padding:52px 0 40px;display:flex;flex-direction:column;gap:46px}
section{display:flex;flex-direction:column;gap:16px}
section p+p{margin-top:-2px}

/* ---------- hero ---------- */
.hero{display:flex;flex-direction:column;gap:14px}
.standfirst{font-size:1.16rem;color:var(--ink-2);line-height:1.55}
.byline{font-family:"Bricolage Grotesque",sans-serif;font-size:.76rem;color:var(--ink-3);
  letter-spacing:.02em;padding-top:4px;border-top:1px solid var(--rule)}

/* ---------- verdict ---------- */
.verdict{background:var(--card);border:1px solid var(--rule);border-left:3px solid var(--pine);
  border-radius:5px;padding:24px 26px;display:flex;flex-direction:column;gap:15px;box-shadow:var(--lift)}
.v-lead{font-size:1.12rem;line-height:1.5}
.v-grid{display:flex;flex-direction:column;gap:9px;border-top:1px solid var(--rule);padding-top:15px}
.v-row{display:grid;grid-template-columns:118px 1fr;gap:14px;align-items:baseline}
.v-k{font-family:"Bricolage Grotesque",sans-serif;font-size:.68rem;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.v-v{font-size:.96rem;color:var(--ink-2)}

/* ---------- cta ---------- */
.cta{background:var(--pine-soft);border:1px solid var(--rule);border-radius:5px;
  padding:26px;display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.cta h2{font-size:1.28rem}
.cta p{font-size:.96rem;color:var(--ink-2)}
.btn{display:inline-block;background:var(--pine);color:var(--paper);text-decoration:none;
  font-weight:700;font-size:1rem;padding:13px 26px;border-radius:4px;letter-spacing:-.01em}
.btn:hover{filter:brightness(1.12)}
.cta-meta{font-family:"Bricolage Grotesque",sans-serif;font-size:.76rem;color:var(--ink-3)}

/* ---------- comparison ---------- */
.scroll{overflow-x:auto;border:1px solid var(--rule);border-radius:5px;background:var(--card)}
table.cmp{border-collapse:collapse;width:100%;min-width:540px;font-size:.9rem}
table.cmp th{font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);text-align:left;padding:13px 16px;background:var(--raise);
  border-bottom:1px solid var(--rule)}
table.cmp td{padding:13px 16px;border-bottom:1px solid var(--rule);vertical-align:top;color:var(--ink-2)}
table.cmp tr:last-child td{border-bottom:0}
td.feat{color:var(--ink);font-weight:600;width:38%}
.tag{display:inline-block;font-family:"Bricolage Grotesque",sans-serif;font-size:.66rem;
  font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:3px}
td.y .tag{background:var(--pine-soft);color:var(--pine)}
td.n .tag{background:var(--clay-soft);color:var(--clay)}
td.p .tag{background:var(--amber-soft);color:var(--amber)}
table.cmp em{display:block;font-style:normal;font-size:.83rem;color:var(--ink-3);margin-top:5px;line-height:1.45}

/* ---------- honesty block ---------- */
.honest{background:var(--clay-soft);border:1px solid var(--rule);border-left:3px solid var(--clay);
  border-radius:5px;padding:24px 26px}
.honest h2{font-size:1.3rem}
.x-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.x-list li{padding-left:26px;position:relative;font-size:.97rem;color:var(--ink-2)}
.x-list li::before{content:"—";position:absolute;left:0;top:0;color:var(--clay);font-weight:700}
/* same list shape, used in prose where the clay accent would misread as a warning */
.x-list.plain li::before{color:var(--pine)}
.honest-foot{font-size:.94rem;color:var(--ink-2);border-top:1px solid var(--rule);padding-top:14px}

/* ---------- steps ---------- */
.steps{list-style:none;counter-reset:s;margin:0;padding:0;display:flex;flex-direction:column;gap:18px}
.steps li{counter-increment:s;position:relative;padding-left:50px;display:flex;flex-direction:column;gap:6px}
.steps li::before{
  content:counter(s);position:absolute;left:0;top:1px;width:32px;height:32px;border-radius:50%;
  background:var(--card);border:1px solid var(--rule);color:var(--pine);
  font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:.86rem;
  display:flex;align-items:center;justify-content:center}
.steps p{font-size:.97rem;color:var(--ink-2)}

/* ---------- faq ---------- */
.faq{display:flex;flex-direction:column;border:1px solid var(--rule);border-radius:5px;
  background:var(--card);overflow:hidden}
.faq details{border-bottom:1px solid var(--rule)}
.faq details:last-child{border-bottom:0}
.faq summary{cursor:pointer;padding:15px 20px;font-weight:700;font-size:.97rem;
  list-style:none;display:flex;justify-content:space-between;gap:14px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--pine);font-size:1.2rem;line-height:1;flex:0 0 auto}
.faq details[open] summary::after{content:"–"}
.faq summary:hover{background:var(--raise)}
.ans{padding:0 20px 17px;font-size:.96rem;color:var(--ink-2);display:flex;flex-direction:column;gap:10px}

.lnk{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:.94rem}

/* ---------- versus: the two-choice fork ---------- */
.picks-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pick-card{background:var(--card);border:1px solid var(--rule);border-radius:5px;
  padding:22px;display:flex;flex-direction:column;gap:11px;box-shadow:var(--lift)}
.pick-card h3{font-size:1.32rem;letter-spacing:-.02em}
.pick-card p{font-size:.94rem;color:var(--ink-2)}
.pick-card .eyebrow{color:var(--ink-3)}
.pick-card .btn{align-self:flex-start;margin-top:2px}
.btn-sm{font-size:.9rem;padding:10px 20px}
.pick-card:first-child{border-top:3px solid var(--pine)}
.pick-card:last-child{border-top:3px solid var(--amber)}

/* ---------- roundup: picks by use case (not a ranking) ---------- */
.pick-rows{display:flex;flex-direction:column;gap:13px}
.pick-row{background:var(--card);border:1px solid var(--rule);border-radius:5px;
  padding:21px 23px;display:flex;flex-direction:column;gap:9px;box-shadow:var(--lift)}
.pick-head{display:flex;align-items:baseline;gap:11px;flex-wrap:wrap}
.pick-head h3{font-size:1.24rem;letter-spacing:-.02em}
.pick-row .pill{font-family:"Bricolage Grotesque",sans-serif;font-size:.63rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;padding:3px 9px;border-radius:3px;
  background:var(--pine-soft);color:var(--pine);white-space:nowrap}
.best-for{font-family:"Bricolage Grotesque",sans-serif;font-size:.83rem;font-weight:600;
  color:var(--ink-3);letter-spacing:.005em}
.pick-row p{font-size:.95rem;color:var(--ink-2)}
.pick-foot{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  border-top:1px solid var(--rule);padding-top:12px;margin-top:2px}

/* ---------- related reading ---------- */
.related{border-top:1px solid var(--rule);padding-top:26px}
.rel-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.rel-list li{font-size:.95rem;color:var(--ink-3)}
.rel-list a{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;text-decoration:none}
.rel-list a:hover{text-decoration:underline}

/* ---------- home: comparison + guide strips ----------
   These share the page's single left edge with the card grid, and each opens with a
   hairline rule so consecutive strips read as separate sections rather than one
   run-on list. */
.vs-strip{margin:0;padding:32px 0 0;border-top:1px solid var(--rule);
  display:flex;flex-direction:column;gap:10px}
.vs-strip + .vs-strip{margin-top:36px}
.vs-strip:last-of-type{padding-bottom:84px}
.vs-strip h2{font-size:1.28rem}
.vs-strip p{color:var(--ink-2);font-size:.97rem;max-width:62ch}
.vs-row{display:flex;flex-wrap:wrap;gap:9px;margin-top:6px}
.vs-chip{font-family:"Bricolage Grotesque",sans-serif;font-size:.88rem;font-weight:600;
  background:var(--card);border:1px solid var(--rule);border-radius:999px;
  padding:8px 16px;text-decoration:none;color:var(--ink)}
.vs-chip:hover{border-color:var(--pine);color:var(--pine)}

@media(max-width:640px){
  .picks-2{grid-template-columns:1fr}
}

/* ---------- home ---------- */
/* Left-aligned, not centred: the hero shares the card grid's left edge so the page
   has one edge instead of two, while the measure stays readable. */
.home-hero{max-width:66ch;margin:0;padding:64px 0 38px;display:flex;flex-direction:column;gap:18px}
.promise{font-size:.97rem;color:var(--ink-3);border-left:2px solid var(--rule);padding-left:16px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(292px,1fr));gap:14px;padding-bottom:44px}
.card{background:var(--card);border:1px solid var(--rule);border-radius:5px;padding:20px 22px;
  text-decoration:none;display:flex;flex-direction:column;gap:9px;box-shadow:var(--lift)}
.card:hover{border-color:var(--pine)}
.swap{font-family:"Bricolage Grotesque",sans-serif;font-size:1.02rem;color:var(--ink);letter-spacing:-.01em}
.swap b{font-weight:800}
.swap .arw{color:var(--pine);padding:0 3px}
.card-note{font-size:.93rem;color:var(--ink-2);line-height:1.5}
.card-meta{font-size:.73rem;color:var(--ink-3);letter-spacing:.02em}

/* ---------- footer ---------- */
footer.site{border-top:1px solid var(--rule);background:var(--card);margin-top:40px}
.fwrap{max-width:1020px;margin:0 auto;padding:44px 24px 26px;display:grid;
  grid-template-columns:1.6fr 1fr;gap:40px}
.fwrap.solo{grid-template-columns:1fr}
.fnote{font-size:.9rem;color:var(--ink-3);margin-top:11px;max-width:44ch;line-height:1.55}
.flabel{font-family:"Bricolage Grotesque",sans-serif;font-size:.68rem;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);margin-bottom:11px}
.flist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.flist a{font-size:.9rem;color:var(--ink-2);text-decoration:none}
.flist a:hover{color:var(--pine);text-decoration:underline}
.copy{max-width:1020px;margin:0 auto;padding:0 24px 34px;font-size:.79rem;color:var(--ink-3)}

@media (max-width:680px){
  body{font-size:17px}
  article{padding-top:34px;gap:38px}
  .fwrap{grid-template-columns:1fr;gap:28px}
  .v-row{grid-template-columns:1fr;gap:2px}
  .cta{padding:22px}
  .verdict,.honest{padding:20px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}