/* Praise Picker — shared stylesheet for services / pricing / about / blog
   Tokens and fonts mirror the homepage (index.html), including dark mode. */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800&family=Source+Sans+3:ital,wght@0,400;0,600;1,400&family=Roboto+Mono:wght@400;500;700&display=swap');

:root{
  --paper:#F3F0F7;
  --card:#FBFAFD;
  --ink:#231634;
  --ink-2:#4E4262;
  --ink-3:#7C7389;
  --rule:#D4CADF;
  --rule-soft:#E7E1EE;
  --purple:#6B34B0;
  --purple-soft:#EADDF8;
  --amber:#C98A0A;
  --green:#1D6B48;
  --alert:#A8392C;
  --band:#241539;
  --band-ink:#F3F0F7;
  --band-rule:#453059;
  --accent-fg:#FFFFFF;
  --shadow:0 1px 0 rgba(35,22,52,.06), 0 12px 28px -18px rgba(35,22,52,.55);
  --gutter:20px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#14101C;
    --card:#1E1729;
    --ink:#EDE7F3;
    --ink-2:#BBB1C8;
    --ink-3:#877D95;
    --rule:#392D4B;
    --rule-soft:#2B2139;
    --purple:#B084EE;
    --purple-soft:#362350;
    --amber:#E5A72A;
    --green:#4FA37A;
    --alert:#D0705F;
    --band:#0B0712;
    --band-ink:#EDE7F3;
    --band-rule:#31243F;
    --accent-fg:#1A1024;
    --shadow:0 1px 0 rgba(0,0,0,.4), 0 12px 28px -18px rgba(0,0,0,.9);
  }
}
:root[data-theme="dark"]{
  --paper:#14101C;
  --card:#1E1729;
  --ink:#EDE7F3;
  --ink-2:#BBB1C8;
  --ink-3:#877D95;
  --rule:#392D4B;
  --rule-soft:#2B2139;
  --purple:#B084EE;
  --purple-soft:#362350;
  --amber:#E5A72A;
  --green:#4FA37A;
  --alert:#D0705F;
  --band:#0B0712;
  --band-ink:#EDE7F3;
  --band-rule:#31243F;
  --accent-fg:#1A1024;
  --shadow:0 1px 0 rgba(0,0,0,.4), 0 12px 28px -18px rgba(0,0,0,.9);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Source Sans 3", ui-sans-serif, system-ui, sans-serif;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:1080px;margin:0 auto;padding-inline:var(--gutter)}

/* ---------- type ---------- */
.eyebrow{
  font-family:"Roboto Mono", ui-monospace, monospace;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 14px;
}
h1,h2,h3,h4{
  font-family:Archivo, ui-sans-serif, system-ui, sans-serif;
  color:var(--ink);margin:0 0 .5em;
  text-wrap:balance;line-height:1.08;letter-spacing:-.02em;
  overflow-wrap:break-word;
}
h1{font-size:clamp(30px,6vw,60px);font-weight:800}
h2{font-size:clamp(24px,3.4vw,38px);font-weight:800}
h3{font-size:19px;font-weight:700;line-height:1.25}
h4{font-size:16px;font-weight:700;line-height:1.3}
p{margin:0 0 1.1em}
.lede{font-size:clamp(17px,1.6vw,19px);color:var(--ink-2);max-width:60ch}
.sub{color:var(--ink-3);max-width:66ch}
.small{font-size:14px;color:var(--ink-3)}
.mono{font-family:"Roboto Mono", ui-monospace, monospace}
.mark-hl{
  background:linear-gradient(transparent 62%,var(--purple-soft) 62%);
  box-decoration-break:clone;-webkit-box-decoration-break:clone;
}

/* ---------- sections ---------- */
.band{padding:clamp(52px,8vw,96px) 0}
.band--tight{padding:clamp(38px,5vw,60px) 0}
.band--flush{padding-top:0}
.band--alt{background:var(--card);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.band--dark{background:var(--band);color:var(--band-ink)}
.band--dark h1,.band--dark h2,.band--dark h3,.band--dark h4{color:var(--band-ink)}
.band--dark .sub,.band--dark .lede{color:#C3B4D4}
.band--dark .eyebrow{color:#A492B8}
.head{max-width:760px;margin-bottom:clamp(26px,4vw,42px)}

/* ---------- buttons ---------- */
.btns{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0 0}
.btn{
  display:inline-block;
  font-family:Archivo, ui-sans-serif, system-ui, sans-serif;
  font-weight:700;font-size:15px;
  padding:13px 26px;text-decoration:none;
  border:1px solid var(--purple);background:var(--purple);color:var(--accent-fg);
  transition:.15s;
}
.btn:hover{filter:brightness(1.12)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--rule)}
.btn--ghost:hover{filter:none;border-color:var(--ink)}
.band--dark .btn{background:var(--purple);border-color:var(--purple);color:var(--accent-fg)}
.band--dark .btn--ghost{background:transparent;color:var(--band-ink);border-color:var(--band-rule)}
.band--dark .btn--ghost:hover{border-color:var(--band-ink)}

/* ---------- grids & cards ---------- */
.grid{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid>*{background:var(--card);padding:clamp(22px,2.6vw,30px)}
.band--dark .grid{background:var(--band-rule);border-color:var(--band-rule)}
.band--dark .grid>*{background:var(--band)}

.cards{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(268px,1fr))}
.card{
  background:var(--card);border:1px solid var(--rule);
  border-top:2px solid var(--purple);
  box-shadow:var(--shadow);
  padding:clamp(22px,2.6vw,28px);
}
.card p:last-child{margin-bottom:0}
.card .eyebrow{color:var(--purple)}

.stat{
  font-family:Archivo, ui-sans-serif, system-ui, sans-serif;
  font-size:clamp(28px,3.4vw,38px);font-weight:800;color:var(--purple);
  line-height:1;margin-bottom:12px;display:block;letter-spacing:-.02em;
}

/* numbered list */
.numbered{list-style:none;margin:0;padding:0;display:grid;gap:20px}
.numbered li{display:grid;grid-template-columns:30px 1fr;gap:16px;align-items:start}
.numbered .n{
  font-family:"Roboto Mono", ui-monospace, monospace;font-size:11px;
  color:var(--purple);border:1px solid var(--rule);
  width:30px;height:30px;display:flex;align-items:center;justify-content:center;
  background:var(--card);
}
.band--dark .numbered .n{background:var(--band);border-color:var(--band-rule);color:#C8A5F5}
.numbered h4{margin:2px 0 4px}
.numbered p{margin:0;color:var(--ink-3);font-size:15.5px}
.band--dark .numbered p{color:#C3B4D4}

/* spec rows */
.rows{border:1px solid var(--rule);background:var(--card);box-shadow:var(--shadow)}
.row{display:flex;justify-content:space-between;gap:20px;padding:14px 20px;border-bottom:1px solid var(--rule-soft);font-size:15px}
.row:last-child{border-bottom:0}
.row .k{
  font-family:"Roboto Mono", ui-monospace, monospace;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);padding-top:3px;
}
.row .v{text-align:right;font-weight:600}

/* ---------- pricing ---------- */
.plans{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));align-items:start}
.plan{background:var(--card);border:1px solid var(--rule);padding:clamp(24px,2.6vw,30px);position:relative;box-shadow:var(--shadow)}
.plan--feature{border-color:var(--purple)}
.tag{
  position:absolute;top:0;right:0;background:var(--purple);color:var(--accent-fg);
  font-family:"Roboto Mono", ui-monospace, monospace;font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;padding:5px 10px;
}
.price{
  font-family:Archivo, ui-sans-serif, system-ui, sans-serif;
  font-size:36px;font-weight:800;line-height:1;margin:6px 0 4px;letter-spacing:-.03em;
}
.price span{font-size:15px;font-weight:600;color:var(--ink-3);letter-spacing:0}
.plan ul{list-style:none;margin:18px 0 22px;padding:0;display:grid;gap:9px}
.plan li{font-size:15px;padding-left:20px;position:relative;color:var(--ink-2)}
.plan li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;background:var(--purple-soft)}
.plan li.on::before{background:var(--purple)}
.stars{color:var(--amber);letter-spacing:2px;font-size:13px}

/* ---------- faq ---------- */
.faq{border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule);padding:18px 0}
.faq summary{
  font-family:Archivo, ui-sans-serif, system-ui, sans-serif;
  font-weight:700;font-size:17px;cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;gap:20px;align-items:center;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:"Roboto Mono", monospace;color:var(--purple);font-size:19px}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:12px 0 0;color:var(--ink-3);max-width:72ch}

/* ---------- blog ---------- */
.posts{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule)}
.post-row{
  background:var(--card);padding:clamp(24px,3vw,32px);
  display:grid;grid-template-columns:150px 1fr;gap:clamp(16px,3vw,34px);
  text-decoration:none;transition:.15s;
}
.post-row:hover h3{color:var(--purple)}
.post-meta{
  font-family:"Roboto Mono", ui-monospace, monospace;font-size:11px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);line-height:1.8;
}
.post-row h3{font-size:clamp(20px,2.3vw,24px);margin:0 0 8px;transition:.15s}
.post-row p{margin:0;color:var(--ink-3);font-size:15.5px;max-width:64ch}

.article{max-width:700px}
.article h2{font-size:clamp(23px,2.8vw,29px);margin:2.2em 0 .6em}
.article h3{font-size:19px;margin:1.9em 0 .4em}
.article p,.article li{font-size:17px;color:var(--ink-2);line-height:1.68}
.article ul,.article ol{padding-left:22px;margin:0 0 1.4em}
.article li{margin-bottom:.55em}
.article blockquote{
  margin:1.8em 0;padding:18px 24px;background:var(--card);
  border:1px solid var(--rule);border-left:3px solid var(--purple);
  font-size:17px;color:var(--ink);
}
.article blockquote p:last-child{margin:0}
.article hr{border:0;border-top:1px solid var(--rule);margin:2.6em 0}
.callout{
  background:var(--card);border:1px solid var(--rule);border-left:3px solid var(--purple);
  padding:22px 24px;margin:2em 0;box-shadow:var(--shadow);
}
.callout p:last-child{margin:0}
.callout .eyebrow{color:var(--purple)}

/* ---------- cta + footer ---------- */
.cta{text-align:center}
.cta .head{margin:0 auto 8px}
.cta .btns{justify-content:center}

.foot{border-top:1px solid var(--rule);padding:32px 0 44px;font-size:14px;color:var(--ink-3)}
.foot a{color:var(--ink-3)}
.foot-top{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:10px}
.foot-nav{display:flex;gap:18px;flex-wrap:wrap}

@media (max-width:860px){
  .grid--3,.grid--2{grid-template-columns:1fr}
  .post-row{grid-template-columns:1fr;gap:10px}
  .row{flex-direction:column;gap:2px}
  .row .v{text-align:left}
}
@media (max-width:620px){
  body{font-size:16px}
  .masthead{flex-wrap:wrap;gap:10px;padding-top:20px}
  .rule{display:none}
  .mark{width:100%}
  .nav{width:100%;gap:14px}
  .nav a{font-size:10px;letter-spacing:.1em}
  .btn{width:100%;text-align:center}
  .plan{padding:22px}
  .price{font-size:32px}
  .article p,.article li{font-size:16.5px}
}