/* styles.ssg.css — net-new styles for the SSG-rendered marketing pages (the "ways to start" ladder). Loaded after styles.home.css so it inherits the .ah token set. Kept small and self-contained on purpose. */ /* ── Apple-white enforcement ──────────────────────────────────────────────── The migrated pages reuse some legacy Branding-2.0 classes (.product-hero, .team-page, .research-page, .cicd-page, …) that ground themselves in var(--cream) beige and accent with var(--forest) green. Rather than chase ~50 rules, remap those brand tokens to the Apple-white palette AT THE .ah SCOPE: every descendant that resolves var(--cream)/var(--forest)/… now gets white/ink/blue. This file loads only on SSG pages, so blog / vs / 1217 keep their own grounds. All SSG content sits inside .ah, so the scope is total. */ .ah { --cream: #fff; /* page ground → white */ --cream-2: var(--ah-tint, #f5f5f7); /* subtle panel → Apple light gray */ --cream-3: #ececf0; --sekura-surface: #fff; --forest: var(--ah-ink, #1d1d1f); /* dark accents/text → ink */ --forest-2: var(--ah-ink, #1d1d1f); --forest-deep: var(--ah-ink, #1d1d1f); --sekura-primary: var(--ah-ink, #1d1d1f); --ink: var(--ah-ink, #1d1d1f); --ink-2: var(--ah-ink, #1d1d1f); --muted: var(--ah-ink-2, #6e6e73); --line: var(--ah-hair, #d2d2d7); --coral: var(--ah-blue, #0071e3); /* warm brand accents → Apple blue */ --sekura-accent: var(--ah-blue, #0071e3); --orange: var(--ah-blue, #0071e3); background: var(--ah-ground, #fff); min-height: 100vh; /* cover the cream fully */ } /* Heading italic accents read cleaner as ink than as a colored word here. */ .ah .product-hero-h1 em, .ah .customers-hero-h1 em, .ah .integrations-heading em, .ah .early-adopters-heading em, .ah .trust-heading em { color: var(--ah-ink, #1d1d1f); } .ssg-ladder-section { padding: 96px 0; border-top: 1px solid var(--ah-hair-2); } .ssg-ladder-sub { max-width: 46ch; } .ssg-ladder { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 40px; } @media (max-width: 1000px) { .ssg-ladder { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .ssg-ladder { grid-template-columns: 1fr; } } .ssg-step { position: relative; display: flex; flex-direction: column; padding: 28px 24px; background: var(--ah-ground); border: 1px solid var(--ah-hair); border-radius: 18px; transition: border-color .15s ease, transform .15s ease; } .ssg-step:hover { border-color: var(--ah-ink-3); } .ssg-step.is-featured { border-color: var(--ah-blue); box-shadow: 0 0 0 1px var(--ah-blue) inset; } .ssg-step-mark { position: absolute; top: -11px; left: 24px; background: var(--ah-blue); color: #fff; font-size: 11px; font-weight: 600; letter-spacing: .02em; padding: 4px 10px; border-radius: 9999px; } .ssg-step-name { font-size: 17px; font-weight: 600; color: var(--ah-ink); margin: 0 0 6px; } .ssg-step-price { font-size: 30px; font-weight: 600; letter-spacing: -0.02em; color: var(--ah-ink); margin: 0 0 4px; } .ssg-step-per { font-size: 15px; font-weight: 400; color: var(--ah-ink-3); } .ssg-step-who { font-size: 14px; line-height: 1.5; color: var(--ah-ink-2); margin: 8px 0 22px; flex: 1; } .ssg-step-cta { display: inline-flex; align-items: center; align-self: flex-start; font-size: 15px; font-weight: 500; color: var(--ah-blue); text-decoration: none; } .ssg-step-cta:hover { text-decoration: underline; } /* Hero proof metrics — a quiet row of real numbers under the logos. */ .ah-proof-metrics { display: flex; flex-wrap: wrap; justify-content: center; gap: 40px; margin: 28px 0 0; padding: 0; list-style: none; } .ah-proof-metric { display: flex; flex-direction: column; align-items: center; gap: 2px; } .ah-proof-value { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; color: var(--ah-ink); } .ah-proof-metric-label { font-size: 12px; color: var(--ah-ink-3); text-transform: uppercase; letter-spacing: 0.04em; } /* Secondary hero link ("see pricing"). */ .ssg-hero-secondary { display: inline-block; margin-top: 14px; font-size: 15px; color: var(--ah-blue); text-decoration: none; } .ssg-hero-secondary:hover { text-decoration: underline; } /* Phase-9 SSG page sections (product pipeline). Reuses the .ah token set so it matches the home/pricing aesthetic; hairlines, ink, generous whitespace. */ .ssg-section { padding: 72px 0; border-top: 1px solid var(--ah-hair-2); } .ssg-pipeline { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 0; } .ssg-phase { display: grid; grid-template-columns: 56px 1fr; gap: 20px; padding: 24px 0; border-top: 1px solid var(--ah-hair-2); } .ssg-phase:first-child { border-top: 0; } .ssg-phase-num { font-size: 15px; font-weight: 600; color: var(--ah-ink-3); font-variant-numeric: tabular-nums; padding-top: 2px; } .ssg-phase-name { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; margin: 0; color: var(--ah-ink); } .ssg-phase-tag { margin: 3px 0 0; font-size: 14px; color: var(--ah-ink-2); } .ssg-phase-desc { margin: 10px 0 0; font-size: 15px; line-height: 1.6; color: var(--ah-ink-2); max-width: 62ch; } .ssg-phase-counter { margin: 10px 0 0; font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: 12px; color: var(--ah-ink-3); text-transform: none; letter-spacing: 0; } @media (max-width: 640px) { .ssg-phase { grid-template-columns: 40px 1fr; gap: 14px; } }