/* Socify theme — "1a Ledger" direction from the Socify app design
   (Public Sans, indigo oklch(52% .19 265) = #315DD4, light cards).
   Overrides the KrazzyCreations tokens in styles.css.
   Copied to socify/assets/css/theme.css by tools/build_pages.py. */
:root {
  --accent: #315DD4;
  --accent-soft: #EEF2FC;
  --danger: #D33D2C;
  --success: #00792F;

  --bg: #F4F5F9;
  --bg-rgb: 244,245,249;
  --ink: #14171F;
  --ink-2: #14171F;
  --sub: #4B5162;
  --muted: #6B7080;
  --card: #FFFFFF;
  --line: #E3E5EC;
  --line-2: #E3E5EC;
  --line-3: #D5D8E0;
  --shadow-rgb: 20,23,31;

  /* "Dark" bands use the indigo of the app's sign-in screen */
  --dark: #315DD4;
  --dark-ink: #FFFFFF;
  --dark-head: #FFFFFF;
  --dark-sub: rgba(255,255,255,.8);

  --c-bg: #315DD4;
  --c-ink: #FFFFFF;
  --c-head: #FFFFFF;
  --c-sub: rgba(255,255,255,.8);

  --footer-bg: #14171F;
  --footer-sub: #9AA3B2;
  --footer-dim: #6B7080;
  --footer-link: #E3E5EC;

  --f-display: 'Public Sans', system-ui, sans-serif;
  --f-body: 'Public Sans', system-ui, sans-serif;
  --f-mono: ui-monospace, 'SFMono-Regular', Menlo, monospace;
}

.noise { display: none; }
body { line-height: 1.35; }

/* Type: Public Sans, tighter tracking, labels like the app's 11px/700/.1em caps */
.hero__title, .page-hero__title, .h2, .contact__title { letter-spacing: -.02em; }
.page-hero__title { font-weight: 800; }
.h2 { font-weight: 700; }
.eyebrow { font-family: var(--f-body); font-size: .75rem; font-weight: 700; letter-spacing: .1em; }
.card__num, .founder__role, .contact-card__label, .toc__title, .footer__heading, .prose th {
  font-family: var(--f-body); font-weight: 700; letter-spacing: .1em;
}
.brand__word { font-family: var(--f-body); font-weight: 800; letter-spacing: .02em; font-size: 1.15rem; }
.footer .brand__word { font-size: 1.1rem; }

/* Logo mark: the app's rounded indigo square */
.nav .brand .spark, .footer .brand .spark { width: 14px; height: 14px; }
.footer .spark { fill: #FFFFFF; }

/* Buttons & cards: the app's 12–16px radii instead of pills */
.btn { border-radius: 14px; }
.btn--nav { border-radius: 10px; }
.btn--ghost { border: 1px solid var(--line); background: #fff; }
.card { border-radius: 16px; }
.founder, .product { border-radius: 18px; }
.prose .note { border-radius: 14px; background: #fff; }
.toc { border-left-color: var(--line); }

/* Indigo bands */
.approach .eyebrow, .contact .eyebrow { color: rgba(255,255,255,.75); }
.approach__glow { background: radial-gradient(circle, rgba(255,255,255,.18), transparent 66%); }
.pillar { border-top-color: rgba(255,255,255,.35); }
.contact__spark { fill: #fff; }
.approach .btn--primary, .contact .btn--primary { background: #fff; color: var(--accent); }
.contact-card__label { color: rgba(255,255,255,.75); }
.hero__glow { opacity: .35; }

/* ---------- Socify landing components ---------- */
.s-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px,5vw,64px); align-items: center; }
@media (max-width: 900px) { .s-hero { grid-template-columns: 1fr; } }

/* Phone mockup of the admin dashboard (from the design's Dashboard screen) */
.phone {
  justify-self: center; width: min(340px, 100%);
  background: #14171F; border-radius: 44px; padding: 10px;
  box-shadow: 0 40px 80px -40px rgba(20,23,31,.55), 0 0 0 1px rgba(20,23,31,.08);
  animation: rise .9s var(--ease) .3s both;
}
.phone__screen { background: #F4F5F9; border-radius: 36px; overflow: hidden; font-size: 12px; color: #14171F; }
.phone__top { padding: 26px 18px 14px; }
.phone__bar { display: flex; justify-content: space-between; align-items: center; }
.phone__society { display: flex; align-items: center; gap: 7px; font-weight: 700; font-size: 12px; letter-spacing: .02em; }
.phone__society i { width: 9px; height: 9px; background: var(--accent); border-radius: 2px; display: block; }
.phone__role { font-size: 9px; font-weight: 700; letter-spacing: .1em; padding: 3px 7px; border: 1px solid #E3E5EC; border-radius: 4px; }
.phone__label { margin-top: 16px; font-size: 11px; color: #6B7080; font-weight: 500; }
.phone__amount { display: flex; align-items: flex-end; justify-content: space-between; }
.phone__amount b { font-size: 34px; font-weight: 800; letter-spacing: -.02em; line-height: 1; margin-top: 3px; }
.phone__amount span { font-size: 20px; font-weight: 700; color: var(--accent); }
.phone__bars { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; margin-top: 12px; }
.phone__bars i { height: 22px; border-radius: 3px; background: var(--accent); display: block; }
.phone__bars i.u { background: #E3E5EC; }
.phone__meta { display: flex; justify-content: space-between; font-size: 10px; margin-top: 6px; color: #6B7080; }
.phone__body { padding: 12px 18px 0; display: flex; flex-direction: column; gap: 9px; }
.phone__actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.phone__actions div { background: #fff; border: 1px solid #E3E5EC; border-radius: 10px; padding: 9px 2px 8px; text-align: center; font-size: 8.5px; font-weight: 700; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.phone__actions div i { width: 24px; height: 24px; border-radius: 7px; background: #F4F5F9; display: grid; place-items: center; font-style: normal; font-size: 13px; }
.phone__actions div.go { background: var(--accent); color: #fff; }
.phone__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.phone__stats div { background: #fff; border: 1px solid #E3E5EC; border-radius: 12px; padding: 10px; }
.phone__stats small { display: block; font-size: 8.5px; font-weight: 700; letter-spacing: .08em; color: #6B7080; }
.phone__stats b { display: block; font-size: 17px; font-weight: 700; margin-top: 4px; }
.phone__list { background: #fff; border: 1px solid #E3E5EC; border-radius: 12px; padding: 2px 12px; }
.phone__list div { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid #F4F5F9; }
.phone__list div:last-child { border-bottom: 0; }
.phone__list b { font-size: 15px; font-weight: 800; width: 20px; }
.phone__list p { margin: 0; flex: 1; font-weight: 600; line-height: 1.3; }
.phone__list p small { display: block; font-weight: 400; font-size: 10px; color: #6B7080; }
.phone__tabs { margin-top: 12px; background: #fff; border-top: 1px solid #E3E5EC; display: grid; grid-template-columns: repeat(5, 1fr); padding: 8px 6px 16px; font-size: 8.5px; font-weight: 600; text-align: center; color: #9AA3B2; }
.phone__tabs div { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.phone__tabs div i { width: 16px; height: 16px; border-radius: 5px; border: 2px solid currentColor; display: block; }
.phone__tabs div.on { color: var(--accent); }
.phone__tabs div.on i { background: var(--accent-soft); }

/* Steps / roles / FAQ */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin-top: clamp(36px,5vh,56px); counter-reset: step; }
.step { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 26px 24px; }
.step::before { counter-increment: step; content: counter(step); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--accent); color: #fff; font-weight: 800; }
.step h3 { font-size: 1.2rem; font-weight: 700; margin: 18px 0 8px; letter-spacing: -.01em; }
.step p { margin: 0; color: var(--muted); line-height: 1.55; font-size: .98rem; }

.wizard { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 28px; }
.wizard div { border-top: 4px solid rgba(255,255,255,.9); padding-top: 12px; }
.wizard b { display: block; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.wizard span { display: block; font-weight: 700; margin-top: 4px; }
.wizard p { margin: 6px 0 0; font-size: .92rem; line-height: 1.5; color: rgba(255,255,255,.8); }

.roles { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; margin-top: clamp(36px,5vh,56px); }
.role { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: clamp(24px,3vw,32px); }
.role__tag { display: inline-block; font-size: .68rem; font-weight: 700; letter-spacing: .1em; padding: 5px 9px; border-radius: 5px; background: var(--accent); color: #fff; }
.role__tag--muted { background: var(--bg); color: var(--muted); }
.role h3 { font-size: 1.35rem; font-weight: 700; margin: 14px 0 12px; letter-spacing: -.01em; }
.role ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.role li { display: flex; gap: 10px; line-height: 1.5; color: var(--sub); }
.role li::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: .5em; border-radius: 2px; background: var(--accent); }

.faq { max-width: 820px; margin-top: clamp(28px,4vh,44px); display: flex; flex-direction: column; gap: 10px; }
.faq details { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 0 20px; }
.faq summary { cursor: pointer; list-style: none; padding: 18px 0; font-weight: 700; font-size: 1.02rem; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--accent); font-size: 1.3rem; line-height: 1; }
.faq details[open] summary::after { content: "−"; }
.faq details p { margin: 0 0 18px; color: var(--sub); line-height: 1.6; }