/* * AutoPush marketing site (2026-10 redesign): home, pricing, integrations. * * A ruled frame on an off-white canvas: one centred column with hairline side rules, every * section separated by a hairline, hatched bands between chapters, near-black type with tight * tracking, two-tone section headings (the statement in ink, the continuation in grey), black * pill buttons, and AutoPush purple kept for accents (links, charts, active states). * Templates: app/server/views/frontend/site/*.pug. */ /* Inter, self-hosted (2026-10-09): Google's Inter v20 variable woff2 (latin + latin-ext, weights * 400-800), copied from the blog. Google Fonts was a render-blocking stylesheet on one origin and * the font on another. /font is cached immutable for a year: a new file needs a new vN name. */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('/font/inter-latin-ext.v1.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('/font/inter-latin.v1.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { --bg: #fafafa; --surface: #ffffff; --panel: #f1f1f1; --ink: #0a0a0a; --ink-2: #3f3f46; --ink-3: #71717a; --ink-4: #9a9aa2; --ink-dim: #85858d; --line: #e7e7e7; --line-soft: #f0f0f0; --accent: #7c3aed; --accent-deep: #6d28d9; --accent-soft: #f5f3ff; --accent-line: #ddd6fe; --frame: 1152px; --gutter: 24px; --radius: 14px; --radius-sm: 10px; --pill: 999px; --shadow: 0 1px 2px rgba(10, 10, 10, 0.04), 0 8px 24px -12px rgba(10, 10, 10, 0.12); --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --ease: cubic-bezier(0.22, 1, 0.36, 1); } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } :where(.ap) [id] { scroll-margin-top: 80px; } body.ap, .ap-chrome { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "cv11", "ss01"; } /* The header and footer on the older section pages (glossary, templates, tools): a box-less wrapper that carries the type and the .ap resets, so the sticky header sticks to the page itself. */ .ap-chrome { display: contents; font-weight: 400; } /* Those pages also load v2/app-critical.css (Foundation), which styles bare elements: weight 300, AkkuratStd headings, padded buttons that turn green on hover or focus, links that turn purple. Undo that inside .ap-chrome only; the component rules further down still win ties. */ .ap-chrome :where(p, ul, li, h2, button) { margin: 0; padding: 0; font-family: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; color: inherit; } .ap-chrome .ap-btn--light:is(:hover, :focus), .ap-chrome .ap-burger:is(:hover, :focus) { background-color: var(--surface); color: var(--ink); } .ap-chrome .ap-btn--dark:is(:hover, :focus) { background-color: var(--ink); color: #fafafa; } .ap-chrome .ap-btn--dark:hover { background-color: #27272a; } .ap-chrome .ap-menu-panel a:is(:hover, :focus) { color: inherit; } /* Resets in :where() so they carry no specificity and never beat a component (.ap-btn--dark). */ :where(.ap) img, :where(.ap) svg { display: block; max-width: 100%; } :where(.ap) a { color: inherit; text-decoration: none; } :where(.ap) :is(h1, h2, h3, h4, p) { margin: 0; } :where(.ap) ul { margin: 0; padding: 0; list-style: none; } .ap :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; } .ap-skip { position: absolute; left: -9999px; } .ap-skip:focus { left: 16px; top: 16px; z-index: 50; background: var(--ink); color: #fff; padding: 8px 14px; border-radius: var(--pill); } /* ---- Frame ------------------------------------------------------------------------------- */ .ap-frame { max-width: var(--frame); margin: 0 auto; border-left: 1px solid var(--line); border-right: 1px solid var(--line); } .ap-sec { border-bottom: 1px solid var(--line); } .ap-pad { padding: 88px var(--gutter); } .ap-pad--head { padding: 88px var(--gutter) 64px; } .ap-hatch { height: 64px; border-bottom: 1px solid var(--line); background-image: repeating-linear-gradient(135deg, transparent 0 7px, var(--line-soft) 7px 8px); } /* ---- Type -------------------------------------------------------------------------------- */ .ap-kicker { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink-3); } .ap-h1 { font-size: clamp(40px, 5.6vw, 68px); line-height: 1.05; letter-spacing: -0.028em; font-weight: 600; } .ap-lede { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.5; color: var(--ink-2); max-width: 34em; } /* Two-tone section heading: the statement in ink, the continuation in grey. */ .ap-h2 { font-size: clamp(26px, 3vw, 36px); line-height: 1.18; letter-spacing: -0.028em; font-weight: 600; max-width: 23em; } .ap-h2 .ap-dim { color: var(--ink-dim); } .ap-h3 { font-size: 19px; line-height: 1.3; letter-spacing: -0.015em; font-weight: 600; } .ap-body { font-size: 16px; line-height: 1.6; color: var(--ink-3); } .ap-small { font-size: 13px; color: var(--ink-3); } /* ---- Buttons ----------------------------------------------------------------------------- */ .ap-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 22px; border-radius: var(--pill); font: 600 15px/1 var(--font); letter-spacing: -0.01em; border: 1px solid transparent; cursor: pointer; transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease); white-space: nowrap; } .ap-btn--dark { background: var(--ink); color: #fafafa; } .ap-btn--dark:hover { background: #27272a; } .ap-btn--light { background: var(--surface); color: var(--ink); border-color: var(--line); } .ap-btn--light:hover { border-color: #cfcfd4; } .ap-btn--lg { height: 52px; padding: 0 28px; font-size: 16px; } .ap-btn svg { width: 16px; height: 16px; } .ap-btn:active { transform: scale(0.98); } /* ---- Header ------------------------------------------------------------------------------ */ .ap-header { position: sticky; top: 0; z-index: 40; background: var(--bg); border-bottom: 1px solid var(--line); } .ap-header .ap-frame { height: 64px; display: flex; align-items: center; gap: 32px; padding: 0 var(--gutter); } .ap-logo { display: flex; align-items: center; flex: none; } .ap-logo img { height: 26px; width: auto; } .ap-nav { display: flex; align-items: center; gap: 4px; flex: 1; } .ap-nav > a, .ap-nav > .ap-menu > button { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: var(--pill); font: 500 15px/1 var(--font); color: var(--ink-2); background: none; border: 0; cursor: pointer; } .ap-nav > a:hover, .ap-nav > .ap-menu > button:hover, .ap-nav > a[aria-current="page"] { color: var(--ink); background: var(--line-soft); } .ap-menu { position: relative; } .ap-menu > button svg { width: 12px; height: 12px; transition: transform 0.2s var(--ease); } .ap-menu[data-open] > button svg { transform: rotate(180deg); } .ap-menu-panel { position: absolute; top: calc(100% + 10px); left: -12px; width: 520px; padding: 10px; display: none; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); } .ap-menu[data-open] .ap-menu-panel { display: grid; } /* Bridges the 10px gap under the button so moving the pointer down does not leave .ap-menu. */ .ap-menu-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; } .ap-menu-panel a { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: var(--radius-sm); } .ap-menu-panel a:hover { background: var(--bg); } .ap-menu-ico { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); display: grid; place-items: center; flex: none; } .ap-menu-panel strong { display: block; font-size: 14px; font-weight: 600; } .ap-menu-panel div span { display: block; font-size: 13px; color: var(--ink-3); } .ap-header-cta { display: flex; gap: 10px; margin-left: auto; } .ap-burger { display: none; margin-left: auto; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: var(--pill); background: var(--surface); } .ap-burger svg { margin: auto; width: 18px; height: 18px; } /* ---- Hero -------------------------------------------------------------------------------- */ .ap-hero { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); } .ap-hero-copy { padding: 96px 48px 88px var(--gutter); display: flex; flex-direction: column; gap: 28px; justify-content: center; } .ap-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } .ap-hero-note { font-size: 13px; color: var(--ink-3); } .ap-platforms { display: flex; align-items: center; gap: 6px; } .ap-platforms img { width: 26px; height: 26px; padding: 4px; border-radius: 50%; background: var(--surface); border: 1px solid var(--line); object-fit: contain; } .ap-platforms img + img { margin-left: -10px; } .ap-hero-visual { position: relative; background: var(--panel); border-left: 1px solid var(--line); overflow: hidden; min-height: 560px; } .ap-hero-visual::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 50% at 70% 20%, rgba(124, 58, 237, 0.16), transparent 70%), radial-gradient(50% 40% at 20% 90%, rgba(124, 58, 237, 0.10), transparent 70%); } /* ---- Mock UI pieces (pure HTML/CSS illustrations of the product) ------------------------- */ .ap-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); } .ap-card-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line-soft); font-size: 13px; font-weight: 600; } .ap-card-head img { width: 18px; height: 18px; object-fit: contain; } .ap-card-head .ap-small { font-weight: 400; margin-left: auto; } .ap-activity { position: absolute; left: 24px; right: 24px; bottom: 28px; } .ap-activity-who { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line-soft); } .ap-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--ink); display: grid; place-items: center; flex: none; } .ap-activity-who strong { display: block; font-size: 14px; } .ap-activity-who span { display: block; font-size: 12px; color: var(--ink-3); } .ap-row { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-bottom: 1px solid var(--line-soft); font-size: 13px; font-weight: 500; } .ap-row:last-child { border-bottom: 0; } .ap-row .ap-ico { width: 24px; height: 24px; border-radius: 7px; background: var(--bg); display: grid; place-items: center; flex: none; } .ap-row .ap-ico svg { width: 13px; height: 13px; } .ap-row .ap-meta { margin-left: auto; font-size: 12px; font-weight: 400; color: var(--ink-3); } .ap-tick { width: 18px; height: 18px; border-radius: 50%; background: var(--ink); display: grid; place-items: center; flex: none; } .ap-tick svg { width: 10px; height: 10px; color: #fff; } .ap-article { position: absolute; left: 44px; right: 44px; top: 96px; } .ap-article-body { padding: 16px; display: grid; gap: 10px; } .ap-article-title { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.35; } .ap-lines { display: grid; gap: 7px; } .ap-lines i { display: block; height: 7px; border-radius: 4px; background: var(--line-soft); } .ap-lines i:nth-child(2) { width: 88%; } .ap-lines i:nth-child(3) { width: 72%; } .ap-tags { display: flex; flex-wrap: wrap; gap: 6px; } .ap-chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: var(--pill); background: var(--surface); border: 1px solid var(--line); font-size: 13px; font-weight: 500; white-space: nowrap; } .ap-chip small { font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); } .ap-chip img { width: 16px; height: 16px; object-fit: contain; } .ap-chip--accent { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-deep); } .ap-chip--soft { background: var(--bg); } /* ---- Facts strip ------------------------------------------------------------------------- */ .ap-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); } .ap-fact { padding: 28px var(--gutter); border-right: 1px solid var(--line); } .ap-fact:last-child { border-right: 0; } .ap-fact strong { display: flex; align-items: center; gap: 8px; font-size: 20px; font-weight: 600; letter-spacing: -0.02em; } .ap-fact strong svg { width: 18px; height: 18px; color: var(--accent); } .ap-fact span { display: block; margin-top: 2px; font-size: 15px; color: var(--ink-3); } /* ---- Cells (steps, features, FAQ, examples) ---------------------------------------------- */ .ap-cells { display: grid; border-top: 1px solid var(--line); } .ap-cells--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ap-cells--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ap-cell { padding: 32px var(--gutter) 36px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; } .ap-cells--3 .ap-cell:nth-child(3n), .ap-cells--2 .ap-cell:nth-child(2n) { border-right: 0; } .ap-cells--3 > .ap-cell:nth-last-child(-n + 3):nth-child(3n + 1), .ap-cells--3 > .ap-cell:nth-last-child(-n + 3):nth-child(3n + 1) ~ .ap-cell { border-bottom: 0; } .ap-cells--2 > .ap-cell:nth-last-child(-n + 2):nth-child(2n + 1), .ap-cells--2 > .ap-cell:nth-last-child(-n + 2):nth-child(2n + 1) ~ .ap-cell { border-bottom: 0; } .ap-step-n { font-size: 14px; color: var(--ink-3); } .ap-cell .ap-h3 { max-width: 22em; } .ap-stage { margin-top: 18px; min-height: 170px; position: relative; } /* Step mock: connected platforms */ .ap-connect { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .ap-connect .ap-chip { justify-content: center; } .ap-url { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 6px 0 16px; border-radius: var(--pill); background: var(--surface); border: 1px solid var(--line); font-size: 14px; color: var(--ink-2); margin-bottom: 12px; } .ap-url .ap-go { margin-left: auto; width: 32px; height: 32px; border-radius: 50%; background: var(--ink); display: grid; place-items: center; } .ap-url .ap-go svg { width: 14px; height: 14px; color: #fff; } /* Step mock: growth chart */ .ap-chart { width: 100%; height: 150px; } .ap-chart .ap-area { fill: rgba(124, 58, 237, 0.09); } .ap-chart .ap-path { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; } .ap-chart .ap-dot { fill: var(--surface); stroke: var(--accent); stroke-width: 2.5; } .ap-chart-pin { position: absolute; display: inline-flex; } /* Feature cells hold a larger illustration */ .ap-feature .ap-stage { margin-top: 26px; min-height: 0; } .ap-chipcloud { display: flex; flex-wrap: wrap; gap: 10px; } .ap-chipcloud .ap-chip { box-shadow: var(--shadow); } .ap-chipcloud .ap-chip:nth-child(3n) { transform: rotate(-1.5deg); } .ap-chipcloud .ap-chip:nth-child(4n) { transform: rotate(1.2deg); } .ap-chipcloud--flat { gap: 8px; } .ap-chipcloud--flat .ap-chip { box-shadow: none; transform: none !important; height: 32px; padding: 0 12px; font-size: 13px; } .ap-chipcloud--flat .ap-chip small { font-size: 9.5px; letter-spacing: 0.04em; } /* Feature mock: integration rows */ .ap-int-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .ap-int-row { display: flex; align-items: center; gap: 12px; height: 50px; padding: 0 9px 0 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); font-size: 15px; font-weight: 500; transition: border-color 0.2s ease; } .ap-int-row:hover { border-color: var(--ink-4); } .ap-int-mark { width: 24px; height: 24px; flex: none; overflow: hidden; display: grid; place-items: center; } .ap-int-mark img { width: 24px; height: 24px; object-fit: contain; } .ap-int-mark--shopify img, .ap-int-mark--notion img { width: auto; max-width: none; height: 24px; object-fit: initial; justify-self: start; } .ap-int-mark--wix { width: 26px; } .ap-int-mark--wix img { width: 26px; } .ap-int-go { margin-left: auto; height: 30px; padding: 0 12px; border-radius: var(--pill); border: 1px solid var(--line); font-size: 12.5px; font-weight: 500; display: inline-flex; align-items: center; background: var(--surface); } .ap-int-row:hover .ap-int-go { background: var(--ink); border-color: var(--ink); color: #fff; } /* "Plus everything else" strip under a cell grid */ .ap-extras { border-top: 1px solid var(--line); padding: 30px var(--gutter) 34px; } .ap-extras p { font-size: 14px; color: var(--ink-3); margin-bottom: 14px; } .ap-extras ul { display: flex; flex-wrap: wrap; gap: 8px; } .ap-extras li { font-size: 13px; font-weight: 500; color: var(--ink-2); background: var(--panel); border-radius: var(--pill); padding: 6px 11px; } .ap-platform-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .ap-platform-tile { height: 64px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--line); display: grid; place-items: center; } .ap-platform-tile img { height: 28px; width: auto; max-width: 64%; } /* ---- Comparison table -------------------------------------------------------------------- */ .ap-compare { width: 100%; border-collapse: collapse; font-size: 15px; } .ap-compare thead th:first-child { width: 24%; } .ap-compare th, .ap-compare td { border-top: 1px solid var(--line); border-right: 1px solid var(--line); padding: 18px var(--gutter); text-align: left; vertical-align: middle; } .ap-compare th:last-child, .ap-compare td:last-child { border-right: 0; } .ap-compare thead th { font-weight: 600; color: var(--ink-2); font-size: 14px; } .ap-compare thead th.ap-us { color: var(--ink); } .ap-compare thead th.ap-us span { display: inline-flex; align-items: center; gap: 8px; } .ap-compare thead th.ap-us img { height: 18px; width: auto; } .ap-compare tbody th { font-weight: 500; } .ap-compare td.ap-us { background: var(--surface); } .ap-no { width: 18px; height: 18px; border-radius: 50%; background: var(--line-soft); display: grid; place-items: center; } .ap-no svg { width: 8px; height: 8px; color: var(--ink-3); } .ap-compare-wrap { overflow-x: auto; } /* ---- Examples ---------------------------------------------------------------------------- */ .ap-example .ap-label { display: inline-flex; gap: 8px; align-items: center; font-size: 13px; color: var(--ink-3); } .ap-example .ap-h3 { font-size: 20px; } .ap-example .ap-body { max-width: 36em; } .ap-example .ap-powered { margin-top: auto; padding-top: 14px; font-size: 13px; color: var(--ink-3); display: flex; gap: 8px; align-items: center; } .ap-example .ap-powered img { height: 14px; width: auto; } .ap-example ul { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } /* ---- FAQ --------------------------------------------------------------------------------- */ .ap-faq .ap-h3 { font-size: 17px; } .ap-faq .ap-body { font-size: 15px; } /* ---- CTA band ---------------------------------------------------------------------------- */ .ap-band { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; padding: 72px var(--gutter); background-color: #f4f4f5; background-image: repeating-linear-gradient(135deg, transparent 0 7px, rgba(10, 10, 10, 0.035) 7px 8px); } .ap-band .ap-h2 { font-size: clamp(30px, 3.4vw, 40px); } .ap-band-copy { display: grid; gap: 18px; justify-items: start; } .ap-dash { padding: 0; overflow: hidden; } .ap-dash-top { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--line-soft); } .ap-dash-top i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); } .ap-dash-grid { display: grid; grid-template-columns: 120px 1fr; min-height: 220px; } .ap-dash-side { border-right: 1px solid var(--line-soft); padding: 12px; display: grid; gap: 8px; align-content: start; } .ap-dash-side i { display: block; height: 8px; border-radius: 4px; background: var(--line-soft); } .ap-dash-side i:first-child { background: var(--accent-line); } .ap-dash-main { padding: 14px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; align-content: start; } .ap-dash-day { border: 1px solid var(--line-soft); border-radius: 8px; padding: 8px; display: grid; gap: 5px; min-height: 64px; } .ap-dash-day b { font-size: 10px; color: var(--ink-3); font-weight: 600; } .ap-dash-day i { display: block; height: 6px; border-radius: 3px; background: var(--line-soft); } .ap-dash-day.is-live i:first-of-type { background: var(--accent); } /* ---- Pricing: a narrow checkout column between hatched gutters ---------------------------- */ .ap-narrow { border-bottom: 1px solid var(--line); background-image: repeating-linear-gradient(135deg, transparent 0 7px, var(--line-soft) 7px 8px); } .ap-narrow-col { max-width: 672px; margin: 0 auto; background: var(--bg); border-left: 1px solid var(--line); border-right: 1px solid var(--line); } .ap-narrow-col > .ap-sec:last-child { border-bottom: 0; } .ap-narrow .ap-pad--head { padding: 72px var(--gutter) 56px; } .ap-narrow .ap-h2 { font-size: clamp(26px, 3vw, 32px); } .ap-pricehero { display: grid; grid-template-columns: minmax(0, 1fr) 210px; gap: 24px; align-items: center; padding: 72px var(--gutter) 56px; } .ap-pricehero .ap-h1 { font-size: clamp(32px, 4vw, 40px); line-height: 1.12; letter-spacing: -0.025em; } .ap-pricehero .ap-body { margin-top: 14px; max-width: 30em; } .ap-pricehero-art .ap-card { overflow: hidden; } .ap-pricehero-art .ap-chart { display: block; height: 110px; margin-top: 10px; } .ap-checkout { padding: 40px var(--gutter); display: grid; gap: 16px; } .ap-plancard { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); } .ap-plancard-head { padding: 22px 20px 24px; border-bottom: 1px solid var(--line); } .ap-plancard-head > .ap-small { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 8px; } .ap-plan-name { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; } .ap-plancard-head .ap-body { font-size: 15px; color: var(--ink-2); margin-bottom: 18px; } .ap-feat2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; } .ap-feat2 li { display: flex; gap: 10px; font-size: 14.5px; line-height: 1.4; color: var(--ink-2); } .ap-feat2 .ap-tick { margin-top: 1px; } .ap-choose { padding: 24px 20px 22px; display: grid; gap: 12px; } .ap-choose fieldset { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 12px; } .ap-choose legend { padding: 0; font-size: 15px; font-weight: 600; margin-bottom: 16px; } .ap-option { display: flex; align-items: center; gap: 16px; padding: 18px 16px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .ap-option:hover { border-color: var(--ink-4); } .ap-option:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); } .ap-option input { appearance: none; -webkit-appearance: none; margin: 0; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--ink-4); flex: none; display: grid; place-items: center; } .ap-option input:checked { border-color: var(--ink); } .ap-option input:checked::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--ink); } .ap-option input:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .ap-option-copy strong { display: block; font-size: 16px; font-weight: 600; } .ap-option-copy span { display: block; font-size: 14px; color: var(--ink-3); margin-top: 2px; } .ap-option-price { margin-left: auto; text-align: right; flex: none; } .ap-option-price strong { display: block; font-size: 24px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; } .ap-option-price span { font-size: 13px; color: var(--ink-3); } .ap-btn--block { width: 100%; margin-top: 8px; height: auto; min-height: 52px; padding-block: 12px; white-space: normal; text-align: center; line-height: 1.3; } .ap-center { text-align: center; } .ap-sidecard { display: flex; gap: 16px; align-items: flex-start; padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; } .ap-sidecard .ap-h3 { font-size: 16px; } .ap-sidecard .ap-body { font-size: 14.5px; margin-top: 4px; } .ap-sidecard-ico, .ap-buy-ico { width: 44px; height: 44px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-deep); display: grid; place-items: center; flex: none; } .ap-shot { height: 168px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); padding: 18px; margin-bottom: 14px; overflow: hidden; display: grid; align-content: center; } .ap-shot .ap-connect { display: flex; flex-wrap: wrap; gap: 8px; } .ap-shot .ap-url { margin-bottom: 10px; } .ap-shot .ap-article-title { font-size: 14px; } .ap-narrow .ap-cell .ap-h3 { font-size: 17px; } .ap-narrow .ap-cell .ap-body { font-size: 14.5px; } .ap-stat strong { font-size: 30px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; } .ap-stat .ap-small { margin-top: -4px; } .ap-also { border-top: 1px solid var(--line); } .ap-also-title { padding: 16px var(--gutter); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); border-bottom: 1px solid var(--line); } .ap-also ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .ap-also li { display: flex; align-items: center; gap: 10px; padding: 14px var(--gutter); font-size: 15px; color: var(--ink-2); border-bottom: 1px solid var(--line); } .ap-also li:nth-child(odd) { border-right: 1px solid var(--line); } .ap-also li:nth-last-child(-n + 2) { border-bottom: 0; } .ap-buy .ap-buy-ico { margin-bottom: 8px; } /* ---- Integration pages ------------------------------------------------------------------- */ .ap-int-logo { min-width: 64px; height: 64px; padding: 0 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); display: grid; place-items: center; box-shadow: var(--shadow); } .ap-int-logo img { height: 32px; width: auto; max-width: 140px; } .ap-narrow-col--wide { max-width: 896px; } .ap-feathero { padding: 72px var(--gutter) 64px; display: grid; gap: 20px; justify-items: start; } .ap-feathero .ap-h1 { font-size: clamp(34px, 4.4vw, 46px); line-height: 1.1; letter-spacing: -0.028em; max-width: 17em; } .ap-feathero .ap-lede { font-size: 18px; color: var(--ink-3); } .ap-feathero .ap-hero-actions { margin-top: 6px; } .ap-pad-x { padding: 0 var(--gutter) 48px; } .ap-narrow .ap-band { margin: 0; } .ap-platform-tile.is-current { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } /* Product mock: content calendar */ .ap-showcase { background: var(--panel); padding: 40px var(--gutter); } .ap-cal { overflow: hidden; } .ap-cal-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px solid var(--line-soft); font-size: 14px; } .ap-cal-top .ap-chip { height: 28px; font-size: 12px; padding: 0 10px; } .ap-cal-top .ap-chip img { height: 14px; width: auto; max-width: 60px; } .ap-cal-right { margin-left: auto; display: flex; gap: 8px; } .ap-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; padding: 14px 16px 18px; } .ap-cal-dow { font-size: 11px; color: var(--ink-4); padding-left: 2px; } .ap-cal-day { border: 1px solid var(--line-soft); border-radius: 10px; padding: 8px; min-height: 132px; display: grid; gap: 6px; align-content: start; background: var(--bg); } .ap-cal-n { font-size: 11px; color: var(--ink-4); } .ap-cal-card { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 8px; display: grid; gap: 6px; } .ap-cal-status { justify-self: start; font-size: 9px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); border: 1px solid var(--line); border-radius: var(--pill); padding: 2px 6px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ap-cal-status.is-live { color: var(--accent-deep); background: var(--accent-soft); border-color: var(--accent-line); } .ap-cal-title { font-size: 11.5px; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .ap-cal-card .ap-lines i { height: 5px; } /* ---- Footer ------------------------------------------------------------------------------ */ /* Own colours and padding: the older section pages style every