/* TaskYou /compare — shared styles, extracted from index.html so the
   comparison section matches the landing page exactly. */
:root{
  --bg:#0e0b16; --panel:#15111f; --panel2:#1b1628; --line:#241e38; --line2:#2e2746;
  --text:#f3eaff; --muted:#9b93bd; --dim:#6f6790;
  --orange:#ff7a3c; --orange-d:#c9432a; --green:#7cf6b0; --yellow:#ffd23f; --red:#ff5f57;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Space Grotesk',system-ui,-apple-system,sans-serif; background:var(--bg); color:var(--text);
  line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
/* CRT scanlines */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:9999; opacity:.5;
  background:repeating-linear-gradient(0deg, rgba(255,255,255,.022) 0 1px, transparent 1px 3px);
}
.grid-bg{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%, #000 0%, transparent 75%);
          mask-image:radial-gradient(120% 90% at 50% 0%, #000 0%, transparent 75%);
}
.wrap{max-width:1080px; margin:0 auto; padding:0 1.5rem;}
.prose{max-width:820px;}
a{color:inherit; text-decoration:none;}
.mono{font-family:'JetBrains Mono',monospace;}

/* NAV */
nav{position:sticky; top:0; z-index:100; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); background:rgba(14,11,22,.72); border-bottom:1px solid var(--line);}
nav .wrap{display:flex; align-items:center; justify-content:space-between; height:60px;}
.brand{display:flex; align-items:center; gap:.55rem; font-weight:700; font-size:1.05rem;}
.brand img{height:26px; width:auto; image-rendering:pixelated;}
.navlinks{display:flex; align-items:center; gap:1.4rem; font-family:'JetBrains Mono',monospace; font-size:.8rem; color:var(--muted);}
.navlinks a:hover{color:var(--text);}
.navlinks a.active{color:var(--orange);}
.navlinks .desktop-only{display:inline;}
@media(max-width:640px){.navlinks .desktop-only{display:none;}}
.btn{display:inline-flex; align-items:center; gap:.5rem; font-family:'JetBrains Mono',monospace; font-weight:700; font-size:.8rem; padding:.5rem .9rem; border-radius:8px; transition:transform .12s ease;}
.btn:hover{transform:translateY(-1px);}
.btn-primary{background:var(--orange); color:#1a1320; box-shadow:0 4px 0 var(--orange-d);}
.btn-primary:active{transform:translateY(3px); box-shadow:0 1px 0 var(--orange-d);}

/* HERO / PAGE HEAD */
header.phead{padding:3.5rem 0 1.5rem; position:relative;}
.eyebrow{font-family:'JetBrains Mono',monospace; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--orange); margin-bottom:.8rem;}
h1.headline{font-weight:700; font-size:clamp(2.1rem,4.6vw,3.1rem); line-height:1.04; letter-spacing:-.02em; margin-bottom:.8rem;}
h1.headline .t{color:var(--orange);}
.oneline{font-family:'JetBrains Mono',monospace; font-size:1rem; color:var(--green); line-height:1.55; max-width:70ch; border-left:2px solid var(--line2); padding-left:1rem;}
.oneline b{color:var(--text); font-weight:600;}

/* CONTENT */
section.body{padding:2rem 0 3rem;}
.body h2{font-weight:700; font-size:clamp(1.4rem,2.6vw,1.8rem); letter-spacing:-.01em; margin:2.4rem 0 .9rem;}
.body h3{font-weight:600; font-size:1.12rem; margin:1.6rem 0 .5rem; color:var(--text);}
.body p{color:var(--muted); margin:.7rem 0; max-width:78ch;}
.body p strong, .body li strong{color:var(--text); font-weight:600;}
.body em{color:var(--text); font-style:italic;}
.body a{color:var(--green); text-decoration:none; border-bottom:1px solid rgba(124,246,176,.3);}
.body a:hover{border-bottom-color:var(--green);}
.body ul, .body ol{color:var(--muted); margin:.7rem 0 .7rem 1.2rem; max-width:78ch;}
.body li{margin:.4rem 0;}
.body code{font-family:'JetBrains Mono',monospace; font-size:.85em; background:#0a0812; border:1px solid var(--line2); border-radius:5px; padding:.08rem .35rem; color:var(--green);}
.body pre{font-family:'JetBrains Mono',monospace; font-size:.8rem; background:#0a0812; border:1px solid var(--line2); border-radius:10px; padding:1rem 1.1rem; overflow-x:auto; margin:1rem 0; color:var(--muted); line-height:1.5;}
.body pre code{background:none; border:none; padding:0; color:inherit;}
.body blockquote{border-left:3px solid var(--orange); background:var(--panel); border-radius:0 10px 10px 0; padding:.9rem 1.2rem; margin:1.2rem 0; color:var(--text);}
.body blockquote p{color:var(--text); margin:.3rem 0;}
.body hr{border:none; border-top:1px solid var(--line); margin:2.5rem 0;}
.note{font-size:.86rem; color:var(--dim); font-style:italic; margin-top:2rem;}

/* TABLES */
.tablewrap{overflow-x:auto; margin:1.3rem 0; border:1px solid var(--line2); border-radius:12px;}
table{border-collapse:collapse; width:100%; font-size:.9rem; min-width:520px;}
thead th{background:#181426; color:var(--text); font-weight:600; text-align:left; padding:.7rem .9rem; border-bottom:1px solid var(--line2); font-family:'JetBrains Mono',monospace; font-size:.78rem;}
tbody td{padding:.65rem .9rem; border-bottom:1px solid var(--line); color:var(--muted); vertical-align:top;}
tbody tr:last-child td{border-bottom:none;}
tbody tr:nth-child(even){background:rgba(255,255,255,.012);}
td.c, th.c{text-align:center;}
td strong, td b{color:var(--text);}
.yes{color:var(--green); font-weight:700;}
.no{color:var(--dim);}
.partial{color:var(--yellow);}
.legend{font-family:'JetBrains Mono',monospace; font-size:.74rem; color:var(--dim); margin-top:.7rem;}

/* CARD GRID (compare index) */
.cards{display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin:1.5rem 0;}
@media(max-width:680px){.cards{grid-template-columns:1fr;}}
.card{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:1.3rem; transition:border-color .15s ease, transform .15s ease; display:block;}
.card:hover{border-color:var(--orange); transform:translateY(-2px);}
.card h3{font-size:1.1rem; margin-bottom:.3rem; color:var(--text); border:none;}
.card p{color:var(--muted); font-size:.9rem; margin:.3rem 0 0;}
.card .arrow{color:var(--orange); font-family:'JetBrains Mono',monospace; font-size:.78rem; margin-top:.8rem; display:inline-block;}

/* back / pager */
.pager{display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid var(--line);}
.pager a{font-family:'JetBrains Mono',monospace; font-size:.8rem; color:var(--muted); border:1px solid var(--line2); border-radius:8px; padding:.5rem .8rem;}
.pager a:hover{border-color:var(--orange); color:var(--text);}

/* FOOTER */
footer{border-top:1px solid var(--line); padding:2.5rem 0 3.5rem; color:var(--dim); margin-top:2rem;}
footer .wrap{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem;}
footer .fbrand{display:flex; align-items:center; gap:.5rem; color:var(--muted); font-weight:600;}
footer .fbrand img{height:22px; width:auto; image-rendering:pixelated;}
footer .flinks{display:flex; gap:1.3rem; font-family:'JetBrains Mono',monospace; font-size:.78rem;}
footer .flinks a:hover{color:var(--text);}