by 12px inline below 1024px; the in-app shell opts out via `.app-shell main`, but the marketing layout's bare

would inherit it and inset every full-bleed section — so the tinted (beige/navy) sections stop short of the viewport edge on mobile, leaving a gutter. The marketing

is full-bleed (its sections own their gutters via .m-container), so reset it. This file is unlayered, so it wins over base.css's layered rule without a specificity bump. */ .marketing main { padding-inline: 0; } .m-container { width: 100%; max-width: 1140px; margin-inline: auto; padding-inline: 24px; } .m-section { padding-block: clamp(64px, 9vw, 120px); } /* ---- Shared bits ------------------------------------------------------ */ .m-head { max-width: 640px; } .m-head__title { font-size: clamp(1.9rem, 3.4vw, 2.85rem); line-height: 1.05; letter-spacing: -0.025em; font-weight: 800; color: var(--ink); margin-top: 18px; } .m-head__sub { font-size: 1.075rem; color: var(--ink-soft); margin-top: 16px; max-width: 56ch; } /* Buttons: reuse the app .btn system, retuned for the paper palette. */ .marketing .btn-outline { background: transparent; border-color: color-mix(in srgb, var(--ink) 28%, transparent); color: var(--ink); } .marketing .btn-outline:hover, .marketing .btn-outline:focus { background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink); } /* ---- Top navigation --------------------------------------------------- */ /* The bar morphs on scroll: a full-bleed hairline at the very top, easing into a floating, translucent pill as soon as the page scrolls — (____nav____). The `is-scrolled` class is toggled by the small scroll listener in layouts/marketing; the shape, fill, and lift all live here as transitions. */ .m-nav { position: sticky; top: 0; z-index: 50; /* body.marketing is a grid; .m-nav is a grid item, so center it with justify-self (margin-inline:auto would shrink a grid item to its content width) and size it with width — full-bleed at the top, drawing into a pill on scroll. */ width: 100%; justify-self: center; background: transparent; /* Reserve the full border box (border-box) so the pill's hairline can fade in without nudging the contents; at the top only the bottom edge shows, as the line. */ border: 1px solid transparent; border-bottom-color: var(--line); border-radius: 0; transform: translateY(0); transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1), transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), border-radius 0.4s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease; } .m-nav.is-scrolled { /* Drop a little for the top margin, fully round, and fill with see-through frosted paper, drawing in from the full-width line to ~94% so it floats as a pill (90% on the mobile layout below). */ width: 94%; transform: translateY(14px); background: color-mix(in srgb, var(--paper) 50%, transparent); backdrop-filter: saturate(150%) blur(12px); border-color: color-mix(in srgb, var(--ink) 9%, transparent); border-radius: 999px; box-shadow: 0 12px 30px -14px color-mix(in srgb, var(--ink) 34%, transparent); } /* On the mobile nav layout (the burger menu, below 900px) the pill spans 90% of the viewport instead — a roomier 5% gutter each side. */ @media (max-width: 899px) { .m-nav.is-scrolled { width: 90%; } } @media (prefers-reduced-motion: reduce) { .m-nav { transition: none; } } .m-nav__inner { position: relative; display: flex; align-items: center; gap: 24px; height: 68px; /* The nav runs full width (not capped at the 1140 .m-container), so the brand and actions sit at the bar/pill ends rather than aligning to the page content. */ max-width: none; } .m-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); flex: none; } .m-brand__mark { height: 30px; width: auto; } .m-brand__word { font-weight: 700; font-size: 1.075rem; letter-spacing: -0.02em; color: var(--ink); } /* The full right-hand group (section links + actions). Hidden as a unit below 900px (the mobile

menu takes over); pushed right on desktop. */ .m-nav__links { display: none; align-items: center; gap: 22px; } .m-nav__link { color: var(--ink-soft); text-decoration: none; font-size: 0.95rem; font-weight: 500; transition: color 0.15s ease; } .m-nav__link:hover { color: var(--ink); } @media (min-width: 900px) { .m-nav__links { display: flex; margin-left: auto; } } /* ---- Nav dropdowns ----------------------------------------------------- */ /* :focus-within keeps the hover menus keyboard-reachable. Desktop-only — the parent .m-nav__links is display:none below 900px, so there's no separate mobile variant. */ .m-nav__item { position: relative; display: inline-flex; align-items: center; } .m-nav__trigger { display: inline-flex; align-items: center; /* Tuck the caret tight against its label so the chevron reads as part of "Features"/"Resources" rather than floating in the inter-item gap. */ gap: 3px; background: none; border: 0; padding: 0; font: inherit; font-size: 0.95rem; font-weight: 500; cursor: pointer; } .m-nav__caret { transition: transform 0.18s ease; } .m-nav__menu { position: absolute; top: 100%; left: 0; margin-top: 10px; min-width: 196px; display: flex; flex-direction: column; padding: 7px; background: var(--paper); border: 1px solid var(--line); /* Mirror the app menu panel radius (.menu-component → --radius-lg). */ border-radius: var(--radius-lg); box-shadow: 0 16px 34px -16px color-mix(in srgb, var(--ink) 34%, transparent); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s; z-index: 60; } /* Invisible bridge over the gap so the menu doesn't close while the pointer travels from the trigger down to it. */ .m-nav__menu::before { content: ""; position: absolute; top: -10px; left: 0; right: 0; height: 10px; } .m-nav__item:hover .m-nav__menu, .m-nav__item:focus-within .m-nav__menu { opacity: 1; visibility: visible; transform: translateY(0); } .m-nav__item:hover .m-nav__caret, .m-nav__item:focus-within .m-nav__caret { transform: rotate(180deg); } .m-nav__menu-link { display: block; padding: 8px 12px; /* Mirror the app menu row radius (.menu-sub-list rows → --radius-md). */ border-radius: var(--radius-md); color: var(--ink-soft); text-decoration: none; font-size: 0.9rem; font-weight: 500; white-space: nowrap; transition: background 0.12s ease, color 0.12s ease; } .m-nav__menu-link:hover, .m-nav__menu-link:focus-visible { background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink); } /* ---- Mobile menu ------------------------------------------------------- */ /* A native

disclosure (no Stimulus on this layout); layouts/marketing adds a small close-on-navigate/Escape/outside-click enhancement. Shown only below 900px, where .m-nav__links is hidden. The Features/Resources groups are nested

so their sub-links stay reachable. */ .m-nav__mobile { margin-left: auto; } .m-nav__burger { /* Grid so both glyphs share one cell and crossfade in place (see below). */ display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-sm); color: var(--ink); cursor: pointer; list-style: none; } .m-nav__burger::-webkit-details-marker { display: none; } .m-nav__burger:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); } /* Stack the hamburger and the X in the same grid cell so toggling the menu rotates one out and settles the other in, rather than hard-swapping. */ .m-nav__burger-icon { grid-area: 1 / 1; width: 24px; height: 24px; transition: opacity 0.2s ease, transform 0.2s ease; } .m-nav__burger-icon--close { opacity: 0; transform: rotate(-90deg) scale(0.7); } .m-nav__mobile[open] .m-nav__burger-icon--open { opacity: 0; transform: rotate(90deg) scale(0.7); } .m-nav__mobile[open] .m-nav__burger-icon--close { opacity: 1; transform: rotate(0) scale(1); } /* The panel is the visible card AND a collapsing grid child of ::details-content: the grid row below tweens 0fr → 1fr to slide it open, while overflow + min-height:0 let it shrink past its own content. (fr tracks animate everywhere — unlike block-size:auto, which needs Chromium-only interpolate-size.) Positioning lives on ::details-content; the @supports block re-homes it for browsers that don't expose ::details-content. */ .m-nav__panel { overflow: hidden; min-height: 0; display: flex; flex-direction: column; gap: 2px; padding: 12px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: 0 18px 34px -16px color-mix(in srgb, var(--ink) 36%, transparent); } /* ::details-content is the UA wrapper around a

's non-summary content and the element whose open state actually toggles — so the slide + fade ride here, where the transition fires reliably across the open/close boundary (animating a child of it instead just snaps). It's the positioned overlay (inset to the page gutter so the border clears the viewport edge) and a single-row grid whose track height drives the reveal; content-visibility (allow-discrete) keeps the panel painted through the close. */ .m-nav__mobile::details-content { position: absolute; top: calc(100% + 8px); left: 24px; right: 24px; z-index: 60; display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 0.3s ease, opacity 0.3s ease, content-visibility 0.3s allow-discrete; } .m-nav__mobile[open]::details-content { grid-template-rows: 1fr; opacity: 1; } /* Browsers without ::details-content can't run the reveal; keep the panel positioned (it falls back to an instant show/hide) so the menu still works. */ @supports not (selector(::details-content)) { .m-nav__panel { position: absolute; top: calc(100% + 8px); left: 24px; right: 24px; z-index: 60; } } /* The nested Features/Resources groups slide with the exact same single-element pattern as the panel: the reveal rides on ::details-content (grid row 0fr → 1fr, coordinated with content-visibility on the same element, so nothing desyncs into a bounce), and .m-nav__group-list is the collapsing grid child. The caret rotation rides the shared .m-nav__caret. */ .m-nav__group::details-content { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s ease, content-visibility 0.3s allow-discrete; } .m-nav__group[open]::details-content { grid-template-rows: 1fr; } .m-nav__group-list { overflow: hidden; min-height: 0; } /* Respect a reduced-motion preference: keep the open/close states, drop the tweening so the icon swap and the panel/group reveals are instant. */ @media (prefers-reduced-motion: reduce) { .m-nav__burger-icon, .m-nav__mobile::details-content, .m-nav__group::details-content { transition: none; } } .m-nav__panel-link, .m-nav__group-summary { display: flex; align-items: center; justify-content: space-between; padding: 11px 12px; border-radius: var(--radius-md); color: var(--ink); text-decoration: none; font-size: 1rem; font-weight: 600; cursor: pointer; list-style: none; } .m-nav__group-summary::-webkit-details-marker { display: none; } .m-nav__panel-link:hover, .m-nav__group-summary:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); } .m-nav__group[open] .m-nav__group-summary .m-nav__caret { transform: rotate(180deg); } .m-nav__panel-sub { display: block; padding: 9px 12px 9px 24px; border-radius: var(--radius-md); color: var(--ink-soft); text-decoration: none; font-size: 0.95rem; font-weight: 500; } .m-nav__panel-sub:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink); } .m-nav__panel-divider { height: 1px; margin: 8px 4px; border: 0; background: var(--line); } .m-nav__panel-actions { display: flex; flex-direction: column; gap: 8px; padding: 4px; } @media (min-width: 900px) { .m-nav__mobile { display: none; } } /* Smooth-scroll to in-page anchors (the nav dropdown section links). Scoped to this file, which only loads on the marketing layout. scroll-margin-top keeps targets clear of the 68px sticky nav. */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } #features, #how, #inbox { scroll-margin-top: 88px; } /* ---- /pricing as a marketing page ------------------------------------- */ /* The pricing table (PricingController, rendered in the marketing layout) uses the app's design tokens — transparent cards with a gray-100 hairline, app-radius buttons — which read as foreign on the paper background. Re-skin the cards, toggle, and CTAs to the marketing aesthetic, scoped to .m-pricing (the section wrapper). */ /* It's a standalone page (not a section flowing after others), so it needs less top room than the inter-section rhythm .m-section provides. */ .m-pricing { padding-top: clamp(32px, 5vw, 56px); } /* Heading: Tailwind preflight resets

to inherit, so size it like a section title. / .m-pricing h1 { font-size: clamp(1.9rem, 3.4vw, 2.85rem); line-height: 1.05; letter-spacing: -0.025em; font-weight: 800; color: var(--ink); } / Tighten the gap between the heading and the billing toggle — the page's stock mt-8 (controller) + my-8/sm:mt-8 (toggle) margins stack to a large gap on desktop. The toggle's bottom margin (toggle → plans) is left intact. / .m-pricing [data-controller="pricing"] { margin-top: 40px; } .m-pricing [data-pricing-target="toggle"] { margin-top: 0; } / Plan cards: white fill + line-strong border + soft lift, like .feature / .carbon-card. The card already carries rounded-lg (= --radius-lg), so only fill/border/shadow change. / .m-pricing .p-8 { background: #fff; border-color: var(--line-strong); box-shadow: 0 18px 36px -24px rgba(27, 42, 74, 0.4); } .m-pricing .p-8 h4, .m-pricing .p-8 .text-4xl { color: var(--ink); } / The monthly/yearly toggle track is a gray-100 pill that disappears on paper. / .m-pricing [data-pricing-target="toggle"] { background: var(--paper-3); } / ---- Hero ------------------------------------------------------------- / .m-hero { position: relative; overflow: hidden; } / Faint tiled Carbon Copi logo mark covering the whole hero background, recoloured to a flat ink silhouette by the #m-hero-ink filter. .m-herogrid-base is the resting watermark; .m-herogrid-spot repeats the same pattern and is masked to a radius at the cursor, so the marks "ink in" under the pointer. The hero copy sits above it and carries a paper text-shadow halo so it stays legible over the grid. The spotlight Stimulus controller on .m-hero supplies --mx/--my/--spot. / .m-herogrid { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .m-herogrid-svg { position: absolute; inset: 0; width: 100%; height: 100%; } .m-herogrid-base { opacity: 0.15; } .m-herogrid-spot { opacity: calc(var(--spot, 0) 0.35); transition: opacity 0.3s ease; -webkit-mask-image: radial-gradient(circle 150px at var(--mx, 50%) var(--my, 50%), #000 0%, transparent 75%); mask-image: radial-gradient(circle 150px at var(--mx, 50%) var(--my, 50%), #000 0%, transparent 75%); } @media (prefers-reduced-motion: reduce) { .m-herogrid-spot { transition: none; } } @media (max-width: 767px) { .m-herogrid { display: none; } } /* Full-bleed paper pool behind the hero copy: sits above the grid (z-index 1) and below the content (z-index 2). A radial fade with no bounded box means it dissolves outward with no straight edge — it just thins the watermark behind the text and lets it return toward the open right side. / .m-heroveil { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse 65% 80% at 28% 48%, var(--paper) 0%, var(--paper) 42%, transparent 85%); } .m-heroinner { position: relative; z-index: 2; padding-top: clamp(56px, 8vw, 104px); padding-bottom: clamp(96px, 12vw, 168px); } .m-herocontent { position: relative; z-index: 1; max-width: min(760px, 100%); margin-top: clamp(28px, 4vw, 44px); } .m-herotitle { font-size: clamp(2.8rem, 6.5vw, 5rem); line-height: 1.02; letter-spacing: -0.035em; font-weight: 800; color: var(--ink); max-width: 15ch; margin-top: 0; } .m-ink-mark { position: relative; color: var(--blue-deep); white-space: nowrap; } .m-ink-mark::after { content: ""; position: absolute; left: -2px; right: -2px; bottom: 0.06em; height: 0.16em; background: var(--blue); opacity: 0.32; border-radius: 2px; } .m-herosub { font-size: clamp(1.075rem, 1.4vw, 1.25rem); color: var(--ink-soft); margin-top: 22px; max-width: 38ch; } .m-herocta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; } .m-heronote { margin-top: 18px; font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.04em; color: var(--ink-faint); } / ---- Shared "carbon copy" card (used by the inbox thread) ------------- / .carbon-card { position: relative; background: #ffffff; border: 1px solid var(--line-strong); border-radius: 20px; box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.7) inset, 0 24px 48px -28px rgba(27, 42, 74, 0.45), 0 8px 18px -14px rgba(27, 42, 74, 0.25); } / ---- Capability strip ------------------------------------------------- / .m-caps { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--paper-2) 60%, var(--paper)); } .m-capsinner { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 22px; padding-block: 20px; } .m-capslabel { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); } .m-cap { font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); display: inline-flex; align-items: center; } .m-cap::before { content: ""; height: 5px; width: 5px; border-radius: 50%; background: var(--blue); margin-right: 9px; } / ---- Features --------------------------------------------------------- / .m-showcase { margin-top: 48px; display: grid; grid-template-columns: 1fr; gap: 32px; align-items: center; background: var(--ink); color: color-mix(in srgb, var(--paper) 88%, var(--ink)); border-radius: 24px; padding: clamp(28px, 4vw, 48px); overflow: hidden; } .m-showcasetitle { font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1.1; letter-spacing: -0.02em; font-weight: 800; color: #fff; margin-top: 14px; } .m-showcasebody { color: color-mix(in srgb, var(--paper) 72%, var(--ink)); margin-top: 14px; max-width: 48ch; } @media (min-width: 900px) { .m-showcase { grid-template-columns: 1fr 1fr; gap: 48px; } } / link -> form -> docs flow illustration / .flowviz { display: flex; align-items: stretch; gap: 12px; justify-content: center; / A grid item in .m-showcase: without this, its auto min-width lets the row's intrinsic width widen the 1fr track past the card, which the card's overflow:hidden then clips. Pin it so the row shrinks to the column. / min-width: 0; } .flowviznode { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: color-mix(in srgb, #fff 7%, var(--ink)); border: 1px solid color-mix(in srgb, #fff 16%, transparent); border-radius: 14px; padding: 16px 10px; text-align: center; color: color-mix(in srgb, var(--paper) 82%, var(--ink)); } .flowviznode svg { height: 22px; width: 22px; color: color-mix(in srgb, var(--blue) 50%, #fff); margin-bottom: 10px; } .flowviznode-label { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.05em; text-transform: uppercase; } .flowvizarrow { display: grid; place-items: center; color: color-mix(in srgb, var(--blue) 50%, #fff); flex: none; } .flowvizarrow svg { height: 18px; width: 18px; } / Below the 2-column showcase (<900px) the card is a single column; a horizontal 3-node row can't fit once the card is narrow, so stack the nodes and turn the connectors to point downward. / @media (max-width: 639px) { .flowviz { flex-direction: column; } .flowvizarrow svg { transform: rotate(90deg); } } .feature-grid { margin-top: 28px; display: grid; grid-template-columns: 1fr; gap: 18px; } .feature { background: #fff; border: 1px solid var(--line-strong); border-radius: 20px; padding: 26px; position: relative; transition: transform 0.2s ease, box-shadow 0.2s ease; } .feature:hover { transform: translateY(-3px); box-shadow: 0 18px 36px -24px rgba(27, 42, 74, 0.4); } .featureindex { position: absolute; top: 22px; right: 24px; font-family: var(--mono); font-size: 0.74rem; color: var(--ink-faint); letter-spacing: 0.05em; } .featureicon { height: 44px; width: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--blue-wash); color: var(--blue-deep); border: 1px solid color-mix(in srgb, var(--blue) 18%, transparent); } .featureicon svg { height: 22px; width: 22px; } .featuretitle { font-size: 1.12rem; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; margin-top: 18px; } .featurebody { font-size: 0.95rem; color: var(--ink-soft); margin-top: 8px; } @media (min-width: 640px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 960px) { .feature-grid { grid-template-columns: repeat(3, 1fr); } } / ---- How it works (pipeline) ----------------------------------------- / / * A centered, vertical numbered timeline. Mono number badges (01–10) ride a * continuous dotted "perforation" connector — the forms/carbon motif — with the * step title and a one-line body to the right. Scales cleanly to ten steps. / .m-how { background: color-mix(in srgb, var(--paper-2) 70%, var(--paper)); } / Condensed deal flow: two rows of three boxes. A glowing dot travels along the connector from each box to the next — staggered so the pulse propagates through the sequence. Stacks to a single vertical column on small screens. / .flow { margin-top: 44px; display: flex; flex-direction: column; gap: 14px; } .flowrow { display: flex; flex-direction: column; / No gap: the connector between boxes IS the inter-card space, so its dotted line runs flush from one card to the next (same as the row layout ≥820px). / gap: 0; } .flowbox { position: relative; flex: 1; background: var(--paper); border: 1px solid var(--line-strong); border-radius: 20px; padding: 22px; transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.2s ease, box-shadow 0.2s ease; transition-delay: calc(var(--i, 0) 70ms); } .flowbox:hover { border-color: color-mix(in srgb, var(--blue) 38%, var(--line-strong)); box-shadow: 0 16px 30px -22px rgba(27, 42, 74, 0.4); } .flownum { font-family: var(--mono); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; color: var(--blue-deep); } .flowtitle { font-weight: 700; color: var(--ink); font-size: 1.05rem; letter-spacing: -0.01em; margin-top: 10px; } .flowtext { font-size: 0.93rem; color: var(--ink-soft); margin-top: 6px; } /* Connector: a dotted track with a glowing dot that travels box → box. Vertical while the flow is stacked (mobile); horizontal between boxes on wider screens. / .flowconn { position: relative; align-self: center; flex: none; width: 18px; / Full card-to-card span (was 30px floating between two 14px flex gaps), so the dotted line touches both cards and the dot travels the whole way. / height: 58px; transition: opacity 0.5s ease 0.2s; } / Both the dotted track and the dot centre on the same axis via translate(-50%): border-left renders to the right of `left:50%`, so margin-centring the dot left it ~1px off the line — translateX(-50%) on each keeps them sharing one centre. / .flowconn::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; transform: translateX(-50%); border-left: 2px dotted var(--line-strong); } .flowconn::after { content: ""; position: absolute; left: 50%; top: 0; width: 7px; height: 7px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--blue); box-shadow: 0 0 9px 1px color-mix(in srgb, var(--blue) 55%, transparent); opacity: 0; } .flow.is-revealed .flowconn::after { animation: flow-dot-y 1.9s ease-in-out infinite; animation-delay: calc(var(--k, 0) 0.38s); } .flowwrap { display: flex; justify-content: center; color: color-mix(in srgb, var(--blue) 45%, var(--ink-faint)); opacity: 0.7; transition: opacity 0.5s ease 0.2s; } .flowwrap svg { width: 22px; height: 22px; } @keyframes flow-dot-y { 0% { top: 0; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { top: 100%; opacity: 0; } } @keyframes flow-dot-x { 0% { left: 0; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { left: 100%; opacity: 0; } } /* Reveal-on-scroll. Hidden-initial styles apply only once the `reveal` controller marks the block ready, so content is never stuck invisible if JS doesn't run. / .flow.is-reveal-ready .flowbox { opacity: 0; transform: translateY(14px); } .flow.is-reveal-ready .flowconn, .flow.is-reveal-ready .flowwrap { opacity: 0; } .flow.is-reveal-ready.is-revealed .flowbox { opacity: 1; transform: none; } .flow.is-reveal-ready.is-revealed .flowconn { opacity: 1; } .flow.is-reveal-ready.is-revealed .flowwrap { opacity: 0.7; } @media (min-width: 820px) { .flow { gap: 18px; } .flowrow { flex-direction: row; align-items: stretch; gap: 0; } .flowconn { width: 56px; height: 18px; } .flowconn::before { left: 0; right: 0; top: 50%; bottom: auto; / Override the base translateX (the line now spans the full width); centre the horizontal track on top:50% instead. / transform: translateY(-50%); border-left: 0; border-top: 2px dotted var(--line-strong); } .flowconn::after { top: 50%; left: 0; } .flow.is-revealed .flowconn::after { animation-name: flow-dot-x; } } @media (prefers-reduced-motion: reduce) { .flowbox { transition: none; } .flow.is-reveal-ready .flowbox { opacity: 1; transform: none; } .flow.is-reveal-ready .flowconn { opacity: 1; } .flow.is-reveal-ready .flowwrap { opacity: 0.7; } .flow.is-revealed .flowconn::after { animation: none; opacity: 0; } } / ---- Spotlight (inbox + CRM) ----------------------------------------- / .m-spotlightinner { display: grid; grid-template-columns: 1fr; gap: 48px; align-items: center; } .m-spotlightlist { margin-top: 22px; display: flex; flex-direction: column; gap: 14px; } .m-spotlightitem { display: flex; gap: 12px; align-items: flex-start; font-size: 0.98rem; color: var(--ink-soft); } .m-spotlightcheck { flex: none; height: 22px; width: 22px; border-radius: 50%; background: var(--blue-wash); color: var(--blue-deep); display: grid; place-items: center; margin-top: 1px; } .m-spotlightcheck svg { height: 13px; width: 13px; } .m-spotlightitem b { color: var(--ink); font-weight: 650; } @media (min-width: 900px) { .m-spotlightinner { grid-template-columns: 0.95fr 1.05fr; gap: 64px; } } / Carbon press — the auto-file moment. An incoming email (top sheet) lands and presses its carbon copy through onto the contact's record (lower sheet). The reveal-on-scroll choreography is grouped at the end of this section. / .press { position: relative; margin-inline: auto; width: 100%; max-width: 360px; height: 332px; } .pressmail, .pressfile { position: absolute; width: 296px; max-width: calc(100% - 44px); padding: 16px; } / Top sheet: the original email — pure white, lifted in front. / .pressmail { top: 6px; left: 0; z-index: 2; } / Lower carbon sheet: the contact's record — paper-toned, offset behind. / .pressfile { top: 96px; left: 44px; z-index: 1; background: var(--paper-2); border-color: var(--line-strong); box-shadow: 0 16px 34px -26px rgba(27, 42, 74, 0.4); transform: rotate(1.5deg); } .pressavatar { height: 34px; width: 34px; border-radius: 50%; flex: none; display: grid; place-items: center; font-family: var(--mono); font-size: 0.72rem; font-weight: 700; background: var(--ink); color: var(--paper); } .pressavatar--file { background: var(--paper-3); color: var(--ink-soft); border: 1px solid var(--line-strong); } .pressmail-head, .pressfile-head { display: flex; align-items: center; gap: 10px; } .pressmail-head { padding-bottom: 12px; border-bottom: 1px solid var(--line); } .pressmail-id, .pressfile-id { min-width: 0; line-height: 1.25; } .pressmail-from, .pressfile-name { display: block; font-weight: 700; color: var(--ink); font-size: 0.9rem; } .pressmail-addr { display: block; font-family: var(--mono); font-size: 0.66rem; color: var(--ink-faint); margin-top: 1px; } .pressfile-status { display: block; font-size: 0.72rem; color: var(--ink-faint); margin-top: 1px; } .pressmail-time { margin-left: auto; flex: none; font-family: var(--mono); font-size: 0.66rem; color: var(--ink-faint); } .pressmail-subject { margin-top: 12px; font-weight: 650; color: var(--ink); font-size: 0.9rem; } .pressmail-snippet { margin-top: 4px; font-size: 0.82rem; color: var(--ink-faint); line-height: 1.45; } .pressfile-tag { margin-left: auto; flex: none; font-family: var(--mono); font-size: 0.58rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue-deep); background: var(--blue-wash); border-radius: 999px; padding: 3px 8px; } .pressfile-list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } .pressfile-row { display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: 8px; font-size: 0.8rem; color: var(--ink-soft); } .pressfile-row svg { height: 15px; width: 15px; flex: none; color: var(--ink-faint); } .pressfile-row span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } / The freshly carbon-copied row — highlighted, with a check. / .pressfile-row--new { background: var(--blue-wash); color: var(--ink); font-weight: 600; } .pressfile-row--new svg { color: var(--blue); } .pressfile-check { margin-left: auto; } / The "CC" wax stamp inked onto the email corner. / .pressstamp { position: absolute; top: -14px; right: -14px; z-index: 3; height: 46px; width: 46px; border-radius: 50%; background: var(--blue); color: #fff; display: grid; place-items: center; font-family: var(--mono); font-size: 0.78rem; font-weight: 700; box-shadow: 0 10px 20px -8px color-mix(in srgb, var(--blue) 60%, transparent); } / The carbon impression that flashes over the email during the press. / .presscarbon { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(135deg, color-mix(in srgb, var(--blue) 22%, transparent), transparent 62%); opacity: 0; pointer-events: none; } @media (max-width: 480px) { .press { max-width: 320px; height: 320px; } .pressmail, .pressfile { width: 264px; } .pressfile { left: 36px; } } / Reveal-on-scroll choreography, played once. The shared `reveal` controller adds .is-reveal-ready on connect (so the hidden-initial styles apply only when JS is live — no stuck-invisible art) and .is-revealed on scroll-in. The beats, staggered by transition-delay: record settles, email lands, carbon flashes, the copied row files in, the CC stamp inks. / .pressfile { transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1), transform 0.55s cubic-bezier(0.22, 1, 0.36, 1); } .pressmail { transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.14s, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.14s; } .pressfile-row--new { transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.8s, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.8s; } .pressstamp { transition: opacity 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.98s, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.98s; } .press.is-reveal-ready .pressfile { opacity: 0; transform: translateY(14px) rotate(1.5deg); } .press.is-reveal-ready .pressmail { opacity: 0; transform: translateY(-22px); } .press.is-reveal-ready .pressfile-row--new { opacity: 0; transform: translateX(-8px); } .press.is-reveal-ready .pressstamp { opacity: 0; transform: scale(0.4) rotate(-18deg); } .press.is-reveal-ready.is-revealed .pressfile { opacity: 1; transform: translateY(0) rotate(1.5deg); } .press.is-reveal-ready.is-revealed .pressmail { opacity: 1; transform: translateY(0); } .press.is-reveal-ready.is-revealed .pressfile-row--new { opacity: 1; transform: translateX(0); } .press.is-reveal-ready.is-revealed .pressstamp { opacity: 1; transform: scale(1) rotate(0deg); } .press.is-revealed .presscarbon { animation: press-flash 0.5s ease-out 0.62s; } @keyframes press-flash { from { opacity: 0; } 40% { opacity: 0.55; } to { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .pressfile, .pressmail, .pressfile-row--new, .pressstamp { transition: none; } .press.is-reveal-ready .pressfile { opacity: 1; transform: rotate(1.5deg); } .press.is-reveal-ready .pressmail, .press.is-reveal-ready .pressfile-row--new, .press.is-reveal-ready .pressstamp { opacity: 1; transform: none; } .press.is-revealed .presscarbon { animation: none; opacity: 0; } } / ---- Closing CTA band ------------------------------------------------- / .m-cta { position: relative; background: var(--ink); overflow: hidden; } .m-ctawatermark { position: absolute; right: -2%; bottom: -34%; height: clamp(12rem, 28vw, 26rem); width: auto; opacity: 0.04; filter: brightness(0) invert(1); pointer-events: none; user-select: none; } .m-ctainner { position: relative; text-align: center; display: flex; flex-direction: column; align-items: center; } .m-ctatitle { font-size: clamp(2rem, 4vw, 3.1rem); line-height: 1.06; letter-spacing: -0.03em; font-weight: 800; color: #fff; max-width: 18ch; } .m-ctasub { color: color-mix(in srgb, var(--paper) 70%, var(--ink)); margin-top: 16px; max-width: 52ch; } .m-ctaactions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 30px; } / CTA buttons sit on ink: primary becomes blue, secondary becomes paper outline. / .marketing .m-cta .btn-primary { background: var(--blue); color: #fff; border-color: transparent; } .marketing .m-cta .btn-primary:hover { background: var(--blue-deep); color: #fff; } .marketing .m-cta .btn-outline { border-color: color-mix(in srgb, #fff 36%, transparent); color: #fff; } .marketing .m-cta .btn-outline:hover { background: color-mix(in srgb, #fff 10%, transparent); color: #fff; } / ---- Booking modal ---------------------------------------------------- / / * Pure-CSS :target modal. The "Book a demo" CTAs link to #book-modal to open it; * the backdrop and close button link to #book-closed (a fragment that matches no * element) so closing clears :target without scrolling the page. Hidden via * visibility+opacity so it stays out of the tab order until opened. / .m-modal { position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center; padding: 1rem; overflow-y: auto; background: rgb(17 24 39 / 0.6); / gray-900/60 — matches the in-app modal backdrop / backdrop-filter: blur(2px); opacity: 0; visibility: hidden; transition: opacity 0.22s ease, visibility 0.22s ease; } .m-modal:target { opacity: 1; visibility: visible; } / Full-bleed close target sitting behind the dialog; clicking the dimmed area closes. / .m-modalbackdrop { position: absolute; inset: 0; } / * Card chrome mirrors the in-app modal (app/views/layouts/modal.html.erb): white, * rounded-2xl, shadow-xl, a gray-200 border, and a gray-100 bordered header holding * the title and the shared `.btn-icon` close button. The page forces light theme, so * these match the app modal's light-mode appearance. / .m-modaldialog { position: relative; display: flex; flex-direction: column; width: 100%; max-width: 1400px; height: min(900px, calc(100dvh - 2rem)); max-height: calc(100dvh - 2rem); overflow: hidden; background: #fff; border: 1px solid #e5e7eb; / gray-200 / border-radius: 16px; / rounded-2xl / box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); / shadow-xl / transform: translateY(10px) scale(0.99); transition: transform 0.22s ease; } .m-modal:target .m-modaldialog { transform: none; } .m-modalheader { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; / py-4 px-5 / border-bottom: 1px solid #f3f4f6; / gray-100 / } .m-modaltitle { font-size: 1rem; / text-base / line-height: 1.5rem; font-weight: 600; / font-semibold / color: #111827; / gray-900 / } .m-modalframe { flex: 1 1 auto; / fill the dialog height below the header / min-height: 0; display: block; width: 100%; border: 0; } / Lock background scroll while open (progressive; no-ops where :has is unsupported). / body:has(.m-modal:target) { overflow: hidden; } / ---- Footer ----------------------------------------------------------- / .m-footer { border-top: 1px solid var(--line); background: var(--paper); } .m-footerinner { display: grid; grid-template-columns: 1fr; gap: 40px; padding-block: 56px; } .m-footerbrand { max-width: 30ch; } .m-footertagline { color: var(--ink-soft); font-size: 0.95rem; margin-top: 14px; } .m-footercols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; } .m-footercol-title { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 14px; } .m-footerlink { display: block; color: var(--ink-soft); text-decoration: none; font-size: 0.95rem; padding-block: 5px; } .m-footerlink:hover { color: var(--blue-deep); } .m-footerbar { border-top: 1px solid var(--line); padding-block: 22px; display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; } .m-footerlegal { font-size: 0.85rem; color: var(--ink-faint); } / Hold the clean stacked 2-column footer until there's real room for the 3-up link columns; with the 1.4fr brand split they only stop cramping ~1000px. / @media (min-width: 1000px) { .m-footerinner { grid-template-columns: 1.4fr 1fr; gap: 64px; } .m-footercols { grid-template-columns: repeat(3, 1fr); } } / ---- Motion: one-time staggered hero reveal --------------------------- / @keyframes m-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } / Default (no JS, or a renderer that skips the animation): the hero copy is plainly visible — never stuck transparent for a crawler or a screenshot taken before the 0.7s fade. The opacity:0 initial state applies only once JS flags the document (.m-js, set before first paint in the marketing layout head), mirroring the [data-reveal] "is-reveal-ready" gate used below the fold. */ .m-rise { opacity: 1; } .m-js .m-rise { opacity: 0; animation: m-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards; animation-delay: var(--d, 0ms); } @media (prefers-reduced-motion: reduce) { .m-js .m-rise { animation: none; opacity: 1; } .feature { transition: none; } }