/* ============================================================
   RVA Digital - shared stylesheet for inner pages
   Tokens lifted from the homepage so everything matches.
   Upload to: public_html/assets/site.css
   ============================================================ */

:root{
  --ground:#F6F4FA; --surface:#FFFFFF; --surface-2:#EFEAF7;
  --ink:#17132F; --ink-2:#443C63; --muted:#6E6689;
  --line:#E2DCEF; --line-strong:#C6BCDC;
  --accent:#9A2AC4; --accent-ink:#FFFFFF; --accent-soft:#F3E6FB;
  --signal:#0B7C74; --signal-soft:#D8F6F2;
  --grad:linear-gradient(135deg,#7A3BF3 0%,#B53CC0 55%,#F13D8D 100%);
  --grad-btn:linear-gradient(135deg,#7A3BF3 0%,#C32C9E 100%);
  --shadow:0 1px 2px rgba(23,19,47,.05), 0 12px 28px -18px rgba(23,19,47,.35);
  --display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --maxw:1140px; --r:10px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--ground); color:var(--ink-2);
  font-family:var(--serif); font-size:17px; line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
img{max-width:100%; height:auto; display:block}

a{color:var(--accent); text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px}
a:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:3px}

h1,h2,h3,h4{font-family:var(--display); color:var(--ink); text-wrap:balance; margin:0}
h1{font-size:clamp(36px,5.4vw,58px); font-weight:700; letter-spacing:-.03em; line-height:1.04}
h2{font-size:clamp(27px,3.2vw,36px); font-weight:700; letter-spacing:-.022em; line-height:1.12; margin:0 0 10px}
h3{font-size:20px; font-weight:600; letter-spacing:-.012em; margin:0 0 6px}
h4{font-size:16px; font-weight:600; letter-spacing:-.005em; margin:0 0 4px}
p{margin:0 0 16px; max-width:68ch}
ul,ol{margin:0 0 18px; padding-left:22px; max-width:68ch}
li{margin-bottom:8px}
li::marker{color:var(--line-strong)}
strong{color:var(--ink); font-weight:600}

.eyebrow{
  font-family:var(--mono); font-size:11px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--accent);
  margin:0 0 14px;
}
.lede{font-size:20px; line-height:1.5; color:var(--ink-2); max-width:62ch}
.muted{color:var(--muted)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--display); font-size:15px; font-weight:600; letter-spacing:-.005em;
  padding:13px 22px; border-radius:var(--r); border:1px solid transparent;
  text-decoration:none; cursor:pointer; transition:transform .12s ease, box-shadow .12s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--grad-btn); color:var(--accent-ink); box-shadow:var(--shadow)}
.btn-ghost{background:var(--surface); color:var(--ink); border-color:var(--line-strong)}
.btn-sm{font-size:14px; padding:9px 16px}
.btn-row{display:flex; flex-wrap:wrap; gap:12px; margin:26px 0 0}

/* ---------- header ---------- */
.site-head{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter:saturate(1.2) blur(10px);
  border-bottom:1px solid var(--line);
}
.head-in{display:flex; align-items:center; gap:20px; height:62px}
.brand{display:inline-flex; align-items:center; text-decoration:none; flex:none}
.brand img{height:31px; width:auto; display:block}
.brand .on-dark{display:none}
footer .brand img{height:27px}
.nav{display:flex; gap:22px; margin-left:auto}
.nav a{font-family:var(--display); text-decoration:none; font-size:14.5px; font-weight:500; letter-spacing:normal; color:var(--ink-2)}
.nav a:hover,.nav a[aria-current="page"]{color:var(--accent)}
.head-cta{margin-left:0; font-family:var(--display); font-size:13.5px; letter-spacing:normal; padding:8px 14px; border-radius:8px}
@media (max-width:860px){
  .nav{display:none}
  .head-cta{margin-left:auto}
}

/* ---------- layout blocks ---------- */
.hero{padding:64px 0 44px; border-bottom:1px solid var(--line)}
.hero .lede{margin-top:18px}
section.band{padding:56px 0; border-bottom:1px solid var(--line)}
section.band:last-of-type{border-bottom:none}
.band-alt{background:var(--surface-2)}
.crumbs{
  font-family:var(--mono); font-size:11.5px; color:var(--muted);
  padding:16px 0 0; letter-spacing:.02em;
}
.crumbs a{color:var(--muted)}

/* ---------- cards ---------- */
.grid{display:grid; gap:18px; margin:26px 0 0}
.g2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:22px 22px 24px;
}
.card p:last-child{margin-bottom:0}
.card .tag{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--accent); display:block; margin:0 0 10px;
}

/* ---------- price table ---------- */
.tablewrap{overflow-x:auto; margin:26px 0 0; border:1px solid var(--line); border-radius:var(--r); background:var(--surface)}
table{border-collapse:collapse; width:100%; min-width:560px}
th{
  font-family:var(--mono); font-size:10.5px; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
  text-align:left; padding:13px 18px; border-bottom:1px solid var(--line);
  background:var(--surface-2);
}
td{padding:14px 18px; border-bottom:1px solid var(--line); font-size:15.5px; vertical-align:top}
tr:last-child td{border-bottom:none}
td:first-child{font-family:var(--display); font-weight:600; color:var(--ink); white-space:nowrap}
.figure{font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:14.5px}

/* ---------- checklist ---------- */
.ticks{list-style:none; padding:0; margin:18px 0 0}
.ticks li{position:relative; padding-left:26px; margin-bottom:10px}
.ticks li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:9px; height:9px; border-radius:50%; background:var(--signal);
}

/* ---------- faq ---------- */
details.q{border-bottom:1px solid var(--line); padding:16px 0}
details.q summary{
  font-family:var(--display); font-weight:600; font-size:17px; color:var(--ink);
  cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:16px;
}
details.q summary::-webkit-details-marker{display:none}
details.q summary::after{content:"+"; color:var(--accent); font-weight:500}
details.q[open] summary::after{content:"\2013"}
details.q p{margin:12px 0 0}

/* ---------- cta band ---------- */
.cta{
  background:var(--surface); border:1px solid var(--line-strong);
  border-radius:var(--r); padding:30px 28px; margin:0;
  box-shadow:var(--shadow);
}
.cta h2{margin-bottom:8px}
.cta p{margin-bottom:0}

/* ---------- footer ---------- */
footer{padding:36px 0 44px}
.foot-in{display:flex; gap:20px; align-items:center; flex-wrap:wrap; font-family:var(--display); font-size:13.5px; color:var(--muted)}
.foot-in .brand{font-size:16px}
.foot-in a{color:inherit; text-decoration:none}
.foot-links{margin-left:auto; display:flex; gap:18px; flex-wrap:wrap}
.foot-links a:hover{color:var(--accent)}
.legal{margin-top:14px; font-family:var(--mono); font-size:11.5px; color:var(--muted); line-height:1.7}

/* kept: .nap may be used inside page content, not just the footer */
.nap{font-style:normal; font-size:15px; line-height:1.7; color:var(--ink-2)}
.nap strong{display:block; font-family:var(--display)}

@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important; scroll-behavior:auto}}


/* mobile nav */
.nav-toggle{display:none;margin-left:auto;background:none;border:0;padding:0;width:44px;height:44px;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--ink-2,#333);border-radius:2px;transition:transform .2s,opacity .2s}
.nav-toggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle.is-open span:nth-child(2){opacity:0}
.nav-toggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav-panel{display:none}
@media (max-width:860px){
  .nav-toggle{display:flex}
  .head-cta{margin-left:10px}
  .nav-panel:not([hidden]){display:block;padding:6px 20px 16px;border-top:1px solid var(--line,#e6e2ee);background:var(--ground,#fff)}
  .nav-panel a{display:block;padding:13px 2px;text-decoration:none;font-family:var(--display);font-size:16px;font-weight:500;color:var(--ink-2);border-bottom:1px solid var(--line,#eee)}
  .nav-panel a:last-child{border-bottom:0}
  .nav-panel a:hover{color:var(--accent)}
}