/* ──────────────────────────────────────────────────────────────────────────
   pages.css — shared shell for the standalone SEO landing pages:
     /case-studies/ , /case-studies/*, /bot-screening, /pricing

   ⚠ netlify.toml caches *.css for 24h. EVERY page that links this file uses
     ?v=YYYYMMDD. If you edit this file, BUMP THAT QUERY ON ALL 6 PAGES or
     visitors get new markup against day-old CSS (that bug has bitten this
     project before, see the bell-panel incident).
     Current token: v=20261013b. Pages: case-studies/index.html,
     case-studies/{purple-sky,feeling-kinda-sad,yea}/index.html,
     bot-screening/index.html, pricing/index.html.

   Deliberately NOT imported by index/members/discover/apply/artist. Those
   pages own their own stylesheets and must not inherit anything from here.
   ────────────────────────────────────────────────────────────────────────── */

:root{
  --pd:#0e0618; --pk:#160d24; --pm:#2a1550; --pg:#7c3fbf;
  --w:#ffffff; --ow:#ede8f5; --mu:#9b87c0; --si:#c8bedd;
  --go:#d4af6a; --gr:#3ecf8e; --rd:#f87171;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-padding-top:80px;-webkit-text-size-adjust:100%;}
body{background:var(--pd);color:var(--ow);font-family:system-ui,-apple-system,"Segoe UI",sans-serif;font-weight:300;line-height:1.75;overflow-x:hidden;}

/* ── nav / footer ── */
nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:1.2rem 2rem;display:flex;align-items:center;justify-content:space-between;background:rgba(14,6,24,.92);backdrop-filter:blur(12px);border-bottom:1px solid rgba(124,63,191,.12);}
.logo{font-family:"Georgia","Times New Roman",serif;font-size:1.2rem;color:var(--w);text-decoration:none;}
.logo span{color:var(--pg);}
.nav-links{display:flex;gap:2rem;align-items:center;}
.nav-links a{color:var(--mu);text-decoration:none;font-size:.77rem;letter-spacing:.1em;text-transform:uppercase;transition:color .2s;}
.nav-links a:hover{color:var(--w);}
.ncta{background:var(--pg);color:var(--w)!important;padding:.5rem 1.3rem;border-radius:4px;font-weight:500!important;}
footer{border-top:1px solid rgba(124,63,191,.15);padding:2.5rem 2rem;text-align:center;}
footer p{color:var(--mu);font-size:.8rem;}
footer a{color:var(--mu);}

/* ── layout ── */
main{max-width:860px;margin:0 auto;padding:120px 2rem 5rem;}
main.wide{max-width:1080px;}

/* ── breadcrumb ── */
.crumb{font-size:.78rem;color:var(--mu);margin-bottom:1.2rem;letter-spacing:.04em;}
.crumb a{color:var(--mu);text-decoration:none;}
.crumb a:hover{color:var(--w);}
.crumb span{opacity:.5;margin:0 .45rem;}

/* ── headings / text ── */
h1{font-family:"Georgia","Times New Roman",serif;font-size:clamp(1.9rem,4.6vw,2.9rem);font-weight:700;color:var(--w);margin-bottom:.6rem;line-height:1.15;}
.sub{color:var(--mu);font-size:1rem;margin-bottom:.4rem;}
.updated{font-size:.8rem;color:var(--mu);margin-bottom:2.2rem;}
h2{font-family:"Georgia","Times New Roman",serif;font-size:1.45rem;color:var(--pg);margin:2.6rem 0 .8rem;padding-bottom:.4rem;border-bottom:1px solid rgba(124,63,191,.2);}
h3{font-size:1.02rem;font-weight:600;color:var(--w);margin:1.6rem 0 .45rem;}
p{color:var(--si);margin-bottom:.95rem;font-size:.95rem;}
ul,ol{color:var(--si);font-size:.95rem;padding-left:1.5rem;margin-bottom:.95rem;}
li{margin-bottom:.45rem;}
a{color:var(--pg);}
strong{color:var(--w);font-weight:600;}
.lead{font-size:1.04rem;color:var(--ow);margin-bottom:1.4rem;}

/* ── eyebrow label ── */
.eyebrow{display:inline-block;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--go);margin-bottom:.7rem;}

/* ── tags ── */
.tagrow{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.4rem;}
.tag{font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;padding:.3rem .7rem;border-radius:3px;border:1px solid rgba(124,63,191,.4);color:var(--si);}
.tag.own{border-color:rgba(212,175,106,.5);color:var(--go);}
.tag.benchmark{border-color:rgba(62,207,142,.5);color:var(--gr);}
.tag.live{border-color:rgba(124,63,191,.6);color:#c49bff;}

/* ── stat band ──
   Dividers come from each cell's own right/bottom border, NOT from the old
   "1px gap over a tinted container" trick. With auto-fit, 4 stats in a 3 or 5
   column grid leave an empty slot, and under that trick the empty slot painted
   as a filled block that read like a broken cell (visible at 480-540px and
   again from 768px up). Giving the container the same background as the cells
   makes any leftover slot blend into the panel instead. */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(135px,1fr));background:var(--pk);border:1px solid rgba(124,63,191,.22);border-radius:10px;overflow:hidden;margin:1.6rem 0 2rem;}
.stat{background:var(--pk);padding:1.3rem 1rem;text-align:center;border-right:1px solid rgba(124,63,191,.22);border-bottom:1px solid rgba(124,63,191,.22);}
.stat .n{display:block;font-family:"Georgia","Times New Roman",serif;font-size:1.65rem;font-weight:700;color:var(--w);line-height:1.1;}
.stat .n.g{color:var(--go);}
.stat .n.ok{color:var(--gr);}
.stat .n.bad{color:var(--rd);}
.stat .l{display:block;font-size:.7rem;letter-spacing:.07em;text-transform:uppercase;color:var(--mu);margin-top:.4rem;}

/* ── boxes ── */
.box{background:var(--pm);border:1px solid rgba(124,63,191,.25);border-radius:10px;padding:1.3rem 1.5rem;margin:1.6rem 0;}
.box p:last-child{margin-bottom:0;}
.box.warn{border-color:rgba(212,175,106,.35);background:rgba(212,175,106,.06);}
.box.good{border-color:rgba(62,207,142,.3);background:rgba(62,207,142,.05);}
.box-head{font-weight:600;color:var(--w);margin-bottom:.6rem;font-size:.97rem;}

/* ── verify link chips ──
   These are the primary call to action on a case study page ("go check it
   yourself"), so they carry a full 44px touch target rather than the 37px that
   padding alone produced. */
.links{display:flex;flex-wrap:wrap;gap:.6rem;margin:1.2rem 0 .4rem;}
.links a{display:inline-flex;align-items:center;min-height:44px;font-size:.8rem;padding:.5rem 1rem;border:1px solid rgba(124,63,191,.4);border-radius:4px;color:var(--si);text-decoration:none;transition:all .2s;}
.links a:hover{border-color:var(--pg);color:var(--w);background:rgba(124,63,191,.12);}

/* ── card grids ── */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:1.1rem;margin:1.6rem 0 2rem;}
.card{background:var(--pk);border:1px solid rgba(124,63,191,.2);border-radius:10px;padding:1.3rem 1.4rem;display:flex;flex-direction:column;}
.card h3{margin-top:0;}
.card p{font-size:.89rem;margin-bottom:.6rem;}
.card p:last-child{margin-bottom:0;}
.card .n{font-family:"Georgia","Times New Roman",serif;font-size:1.5rem;color:var(--go);display:block;line-height:1.2;margin-bottom:.3rem;}
.card-link{margin-top:auto;padding-top:.9rem;font-size:.84rem;font-weight:500;text-decoration:none;}

/* ── case study index cards ── */
.cs-item{display:block;background:var(--pk);border:1px solid rgba(124,63,191,.2);border-radius:10px;padding:1.5rem 1.6rem;margin-bottom:1.1rem;text-decoration:none;transition:border-color .2s,transform .2s;}
.cs-item:hover{border-color:rgba(124,63,191,.55);transform:translateY(-2px);}
.cs-item .t{font-family:"Georgia","Times New Roman",serif;font-size:1.3rem;color:var(--w);}
.cs-item .by{font-size:.85rem;color:var(--mu);margin-bottom:.7rem;}
.cs-item .d{font-size:.9rem;color:var(--si);margin-bottom:.8rem;}
.cs-item .mini{display:flex;flex-wrap:wrap;gap:1.4rem;}
.cs-item .mini span{font-size:.8rem;color:var(--mu);}
.cs-item .mini strong{color:var(--go);font-family:"Georgia","Times New Roman",serif;font-size:1.05rem;display:block;}

/* ── pricing table ── */
.ptable{width:100%;border-collapse:collapse;margin:1.5rem 0 2rem;font-size:.9rem;}
.ptable th,.ptable td{text-align:left;padding:.85rem 1rem;border-bottom:1px solid rgba(124,63,191,.18);}
.ptable th{color:var(--w);font-weight:600;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;background:var(--pk);}
.ptable td{color:var(--si);}
.ptable td strong{color:var(--go);}
.tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}

/* Wide tables (.ptable.stack) become labelled stacked rows on narrow screens.
   A 7-column table in a 266px viewport hides ~58% of itself behind a sideways
   scroll, which is useless on a phone. Each <td> needs a data-label matching
   its column header. Narrow tables that already fit are left as real tables. */
@media(max-width:700px){
  /* thead stays in the accessibility tree (so the header row is still
     announced) but is visually hidden. clip-path is the modern half of this;
     clip is the legacy fallback. Both are needed: without clip-path a browser
     that ignores the deprecated clip would paint the headers off to the side. */
  .ptable.stack thead{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0;}
  .ptable.stack,.ptable.stack tbody,.ptable.stack tr,.ptable.stack td{display:block;width:100%;}
  .ptable.stack tr{background:var(--pk);border:1px solid rgba(124,63,191,.22);border-radius:10px;margin-bottom:.9rem;overflow:hidden;}
  .ptable.stack td{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;text-align:right;padding:.6rem .95rem;border-bottom:1px solid rgba(124,63,191,.12);}
  .ptable.stack tr td:last-child{border-bottom:0;}
  .ptable.stack td::before{content:attr(data-label);color:var(--mu);font-size:.71rem;letter-spacing:.07em;text-transform:uppercase;text-align:left;flex-shrink:0;}
  .tscroll.stacked{overflow-x:visible;}

  /* A link that is the whole paragraph is a standalone call to action, not a
     word inside a sentence, so it needs a real target. At the inherited font
     size these rendered 18-21px tall, which fails WCAG 2.5.8 (24px minimum).
     Links sitting inside prose are exempt from that rule and are left alone,
     which is why this is scoped to :only-child. */
  p > a:only-child{display:inline-flex;align-items:center;min-height:44px;}
}

/* ── CTA ── */
.cta{text-align:center;margin:3rem 0 1rem;}
.cta .btn{display:inline-block;background:var(--pg);color:var(--w);text-decoration:none;padding:.85rem 2rem;border-radius:5px;font-size:.92rem;font-weight:500;transition:background .2s;}
.cta .btn:hover{background:#9050d8;}
.cta .alt{display:block;margin-top:.9rem;font-size:.84rem;color:var(--mu);}

/* ── FAQ accordions (native, no JS) ── */
details{background:var(--pk);border:1px solid rgba(124,63,191,.2);border-radius:8px;margin-bottom:.7rem;padding:0;}
details summary{cursor:pointer;padding:1rem 1.3rem;color:var(--w);font-size:.94rem;font-weight:500;list-style:none;position:relative;padding-right:2.6rem;}
details summary::-webkit-details-marker{display:none;}
details summary::after{content:"+";position:absolute;right:1.3rem;top:.95rem;color:var(--pg);font-size:1.2rem;line-height:1;}
details[open] summary::after{content:"\2212";}
details .ans{padding:0 1.3rem 1.1rem;}
details .ans p{font-size:.9rem;margin-bottom:.6rem;}
details .ans p:last-child{margin-bottom:0;}

@media(max-width:600px){
  nav{padding:1rem 1.2rem;}
  .nav-links{gap:1rem;}
  .nav-links a:not(.ncta){display:none;}
  /* The logo and Portal button are the only two nav controls left at this size,
     so both get a real 44px target. nav stays under the 100px main offset. */
  .logo,.ncta{display:inline-flex;align-items:center;min-height:44px;}
  /* Footer links sit on one tightly packed line; padding makes them tappable
     without changing how the line reads. */
  footer{padding:2rem 1.2rem;}
  footer a{display:inline-block;padding:.4rem .15rem;}
  .crumb a{display:inline-block;padding:.25rem 0;}
  main{padding:100px 1.2rem 4rem;}
  h1{font-size:1.65rem;}
  h2{font-size:1.18rem;}
  .box{padding:1.1rem 1.15rem;}
  .card{padding:1.15rem 1.2rem;}
  .cs-item{padding:1.2rem 1.25rem;}
  .stat{padding:1.1rem .7rem;}
  .stat .n{font-size:1.4rem;}
  .links a{font-size:.76rem;padding:.45rem .8rem;}
}