/* /compare pages: the homepage look (public/sales.html tokens, nav and footer)
   set for long-form reading. Generated pages: scripts/compare/build.cjs. */
:root{
  --ink:#f4efff; --dim:#cfc4f2; --faint:#8f83ad;
  --gold:#ffd23f; --gold-deep:#f5a623; --pink:#ff4fd8; --cyan:#39e6ff; --green:#3ce97c;
  --panel:rgba(255,255,255,.07); --line:rgba(255,255,255,.16);
  --measure:68ch;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%;}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
body{margin:0; color:var(--ink); font-family:'Nunito',system-ui,sans-serif; overflow-x:hidden;
  background:radial-gradient(900px 600px at 15% -10%,rgba(255,79,216,.35),transparent 55%),
             radial-gradient(900px 600px at 110% 110%,rgba(57,230,255,.3),transparent 55%),
             linear-gradient(160deg,#241448 0%,#180f38 55%,#0e0a24 100%);
  background-attachment:fixed;}
.wrap{max-width:1060px; margin:0 auto; padding:0 18px; position:relative; z-index:1;}
a{color:var(--cyan)}
a:focus-visible, button:focus-visible, summary:focus-visible{outline:3px solid var(--cyan); outline-offset:3px; border-radius:6px;}
.skip{position:absolute; left:-999px; top:8px; background:var(--gold); color:#2b1200; padding:8px 14px; border-radius:999px; font-weight:900; z-index:99;}
.skip:focus{left:18px;}

/* ---- nav (same as the homepage) ---- */
nav{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 0; flex-wrap:wrap;}
.logo{font-family:'Baloo 2'; font-weight:800; font-size:18px; letter-spacing:.08em; color:#2b1200;
  background:linear-gradient(180deg,#ffe084,#ffb02e); border-radius:999px; padding:8px 18px;
  box-shadow:0 3px 0 #b76e00,0 10px 24px rgba(0,0,0,.35); text-decoration:none; white-space:nowrap;}
.logoplus{color:#7a4a00; padding:0 2px;}
.navlinks{display:flex; align-items:center; gap:16px; flex-wrap:wrap;}
.navlinks .signin{display:inline-block; background:linear-gradient(180deg,#ffe084,#ffb02e); color:#4a2d08;
  font-weight:900; font-size:15px; padding:11px 24px; border-radius:999px; text-decoration:none;
  box-shadow:0 3px 0 #b76e00,0 10px 24px rgba(0,0,0,.35);}
.navlinks .signin:hover{filter:brightness(1.06);}
.navlinks .plansbtn{display:inline-block; background:rgba(255,255,255,.1); border:1.5px solid rgba(255,210,63,.5);
  color:#ffe9ad; font-weight:800; font-size:14px; padding:9px 20px; border-radius:999px; text-decoration:none;}
.navlinks .plansbtn:hover{background:rgba(255,210,63,.14);}
@media(max-width:560px){
  nav{justify-content:center;}
  .logo{font-size:15px; padding:7px 14px;}
}

/* ---- breadcrumb ---- */
.crumbs{margin:6px 0 0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:6px; color:var(--faint); font-weight:800; font-size:13px; letter-spacing:.02em;}
.crumbs li+li::before{content:"/"; margin-right:6px; color:rgba(255,255,255,.3);}
.crumbs a{color:var(--faint); text-decoration:none;}
.crumbs a:hover{color:var(--cyan);}
.crumbs [aria-current]{color:var(--dim);}

/* ---- article head ---- */
.arthead{padding:26px 0 8px; max-width:760px;}
.kicker{font-size:12.5px; font-weight:900; letter-spacing:.22em; color:var(--cyan); margin:0 0 14px; text-transform:uppercase;}
h1{font-family:'Baloo 2'; font-weight:800; font-size:clamp(30px,4.4vw,46px); line-height:1.1; margin:0 0 16px; text-wrap:balance;
  background:linear-gradient(180deg,#fff,#ffd23f 55%,#ff4fd8); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 4px 20px rgba(255,79,216,.4)); padding-bottom:.08em;}
.lede{color:var(--dim); font-weight:700; font-size:clamp(16px,1.9vw,18.5px); line-height:1.6; margin:0 0 16px; text-wrap:pretty;}
.meta{display:flex; flex-wrap:wrap; gap:8px 18px; color:var(--faint); font-weight:800; font-size:13px; margin:0 0 6px;}
.meta time{color:var(--dim);}

/* The disclosure sits in the reading column, not in a footnote: a reader
   should know who wrote the comparison before reading it. */
.disclose{display:flex; gap:12px; align-items:flex-start; margin:18px 0 8px; padding:12px 16px; border-radius:14px;
  background:rgba(255,210,63,.08); border:1px solid rgba(255,210,63,.32); color:#ffe9ad; font-weight:700; font-size:14px; line-height:1.55; max-width:760px;}
.disclose svg{flex:0 0 auto; margin-top:2px;}
.disclose b{color:var(--gold);}

/* ---- prose ---- */
.article{max-width:760px; padding:8px 0 20px;}
.article p, .article li{font-size:17px; line-height:1.72; color:var(--ink); font-weight:600;}
.article p{margin:0 0 18px; max-width:var(--measure); text-wrap:pretty;}
.article h2{font-family:'Baloo 2'; font-weight:800; font-size:clamp(23px,3vw,30px); color:var(--gold); margin:42px 0 12px; line-height:1.18; text-align:left; text-wrap:balance; scroll-margin-top:16px;}
.article h3{font-family:'Baloo 2'; font-weight:800; font-size:clamp(19px,2.3vw,22px); color:#fff; margin:30px 0 8px; line-height:1.25;}
.article ul, .article ol{margin:0 0 18px; padding-left:24px; max-width:var(--measure);}
.article li{margin:0 0 8px;}
.article li::marker{color:var(--gold); font-weight:900;}
.article strong{color:#fff; font-weight:800;}
.article a{color:var(--cyan); text-decoration-thickness:1.5px; text-underline-offset:2px;}
.article a:hover{color:#9df0ff;}
.article .ext::after{content:"\2197"; font-size:.8em; margin-left:2px; color:var(--faint);}
.fine{color:var(--faint); font-weight:700; font-size:13.5px; line-height:1.6; margin:-6px 0 20px;}
.fine a{color:var(--faint);}
.pill{display:inline-block; font-size:11px; font-weight:900; letter-spacing:.14em; text-transform:uppercase; border-radius:999px; padding:3px 10px; vertical-align:middle; margin-left:6px;}
.pill.ours{background:rgba(255,210,63,.16); border:1px solid rgba(255,210,63,.5); color:var(--gold);}

/* ---- listicle entries ---- */
.entry{position:relative; background:rgba(255,255,255,.045); border:1.5px solid var(--line); border-radius:20px; padding:22px 22px 12px; margin:0 0 18px;}
.entry.ours{background:rgba(255,210,63,.07); border-color:rgba(255,210,63,.45); box-shadow:0 0 36px rgba(255,210,63,.12);}
.entry h3{margin:0 0 4px; display:flex; align-items:center; flex-wrap:wrap; gap:4px 8px;}
.entry .n{display:inline-grid; place-items:center; width:32px; height:32px; border-radius:10px; margin-right:6px; flex:0 0 auto;
  background:linear-gradient(180deg,#ffe084,#ffb02e); color:#4a2d08; font-family:'Baloo 2'; font-weight:800; font-size:17px; box-shadow:0 3px 0 #b76e00;}
.entry .oneline{color:var(--dim); font-weight:700; font-size:15.5px; margin:0 0 12px;}
.entry p{font-size:16px; line-height:1.65;}
.entry .fact{margin:0 0 14px; padding:0; list-style:none; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 16px; max-width:none;}
@media(max-width:620px){.entry .fact{grid-template-columns:1fr;}}
.entry .fact li{margin:0; font-size:14.5px; line-height:1.5; padding-left:0; color:var(--dim); font-weight:700;}
.entry .fact b{display:block; color:var(--faint); font-weight:900; font-size:11px; letter-spacing:.14em; text-transform:uppercase; margin-bottom:2px;}
.entry .fact .unv{color:var(--faint);}
.pm{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:4px 0 16px;}
@media(max-width:620px){.pm{grid-template-columns:1fr;}}
.pm div{border-radius:14px; padding:12px 14px; background:rgba(0,0,0,.22); border:1px solid var(--line);}
.pm h4{margin:0 0 6px; font-size:12px; font-weight:900; letter-spacing:.14em; text-transform:uppercase; color:var(--green);}
.pm .minus h4{color:#ff9fe8;}
.pm ul{margin:0; padding-left:18px; max-width:none;}
.pm li{font-size:14.5px; line-height:1.5; color:var(--ink); margin:0 0 4px;}

/* ---- comparison table ---- */
/* Solid panel: the table must read the same whatever the page gradient is doing behind it. */
.tblwrap{overflow-x:auto; -webkit-overflow-scrolling:touch; margin:14px 0 8px; border-radius:16px; border:1.5px solid var(--line); background:#1b1238;
  scrollbar-color:rgba(255,210,63,.5) transparent;
  /* the table may run wider than the reading column, out to the page edge, never past it */
  width:min(1024px, calc(100vw - 36px));}
/* Seven columns need room or every row turns into a tall ribbon; the wrapper
   scrolls, the page does not. */
table.cmp{border-collapse:collapse; width:100%; min-width:1180px; font-size:14.5px;}
table.cmp.two{min-width:640px;}
table.cmp th:first-child, table.cmp td:first-child{min-width:150px; max-width:170px;}
/* the free-plan column carries the longest sentences; give it the room so rows stay short */
table.cmp th:nth-child(5), table.cmp td:nth-child(5){min-width:280px;}
table.cmp th:nth-child(7), table.cmp td:nth-child(7){min-width:200px;}
table.cmp th, table.cmp td{text-align:left; vertical-align:top; padding:12px 14px; border-bottom:1px solid rgba(255,255,255,.1); line-height:1.5;}
table.cmp th{font-size:12px; font-weight:900; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); background:rgba(255,210,63,.07); white-space:nowrap;}
table.cmp tbody tr:last-child td{border-bottom:none;}
table.cmp td{color:var(--dim); font-weight:700;}
table.cmp td:first-child, table.cmp th:first-child{color:#fff; font-weight:900; position:sticky; left:0; background:#1b1238; box-shadow:4px 0 10px -6px rgba(0,0,0,.6);}
table.cmp tr.ours td{background:rgba(255,210,63,.08); color:var(--ink);}
table.cmp tr.ours td:first-child{background:#2a1f3a;}
table.cmp td a{color:var(--cyan);}
.tblnote{color:var(--faint); font-weight:800; font-size:13px; margin:8px 0 22px;}
.tblnote time{color:var(--dim);}
.tblhint{display:none; color:var(--faint); font-weight:800; font-size:12.5px; margin:6px 0 0; letter-spacing:.04em;}
@media(max-width:760px){.tblhint{display:block;}}

/* ---- CTA blocks: server-rendered, inline with the article ---- */
.ctabox{display:flex; align-items:center; justify-content:space-between; gap:16px 22px; flex-wrap:wrap; margin:30px 0;
  background:linear-gradient(140deg,rgba(255,210,63,.12),rgba(255,79,216,.08)); border:1.5px solid rgba(255,210,63,.42);
  border-radius:20px; padding:20px 22px; box-shadow:0 18px 44px rgba(0,0,0,.32);}
.ctabox .t{flex:1 1 300px;}
.ctabox h3{margin:0 0 4px; font-family:'Baloo 2'; font-weight:800; font-size:20px; color:#fff; line-height:1.25;}
.ctabox p{margin:0; color:var(--dim); font-weight:700; font-size:14.5px; line-height:1.5; max-width:none;}
.cta{display:inline-block; font-family:'Baloo 2'; font-weight:800; font-size:17px; letter-spacing:.05em; color:#2b1200; text-decoration:none;
  background:linear-gradient(180deg,#ffe084,#ffb02e); border:none; border-radius:999px; padding:13px 30px; cursor:pointer; white-space:nowrap;
  box-shadow:0 5px 0 #b76e00,0 16px 34px rgba(0,0,0,.4);}
.cta:hover{filter:brightness(1.05);}
.cta:active{transform:translateY(3px); box-shadow:0 2px 0 #b76e00;}
.cta.cta2{color:#ffe9ad; background:transparent; border:2px solid rgba(255,210,63,.6); box-shadow:none;}
.cta.cta2:hover{background:rgba(255,210,63,.14); border-color:#ffd23f; filter:none;}
@media(max-width:560px){ .ctabox{padding:18px;} .ctabox .cta{width:100%; text-align:center;} }

/* ---- FAQ (homepage style) ---- */
.faqsec{padding:12px 0 10px; max-width:760px;}
.faqsec h2{font-family:'Baloo 2'; font-weight:800; font-size:clamp(23px,3vw,30px); color:var(--gold); margin:32px 0 14px; text-align:left;}
.faq details{background:var(--panel); border:1.5px solid var(--line); border-radius:16px; margin:0 0 10px; overflow:hidden;}
.faq summary{cursor:pointer; padding:16px 18px; font-weight:900; font-size:15.5px; color:#fff; list-style:none; position:relative; padding-right:44px; line-height:1.4;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:""; position:absolute; right:18px; top:50%; width:10px; height:10px;
  border-right:2.5px solid var(--gold); border-bottom:2.5px solid var(--gold); transform:translateY(-70%) rotate(45deg); transition:transform .15s;}
.faq details[open] summary::after{transform:translateY(-30%) rotate(225deg);}
.faq details p{margin:0; padding:0 18px 16px; color:var(--dim); font-weight:700; font-size:15px; line-height:1.65;}

/* ---- related links ---- */
.related{padding:14px 0 30px;}
.related h2{font-family:'Baloo 2'; font-weight:800; font-size:22px; color:var(--gold); margin:24px 0 12px; text-align:left;}
.linkgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:10px; list-style:none; margin:0; padding:0;}
.linkgrid a{display:block; padding:12px 14px; border-radius:14px; background:var(--panel); border:1.5px solid var(--line); color:var(--ink);
  font-weight:800; font-size:14.5px; text-decoration:none; line-height:1.4;}
.linkgrid a:hover{border-color:rgba(255,210,63,.6); background:rgba(255,210,63,.08);}
.linkgrid a small{display:block; color:var(--faint); font-weight:800; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; margin-bottom:3px;}

/* ---- hub ---- */
.hubgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px; list-style:none; margin:14px 0 8px; padding:0;}
.hubgrid li{background:var(--panel); border:1.5px solid var(--line); border-radius:18px; padding:18px 18px 16px;}
.hubgrid h3{margin:0 0 6px; font-family:'Baloo 2'; font-weight:800; font-size:19px; color:#fff; line-height:1.25;}
.hubgrid h3 a{color:#fff; text-decoration:none;}
.hubgrid h3 a:hover{color:var(--gold);}
.hubgrid p{margin:0 0 10px; color:var(--dim); font-weight:700; font-size:14.5px; line-height:1.55;}
.hubgrid .more{font-weight:900; font-size:13.5px; color:var(--cyan); text-decoration:none;}

/* ---- final CTA + footer (homepage) ---- */
.final{text-align:center; padding:36px 0 26px;}
.final h2{font-family:'Baloo 2'; font-weight:800; text-align:center; font-size:clamp(24px,3.4vw,34px); color:var(--gold); margin:0 0 8px; text-wrap:balance;}
.final p{color:var(--dim); font-weight:700; font-size:15.5px; margin:0 auto 20px; max-width:52ch;}
.final .cta+.cta{margin-left:12px;}
@media(max-width:560px){ .final .cta{display:block; margin:0 auto 12px; width:100%; max-width:340px;} .final .cta+.cta{margin-left:auto;} }
footer{text-align:center; color:var(--faint); font-weight:700; font-size:13.5px; padding:10px 0 48px; line-height:1.9;}
footer a{color:var(--faint); font-weight:800;}
footer a:hover{color:var(--cyan);}

/* ---- slide-in (public/compare.js): a card, never an interstitial. Fixed
   position so it causes no layout shift; capped at a quarter of the
   viewport on a phone so the article stays readable behind it. ---- */
.slidein{position:fixed; z-index:70; right:18px; bottom:18px; width:min(360px,calc(100vw - 36px));
  background:rgba(26,16,48,.97); backdrop-filter:blur(10px); border:1.5px solid rgba(255,210,63,.45); border-radius:18px;
  box-shadow:0 20px 50px rgba(0,0,0,.55); padding:16px 18px 16px; transform:translateY(calc(100% + 24px)); opacity:0;
  transition:transform .32s cubic-bezier(.3,1.2,.4,1), opacity .25s ease; pointer-events:none;}
.slidein.on{transform:none; opacity:1; pointer-events:auto;}
.slidein h2{margin:0 28px 4px 0; font-family:'Baloo 2'; font-weight:800; font-size:18px; color:#fff; line-height:1.25; text-align:left;}
.slidein p{margin:0 0 12px; color:var(--dim); font-weight:700; font-size:13.5px; line-height:1.5;}
.slidein .cta{font-size:15px; padding:11px 22px;}
.slidein .x{position:absolute; right:10px; top:10px; width:30px; height:30px; border-radius:999px; border:1px solid var(--line); background:rgba(255,255,255,.06);
  color:var(--dim); font-size:18px; line-height:1; cursor:pointer; display:grid; place-items:center;}
.slidein .x:hover{color:#fff; background:rgba(255,255,255,.12);}
@media(max-width:560px){
  .slidein{left:0; right:0; bottom:0; width:auto; max-height:25vh; overflow:auto; border-radius:18px 18px 0 0; border-bottom:none;
    padding:12px 16px calc(12px + env(safe-area-inset-bottom)); display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px;}
  .slidein h2{font-size:15.5px; flex:1 1 100%; margin-right:34px;}
  .slidein p{flex:1 1 180px; margin:0; font-size:12.5px;}
  .slidein .cta{font-size:14px; padding:10px 18px;}
}
@media(prefers-reduced-motion:reduce){.slidein{transition:none;}}