/* SubSync — shared theming + components */

:root{
  --ss-blue:#5096FE;
  --ss-blue-dark:#3478e8;
  --ss-blue-deep:#1f5fc4;
  --ss-blue-50:#eef4ff;
  --ss-blue-100:#d7e6ff;
  --ss-blue-200:#b3d2ff;
  --ss-blue-700:#5096FE;
  --ss-navy:#091747;
  --ss-ink:#1A1A1A;
  --ss-body:#525252;
  --ss-grey-100:#f9f9f9;
  --ss-grey-300:#dddddd;
  --ss-amber:#fab515;
  --ss-green:#69c765;
  --ss-red:#ee2200;
}

html, body { overflow-x: hidden; }
html { scroll-behavior: smooth; }
body {
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  color: var(--ss-ink);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Type scale */
.h-display { font-size: clamp(40px,6.4vw,72px); font-weight:800; line-height:1.04; letter-spacing:-0.022em }
.h1 { font-size: clamp(30px,4vw,40px); font-weight:700; line-height:1.15; letter-spacing:-0.015em }
.h2 { font-size: clamp(24px,2.6vw,30px); font-weight:700; line-height:1.22; letter-spacing:-0.01em }
.h3 { font-size: 20px; font-weight:600; line-height:1.35 }
.lede { font-size: 18px; line-height: 1.55; color: var(--ss-body) }
@media(min-width:768px){ .lede{ font-size: 20px; line-height: 1.6 } }

.eyebrow {
  font-family:"JetBrains Mono",monospace; font-size:12px; letter-spacing:0.12em;
  text-transform:uppercase; color: var(--ss-blue); font-weight:500;
}
.meta-mono {
  font-family:"JetBrains Mono",monospace; font-size:12px; letter-spacing:0.04em;
  text-transform:uppercase; color: var(--ss-blue);
}

/* Focus */
:focus-visible { outline: 2px solid var(--ss-blue); outline-offset: 3px; border-radius: 6px }

/* Skip link */
.skip {
  position:absolute; left:-9999px; top:0; background: var(--ss-blue); color:#fff;
  padding:10px 14px; border-radius:6px; font-weight:600; z-index:100;
}
.skip:focus { left:12px; top:12px }

/* Header */
#site-header{
    background: rgba(255,255,255,0.4);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    backdrop-filter: saturate(160%) blur(14px);
    border-bottom: 1px solid rgba(238,240,244,0.6);
    transition: box-shadow .2s ease, background .2s ease;
  }
  #site-header.is-scrolled{
    background: rgba(255,255,255,0.6);
    box-shadow: 0 1px 0 rgba(9,23,71,0.04), 0 8px 30px rgba(9,23,71,0.05);
  }

/* Scroll progress */
#scroll-progress {
  position:fixed; top:0; left:0; height:2px; width:0%;
  background:linear-gradient(90deg, var(--ss-blue), #6da4ff);
  z-index:50; transition: width .12s linear;
}

/* Reveal on scroll */
[data-reveal] {
  opacity:0; transform: translateY(20px);
  transition: opacity .7s cubic-bezier(.21,.6,.35,1), transform .7s cubic-bezier(.21,.6,.35,1);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal="left"]  { transform: translateX(-22px) }
[data-reveal="right"] { transform: translateX(22px) }
[data-reveal="fade"]  { transform: none }
[data-reveal].is-visible { opacity:1; transform: none }

/* Buttons */
.btn-primary {
  display:inline-flex; align-items:center; gap:8px;
  background: var(--ss-blue); color:#fff; font-weight:600; font-size:14px;
  padding:12px 22px; border-radius:8px; border:0; cursor:pointer; text-decoration:none;
  transition: background .15s, transform .15s, box-shadow .2s;
  box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 4px 14px rgba(0,140,221,0.25);
}
.btn-primary:hover {
  background: var(--ss-blue-dark); transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 10px 24px rgba(0,140,221,0.32);
}
.btn-secondary {
  display:inline-flex; align-items:center; gap:8px;
  background:#fff; color: var(--ss-blue); font-weight:600; font-size:14px;
  padding:11px 21px; border-radius:8px; border:1.5px solid var(--ss-blue); cursor:pointer; text-decoration:none;
  transition: background .15s, transform .15s;
}
.btn-secondary:hover { background: var(--ss-blue-50); transform: translateY(-1px) }
.btn-ghost {
  display:inline-flex; align-items:center; gap:8px; background:transparent; color: var(--ss-blue);
  font-weight:600; font-size:14px; padding:11px 14px; border-radius:8px; border:0; cursor:pointer; text-decoration:none;
}
.btn-ghost:hover { background: var(--ss-blue-50) }

/* Liquid-glass CTA */
.liquid-cta {
  position:relative; isolation:isolate;
  display:inline-flex; align-items:center; gap:10px;
  padding:16px 30px; border-radius:14px;
  font-weight:700; font-size:15px; color:#fff; cursor:pointer; border:0; text-decoration:none;
  background:linear-gradient(135deg, #3478e8 0%, #5096FE 50%, #6da4ff 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.3) inset,
    0 -1px 0 rgba(0,0,0,0.15) inset,
    0 10px 30px rgba(0,140,221,0.4),
    0 2px 6px rgba(9,23,71,0.18);
  transition: transform .25s cubic-bezier(.21,.6,.35,1), box-shadow .25s;
  overflow:hidden;
}
.liquid-cta::before {
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:
    radial-gradient(120% 60% at 30% -20%, rgba(255,255,255,0.45), transparent 60%),
    radial-gradient(80% 100% at 80% 120%, rgba(255,255,255,0.18), transparent 60%);
  mix-blend-mode:screen; z-index:1;
}
.liquid-cta::after {
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,0.35) 50%, transparent 65%);
  transform: translateX(-120%); transition: transform .9s cubic-bezier(.21,.6,.35,1);
  z-index:2;
}
.liquid-cta:hover { transform: translateY(-2px) scale(1.02) }
.liquid-cta:hover::after { transform: translateX(120%) }
.liquid-cta > * { position:relative; z-index:3 }

/* Cards */
.card { background:#fff; border:1px solid #e6e8ed; border-radius:14px; transition: box-shadow .25s, transform .25s, border-color .25s }
.card-lift:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(9,23,71,0.08), 0 4px 12px rgba(9,23,71,0.05); border-color:#d6dde8 }

/* Flag chip */
.flag-chip { display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:999px; font-size:11px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase }
.flag-red   { background:#ffe7e1; color:#8a1505 }
.flag-amber { background:#fef5d8; color:#6b4d00 }
.flag-green { background:#e3f5e1; color:#1a5a18 }
.flag-blue  { background:#dff0fa; color:#1f5fc4 }

/* Pricing toggle pill */
.bill-group { position:relative; background:#f3f4f7; padding:4px; border-radius:999px; display:inline-flex }
.bill-pill { position:absolute; top:4px; bottom:4px; left:4px; width: calc(50% - 4px); background: var(--ss-blue); border-radius:999px; box-shadow: 0 1px 2px rgba(0,0,0,.12); transition: transform .35s cubic-bezier(.6,.05,.25,1); z-index:0 }
.bill-group[data-state="annual"] .bill-pill { transform: translateX(100%) }
.bill-group button { position:relative; z-index:1; color:#525252; transition: color .2s }
.bill-group[data-state="monthly"] #billMonthly { color:#fff }
.bill-group[data-state="annual"]  #billAnnual  { color:#fff }

/* Pricing cards */
.price-card {
  position:relative; background:#fff; border:1px solid #e6e8ed;
  border-radius:18px; padding:32px 28px; display:flex; flex-direction:column;
  box-shadow: 0 1px 2px rgba(9,23,71,0.04);
  transition: box-shadow .25s, transform .25s, border-color .25s;
}
.price-card:hover { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(9,23,71,0.08) }
.price-card.is-popular {
  border:2px solid var(--ss-blue);
  box-shadow: 0 18px 40px rgba(0,140,221,0.14), 0 4px 12px rgba(0,140,221,0.08);
}
.price-card.is-popular .popular-tag {
  position:absolute; top:-14px; left:50%; transform: translateX(-50%);
  display:inline-flex; align-items:center; gap:6px;
  background: var(--ss-amber); color:#1A1A1A;
  font-size:12px; font-weight:700; letter-spacing:0.04em;
  padding:6px 14px; border-radius:999px;
  box-shadow: 0 4px 10px rgba(250,181,21,0.35);
}
.price-cta { display:inline-flex; align-items:center; justify-content:center; width:100%; padding:13px 18px; border-radius:10px; font-weight:600; font-size:14px; transition: background .15s, color .15s, transform .15s; cursor:pointer; text-decoration:none }
.price-cta.primary { background: var(--ss-blue); color:#fff; box-shadow: 0 4px 14px rgba(0,140,221,0.25) }
.price-cta.primary:hover { background: var(--ss-blue-dark); transform: translateY(-1px) }
.price-cta.secondary { background:#fff; color: var(--ss-ink); border:1.5px solid #d9dde3 }
.price-cta.secondary:hover { border-color: var(--ss-blue); color: var(--ss-blue); background: var(--ss-blue-50) }
.price-feat { display:flex; align-items:flex-start; gap:10px; color:#333 }
.price-feat .check, .price-feat .plus { flex:0 0 18px; width:18px; height:18px; margin-top:3px; display:inline-flex; align-items:center; justify-content:center }
.price-feat .check::before { content:""; display:block; width:14px; height:14px; background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2369c765' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/contain no-repeat }
.price-feat .plus::before  { content:""; display:block; width:14px; height:14px; background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888888' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><line x1='12' y1='5' x2='12' y2='19'/><line x1='5' y1='12' x2='19' y2='12'/></svg>") center/contain no-repeat }

.compare-tbl thead th { background:#fafbfc; border-bottom:1px solid #e6e8ed; font-size:14px }
.compare-tbl tbody tr { border-bottom:1px solid #eef0f3 }
.compare-tbl tbody tr:last-child { border-bottom:0 }
.compare-tbl tbody td { padding:14px 12px; color:#525252 }
.compare-tbl .growth-col { background: rgba(0,140,221,0.05) }
.compare-tbl thead .growth-col { background: #eef4ff }
.t-check { display:inline-block; width:16px; height:16px; background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2369c765' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/contain no-repeat }
.t-dash { color:#a9a9a9; font-weight:500 }

/* Legal / prose layout */
.toc-link { position:relative; transition: color .2s ease; display:block; padding:6px 0 }
.toc-link.active { color: var(--ss-blue); font-weight:600 }
.toc-link.active::before { content:''; position:absolute; left:-12px; top:8px; bottom:8px; width:2px; background: var(--ss-blue); border-radius:2px }
@media (min-width: 768px) { .legal-toc { position:sticky; top:96px } }

.prose-doc h2 {
  color: var(--ss-ink); font-size:22px; line-height:1.25; font-weight:700;
  margin-top:2.75rem; margin-bottom:0.75rem; letter-spacing:-0.01em; scroll-margin-top:96px;
}
.prose-doc h3 {
  color: var(--ss-ink); font-size:17px; line-height:1.3; font-weight:600;
  margin-top:1.5rem; margin-bottom:0.5rem;
}
.prose-doc p { color: var(--ss-body); line-height:1.7; margin-bottom:1rem }
.prose-doc ul { list-style: disc; padding-left:1.4rem; color: var(--ss-body); line-height:1.7; margin-bottom:1rem }
.prose-doc li { margin-bottom:0.35rem }
.prose-doc a { color: var(--ss-blue); font-weight:600 }
.prose-doc a:hover { text-decoration: underline }
.prose-doc strong { color: var(--ss-ink); font-weight:700 }
.prose-doc hr { border:0; border-top:1px solid #e6e8ed; margin:2.5rem 0 }

.callout {
  background: var(--ss-blue-50); border:1px solid var(--ss-blue-100);
  padding:14px 18px; border-radius:12px; color:#1f5fc4; font-size:14px;
  line-height:1.6; margin: 1rem 0 1.5rem;
}
.callout strong { color: var(--ss-navy) }

/* Footer (shared) */
footer.ss-footer { background:#373737; color:#fff; padding: 64px 0 40px }
footer.ss-footer a { color: rgba(255,255,255,0.8) }
footer.ss-footer a:hover { color: #fff }
footer.ss-footer .ss-footer-meta-mono { font-family:"JetBrains Mono",monospace; font-size:12px; letter-spacing:0.04em; text-transform:uppercase; color: var(--ss-blue-200) }

/* Sign-in card */
.signin-card {
  background:#fff; border-radius:18px; padding:36px 32px;
  box-shadow: 0 18px 40px rgba(9,23,71,0.08), 0 4px 12px rgba(9,23,71,0.05);
  border:1px solid #e6e8ed;
}
.ss-input {
  width:100%; background:#fff; border:1px solid #d9dde3; border-radius:10px;
  padding:12px 14px; font-size:14px; color: var(--ss-ink);
  transition: border-color .2s, box-shadow .2s;
}
.ss-input:focus { outline:0; border-color: var(--ss-blue); box-shadow: 0 0 0 3px rgba(0,140,221,0.12) }
.ss-label { display:block; font-size:13px; font-weight:600; color: var(--ss-ink); margin-bottom:6px }

@media (prefers-reduced-motion: reduce){
  [data-reveal], .liquid-cta::after { animation:none !important; transition:none !important; transform:none !important; opacity:1 !important }
}