/* SpiritLabs Post — shared styles
   Theme tokens mirror spiritlabs.ai exactly (HSL triplets, shadcn convention). */

:root{
  /* brand */
  --sl-indigo: 235 70% 51%;
  --sl-azure: 203 61% 61%;
  --sl-purple: 251 71% 69%;
  --sl-silver: 222 24% 82%;
  --sl-graphite: 222 35% 9%;
  --sl-offwhite: 40 13% 93%;
  --sl-success: 143 72% 38%;

  /* semantic */
  --background: 40 13% 93%;
  --foreground: 222 35% 9%;
  --card: 0 0% 100%;
  --primary: 235 70% 51%;
  --primary-foreground: 40 13% 93%;
  --accent: 251 71% 69%;
  --muted: 222 24% 90%;
  --muted-foreground: 222 20% 45%;
  --border: 222 24% 88%;
  --ring: 235 70% 51%;

  --radius: 1rem;
  --gradient-primary: linear-gradient(135deg, hsl(235 70% 51%) 0%, hsl(203 61% 61%) 100%);
  --gradient-accent: linear-gradient(135deg, hsl(235 70% 51%) 0%, hsl(251 71% 69%) 100%);
  --shadow-sm: 0 1px 2px 0 hsl(222 35% 9% / .05);
  --shadow-md: 0 4px 6px -1px hsl(222 35% 9% / .08), 0 2px 4px -2px hsl(222 35% 9% / .05);
  --shadow-lg: 0 10px 15px -3px hsl(222 35% 9% / .08), 0 4px 6px -4px hsl(222 35% 9% / .05);
  --shadow-xl: 0 20px 25px -5px hsl(222 35% 9% / .08), 0 8px 10px -6px hsl(222 35% 9% / .05);
  --transition-smooth: all .3s cubic-bezier(.4, 0, .2, 1);

  --display: "Space Grotesk", system-ui, sans-serif;
  --body: "Poppins", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
}

*{ box-sizing: border-box; }

html{ -webkit-text-size-adjust: 100%; }

body{
  margin:0;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: var(--body);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing: antialiased;
}

img{ max-width:100%; height:auto; }
a{ color: hsl(var(--primary)); }
a:focus-visible, button:focus-visible, summary:focus-visible{
  outline:2px solid hsl(var(--ring));
  outline-offset:3px;
  border-radius:6px;
}

.wrap{ max-width:1120px; margin:0 auto; padding:0 24px; }
.wrap-narrow{ max-width:780px; margin:0 auto; padding:0 24px 96px; }

/* ---------- header ---------- */
.site-head{
  border-bottom:1px solid hsl(var(--border));
  background: hsl(var(--background) / .92);
  backdrop-filter: blur(8px);
  position: sticky; top:0; z-index:20;
}
.head-in{
  max-width:1120px; margin:0 auto; padding:14px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.brand{
  display:flex; align-items:center; gap:11px;
  text-decoration:none; color:hsl(var(--foreground));
  font-family:var(--display); font-weight:600; font-size:18px; letter-spacing:-.01em;
  white-space:nowrap;
}
.brand img{ height:30px; width:auto; display:block; flex:none; }
.brand .wordmark{ white-space:nowrap; }
.brand .sub{ color:hsl(var(--muted-foreground)); font-weight:500; }
.nav-links{ display:none; gap:30px; font-size:15px; font-weight:500; }
.nav-links a{ color:hsl(var(--muted-foreground)); text-decoration:none; transition:var(--transition-smooth); }
.nav-links a:hover{ color:hsl(var(--foreground)); }
@media(min-width:900px){ .nav-links{ display:flex; } }
.head-back{ font-size:15px; font-weight:500; color:hsl(var(--muted-foreground)); text-decoration:none; }
.head-back:hover{ color:hsl(var(--foreground)); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--body); font-weight:600; font-size:15px;
  padding:11px 22px; border-radius:calc(var(--radius) * .75);
  text-decoration:none; border:1px solid transparent; cursor:pointer;
  white-space:nowrap; transition:var(--transition-smooth);
}
.btn-primary{ background:var(--gradient-accent); color:hsl(var(--primary-foreground)); box-shadow:var(--shadow-sm); }
.btn-primary:hover{ box-shadow:var(--shadow-md); transform:translateY(-1px); }
.btn-ghost{ background:hsl(var(--card)); color:hsl(var(--foreground)); border-color:hsl(var(--border)); }
.btn-ghost:hover{ border-color:hsl(var(--sl-silver)); box-shadow:var(--shadow-sm); }
.btn-lg{ font-size:16px; padding:15px 30px; }
.btn-block{ width:100%; }

/* ---------- hero ---------- */
.hero{ padding:84px 0 68px; }
.kicker{
  font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  color:hsl(var(--primary)); margin:0 0 20px; font-weight:500;
}
h1{
  font-family:var(--display); font-weight:600;
  font-size:clamp(38px,6vw,62px); line-height:1.06; letter-spacing:-.025em;
  margin:0 0 20px; max-width:17ch; text-wrap:balance;
}
h1 .grad{
  background:var(--gradient-accent); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.lede{ font-size:19px; line-height:1.6; color:hsl(var(--muted-foreground)); margin:0 0 32px; max-width:58ch; }
.cta-row{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:20px; }
.cta-note{ font-size:14px; color:hsl(var(--muted-foreground)); margin:0; }

/* ---------- app mock ---------- */
.mock{
  margin-top:56px; border:1px solid hsl(var(--border)); border-radius:var(--radius);
  overflow:hidden; background:hsl(var(--card)); box-shadow:var(--shadow-xl);
}
.mock-bar{
  display:flex; align-items:center; gap:8px; padding:13px 18px;
  border-bottom:1px solid hsl(var(--border)); background:hsl(var(--muted) / .5);
}
.mock-bar i{ width:10px; height:10px; border-radius:50%; background:hsl(var(--sl-silver)); display:block; }
.mock-bar .path{ margin-left:10px; font-family:var(--mono); font-size:12px; color:hsl(var(--muted-foreground)); }
.mock-body{ display:grid; grid-template-columns:1fr; }
@media(min-width:780px){ .mock-body{ grid-template-columns:1.15fr 1fr; } }
.mock-col{ padding:24px 26px; }
.mock-col + .mock-col{ border-top:1px solid hsl(var(--border)); }
@media(min-width:780px){ .mock-col + .mock-col{ border-top:0; border-left:1px solid hsl(var(--border)); } }
.mock-h{
  font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:hsl(var(--muted-foreground)); margin:0 0 16px;
}
.q-item{ display:flex; gap:14px; padding:13px 0; border-bottom:1px solid hsl(var(--border)); }
.q-item:last-child{ border-bottom:0; }
.q-time{
  font-family:var(--mono); font-size:11.5px; color:hsl(var(--muted-foreground));
  white-space:nowrap; padding-top:3px; font-variant-numeric:tabular-nums;
}
.q-title{ font-size:14px; margin:0 0 4px; line-height:1.45; }
.q-state{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; }
.q-state.sched{ color:hsl(var(--primary)); }
.q-state.live{ color:hsl(var(--muted-foreground)); }
.cmt{ padding:14px 0; border-bottom:1px solid hsl(var(--border)); }
.cmt:last-child{ border-bottom:0; }
.cmt-who{ font-size:13.5px; font-weight:600; margin:0; }
.cmt-role{ font-size:12px; color:hsl(var(--muted-foreground)); margin:0 0 6px; }
.cmt-txt{ font-size:13.5px; color:hsl(var(--muted-foreground)); margin:0 0 8px; line-height:1.5; }
.cmt-act{ font-family:var(--mono); font-size:11px; color:hsl(var(--primary)); letter-spacing:.04em; }
.stats{ display:flex; gap:30px; flex-wrap:wrap; }
.stat b{ display:block; font-family:var(--display); font-size:26px; font-weight:600; letter-spacing:-.02em; line-height:1.1; }
.stat span{ font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:hsl(var(--muted-foreground)); }

/* ---------- sections ---------- */
section{ padding:80px 0; border-top:1px solid hsl(var(--border)); }
h2{
  font-family:var(--display); font-weight:600; font-size:clamp(28px,3.8vw,38px);
  letter-spacing:-.02em; line-height:1.15; margin:0 0 14px; max-width:22ch; text-wrap:balance;
}
.sub{ font-size:17px; color:hsl(var(--muted-foreground)); margin:0 0 46px; max-width:60ch; }
h3{ font-family:var(--display); font-weight:600; font-size:20px; letter-spacing:-.012em; margin:0 0 10px; }

.grid3{ display:grid; gap:22px; }
@media(min-width:840px){ .grid3{ grid-template-columns:repeat(3,1fr); } }
.card{
  background:hsl(var(--card)); border:1px solid hsl(var(--border));
  border-radius:var(--radius); padding:30px 28px; box-shadow:var(--shadow-sm);
  transition:var(--transition-smooth);
}
.card:hover{ box-shadow:var(--shadow-lg); }
.card p{ font-size:15px; color:hsl(var(--muted-foreground)); margin:0; }
.icon{
  width:44px; height:44px; border-radius:calc(var(--radius) * .7);
  background:var(--gradient-accent); display:flex; align-items:center; justify-content:center;
  margin-bottom:18px; box-shadow:var(--shadow-sm);
}
.icon svg{ width:21px; height:21px; stroke:hsl(var(--primary-foreground)); fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

ol.flow{ list-style:none; margin:0; padding:0; display:grid; gap:22px; counter-reset:s; }
@media(min-width:900px){ ol.flow{ grid-template-columns:repeat(4,1fr); } }
ol.flow li{
  counter-increment:s; background:hsl(var(--card)); border:1px solid hsl(var(--border));
  border-radius:var(--radius); padding:26px 24px; box-shadow:var(--shadow-sm);
}
ol.flow li::before{
  content:"0" counter(s); font-family:var(--mono); font-size:12px; font-weight:500;
  color:hsl(var(--primary)); display:block; margin-bottom:14px; letter-spacing:.06em;
}
ol.flow h3{ font-size:18px; margin-bottom:8px; }
ol.flow p{ font-size:14.5px; color:hsl(var(--muted-foreground)); margin:0; }

.trust{
  background:hsl(var(--card)); border:1px solid hsl(var(--border));
  border-radius:var(--radius); padding:38px 36px; box-shadow:var(--shadow-md);
}
.trust ul{ list-style:none; margin:0; padding:0; display:grid; gap:22px; }
@media(min-width:800px){ .trust ul{ grid-template-columns:repeat(2,1fr); gap:26px 40px; } }
.trust li{ display:flex; gap:14px; align-items:flex-start; font-size:14.5px; color:hsl(var(--muted-foreground)); line-height:1.55; }
.trust li strong{ color:hsl(var(--foreground)); font-weight:600; display:block; margin-bottom:3px; }
.tick{ flex:none; width:22px; height:22px; margin-top:1px; }
.tick svg{ width:22px; height:22px; stroke:hsl(var(--sl-success)); fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }

.faq{ display:grid; border-top:1px solid hsl(var(--border)); }
.faq > div{ padding:26px 0; border-bottom:1px solid hsl(var(--border)); }
.faq h3{ margin-bottom:9px; font-size:19px; }
.faq p{ font-size:15px; color:hsl(var(--muted-foreground)); margin:0; max-width:72ch; }

.final{ padding:90px 0; text-align:center; border-top:1px solid hsl(var(--border)); }
.final h2{ margin:0 auto 16px; max-width:20ch; }
.final .sub{ margin:0 auto 32px; }

/* ---------- legal docs ---------- */
.doc-head{ padding:60px 0 30px; border-bottom:1px solid hsl(var(--border)); margin-bottom:14px; }
.doc-head h1{ font-size:clamp(32px,5vw,46px); max-width:none; margin-bottom:12px; }
.doc-meta{ font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:hsl(var(--muted-foreground)); margin:0; }
.doc-intro{ font-size:17.5px; color:hsl(var(--muted-foreground)); margin:24px 0 0; line-height:1.6; }
.doc h2{ font-size:24px; margin:48px 0 12px; max-width:none; }
.doc h3{ font-family:var(--body); font-weight:600; font-size:16.5px; margin:28px 0 8px; }
.doc p{ margin:0 0 15px; color:hsl(var(--muted-foreground)); }
.doc p strong, .doc li strong{ color:hsl(var(--foreground)); font-weight:600; }
.doc ul{ margin:0 0 15px; padding-left:24px; color:hsl(var(--muted-foreground)); }
.doc li{ margin-bottom:9px; }
.key{
  border-left:4px solid hsl(var(--primary)); background:hsl(var(--card));
  padding:20px 24px; border-radius:0 var(--radius) var(--radius) 0; margin:0 0 24px;
  box-shadow:var(--shadow-sm);
}
.key p{ margin:0; color:hsl(var(--foreground)); }
.tbl{ overflow-x:auto; border:1px solid hsl(var(--border)); border-radius:var(--radius); background:hsl(var(--card)); margin:0 0 22px; box-shadow:var(--shadow-sm); }
.tbl table{ border-collapse:collapse; width:100%; min-width:540px; font-size:14.5px; margin:0; }
.tbl th{
  font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:hsl(var(--muted-foreground)); text-align:left; font-weight:500;
  padding:14px 18px; border-bottom:1px solid hsl(var(--border));
}
.tbl td{ padding:14px 18px; border-bottom:1px solid hsl(var(--border)); vertical-align:top; color:hsl(var(--muted-foreground)); line-height:1.55; }
.tbl td:first-child{ color:hsl(var(--foreground)); font-weight:500; }
.tbl tr:last-child td{ border-bottom:0; }

/* ---------- modal ---------- */
dialog.modal{
  border:none; padding:0; background:transparent; max-width:520px; width:calc(100% - 32px);
  color:hsl(var(--foreground)); max-height:90vh; overflow:auto;
}
dialog.modal::backdrop{ background:hsl(var(--sl-graphite) / .55); backdrop-filter:blur(4px); }
.modal-card{
  background:hsl(var(--card)); border-radius:var(--radius); box-shadow:var(--shadow-xl);
  padding:34px 34px 30px; text-align:left; border:1px solid hsl(var(--border));
}
.modal-card h2{ font-size:26px; margin:0 0 8px; max-width:none; }
.modal-card .sub{ font-size:15px; margin:0 0 24px; }
.modal-close{
  position:absolute; top:16px; right:16px; width:34px; height:34px; border-radius:50%;
  border:1px solid hsl(var(--border)); background:hsl(var(--card)); cursor:pointer;
  display:flex; align-items:center; justify-content:center; color:hsl(var(--muted-foreground));
  font-size:19px; line-height:1; transition:var(--transition-smooth);
}
.modal-close:hover{ color:hsl(var(--foreground)); border-color:hsl(var(--sl-silver)); }
.modal-wrap{ position:relative; }
.field{ margin-bottom:16px; }
.field label{ display:block; font-size:13.5px; font-weight:600; margin-bottom:6px; }
.field input, .field textarea{
  width:100%; font-family:var(--body); font-size:15px; color:hsl(var(--foreground));
  padding:11px 14px; border:1px solid hsl(var(--border)); border-radius:calc(var(--radius) * .6);
  background:hsl(var(--background) / .5); transition:var(--transition-smooth);
}
.field input:focus, .field textarea:focus{
  outline:none; border-color:hsl(var(--primary)); background:hsl(var(--card));
  box-shadow:0 0 0 3px hsl(var(--primary) / .12);
}
.field textarea{ resize:vertical; min-height:84px; }
.field .hint{ font-size:12.5px; color:hsl(var(--muted-foreground)); margin:6px 0 0; }
.modal-foot{ font-size:12.5px; color:hsl(var(--muted-foreground)); margin:14px 0 0; text-align:center; }
.modal-done{ text-align:center; padding:14px 0 6px; }
.modal-done .mark{
  width:56px; height:56px; border-radius:50%; background:hsl(var(--sl-success) / .12);
  display:flex; align-items:center; justify-content:center; margin:0 auto 18px;
}
.modal-done .mark svg{ width:26px; height:26px; stroke:hsl(var(--sl-success)); fill:none; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.modal-done h2{ margin-bottom:10px; }
.modal-done p{ color:hsl(var(--muted-foreground)); font-size:15px; margin:0 0 22px; }

/* ---------- footer ---------- */
.site-foot{ border-top:1px solid hsl(var(--border)); padding:48px 0 60px; font-size:14.5px; color:hsl(var(--muted-foreground)); }
.foot-in{ display:flex; flex-wrap:wrap; gap:26px; justify-content:space-between; align-items:flex-start; }
.foot-in a{ color:hsl(var(--muted-foreground)); text-decoration:none; }
.foot-in a:hover{ color:hsl(var(--foreground)); }
.foot-links{ display:flex; flex-wrap:wrap; gap:22px; }
.foot-note{ margin:12px 0 0; font-size:14px; }
.mock-h-spaced{ margin-top:28px; }
.fine{ font-size:12.5px; color:hsl(var(--muted-foreground)); margin:30px 0 0; max-width:76ch; line-height:1.65; }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
  .btn-primary:hover{ transform:none; }
}