/* Guide pages in the v3/v4 look (v1 vibe: white + #f5f3ff wash, Lora + Inter, purple accent, ink sticker shadow).
   Pairs with /assets/details.css + details.js. Header/footer rules are copied from releases/v4/index.html,
   scoped to body>header so the article's own <header class="guide__head"> is not made sticky.
   Matrix: a real table at 720px+, under 720px each app becomes a block of labelled cells (data-label). */
:root{
  --white:#ffffff; --wash:#f5f3ff; --lilac:#e5ceff; --purple:#6310c3; --purple-2:#6c13d2;
  --ink:#1e1b34; --night:#0c0628; --gold:#fbbf24; --paper:#f7f7f9;
  --text:rgb(30 27 52/.8); --muted:rgb(30 27 52/.62); --line:rgb(30 27 52/.12); --hair:1px solid rgb(30 27 52/.08);
  --shadow:0 1px 2px rgb(30 27 52/.06),0 8px 24px -8px rgb(30 27 52/.12);
  --sticker:11px 10px 0 var(--ink);
  --r-ctl:10px; --r-card:20px; --r-pill:999px;
  --serif:"Lora",Georgia,serif; --sans:"Inter",system-ui,sans-serif; --mono:ui-monospace,"SF Mono",Menlo,monospace;
  --wrap:1200px; --gut:clamp(20px,4vw,40px);
}
@font-face{font-family:"Lora";font-weight:400;font-display:swap;src:url(/assets/lora-400.woff2) format("woff2")}
@font-face{font-family:"Lora";font-weight:700;font-display:swap;src:url(/assets/lora-700.woff2) format("woff2")}
@font-face{font-family:"Inter";font-weight:400;font-display:swap;src:url(/assets/inter-400.woff2) format("woff2")}
@font-face{font-family:"Inter";font-weight:700;font-display:swap;src:url(/assets/inter-700.woff2) format("woff2")}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px}
body{margin:0;background:var(--white);color:var(--text);font:400 17px/1.55 var(--sans);overflow-x:clip;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--purple)}
h1,h2,h3{color:var(--ink);margin:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.skip-link{position:absolute;left:-9999px;top:0;z-index:60;padding:8px 16px;background:var(--white);color:var(--ink)}
.skip-link:focus{left:8px;top:8px}
a:focus-visible,.btn:focus-visible,.guide-matrix:focus-visible{outline:2px solid var(--purple-2);outline-offset:3px}

/* buttons (v4) */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border-radius:var(--r-ctl);font:700 16px/1 var(--sans);text-decoration:none;transition:background .15s,color .15s,border-color .15s}
.btn-primary{background:var(--purple);color:var(--white)}
.btn-primary:hover{background:var(--ink)}

/* header (v4) */
body>header{position:sticky;top:0;z-index:50;background:var(--white);border-bottom:var(--hair)}
.bar{display:flex;align-items:center;gap:28px;height:64px}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font:700 18px/1 var(--sans);letter-spacing:-.01em}
.brand img{width:34px;height:34px;border-radius:8px}
.bar nav{display:flex;gap:24px;margin-left:auto}
.bar nav a{color:var(--ink);text-decoration:none;font-size:15px}
.bar nav a:hover{color:var(--purple)}
.bar .btn{min-height:40px;padding:0 16px;font-size:15px}
@media (max-width:760px){.bar nav{display:none}.bar .btn{margin-left:auto}}

/* footer (v4) */
footer{background:var(--night);color:rgb(255 255 255/.6);font-size:15px;padding:56px 0 40px}
footer .wrap{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:32px}
footer h4{margin:0 0 12px;color:var(--white);font:700 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
footer a{color:rgb(255 255 255/.75);text-decoration:none}
footer a:hover{color:var(--white)}
footer .brand{color:var(--white)}
footer .copy{margin-top:16px}
@media (max-width:760px){footer .wrap{grid-template-columns:repeat(2,minmax(0,1fr))}footer .wrap>div:first-child{grid-column:1/-1}}

/* article */
.guide{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut) clamp(72px,9vw,120px)}
.guide h1,.guide h2,.guide h3{text-wrap:balance}
.guide h1{font:700 clamp(40px,5.4vw,72px)/1.02 var(--serif);letter-spacing:-.03em;max-width:14ch}
.guide h2{font:700 clamp(30px,3.6vw,46px)/1.06 var(--serif);letter-spacing:-.025em;margin:0 0 18px}
.guide h3{font:700 clamp(20px,1.6vw,24px)/1.2 var(--serif);letter-spacing:-.01em}
.guide p,.guide li,.guide dd{max-width:65ch}
.guide .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.guide__section{margin-top:clamp(72px,8vw,112px)}
.guide__note{font-size:15px;color:var(--muted)}
.guide__byline{font:700 12px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--purple)}

/* head: full-bleed lavender wash + halftone dots (same recipe as details.css .dots) */
.guide__head{position:relative;isolation:isolate;display:grid;gap:32px;padding:clamp(48px,6vw,88px) 0 clamp(56px,6vw,88px)}
.guide__head::before{content:"";position:absolute;z-index:-2;inset:0 calc(50% - 50vw);background:var(--wash)}
.guide__head::after{content:"";position:absolute;z-index:-1;top:-160px;left:-180px;width:520px;aspect-ratio:1;pointer-events:none;
  background:radial-gradient(circle,#dcc2ff 0 2.4px,transparent 2.9px) 0 0/12px 12px;
  -webkit-mask:radial-gradient(closest-side,#000 0,rgb(0 0 0/.85) 30%,transparent 100%);mask:radial-gradient(closest-side,#000 0,rgb(0 0 0/.85) 30%,transparent 100%)}
.guide__lede>*{margin:0}
.guide__lede>*+*{margin-top:18px}
.guide__lede>p:not([class]){font-size:clamp(17px,1.4vw,19px);color:var(--text)}
.guide__disclosure{padding:14px 18px;background:var(--white);border-left:3px solid var(--purple);border-radius:0 var(--r-ctl) var(--r-ctl) 0;font-size:15px;color:var(--muted)}
.guide__disclosure strong{color:var(--ink)}
@media (min-width:960px){.guide__head{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:64px;align-items:center}}
@media (max-width:520px){.guide__head::after{width:340px;top:-140px;left:-170px}}

/* quick picks: the sticker card */
.guide-quick{margin-right:11px;background:var(--white);border:2px solid var(--ink);border-radius:var(--r-card);box-shadow:var(--sticker);padding:24px 26px}
.guide-quick__label{display:inline-flex;margin:0 0 10px;padding:6px 12px;border-radius:var(--r-pill);background:var(--lilac);color:var(--purple);font:700 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.guide-quick ol{list-style:none;margin:0;padding:0;counter-reset:q}
.guide-quick li{counter-increment:q;display:grid;grid-template-columns:4ch 1fr;gap:0 10px;padding:12px 0;border-top:var(--hair);max-width:none}
.guide-quick li:first-child{border-top:0}
.guide-quick li::before{content:counter(q,decimal-leading-zero);grid-row:span 2;font:700 26px/1 var(--serif);letter-spacing:-.03em;color:var(--lilac);font-variant-numeric:tabular-nums}
.guide-quick li span{font-size:14px;color:var(--muted)}
.guide-quick li a{font:700 18px/1.3 var(--serif);color:var(--ink);text-decoration:none}
.guide-quick li a:hover{color:var(--purple)}
.guide-quick li.is-pick::before{color:var(--purple)}
.guide-quick li.is-pick a{color:var(--purple)}
.guide-quick__more{display:inline-block;margin-top:6px;min-height:44px;line-height:44px;font:700 15px/44px var(--sans);text-decoration:none}
.guide-quick__more:hover{text-decoration:underline;text-underline-offset:3px}
@media (max-width:520px){.guide-quick{margin-right:6px;box-shadow:6px 6px 0 var(--ink);padding:20px}}

/* app cards */
.guide-cards{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;margin-top:28px;padding-right:11px}
@media (min-width:720px){.guide-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}}
.guide-card{display:flex;flex-direction:column;gap:8px;padding:24px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--white);scroll-margin-top:88px}
@supports (grid-template-rows:subgrid){
  .guide-card:not(.guide-card--pick){display:grid;grid-template-rows:subgrid;grid-row:span 8;row-gap:8px;align-content:start}
}
.guide-card p{margin:0}
.guide-card__name{margin:0}
.guide-card--pick{grid-column:1/-1;border:2px solid var(--ink);background:var(--wash);box-shadow:var(--sticker);padding:0 32px 32px;overflow:hidden}
.guide-card--pick>.guide-card__label{grid-column:1/-1;margin:0 -32px 24px;padding:10px 32px;background:var(--ink);color:var(--white);letter-spacing:.08em}
.guide-card--pick>.guide-card__label::before{content:"01 / ";color:var(--gold)}
.guide-card__label{font:700 12px/1.3 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--purple)}
.guide-card--pick .guide-card__name{font-size:clamp(30px,3vw,40px);letter-spacing:-.025em}
.guide-card__dev{font-size:14px;color:var(--muted)}
.guide-card__best{font-size:16px;color:var(--ink)}
.guide-card .guide-card__price{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;padding-top:12px;margin-top:8px;border-top:var(--hair);font-variant-numeric:tabular-nums}
.guide-card__from{color:var(--muted);font-size:15px}
.guide-card__from strong{font:700 26px/1.1 var(--sans);letter-spacing:-.02em;color:var(--ink)}
.guide-card__free{display:inline-flex;padding:5px 10px;border-radius:var(--r-pill);background:var(--lilac);color:var(--purple);font:700 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.guide-card__sub{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.guide-card__tags{list-style:none;margin:8px 0 0;padding:0;font-size:15px;color:var(--ink)}
.guide-card__tags li{position:relative;padding:4px 0 4px 18px}
.guide-card__tags li::before{content:"";position:absolute;left:0;top:.85em;width:7px;height:7px;border-radius:50%;background:var(--purple)}
.guide-card__watch{font-size:14px;color:var(--muted)}
.guide-card__watch strong{color:var(--ink)}
.guide-card__cta{display:inline-flex;align-items:center;align-self:flex-start;justify-self:start;margin-top:auto;min-height:44px;padding:0 18px;border:1px solid rgb(30 27 52/.18);border-radius:var(--r-ctl);background:var(--white);color:var(--ink);font:700 15px/1 var(--sans);text-decoration:none;transition:background .15s,color .15s,border-color .15s}
.guide-card__cta:hover{border-color:var(--ink)}
.guide-card--pick .guide-card__cta,.guide-card__cta--primary{min-height:48px;padding:0 22px;border-color:var(--purple);background:var(--purple);color:var(--white);font-size:16px}
.guide-card--pick .guide-card__cta:hover,.guide-card__cta--primary:hover{border-color:var(--ink);background:var(--ink)}
@media (min-width:960px){
  .guide-card--pick{display:grid;grid-template-columns:1fr 1fr;column-gap:48px;align-content:start}
  .guide-card--pick>*{grid-column:1}
  .guide-card--pick>.guide-card__tags,.guide-card--pick>.guide-card__watch,.guide-card--pick>.guide-card__cta{grid-column:2}
  .guide-card--pick>.guide-card__label{grid-column:1/-1;grid-row:1}
  .guide-card--pick>.guide-card__name{grid-row:2}
  .guide-card--pick>.guide-card__dev{grid-row:3}
  .guide-card--pick>.guide-card__best{grid-row:4}
  .guide-card--pick>.guide-card__price{grid-row:5}
  .guide-card--pick>.guide-card__sub{grid-row:6}
  .guide-card--pick>.guide-card__tags{grid-row:2/span 2;margin:0;align-self:start}
  .guide-card--pick>.guide-card__watch{grid-row:4;align-self:start;margin:0}
  .guide-card--pick>.guide-card__cta{grid-row:5/span 2;align-self:end;justify-self:start;margin-top:0}
}
@media (max-width:719px){.guide-card--pick .guide-card__cta{display:flex;align-self:stretch;justify-content:center}}
@media (max-width:520px){.guide-cards{padding-right:6px}.guide-card--pick{box-shadow:6px 6px 0 var(--ink);padding:0 20px 24px}.guide-card--pick>.guide-card__label{margin:0 -20px 20px;padding:10px 20px}}

/* capability matrix: ✓ / — only */
.guide-matrix{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:28px 0 18px;border:2px solid var(--ink);border-radius:var(--r-card);background:var(--white)}
.guide-matrix table{width:100%;min-width:640px;border-collapse:collapse;font-size:15px}
.guide-matrix thead th{white-space:normal;min-width:9ch}
.guide-matrix thead th>span{display:block;white-space:nowrap}
.guide-matrix abbr{text-decoration:none}
.guide-matrix th,.guide-matrix td{padding:13px 16px;border-bottom:var(--hair);text-align:center}
.guide-matrix thead th{font:700 11px/1.35 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);vertical-align:bottom;background:var(--paper);border-bottom:1px solid var(--line)}
.guide-matrix tbody tr:last-child>*{border-bottom:0}
.guide-matrix th:first-child{position:sticky;left:0;z-index:1;text-align:left;background:var(--white);border-right:1px solid var(--line);min-width:14ch}
.guide-matrix thead th:first-child{background:var(--paper)}
.guide-matrix tbody th,.guide-matrix td{background-color:var(--white)}
.guide-matrix tbody th{font:700 16px/1.3 var(--serif);color:var(--ink)}
.guide-matrix td{color:rgb(30 27 52/.35)}
.guide-matrix td.yes{color:var(--purple);font-weight:700}
.guide-matrix .is-pick th,.guide-matrix .is-pick td{background:var(--wash)}
.guide-matrix .is-pick th{box-shadow:inset 3px 0 0 var(--purple);color:var(--purple)}
@media (max-width:719px){
  .guide-matrix{overflow:visible;border:0;border-top:2px solid var(--ink);border-radius:0;background:none}
  .guide-matrix table,.guide-matrix tbody{display:block;width:auto;min-width:0}
  .guide-matrix thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .guide-matrix tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 16px;padding:16px 0;border-bottom:var(--hair)}
  .guide-matrix th,.guide-matrix td{padding:0;border:0;text-align:left;background:none}
  .guide-matrix tbody th:first-child{grid-column:1/-1;position:static;min-width:0;border:0;padding:0 0 4px;font:700 19px/1.3 var(--serif);background:none}
  .guide-matrix td{display:flex;gap:8px;align-items:baseline;font:700 11px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.04em}
  .guide-matrix td>span[aria-hidden]{font-size:14px}
  .guide-matrix td::after{content:attr(data-label)}
  .guide-matrix td:not(.yes)::after{color:var(--muted);font-weight:400}
  .guide-matrix td.yes::after{color:var(--ink)}
  .guide-matrix .is-pick{padding-inline:16px;background:var(--wash);box-shadow:inset 3px 0 0 var(--purple);border-radius:0 var(--r-ctl) var(--r-ctl) 0}
  .guide-matrix .is-pick th,.guide-matrix .is-pick td{background:none;box-shadow:none}
}
@media (min-width:480px) and (max-width:719px){.guide-matrix tr{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:720px){
  .guide-matrix table{table-layout:fixed}
  .guide-matrix th:first-child{width:20%}
  .guide-matrix thead th:not(:first-child),.guide-matrix td{padding-inline:8px}
}
.guide-matrix+.guide__note{padding-left:18px}
.guide-matrix+.guide__note li+li{margin-top:8px}
.guide__note strong{color:var(--ink)}

/* how to choose: need left, app right; stacks on mobile */
.guide-choose{margin:28px 0;border-top:2px solid var(--ink)}
.guide-choose>div{display:grid;grid-template-columns:minmax(0,1fr);gap:4px 32px;padding:18px 0;border-bottom:var(--hair)}
@media (min-width:750px){.guide-choose>div{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.guide-choose dt{color:var(--ink);font:700 18px/1.35 var(--serif)}
.guide-choose dd{margin:0}
.guide-choose dd a{font-weight:700}

/* FAQ, close, related */
.guide h3+p{margin-top:8px}
.guide section>h3{margin-top:36px}
.guide section>p+p{margin-top:16px}
.guide__close{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;margin-top:56px;padding:28px 32px;border-radius:var(--r-card);background:var(--ink);color:var(--white);font:700 clamp(20px,2vw,26px)/1.3 var(--serif);max-width:none!important}
.guide__close .guide-card__cta--primary:hover{border-color:var(--white);background:var(--white);color:var(--ink)}
#related+ul{margin:0;padding:0;list-style:none;border-top:var(--hair)}
#related+ul li{padding:14px 0;border-bottom:var(--hair)}
#related+ul a{font-weight:700;text-decoration:none}
#related+ul a:hover{text-decoration:underline;text-underline-offset:3px}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}