/* Shared styles for crystalrosereynolds.com inner pages (service pages, media kit).
   Tokens match the homepage; keep the two in sync. */
:root{
  --paper:#F8F6FB; --ink:#1E1730; --muted:#5D5470; --line:#E0D9EA;
  --rose:#6A35A8; --rose-ink:#FFFFFF; --stub:#FFFFFF; --wash:#EFE8F8;
  --f-display:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif;
  --f-body:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#120F19; --ink:#F1EDF8; --muted:#A79FB8; --line:#2E2740;
  --rose:#B794F2; --rose-ink:#1A0F2B; --stub:#1C1727; --wash:#231B34; color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#120F19; --ink:#F1EDF8; --muted:#A79FB8; --line:#2E2740;
  --rose:#B794F2; --rose-ink:#1A0F2B; --stub:#1C1727; --wash:#231B34; color-scheme:dark}

*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.6 var(--f-body);-webkit-font-smoothing:antialiased}
.wrap{max-width:1080px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:3px solid var(--rose);outline-offset:3px;border-radius:4px}
h1,h2,h3{font-family:var(--f-display);text-wrap:balance;margin:0;line-height:1.05}
h1{font-size:clamp(40px,7vw,80px);font-weight:800;letter-spacing:-.03em;line-height:.95}
h2{font-size:clamp(26px,4vw,40px);font-weight:800;letter-spacing:-.01em}
h3{font-size:20px;font-weight:600;line-height:1.2}
p{margin:0}
.label{font:600 12px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
section{padding-block:clamp(48px,7vw,80px);border-top:1px solid var(--line)}
.sec-head{display:grid;gap:12px;margin-bottom:28px;max-width:62ch}
.sec-head p{color:var(--muted)}
.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 20px;border-radius:999px;font:600 15px/1 var(--f-body);text-decoration:none;border:1.5px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer}
.btn.primary{background:var(--rose);border-color:var(--rose);color:var(--rose-ink)}

/* top bar */
.top{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-block:20px;flex-wrap:wrap}
.top nav{display:flex;gap:20px;flex-wrap:wrap}
.top nav a{text-decoration:none;font-weight:500;font-size:15px;color:var(--muted)}
.top nav a:hover,.top nav a[aria-current]{color:var(--ink)}
.mark{font:800 15px/1 var(--f-display);letter-spacing:.02em;text-decoration:none}
.crumbs{font:500 13px/1 var(--f-mono);color:var(--muted);padding-top:8px}
.crumbs a{text-decoration-color:var(--line);text-underline-offset:3px}

/* page hero */
.page-hero{display:grid;gap:22px;padding-block:clamp(32px,6vw,64px) clamp(40px,6vw,72px);max-width:820px}
.page-hero h1 span{color:var(--rose)}
.page-hero .lede{font-size:clamp(18px,2vw,21px);max-width:52ch}
.cta-row{display:flex;gap:12px;flex-wrap:wrap}

/* live proof strip */
.proof{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--line);background:var(--stub);border-radius:14px;overflow:hidden}
.proof div{padding:18px 20px;display:grid;gap:6px;border-right:1px solid var(--line)}
.proof div:last-child{border-right:0}
.proof strong{font:800 clamp(22px,3vw,30px)/1 var(--f-display);font-variant-numeric:tabular-nums}
.proof span{font-size:14px;color:var(--muted)}
.proof.six{grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line)}
.proof.six div{border:0;background:var(--stub)}

/* lists and cards */
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.card{background:var(--stub);border:1px solid var(--line);border-radius:14px;padding:22px;display:grid;gap:8px;align-content:start}
.card p{color:var(--muted);font-size:15px}
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:12px;max-width:62ch}
.ticks li{position:relative;padding-left:28px}
.ticks li::before{content:"";position:absolute;left:0;top:.55em;width:14px;height:8px;border-left:2px solid var(--rose);border-bottom:2px solid var(--rose);transform:rotate(-45deg)}
.prose{display:grid;gap:14px;max-width:64ch}
.prose p{color:var(--ink)}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;counter-reset:s}
.steps li{counter-increment:s;display:grid;gap:8px;align-content:start;padding-top:14px;border-top:3px solid var(--ink)}
.steps li::before{content:"Step " counter(s);font:600 12px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--rose)}
.steps p{color:var(--muted);font-size:15px}

/* faq */
.faq{display:grid;border-top:1.5px solid var(--ink)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:18px 40px 18px 0;font:600 18px/1.35 var(--f-body);position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:14px;font:400 26px/1 var(--f-mono);color:var(--rose)}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 0 20px;color:var(--muted);max-width:64ch}

/* closing cta band */
.band{background:var(--ink);color:var(--paper);border-top:0}
.band h2{font-size:clamp(30px,5vw,52px)}
.band p{color:color-mix(in srgb,var(--paper) 75%,transparent);max-width:52ch}
.band .inner{display:grid;gap:18px;justify-items:start}
.band .btn.primary{background:var(--rose);border-color:var(--rose);color:var(--rose-ink)}
.band .btn{border-color:var(--paper);color:var(--paper)}
.band .mail{font:600 16px/1.2 var(--f-mono);user-select:all}

.more-links{display:flex;gap:10px;flex-wrap:wrap}
.more-links a{font-size:15px;padding:9px 14px;border:1px solid var(--line);border-radius:999px;text-decoration:none;background:var(--stub)}

footer{background:var(--ink);color:color-mix(in srgb,var(--paper) 60%,transparent);font-size:13px}
footer .wrap{padding-block:22px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;border-top:1px solid color-mix(in srgb,var(--paper) 18%,transparent)}
footer a{color:inherit}

@media (max-width:820px){
  .proof{grid-template-columns:repeat(2,minmax(0,1fr))}
  .proof div:nth-child(2){border-right:0}
  .proof div:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .proof.six{grid-template-columns:repeat(2,minmax(0,1fr))}
  .proof.six div{border:0}
  .grid2,.grid3{grid-template-columns:minmax(0,1fr)}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:520px){.steps{grid-template-columns:minmax(0,1fr)}}