/* Shared shell for the content pages (/pricing, /faq, and anything added later).
   The three original pages (landing, demo, privacy) each inline their own CSS;
   those are left alone. New pages share this file instead so the nav, footer,
   buttons and consent banner only exist once. Tokens are copied verbatim from
   landing.html so both systems render identically. */

:root{
  --bg:#0a0a0a; --panel:#141310; --panel2:#1a1814; --line:#2a2620; --line2:#37322a;
  --white:#f4f1ea; --dim:#9b948a; --faint:#615b51;
  --amber:#ee9211; --amber-soft:#f5a524; --green:#34c98a; --red:#e5564e;
  --disp:'Plus Jakarta Sans',sans-serif; --mono:'JetBrains Mono',monospace;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:84px;}
body{font-family:var(--disp);background:var(--bg);color:var(--white);overflow-x:hidden;
  -webkit-font-smoothing:antialiased;}
a{color:inherit;text-decoration:none;}

#glow{position:fixed;width:600px;height:600px;border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(circle,rgba(238,146,17,.14),transparent 62%);
  transform:translate(-50%,-50%);left:50%;top:8%;filter:blur(20px);}
.wrap{position:relative;z-index:1;max-width:1120px;margin:0 auto;padding:0 24px;}
/* Content sections all share the .wrap gutter so the page keeps one left edge.
   Reading measure is constrained on the inner blocks instead of by narrowing
   (and re-centering) the container, which would make headings jog inward. */
.prose{max-width:720px;}
.faqlist{max-width:820px;}
.tblwrap{max-width:860px;}

/* nav */
nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(12px);background:rgba(10,10,10,.72);
  border-bottom:1px solid var(--line);}
.navrow{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;
  max-width:1120px;margin:0 auto;}
.brand{display:flex;align-items:center;gap:9px;}
.wordmark{font-family:var(--disp);font-weight:700;font-size:15.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--white);}
.wordmark .amber{color:var(--amber);}
.navcta{display:flex;align-items:center;gap:14px;}
.navlink{font-family:var(--mono);font-size:12px;color:var(--dim);}
.navlink:hover{color:var(--white);}
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:13px;
  font-weight:500;padding:10px 18px;border-radius:999px;cursor:pointer;border:1px solid transparent;
  transition:opacity .15s,background .15s,border-color .15s;}
.btn.primary{background:var(--amber);color:#0a0a0a;font-weight:700;}
.btn.primary:hover{opacity:.92;}
.btn.ghost{border-color:var(--line2);color:var(--white);background:transparent;}
.btn.ghost:hover{border-color:var(--amber);}
.btn.lg{font-size:14px;padding:13px 24px;}

/* breadcrumb */
.crumbs{font-family:var(--mono);font-size:11px;color:var(--faint);padding-top:26px;
  display:flex;gap:8px;flex-wrap:wrap;}
.crumbs a{color:var(--dim);}
.crumbs a:hover{color:var(--amber);}

/* page head. Horizontal padding is repeated from .wrap on purpose: this class
   has equal specificity and comes later, so a `padding:26px 0` shorthand here
   would silently zero out .wrap's 24px gutter and pull the h1 out of alignment
   with every section below it. Same reason section.wrap is qualified below. */
.phead{padding:26px 24px 10px;}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--amber);}
h1{font-size:clamp(34px,6vw,60px);font-weight:800;line-height:1.02;letter-spacing:-.03em;margin:14px 0 0;}
h1 .amber{color:var(--amber);}
.lede{font-size:clamp(16px,2.1vw,19px);color:var(--dim);line-height:1.6;margin-top:20px;max-width:660px;}
.lede b{color:var(--white);}

/* Qualified so it outranks .wrap — a bare `section` selector loses to the
   class and the vertical rhythm disappears. */
section.wrap{padding-top:52px;padding-bottom:52px;}
h2{font-size:clamp(25px,4vw,36px);font-weight:800;line-height:1.1;letter-spacing:-.02em;}
h2 .amber{color:var(--amber);}
h3{font-size:19px;font-weight:700;letter-spacing:-.01em;}
.sublede{font-size:15px;color:var(--dim);line-height:1.65;margin-top:14px;max-width:680px;}

/* prose */
.prose p{font-size:16px;color:var(--dim);line-height:1.75;margin-top:16px;}
.prose p b,.prose p strong{color:var(--white);font-weight:600;}
.prose ul{list-style:none;margin-top:18px;display:flex;flex-direction:column;gap:11px;}
.prose ul li{font-size:15.5px;color:var(--dim);line-height:1.6;padding-left:26px;position:relative;}
.prose ul li::before{content:"+";position:absolute;left:4px;color:var(--amber);font-weight:700;}
.prose a{color:var(--amber);text-decoration:underline;text-underline-offset:2px;}

/* pricing tiers */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:34px;align-items:start;}
.tier{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:26px 24px;position:relative;}
.tier.best{border-color:var(--amber);background:linear-gradient(180deg,#16140f,#111009);}
.besttab{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--amber);
  color:#0a0a0a;font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;padding:4px 12px;border-radius:99px;white-space:nowrap;}
.tname{font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--faint);}
.tier h3{margin-top:8px;font-size:21px;font-weight:800;}
.priceval{margin-top:14px;font-size:44px;font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--amber);}
.tier.t1 .priceval{color:var(--green);}
.priceval sup{font-size:22px;font-weight:700;vertical-align:super;margin-right:1px;}
.priceval .per{font-size:15px;font-weight:600;color:var(--dim);letter-spacing:0;}
.subprice{font-family:var(--mono);font-size:11px;color:var(--amber-soft);margin-top:9px;}
.support{font-family:var(--mono);font-size:10.5px;color:var(--faint);margin-top:7px;
  border-top:1px solid var(--line);padding-top:11px;}
.support b{color:var(--white);}
.tier ul{list-style:none;margin-top:18px;display:flex;flex-direction:column;gap:10px;}
.tier li{font-size:14px;line-height:1.45;color:var(--white);padding-left:22px;position:relative;}
.tier li::before{content:"+";position:absolute;left:2px;color:var(--amber);font-weight:700;}
.tier li.inh{color:var(--dim);font-style:italic;}
.tier li.inh::before{content:"↑";}
.tcta{width:100%;justify-content:center;margin-top:22px;}
.forwho{font-size:12.5px;color:var(--dim);margin-top:16px;line-height:1.5;}
.forwho b{color:var(--white);}

/* comparison table */
.tblwrap{margin-top:28px;overflow-x:auto;border:1px solid var(--line);border-radius:14px;}
table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:560px;}
th,td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--line);vertical-align:top;}
thead th{background:var(--panel);color:var(--white);font-family:var(--mono);font-size:10.5px;
  letter-spacing:.1em;text-transform:uppercase;font-weight:500;}
tbody th{color:var(--white);font-weight:600;}
td{color:var(--dim);}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:0;}
td .yes{color:var(--green);font-weight:700;}
td .no{color:var(--red);font-weight:700;}

/* callout */
.callout{background:var(--panel);border:1px solid var(--line2);border-left:3px solid var(--amber);
  border-radius:10px;padding:20px 22px;margin-top:28px;max-width:860px;}
.callout p{margin:0;font-size:15px;color:var(--dim);line-height:1.7;}
.callout p b{color:var(--white);}

/* cta band */
.ctaband{background:linear-gradient(180deg,#16140f,#100e0a);border:1px solid var(--line2);
  border-radius:20px;padding:40px 32px;text-align:center;margin-top:16px;}
.ctaband p{font-size:15px;color:var(--dim);max-width:560px;margin:16px auto 0;line-height:1.6;}
.ctabtns{display:flex;gap:14px;justify-content:center;margin-top:26px;flex-wrap:wrap;}

/* FAQ — <details> so every answer is in the DOM whether open or shut */
.faqlist{margin-top:26px;border-top:1px solid var(--line);}
.faqlist details{border-bottom:1px solid var(--line);}
.faqlist summary{list-style:none;cursor:pointer;padding:19px 44px 19px 0;position:relative;
  font-size:16.5px;font-weight:700;letter-spacing:-.01em;line-height:1.4;}
.faqlist summary::-webkit-details-marker{display:none;}
.faqlist summary:hover{color:var(--amber-soft);}
.faqlist summary::after{content:'+';position:absolute;right:8px;top:50%;transform:translateY(-50%);
  font-family:var(--mono);font-size:20px;font-weight:400;color:var(--amber);}
.faqlist details[open] summary::after{content:'−';}
.faqlist .faqa{padding:0 44px 22px 0;font-size:15px;color:var(--dim);line-height:1.7;}
.faqlist .faqa p+p{margin-top:12px;}
.faqlist .faqa a{color:var(--amber);text-decoration:underline;text-underline-offset:2px;}
/* section.wrap already supplies the vertical rhythm between groups, so this
   only needs to shrink the heading, not add more space. */
.faqgroup{padding-top:8px;}
.faqgroup > h2{font-size:clamp(21px,3vw,27px);}

/* jump links — set apart as pills so five multi-word labels on one row read as
   five links rather than one run-on sentence */
.jump{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px;}
.jump a{font-family:var(--mono);font-size:11px;color:var(--dim);border:1px solid var(--line);
  border-radius:99px;padding:7px 14px;transition:border-color .15s,color .15s;}
.jump a:hover{color:var(--white);border-color:var(--amber);}

/* footer */
footer{border-top:1px solid var(--line);padding:34px 0;margin-top:40px;}
.footrow{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;
  font-family:var(--mono);font-size:12px;color:var(--faint);}
.footnav{display:flex;flex-wrap:wrap;gap:18px;}
.footnav a{color:var(--faint);}
.footnav a:hover{color:var(--white);}
.footrow a{color:inherit;}

/* consent banner — same markup and behaviour as the other pages */
.consent{position:fixed;left:16px;right:16px;bottom:16px;z-index:9999;max-width:720px;margin:0 auto;
  display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  background:var(--panel2);border:1px solid var(--line2);border-radius:12px;padding:14px 16px;
  box-shadow:0 12px 32px rgba(0,0,0,.5);}
.consent[hidden],.gpc-note[hidden]{display:none;}
.consent p{margin:0;flex:1 1 320px;color:var(--dim);font-size:13px;line-height:1.5;}
.consent p a{color:var(--amber);text-decoration:underline;}
.consent-btns{display:flex;gap:8px;flex:0 0 auto;}
.consent button{font:inherit;font-size:13px;font-weight:600;padding:8px 16px;border-radius:8px;
  cursor:pointer;border:1px solid var(--line2);}
.c-decline{background:transparent;color:var(--dim);}
.c-decline:hover{color:var(--white);border-color:var(--dim);}
.c-accept{background:var(--amber);color:#0a0a0a;border-color:var(--amber);}
.c-accept:hover{background:var(--amber-soft);}
.privacy-row{margin-top:14px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  font-family:var(--mono);font-size:11px;color:var(--faint);}
.privacy-row button{font:inherit;background:none;border:0;padding:0;color:var(--faint);
  text-decoration:underline;cursor:pointer;}
.privacy-row button:hover{color:var(--dim);}
.gpc-note{color:var(--green);}

@media(max-width:860px){
  .tiers{grid-template-columns:1fr;}
  nav .navlink{display:none;}
}
@media (prefers-reduced-motion:no-preference){
  .consent{animation:consent-in .3s ease-out;}
  @keyframes consent-in{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
}