/* ============================================================================ PathKit · cream editorial instrument ---------------------------------------------------------------------------- Warm cream background, single violet accent, section-specific accent strips. Geist + Geist Mono only — no display serif. Type carries weight, illustrations carry mass. Dark mode is an OPT-IN footer toggle, not auto from prefers-color. Class-name compatibility: every legacy class still functions for /pricing, /docs, /login, /signup, /diagnose. Don't remove .layer .three-col .compare .tiers .tier .faq .docs-grid .docs-nav. ============================================================================ */ :root { /* core palette — warm cream */ --bg: #f8f7f2; --bg-alt: #f1efe6; --bg-strong: #fbfaf6; --bg-card: #ffffff; --bg-deep: #ebe8dc; --fg: #0c1419; --fg-soft: #1c2731; --muted: #5a6470; --muted-soft: #8a949d; --border: rgba(12, 12, 12, 0.10); --border-soft: rgba(12, 12, 12, 0.05); --border-strong: rgba(12, 12, 12, 0.18); /* signature color — VIOLET. The one PathKit color. */ --accent: #2563eb; --accent-hover: #1d4ed8; --accent-soft: rgba(37, 99, 235, 0.10); --accent-line: rgba(37, 99, 235, 0.28); /* per-section strip colors — used only on rule-divider strips, never in body */ --strip-problem: #dc2626; --strip-measurement:#2563eb; --strip-deeplink: #15803d; --strip-sharing: #db2777; --strip-sdks: #059669; --strip-platform: #d97706; /* code */ --code-bg: rgba(37, 99, 235, 0.08); --code-fg: #0c1419; --code-card-bg: #faf7f0; --code-card-header: #f1ecdf; --code-line-num: #b8b3a4; --c-str: #047857; --c-fn: #2563eb; --c-flag: #b45309; --c-com: #98948a; --strike: #dc2626; /* layout */ --max-w: 1180px; --shadow-card: 0 1px 0 rgba(12,12,12,0.04), 0 12px 28px -18px rgba(12,12,12,0.12); --shadow-card-hover:0 1px 0 rgba(12,12,12,0.06), 0 22px 48px -22px rgba(21, 128, 61,0.20); --shadow-window: 0 2px 0 rgba(12,12,12,0.04), 0 24px 56px -20px rgba(21, 128, 61,0.16), 0 60px 110px -50px rgba(12,12,12,0.18); --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace; } /* opt-in dark mode via data-theme="dark" on . Don't auto-flip via OS. */ :root[data-theme="dark"] { --bg: #0c1217; --bg-alt: #131210; --bg-strong: #1a1814; --bg-card: #1f1d18; --bg-deep: #08080a; --fg: #f5f5f0; --fg-soft: #cdd3da; --muted: #8a949d; --muted-soft: #5c5848; --border: rgba(245, 241, 232, 0.10); --border-soft: rgba(245, 241, 232, 0.05); --border-strong: rgba(245, 241, 232, 0.18); --accent: #8ab4ff; --accent-hover: #86efac; --accent-soft: rgba(138, 180, 255, 0.14); --accent-line: rgba(138, 180, 255, 0.30); --code-bg: rgba(74, 222, 128, 0.10); --code-fg: #86efac; --code-card-bg: #14130f; --code-card-header: #1c1a16; --code-line-num: #4d4a3f; --c-str: #a7e3a1; --c-fn: #86efac; --c-flag: #fbb78d; --c-com: #5c5848; --shadow-card: 0 1px 0 rgba(0,0,0,0.4), 0 12px 32px -16px rgba(0,0,0,0.6); --shadow-card-hover:0 1px 0 rgba(0,0,0,0.5), 0 22px 48px -22px rgba(74, 222, 128,0.30); --shadow-window: 0 2px 0 rgba(0,0,0,0.5), 0 24px 56px -20px rgba(21, 128, 61,0.40), 0 60px 110px -50px rgba(0,0,0,0.6); } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { background: var(--bg); color: var(--fg-soft); font-family: var(--font-sans); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: "ss01", "cv11"; overflow-x: hidden; } .wrap { max-width: var(--max-w); margin: 0 auto; padding: 0 28px; } /* ============================================================================ NAV ============================================================================ */ .nav { position: sticky; top: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 14px 28px; background: color-mix(in srgb, var(--bg) 80%, transparent); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border-bottom: 1px solid var(--border); } .logo { font-family: var(--font-mono); font-weight: 600; font-size: 17px; color: var(--fg); text-decoration: none; letter-spacing: -0.5px; display: inline-flex; align-items: center; gap: 9px; transition: opacity 0.15s; } .logo:hover { opacity: 0.7; } .logo-mark { flex: 0 0 auto; transform: translateY(-1px); transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); } .logo:hover .logo-mark { transform: translateY(-1px) rotate(8deg); } .logo span { color: var(--fg); } .nav nav { display: flex; gap: 24px; align-items: center; font-size: 14px; font-family: var(--font-sans); } .nav nav a { color: var(--muted); text-decoration: none; transition: color 0.15s; } .nav nav a:hover { color: var(--fg); } .navbtn { padding: 7px 14px; border-radius: 100px; border: 1px solid var(--border-strong); color: var(--fg-soft) !important; } .navbtn-primary { background: var(--fg); border-color: var(--fg); color: var(--bg) !important; } .navbtn-primary:hover { background: var(--accent); border-color: var(--accent); color: #fff !important; } .theme-toggle { background: none; border: 1px solid var(--border-strong); color: var(--muted); width: 32px; height: 32px; border-radius: 50%; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: color 0.15s, border-color 0.15s; } .theme-toggle:hover { color: var(--fg); border-color: var(--fg); } /* ============================================================================ TYPOGRAPHY ============================================================================ */ .kicker { color: var(--accent); font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 1.8px; margin-bottom: 16px; font-weight: 500; text-transform: uppercase; } h1 { font-family: var(--font-sans); font-size: clamp(40px, 6.2vw, 76px); line-height: 1.02; font-weight: 700; letter-spacing: -2px; color: var(--fg); margin-bottom: 24px; } h2 { font-family: var(--font-sans); font-size: clamp(28px, 3.8vw, 44px); line-height: 1.08; font-weight: 700; letter-spacing: -1.2px; color: var(--fg); margin-bottom: 22px; max-width: 900px; } h2.display { font-size: clamp(32px, 4.4vw, 52px); letter-spacing: -1.6px; margin-bottom: 18px; } h2.display em { font-style: normal; font-weight: 700; color: var(--accent); } h3 { font-family: var(--font-sans); font-size: 17px; font-weight: 600; color: var(--fg); margin-bottom: 10px; letter-spacing: -0.3px; } h4 { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 1.4px; margin-bottom: 14px; font-family: var(--font-mono); font-weight: 500; } p { color: var(--muted); font-size: 16px; line-height: 1.7; margin-bottom: 16px; max-width: 640px; } .lede { color: var(--fg-soft); font-size: 19px; line-height: 1.55; margin-bottom: 28px; max-width: 580px; } .display-lede { color: var(--muted); font-size: 17px; line-height: 1.6; margin-bottom: 36px; max-width: 720px; } .accent { color: var(--accent); } code { font-family: var(--font-mono); font-size: 0.88em; background: var(--code-bg); padding: 1px 6px; border-radius: 4px; color: var(--code-fg); font-weight: 500; } pre { font-family: var(--font-mono); font-size: 13px; line-height: 1.65; color: var(--fg-soft); margin: 0; font-feature-settings: "ss02", "ss03"; } /* tabular nums everywhere a number lives */ .tnum { font-variant-numeric: tabular-nums; } /* ============================================================================ HERO — three-part composition ============================================================================ */ .hero { position: relative; padding: 64px 0 24px; border-bottom: 1px solid var(--border); } .hero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: var(--bg-strong); border-bottom: 1px solid var(--border); opacity: 0.4; } :root[data-theme="dark"] .hero-bg { background: var(--bg-strong); opacity: 0.5; } .hero-wrap { position: relative; z-index: 1; max-width: var(--max-w); margin: 0 auto; padding: 0 28px; display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: start; } @media (max-width: 980px) { .hero-wrap { grid-template-columns: 1fr; gap: 40px; } } .hero-text { padding-top: 8px; } .status-bar { display: inline-flex; align-items: center; gap: 10px; padding: 5px 12px 5px 10px; border: 1px solid var(--border-strong); border-radius: 100px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 1.4px; color: var(--fg-soft); margin-bottom: 22px; background: color-mix(in srgb, var(--bg-card) 70%, transparent); } .status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c-str); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-str) 22%, transparent); animation: status-pulse 2.4s ease-in-out infinite; } @keyframes status-pulse { 0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-str) 22%, transparent); } 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--c-str) 10%, transparent); } } .status-meta { color: var(--muted); padding-left: 6px; border-left: 1px solid var(--border); margin-left: 2px; } .hero-h1 { font-size: clamp(40px, 6.2vw, 76px); line-height: 1.02; letter-spacing: -2.2px; font-weight: 700; color: var(--fg); margin-bottom: 20px; } .hero-h1 em { font-style: normal; font-weight: 700; color: var(--accent); position: relative; } .hero-lede { color: var(--fg-soft); font-size: 19px; line-height: 1.55; max-width: 480px; margin-bottom: 26px; } .cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 22px; } .platform-pills { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0 0 14px; padding: 0; } .platform-pills li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--border); border-radius: 100px; font-family: var(--font-mono); font-size: 11.5px; color: var(--fg-soft); background: color-mix(in srgb, var(--bg-card) 50%, transparent); } .platform-pills li svg { color: var(--muted); } .sub-meta { color: var(--muted); font-size: 13px; font-family: var(--font-mono); letter-spacing: 0.4px; margin-bottom: 0; } .sub-meta strong { color: var(--fg); font-weight: 600; } /* ----- HERO RIGHT: two stacked product cards ----- */ .hero-stack { display: flex; flex-direction: column; gap: 16px; position: relative; } /* JSON event window — same window-chrome treatment everywhere */ .product-window { background: var(--code-card-bg); border: 1px solid var(--border-strong); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-window); } .window-chrome { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: var(--code-card-header); border-bottom: 1px solid var(--border); font-family: var(--font-mono); font-size: 11.5px; } .chrome-dot { width: 10px; height: 10px; border-radius: 50%; } .chrome-dot.c-r { background: #ff5f57; } .chrome-dot.c-y { background: #febc2e; } .chrome-dot.c-g { background: #28c840; } .chrome-title { margin-left: 10px; color: var(--muted); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chrome-bullet { padding: 0 6px; color: var(--border-strong); } .chrome-meta { color: var(--muted-soft); } .chrome-live { display: inline-flex; align-items: center; gap: 6px; color: var(--c-str); font-weight: 500; text-transform: uppercase; letter-spacing: 1.2px; font-size: 10px; } .chrome-live .pulse { width: 6px; height: 6px; border-radius: 50%; background: var(--c-str); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-str) 22%, transparent); animation: status-pulse 1.6s ease-in-out infinite; } .payload-body { padding: 14px 18px 12px 18px; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.55; overflow-x: auto; } .payload-body .line { display: block; white-space: pre; padding: 1px 6px; margin: 0; border-radius: 4px; transition: background 0.15s; } .payload-body .line:hover { background: var(--accent-soft); } .payload-body .line.accent { background: var(--accent-soft); } .payload-body .ln { display: inline-block; width: 22px; text-align: right; color: var(--code-line-num); margin-right: 12px; user-select: none; font-size: 11px; } .payload-body .k { color: var(--c-fn); font-weight: 500; } .payload-body .s { color: var(--c-str); } .payload-body .brace, .payload-body .comma { color: var(--muted); } .payload-body .comm { color: var(--c-com); padding-left: 8px; font-style: italic; } .payload-body .grad-text { color: var(--accent); font-weight: 600; } /* Live chart card — the second piece of the hero composition */ .chart-card { background: var(--bg-card); border: 1px solid var(--border-strong); border-radius: 12px; box-shadow: var(--shadow-card); overflow: hidden; } .chart-head { padding: 14px 18px; border-bottom: 1px solid var(--border-soft); display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .chart-head h4 { margin-bottom: 0; color: var(--fg); font-size: 13px; letter-spacing: 0.4px; text-transform: none; font-weight: 600; } .chart-head .meta { color: var(--muted); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.3px; } .chart-stats { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 18px; padding: 16px 18px 12px; } .chart-stat { display: flex; flex-direction: column; gap: 4px; } .chart-stat-label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 1.2px; color: var(--muted); text-transform: uppercase; } .chart-stat-value { font-size: 24px; font-weight: 700; color: var(--fg); font-variant-numeric: tabular-nums; letter-spacing: -0.6px; line-height: 1; } .chart-stat-delta { font-family: var(--font-mono); font-size: 11px; color: var(--c-str); font-variant-numeric: tabular-nums; } .chart-stat-delta.neg { color: var(--strike); } .chart-spark { padding: 0 18px 16px; } .chart-spark svg { display: block; width: 100%; height: 56px; } .chart-foot { padding: 12px 18px; background: var(--code-card-header); border-top: 1px solid var(--border-soft); display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; font-family: var(--font-mono); font-size: 10.5px; } .chart-source { display: flex; flex-direction: column; gap: 4px; } .chart-source-name { color: var(--muted); letter-spacing: 0.3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chart-source-bar { height: 4px; border-radius: 2px; background: var(--border-soft); overflow: hidden; } .chart-source-fill { height: 100%; background: var(--accent); border-radius: 2px; } .chart-source-pct { color: var(--fg); font-weight: 600; font-variant-numeric: tabular-nums; } /* ============================================================================ BUTTONS ============================================================================ */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 100px; font-weight: 500; font-size: 15px; text-decoration: none; cursor: pointer; border: none; font-family: var(--font-sans); letter-spacing: -0.2px; transition: transform 0.08s ease, background 0.18s, border-color 0.18s, color 0.18s, box-shadow 0.18s; } .btn:active { transform: scale(0.97); } .btn-primary { background: var(--fg); color: var(--bg); box-shadow: 0 6px 20px -8px rgba(12,12,12,0.4); } .btn-primary:hover { background: var(--accent); color: #fff; box-shadow: 0 10px 28px -10px rgba(21, 128, 61,0.5); } .btn-primary .arrow { transition: transform 0.2s; } .btn-primary:hover .arrow { transform: translateX(3px); } .btn-ghost { background: transparent; color: var(--fg-soft); border: 1px solid var(--border-strong); } .btn-ghost:hover { border-color: var(--fg); color: var(--fg); } .btn.big { padding: 15px 28px; font-size: 16px; } /* ============================================================================ RULE DIVIDER — per-section accent strips ============================================================================ */ .rule { max-width: var(--max-w); margin: 0 auto; padding: 0 28px; display: flex; align-items: center; gap: 16px; height: 52px; border-bottom: 1px solid var(--border); } .rule-strip { width: 28px; height: 3px; border-radius: 2px; flex: 0 0 auto; background: var(--accent); } .rule-num { font-family: var(--font-mono); font-weight: 500; font-size: 11px; color: var(--muted); letter-spacing: 1.6px; } .rule-label { font-family: var(--font-mono); font-size: 11px; color: var(--fg); letter-spacing: 1.6px; font-weight: 600; } .rule::after { content: ''; flex: 1; height: 1px; background: var(--border-strong); } .rule.problem .rule-strip { background: var(--strip-problem); } .rule.measurement .rule-strip { background: var(--strip-measurement); } .rule.deeplink .rule-strip { background: var(--strip-deeplink); } .rule.sharing .rule-strip { background: var(--strip-sharing); } .rule.sdks .rule-strip { background: var(--strip-sdks); } .rule.platform .rule-strip { background: var(--strip-platform); } /* ============================================================================ SECTION BLOCKS ============================================================================ */ .block { padding: 80px 0 90px; } .block.alt { background: var(--bg-alt); } .center { text-align: center; } .center h2, .center .lede { margin-left: auto; margin-right: auto; } .center .sub-cta { margin-left: auto; margin-right: auto; } .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; } .two-col.text-left { grid-template-columns: 1.05fr 1fr; } @media (max-width: 880px) { .two-col, .two-col.text-left { grid-template-columns: 1fr; gap: 36px; } } .three-col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 28px; } @media (max-width: 768px) { .three-col { grid-template-columns: 1fr; } } /* LEGACY .layer — kept for /pricing and other pages */ .layer { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 24px 22px; box-shadow: var(--shadow-card); } .layer-num { color: var(--accent); font-family: var(--font-mono); font-size: 13px; font-weight: 600; margin-bottom: 10px; } .layer p { font-size: 14.5px; margin-bottom: 0; color: var(--muted); } /* ============================================================================ GAP DIAGRAM (problem section) — two stacked mini analytics panels ============================================================================ */ .gap-mock { display: flex; flex-direction: column; gap: 14px; position: relative; } .gap-panel { background: var(--bg-card); border: 1px solid var(--border-strong); border-radius: 12px; box-shadow: var(--shadow-card); overflow: hidden; } .gap-panel-head { padding: 12px 18px; border-bottom: 1px solid var(--border-soft); display: flex; align-items: center; justify-content: space-between; font-family: var(--font-mono); font-size: 11.5px; } .gap-panel-head .name { color: var(--fg); font-weight: 600; letter-spacing: 0.3px; } .gap-panel-head .status { padding: 2px 8px; border-radius: 100px; font-size: 9.5px; letter-spacing: 1.2px; } .gap-panel-head .status.bad { background: rgba(220,38,38,0.10); color: var(--strike); } .gap-panel-head .status.good { background: rgba(21, 128, 61,0.10); color: var(--accent); } .gap-panel-body { padding: 14px 18px 18px; } .gap-row { display: grid; grid-template-columns: 1.3fr 70px 60px; align-items: center; gap: 12px; padding: 6px 0; font-family: var(--font-mono); font-size: 12px; } .gap-row + .gap-row { border-top: 1px solid var(--border-soft); } .gap-row .label { color: var(--muted-soft); } .gap-row.good .label { color: var(--fg); font-weight: 500; } .gap-bar { height: 6px; border-radius: 3px; background: var(--border-soft); overflow: hidden; } .gap-bar-fill { height: 100%; border-radius: 3px; background: var(--muted-soft); } .gap-row.good .gap-bar-fill { background: var(--accent); } .gap-row.high .gap-bar-fill { background: var(--strike); } .gap-pct { text-align: right; color: var(--fg); font-weight: 600; font-variant-numeric: tabular-nums; } .gap-row.good .gap-pct { color: var(--accent); } /* ============================================================================ CASCADE — § 03 deep linking. One big focal SVG diagram. ============================================================================ */ .cascade-viz { margin: 40px 0 0; background: var(--bg-card); border: 1px solid var(--border-strong); border-radius: 16px; box-shadow: var(--shadow-card); padding: 28px 32px; position: relative; } .cascade-viz svg { display: block; width: 100%; height: auto; } .cascade-grid { display: grid; grid-template-columns: repeat(3, 1fr) auto; gap: 12px; align-items: stretch; margin-top: 12px; } @media (max-width: 880px) { .cascade-grid { grid-template-columns: 1fr; } } .cascade-card { background: var(--bg-strong); border: 1px solid var(--border); border-radius: 12px; padding: 20px 20px; position: relative; transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s; } .cascade-card:hover { transform: translateY(-2px); border-color: var(--accent-line); box-shadow: var(--shadow-card-hover); } .cascade-card .num { font-family: var(--font-mono); font-size: 11px; color: var(--muted); letter-spacing: 1.4px; margin-bottom: 8px; } .cascade-card h3 { font-size: 16px; margin-bottom: 6px; } .cascade-card p { font-size: 13.5px; line-height: 1.55; color: var(--muted); margin-bottom: 14px; } .cascade-meter { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 11px; } .cascade-meter-bar { flex: 1; height: 5px; border-radius: 3px; background: var(--border-soft); overflow: hidden; } .cascade-meter-fill { height: 100%; background: var(--accent); border-radius: 3px; } .cascade-meter-pct { color: var(--accent); font-weight: 600; font-variant-numeric: tabular-nums; } .cascade-card.final { background: var(--accent-soft); border-color: var(--accent); display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; padding: 24px 18px; } .cascade-card.final .big { font-size: 36px; font-weight: 700; color: var(--accent); letter-spacing: -1.4px; font-variant-numeric: tabular-nums; line-height: 1; } .cascade-card.final .lbl { font-family: var(--font-mono); font-size: 10.5px; color: var(--muted); letter-spacing: 1.4px; margin-top: 6px; text-transform: uppercase; } /* ============================================================================ FEATURE GRID (homepage MEASUREMENT + PLATFORM sections) ============================================================================ */ .feature-grid { display: grid; gap: 1px; margin-top: 36px; background: var(--border); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; } .feature-grid-2 { grid-template-columns: repeat(2, 1fr); } .feature-grid-3 { grid-template-columns: repeat(3, 1fr); } @media (max-width: 720px) { .feature-grid-2, .feature-grid-3 { grid-template-columns: 1fr; } } .feature { background: var(--bg-card); padding: 28px 28px; transition: background 0.2s; } .feature:hover { background: color-mix(in srgb, var(--bg-card) 90%, var(--accent) 4%); } .feature h3 { font-size: 17px; margin-bottom: 8px; } .feature p { font-size: 14.5px; line-height: 1.65; color: var(--muted); max-width: 440px; margin-bottom: 0; } .feature-icon { width: 36px; height: 36px; border-radius: 8px; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } .feature:hover .feature-icon { transform: translateY(-2px) rotate(-4deg); } .feature-icon svg { width: 20px; height: 20px; } /* ============================================================================ SHARE FAN-OUT (sharing section) ============================================================================ */ .fanout { background: var(--bg-card); border: 1px solid var(--border-strong); border-radius: 14px; padding: 22px 24px; box-shadow: var(--shadow-card); margin-bottom: 16px; } .fanout svg { display: block; width: 100%; height: auto; } .fanout-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .fanout-head h4 { margin-bottom: 0; color: var(--fg); text-transform: none; font-family: var(--font-sans); font-size: 14px; letter-spacing: -0.2px; font-weight: 600; } .fanout-head .k-factor { font-family: var(--font-mono); font-size: 11px; color: var(--muted); letter-spacing: 0.3px; } .fanout-head .k-factor strong { color: var(--accent); font-weight: 600; } .pullquote { margin-top: 22px; padding: 18px 22px 18px 22px; background: var(--accent-soft); border-left: 3px solid var(--accent); border-radius: 0 12px 12px 0; } .pq-text { font-family: var(--font-sans); font-size: 15.5px; line-height: 1.55; color: var(--fg-soft); margin-bottom: 0; } .pq-text em { font-style: normal; font-weight: 700; color: var(--accent); } /* ============================================================================ SDK GRID ============================================================================ */ .sdk-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 32px; } @media (max-width: 680px) { .sdk-grid { grid-template-columns: 1fr; } } .sdk-card { position: relative; display: grid; grid-template-columns: 48px 1fr; gap: 16px; text-decoration: none; background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 22px 24px; box-shadow: var(--shadow-card); transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s; overflow: hidden; } .sdk-card:hover { transform: translateY(-3px); border-color: var(--accent-line); box-shadow: var(--shadow-card-hover); } .sdk-platform-icon { width: 48px; height: 48px; border-radius: 10px; background: var(--bg-strong); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--fg); } .sdk-platform-icon svg { width: 24px; height: 24px; } .sdk-body { min-width: 0; } .sdk-name { color: var(--fg); font-family: var(--font-mono); font-size: 16px; font-weight: 600; margin-bottom: 2px; letter-spacing: -0.4px; } .sdk-meta { color: var(--muted); font-size: 12.5px; margin-bottom: 12px; font-family: var(--font-mono); letter-spacing: 0.3px; } .sdk-card pre { background: var(--bg-strong); padding: 10px 14px; border-radius: 8px; font-size: 12px; color: var(--code-fg); border: 1px solid var(--border-soft); overflow-x: auto; } /* ============================================================================ CTA FINAL ============================================================================ */ .cta-final { position: relative; overflow: hidden; background: var(--bg-alt); border-top: 1px solid var(--border); padding: 110px 0; text-align: center; } .cta-final::before { content: ''; position: absolute; inset: 0; z-index: 0; background: var(--accent-soft); opacity: 0.5; } .cta-final .wrap { position: relative; z-index: 1; } .cta-final .lede { color: var(--fg-soft); margin-bottom: 26px; } .cta-final .sub-cta { margin-top: 18px; font-family: var(--font-mono); font-size: 13px; color: var(--muted); letter-spacing: 0.3px; } .cta-final .sub-cta strong { color: var(--fg); font-weight: 600; } .cta-final .sub-cta a { color: var(--accent); text-decoration: none; } .cta-final .sub-cta a:hover { text-decoration: underline; } .cta-final .sub-sep { padding: 0 8px; color: var(--border-strong); } .cta-block { padding: 100px 0; text-align: center; } .cta-block h2 { margin-left: auto; margin-right: auto; } .cta-block .lede { margin-bottom: 26px; } .cta-block .sub-cta { margin-top: 16px; } .sub-cta { color: var(--muted); font-size: 14px; max-width: 640px; } .sub-cta a { color: var(--accent); text-decoration: none; } .sub-cta a:hover { text-decoration: underline; } /* ============================================================================ FOOTER ============================================================================ */ .footer { padding: 64px 0 80px; border-top: 1px solid var(--border); background: var(--bg-deep); } .footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 36px; } @media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; } } .footer a { display: block; color: var(--muted); font-size: 14px; text-decoration: none; margin-bottom: 10px; font-family: var(--font-mono); letter-spacing: 0.2px; transition: color 0.15s; } .footer a:hover { color: var(--fg); } .footer .logo { margin-bottom: 14px; font-size: 18px; } .footer p { color: var(--muted-soft); font-size: 13px; margin-bottom: 0; font-family: var(--font-mono); } /* ============================================================================ DOCS / PRICING — legacy compatibility ============================================================================ */ .docs-grid { display: grid; grid-template-columns: 200px 1fr; gap: 40px; margin-top: 32px; } @media (max-width: 768px) { .docs-grid { grid-template-columns: 1fr; } } .docs-nav { font-size: 14px; } .docs-nav h4 { margin-top: 22px; margin-bottom: 8px; } .docs-nav h4:first-child { margin-top: 0; } .docs-nav a { display: block; color: var(--muted); text-decoration: none; padding: 4px 0; transition: color 0.1s; } .docs-nav a:hover { color: var(--fg); } .docs-body section { margin-bottom: 50px; } .docs-body section:target h3 { color: var(--accent); } .docs-body pre { background: var(--code-card-bg); border: 1px solid var(--border); border-radius: 8px; padding: 16px 18px; margin: 12px 0; overflow-x: auto; } .tiers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 32px 0; } @media (max-width: 980px) { .tiers { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 540px) { .tiers { grid-template-columns: 1fr; } } .tier { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 26px 22px; display: flex; flex-direction: column; box-shadow: var(--shadow-card); transition: transform 0.2s, box-shadow 0.2s; } .tier:hover { transform: translateY(-2px); box-shadow: var(--shadow-card-hover); } .tier.featured { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--shadow-window); } .tier-badge { display: inline-block; background: var(--accent); color: #fff; font-size: 10.5px; padding: 3px 10px; border-radius: 100px; margin-bottom: 10px; align-self: flex-start; font-weight: 600; letter-spacing: 0.5px; font-family: var(--font-mono); text-transform: uppercase; } .tier-name { color: var(--fg); font-size: 14px; font-weight: 500; margin-bottom: 8px; font-family: var(--font-mono); letter-spacing: 0.4px; text-transform: uppercase; } .tier-price { color: var(--fg); font-size: 42px; font-weight: 700; margin-bottom: 4px; letter-spacing: -1.4px; } .tier-price small { font-size: 14px; color: var(--muted); font-weight: 400; } .tier-cap { color: var(--muted); font-size: 13px; margin-bottom: 18px; font-family: var(--font-mono); } .tier-list { list-style: none; margin: 0 0 22px; padding: 0; } .tier-list li { color: var(--muted); font-size: 14px; padding: 5px 0; } .tier-list li::before { content: "✓ "; color: var(--accent); font-weight: 700; } .tier .btn { margin-top: auto; text-align: center; justify-content: center; } .faq { max-width: 780px; } .faq dl { display: grid; gap: 26px; } .faq dt { color: var(--fg); font-size: 16px; font-weight: 600; margin-bottom: 6px; } .faq dd { color: var(--muted); font-size: 14.5px; line-height: 1.65; } /* code-card legacy (window-chrome treatment) */ .code-card { background: var(--code-card-bg); border: 1px solid var(--border-strong); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-window); } .code-header { background: var(--code-card-header); border-bottom: 1px solid var(--border); padding: 10px 16px; color: var(--muted); font-size: 12px; font-family: var(--font-mono); letter-spacing: 0.4px; } .code-card pre { padding: 22px; overflow-x: auto; } .c-fn { color: var(--c-fn); font-weight: 500; } .c-flag { color: var(--c-flag); } .c-str { color: var(--c-str); } .c-com { color: var(--c-com); font-style: italic; } /* legacy hero */ .hero:not(.hero-v2) { border-bottom: 1px solid var(--border); } /* ============================================================================ COMPACT JSON WINDOW (hero secondary card) ============================================================================ */ .product-window-compact .payload-body { padding: 12px 16px; font-size: 11.5px; line-height: 1.55; } .product-window-compact .payload-body .ln { width: 20px; margin-right: 10px; } .product-window-compact .window-chrome { padding: 8px 14px; } /* ============================================================================ § 03 DASHBOARD MOCKUP ============================================================================ */ .rule.dashboard .rule-strip { background: #0891b2; } /* teal/cyan for dashboard section */ .dash-mock { margin-top: 32px; background: var(--bg-card); border: 1px solid var(--border-strong); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-window); } .dash-chrome { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 22px; background: var(--code-card-header); border-bottom: 1px solid var(--border); font-family: var(--font-mono); font-size: 12px; } .dash-id { display: flex; align-items: center; gap: 10px; } .logo-mark-mini { display: inline-flex; } .dash-org { font-weight: 600; color: var(--fg); } .dash-app { color: var(--muted); padding-left: 10px; border-left: 1px solid var(--border); } .dash-controls { display: flex; align-items: center; gap: 14px; font-size: 11.5px; } .dash-tab { color: var(--muted); padding: 4px 0; cursor: default; } .dash-tab.active { color: var(--fg); font-weight: 600; border-bottom: 2px solid var(--accent); padding-bottom: 2px; } .dash-range { padding: 3px 10px; border: 1px solid var(--border); border-radius: 6px; color: var(--fg-soft); background: var(--bg); } .dash-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border); border-bottom: 1px solid var(--border); } .dash-kpi { background: var(--bg-card); padding: 18px 22px; display: flex; flex-direction: column; gap: 4px; } .dash-kpi-label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 1.2px; color: var(--muted); text-transform: uppercase; } .dash-kpi-value { font-size: 28px; font-weight: 700; color: var(--fg); font-variant-numeric: tabular-nums; letter-spacing: -0.8px; line-height: 1; margin-top: 2px; } .dash-kpi-delta { font-family: var(--font-mono); font-size: 11.5px; color: var(--c-str); font-variant-numeric: tabular-nums; } .dash-chart { padding: 18px 22px 12px; border-bottom: 1px solid var(--border-soft); } .dash-chart-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; } .dash-chart-head h4 { margin-bottom: 0; color: var(--fg); font-size: 13px; letter-spacing: -0.1px; text-transform: none; font-family: var(--font-sans); font-weight: 600; } .dash-legend { display: flex; gap: 14px; font-family: var(--font-mono); font-size: 10.5px; color: var(--muted); letter-spacing: 0.2px; } .dash-legend span { display: inline-flex; align-items: center; gap: 5px; } .dash-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; } .dash-chart-body { position: relative; } .dash-chart-body svg { display: block; width: 100%; height: 180px; } .dash-x-axis { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 10.5px; color: var(--muted); margin-top: 6px; letter-spacing: 0.2px; } .dash-campaigns { padding: 18px 22px 22px; } .dash-campaigns-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; } .dash-campaigns-head h4 { margin-bottom: 0; color: var(--fg); font-size: 13px; text-transform: none; font-family: var(--font-sans); font-weight: 600; } .dash-meta { color: var(--muted); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.3px; } .dash-table { width: 100%; border-collapse: collapse; font-size: 13px; } .dash-table thead th { text-align: left; padding: 10px 12px; color: var(--muted); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 1.2px; text-transform: uppercase; border-bottom: 1px solid var(--border); font-weight: 600; } .dash-table thead th.num, .dash-table tbody td.num { text-align: right; } .dash-table tbody td { padding: 11px 12px; border-bottom: 1px solid var(--border-soft); color: var(--fg-soft); font-family: var(--font-mono); font-size: 12.5px; } .dash-table tbody tr:last-child td { border-bottom: none; } .dash-table tbody tr:hover { background: var(--bg-strong); } .dash-table tbody td:first-child strong { color: var(--accent); font-weight: 600; } /* ============================================================================ DEV NOTE (sharing section "for your dev" callout) ============================================================================ */ .dev-note { margin-top: 20px; padding: 12px 14px; background: var(--bg-strong); border: 1px dashed var(--border-strong); border-radius: 8px; color: var(--muted); font-size: 13.5px; line-height: 1.5; max-width: 560px; } .dev-note-tag { display: inline-block; font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 1.4px; color: var(--accent); padding: 2px 6px; border: 1px solid var(--accent-line); border-radius: 4px; margin-right: 8px; vertical-align: middle; } /* ============================================================================ MOBILE — ≤720px collapse ============================================================================ */ @media (max-width: 720px) { .wrap, .hero-wrap { padding: 0 18px; } .nav { padding: 10px 16px; gap: 8px; } .nav nav { gap: 10px; font-size: 12px; } .nav nav a:not(.navbtn-primary):not(.theme-toggle) { display: none; } .navbtn-primary { padding: 7px 12px; font-size: 12px; } .hero { padding: 36px 0 18px; } .hero-wrap { gap: 28px; } .hero-h1 { font-size: clamp(24px, 6.6vw, 36px); letter-spacing: -0.4px; line-height: 1.08; word-wrap: break-word; overflow-wrap: break-word; hyphens: none; } .hero-h1 em { letter-spacing: -0.3px; } .hero-lede { font-size: 15.5px; } h2, h2.display { font-size: clamp(22px, 6.2vw, 28px); letter-spacing: -0.4px; line-height: 1.15; } .status-bar { font-size: 10px; letter-spacing: 1.2px; gap: 8px; padding: 4px 10px 4px 8px; flex-wrap: wrap; } .cta-row { gap: 8px; } .btn { padding: 11px 18px; font-size: 14px; } .btn.big { padding: 13px 22px; font-size: 15px; } .payload-body { padding: 12px 12px 4px 12px; font-size: 11.5px; } .payload-body .ln { width: 20px; margin-right: 8px; } .platform-pills li { font-size: 10.5px; padding: 4px 10px; gap: 5px; } .chart-stats { grid-template-columns: 1fr 1fr; gap: 12px; padding: 14px 16px 10px; } .chart-foot { grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 12px 16px; } .block { padding: 56px 0; } .rule { padding: 0 18px; } .display-lede { font-size: 15px; } .cascade-grid { grid-template-columns: 1fr; } .feature, .feature-minimal { padding: 22px 22px; } .sdk-grid { gap: 12px; } .sdk-card { padding: 18px 20px; grid-template-columns: 40px 1fr; gap: 12px; } .sdk-platform-icon { width: 40px; height: 40px; } .pullquote { padding: 18px 18px; } .cta-final { padding: 72px 0; } .cta-final .sub-sep { display: none; } .footer-grid { grid-template-columns: 1fr 1fr; gap: 24px; } .hero { padding: 56px 0 36px; } .tiers { grid-template-columns: 1fr !important; } .docs-grid { grid-template-columns: 1fr; gap: 20px; } } /* ============================================================================ iOS-SAFE / PRIVACY CALLOUT (inline in DEEP LINKING section) ============================================================================ */ .ios-callout { margin-top: 40px; padding: 28px 30px; background: var(--bg-card); border: 1px solid var(--border-strong); border-radius: 14px; box-shadow: var(--shadow-card); } .ios-callout-head { margin-bottom: 22px; } .ios-callout-tag { display: inline-block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 1.6px; font-weight: 600; color: var(--accent); padding: 3px 10px; border: 1px solid var(--accent-line); border-radius: 4px; margin-bottom: 12px; } .ios-callout-head h3 { font-size: 22px; font-weight: 700; letter-spacing: -0.6px; color: var(--fg); margin-bottom: 0; } .ios-callout-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px 30px; } @media (max-width: 720px) { .ios-callout-grid { grid-template-columns: 1fr; } } .ios-callout-grid > div { padding-left: 16px; border-left: 2px solid var(--accent-line); } .ios-callout-grid h4 { font-family: var(--font-sans); font-size: 14px; font-weight: 600; color: var(--fg); letter-spacing: -0.2px; text-transform: none; margin-bottom: 6px; } .ios-callout-grid p { font-size: 13.5px; line-height: 1.55; color: var(--muted); margin-bottom: 0; max-width: none; } /* ============================================================================ INTEGRATIONS STRIP (top of PLATFORM section) ============================================================================ */ .integrations { margin: 36px 0 40px; padding: 22px 26px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-card); } .integrations-head { margin-bottom: 16px; } .integrations-label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 1.8px; font-weight: 600; color: var(--accent); } .integrations-rows { display: grid; gap: 12px; } .integrations-row { display: grid; grid-template-columns: 160px 1fr; gap: 18px; align-items: baseline; padding: 10px 0; border-top: 1px solid var(--border-soft); } .integrations-row:first-child { border-top: none; padding-top: 0; } @media (max-width: 680px) { .integrations-row { grid-template-columns: 1fr; gap: 4px; } } .integrations-row-label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 1.4px; font-weight: 600; color: var(--muted); } .integrations-row-items { font-family: var(--font-mono); font-size: 13px; color: var(--fg-soft); letter-spacing: 0.2px; line-height: 1.65; } /* ============================================================================ PRICING TEASER (before CTA) ============================================================================ */ .rule.pricing .rule-strip { background: var(--accent); } .price-teaser { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 36px; } @media (max-width: 880px) { .price-teaser { grid-template-columns: 1fr; } } .price-card { position: relative; display: flex; flex-direction: column; gap: 8px; text-decoration: none; background: var(--bg-card); border: 1px solid var(--border-strong); border-radius: 14px; padding: 26px 24px; box-shadow: var(--shadow-card); transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s; } .price-card:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: var(--shadow-card-hover); } .price-card.featured { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--shadow-window); } .price-badge { position: absolute; top: -10px; left: 24px; display: inline-block; font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.4px; font-weight: 600; background: var(--accent); color: #fff; padding: 3px 10px; border-radius: 100px; } .price-name { font-family: var(--font-mono); font-size: 12px; letter-spacing: 1.4px; color: var(--muted); font-weight: 600; } .price-amount { font-size: 38px; font-weight: 700; color: var(--fg); line-height: 1; letter-spacing: -1.4px; display: flex; align-items: baseline; gap: 4px; } .price-per { font-size: 14px; font-weight: 500; color: var(--muted); } .price-cap { font-family: var(--font-mono); font-size: 12.5px; color: var(--accent); letter-spacing: 0.2px; margin-bottom: 4px; } .price-bullet { font-size: 13.5px; line-height: 1.55; color: var(--muted); margin-top: 4px; } .price-foot { text-align: center; margin-top: 30px; font-family: var(--font-mono); font-size: 13px; color: var(--muted); } .price-foot a { color: var(--accent); text-decoration: none; font-weight: 500; } .price-foot a:hover { text-decoration: underline; } .price-foot .sub-sep { padding: 0 10px; color: var(--border-strong); } /* ============================================================================ HOMEPAGE ADDITIONS — ecosystem strip, dashboard EXAMPLE tag, pricing teaser, compressed FAQ. ============================================================================ */ /* Ecosystem strip — right after the hero */ .ecosystem { padding: 40px 0; background: var(--bg-strong); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .ecosystem-label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 2px; font-weight: 600; color: var(--accent); text-transform: uppercase; margin-bottom: 18px; text-align: center; } .ecosystem-rows { display: grid; gap: 10px; max-width: 900px; margin: 0 auto; } .ecosystem-row { display: grid; grid-template-columns: 170px 1fr; gap: 18px; align-items: baseline; padding: 8px 0; border-top: 1px solid var(--border-soft); } .ecosystem-row:first-child { border-top: none; padding-top: 0; } @media (max-width: 680px) { .ecosystem-row { grid-template-columns: 1fr; gap: 2px; padding: 6px 0; } } .ecosystem-cat { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 1.4px; font-weight: 600; color: var(--muted); } .ecosystem-items { font-family: var(--font-mono); font-size: 13px; color: var(--fg-soft); letter-spacing: 0.2px; line-height: 1.7; } /* Dashboard EXAMPLE tag — sits next to "Acme Inc" */ .dash-example { margin-left: 10px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.4px; font-weight: 600; color: var(--accent); padding: 2px 8px; border: 1px solid var(--accent-line); border-radius: 100px; background: var(--accent-soft); } @media (max-width: 720px) { .dash-example { display: none; } } /* Pricing teaser */ .rule.pricing-rule .rule-strip { background: var(--accent); } .price-teaser { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 36px; } @media (max-width: 880px) { .price-teaser { grid-template-columns: 1fr; } } .price-card { position: relative; display: flex; flex-direction: column; gap: 8px; text-decoration: none; background: var(--bg-card); border: 1px solid var(--border-strong); border-radius: 14px; padding: 26px 24px; box-shadow: var(--shadow-card); transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s; } .price-card:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: var(--shadow-card-hover); } .price-card.featured { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--shadow-window); } .price-badge { position: absolute; top: -10px; left: 24px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.4px; font-weight: 600; background: var(--accent); color: #fff; padding: 3px 10px; border-radius: 100px; } .price-name { font-family: var(--font-mono); font-size: 12px; letter-spacing: 1.4px; color: var(--muted); font-weight: 600; } .price-amount { font-size: 38px; font-weight: 700; color: var(--fg); line-height: 1; letter-spacing: -1.4px; display: flex; align-items: baseline; gap: 4px; } .price-per { font-size: 14px; font-weight: 500; color: var(--muted); } .price-cap { font-family: var(--font-mono); font-size: 12.5px; color: var(--accent); letter-spacing: 0.2px; margin-bottom: 4px; } .price-bullet { font-size: 13.5px; line-height: 1.55; color: var(--muted); margin-top: 4px; } .price-foot { text-align: center; margin-top: 30px; font-family: var(--font-mono); font-size: 13px; color: var(--muted); } .price-foot a { color: var(--accent); text-decoration: none; font-weight: 500; } .price-foot a:hover { text-decoration: underline; } .price-foot .sub-sep { padding: 0 10px; color: var(--border-strong); } /* Compressed homepage FAQ */ .rule.faq-rule .rule-strip { background: var(--strip-platform); } .home-faq { max-width: 760px; margin: 0 auto; } .home-faq h2.display { text-align: left; margin-bottom: 28px; } .home-faq-list { display: grid; gap: 22px; } .home-faq-list dt { color: var(--fg); font-size: 16px; font-weight: 600; margin-bottom: 6px; letter-spacing: -0.2px; } .home-faq-list dd { color: var(--muted); font-size: 14.5px; line-height: 1.65; margin-left: 0; } .home-faq-list dd a { color: var(--accent); text-decoration: none; } .home-faq-list dd a:hover { text-decoration: underline; } .home-faq-foot { text-align: center; margin-top: 28px; font-family: var(--font-mono); font-size: 13px; } .home-faq-foot a { color: var(--accent); text-decoration: none; } .home-faq-foot a:hover { text-decoration: underline; }