/* Solicity site skin - the homepage's design (design/homepage/design-brief.md)
   applied to every other page. Loaded AFTER each page's own <style>, so it only
   restyles the shared pieces (brand, card, fields, buttons) and never touches a
   page's layout, ids or script. Night navy, one accent (cyan, flat, no glow),
   Outfit + IBM Plex Mono, one corner language (4px controls, 10px surfaces). */
:root{
  --bg:#06101f; --ground:#06101f; --panel-a:#0c1a30; --panel-b:#0a1728;
  --line:rgba(234,246,255,.12); --cyan:#2be0f2; --cyan-2:#2be0f2; --warm:#ffd98a;
  --ink:#eaf6ff; --muted:#9fb6cf; --dim:#7089a4;
  --sans:"Outfit",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
html,body{background:var(--ground)}
body{font-family:var(--sans);color:var(--ink);-webkit-font-smoothing:antialiased}
/* the old cyan glow blobs give way to the homepage's dawn skyline, faint, at the foot */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,var(--ground) 0%,rgba(6,16,31,.86) 55%,rgba(6,16,31,.6) 100%),
             url(/static/home/dawn-1100.webp) center bottom/cover no-repeat}
h1,h2,h3{font-family:var(--sans);letter-spacing:-.02em;font-weight:700}
h1{font-size:24px}
a{color:var(--cyan)}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}

/* brand lockup: mark + wordmark, the tagline set in mono like the homepage's file tabs */
.brand{gap:11px}
.brand .logo{background:none;border:0;border-radius:10px}
.brand b{font-family:var(--sans);font-weight:700;letter-spacing:-.01em;font-size:19px}
.brand span{font-family:var(--mono);font-size:11.5px;color:var(--dim)}

/* surfaces: one flat panel, a hairline, no inner glow */
.card{background:rgba(12,26,48,.92);border:1px solid var(--line);border-radius:10px;
  box-shadow:0 30px 70px rgba(0,0,0,.45);backdrop-filter:none}
.sub{color:var(--muted)}

/* fields: label above, mono caption feel, square-ish inputs. Only real field
   labels (label[for]) - a label wrapping a checkbox and its description stays prose. */
label[for]{font-family:var(--mono);font-weight:500;font-size:11.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--dim)}
label:not([for]){font-family:var(--sans)}
.keeprow,.keeprow label{font-family:var(--sans);text-transform:none;letter-spacing:0;font-size:14px;color:var(--muted)}
input,select,textarea{font-family:var(--sans);border-radius:4px;background:rgba(6,16,31,.75);
  border:1px solid rgba(159,182,207,.28);color:var(--ink)}
input:focus,input:focus-visible,select:focus,textarea:focus{border-color:var(--cyan);
  box-shadow:0 0 0 3px rgba(43,224,242,.16)}
input[type=checkbox],input[type=radio]{accent-color:var(--cyan)}
.peek{font-family:var(--mono);font-size:12px;font-weight:500}

/* the main action: flat cyan block, no pulse, no glow; presses down a pixel */
.btn{font-family:var(--sans);font-weight:600;border-radius:4px;background:var(--cyan);color:#04121c;
  box-shadow:none;animation:none;transition:background .2s,transform .12s}
.btn:hover:not(:disabled){background:#5ae9f6;transform:none;box-shadow:none}
.btn:active:not(:disabled){transform:translateY(1px)}
.btn:disabled{background:rgba(112,137,164,.22);color:var(--dim)}
/* the secondary route (e.g. "Create an account"): an outline that turns cyan */
.alt{font-family:var(--sans);border-radius:4px;border:1px solid rgba(234,246,255,.55);font-weight:600}
.alt:hover{border-color:var(--cyan);color:var(--cyan);background:transparent}
.split{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.split::before,.split::after{background:var(--line)}
.err{border-radius:6px}
.mini,.fine,.note,.updated{color:var(--dim)}

/* pricing page plans: same weights as the homepage's two plans */
/* each item is one line of prose: the old flex row split a bold phrase into its own column */
.plan li{display:block;position:relative;padding-left:24px}
.plan li .ic{position:absolute;left:0;top:0}
.plan{border-radius:10px;border:1px solid var(--line);background:rgba(12,26,48,.6);box-shadow:none}
.plan.paid{background:#0c1a30;border-top:4px solid var(--cyan);border-radius:4px 4px 10px 10px}
.price{font-family:var(--mono);font-weight:500;letter-spacing:-.01em}
.tagline{font-family:var(--mono);letter-spacing:.12em}
.plan .cta{border-radius:4px;box-shadow:none;animation:none;font-family:var(--sans);transform:none}
.plan .cta.primary{background:var(--cyan);color:#04121c;box-shadow:none}
.plan .cta.primary:hover{background:#5ae9f6;box-shadow:none;transform:none}
.cta.ghost{background:transparent;border:1px solid rgba(234,246,255,.55);color:var(--ink)}
.cta.ghost:hover{border-color:var(--cyan);color:var(--cyan)}

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