/* bestaiboyfriend.app design system
   ---------------------------------
   One stylesheet for every page. Pages carry no <style> block of their own,
   and npm run check fails if one reappears: the whole point is that the header,
   the footer and the column widths cannot drift apart page to page.

   The identity is a field log. The site's claim is that one person paid for 23
   apps and used them for two months, so the furniture is built to look like
   kept records: a mono utility face, hairline and dashed rules, right-aligned
   figures, small-caps labels. Everything decorative that did not carry a fact
   is gone. Contents:

     1. Tokens
     2. Base and typography
     3. Layout containers
     4. Site header
     5. Site footer
     6. Hero and byline
     7. Shared components
     8. Homepage
     9. Review pages
    10. Research pages
    11. Modal, motion, focus
*/

/* 1. Tokens ---------------------------------------------------------------- */

:root{
  --bg:#FFF7F9;
  --card:#FFFFFF;
  --blush:#FFEDF2;
  --line:#F5DCE5;
  --line-2:#EDC9D6;
  --txt:#2E2028;
  --body-txt:#493A43;
  --mut:#7C6672;
  --dim:#A28E99;
  --pink:#E24C7F;
  --pink-deep:#B32F62;
  --grad:linear-gradient(105deg,#FF7FA8 0%,#E24C7F 55%,#B76BE0 100%);

  --disp:"Fraunces",Georgia,serif;
  --body:"Inter",system-ui,sans-serif;
  --hand:"Caveat",cursive;
  /* The ledger face. System mono on purpose: it costs no extra request and it
     is the one voice on the page that should read as recorded, not written. */
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;

  /* The logo mark, same heart as favicon.svg, carried as a mask so it inherits
     the gradient tile behind it. */
  --heart:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M12 21c-.6 0-1.1-.2-1.6-.6C6.5 17 2 13.7 2 9.3 2 6 4.4 3.5 7.6 3.5c1.7 0 3.2.8 4.4 2 1.2-1.2 2.7-2 4.4-2C19.6 3.5 22 6 22 9.3c0 4.4-4.5 7.7-8.4 11.1-.5.4-1 .6-1.6.6z' fill='%23000'/%3E%3C/svg%3E");

  /* Layout. Every page uses these three numbers and nothing else. */
  --shell:1000px;   /* outer container */
  --content:700px;  /* the reading column */
  --side:200px;     /* sticky jump-to rail */
  --gutter:22px;
  --colgap:40px;
  --nav-h:58px;
}

/* 2. Base and typography --------------------------------------------------- */

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--txt);
  font-family:var(--body);font-size:18px;line-height:1.7;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(620px 400px at 4% -8%,rgba(255,127,168,.20),transparent 62%),
             radial-gradient(660px 430px at 98% 0%,rgba(183,107,224,.13),transparent 64%);
}
a{color:var(--pink-deep)}
h1,h2,h3{font-family:var(--disp);margin:0;letter-spacing:-.015em}
h1{font-size:clamp(32px,5.6vw,46px);line-height:1.1;font-weight:600;margin-bottom:24px}
h2{font-size:clamp(25px,4.2vw,31px);font-weight:600;line-height:1.2;margin:52px 0 14px}
h3{font-size:20.5px;font-weight:600;line-height:1.3;margin:34px 0 4px}
p{margin:0 0 20px;color:var(--body-txt)}
strong{color:var(--txt);font-weight:600}

.gradtxt{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
/* Marker-pen highlight. Reserved for app names in the short answer and the lead
   term of a feature bullet: it stops meaning anything if it spreads. */
.hl{font-style:normal;font-weight:700;color:var(--pink-deep);background:linear-gradient(transparent 56%,#FFD5E3 56%);padding:0 3px;border-radius:2px}

/* The ledger label: mono, tracked out, always attached to a fact. */
.ldg{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase}

/* 3. Layout containers ----------------------------------------------------- */

.wrap{max-width:var(--content);margin:0 auto;padding:0 var(--gutter);position:relative;z-index:1}
.lede,.page{max-width:var(--shell);margin:0 auto;padding:0 var(--gutter);position:relative;z-index:1}
.lede>*,.page>*{max-width:var(--content)}
.shell{
  max-width:var(--shell);margin:0 auto;padding:0 var(--gutter);position:relative;z-index:1;
  display:grid;grid-template-columns:var(--side) minmax(0,1fr);
  /* Shorthand gap here adds row spacing between every paragraph. Column only. */
  column-gap:var(--colgap);row-gap:0;align-items:start;
}
.shell .wrap{grid-column:2;max-width:var(--content);margin:0;padding:0}
.side{grid-column:1;position:sticky;top:calc(var(--nav-h) + 20px);padding-top:6px;max-height:calc(100vh - 98px);overflow-y:auto}
.sidelabel{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);padding-bottom:10px;border-bottom:1px solid var(--line);margin-bottom:12px}
.toc{display:flex;flex-direction:column}
.toc a{display:block;font-size:15px;line-height:1.35;color:var(--mut);text-decoration:none;padding:9px 0;border-left:2px solid transparent;padding-left:12px;margin-left:-14px;transition:.15s}
.toc a:hover{color:var(--pink-deep)}
.toc a.on{color:var(--pink-deep);font-weight:600;border-left-color:var(--pink)}
.toc a small{display:block;font-size:12px;color:var(--dim);font-weight:400}
.toc a:hover small,.toc a.on small{color:var(--mut)}

@media(max-width:860px){
  .lede,.page,.shell{display:block;max-width:var(--content);padding:0 var(--gutter)}
  .lede>*,.page>*,.shell .wrap{max-width:none;padding:0}
  .side{display:none}
}

/* 4. Site header ----------------------------------------------------------- */

.nav{position:sticky;top:0;z-index:50;background:rgba(255,247,249,.86);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
/* Gradient hairline: the one piece of colour in the chrome. */
.nav::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--grad);opacity:.5}
.nav .wrap{display:flex;align-items:center;gap:18px;height:var(--nav-h);max-width:var(--shell)}
.logo{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--txt);font-family:var(--disp);font-weight:600;font-size:15px;white-space:nowrap}
.logo i{width:24px;height:24px;flex:0 0 24px;border-radius:8px;background:var(--grad);display:grid;place-items:center}
.logo i::before{content:"";width:12px;height:11px;background:#fff;-webkit-mask:var(--heart) center/contain no-repeat;mask:var(--heart) center/contain no-repeat}
.logo .tld{color:var(--dim)}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:500;margin-left:auto}
.navlinks a{color:var(--mut);text-decoration:none;position:relative;padding:4px 0}
.navlinks a:hover{color:var(--pink)}
/* Current page is marked with aria-current in the markup, so the underline and
   the screen-reader state can never disagree. */
.navlinks a[aria-current="page"]{color:var(--pink-deep);font-weight:600}
.navlinks a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;border-radius:2px;background:var(--grad)}
.navstat{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);border:1px solid var(--line-2);background:rgba(255,255,255,.65);padding:5px 11px;border-radius:100px;white-space:nowrap}
.navstat b{color:var(--pink-deep);font-weight:600}

@media(max-width:820px){.navstat{display:none}}
@media(max-width:600px){
  .nav .wrap{gap:12px}
  /* The old rule hid the links entirely below 600px, which left phone readers
     with no navigation at all. They shrink instead. */
  .navlinks{gap:16px;font-size:13px}
  .logo{font-size:14px}
}
@media(max-width:380px){.logo .tld{display:none}}

/* 5. Site footer ----------------------------------------------------------- */

.sitefoot{border-top:1px solid var(--line);margin-top:64px;padding:38px 0 56px;position:relative;z-index:1}
.sitefoot .wrap{max-width:var(--shell)}
.ledger{display:grid;grid-template-columns:1.15fr 1fr 1.35fr;gap:38px}
.ledger h4{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);font-weight:500;margin:0 0 14px;padding-bottom:9px;border-bottom:1px solid var(--line)}
/* The receipt column: label left, figure right, dashed leader between. */
.tally{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:14px;color:var(--mut);padding:6px 0;border-bottom:1px dashed var(--line)}
.tally:last-child{border-bottom:0}
.tally b{font-family:var(--mono);font-size:13px;color:var(--pink-deep);font-weight:600;white-space:nowrap}
.footlinks{display:flex;flex-direction:column;gap:9px;font-size:14.5px}
.footlinks a{color:var(--mut);text-decoration:none}
.footlinks a:hover{color:var(--pink)}
.rules{margin:0;font-size:14.5px;color:var(--mut);line-height:1.6}
.rules li{list-style:none;padding-left:18px;position:relative;margin-bottom:9px}
.rules li::before{content:"";position:absolute;left:0;top:10px;width:6px;height:6px;border-radius:50%;background:var(--grad)}
.rules{padding:0}
.footbase{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;justify-content:space-between;margin-top:32px;padding-top:18px;border-top:1px solid var(--line);font-size:13px;color:var(--dim)}
.footbase a{color:var(--dim);text-decoration:none;margin-right:16px}
.footbase a:hover{color:var(--pink)}
.age{font-family:var(--mono);font-size:11px;letter-spacing:.1em;border:1px solid var(--line-2);border-radius:100px;padding:4px 10px;color:var(--pink-deep)}

@media(max-width:820px){.ledger{grid-template-columns:1fr 1fr;gap:28px}.ledger>*:last-child{grid-column:1/-1}}
@media(max-width:560px){.ledger{grid-template-columns:1fr;gap:26px}.ledger>*:last-child{grid-column:auto}}

/* 6. Hero and byline ------------------------------------------------------- */

/* The hero is the one centred block on the page: it spans the full shell width
   so nothing is stranded on the right, and the article below keeps its own
   left-aligned measure. */
.hero{padding:52px 0 0;max-width:none;text-align:center}
.hero h1{max-width:900px;margin-left:auto;margin-right:auto}
/* Every page opens with what was actually done to earn it. */
.eyebrow{display:flex;align-items:center;justify-content:center;gap:13px;font-family:var(--mono);font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--pink-deep);margin:0 0 18px}
/* Rules run out both sides now that the line is centred, capped so they do not
   stretch across a wide screen. */
.eyebrow::before,.eyebrow::after{content:"";flex:0 1 130px;height:1px}
.eyebrow::before{background:linear-gradient(270deg,var(--line-2),transparent)}
.eyebrow::after{background:linear-gradient(90deg,var(--line-2),transparent)}
.eyebrow span{color:var(--mut)}
.crumb{font-size:13.5px;color:var(--dim);margin-bottom:16px}
.crumb a{color:var(--mut);text-decoration:none}
.crumb a:hover{color:var(--pink)}

.byline{display:flex;align-items:center;gap:14px;padding:15px;border-radius:20px;background:var(--card);border:1px solid var(--line);box-shadow:0 10px 30px -22px rgba(178,47,98,.5);margin:0 auto 40px;max-width:600px;text-align:left}
.pfp{width:48px;height:48px;flex:0 0 48px;border-radius:50%;background:var(--grad);display:grid;place-items:center;font-family:var(--disp);font-weight:600;font-size:19px;color:#fff}
.byline .who{flex:1;min-width:0}
.byline .nm{font-family:var(--disp);font-weight:600;font-size:17px}
.byline .rl{font-size:13px;color:var(--dim);line-height:1.5}
.btn{font-size:13px;font-weight:600;border:1px solid var(--line-2);background:var(--blush);color:var(--pink-deep);padding:10px 15px;border-radius:100px;cursor:pointer;white-space:nowrap;transition:.16s}
.btn:hover{background:var(--pink);color:#fff;border-color:var(--pink)}
@media(max-width:520px){.byline{flex-wrap:wrap}.btn{width:100%}}

/* 7. Shared components ----------------------------------------------------- */

.src{font-size:13.5px;color:var(--dim);margin:0 0 12px}
.src b{color:var(--mut);font-weight:600}

.answer{border:1px solid var(--line-2);border-radius:22px;padding:26px 24px;margin:0 0 12px;background:linear-gradient(160deg,#FFF0F5,#FBEDFB 70%,#FFF9FB)}
.answer .k{font-family:var(--hand);font-size:20px;color:var(--pink);display:block;margin-bottom:4px}
.answer h2{margin:0 0 16px;font-size:26px}
.answer ul{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:10px}
.answer li{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px;font-size:16px;line-height:1.55;color:var(--body-txt)}
.answer li b{font-family:var(--disp);font-size:19px;color:var(--pink-deep);display:inline-block;min-width:78px}
.answer li span{display:block;font-size:13.5px;color:var(--dim);margin-top:3px}
.answer>p:last-child{margin-bottom:0}

.note{font-size:15.5px;line-height:1.65;color:var(--mut);background:var(--card);border:1px solid var(--line);border-radius:18px;padding:16px 19px;margin:0 0 22px}
.note b{color:var(--pink-deep);font-weight:600}

.card{display:block;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:22px 24px;margin-bottom:14px;text-decoration:none;transition:.16s}
.card:hover{border-color:var(--line-2);transform:translateY(-1px);box-shadow:0 14px 34px -26px rgba(178,47,98,.6)}
.card .meta{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin-bottom:9px}
.card h3{font-size:22px;font-weight:600;line-height:1.25;color:var(--txt);margin:0 0 7px}
.card p{font-size:16px;color:var(--mut);margin:0}
.card .go{display:inline-block;margin-top:12px;font-size:14.5px;font-weight:600;color:var(--pink-deep)}

.kv{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:18px 20px;margin-bottom:12px}
.kv h3{font-size:18px;font-weight:600;margin:0 0 5px}
.kv p{font-size:16px;color:var(--mut);margin:0}
.mail{display:inline-block;font-family:var(--disp);font-size:clamp(22px,4vw,30px);font-weight:600;color:var(--pink-deep);text-decoration:none;background:linear-gradient(transparent 58%,#FFD5E3 58%);padding:0 4px}
.mail:hover{background:linear-gradient(transparent 0%,#FFD5E3 0%)}
/* Sits under a centred h1 on the pages that carry it, so it centres too. */
.stamp{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--dim);margin:-10px 0 30px;text-align:center}

.disc{font-size:13.5px;line-height:1.7;color:var(--dim);background:var(--blush);border-radius:18px;padding:17px 20px;margin-top:36px}
.disc b{color:var(--pink-deep)}
/* The FTC line, directly under the byline and above any affiliate link. */
.affnote{font-size:13.5px;color:var(--dim);margin:-26px auto 34px;max-width:620px;line-height:1.6;text-align:center}
.affnote b{color:var(--mut);font-weight:600}

/* FAQ. Also the source of the FAQPage schema, so the markup stays plain. */
details{border-bottom:1px solid var(--line)}
summary{list-style:none;cursor:pointer;padding:16px 34px 16px 0;font-family:var(--disp);font-size:18px;font-weight:600;position:relative}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:6px;top:14px;font-family:var(--body);font-size:20px;color:var(--pink);transition:.18s}
details[open] summary::after{content:"\2013"}
details p{font-size:16px;color:var(--mut);margin:0 0 18px}

/* Affiliate call to action. Always rel="sponsored nofollow" in the markup. */
.cta{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15px;background:var(--grad);color:#fff;text-decoration:none;padding:13px 24px;border-radius:100px;box-shadow:0 12px 26px -14px rgba(178,47,98,.75);transition:.16s}
.cta:hover{transform:translateY(-1px);box-shadow:0 16px 30px -14px rgba(178,47,98,.85)}

/* Transcript. Used on the homepage and on review pages. */
.chat{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:18px;margin:0 0 22px}
.chat .ct{font-family:var(--hand);font-size:16px;color:var(--dim);text-align:center;margin-bottom:12px}
.msg{display:flex;gap:9px;margin-bottom:10px;align-items:flex-end}
.msg .av{width:26px;height:26px;flex:0 0 26px;border-radius:50%;background:var(--grad);opacity:.85}
.msg p{margin:0;background:#F4EFF2;border-radius:16px 16px 16px 5px;padding:10px 14px;font-size:15.5px;line-height:1.5;color:var(--txt);max-width:78%}
.msg.me{flex-direction:row-reverse}
.msg.me p{background:var(--grad);color:#fff;border-radius:16px 16px 5px 16px}

.qs{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:9px}
.qs li{position:relative;padding-left:26px;font-size:16.5px;color:var(--body-txt);line-height:1.6}
.qs li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:8px;border-radius:50%;background:var(--grad)}

/* 8. Homepage -------------------------------------------------------------- */

.guess{font-family:var(--hand);font-size:22px;color:var(--pink);margin:0 0 10px}
.gripes{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:10px}
.gripes li{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px 16px 14px 46px;position:relative;font-size:16.5px;line-height:1.55;color:var(--body-txt)}
.gripes li::before{content:"\2713";position:absolute;left:16px;top:14px;width:20px;height:20px;border-radius:50%;background:var(--grad);color:#fff;font-size:11px;display:grid;place-items:center}
.beat{font-size:19px;color:var(--txt);margin:0 0 20px}
.pull{font-family:var(--disp);font-size:clamp(21px,3.4vw,26px);line-height:1.35;color:var(--txt);border-left:3px solid var(--pink);padding-left:20px;margin:0 0 26px}

.podium{border:1px solid var(--line-2);border-radius:24px;padding:28px 26px;margin:0 0 14px;background:linear-gradient(160deg,#FFF0F5,#FBEDFB 70%,#FFF9FB)}
.podium .k{font-family:var(--hand);font-size:21px;color:var(--pink);display:block;margin-bottom:2px}
.podium h2{margin:0 0 18px;font-size:27px}
.podium ol{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:11px;counter-reset:p}
.podium li{counter-increment:p;background:#fff;border:1px solid var(--line);border-radius:15px;padding:15px 17px 15px 54px;position:relative;font-size:16.5px;line-height:1.5;color:var(--body-txt)}
.podium li::before{content:counter(p);position:absolute;left:16px;top:15px;width:26px;height:26px;border-radius:50%;background:var(--grad);color:#fff;font-family:var(--disp);font-size:14px;font-weight:600;display:grid;place-items:center}
.podium strong{font-size:17.5px}
.podium span{display:block;font-size:13.5px;color:var(--dim);margin-top:3px}
.podium>p:last-child{margin-bottom:0}

.research{margin:56px 0 0}
.reyebrow{display:flex;align-items:center;gap:13px;font-family:var(--mono);font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--pink-deep);margin-bottom:14px}
.reyebrow::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line-2),transparent)}
.research h2{margin:0 0 8px}
.rdek{font-size:16.5px;color:var(--mut);margin:0 0 20px}
.rgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.rcard{display:block;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:22px;text-decoration:none;transition:.16s}
.rcard:hover{border-color:var(--line-2);transform:translateY(-1px);box-shadow:0 14px 34px -26px rgba(178,47,98,.6)}
.rtop{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.rnum{font-family:var(--disp);font-size:26px;font-weight:600;color:var(--pink-deep);line-height:1}
.rmeta{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.rcard h3{font-size:19px;font-weight:600;line-height:1.3;color:var(--txt);margin:0 0 8px}
.found{font-size:15px;color:var(--mut);margin:0}
.found b{color:var(--pink-deep);font-weight:600}
.found span{display:block;font-size:13px;color:var(--dim);margin-top:6px}
.rgo{display:inline-block;margin-top:14px;font-size:14px;font-weight:600;color:var(--pink-deep)}
.rnote{font-size:13.5px;color:var(--dim);margin:14px 0 0}
@media(max-width:660px){.rgrid{grid-template-columns:1fr}}

.afterlist{margin-top:54px}
.jump{display:inline-block;font-size:14.5px;font-weight:600;color:var(--pink-deep);text-decoration:none;border-bottom:1px solid var(--line-2)}
.jump:hover{border-color:var(--pink)}

/* A ranked entry. */
.app{margin:0 0 44px;scroll-margin-top:calc(var(--nav-h) + 26px)}
.apphead{display:flex;align-items:center;gap:13px;margin-bottom:14px}
.orb{width:44px;height:44px;flex:0 0 44px;border-radius:14px;display:grid;place-items:center;font-family:var(--disp);font-size:18px;font-weight:600;color:#fff}
.o1{background:linear-gradient(135deg,#FF7FA8,#E24C7F)}
.o2{background:linear-gradient(135deg,#F58FC8,#C452A8)}
.o3{background:linear-gradient(135deg,#FFA0B8,#E2637F)}
.o4{background:linear-gradient(135deg,#C79BE8,#8E5FD1)}
.o5{background:linear-gradient(135deg,#FF9CB6,#D8578E)}
.o6{background:linear-gradient(135deg,#FFB3A0,#E2765C)}
.o7{background:linear-gradient(135deg,#9FD0E8,#5E93C4)}
.o8{background:linear-gradient(135deg,#D6A8F0,#A15FD1)}
.o9{background:linear-gradient(135deg,#A8D8C0,#4F9E7C)}
.apphead h3{font-size:23px;font-weight:600;margin:0}
.apphead .role{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--pink-deep);margin-top:3px}
.app p{font-size:17px}

/* Spec chips read as a recorded row, not as marketing badges. */
.specs{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 16px}
.specs i{font-style:normal;font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--mut);background:var(--card);border:1px solid var(--line);border-radius:8px;padding:6px 10px}
.specs i b{color:var(--txt);font-weight:600}

.featlabel{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin:0 0 9px}
.feats{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:8px}
.feats li{position:relative;padding-left:24px;font-size:16.5px;line-height:1.6;color:var(--body-txt)}
.feats li::before{content:"";position:absolute;left:0;top:10px;width:7px;height:7px;border-radius:2px;background:var(--grad)}
.edge{background:var(--blush);border-radius:16px;padding:15px 18px;margin:0 0 14px;font-size:16px;line-height:1.6;color:var(--body-txt)}
.edge b{color:var(--pink-deep)}
.edge span{display:block;font-size:14px;color:var(--mut);margin-top:6px}

/* The line that says the bad thing. Every entry has one. */
.verdict{font-size:16px;color:var(--mut);margin:0 0 16px;padding-left:14px;border-left:2px solid var(--line-2)}
.verdict b{color:var(--pink-deep);font-weight:600}

.revlink{display:inline-block;margin-left:14px;font-size:14.5px;font-weight:600;color:var(--pink-deep);text-decoration:none;border-bottom:1px solid var(--line-2)}
.revlink:hover{border-color:var(--pink)}

/* 9. Review pages ---------------------------------------------------------- */

/* Named vcard, not verdict: the homepage already uses .verdict for its
   one-line watch-out, and two components under one class is how a shared
   stylesheet breaks the first time someone edits it. */
.vcard{border:1px solid var(--line-2);border-radius:22px;padding:26px 24px;margin:0 0 12px;background:linear-gradient(160deg,#FFF0F5,#FBEDFB 70%,#FFF9FB)}
.vcard .k{font-family:var(--hand);font-size:20px;color:var(--pink);display:block;margin-bottom:2px}
.vcard h2{margin:0 0 14px;font-size:26px}
.vcard .lead{font-size:16.5px;color:var(--body-txt);margin:0 0 18px;line-height:1.6}

.facts{margin:0;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden}
.facts div{display:flex;gap:14px;padding:12px 16px;border-bottom:1px solid var(--line);font-size:15.5px}
.facts div:last-child{border-bottom:0}
.facts dt{flex:0 0 116px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);margin:0;padding-top:2px}
.facts dd{margin:0;color:var(--body-txt)}
@media(max-width:460px){.facts div{flex-direction:column;gap:2px}.facts dt{flex:none}}

.vs{display:grid;gap:10px;margin:0 0 22px;padding:0;list-style:none}
.vs a{display:block;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:15px 17px;text-decoration:none;transition:.16s}
.vs a:hover{border-color:var(--line-2);transform:translateY(-1px)}
.vs b{display:block;font-family:var(--disp);font-size:17.5px;color:var(--txt);margin-bottom:3px}
.vs span{display:block;font-size:15px;color:var(--mut)}

.closer{border-top:1px solid var(--line);margin-top:46px;padding-top:30px}
.closer h2{margin-top:0}
.closer p{font-size:17px}

/* 10. Research pages ------------------------------------------------------- */

/* Charts are hand-written inline SVG in the palette above. No chart library,
   and never a PNG: the numbers have to stay readable to crawlers. */
.fig{margin:28px 0;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:22px 20px 18px}
.fig h4{font-family:var(--disp);font-size:17.5px;font-weight:600;margin:0 0 3px}
.fig .cap{font-size:13px;color:var(--dim);margin:0 0 18px;line-height:1.5}
.fig svg{width:100%;height:auto;display:block;overflow:visible}
.fig .foot{font-size:12.5px;color:var(--dim);margin:16px 0 0;line-height:1.55}

.tablewrap{overflow-x:auto;margin:0 0 24px;border:1px solid var(--line);border-radius:18px;background:var(--card)}
table{border-collapse:collapse;width:100%;font-size:15.5px}
th{text-align:left;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:500;color:var(--dim);padding:13px 16px;border-bottom:1px solid var(--line-2);white-space:nowrap}
td{padding:12px 16px;border-bottom:1px solid var(--line);color:var(--body-txt)}
tr:last-child td{border-bottom:0}
td:first-child{color:var(--txt);font-weight:500}

.sources{list-style:none;counter-reset:s;margin:0 0 22px;padding:0}
.sources li{counter-increment:s;position:relative;padding-left:36px;margin-bottom:15px;font-size:16px;line-height:1.6;color:var(--body-txt)}
.sources li::before{content:counter(s);position:absolute;left:0;top:3px;width:24px;height:24px;border-radius:50%;background:var(--blush);border:1px solid var(--line-2);color:var(--pink-deep);font-family:var(--mono);font-size:11px;font-weight:600;display:grid;place-items:center}
.sources a{font-size:14.5px;word-break:break-word}
.sourcenote{font-size:14px;color:var(--dim);line-height:1.6;margin:0}

/* 11. Modal, motion, focus ------------------------------------------------- */

.ov{position:fixed;inset:0;background:rgba(60,30,45,.42);backdrop-filter:blur(5px);display:none;align-items:center;justify-content:center;padding:20px;z-index:80}
.ov.open{display:flex}
.modal{background:var(--card);border:1px solid var(--line);max-width:540px;width:100%;max-height:86vh;overflow:auto;border-radius:24px;padding:30px 28px;position:relative;box-shadow:0 30px 70px -30px rgba(120,30,70,.45)}
.modal h3{font-size:25px;font-weight:600;margin:12px 0 2px}
.modal .rl{font-family:var(--hand);font-size:19px;color:var(--pink);margin-bottom:18px}
.modal p{font-size:16px}
.modal ul{margin:0 0 18px;padding:0;list-style:none}
.modal li{font-size:15.5px;color:var(--mut);margin-bottom:8px;padding-left:20px;position:relative;line-height:1.6}
.modal li::before{content:"";position:absolute;left:2px;top:11px;width:7px;height:7px;border-radius:50%;background:var(--grad)}
.x{position:absolute;top:14px;right:16px;background:var(--blush);border:1px solid var(--line);color:var(--mut);width:32px;height:32px;border-radius:50%;font-size:17px;cursor:pointer;line-height:1}
.x:hover{background:var(--pink);color:#fff;border-color:var(--pink)}

/* The 404, which now wears the same chrome as everything else. */
.lost{max-width:620px;margin:0 auto;padding:90px var(--gutter) 40px;text-align:center;position:relative;z-index:1}
.lost .code{font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;color:var(--dim);margin-bottom:14px}
.lost h1{margin-bottom:14px}
.lost p{font-size:17px;color:var(--mut);max-width:460px;margin:0 auto 26px}

/* 12. Column placement ------------------------------------------------------

   Last in the file on purpose. Components set `margin` shorthands (`.beat`,
   `.gripes`, `.podium` and friends all do), and a shorthand resets the side
   margins, so anything that placed the column earlier would be undone by
   whichever component happened to load after it. Only the inline sides are set
   here; vertical rhythm stays with the components. */

/* Pages with a rail below: the intro column lines up with the article column
   inside .shell, so the reader's eye keeps one left edge from the top of the
   page to the bottom. */
.lede>*{margin-inline:calc(var(--side) + var(--colgap)) auto}
/* Pages without a rail: centred under the hero. */
.page>*{margin-inline:auto}
/* The hero is the exception on both: full width, centred. */
.lede>.hero,.page>.hero{margin-inline:0}

@media(max-width:860px){
  .lede>*,.page>*,.lede>.hero,.page>.hero{margin-inline:0}
}

@media(prefers-reduced-motion:no-preference){
  .modal{animation:up .2s ease-out}
  @keyframes up{from{transform:translateY(12px);opacity:0}to{transform:none;opacity:1}}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}
:focus-visible{outline:2px solid var(--pink);outline-offset:3px}