/* =============================================================
   SkinCloud — shared site stylesheet
   Tokens, base, layout, components. Used by every page.
   ============================================================= */

/* ---------- Tokens ---------- */
:root {
  --indigo:        #5C5CEB;
  --indigo-light:  #8080FF;
  --indigo-deep:   #3A3AB8;
  --indigo-ink:    #1E1E66;
  --rose:          #E45F8A;
  --green:         #2F9E6E;

  --paper:         #FFFFFF;
  --bg:            #F7F7FB;
  --surface:       #FFFFFF;
  --surface-tint:  #FAFAFD;
  --surface-warm:  #FDF6F2;

  --border:        #E4E4F0;
  --border-soft:   #EFEFF6;

  --text:          #1E1E66;
  --text-strong:   #14143D;
  --text-muted:    #555581;
  --text-subtle:   #8A8AAE;

  --callout-grad-a:#F4F4FE;
  --callout-grad-b:#ECECF8;
  --callout-border:#DCDCEF;

  --neg-bg:        #F0F8F4;
  --neg-border:    #CFE7DA;
  --neg-text:      #1F5A40;
  --neg-strong:    #135033;

  --code-bg:       rgba(92,92,235,0.08);
  --nav-bg:        rgba(247,247,251,0.85);

  --shadow-sm:     0 1px 2px rgba(30,30,102,0.06);
  --shadow-md:     0 8px 24px -8px rgba(30,30,102,0.18);
  --shadow-lg:     0 30px 60px -28px rgba(30,30,102,0.32), 0 1px 0 rgba(255,255,255,0.6) inset;
  --shadow-hero:   0 50px 120px -32px rgba(30,30,102,0.45);

  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;

  --container: 1120px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --indigo:        #8080FF;
    --indigo-light:  #A1A1FF;
    --indigo-deep:   #5C5CEB;
    --indigo-ink:    #C5C5FF;

    --paper:         #15162B;
    --bg:            #0A0B14;
    --surface:       #15162B;
    --surface-tint:  #1C1E3A;
    --surface-warm:  #1F1A22;

    --border:        #2A2C4A;
    --border-soft:   #232540;

    --text:          #F1F1FF;
    --text-strong:   #FFFFFF;
    --text-muted:    #B5B5CF;
    --text-subtle:   #7A7A96;

    --callout-grad-a:#1B1D38;
    --callout-grad-b:#15162B;
    --callout-border:#2A2C4A;

    --neg-bg:        #122821;
    --neg-border:    #1F4438;
    --neg-text:      #95DDB5;
    --neg-strong:    #B6E9CC;

    --code-bg:       rgba(128,128,255,0.18);
    --nav-bg:        rgba(10,11,20,0.78);

    --shadow-sm:     0 1px 2px rgba(0,0,0,0.4);
    --shadow-md:     0 8px 24px -8px rgba(0,0,0,0.6);
    --shadow-lg:     0 30px 80px -32px rgba(0,0,0,0.7), 0 1px 0 rgba(255,255,255,0.04) inset;
    --shadow-hero:   0 60px 140px -32px rgba(0,0,0,0.85);
  }
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { display: block; max-width: 100%; }

a {
  color: var(--indigo);
  text-decoration: none;
  border-bottom: 1px solid rgba(92,92,235,0.25);
  transition: border-color .15s ease, color .15s ease;
}
a:hover { border-bottom-color: var(--indigo); }
@media (prefers-color-scheme: dark) {
  a { border-bottom-color: rgba(128,128,255,0.35); }
}

::selection { background: rgba(92,92,235,0.20); color: var(--indigo-ink); }
@media (prefers-color-scheme: dark) {
  ::selection { background: rgba(128,128,255,0.35); color: #fff; }
}

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
}

/* ---------- Display typography ---------- */
.display {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.04;
}
.display-1 { font-size: clamp(40px, 5.8vw, 72px); }
.display-2 { font-size: clamp(32px, 4.4vw, 52px); }
.display-3 { font-size: clamp(26px, 3.0vw, 38px); letter-spacing: -0.012em; line-height: 1.12; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-muted);
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 7px 12px; border-radius: 999px;
  font-weight: 600;
}
.eyebrow .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 4px rgba(47,158,110,0.20);
}
.eyebrow.on-gradient {
  color: rgba(255,255,255,0.92);
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.20);
}
.eyebrow.on-gradient .dot { background: #6EE7B7; box-shadow: 0 0 0 4px rgba(110,231,183,0.25); }

.lede {
  font-size: clamp(17px, 1.5vw, 19px);
  line-height: 1.55;
  color: var(--text-muted);
  max-width: 60ch;
}

/* ---------- Top nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--nav-bg);
  backdrop-filter: saturate(160%) blur(18px);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  border-bottom: 1px solid var(--border-soft);
}
.nav-inner {
  max-width: var(--container); margin: 0 auto;
  padding: 14px 32px;
  display: flex; align-items: center; gap: 8px;
}
.brand {
  display: inline-flex; align-items: center; gap: 12px;
  font-weight: 600; color: var(--text-strong);
  font-size: 16px;
  border: 0;
}
.brand:hover { color: var(--indigo); }
.brand .mark {
  width: 32px; height: 32px; border-radius: 7.5px; overflow: hidden;
  box-shadow: 0 2px 6px rgba(30,30,102,0.18);
  flex: 0 0 32px;
}
.nav-spacer { flex: 1; }
.nav-links { display: flex; gap: 6px; align-items: center; }
.nav-link {
  font-size: 14px; color: var(--text-muted);
  border: 0;
  padding: 8px 12px;
  border-radius: 8px;
}
.nav-link:hover { color: var(--indigo); background: rgba(92,92,235,0.06); }
@media (prefers-color-scheme: dark) {
  .nav-link:hover { background: rgba(128,128,255,0.10); }
}
.nav-link.is-active { color: var(--indigo); }

@media (max-width: 720px) {
  .nav-inner { padding: 12px 20px; }
  .nav-links .nav-link:not(.btn) { display: none; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 15px; font-weight: 600;
  padding: 12px 20px;
  border-radius: 10px;
  border: 1px solid transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s ease, background .15s ease, box-shadow .15s ease, color .15s ease;
  white-space: nowrap;
  font-family: inherit;
}
.btn:active { transform: scale(0.985); }

.btn-primary {
  background: var(--indigo);
  color: #fff;
  box-shadow: 0 6px 18px -6px rgba(92,92,235,0.55), inset 0 1px 0 rgba(255,255,255,0.18);
}
.btn-primary:hover { background: var(--indigo-deep); }
.btn-primary[disabled] { opacity: 0.7; cursor: default; }

.btn-secondary {
  background: var(--surface);
  color: var(--text-strong);
  border-color: var(--border);
}
.btn-secondary:hover { border-color: var(--indigo); color: var(--indigo); }

.btn-ghost {
  background: transparent;
  color: var(--text);
  border: 0;
  padding: 8px 12px;
}
.btn-ghost:hover { color: var(--indigo); }

.btn-on-gradient {
  background: rgba(255,255,255,0.14);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.22);
  backdrop-filter: blur(8px);
}
.btn-on-gradient:hover { background: rgba(255,255,255,0.22); }

.btn-lg { padding: 14px 22px; font-size: 16px; border-radius: 12px; }
.btn-block { width: 100%; }

/* ---------- Hero (gradient) ---------- */
.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #8080FF 0%, #5C5CEB 55%, #3A3AB8 100%);
  color: #fff;
}
.hero::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 18% 30%, rgba(255,255,255,0.18), transparent 36%),
    radial-gradient(circle at 82% 72%, rgba(255,255,255,0.12), transparent 42%);
  pointer-events: none;
}
.hero-inner {
  max-width: var(--container); margin: 0 auto;
  padding: 80px 32px 96px;
  position: relative;
}
.hero h1 { color: #fff; margin: 22px 0 18px; max-width: 22ch; }
.hero p.lede { color: rgba(255,255,255,0.90); max-width: 58ch; margin: 0 0 32px; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 10px; font-size: 13px; }
.meta-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  color: rgba(255,255,255,0.95);
}

/* ---------- Hero (light, marketing-style with device) ---------- */
.hero-light {
  position: relative;
  overflow: hidden;
  padding: 80px 0 0;
  background:
    radial-gradient(ellipse 1100px 600px at 80% -10%, rgba(128,128,255,0.18), transparent 70%),
    radial-gradient(ellipse 800px 500px at 0% 110%, rgba(228,95,138,0.10), transparent 70%),
    var(--bg);
}
.hero-light .hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 56px;
  align-items: center;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px 80px;
}
.hero-light h1 {
  color: var(--text-strong);
  margin: 22px 0 18px;
  max-width: 14ch;
}
.hero-light h1 em,
.hero-light p.lede em {
  font-style: normal;
  font-weight: 600;
  background: linear-gradient(135deg, var(--indigo-light) 0%, var(--indigo) 60%, var(--indigo-deep) 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.hero-light p.lede { margin: 0 0 28px; max-width: 54ch; }
.hero-light .hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-light .hero-fineprint {
  margin-top: 14px;
  font-size: 13px;
  color: var(--text-subtle);
}

@media (max-width: 900px) {
  .hero-light { padding-top: 56px; }
  .hero-light .hero-grid { grid-template-columns: 1fr; gap: 36px; padding-bottom: 56px; }
}

/* ---------- Sections ---------- */
.section {
  padding: 96px 0;
  position: relative;
}
.section-tight { padding: 64px 0; }
.section-tint { background: var(--surface-tint); }
.section-warm { background: var(--surface-warm); }
.section-dark {
  background: linear-gradient(180deg, #0F1024 0%, #0A0B14 100%);
  color: #F1F1FF;
}
.section-dark h2,
.section-dark h3 { color: #fff; }
.section-dark .lede { color: rgba(255,255,255,0.78); }
.section-dark .feature-card,
.section-dark .pricing-tile {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.10);
  color: #F1F1FF;
}
.section-dark .feature-card p,
.section-dark .pricing-tile p { color: rgba(255,255,255,0.74); }

.section-head {
  max-width: 740px;
  margin: 0 auto 48px;
  text-align: center;
}
.section-head .eyebrow { margin-bottom: 18px; }
.section-head h2 { color: var(--text-strong); }
.section-head p.lede { margin: 18px auto 0; color: var(--text-muted); }

@media (max-width: 720px) {
  .section { padding: 64px 0; }
  .section-tight { padding: 48px 0; }
  .section-head { margin-bottom: 36px; }
}

/* ---------- Trust strip — individual cards ---------- */
.trust-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 14px;
  padding: 28px 24px;
  background: transparent;
  border: 0;
  max-width: 1280px;
  margin: 0 auto;
}
.trust-item {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 18px;
  font-size: 13.5px; color: var(--text-muted);
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.04);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.trust-item:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.06), 0 16px 36px rgba(0,0,0,0.07);
  border-color: color-mix(in oklab, var(--indigo) 28%, var(--border-soft));
}
.trust-item svg {
  color: var(--indigo);
  flex: 0 0 auto;
  width: 20px; height: 20px;
}
.trust-item strong { color: var(--text-strong); font-weight: 600; }
@media (max-width: 960px) {
  .trust-strip { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 540px) {
  .trust-strip { grid-template-columns: 1fr; gap: 10px; padding: 24px 20px; }
  .trust-item { padding: 16px 16px; }
}

/* ---------- Feature cards ---------- */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 20px;
}
.feature-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 28px;
  display: flex; flex-direction: column;
}
.feature-card .ic {
  width: 40px; height: 40px; border-radius: 10px;
  background: linear-gradient(135deg, var(--indigo-light), var(--indigo));
  display: grid; place-items: center;
  color: #fff;
  margin-bottom: 18px;
  flex: 0 0 40px;
  box-shadow: 0 6px 14px -4px rgba(92,92,235,0.45);
}
.feature-card h3 {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif;
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
  color: var(--text-strong);
}
.feature-card p {
  margin: 0;
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.55;
}
.feature-card .feature-shot {
  margin-top: 22px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface-tint);
  aspect-ratio: 9 / 14;
  border: 1px solid var(--border-soft);
}

@media (max-width: 900px) { .feature-grid { grid-template-columns: 1fr; } }

/* ---------- Workflow walk (alternating rows) ---------- */
.workflow {
  display: grid;
  gap: 96px;
}
.workflow-step {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.workflow-step .copy .step-num {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px;
  color: var(--indigo);
  background: var(--code-bg);
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 14px;
  letter-spacing: 0.06em;
  font-weight: 600;
}
.workflow-step .copy h3 {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif;
  font-size: clamp(24px, 2.4vw, 34px);
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.15;
  margin: 0 0 14px;
  color: var(--text-strong);
  max-width: 18ch;
}
.workflow-step .copy p {
  margin: 0; color: var(--text-muted);
  font-size: 16px; line-height: 1.55;
  max-width: 50ch;
}
.workflow-step .copy ul {
  margin: 18px 0 0; padding: 0; list-style: none;
}
.workflow-step .copy li {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 6px 0;
  font-size: 14.5px;
  color: var(--text);
}
.workflow-step .copy li svg { color: var(--indigo); flex: 0 0 auto; margin-top: 4px; }

.workflow-step:nth-child(even) .copy { order: 2; }
.workflow-step:nth-child(even) .visual { order: 1; }

@media (max-width: 900px) {
  .workflow { gap: 64px; }
  .workflow-step { grid-template-columns: 1fr; gap: 32px; }
  .workflow-step:nth-child(even) .copy { order: 0; }
  .workflow-step:nth-child(even) .visual { order: 0; }
}

/* ---------- Device frame (CSS-only iPhone) ---------- */
.device {
  position: relative;
  width: 100%;
  max-width: 320px;
  aspect-ratio: 9 / 19.5;
  /* Glossy black bezel with a faint inner highlight, more like real
     iPhone hardware than the previous flat indigo. */
  background:
    linear-gradient(135deg, #1A1B25 0%, #0A0B14 40%, #1A1B25 100%);
  border-radius: 50px;
  padding: 7px;
  margin: 0 auto;
  box-shadow:
    inset 0 0 0 1.5px rgba(255,255,255,0.06),
    inset 0 0 0 3px #0A0B14,
    0 30px 60px -20px rgba(0,0,0,0.6),
    var(--shadow-hero);
}
.device.tilt-l { transform: rotate(-6deg) translateZ(0); }
.device.tilt-r { transform: rotate(6deg) translateZ(0); }
.device.tilt-l, .device.tilt-r {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform;
}

/* Pre-rendered iPhone mockup PNG (device frame + screenshot baked in).
   The PNG already carries its own bezel, corner-rounding, and
   highlights, so we only add a subtle lift and the tilt. drop-shadow()
   respects the PNG's alpha channel — the shadow follows the actual
   device silhouette instead of a rectangular bounding box. */
.screenshot-mockup {
  display: block;
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
  filter: drop-shadow(0 30px 50px rgba(0,0,0,0.35));
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform;
}
.screenshot-mockup.tilt-l { transform: rotate(-6deg) translateZ(0); }
.screenshot-mockup.tilt-r { transform: rotate(6deg) translateZ(0); }
@media (min-width: 768px) {
  .screenshot-mockup { max-width: 380px; }
}
.device.lg { max-width: 380px; }

/* Rendered iPhone mockups — these PNGs ship the device frame baked in,
   with significant negative space around the phone (transparent alpha).
   Scaling up via transform fills that empty space and makes the phone
   itself feel "real-sized" without changing the column's grid footprint.
   Mobile: no scale (phone naturally fills a narrow viewport).
   Desktop: aggressive scale so the phone reads at hero scale. */
.rendered-mockup {
  display: block;
  width: 100%;
  max-width: none;
  filter: drop-shadow(0 30px 50px rgba(0,0,0,0.35));
  transform-origin: center;
}
.hero-mockup    { filter: drop-shadow(0 40px 70px rgba(0,0,0,0.45)); }
/* Mobile: still scale up — the rendered PNGs have lots of transparent
   negative space around the phone, so 1.0× makes the phone look small.
   1.6× on mobile fills the column and makes the phone read at iPhone-size. */
.hero-mockup     { transform: scale(1.6); }
.workflow-mockup { transform: scale(1.2); }
@media (min-width: 768px) {
  .hero-mockup     { transform: scale(2.0); }
  .workflow-mockup { transform: scale(1.35); }
}
.device-screen {
  position: relative;
  width: 100%; height: 100%;
  background: var(--paper);
  border-radius: 36px;
  overflow: hidden;
}
.device-screen::before {
  content: "";
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  width: 36%; height: 28px;
  background: #0E0F1A;
  border-radius: 999px;
  z-index: 5;
}
/* Real screenshots already include the Dynamic Island — hide our synthetic notch. */
.device-screen:has(> img)::before { display: none; }
/* Absolute-position so an <img>'s intrinsic aspect-ratio can't collapse the parent. */
.device-screen img,
.device-screen .placeholder {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.device-screen .placeholder {
  background:
    radial-gradient(ellipse 60% 40% at 30% 20%, rgba(255,255,255,0.55), transparent 60%),
    linear-gradient(180deg, #FBE5DC 0%, #E9B6A1 50%, #C68F87 100%);
  position: relative;
}
.device-screen .placeholder.cool {
  background:
    radial-gradient(ellipse 60% 40% at 70% 20%, rgba(255,255,255,0.50), transparent 60%),
    linear-gradient(180deg, #EFECF8 0%, #CFCBE6 50%, #9F9CC2 100%);
}
.device-screen .placeholder.indigo {
  background:
    radial-gradient(ellipse 70% 50% at 50% -10%, rgba(255,255,255,0.30), transparent 60%),
    linear-gradient(180deg, #8080FF 0%, #5C5CEB 60%, #3A3AB8 100%);
}
.device-screen .placeholder .label {
  position: absolute; bottom: 28px; left: 0; right: 0;
  text-align: center;
  color: rgba(255,255,255,0.85);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
}

/* Compact in-context iPhone (used inside feature cards) */
.device-mini {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 14;
  background: #0E0F1A;
  border-radius: 28px;
  padding: 6px;
  box-shadow: var(--shadow-md);
}
.device-mini .device-screen {
  border-radius: 22px;
}
.device-mini .device-screen::before {
  width: 38%; height: 18px; top: 6px;
}
.device-mini .device-screen:has(> img)::before { display: none; }

/* ---------- Pricing tiles ---------- */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 16px;
}
.pricing-tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 28px 24px;
  display: flex; flex-direction: column;
  position: relative;
}
.pricing-tile.featured {
  border-color: var(--indigo);
  box-shadow: 0 24px 50px -28px rgba(92,92,235,0.55);
  transform: translateY(-4px);
}
.pricing-tile.featured::before {
  content: "Most popular";
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--indigo);
  color: #fff;
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 4px 12px; border-radius: 999px;
  white-space: nowrap;
}
.pricing-tile h3 {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif;
  font-size: 18px; font-weight: 600; margin: 0 0 4px;
  color: var(--text-strong);
}
.pricing-tile .tier-sub { font-size: 13px; color: var(--text-subtle); margin: 0 0 18px; }
.pricing-tile .price {
  display: baseline; align-items: baseline;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif;
  margin-bottom: 2px;
}
.pricing-tile .price .amount {
  font-size: 36px; font-weight: 600; letter-spacing: -0.02em;
  color: var(--text-strong);
}
.pricing-tile .price .per {
  font-size: 14px; color: var(--text-muted); font-weight: 500;
  margin-left: 4px;
}
.pricing-tile .annual {
  font-size: 12.5px; color: var(--text-muted); margin: 0 0 22px;
}
.pricing-tile ul {
  list-style: none; padding: 0; margin: 0 0 24px;
}
.pricing-tile li {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 6px 0;
  font-size: 14px;
  color: var(--text);
}
.pricing-tile li svg { color: var(--indigo); flex: 0 0 auto; margin-top: 4px; }
.pricing-tile .cta { margin-top: auto; }

@media (max-width: 1000px) { .pricing-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 600px) { .pricing-grid { grid-template-columns: 1fr; } }

/* ---------- Callout ---------- */
.callout {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 18px 20px;
  background: linear-gradient(180deg, var(--callout-grad-a), var(--callout-grad-b));
  border: 1px solid var(--callout-border);
  border-radius: var(--radius-md);
}
.callout .icon {
  flex: 0 0 32px; height: 32px; border-radius: 8px;
  display: grid; place-items: center;
  background: var(--indigo);
  color: #fff;
}
.callout .body { font-size: 14px; line-height: 1.55; color: var(--text); margin: 4px 0 0; }
.callout .body strong { color: var(--indigo-ink); }

/* ---------- Waitlist form ---------- */
.waitlist {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  max-width: 460px;
  width: 100%;
}
.waitlist-input {
  appearance: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 13px 16px;
  font-size: 15px;
  color: var(--text-strong);
  font-family: inherit;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.waitlist-input:focus {
  outline: none;
  border-color: var(--indigo);
  box-shadow: 0 0 0 4px rgba(92,92,235,0.15);
}
.waitlist-input::placeholder { color: var(--text-subtle); }
.waitlist.on-gradient .waitlist-input {
  background: rgba(255,255,255,0.95);
  border-color: rgba(255,255,255,0.9);
  color: var(--text-strong);
}
.waitlist-status {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 12px;
  min-height: 18px;
}
.waitlist-status.ok { color: var(--green); }
.waitlist-status.err { color: #C0395A; }
.waitlist-status .spinner {
  display: inline-block;
  width: 12px; height: 12px;
  border: 2px solid rgba(92,92,235,0.25);
  border-top-color: var(--indigo);
  border-radius: 50%;
  animation: scl-spin .7s linear infinite;
  margin-right: 8px; vertical-align: -2px;
}
@keyframes scl-spin { to { transform: rotate(360deg); } }

/* ---------- CTA gradient block ---------- */
.cta-block {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, #8080FF 0%, #5C5CEB 55%, #3A3AB8 100%);
  color: #fff;
  padding: 72px 56px;
  text-align: center;
  box-shadow: var(--shadow-hero);
}
.cta-block::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,0.18), transparent 35%),
    radial-gradient(circle at 80% 80%, rgba(255,255,255,0.10), transparent 40%);
  pointer-events: none;
}
.cta-block h2 { color: #fff; margin: 0 0 14px; max-width: 22ch; margin-inline: auto; }
.cta-block p { color: rgba(255,255,255,0.88); max-width: 48ch; margin: 0 auto 28px; font-size: 17px; }
.cta-block .waitlist { margin: 0 auto; }
.cta-block .fineprint { margin-top: 14px; font-size: 12.5px; color: rgba(255,255,255,0.72); }
@media (max-width: 720px) {
  .cta-block { padding: 56px 24px; border-radius: 22px; }
}

/* ---------- FAQ ---------- */
.faq {
  max-width: 760px;
  margin: 0 auto;
}
.faq details {
  border-bottom: 1px solid var(--border-soft);
  padding: 22px 0;
}
.faq details:first-of-type { border-top: 1px solid var(--border-soft); }
.faq summary {
  list-style: none;
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer;
  font-size: 17px;
  font-weight: 600;
  color: var(--text-strong);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif;
  letter-spacing: -0.005em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  width: 10px; height: 10px;
  border-right: 2px solid var(--text-muted);
  border-bottom: 2px solid var(--text-muted);
  transform: rotate(45deg);
  transition: transform .2s ease;
  flex: 0 0 auto;
  margin-left: 24px;
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq .answer {
  padding-top: 14px;
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1.6;
}
.faq .answer p { margin: 0 0 10px; }
.faq .answer p:last-child { margin: 0; }

/* ---------- Footer ---------- */
.footer {
  border-top: 1px solid var(--border-soft);
  padding: 56px 0 64px;
  background: var(--bg);
  color: var(--text-muted);
  font-size: 13.5px;
}
.footer-inner {
  max-width: var(--container); margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 32px;
}
.footer-brand .mark {
  width: 36px; height: 36px; border-radius: 8.5px; overflow: hidden;
  box-shadow: 0 2px 8px rgba(30,30,102,0.18);
  margin-bottom: 14px;
}
.footer-brand .name {
  font-weight: 600;
  color: var(--text-strong);
  font-size: 16px;
  margin-bottom: 6px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif;
}
.footer-brand p {
  margin: 0 0 14px;
  font-size: 13.5px;
  color: var(--text-muted);
  max-width: 36ch;
}
.footer-col h4 {
  font-size: 11px; letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--text-subtle); font-weight: 600;
  margin: 0 0 14px;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { padding: 5px 0; }
.footer-col a {
  color: var(--text-muted);
  border-bottom: 0;
}
.footer-col a:hover { color: var(--indigo); }
.footer-bottom {
  max-width: var(--container);
  margin: 40px auto 0;
  padding: 24px 32px 0;
  border-top: 1px solid var(--border-soft);
  display: flex; flex-wrap: wrap; gap: 16px; align-items: center;
  font-size: 12.5px; color: var(--text-subtle);
}
.footer-bottom .spacer { flex: 1; }
@media (max-width: 800px) {
  .footer-inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .footer-inner { grid-template-columns: 1fr; gap: 24px; }
}

/* ---------- Reveal-on-scroll (pure CSS + observer) ---------- */
.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .5s ease-out, transform .5s ease-out;
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  .device.tilt-l, .device.tilt-r { transform: none; }
}

/* ---------- Doc-style pages (privacy / terms) ---------- */
.doc-wrap {
  max-width: var(--container); margin: 0 auto;
  padding: 0 32px 96px;
  display: grid;
  grid-template-columns: minmax(0,1fr) 240px;
  gap: 56px;
  align-items: start;
}
.doc {
  margin-top: -52px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 48px 56px 56px;
  box-shadow: var(--shadow-lg);
}
.doc h2 {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 48px 0 14px;
  color: var(--text-strong);
  scroll-margin-top: 120px;
}
.doc h2:first-of-type { margin-top: 0; }
.doc h2 .num {
  display: inline-block;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px;
  color: var(--indigo);
  font-weight: 500;
  letter-spacing: 0.06em;
  background: var(--code-bg);
  padding: 4px 8px;
  border-radius: 6px;
  margin-right: 12px;
  vertical-align: 4px;
}
.doc h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-strong);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 24px 0 8px;
}
.doc p { margin: 0 0 14px; color: var(--text); font-size: 15.5px; line-height: 1.65; }
.doc p.muted { color: var(--text-muted); }
.doc ul, .doc ol { margin: 0 0 16px; padding-left: 22px; color: var(--text); }
.doc li { margin-bottom: 6px; font-size: 15.5px; line-height: 1.6; }

.toc {
  position: sticky; top: 100px;
  margin-top: 16px;
}
.toc-title {
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-subtle);
  font-weight: 600;
  margin: 0 0 10px;
}
.toc ol { list-style: none; padding: 0; margin: 0; counter-reset: toc; }
.toc li { counter-increment: toc; border-left: 2px solid var(--border); padding: 0; }
.toc li.active { border-left-color: var(--indigo); }
.toc a {
  display: flex; gap: 10px; align-items: baseline;
  padding: 7px 12px;
  font-size: 13px; color: var(--text-muted);
  border: 0;
  line-height: 1.4;
}
.toc a::before {
  content: counter(toc, decimal-leading-zero);
  font-variant-numeric: tabular-nums;
  font-size: 11px; color: var(--text-subtle);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
.toc a:hover { color: var(--indigo); }
.toc li.active a { color: var(--indigo); font-weight: 500; }

.toc-mobile {
  display: none;
  margin: 16px 0 24px;
}
.toc-mobile summary {
  list-style: none; cursor: pointer;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-tint);
  color: var(--text-strong);
  font-size: 14px; font-weight: 600;
  display: flex; align-items: center; justify-content: space-between;
}
.toc-mobile summary::-webkit-details-marker { display: none; }
.toc-mobile summary::after {
  content: "";
  width: 8px; height: 8px;
  border-right: 2px solid var(--text-muted);
  border-bottom: 2px solid var(--text-muted);
  transform: rotate(45deg);
  transition: transform .2s ease;
}
.toc-mobile[open] summary::after { transform: rotate(-135deg); }
.toc-mobile ol { list-style: none; padding: 8px 0 0; margin: 0; counter-reset: tocm; }
.toc-mobile li { counter-increment: tocm; }
.toc-mobile a {
  display: block;
  padding: 8px 16px;
  font-size: 14px; color: var(--text-muted);
  border: 0;
}
.toc-mobile a::before {
  content: counter(tocm, decimal-leading-zero) "  ";
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px; color: var(--text-subtle);
}

@media (max-width: 900px) {
  .doc-wrap { grid-template-columns: 1fr; gap: 0; }
  .toc { display: none; }
  .toc-mobile { display: block; }
  .doc { padding: 32px 22px; margin-top: -36px; }
}

/* ---------- Generic data-card (used in privacy data inventory) ---------- */
.data-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin: 12px 0 18px;
}
.data-card .head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px;
  background: var(--surface-tint);
  border-bottom: 1px solid var(--border);
}
.data-card .head .role {
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  font-weight: 600; color: var(--text-subtle);
}
.data-card .head h4 { margin: 0; font-size: 15px; font-weight: 600; color: var(--text-strong); }
.data-card ul { list-style: none; padding: 8px 0; margin: 0; }
.data-card li {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 10px 18px;
  font-size: 14.5px;
  color: var(--text);
  border-bottom: 1px solid var(--border-soft);
}
.data-card li:last-child { border-bottom: 0; }
.data-card li .check {
  flex: 0 0 18px; width: 18px; height: 18px;
  margin-top: 3px;
  border-radius: 5px;
  background: var(--code-bg);
  display: grid; place-items: center;
  color: var(--indigo);
}
.data-card li b { color: var(--indigo-ink); font-weight: 600; }

/* "Do not" block */
.neg-list {
  background: var(--neg-bg);
  border: 1px solid var(--neg-border);
  border-radius: 12px;
  padding: 14px 18px;
  font-size: 14px;
  color: var(--neg-text);
}
.neg-list b { color: var(--neg-strong); }

/* Security feature grid (privacy "How we protect it") */
.sec-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px;
  margin: 12px 0 18px;
}
.sec-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 18px;
  background: var(--surface);
}
.sec-card .ic {
  width: 36px; height: 36px; border-radius: 9px;
  background: linear-gradient(135deg, var(--indigo-light), var(--indigo));
  display: grid; place-items: center;
  color: #fff;
  margin-bottom: 12px;
}
.sec-card h4 { margin: 0 0 6px; font-size: 15px; font-weight: 600; color: var(--text-strong); }
.sec-card p { margin: 0; font-size: 13.5px; color: var(--text-muted); line-height: 1.5; }
@media (max-width: 720px) { .sec-grid { grid-template-columns: 1fr; } }

/* Sub-processor table */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 12px; margin: 12px 0 18px; }
table.subs { width: 100%; border-collapse: collapse; font-size: 14px; }
.subs th {
  text-align: left; padding: 12px 16px;
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-subtle); font-weight: 600;
  background: var(--surface-tint);
  border-bottom: 1px solid var(--border);
}
.subs td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-soft);
  vertical-align: top;
  color: var(--text);
}
.subs tr:last-child td { border-bottom: 0; }
.subs td:first-child { font-weight: 600; color: var(--text-strong); white-space: nowrap; }
.subs td:nth-child(2) { color: var(--text-muted); }
.subs td:nth-child(3) {
  color: var(--text-muted);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12.5px;
  white-space: nowrap;
}

/* Rights list (privacy "Your rights") */
.rights {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
  margin: 12px 0 18px;
}
.right {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  background: var(--surface);
}
.right h4 { margin: 0 0 4px; font-size: 14px; font-weight: 600; color: var(--text-strong); }
.right p { margin: 0; font-size: 13px; color: var(--text-muted); line-height: 1.5; }
.right p code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px;
  background: var(--code-bg);
  color: var(--indigo);
  padding: 1px 6px; border-radius: 4px;
}
@media (max-width: 720px) { .rights { grid-template-columns: 1fr; } }