/* =========================================================================
Scalendar — Marketing site stylesheet
Single file. Flat, single-color system: one brand purple, neutral inks,
white + light-gray surfaces. Vanilla CSS, no preprocessor.
========================================================================= */
/* Fonts are loaded via in each page's to keep them off the
critical CSS path. See the preconnect + stylesheet links there. */
/* ----- Tokens ----------------------------------------------------------- */
:root {
/* Brand — the only color in the system */
--sc-primary: #7C3AED;
--sc-primary-hover: #6D28D9;
--sc-primary-press: #5B21B6;
--sc-primary-soft: #F5F1FF;
--sc-primary-ink: #2E1065;
--sc-primary-deep: #3B1284; /* dark bands (quote / CTA) */
/* Neutrals */
--sc-bg: #FFFFFF;
--sc-bg-alt: #F8F8F9;
--sc-ink: #1D1C1D;
--sc-ink-soft: #454245;
--sc-ink-mute: #6F6C72;
--sc-line: #E2E1E5;
--sc-line-soft: #EFEEF1;
--sc-line-strong: #C9C7CE;
/* Type */
--font-sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
--font-display: var(--font-sans);
--font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
/* Motion */
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--dur-fast: 140ms;
--dur-base: 220ms;
/* Shape */
--radius-sm: 8px;
--radius-md: 12px;
/* Layout */
--container: 1200px;
--container-wide: 1320px;
--container-narrow: 760px;
}
/* ----- Reset & base ----------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
font-family: var(--font-sans);
color: var(--sc-ink);
background: var(--sc-bg);
font-size: 17px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img, svg { max-width: 100%; display: block; }
a { color: var(--sc-primary); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
button { font-family: inherit; cursor: pointer; }
::selection { background: var(--sc-primary-soft); color: var(--sc-primary-ink); }
/* Visually hidden but accessible to screen readers and assistive tech. */
.sc-sr-only {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Skip link for keyboard users */
.sc-skip {
position: absolute;
top: -40px;
left: 16px;
background: var(--sc-ink);
color: #fff;
padding: 8px 14px;
border-radius: var(--radius-sm);
font-weight: 700;
font-size: 14px;
z-index: 100;
transition: top var(--dur-fast) var(--ease-out);
}
.sc-skip:focus { top: 16px; text-decoration: none; }
/* ----- Layout primitives ----------------------------------------------- */
.sc-container { max-width: var(--container); margin: 0 auto; padding: 0 28px; }
.sc-container-narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 28px; }
.sc-container-wide { max-width: var(--container-wide); margin: 0 auto; padding: 0 28px; }
.sc-section { padding: 96px 0; }
.sc-section-sm { padding: 64px 0; }
/* ----- Typography ------------------------------------------------------- */
.sc-display {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(40px, 6vw, 72px);
line-height: 1.04;
letter-spacing: -0.025em;
margin: 0;
text-wrap: balance;
}
.sc-h2 {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(30px, 4vw, 46px);
line-height: 1.08;
letter-spacing: -0.02em;
margin: 0;
text-wrap: balance;
}
.sc-h3 {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(22px, 2vw, 28px);
line-height: 1.15;
letter-spacing: -0.015em;
margin: 0;
text-wrap: balance;
}
.sc-h4 {
font-weight: 700;
font-size: 18px;
line-height: 1.3;
letter-spacing: -0.005em;
margin: 0;
}
.sc-eyebrow {
font-size: 13px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--sc-primary);
display: inline-flex;
align-items: center;
gap: 8px;
white-space: nowrap;
}
.sc-lead {
font-size: 20px;
line-height: 1.5;
color: var(--sc-ink-soft);
margin: 0;
}
/* Copy rule: one italicized punchline phrase per headline — ink, not color */
.sc-italic {
font-style: italic;
font-family: var(--font-display);
font-weight: 700;
color: inherit;
}
/* ----- Buttons ----------------------------------------------------------
Flat: solid primary, outlined secondary. No offset shadows, no motion. */
.sc-btn {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 16px;
font-weight: 700;
padding: 14px 22px;
border-radius: var(--radius-sm);
border: 1px solid transparent;
transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
text-decoration: none;
white-space: nowrap;
background: transparent;
cursor: pointer;
}
.sc-btn:hover { text-decoration: none; }
.sc-btn-primary {
background: var(--sc-primary);
color: #fff;
border-color: var(--sc-primary);
}
.sc-btn-primary:hover {
background: var(--sc-primary-hover);
border-color: var(--sc-primary-hover);
color: #fff;
}
.sc-btn-primary:active { background: var(--sc-primary-press); border-color: var(--sc-primary-press); }
.sc-btn-secondary {
background: #fff;
color: var(--sc-ink);
border-color: var(--sc-ink);
}
.sc-btn-secondary:hover { background: var(--sc-bg-alt); color: var(--sc-ink); }
.sc-btn-ghost {
background: transparent;
color: var(--sc-ink);
}
.sc-btn-ghost:hover { background: var(--sc-line-soft); color: var(--sc-ink); }
.sc-btn-lg { font-size: 17px; padding: 16px 28px; }
.sc-btn-sm { font-size: 14px; padding: 9px 14px; }
.sc-btn-on-dark {
background: #fff;
color: var(--sc-primary-ink);
border-color: #fff;
}
.sc-btn-on-dark:hover { background: var(--sc-primary-soft); border-color: var(--sc-primary-soft); color: var(--sc-primary-ink); }
/* ----- Pills ------------------------------------------------------------ */
.sc-pill {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
font-weight: 700;
padding: 4px 12px;
border-radius: 999px;
background: var(--sc-primary-soft);
color: var(--sc-primary-ink);
}
/* Legacy color variants — all map to the one neutral pill now */
.sc-pill-yellow, .sc-pill-pink, .sc-pill-green, .sc-pill-cyan, .sc-pill-coral {
background: var(--sc-primary-soft);
color: var(--sc-primary-ink);
}
.sc-pill-dot { display: none; }
/* Tiny badge for feature cards (New / Soon) */
.sc-badge {
position: absolute;
top: 16px;
right: 16px;
font-size: 10px;
font-weight: 800;
padding: 3px 8px;
border-radius: 999px;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #fff;
background: var(--sc-primary);
}
.sc-badge-pro { background: var(--sc-primary); color: #fff; }
.sc-badge-soon { background: var(--sc-line); color: var(--sc-ink-mute); }
/* ----- Cards ------------------------------------------------------------ */
.sc-card {
background: #fff;
border: 1px solid var(--sc-line);
border-radius: var(--radius-md);
padding: 24px;
position: relative;
}
/* Legacy "pop" card — now identical flat card */
.sc-card-pop {
background: #fff;
border: 1px solid var(--sc-line);
border-radius: var(--radius-md);
padding: 24px;
position: relative;
}
/* ----- Screenshot placeholder -------------------------------------------
Reserved slots for real app screenshots / Slack-channel mockups.
Swap in the real image by replacing the label span with:
The frame styling drops away automatically once an ![]()
is inside. */
.sc-shot {
background: var(--sc-bg-alt);
border: 1px dashed var(--sc-line-strong);
border-radius: var(--radius-md);
aspect-ratio: 16 / 10;
display: grid;
place-items: center;
padding: 24px;
text-align: center;
color: var(--sc-ink-mute);
font-size: 14px;
font-weight: 600;
line-height: 1.5;
}
.sc-shot--hero { aspect-ratio: 16 / 9; max-width: 960px; margin: 56px auto 0; }
.sc-shot--side { aspect-ratio: 4 / 3; }
.sc-shot img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: inherit;
}
.sc-shot:has(img) {
border: 1px solid var(--sc-line);
background: none;
padding: 0;
display: block;
aspect-ratio: auto;
overflow: hidden;
}
/* ----- Header ----------------------------------------------------------- */
.sc-header {
position: sticky;
top: 0;
z-index: 40;
background: rgba(255, 255, 255, 0.96);
backdrop-filter: saturate(180%) blur(8px);
border-bottom: 1px solid var(--sc-line-soft);
}
.sc-header-inner {
display: flex;
align-items: center;
justify-content: space-between;
height: 68px;
max-width: var(--container-wide);
margin: 0 auto;
padding: 0 28px;
}
.sc-logo {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--font-display);
font-weight: 800;
font-size: 22px;
letter-spacing: -0.02em;
color: var(--sc-ink);
text-decoration: none;
}
.sc-logo:hover { text-decoration: none; color: var(--sc-ink); }
.sc-logo-text { display: inline-flex; flex-direction: column; line-height: 1.05; }
.sc-logo-tagline {
font-family: var(--font-sans);
font-size: 11.5px;
font-weight: 500;
letter-spacing: 0;
color: var(--sc-ink-mute);
margin-top: 2px;
}
@media (max-width: 720px) { .sc-logo-tagline { display: none; } }
.sc-logo-mark {
width: 32px; height: 32px;
border-radius: 9px;
background: var(--sc-primary);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
}
.sc-nav {
display: flex;
align-items: center;
gap: 4px;
}
.sc-nav > a,
.sc-nav > .sc-nav-trigger > button {
font-size: 15px;
font-weight: 600;
color: var(--sc-ink-soft);
padding: 8px 14px;
border-radius: var(--radius-sm);
white-space: nowrap;
background: transparent;
border: 0;
display: inline-flex;
align-items: center;
gap: 6px;
cursor: pointer;
font-family: inherit;
}
.sc-nav > a:hover,
.sc-nav > .sc-nav-trigger > button:hover {
background: var(--sc-line-soft);
color: var(--sc-ink);
text-decoration: none;
}
.sc-nav > a.active,
.sc-nav > .sc-nav-trigger > button.active {
color: var(--sc-primary-ink);
background: var(--sc-primary-soft);
}
.sc-header-cta {
display: flex; align-items: center; gap: 10px;
}
/* Use-cases dropdown */
.sc-nav-trigger { position: relative; }
.sc-nav-trigger > button svg.chev { transition: transform var(--dur-fast) var(--ease-out); }
.sc-nav-trigger[data-open="true"] > button svg.chev { transform: rotate(180deg); }
.sc-dropdown {
position: absolute;
top: calc(100% + 8px);
left: 0;
min-width: 320px;
background: #fff;
border: 1px solid var(--sc-line);
border-radius: var(--radius-md);
box-shadow: 0 12px 32px -12px rgba(29, 28, 29, 0.18);
padding: 8px;
z-index: 60;
opacity: 0;
visibility: hidden;
transform: translateY(-6px);
transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), visibility var(--dur-fast);
}
.sc-nav-trigger[data-open="true"] .sc-dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.sc-dropdown a {
display: block;
padding: 10px 12px;
border-radius: var(--radius-sm);
text-decoration: none;
color: var(--sc-ink);
transition: background var(--dur-fast) var(--ease-out);
}
.sc-dropdown a:hover { background: var(--sc-bg-alt); text-decoration: none; }
.sc-dropdown-title { display: block; font-weight: 700; font-size: 14.5px; margin-bottom: 2px; }
.sc-dropdown-sub { display: block; font-size: 12.5px; color: var(--sc-ink-mute); line-height: 1.35; }
.sc-dropdown-divider { height: 1px; background: var(--sc-line-soft); margin: 6px 8px; }
.sc-dropdown a.sc-dropdown-all {
display: flex; align-items: center; justify-content: space-between;
padding: 10px 12px; border-radius: var(--radius-sm);
color: var(--sc-primary); font-size: 13.5px; font-weight: 700;
text-decoration: none;
}
.sc-dropdown a.sc-dropdown-all:hover { background: var(--sc-primary-soft); text-decoration: none; }
/* Mobile nav burger */
.sc-burger {
display: none;
background: transparent;
border: 0;
padding: 8px;
border-radius: var(--radius-sm);
color: var(--sc-ink);
}
.sc-burger:hover { background: var(--sc-line-soft); }
/* ----- Hero ------------------------------------------------------------- */
.sc-hero {
position: relative;
padding: 88px 0 96px;
}
.sc-hero h1 { text-align: center; max-width: 920px; margin: 0 auto 22px; }
.sc-hero .sc-lead { text-align: center; max-width: 640px; margin: 0 auto 32px; }
.sc-hero-ctas {
display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
}
.sc-hero-trust {
display: flex; gap: 8px 24px; margin-top: 24px;
justify-content: center; align-items: center;
color: var(--sc-ink-mute); font-size: 14px; flex-wrap: wrap;
}
.sc-hero-trust > span { display: inline-flex; align-items: center; gap: 6px; }
/* ----- Slash command chip ----------------------------------------------- */
.sc-slash {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-mono);
font-size: 14px;
font-weight: 600;
color: var(--sc-ink);
background: var(--sc-bg-alt);
border: 1px solid var(--sc-line);
border-radius: var(--radius-sm);
padding: 8px 12px;
}
.sc-slash svg { color: var(--sc-primary); width: 14px; height: 14px; }
/* ----- How it works ----------------------------------------------------- */
.sc-howitworks-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.sc-step-num {
font-weight: 800;
font-size: 15px;
line-height: 1;
margin-bottom: 16px;
color: var(--sc-primary);
letter-spacing: 0.06em;
}
/* ----- Feature grid ----------------------------------------------------- */
.sc-feature-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.sc-feature-icon {
width: 44px; height: 44px;
border-radius: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 16px;
background: var(--sc-primary-soft);
color: var(--sc-primary);
}
.sc-feature-icon svg { width: 22px; height: 22px; }
/* ----- Use cases preview ----------------------------------------------- */
.sc-usecase-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.sc-usecase-card {
background: #fff;
border: 1px solid var(--sc-line);
border-radius: var(--radius-md);
padding: 22px;
text-decoration: none;
color: var(--sc-ink);
transition: border-color var(--dur-fast) var(--ease-out);
display: block;
}
.sc-usecase-card:hover {
text-decoration: none;
border-color: var(--sc-ink);
color: var(--sc-ink);
}
.sc-usecase-card .emoji { font-size: 30px; margin-bottom: 12px; }
.sc-usecase-card h3 { margin-bottom: 8px; }
.sc-usecase-card p { font-size: 14px; line-height: 1.5; color: var(--sc-ink-soft); margin: 0; }
.sc-usecase-card .more {
margin-top: 16px;
font-size: 13px;
font-weight: 700;
color: var(--sc-primary);
display: inline-flex;
align-items: center;
gap: 4px;
}
/* ----- Big quote (dark band) -------------------------------------------- */
.sc-bigquote {
background: var(--sc-primary-deep);
color: #fff;
}
.sc-bigquote h2 { color: #fff; margin-bottom: 24px; font-size: clamp(32px, 4vw, 52px); }
.sc-bigquote p { font-size: 19px; line-height: 1.5; color: rgba(255,255,255,0.85); max-width: 540px; margin: 0 auto 32px; }
.sc-bigquote .sc-italic { color: inherit; }
.sc-bigquote code { color: #fff; font-family: var(--font-mono); font-size: 0.9em; }
/* ----- Pricing teaser --------------------------------------------------- */
.sc-pricing-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin-bottom: 32px;
}
.sc-tier-mini {
background: #fff;
border: 1px solid var(--sc-line);
border-radius: var(--radius-md);
padding: 22px;
text-align: left;
}
.sc-tier-mini .label {
font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
color: var(--sc-ink-soft); margin-bottom: 8px;
}
.sc-tier-mini .price {
font-weight: 800; font-size: 36px; line-height: 1; margin-bottom: 4px;
}
.sc-tier-mini .price small { font-size: 14px; color: var(--sc-ink-mute); font-weight: 600; }
.sc-tier-mini .blurb { font-size: 14px; color: var(--sc-ink-soft); }
/* ----- FAQ -------------------------------------------------------------- */
.sc-faq-list { display: flex; flex-direction: column; gap: 12px; }
.sc-faq-item {
background: #fff;
border: 1px solid var(--sc-line);
border-radius: var(--radius-md);
overflow: hidden;
}
.sc-faq-item summary {
list-style: none;
cursor: pointer;
padding: 18px 22px;
font-weight: 700;
font-size: 16px;
color: var(--sc-ink);
display: flex;
justify-content: space-between;
align-items: center;
}
.sc-faq-item summary::-webkit-details-marker { display: none; }
.sc-faq-item summary .icon-plus,
.sc-faq-item summary .icon-minus { color: var(--sc-primary); flex-shrink: 0; }
.sc-faq-item summary .icon-minus { display: none; }
.sc-faq-item[open] summary .icon-plus { display: none; }
.sc-faq-item[open] summary .icon-minus { display: inline-block; }
.sc-faq-item .answer {
padding: 0 22px 18px;
font-size: 15px;
line-height: 1.6;
color: var(--sc-ink-soft);
}
/* ----- CTA band --------------------------------------------------------- */
.sc-ctaband {
background: var(--sc-primary-deep);
color: #fff;
padding: 64px 0;
}
.sc-ctaband-inner {
display: flex; justify-content: space-between; align-items: center; gap: 32px;
flex-wrap: wrap;
}
.sc-ctaband h2 { color: #fff; margin-bottom: 8px; }
.sc-ctaband p { font-size: 17px; line-height: 1.5; color: rgba(255,255,255,0.85); margin: 0; max-width: 560px; }
/* ----- Footer ----------------------------------------------------------- */
.sc-footer {
background: var(--sc-ink);
color: #B9B7BC;
padding: 64px 0 32px;
}
.sc-footer-grid {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
gap: 48px;
margin-bottom: 48px;
}
.sc-footer h5 {
color: #fff;
font-size: 14px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
margin: 0 0 16px;
}
.sc-footer-links a {
color: #B9B7BC;
font-size: 15px;
display: block;
padding: 4px 0;
text-decoration: none;
}
.sc-footer-links a:hover { color: #fff; text-decoration: none; }
.sc-footer .brand {
display: inline-flex; align-items: center; gap: 10px; margin-bottom: 16px;
}
.sc-footer .brand .sc-logo-mark { background: #fff; color: var(--sc-primary); }
.sc-footer .brand span { font-family: var(--font-display); font-weight: 800; font-size: 22px; color: #fff; }
.sc-footer .tagline { font-size: 15px; line-height: 1.6; color: #98959B; max-width: 280px; margin: 0; }
.sc-footer .socials { margin-top: 20px; display: flex; gap: 10px; }
.sc-footer .socials a {
width: 36px; height: 36px; border-radius: var(--radius-sm);
background: rgba(255,255,255,0.08);
display: inline-flex; align-items: center; justify-content: center;
padding: 0;
}
.sc-footer .socials a:hover { background: rgba(255,255,255,0.16); }
.sc-footer-bottom {
display: flex; justify-content: space-between; align-items: center;
padding-top: 24px;
border-top: 1px solid rgba(255,255,255,0.1);
font-size: 14px; color: #8A878D;
flex-wrap: wrap;
gap: 12px;
}
/* ----- Background helpers ----------------------------------------------
One alternate surface only. Legacy cream/mint map to the same gray. */
.sc-bg-alt { background: var(--sc-bg-alt); }
.sc-bg-cream { background: var(--sc-bg-alt); }
.sc-bg-mint { background: var(--sc-bg-alt); }
/* ==========================================================================
Responsive
========================================================================== */
@media (max-width: 1024px) {
.sc-feature-grid { grid-template-columns: repeat(2, 1fr); }
.sc-usecase-grid { grid-template-columns: repeat(2, 1fr); }
.sc-pricing-grid { grid-template-columns: repeat(2, 1fr); }
.sc-howitworks-grid { grid-template-columns: 1fr; }
.sc-footer-grid { grid-template-columns: 1.4fr 1fr 1fr; row-gap: 32px; }
}
@media (max-width: 760px) {
.sc-section { padding: 64px 0; }
.sc-hero { padding: 56px 0 64px; }
.sc-nav { display: none; }
.sc-burger { display: inline-flex; }
/* Mobile nav, expanded */
.sc-nav.is-open {
display: flex;
position: absolute;
top: 68px; left: 0; right: 0;
flex-direction: column;
align-items: stretch;
gap: 0;
background: #fff;
border-bottom: 1px solid var(--sc-line);
padding: 12px 16px 16px;
box-shadow: 0 12px 24px -12px rgba(29,28,29,0.15);
}
.sc-nav.is-open > a,
.sc-nav.is-open > .sc-nav-trigger > button { width: 100%; justify-content: space-between; }
.sc-nav.is-open .sc-dropdown {
position: static;
box-shadow: none;
border: 0;
padding: 0 0 8px;
opacity: 1; visibility: visible; transform: none;
min-width: 0;
}
.sc-header-cta .sc-btn-ghost { display: none; }
.sc-feature-grid { grid-template-columns: 1fr; }
.sc-usecase-grid { grid-template-columns: 1fr; }
.sc-pricing-grid { grid-template-columns: 1fr; }
.sc-footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
.sc-footer-bottom { flex-direction: column; align-items: flex-start; }
.sc-shot--hero { margin-top: 40px; }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.001ms !important;
transition-duration: 0.001ms !important;
}
html { scroll-behavior: auto; }
}
/* ==========================================================================
Subpage shared patterns
========================================================================== */
/* ----- Page hero (subpages) -------------------------------------------- */
.sc-page-hero {
position: relative;
padding: 88px 0 64px;
border-bottom: 1px solid var(--sc-line-soft);
}
.sc-page-hero.cream { background: var(--sc-bg); }
.sc-page-hero-inner {
text-align: center;
max-width: var(--container-narrow);
margin: 0 auto;
padding: 0 28px;
}
.sc-page-hero h1.sc-display { font-size: clamp(40px, 5vw, 58px); margin-bottom: 18px; }
.sc-page-hero .sc-lead { max-width: 580px; margin: 0 auto 24px; }
.sc-page-hero .sc-eyebrow { justify-content: center; display: inline-flex; margin-bottom: 16px; }
/* ----- Feature row (alternating two-col) ------------------------------- */
.sc-feature-row { padding: 88px 0; }
.sc-feature-row.alt { background: var(--sc-bg-alt); }
.sc-feature-row-inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
align-items: center;
}
.sc-feature-row.reverse .sc-feature-row-text { order: 2; }
.sc-feature-row.reverse .sc-feature-row-art { order: 1; }
.sc-feature-row-art { position: relative; }
.sc-feat-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.sc-feat-list li {
display: flex; gap: 10px; align-items: flex-start;
font-size: 15.5px; line-height: 1.5; color: var(--sc-ink-soft);
}
.sc-feat-list strong { color: var(--sc-ink); }
.sc-feat-check {
width: 22px; height: 22px; border-radius: 999px;
flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
margin-top: 1px; color: #fff; background: var(--sc-primary);
}
/* ----- Pricing tiers (full) -------------------------------------------- */
.sc-tier-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
align-items: stretch;
}
.sc-tier {
background: #fff;
border: 1px solid var(--sc-line);
border-radius: var(--radius-md);
padding: 28px;
position: relative;
display: flex;
flex-direction: column;
}
.sc-tier.popular { border: 2px solid var(--sc-primary); }
.sc-tier-label {
font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em;
margin-bottom: 10px;
color: var(--sc-ink-soft);
}
.sc-tier-price { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-bottom: 6px; }
.sc-tier-price .num {
font-family: var(--font-display); font-weight: 800; font-size: 44px; line-height: 1;
}
.sc-tier-price .per { font-size: 14px; font-weight: 500; color: var(--sc-ink-soft); }
.sc-tier-sub { font-size: 12px; color: var(--sc-ink-mute); margin-bottom: 14px; }
.sc-tier-blurb { font-size: 14px; line-height: 1.5; color: var(--sc-ink-soft); margin: 0 0 20px; min-height: 42px; }
.sc-tier-cta {
display: flex; justify-content: center; align-items: center; gap: 6px;
background: transparent; color: var(--sc-ink);
border: 1px solid var(--sc-ink);
border-radius: var(--radius-sm); padding: 12px 18px;
font-weight: 700; font-size: 15px; text-decoration: none;
margin-bottom: 24px;
transition: background var(--dur-fast) var(--ease-out);
}
.sc-tier-cta:hover { background: var(--sc-bg-alt); color: var(--sc-ink); text-decoration: none; }
.sc-tier.popular .sc-tier-cta {
background: var(--sc-primary); color: #fff;
border: 1px solid var(--sc-primary);
}
.sc-tier.popular .sc-tier-cta:hover {
background: var(--sc-primary-hover);
border-color: var(--sc-primary-hover);
color: #fff;
}
.sc-tier-popular-pill {
position: absolute; top: -14px; left: 50%;
transform: translateX(-50%);
background: var(--sc-primary); color: #fff;
padding: 5px 16px; border-radius: 999px;
font-size: 12px; font-weight: 800;
text-transform: uppercase; letter-spacing: 0.08em;
white-space: nowrap;
}
.sc-tier-feats { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; flex-grow: 1; }
.sc-tier-feats li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.45; }
.sc-tier-feats li.no { color: var(--sc-ink-mute); }
.sc-tier-feat-dot {
width: 18px; height: 18px; border-radius: 999px; flex-shrink: 0;
display: inline-flex; align-items: center; justify-content: center;
margin-top: 1px;
}
.sc-tier-feat-dot.yes { color: #fff; background: var(--sc-primary); }
.sc-tier-feat-dot.no { background: var(--sc-line); color: var(--sc-ink-mute); }
/* ----- Compare table --------------------------------------------------- */
.sc-compare-wrap {
background: #fff;
border: 1px solid var(--sc-line);
border-radius: var(--radius-md);
overflow: hidden;
overflow-x: auto;
}
.sc-compare { width: 100%; border-collapse: collapse; font-size: 14px; }
.sc-compare thead tr { background: var(--sc-bg-alt); }
.sc-compare th:first-child {
text-align: left; padding: 16px 20px; font-weight: 700; font-size: 13px;
color: var(--sc-ink-mute); text-transform: uppercase; letter-spacing: 0.06em;
}
.sc-compare th {
padding: 16px 12px; font-family: var(--font-display); font-size: 18px;
color: var(--sc-ink); text-align: center;
}
.sc-compare tbody tr { border-top: 1px solid var(--sc-line-soft); }
.sc-compare td:first-child { padding: 14px 20px; text-align: left; font-weight: 600; color: var(--sc-ink); }
.sc-compare td { padding: 14px 12px; text-align: center; color: var(--sc-ink); }
.sc-compare td.dash { color: var(--sc-ink-mute); }
.sc-compare td.yes { color: var(--sc-primary); font-weight: 800; }
/* ----- Pricing-FAQ simple Q-A cards ------------------------------------ */
.sc-qa-card {
background: #fff; border: 1px solid var(--sc-line); border-radius: var(--radius-md); padding: 20px;
}
.sc-qa-card .q { font-weight: 700; font-size: 16px; color: var(--sc-ink); margin: 0 0 8px; }
.sc-qa-card .a { font-size: 15px; line-height: 1.55; color: var(--sc-ink-soft); margin: 0; }
/* ----- Docs ------------------------------------------------------------- */
.sc-docs-grid { display: grid; grid-template-columns: 240px 1fr; gap: 56px; }
.sc-docs-nav { position: sticky; top: 88px; align-self: start; }
.sc-docs-nav h5 {
font-size: 12px; font-weight: 800; letter-spacing: 0.08em;
text-transform: uppercase; color: var(--sc-ink-mute);
margin: 24px 0 10px;
}
.sc-docs-nav h5:first-child { margin-top: 0; }
.sc-docs-nav a {
display: block; padding: 6px 10px; border-radius: var(--radius-sm);
font-size: 14.5px; font-weight: 500; color: var(--sc-ink-soft);
text-decoration: none;
}
.sc-docs-nav a:hover { background: var(--sc-line-soft); color: var(--sc-ink); text-decoration: none; }
.sc-docs-content h2 {
font-family: var(--font-display); font-weight: 700;
font-size: 36px; line-height: 1.1; letter-spacing: -0.02em;
margin: 56px 0 18px; scroll-margin-top: 100px;
}
.sc-docs-content h2:first-child { margin-top: 0; }
.sc-docs-content h3 {
font-family: var(--font-sans); font-weight: 700;
font-size: 19px; margin: 32px 0 10px; scroll-margin-top: 100px;
}
.sc-docs-content p {
font-size: 16px; line-height: 1.65; color: var(--sc-ink-soft);
margin: 0 0 14px;
}
.sc-docs-content ul, .sc-docs-content ol {
font-size: 16px; line-height: 1.7; color: var(--sc-ink-soft);
padding-left: 24px; margin: 0 0 14px;
}
.sc-docs-content code {
font-family: var(--font-mono); font-size: 0.9em;
background: var(--sc-primary-soft); color: var(--sc-primary-ink);
padding: 1px 6px; border-radius: 4px;
}
.sc-docs-content strong { color: var(--sc-ink); }
.sc-docs-callout {
background: var(--sc-primary-soft); border: 1px solid var(--sc-primary);
border-radius: var(--radius-md); padding: 16px 18px; margin: 20px 0;
display: flex; gap: 12px;
}
.sc-docs-callout-icon {
width: 28px; height: 28px; border-radius: var(--radius-sm);
background: var(--sc-primary); color: #fff; flex-shrink: 0;
display: inline-flex; align-items: center; justify-content: center;
}
.sc-cmd-table {
width: 100%; border-collapse: collapse; margin: 16px 0;
background: #fff; border: 1px solid var(--sc-line);
border-radius: var(--radius-md); overflow: hidden;
}
.sc-cmd-table th, .sc-cmd-table td {
text-align: left; padding: 12px 16px;
border-top: 1px solid var(--sc-line-soft);
font-size: 14.5px;
}
.sc-cmd-table th {
background: var(--sc-bg-alt); border-top: 0;
font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em;
color: var(--sc-ink-mute);
}
.sc-cmd-table code {
background: transparent; padding: 0;
color: var(--sc-primary); font-weight: 600;
}
/* ----- Changelog ------------------------------------------------------- */
.sc-changelog { position: relative; padding-left: 32px; border-left: 1px solid var(--sc-line); }
.sc-release { margin-bottom: 56px; position: relative; }
.sc-release-dot {
position: absolute; left: -42px; top: 4px;
width: 20px; height: 20px; border-radius: 999px;
background: var(--sc-primary);
border: 3px solid var(--sc-bg);
box-shadow: 0 0 0 1px var(--sc-line);
}
.sc-release-dot.minor { background: var(--sc-line-strong); }
.sc-release-dot.patch { background: var(--sc-line); }
.sc-release-meta {
display: flex; align-items: center; gap: 10px;
margin-bottom: 10px; flex-wrap: wrap;
}
.sc-release-ver {
font-family: var(--font-mono); font-size: 14px; font-weight: 700;
background: var(--sc-primary); color: #fff;
padding: 4px 10px; border-radius: 999px;
}
.sc-release-ver.minor { background: var(--sc-primary-soft); color: var(--sc-primary-ink); }
.sc-release-ver.patch { background: var(--sc-line); color: var(--sc-ink); }
.sc-release-tone {
font-size: 12px; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.06em; color: var(--sc-ink-mute);
}
.sc-release-date { font-size: 14px; color: var(--sc-ink-mute); }
.sc-release-title { font-size: 26px; margin: 0 0 18px; }
.sc-release-section { padding: 18px; }
.sc-release-kind {
display: inline-flex; align-items: center; gap: 6px;
font-size: 12px; font-weight: 800; text-transform: uppercase;
letter-spacing: 0.06em; margin-bottom: 10px;
}
.sc-release-kind.new { color: var(--sc-primary); }
.sc-release-kind.improved { color: var(--sc-ink-soft); }
.sc-release-kind.fixed { color: var(--sc-ink-mute); }
.sc-release-list {
margin: 0; padding-left: 18px;
display: flex; flex-direction: column; gap: 6px;
font-size: 15.5px; line-height: 1.55; color: var(--sc-ink-soft);
}
/* ----- Legal pages ----------------------------------------------------- */
.sc-legal-tabs {
display: flex; gap: 4px; padding: 4px;
background: var(--sc-bg-alt); border-radius: var(--radius-md);
border: 1px solid var(--sc-line);
}
.sc-legal-tabs a {
flex: 1; padding: 10px 16px; border-radius: var(--radius-sm);
text-align: center; font-size: 14.5px; font-weight: 700;
color: var(--sc-ink-soft); text-decoration: none;
}
.sc-legal-tabs a:hover { color: var(--sc-ink); text-decoration: none; }
.sc-legal-tabs a.active {
background: #fff; color: var(--sc-ink);
box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}
.sc-legal h3 {
font-weight: 700; font-size: 17px;
margin: 26px 0 8px; color: var(--sc-ink);
}
.sc-legal p, .sc-legal li {
font-size: 15.5px; line-height: 1.7;
color: var(--sc-ink-soft); margin: 0 0 12px;
}
.sc-legal ul { padding-left: 22px; margin: 0 0 12px; }
.sc-legal strong { color: var(--sc-ink); }
.sc-legal code {
font-family: var(--font-mono);
background: var(--sc-primary-soft); color: var(--sc-primary-ink);
padding: 1px 6px; border-radius: 4px; font-size: 0.9em;
}
.sc-legal-eff { color: var(--sc-ink-mute); font-size: 14px; margin: 0 0 16px; }
/* ----- Use-case detail page ------------------------------------------- */
.sc-uc-hero { padding: 80px 0 64px; }
.sc-uc-hero-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 56px;
align-items: center;
}
.sc-uc-crumbs {
display: inline-flex; align-items: center; gap: 8px;
margin-bottom: 18px; font-size: 13px; font-weight: 600;
color: var(--sc-ink-soft);
}
.sc-uc-crumbs a { color: var(--sc-ink-soft); text-decoration: none; }
.sc-uc-crumbs a:hover { color: var(--sc-ink); }
.sc-uc-pain-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: stretch;
}
.sc-uc-pain {
background: #fff; border: 1px solid var(--sc-line);
border-radius: var(--radius-md); padding: 32px;
}
.sc-uc-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.sc-uc-list li {
display: flex; gap: 12px; align-items: flex-start;
font-size: 15px; line-height: 1.5; color: var(--sc-ink-soft);
}
.sc-uc-x {
width: 22px; height: 22px; border-radius: 999px;
background: var(--sc-line-soft); color: var(--sc-ink-mute);
flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
margin-top: 1px; font-size: 13px; font-weight: 800;
}
.sc-uc-check {
width: 22px; height: 22px; border-radius: 999px; color: #fff;
background: var(--sc-primary);
flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
margin-top: 1px;
}
.sc-uc-solution {
background: #fff; border: 2px solid var(--sc-primary);
border-radius: var(--radius-md); padding: 32px;
}
.sc-uc-solution-lead {
font-size: 17px; line-height: 1.5; color: var(--sc-ink);
font-weight: 600; margin: 0 0 18px;
}
.sc-uc-ritual-grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 20px;
}
.sc-uc-ritual-icon {
width: 40px; height: 40px; border-radius: 10px;
display: inline-flex; align-items: center; justify-content: center;
margin-bottom: 14px; font-size: 20px;
background: var(--sc-primary-soft);
}
.sc-uc-other-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.sc-uc-other-card {
border: 1px solid var(--sc-line); border-radius: var(--radius-md);
padding: 22px; text-decoration: none; color: var(--sc-ink);
background: #fff;
transition: border-color var(--dur-fast) var(--ease-out);
display: block;
}
.sc-uc-other-card:hover {
border-color: var(--sc-ink);
text-decoration: none; color: var(--sc-ink);
}
/* ----- Install step cards ---------------------------------------------- */
.sc-step-card { background: #fff; }
.sc-step-num-big {
font-family: var(--font-display); font-weight: 800;
font-size: 40px; line-height: 1; margin-bottom: 14px;
color: var(--sc-primary);
}
/* ----- Scope row card ------------------------------------------------- */
.sc-scope { display: flex; align-items: flex-start; gap: 16px; padding: 18px; }
.sc-scope-icon {
width: 38px; height: 38px; border-radius: 10px;
background: var(--sc-primary-soft); color: var(--sc-primary);
flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
}
.sc-scope code {
background: transparent; padding: 0;
color: var(--sc-primary); font-weight: 700; font-size: 14px;
}
.sc-scope .desc {
font-size: 15px; color: var(--sc-ink-soft);
line-height: 1.5; margin-top: 2px;
}
/* ----- Pricing controls (size input + billing toggle) ------------------ */
.sc-section-tight { padding-top: 56px; padding-bottom: 0; }
.sc-section-tight-top { padding-top: 32px; }
.sc-price-controls {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 18px;
flex-wrap: wrap;
}
.sc-size-control {
display: inline-flex;
align-items: center;
gap: 12px;
min-height: 56px;
box-sizing: border-box;
background: #fff;
border: 1px solid var(--sc-line);
border-radius: var(--radius-md);
padding: 6px 14px;
}
.sc-size-label {
font-size: 13px;
font-weight: 700;
color: var(--sc-ink-soft);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.sc-size-input-wrap {
display: inline-flex;
align-items: baseline;
gap: 6px;
}
.sc-size-input-wrap input {
width: 70px;
padding: 8px 10px;
font-family: var(--font-display);
font-size: 18px;
font-weight: 800;
color: var(--sc-ink);
border: 1px solid var(--sc-line);
border-radius: var(--radius-sm);
background: #fff;
text-align: center;
appearance: textfield;
-moz-appearance: textfield;
}
.sc-size-input-wrap input:focus {
outline: none;
border-color: var(--sc-primary);
box-shadow: 0 0 0 3px var(--sc-primary-soft);
}
.sc-size-input-wrap input::-webkit-outer-spin-button,
.sc-size-input-wrap input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sc-size-unit {
font-size: 14px;
font-weight: 600;
color: var(--sc-ink-soft);
}
.sc-billing-toggle {
display: inline-flex;
align-items: center;
min-height: 56px;
box-sizing: border-box;
background: #fff;
border: 1px solid var(--sc-line);
border-radius: var(--radius-md);
padding: 4px;
}
.sc-billing-opt {
display: inline-flex;
align-items: center;
gap: 8px;
background: transparent;
border: none;
border-radius: var(--radius-sm);
padding: 9px 16px;
font-family: inherit;
font-size: 14px;
font-weight: 700;
color: var(--sc-ink-soft);
cursor: pointer;
transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.sc-billing-opt:hover { color: var(--sc-ink); }
.sc-billing-opt.is-active {
background: var(--sc-primary);
color: #fff;
}
.sc-billing-save {
display: inline-block;
padding: 2px 8px;
border-radius: 999px;
background: var(--sc-primary-soft);
color: var(--sc-primary-ink);
font-size: 11px;
font-weight: 800;
letter-spacing: 0.02em;
}
.sc-billing-opt.is-active .sc-billing-save {
background: rgba(255,255,255,0.2);
color: #fff;
}
/* 3-tier override of the default 4-column grid */
.sc-tier-grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 760px) {
.sc-price-controls { justify-content: center; gap: 14px; }
.sc-section-tight { padding-top: 32px; }
.sc-section-tight-top { padding-top: 24px; }
}
/* ----- Section helpers (subpages) ------------------------------------ */
.sc-section-header { text-align: center; margin-bottom: 48px; }
.sc-section-header .sc-eyebrow { justify-content: center; display: inline-flex; margin-bottom: 14px; }
/* ----- Responsive overrides for subpages ------------------------------ */
@media (max-width: 900px) {
.sc-feature-row-inner { grid-template-columns: 1fr; gap: 32px; }
.sc-feature-row.reverse .sc-feature-row-text,
.sc-feature-row.reverse .sc-feature-row-art { order: 0; }
.sc-uc-hero-grid { grid-template-columns: 1fr; gap: 36px; }
.sc-uc-pain-grid { grid-template-columns: 1fr; }
.sc-uc-other-grid { grid-template-columns: 1fr 1fr; }
.sc-docs-grid { grid-template-columns: 1fr; gap: 32px; }
.sc-docs-nav { position: static; }
.sc-tier-grid { grid-template-columns: 1fr 1fr; }
.sc-tier-grid-3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
.sc-tier-grid { grid-template-columns: 1fr; }
.sc-tier-grid-3 { grid-template-columns: 1fr; }
.sc-uc-other-grid { grid-template-columns: 1fr; }
}