/* Sorrel — shared styles for comparison / alternative pages.
   Reuses the exact design tokens from the landing page (docs/index.html)
   so every comparison page matches the site visually. Link with:
   <link rel="stylesheet" href="/assets/compare.css"> */

:root{
  --bg:#fbf9f4;--surface:#ffffff;--surface-2:#f4efe5;--ink:#1d1813;--muted:#6b6256;
  --border:#e7e0d2;--accent:#9a5417;--accent-2:#d68a3e;--accent-ink:#fff;
  --ok:#2f7d4f;--no:#8f5a2a;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,monospace;--maxw:1120px;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:var(--font);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;line-height:1.6;}
a{color:var(--accent);}
img{max-width:100%;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px;}
.narrow{max-width:760px;}
.skip{position:absolute;left:-999px;}
.skip:focus{left:8px;top:8px;background:var(--accent);color:#fff;padding:10px 14px;border-radius:8px;z-index:20;text-decoration:none;}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:4px;}

/* ---- nav (matches landing) ---- */
nav{display:flex;align-items:center;justify-content:space-between;padding:22px 0;}
.brand{display:flex;align-items:center;gap:11px;font-weight:700;font-size:19px;letter-spacing:-.02em;color:var(--ink);text-decoration:none;}
.brand .ico{width:30px;height:30px;border-radius:8px;background:linear-gradient(160deg,var(--accent-2),var(--accent));display:flex;align-items:center;justify-content:center;}
.brand .ico span{display:flex;gap:2.5px;align-items:center;}
.brand .ico i{width:2.6px;border-radius:2px;background:#fff;display:block;}
.brand .ico i:nth-child(1){height:7px}.brand .ico i:nth-child(2){height:13px}.brand .ico i:nth-child(3){height:17px}.brand .ico i:nth-child(4){height:11px}.brand .ico i:nth-child(5){height:7px}
.nav-links{display:flex;align-items:center;gap:24px;font-size:15px;}
.nav-links a{color:var(--muted);text-decoration:none;}.nav-links a:hover{color:var(--ink);}

/* ---- buttons (matches landing) ---- */
.btn{font-weight:650;font-size:16px;text-decoration:none;padding:14px 24px;border-radius:13px;border:1px solid transparent;display:inline-flex;align-items:center;gap:9px;transition:transform .05s ease;}
.btn:active{transform:translateY(1px);}
.btn-primary{background:linear-gradient(160deg,var(--accent-2),var(--accent));color:var(--accent-ink);box-shadow:0 10px 26px rgba(181,101,31,.30);}
.btn-ghost{background:#fff;color:var(--ink);border-color:var(--border);}

/* ---- page header ---- */
.phead{position:relative;overflow:hidden;border-bottom:1px solid var(--border);
       background:radial-gradient(1100px 520px at 78% -8%,#f6ead9 0%,rgba(246,234,217,0) 60%),linear-gradient(180deg,#fdfbf7,var(--bg));}
.crumbs{font-size:13.5px;color:var(--muted);padding:6px 0 0;}
.crumbs a{color:var(--muted);text-decoration:none;}.crumbs a:hover{color:var(--accent);}
.phead .inner{padding:30px 0 56px;max-width:780px;}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--accent);
         background:rgba(181,101,31,.09);border:1px solid rgba(181,101,31,.18);padding:6px 13px;border-radius:999px;margin-bottom:20px;}
h1{font-size:clamp(34px,4.6vw,54px);line-height:1.07;letter-spacing:-.03em;font-weight:800;margin-bottom:18px;}
h1 .grad{background:linear-gradient(120deg,var(--accent),var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent;}
.lede{font-size:20px;color:var(--muted);max-width:60ch;}

/* ---- verdict box ---- */
.verdict{background:var(--surface);border:1px solid var(--border);border-left:4px solid var(--accent);
         border-radius:14px;padding:22px 24px;margin-top:28px;box-shadow:0 2px 6px rgba(31,24,15,.05);}
.verdict .vk{font-size:13px;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px;}
.verdict p{font-size:16.5px;color:var(--ink);}
.verdict p+p{margin-top:12px;}

/* ---- sections ---- */
.section{padding:60px 0;}
.section.alt{background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
.kicker{font-size:14px;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.08em;margin-bottom:12px;}
.section h2{font-size:clamp(26px,3.4vw,36px);letter-spacing:-.025em;font-weight:800;max-width:24ch;margin-bottom:14px;}
.section .sub{font-size:18px;color:var(--muted);max-width:60ch;}
.section .body{font-size:17px;color:var(--muted);max-width:68ch;}
.section .body p+p{margin-top:14px;}
.section .body strong{color:var(--ink);font-weight:650;}

/* ---- comparison table ---- */
.ctable-wrap{margin-top:30px;overflow-x:auto;border:1px solid var(--border);border-radius:16px;background:var(--surface);}
table.ctable{border-collapse:collapse;width:100%;min-width:560px;font-size:15.5px;}
.ctable th,.ctable td{text-align:left;padding:15px 18px;border-bottom:1px solid var(--border);vertical-align:top;}
.ctable thead th{font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);background:var(--surface-2);}
.ctable tbody tr:last-child td{border-bottom:0;}
.ctable .feat{font-weight:650;color:var(--ink);width:34%;}
.ctable th.feat{text-align:left;}
.ctable-wrap:focus-visible{outline:3px solid var(--accent);outline-offset:-3px;}
.ctable col.sorrel,.ctable th.sorrel{background:rgba(181,101,31,.06);}
.ctable td.sorrel{background:rgba(181,101,31,.06);border-left:1px solid rgba(181,101,31,.14);border-right:1px solid rgba(181,101,31,.14);}
.ctable thead th.sorrel{color:var(--accent);font-weight:800;border-left:1px solid rgba(181,101,31,.14);border-right:1px solid rgba(181,101,31,.14);}
.yes{color:var(--ok);font-weight:700;}
.no{color:var(--no);font-weight:700;}
.mark{font-weight:800;margin-right:5px;}

/* ---- pick cards (honest recommendation) ---- */
.picks{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:30px;}
.pick{background:var(--bg);border:1px solid var(--border);border-radius:16px;padding:24px;}
.pick.sorrel{background:rgba(181,101,31,.05);border-color:rgba(181,101,31,.22);}
.pick h3{font-size:18px;letter-spacing:-.01em;margin-bottom:14px;}
.pick ul{list-style:none;}
.pick li{display:flex;gap:10px;padding:7px 0;font-size:15.5px;color:var(--muted);}
.pick li::before{content:"";flex:0 0 auto;width:18px;height:18px;margin-top:3px;border-radius:50%;
                 background:rgba(181,101,31,.14);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b5651f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
                 background-size:12px;background-repeat:no-repeat;background-position:center;}
.pick.neutral li::before{background-color:var(--surface-2);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6256' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");}

/* ---- feature cards ---- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:36px;}
.card{background:var(--bg);border:1px solid var(--border);border-radius:16px;padding:24px;}
.section.alt .card{background:var(--surface-2);}
.card .cico{width:40px;height:40px;border-radius:11px;background:rgba(181,101,31,.10);display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:15px;}
.card h3{font-size:17px;letter-spacing:-.01em;margin-bottom:7px;}
.card p{font-size:14.5px;color:var(--muted);}

/* ---- honest callout ---- */
.callout{background:var(--surface-2);border:1px solid var(--border);border-radius:14px;padding:20px 22px;margin-top:26px;font-size:16px;color:var(--ink);}
.callout b{color:var(--accent);}

/* ---- FAQ ---- */
details{border:1px solid var(--border);border-radius:12px;padding:2px 18px;margin-top:12px;background:var(--surface);}
summary{font-weight:650;cursor:pointer;padding:14px 0;font-size:16px;}
details[open] summary{border-bottom:1px solid var(--border);margin-bottom:12px;}
details p{color:var(--muted);font-size:15px;margin:0 0 14px;}

/* ---- CTA band ---- */
.ctaband{text-align:center;padding:64px 0;}
.ctaband h2{font-size:clamp(26px,3.4vw,38px);letter-spacing:-.025em;font-weight:800;margin-bottom:12px;}
.ctaband p{font-size:17px;color:var(--muted);margin-bottom:24px;}
.ctaband .cta{display:flex;gap:13px;justify-content:center;flex-wrap:wrap;}
.ctaband .fine{margin-top:16px;font-size:14px;color:var(--muted);}

/* ---- footer (matches landing) ---- */
footer{padding:48px 0;text-align:center;border-top:1px solid var(--border);color:var(--muted);font-size:14px;}
footer .flinks{margin-bottom:10px;}
footer a{color:var(--ink);text-decoration:none;margin:0 11px;}footer a:hover{color:var(--accent);}

@media (max-width:820px){
  .cards{grid-template-columns:1fr;}
  .picks{grid-template-columns:1fr;}
  .nav-links .hidem{display:none;}
}