/* Prolifik secondary pages: the same tokens and chrome as the home page,
   without the scroll acts. Loaded after scrollcraft.css. */
:root {
  --sc-canvas: #0e182c; --sc-surface: #1a2740; --sc-ink: #eaf0f8; --sc-ink-soft: #a4b4cd;
  --sc-accent: #3b82f6; --sc-accent-ink: #fff; --pf-cta: #2563eb; --pf-cobalt-deep: #1d4ed8;
  --sc-font-display: "Space Grotesk", system-ui, sans-serif; --sc-font-text: "Manrope", system-ui, sans-serif;
  --sc-font-mono: "Space Grotesk", ui-monospace, monospace; --pf-font-logo: "Outfit", "Space Grotesk", system-ui, sans-serif;
  --sc-shadow-color: 222 60% 3%; --sc-r-sm: 8px; --sc-r-md: 14px; --sc-r-lg: 24px;
  --glass: color-mix(in oklab, #fff 8%, transparent); --glass-edge: color-mix(in oklab, #fff 18%, transparent);
}
.sc-display { font-weight: 600; }
.sc-body { line-height: 1.7; }
body { background: var(--sc-canvas); }

/* chrome */
.bar { position: fixed; top: 1rem; left: 50%; translate: -50% 0; z-index: var(--sc-z-chrome); display: flex; align-items: center; gap: var(--sc-6);
  padding: 0.55rem 0.6rem 0.55rem 1.1rem; border-radius: var(--sc-r-pill); background: color-mix(in oklab, var(--sc-canvas) 62%, transparent);
  border: 1px solid var(--glass-edge); box-shadow: var(--sc-e2), var(--sc-edge); backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3);
  width: min(calc(100% - 2rem), 60rem); justify-content: space-between; }
.mark { display: inline-flex; align-items: center; gap: 0.45em; font-family: var(--sc-font-display); font-weight: 700; font-size: 1.25rem; letter-spacing: -0.035em; text-decoration: none; color: var(--sc-ink); line-height: 1; }
.mark__svg { width: 1.6em; height: 1.6em; flex: none; }
.bar__links { display: flex; gap: var(--sc-5); margin: 0; padding: 0; list-style: none; }
.bar__links a { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); text-decoration: none; transition: color var(--sc-d-fast) var(--sc-ease-out); }
.bar__links a:hover, .bar__links a[aria-current="page"] { color: var(--sc-ink); }
.cta { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-sm);
  color: var(--sc-accent-ink); background: var(--pf-cta); padding: 0.7rem 1.15rem; border-radius: var(--sc-r-pill); text-decoration: none;
  box-shadow: 0 1px 0 color-mix(in oklab, #fff 18%, transparent) inset, var(--sc-e1); transition: background var(--sc-d-fast) var(--sc-ease-out), transform var(--sc-d-fast) var(--sc-ease-out); white-space: nowrap; }
.cta:hover { background: var(--pf-cobalt-deep); } .cta:active { transform: translateY(1px); }
.cta--lg { font-size: var(--sc-t-base); padding: 0.95rem 1.6rem; }
.cta--ghost { background: var(--glass); border: 1px solid var(--glass-edge); box-shadow: none; }
.cta--ghost:hover { background: color-mix(in oklab, #fff 14%, transparent); }
@media (max-width: 860px) { .bar__links { display: none; } .bar { gap: var(--sc-4); } }

/* page head: the sky plate as a low wash, fading into the canvas */
.page-head { position: relative; padding: clamp(9rem, 20vh, 13rem) 0 clamp(3rem, 6vw, 5rem); overflow: clip; isolation: isolate; }
.page-head::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, color-mix(in oklab, var(--sc-canvas) 70%, transparent) 0%, transparent 40%, var(--sc-canvas) 100%), url("assets/sky.webp") center 45% / cover no-repeat; opacity: 0.85; }
.page-head .sc-display { max-width: 16ch; }
.page-head .sc-lede { margin-top: var(--sc-5); color: var(--sc-ink-soft); max-width: 52ch; }
.page-head--center { text-align: center; }
.page-head--center .sc-display, .page-head--center .sc-lede { margin-inline: auto; }
.crumb { font-family: var(--sc-font-display); font-size: var(--sc-t-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--sc-ink-soft); margin-bottom: var(--sc-5); }
.crumb a { text-decoration: none; }

/* surfaces */
.card { background: color-mix(in oklab, var(--sc-surface) 85%, transparent); border: 1px solid var(--glass-edge); border-radius: var(--sc-r-lg); box-shadow: var(--sc-e2), var(--sc-edge); padding: clamp(1.25rem, 2.4vw, 2rem); }
.card--accent { background: linear-gradient(160deg, color-mix(in oklab, var(--sc-accent) 28%, var(--sc-surface)), var(--sc-surface)); border-color: color-mix(in oklab, var(--sc-accent) 55%, transparent); }
.grid { display: grid; gap: var(--sc-5); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid--3 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }
.section-title { max-width: 20ch; }
.section-lede { color: var(--sc-ink-soft); max-width: 60ch; margin-top: var(--sc-4); }
.eyebrow { font-family: var(--sc-font-display); font-size: var(--sc-t-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--sc-accent); margin-bottom: var(--sc-4); }
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }

/* pricing */
.plan { display: grid; gap: var(--sc-4); position: relative; min-width: 0; }
.plan__name { font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-lg); }
.plan__price { font-family: var(--sc-font-display); font-weight: 600; font-size: clamp(2.2rem, 1.1rem + 2.2vw, 3.4rem); white-space: nowrap; letter-spacing: var(--sc-track-tight); line-height: 1; }
.plan__price--text { font-size: clamp(2rem, 1rem + 1.9vw, 2.9rem); }
.plan__price small { font-size: var(--sc-t-base); color: var(--sc-ink-soft); letter-spacing: 0; font-weight: 500; }
.plan__tag { color: var(--sc-ink-soft); font-size: var(--sc-t-sm); min-height: 2.6em; }
.plan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; font-size: var(--sc-t-sm); }
.plan li { display: flex; gap: 0.6rem; align-items: flex-start; }
.plan li::before { content: ""; flex: none; width: 1rem; height: 1rem; margin-top: 0.2em; border-radius: 50%; background: color-mix(in oklab, var(--sc-accent) 30%, transparent);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><circle cx='8' cy='8' r='8' fill='black'/><path d='M4.5 8.2l2.3 2.3 4.7-4.8' stroke='white' stroke-width='1.6' fill='none'/></svg>") center/contain no-repeat; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><circle cx='8' cy='8' r='8' fill='black'/><path d='M4.5 8.2l2.3 2.3 4.7-4.8' stroke='white' stroke-width='1.6' fill='none'/></svg>") center/contain no-repeat; background: var(--sc-accent); }
.plan__badge { position: absolute; top: -0.8rem; left: 50%; translate: -50% 0; font-family: var(--sc-font-display); font-size: var(--sc-t-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sc-accent-ink); background: var(--pf-cta); padding: 0.35rem 0.8rem; border-radius: var(--sc-r-pill); }
.plan .cta { justify-content: center; margin-top: var(--sc-2); }
.packs { display: flex; flex-wrap: wrap; gap: var(--sc-4); }
.pack { flex: 1 1 12rem; display: flex; justify-content: space-between; align-items: baseline; gap: var(--sc-4); padding: 1rem 1.25rem; border-radius: var(--sc-r-md); background: var(--glass); border: 1px solid var(--glass-edge); font-family: var(--sc-font-display); }
.pack b { font-weight: 600; } .pack span { color: var(--sc-ink-soft); }
.compare { width: 100%; border-collapse: collapse; font-size: var(--sc-t-sm); }
.compare th, .compare td { padding: 0.9rem 1rem; text-align: left; border-bottom: 1px solid var(--sc-hairline); vertical-align: top; }
.compare th { font-family: var(--sc-font-display); font-weight: 600; color: var(--sc-ink); }
.compare td { color: var(--sc-ink-soft); } .compare td:first-child { color: var(--sc-ink); }
.compare thead th { border-bottom: 1px solid var(--sc-hairline-strong); }
.compare .yes { color: var(--sc-accent); font-weight: 700; }
.table-wrap { overflow-x: auto; }

/* faq */
.faq { display: grid; gap: 0.5rem; max-width: 52rem; }
.faq details { border: 1px solid var(--glass-edge); border-radius: var(--sc-r-md); background: color-mix(in oklab, var(--sc-surface) 70%, transparent); }
.faq summary { cursor: pointer; padding: 1.1rem 1.25rem; font-family: var(--sc-font-display); font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--sc-ink-soft); font-weight: 400; }
.faq details[open] summary::after { content: "–"; }
.faq .a { padding: 0 1.25rem 1.2rem; color: var(--sc-ink-soft); max-width: 64ch; line-height: 1.65; }
.faq .a a { color: var(--sc-ink); }

/* steps + features */
.steps { counter-reset: step; display: grid; gap: var(--sc-5); }
.step { display: grid; grid-template-columns: 3rem 1fr; gap: var(--sc-4); align-items: start; }
.step::before { counter-increment: step; content: counter(step, decimal-leading-zero); font-family: var(--sc-font-display); font-size: var(--sc-t-xl); color: var(--sc-accent); line-height: 1; }
.step h3 { margin: 0 0 0.35rem; font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-lg); }
.step p { margin: 0; color: var(--sc-ink-soft); }
.feature h3 { margin: 0 0 0.5rem; font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-lg); }
.feature p { margin: 0; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); line-height: 1.6; }
.feature a { color: var(--sc-ink); }
.stat { display: grid; gap: 0.25rem; }
.stat b { font-family: var(--sc-font-display); font-size: var(--sc-t-2xl); font-weight: 600; letter-spacing: var(--sc-track-tight); line-height: 1; }
.stat span { color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }

/* prose (legal, about) */
.prose { max-width: 66ch; color: var(--sc-ink-soft); }
.prose h2 { font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-xl); color: var(--sc-ink); letter-spacing: var(--sc-track-snug); margin: var(--sc-8) 0 var(--sc-4); }
.prose h3 { font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-lg); color: var(--sc-ink); margin: var(--sc-6) 0 var(--sc-3); }
.prose p, .prose li { line-height: 1.7; } .prose p { margin: 0 0 var(--sc-4); }
.prose ul, .prose ol { padding-left: 1.2rem; margin: 0 0 var(--sc-4); } .prose li { margin-bottom: 0.4rem; }
.prose a { color: var(--sc-ink); } .prose strong { color: var(--sc-ink); }
.prose table { width: 100%; border-collapse: collapse; margin: 0 0 var(--sc-5); font-size: var(--sc-t-sm); }
.prose th, .prose td { text-align: left; padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--sc-hairline); vertical-align: top; }
.prose th { color: var(--sc-ink); font-family: var(--sc-font-display); font-weight: 600; }
.prose .meta { font-family: var(--sc-font-display); font-size: var(--sc-t-xs); letter-spacing: 0.06em; text-transform: uppercase; }
.toc { position: sticky; top: 6rem; display: grid; gap: 0.4rem; font-size: var(--sc-t-sm); }
.toc a { color: var(--sc-ink-soft); text-decoration: none; } .toc a:hover { color: var(--sc-ink); }

/* closing band */
.band { position: relative; overflow: clip; isolation: isolate; border-radius: var(--sc-r-lg); padding: clamp(2.5rem, 6vw, 5rem); text-align: center; border: 1px solid var(--glass-edge); box-shadow: var(--sc-e3), var(--sc-edge); }
.band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, color-mix(in oklab, var(--sc-canvas) 40%, transparent), color-mix(in oklab, var(--sc-canvas) 78%, transparent)), url("assets/sky.webp") center 70% / cover no-repeat; }
.band .sc-display { margin-inline: auto; max-width: 16ch; }
.band .sc-body { margin: var(--sc-4) auto 0; }
.band .cta { margin-top: var(--sc-6); }

/* footer */
.foot { display: flex; justify-content: space-between; align-items: center; gap: var(--sc-4); padding: var(--sc-7) var(--sc-gutter) var(--sc-6); font-size: var(--sc-t-xs); color: var(--sc-ink-soft); flex-wrap: wrap; border-top: 1px solid var(--sc-hairline); margin-top: var(--sc-10); }
.foot a { text-decoration: none; } .foot a:hover { color: var(--sc-ink); }
.foot nav { display: flex; gap: var(--sc-5); flex-wrap: wrap; }
.sc-section { padding-block: clamp(3rem, 7vw, 6rem); }
@media (max-width: 860px) {
  .toc { position: static; display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; padding-bottom: var(--sc-5); border-bottom: 1px solid var(--sc-hairline); margin-bottom: var(--sc-5); }
  .page-head { padding-top: clamp(7rem, 18vh, 10rem); }
  .plan__price { font-size: var(--sc-t-2xl); }
}