/* 123smith — shared styles for content pages (about / privacy / terms) */
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400 700;font-display:swap;src:url('/assets/space-grotesk.woff2') format('woff2')}
:root{
  --bg:#08080c; --ink:#f4f4f0; --muted:#9a9caa; --faint:#797b89;
  --line:rgba(255,255,255,.09); --line2:rgba(255,255,255,.055);
  --glass:rgba(255,255,255,.035); --glass2:rgba(255,255,255,.06);
  --lime:#c9f24e; --lime2:#a6e60a; --violet:#8b6cff; --cyan:#4fe3d0;
  --r:20px; --ease:cubic-bezier(.4,0,.2,1);
  --display:'Space Grotesk',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased; letter-spacing:-.01em; overflow-x:hidden}
.bgfx{position:fixed; inset:0; z-index:-2; overflow:hidden; pointer-events:none}
.bgfx::before{content:""; position:absolute; inset:-30%;
  background:
    radial-gradient(38% 42% at 18% 12%, rgba(139,108,255,.26), transparent 60%),
    radial-gradient(34% 38% at 88% 8%, rgba(79,227,208,.16), transparent 60%),
    radial-gradient(40% 46% at 70% 96%, rgba(201,242,78,.12), transparent 62%);
  filter:blur(30px)}
.grain{position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.45; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E")}

.wrap{max-width:1160px; margin:0 auto; padding:clamp(18px,4vw,38px) clamp(16px,4vw,32px) 80px}
/* keep prose at a readable line length even though the page frame matches the homepage (1160) */
main{max-width:820px}

/* nav */
.nav{display:flex; align-items:center; gap:14px; margin-bottom:clamp(28px,7vw,56px)}
.mark{display:inline-flex; align-items:stretch; gap:0; font-family:var(--display); font-weight:700; font-size:20px; letter-spacing:-.03em; color:var(--ink); text-decoration:none; border-bottom:0; filter:drop-shadow(0 3px 10px rgba(124,92,255,.22))}
.mark .n{display:flex; align-items:center; gap:4px; padding:5px 6px 5px 8px; background:linear-gradient(180deg,#2e2e3e,#1b1b26); border:1px solid rgba(255,255,255,.16); border-right:0; box-shadow:inset 0 1px 0 rgba(255,255,255,.09); border-radius:11px 0 0 11px}
.mark .n i{width:19px; height:19px; border-radius:6px; display:grid; place-items:center; font-style:normal; font-size:11.5px; font-weight:800; color:#08080c; box-shadow:0 2px 5px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.5); transition:transform .34s cubic-bezier(.34,1.56,.64,1)}
.mark .n i:nth-child(1){background:linear-gradient(145deg,#d8ff66,#a6e60a)}
.mark .n i:nth-child(2){background:linear-gradient(145deg,#74f1e2,#2ec9b8)}
.mark .n i:nth-child(3){background:linear-gradient(145deg,#a98bff,#7c5cff); color:#fff}
.mark:hover .n i{transform:translateY(-2px)}
.mark:hover .n i:nth-child(2){transition-delay:.06s}
.mark:hover .n i:nth-child(3){transition-delay:.12s}
@media (prefers-reduced-motion:reduce){.mark:hover .n i{transform:none}}
.mark .ribbon{position:relative; display:flex; align-items:center; padding:0 17px 0 11px; color:#fff; background:linear-gradient(135deg,#9a7dff,#7c5cff); box-shadow:inset 0 1px 0 rgba(255,255,255,.3); clip-path:polygon(0 0,100% 0,calc(100% - 7px) 50%,100% 100%,0 100%); transform-origin:left center}
@keyframes ribbonUnfurl{0%{transform:skewX(0) scaleX(1)}30%{transform:skewX(-7deg) scaleX(1.03)}62%{transform:skewX(3deg) scaleX(1)}100%{transform:skewX(0) scaleX(1)}}
.mark:hover .ribbon{animation:ribbonUnfurl .6s ease-in-out}
@media (prefers-reduced-motion:reduce){.mark:hover .ribbon{animation:none}}
.nav-links{margin-left:auto; display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.nav-links a{font:600 13px/1 var(--sans); color:var(--muted); text-decoration:none; padding:8px 12px; border-radius:9px; border-bottom:0; transition:.2s var(--ease)}
.nav-links a:hover{color:var(--ink); background:var(--glass)}
.nav-links a.cta{color:#08080c; background:linear-gradient(100deg,var(--lime),#e6ff7a)}
.nav-links a.login{color:var(--ink); border:1px solid var(--line)}
.nav-links a.login:hover{border-color:var(--muted); background:var(--glass)}
.nav-toggle{position:absolute; width:1px; height:1px; opacity:0; margin:0; pointer-events:none}
.burger{display:none; margin-left:auto; width:42px; height:38px; border:1px solid var(--line); border-radius:11px; background:var(--glass); cursor:pointer; align-items:center; justify-content:center; flex-direction:column; gap:4px; padding:0}
.burger span{display:block; width:17px; height:2px; border-radius:2px; background:var(--ink); transition:.25s var(--ease)}
.nav-toggle:focus-visible ~ .burger{outline:2px solid var(--lime); outline-offset:2px}
.nav-toggle:checked ~ .burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-toggle:checked ~ .burger span:nth-child(2){opacity:0}
.nav-toggle:checked ~ .burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media (max-width:720px){
  .nav{position:relative; flex-wrap:nowrap}
  .burger{display:flex}
  .nav-links{position:absolute; top:calc(100% + 12px); left:0; right:0; margin-left:0; flex-direction:column; align-items:stretch; gap:6px; flex-wrap:nowrap; padding:10px; background:linear-gradient(180deg,var(--glass2),var(--glass)); border:1px solid var(--line); border-radius:16px; backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); box-shadow:0 30px 70px -28px #000; opacity:0; transform:translateY(-8px); pointer-events:none; transition:.24s var(--ease); z-index:60}
  .nav-toggle:checked ~ .nav-links{opacity:1; transform:none; pointer-events:auto}
  .nav-links a{padding:12px 14px; font-size:15px}
  .nav-links a.login,.nav-links a.cta{text-align:center}
  .nav-links a.cta{margin-top:2px}
}

/* a11y: visible keyboard focus + skip link */
:focus-visible{outline:2px solid var(--lime); outline-offset:2px}
.skip{position:absolute; left:12px; top:-60px; z-index:200; background:var(--lime); color:#08080c; padding:11px 16px; border-radius:11px; font:700 14px var(--sans); text-decoration:none; border-bottom:0; transition:top .2s var(--ease)}
.skip:focus{top:12px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; scroll-behavior:auto!important}
}

/* article */
.eyebrow{font:600 12px/1 var(--mono); letter-spacing:.2em; color:var(--lime2); text-transform:uppercase; display:flex; align-items:center; gap:10px; margin-bottom:16px}
.eyebrow::before{content:""; width:26px; height:1px; background:linear-gradient(90deg,var(--lime),transparent)}
h1{font-family:var(--display); font-weight:700; letter-spacing:-.035em; line-height:1.02; font-size:clamp(32px,6.5vw,54px); margin:0 0 14px}
h1 .g{background:linear-gradient(105deg,var(--lime) 0%,var(--cyan) 45%,var(--violet) 95%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.updated{font:600 12.5px/1 var(--mono); color:var(--faint); margin-bottom:36px}
.lede{font-size:clamp(17px,2.6vw,20px); color:var(--muted); margin:0 0 30px; max-width:60ch}
h2{font-family:var(--display); font-weight:700; font-size:clamp(21px,3.4vw,27px); letter-spacing:-.02em; margin:44px 0 12px; scroll-margin-top:20px}
h3{font-weight:700; font-size:17px; margin:26px 0 8px; color:var(--ink)}
p{margin:0 0 16px; color:#d7d8e0}
a{color:var(--lime2); text-decoration:none; border-bottom:1px solid rgba(166,230,10,.3)}
a:hover{border-bottom-color:var(--lime2)}
ul,ol{margin:0 0 18px; padding-left:22px; color:#d7d8e0}
li{margin:0 0 9px}
strong{color:var(--ink)}
hr{border:0; border-top:1px solid var(--line); margin:40px 0}
.card{background:linear-gradient(180deg,var(--glass2),var(--glass)); border:1px solid var(--line); border-radius:var(--r); padding:clamp(18px,3vw,26px); margin:0 0 22px}
.card p:last-child{margin-bottom:0}
.pill{display:inline-flex; align-items:center; gap:7px; font:600 12px/1 var(--mono); letter-spacing:.06em; color:var(--muted); border:1px solid var(--line); background:var(--glass); padding:8px 12px; border-radius:999px}
.dot{width:6px; height:6px; border-radius:50%; background:var(--lime)}
.grid{display:grid; gap:14px; grid-template-columns:1fr 1fr; margin:0 0 22px}
@media (max-width:560px){.grid{grid-template-columns:1fr}}
/* numbered 1-2-3 step cards (on-brand, matches the logo + homepage) */
.steps{display:grid; gap:14px; grid-template-columns:repeat(3,1fr); margin:0 0 22px}
@media (max-width:720px){.steps{grid-template-columns:1fr}}
.step{display:flex; gap:14px; align-items:flex-start; margin:0}
.step .stepn{width:30px; height:30px; flex:none; border-radius:9px; display:grid; place-items:center; font:800 15px/1 var(--display); color:#08080c; box-shadow:0 2px 6px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.5)}
.step .s1{background:linear-gradient(145deg,#d8ff66,#a6e60a)}
.step .s2{background:linear-gradient(145deg,#74f1e2,#2ec9b8)}
.step .s3{background:linear-gradient(145deg,#a98bff,#7c5cff); color:#fff}
.step h3{margin:1px 0 5px}
.step p{margin:0; font-size:14px}
.tldr{border-left:2px solid var(--lime); padding:4px 0 4px 18px; margin:0 0 30px; color:var(--muted)}
.tldr b{color:var(--ink)}

/* faq (AEO) */
.faq details{border:1px solid var(--line); border-radius:14px; background:var(--glass); margin-bottom:10px; overflow:hidden}
.faq summary{cursor:pointer; list-style:none; padding:16px 18px; font-weight:600; color:var(--ink); display:flex; justify-content:space-between; gap:12px; align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; color:var(--lime2); font-size:20px; flex:none}
.faq details[open] summary::after{content:"–"}
.faq details > p{padding:0 18px 16px; margin:0; color:var(--muted)}

/* SEO/guide pages: breadcrumbs, answer callout, comparison table, inline CTA */
.crumbs{display:flex; flex-wrap:wrap; gap:7px; align-items:center; font:600 12px/1 var(--mono); letter-spacing:.02em; color:var(--faint); margin:0 0 18px}
.crumbs a{color:var(--muted); text-decoration:none; border-bottom:0}
.crumbs a:hover{color:var(--ink)}
.answer{border:1px solid rgba(201,242,78,.28); background:linear-gradient(180deg,rgba(201,242,78,.07),transparent); border-radius:var(--r); padding:clamp(16px,3vw,22px); margin:0 0 26px; font-size:clamp(16px,2.3vw,18px); line-height:1.6; color:#d7d8e0}
.answer b{color:var(--ink)}
.cmp-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:14px; margin:0 0 24px}
.cmp{width:100%; border-collapse:collapse; font-size:14px; min-width:480px}
.cmp th,.cmp td{text-align:left; padding:12px 15px; border-bottom:1px solid var(--line2); vertical-align:top}
.cmp thead th{font:700 10.5px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--faint)}
.cmp tbody td:first-child{color:var(--ink); font-weight:600}
.cmp tr:last-child td{border-bottom:0}
.cmp .yes{color:var(--lime2)} .cmp .no{color:#ff6b6b}
.cta-block{display:flex; gap:16px; flex-wrap:wrap; align-items:center; margin:28px 0; padding:20px 22px; border:1px solid var(--line); border-radius:var(--r); background:linear-gradient(180deg,var(--glass2),var(--glass))}
.cta-block p{margin:0; flex:1; min-width:210px; color:var(--muted); font-size:14.5px}
.cta-block p b{color:var(--ink)}
.btn-go{flex:none; color:#08080c; background:linear-gradient(100deg,var(--lime),#e6ff7a); border:0; border-radius:12px; padding:13px 20px; font:700 14px var(--sans); text-decoration:none; border-bottom:0; white-space:nowrap}
.btn-go:hover{filter:brightness(1.05)}
.related{display:flex; flex-wrap:wrap; gap:10px; margin:8px 0 0}
.related a{font:600 13px/1 var(--sans); color:var(--muted); text-decoration:none; border:1px solid var(--line); border-radius:999px; padding:9px 14px}
.related a:hover{color:var(--ink); border-color:var(--muted)}

/* full site footer */
.site-footer{margin-top:clamp(48px,8vw,80px); padding-top:38px; border-top:1px solid var(--line); color:var(--muted)}
.foot-top{display:flex; gap:40px; flex-wrap:wrap; justify-content:space-between; margin-bottom:30px}
.foot-brand{max-width:300px}
.foot-brand .mark{margin-bottom:14px}
.foot-brand p{font-size:13.5px; color:var(--faint); line-height:1.6; margin:0}
.foot-cols{display:flex; gap:clamp(30px,6vw,66px); flex-wrap:wrap}
.foot-col{display:flex; flex-direction:column; gap:11px}
.foot-col h4{font:700 11px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--faint); margin:0 0 3px}
.foot-col a{font-size:14px; color:var(--muted); text-decoration:none; border-bottom:0; transition:color .2s}
.foot-col a:hover{color:var(--ink)}
.foot-bot{display:flex; gap:12px 20px; flex-wrap:wrap; align-items:center; justify-content:space-between; padding:18px 0 10px; border-top:1px solid var(--line2); font-size:12.5px; color:var(--faint)}
.foot-badge{display:inline-flex; align-items:center; gap:7px; font:600 11px/1 var(--mono); letter-spacing:.04em}
@media (max-width:560px){.foot-brand{max-width:none}}
::selection{background:rgba(201,242,78,.28)}