/* Shared base for the "Websites for ..." pages. Each page adds its own look on top. */
:root{
  --ink:#0d0a1c; --ink2:#161131; --line:#2a2350;
  --violet:#7c5cff; --violet-deep:#3b2a8f; --orange:#ff7a2f; --amber:#ffb547;
  --paper:#f4efe6; --mute:#a9a2c4;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--paper);font:17px/1.6 "Inter Tight",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%;display:block}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
:focus-visible{outline:3px solid var(--amber);outline-offset:3px;border-radius:6px}
.serif{font-family:"Instrument Serif",serif;font-style:italic;font-weight:400}
.top{position:sticky;top:0;z-index:20;background:rgba(13,10,28,.82);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.06)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{font-weight:800;font-size:22px;letter-spacing:-.03em;text-decoration:none}
.logo b{color:var(--orange)}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--orange);color:#1a0b02;font-weight:700;text-decoration:none;padding:13px 22px;border-radius:999px;border:0}
.btn:hover{background:var(--amber)}
.btn.ghost{background:transparent;color:var(--paper);box-shadow:inset 0 0 0 1.5px rgba(244,239,230,.35)}
.btn.ghost:hover{box-shadow:inset 0 0 0 1.5px var(--paper)}
section{padding:96px 0}
.crumb{font-size:14px;color:var(--mute);margin:0 0 20px}
.crumb a{text-decoration:none}
.crumb a:hover{color:var(--paper)}
h1{font-size:clamp(40px,6.2vw,78px);line-height:.98;letter-spacing:-.045em;margin:0 0 24px;font-weight:800}
h2{font-size:clamp(30px,4.2vw,50px);line-height:1.04;letter-spacing:-.035em;margin:0 0 18px;font-weight:800}
h3{font-size:22px;letter-spacing:-.02em;margin:0 0 8px}
.lede{font-size:20px;color:#d9d3ea;max-width:44ch;margin:0 0 32px}
.ctas{display:flex;gap:12px;flex-wrap:wrap}
.small{color:var(--mute);font-size:15px;margin-top:18px}
.intro{font-size:19px;max-width:56ch;margin:0 0 40px}
.cols{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.chips li{padding:8px 16px;border-radius:999px;font-size:16px}
.ticks{list-style:none;margin:0;padding:0}
.ticks li{padding:10px 0 10px 32px;position:relative}
.ticks li:before{content:"";position:absolute;left:5px;top:18px;width:13px;height:7px;border-left:2.5px solid currentColor;border-bottom:2.5px solid currentColor;transform:rotate(-45deg);opacity:.85}
.ticks b{display:block}
details{border-top:1px solid var(--line);padding:18px 0}
details:last-child{border-bottom:1px solid var(--line)}
summary{cursor:pointer;font-weight:700;font-size:19px}
details p{color:var(--mute);margin:10px 0 0}
.anywhere p{font-size:19px;max-width:52ch}
.anywhere a{font-weight:700}
.cta{text-align:center}
.cta h2{max-width:20ch;margin:0 auto 18px}
.cta p{color:#d9d3ea;max-width:46ch;margin:0 auto 30px}
footer{border-top:1px solid var(--line);padding:32px 0;color:var(--mute);font-size:15px}
footer .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center}
footer .logo{color:var(--paper)}
footer nav{display:flex;gap:6px 18px;flex-wrap:wrap;font-size:14px}
footer nav a{text-decoration:none}
footer nav a:hover{color:var(--paper)}
@media (max-width:900px){
  section{padding:72px 0}
  .cols{grid-template-columns:1fr;gap:28px}
}
@media (max-width:520px){
  .top .btn{padding:10px 16px;font-size:15px}
}