:root {
    color-scheme: light;
    --scroll-progress: 0;
    --sky-brightness: 1;
    --scroll-thumb-y: 0px;
    --scroll-thumb-height: 84px;
    --bg: #ffffff;
    --bg-soft: #f2f5f8;
    --bg-sky: #eaf3ff;
    --surface: rgba(255, 255, 255, 0.96);
    --surface-strong: #ffffff;
    --surface-blue: #edf5ff;
    --text: #0f172a;
    --muted: #4f5b6b;
    --subtle: #667386;
    --line: #d7dde5;
    --line-strong: #aeb9c7;
    --blue: #2563eb;
    --blue-strong: #1d4ed8;
    --blue-soft: #e5f1ff;
    --cyan: #1473ff;
    --green: #3f6212;
    --amber: #574600;
    --red: #c0262d;
    --white: #ffffff;
    --radius: 12px;
    --radius-sm: 8px;
    --radius-lg: 16px;

    /* One elevation language with the console. The geometry is fixed; the ink is a
       variable so `theme.css` can hand dark mode its own cast and top rim. */
    /* Public elevation is a suggestion of depth, not a drop shadow. */
    --elevation-contact: rgba(15, 23, 42, .04);
    --elevation-ambient: rgba(15, 23, 42, .04);
    --elevation-ambient-strong: rgba(15, 23, 42, .06);
    --elevation-cast: rgba(15, 23, 42, .09);
    --elevation-rim: transparent;
    --shadow-surface: inset 0 1px 0 var(--elevation-rim), 0 1px 2px var(--elevation-contact), 0 4px 12px var(--elevation-ambient);
    --shadow-raised: inset 0 1px 0 var(--elevation-rim), 0 2px 6px var(--elevation-contact), 0 14px 30px var(--elevation-ambient-strong);
    --shadow-overlay: inset 0 1px 0 var(--elevation-rim), 0 8px 18px var(--elevation-ambient-strong), 0 28px 60px var(--elevation-cast);
    --shadow-soft: var(--shadow-raised);
    --shadow-card: var(--shadow-surface);
    --pixel-shadow-sm: var(--shadow-surface);
    --pixel-shadow-md: var(--shadow-surface);
    --pixel-shadow-lg: var(--shadow-raised);
    --pixel-shadow-blue: 0 6px 18px rgba(0, 111, 238, .16);
    --pixel-shadow-hover: 0 10px 24px rgba(0, 111, 238, .14);

    /* Atmosphere. A flat matte canvas with three abstract layers the scroll handler drifts
       at different rates: soft ambient gradient pools, a dot-matrix blueprint grid, and a
       few low-contrast bezier conduits. No illustration - the product is the hero. */
    --atmos-canvas: #f8fafc;
    --atmos-pool-blue: rgba(66, 133, 244, 0.08);
    --atmos-pool-green: rgba(15, 157, 88, 0.05);
    --atmos-dot: #cbd5e1;
    --atmos-dot-size: 20px;
    --atmos-dot-opacity: 0.55;
    --atmos-conduit: rgba(66, 133, 244, 0.12);
    --atmos-conduit-strong: rgba(15, 157, 88, 0.16);
    --atmos-particle: rgba(66, 133, 244, 0.38);
    /* The reading veil behind the headline, not a wash over the whole scene. */
    --atmos-veil: rgba(255, 255, 255, .30);
    --atmos-veil-strong: rgba(255, 255, 255, .72);

    /* Glass. `--glass-fill` is a translucent paint over the atmosphere, `--glass-stroke`
       the rim that keeps a card findable when the backdrop behind it is pale, and
       `--glass-blur` the single radius every public surface shares. Console surfaces do
       not read these; the directive scopes glass to public marketing pages. */
    /* Header chrome. The glass fill is thin enough for the blur behind it to do something;
       the solid is what a browser without backdrop-filter gets instead. */
    --header-glass: rgba(255, 255, 255, .62);
    --header-solid: rgba(255, 255, 255, .95);
    /* Footer veil, three stops of one colour so the fade never passes through grey. */
    --footer-veil-0: rgba(238, 247, 255, 0);
    --footer-veil-1: rgba(238, 247, 255, .52);
    --footer-veil-2: rgba(238, 247, 255, .94);
    --glass-fill: rgba(255, 255, 255, .72);
    --glass-fill-strong: rgba(255, 255, 255, .86);
    --glass-fill-quiet: rgba(255, 255, 255, .54);
    /* A bright rim all the way round reads as a bevel. The rim is a hairline that exists
       to keep the card findable against a pale backdrop, nothing more. */
    --glass-stroke: rgba(17, 38, 68, .07);
    --glass-edge: rgba(11, 13, 18, .05);
    --glass-highlight: rgba(255, 255, 255, .55);
    --glass-blur: 18px;
    --glass-blur-strong: 28px;
    --glass-saturate: 1.35;

    /* Demo glass. The interactive preview is the one card the page wants a visitor to
       touch, so it carries a heavier, tactile elevation than the rest of the glass system:
       a deeper two-layer shadow and a crisp bevel rather than the ambient lift other
       surfaces use. */
    --demo-glass-fill: rgba(255, 255, 255, 0.85);
    --demo-glass-border: rgba(255, 255, 255, 0.8);
    --demo-glass-outline: rgba(226, 232, 240, 0.6);
    --demo-glass-shadow:
        0 24px 48px -12px rgba(15, 23, 42, 0.08),
        0 4px 12px -2px rgba(15, 23, 42, 0.04);

    /* Route glow. Reserved for the form -> Webtzm -> Google route and the plan card the
       page recommends. It is a signal colour at low alpha, never a decorative bloom, and
       every rule that uses it is disabled under reduced motion. */
    --glow-route: rgba(0, 111, 238, .42);
    --glow-route-soft: rgba(0, 111, 238, .10);
    --glow-relay: rgba(63, 98, 18, .30);
    --glow-spread: 10px;
    /* Card hover. A ring plus a blurred lift, never a spread halo: a shadow with zero blur
       and a large spread paints a hard-edged band around the card rather than light falling
       off it. Both themes carry the same geometry and only change the paint, so a card
       behaves identically whichever one the reader is in. */
    --card-hover-ring: rgba(0, 111, 238, .40);
    --card-hover-lift: 0 14px 30px -14px rgba(0, 68, 160, .38);
    --relay-entry-mark: #0072ff;
    --relay-wire-strong: rgba(23, 74, 150, .52);
    --relay-port-fill: #ffffff;
    --relay-packet-halo: rgba(61, 155, 255, .34);
    --relay-packet-core: #ffffff;
    --relay-signal: #3d9bff;
    --relay-land: #10b981;
    --relay-land-soft: rgba(16, 185, 129, .18);
    --relay-entry-flash: rgba(0, 114, 255, .40);
    --relay-packet: #3d9bff;
    --relay-wire: rgba(23, 74, 150, .34);
    --relay-wire-idle: rgba(23, 74, 150, .20);
    --card-badge-fill: rgba(17, 38, 68, .06);
    --card-badge-fill-active: rgba(0, 111, 238, .14);

    --container: 1150px;
    /* The masthead, the sections and the footer all read this. They did not: the bar carried its
       own 16px below 1120 and its own 12px below 360 while the bands under it stayed at 24, so
       the wordmark sat 8px inside the content it labels on every phone and small laptop. */
    --page-gutter: 24px;
    font-family: Inter, "Inter Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

* {
    box-sizing: border-box;
}

/* Smooth scrolling is opt-out, not unconditional: an unguarded `scroll-behavior: smooth`
   animates every jump for readers who asked for no motion, including the skip link. */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

/* A jumped-to section used to land underneath the fixed header, so the heading the reader
   asked for was the one thing they could not see. The header measures itself into
   `--landing-header-height`; this reserves that much room above every scroll target. */
.landing-section,
.landing-page [id] {
    scroll-margin-top: calc(var(--landing-header-height, 72px) + 24px);
}

html:has(.dashboard-body) {
    overflow-x: clip;
}

@media (max-width: 1120px) {
    :root { --page-gutter: 16px; }
}

.landing-document {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.landing-document::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.landing-document body::-webkit-scrollbar {
    width: 0;
    height: 0;
}

body {
    margin: 0;
    min-height: 100dvh;
    background: var(--bg);
    color: var(--text);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body:not(.landing-page)::before {
    content: "";
    position: fixed;
    inset: auto 0 0 0;
    height: 56vh;
    z-index: -2;
    pointer-events: none;
    background: url("/assets/pixel-cloudscape-soft.webp") right bottom / min(1160px, 100vw) auto no-repeat;
    opacity: 0.25;
}

.landing-page {
    min-height: 100dvh;
    background: transparent;
    isolation: isolate;
}

.landing-page[data-sky-section="product"] {
    --sky-brightness: 1.03;
}

.landing-page[data-sky-section="value"] {
    --sky-brightness: 1.02;
}

.landing-page[data-sky-section="demo"] {
    --sky-brightness: 1;
}

.landing-page[data-sky-section="workflow"] {
    --sky-brightness: 0.99;
}

.landing-page[data-sky-section="use-cases"] {
    --sky-brightness: 0.98;
}

.landing-page[data-sky-section="integrations"] {
    --sky-brightness: 0.98;
}

.landing-page[data-sky-section="pricing"] {
    --sky-brightness: 0.97;
}

.landing-page[data-sky-section="faq"] {
    --sky-brightness: 0.96;
}

.landing-page[data-sky-section="footer"] {
    --sky-brightness: 0.95;
}

.parallax-scene {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    contain: strict;
}

/* The flat matte base every layer sits on. Static - the three layers above it carry all
   of the motion, at three different scroll rates. */
.atmos-canvas {
    position: absolute;
    inset: -6% -6%;
    background: var(--atmos-canvas);
}

/* Layer 1 - deepest, slowest (0.05x). Diffused ambient gradient pools in Google Cobalt
   and Sheets Emerald, low enough in alpha to read as air rather than paint. */
.atmos-pools {
    position: absolute;
    inset: -6% -6%;
    will-change: transform;
    background:
        radial-gradient(ellipse 58% 46% at 8% 4%, var(--atmos-pool-blue), transparent 70%),
        radial-gradient(ellipse 54% 42% at 96% 16%, var(--atmos-pool-green), transparent 72%),
        radial-gradient(ellipse 50% 40% at 84% 94%, var(--atmos-pool-blue), transparent 74%);
}

/* Layer 2 - structural midground (0.15x). A crisp, low-opacity dot matrix - the
   developer-blueprint cue. One repeating gradient rather than a tiled raster or SVG
   pattern, so it costs nothing extra to paint or scale. */
.atmos-grid {
    position: absolute;
    inset: -6% -6%;
    will-change: transform;
    background-image: radial-gradient(var(--atmos-dot) 1px, transparent 1px);
    background-size: var(--atmos-dot-size) var(--atmos-dot-size);
    opacity: var(--atmos-dot-opacity);
}

/* Layer 3 - foreground accent conduit (0.3x). A handful of soft bezier paths and
   micro-particles that carry the eye from the headline down toward the interactive demo,
   drifting fastest of the three because it reads as nearest the reader. */
.atmos-conduits {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 220vh;
    will-change: transform;
}

.atmos-conduit {
    fill: none;
    stroke: var(--atmos-conduit);
    stroke-width: 1.4;
    vector-effect: non-scaling-stroke;
}

.atmos-conduit--accent {
    stroke: var(--atmos-conduit-strong);
    stroke-width: 1.6;
}

.atmos-particle {
    fill: var(--atmos-particle);
}

@media (prefers-reduced-motion: reduce) {
    .atmos-pools,
    .atmos-grid,
    .atmos-conduits {
        transform: none;
        will-change: auto;
    }
}

.landing-page::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    /* This veil existed to tame a busy pixel raster. The drawn atmosphere is already
       authored at the value it should read at, so the veil now only lifts the top-left
       corner where the headline sits, and leaves the rest of the scene alone. */
    background:
        radial-gradient(ellipse 62% 52% at 16% 22%, var(--atmos-veil-strong), transparent 68%),
        linear-gradient(180deg, var(--atmos-veil) 0%, transparent 44%);
}

.landing-page main,
.landing-page .site-footer {
    position: relative;
    z-index: 2;
}

.landing-page .section-rail {
    z-index: 35;
}

a {
    color: inherit;
}

img {
    display: block;
    max-width: 100%;
}

button,
input,
textarea,
select {
    font: inherit;
}

.brand {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    width: max-content;
    color: var(--text);
    text-decoration: none;
    /* The wordmark is the <img>; `.brand-word` beside it is clipped to 1x1px for screen readers,
       so no font here has ever painted a pixel. It used to name a licensed-for-evaluation demo
       face, which shipped 68 KB to production to render nothing. Inter is inherited. */
    /* Brand wordmark: an owned asset, deliberately off the text scale. */
    font-size: 2.3rem;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 0.86;
    font-synthesis-weight: auto;
    position: relative;
}

.brand-word {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.brand-word-web,
.brand-word-tzm {
    display: inline-block;
    color: currentColor;
}

.brand-word-web {
    color: var(--blue);
}

.brand-logo {
    display: block;
    width: 128px;
    height: 28px;
    /* A soft trailing long-shadow rather than a single hard offset: three drop-shadows at
       increasing distance and decreasing opacity read as light falling away from the mark,
       not as a boxed-in silhouette. `drop-shadow` follows the logo's own alpha shape, which
       a `box-shadow` on an `<img>` cannot - it would draw a rectangle instead of a wordmark. */
    filter:
        drop-shadow(1px 1px 0 rgba(30, 41, 59, 0.16))
        drop-shadow(2px 2px 2px rgba(30, 41, 59, 0.10))
        drop-shadow(4px 4px 5px rgba(30, 41, 59, 0.06));
}

.site-footer a{
    position: relative;
    text-decoration: none;
}

.site-nav a:hover,
.site-footer a:hover{
    color: var(--blue-strong);
}

.section-rail {
    position: fixed;
    right: 26px;
    top: 50%;
    z-index: 35;
    display: grid;
    gap: 0;
    transform: translateY(-50%);
    transition: opacity 160ms ease;
}

.section-rail a {
    position: relative;
    width: 44px;
    height: 44px;
}

/* The rail marks position, so it should be readable at a glance and invisible otherwise.
   Eight outlined 11px squares with their own shadows were a row of tiny buttons; eight
   short rules are a scale. The 44px hit area is unchanged — only the mark inside it is. */
.section-rail a::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 1px;
    border-radius: 999px;
    background: var(--line-strong);
    opacity: 0.7;
    transform: translate(-50%, -50%);
    transition: width 160ms ease, background 160ms ease, opacity 160ms ease;
}

.section-rail a:hover::before {
    opacity: 1;
}

.section-rail a.is-active::before {
    width: 22px;
    height: 2px;
    background: var(--blue);
    opacity: 1;
}

.section-rail a:focus-visible {
    outline: 2px solid rgba(0, 104, 232, 0.58);
    outline-offset: 5px;
}

.floating-scrollbar {
    position: fixed;
    top: 96px;
    right: 14px;
    bottom: 46px;
    z-index: 38;
    /* A 10px glass tube with its own rim and cast was a piece of furniture. The track is a
       hairline; the thumb is the only part that needs to be seen. */
    width: 3px;
    cursor: pointer;
    pointer-events: auto;
    touch-action: none;
    user-select: none;
    border-radius: 999px;
    background: var(--glass-stroke);
}

/* The rail paints as a 3px hairline on purpose - anything wider read as furniture. A 3px
   pointer target is a different question from a 3px mark, so the hit area is widened here
   without touching what is drawn: an invisible strip centred on the rail, inside the element
   so the thumb's own geometry is untouched. */
.floating-scrollbar::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline: -10px;
}

.floating-scrollbar:focus-visible {
    outline: 2px solid rgba(0, 104, 232, 0.58);
    outline-offset: 5px;
}

.floating-scrollbar.is-dragging {
    background: rgba(255, 255, 255, 0.52);
}

.floating-scrollbar__thumb {
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: var(--scroll-thumb-height);
    border-radius: 999px;
    background: var(--line-strong);
    transform: translateY(var(--scroll-thumb-y));
    transition: height 120ms ease, background 160ms ease, transform 80ms linear;
}

.floating-scrollbar:hover .floating-scrollbar__thumb,
.floating-scrollbar.is-dragging .floating-scrollbar__thumb,
.floating-scrollbar:focus-visible .floating-scrollbar__thumb {
    background: var(--blue);
}

.floating-scrollbar:hover .floating-scrollbar__thumb,
.floating-scrollbar.is-dragging .floating-scrollbar__thumb {
    background: linear-gradient(180deg, rgba(0, 116, 255, 0.98), rgba(0, 63, 148, 1));
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.72), 0 12px 32px rgba(0, 79, 184, 0.34);
}

.header-actions,
.hero-actions{
    display: flex;
    align-items: center;
    gap: 12px;
}

.btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 2px solid transparent;
    border-radius: var(--radius-sm);
    padding: 0 16px;
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.btn:hover {
    transform: translate(-1px, -1px);
}

.btn-primary {
    color: white;
    background: var(--blue);
    box-shadow: var(--pixel-shadow-blue);
}

.btn-primary:hover {
    background: var(--blue-strong);
    box-shadow: var(--shadow-surface);
}

.btn-secondary {
    color: var(--text);
    background: var(--surface-blue);
    border-color: var(--line);
    
}

.btn-large {
    min-height: 50px;
    padding: 0 24px;
}

.btn-google {
    gap: 8px;
}

.google-mark {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    padding: 3px;
    border-radius: 50%;
    background: #fff;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08), 0 1px 0 rgba(255, 255, 255, 0.48);
}

.section-dark,
.section-light {
    position: relative;
    padding: 64px max(var(--page-gutter), calc((100% - var(--container)) / 2));
}

.landing-section {
    overflow: clip;
}

.landing-page .section-dark {
    background: transparent;
}

.landing-page .section-light {
    background: transparent;
}

.landing-page .value-band {
    background: transparent;
    backdrop-filter: none;
}

.landing-page .demo-section,
.landing-page .use-cases,
.landing-page .integrations,
.landing-page .faq {
    backdrop-filter: none;
}

.landing-page.parallax-ready .reveal-section > * {
    opacity: 1;
    transform: translateY(26px);
    transition: transform 620ms ease;
}

.landing-page.parallax-ready .reveal-section.is-visible > * {
    opacity: 1;
    transform: translateY(0);
}

.landing-page .section-heading h2,
.landing-page .split-section h2,
.landing-page .hero h1 {
    text-shadow: 0 2px 18px rgba(255, 255, 255, 0.76);
}

.landing-page .hero-lede,
.landing-page .section-heading p,
.landing-page .proof-row,
.landing-page .consent-note,
.landing-page .site-footer p,
.landing-page .site-footer nav {
    text-shadow: 0 1px 12px rgba(255, 255, 255, 0.72);
}

/* The footer carried no copyright line and no statement of what Webtzm does with a
   Google account — the two things a visitor checks before signing in. Both live here now,
   below the link columns and above nothing else. */
.footer-legal {
    position: relative;
    z-index: 1;
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
}

.footer-copyright {
    margin: 0;
    color: var(--subtle);
    font-size: 12px;
    font-weight: 400;
}

.footer-assurances {
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    list-style: none;
}

.footer-assurances li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--subtle);
    font-size: 12px;
    font-weight: 500;
}

/* A tick, not a shield badge: the claim is the content, and a coloured chip around each
   one would say the same thing twice. */
.footer-assurances li::before {
    content: "";
    width: 5px;
    height: 5px;
    flex: none;
    border-radius: 50%;
    background: var(--green);
}

@media (max-width: 620px) {
    .footer-legal {
        flex-direction: column;
        align-items: flex-start;
    }
}

.landing-page .site-footer {
    background: transparent;
    backdrop-filter: none;
    isolation: isolate;
    overflow: hidden;
    padding-top: 64px;
}

/* The footer fades up out of the atmosphere. Two things made that fade show a hard line.

   The gradient was written in fixed light values with no dark counterpart, so on a dark page
   it laid a near-white wash over a near-black footer and the top of that wash was a visible
   edge rather than a fade. It is a pair of tokens now, and both themes state all three stops.

   The stops also have to be the same colour at every alpha. Fading from one hue at alpha 0 to
   a different hue at alpha 1 desaturates through the middle, which reads as a grey band even
   when every stop is correct on its own.

   And the backdrop-filter is gone. A filter starts at its element's box edge, so the blur
   began abruptly at the footer's first pixel - that boundary is a line no gradient can hide,
   because the gradient fades the paint while the filter does not fade at all. */
.landing-page .site-footer::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(180deg,
        var(--footer-veil-0) 0%,
        var(--footer-veil-1) 34%,
        var(--footer-veil-2) 72%,
        var(--footer-veil-2) 100%);
}

.landing-page .site-header,
.landing-page .value-band,
.landing-page .section-grid,
.landing-page .section-grid article,
.landing-page .demo-panel,
.landing-page .sheet-panel,
.landing-page .workflow-detail,
.landing-page .architecture-strip,
.landing-page .flow-node,
.landing-page .atlas-stage,
.landing-page .use-case-infinite,
.landing-page .integration-card,
.landing-page .price-card,
.landing-page .faq-list,
.landing-page .site-footer {
    border-color: transparent;
}

.landing-page .site-header,
.landing-page .value-band,
.landing-page .faq-list,
.landing-page .site-footer {
    border-top: 0;
    border-bottom: 0;
}

/* The hero and pricing bands used to paint a second copy of the cloud raster over the
   fixed one. The drawn atmosphere already sits behind them, so these bands now only
   soften what shows through. */
.section-dark {
    background: linear-gradient(180deg, var(--atmos-veil), transparent 38%);
}

.section-light {
    background: var(--bg);
}

.hero {
    overflow: hidden;
    isolation: isolate;
    min-height: calc(100dvh - 96px);
    display: grid;
    grid-template-columns: minmax(0, 0.88fr) minmax(360px, 0.72fr);
    align-items: center;
    gap: 48px;
    padding-top: 64px;
    padding-bottom: 64px;
    background: transparent;
}

.hero > * {
    position: relative;
    z-index: 2;
}

/* Display type leans light and tracks tight. At 56px, weight 500 with zero tracking reads
   as a heavy 2014 SaaS headline; 400 with -0.028em is the same size reading as considered
   rather than loud. Sizes are the display scale in px — a fractional `rem` clamp compounds
   into values off the scale at intermediate widths. */
.hero h1{
    max-width: 15ch;
    margin: 0;
    font-size: clamp(40px, 4.6vw, 56px);
    font-weight: 400;
    line-height: 1.04;
    letter-spacing: -0.028em;
    text-wrap: balance;
}

.hero-lede,
.section-heading p,
.split-section p {
    max-width: 690px;
    color: var(--muted);
    font-size: 16px;
}

/* The lede is the only body text on the page that gets the 20px step. Longer measures read
   as a wall; 46 characters keeps it to three lines at desktop. */
.hero-lede {
    max-width: 46ch;
    margin: 24px 0 32px;
    font-size: 20px;
    line-height: 1.5;
    letter-spacing: -0.01em;
}

/* A plan marker is a footnote about billing, not a second claim about the product. The docs
   surface sets the same marker as `.docs-tag--pro`, a filled chip - which works in a heading
   or a table cell, where it has a line of its own to sit on. Inside a running sentence a chip
   interrupts the measure, so the landing form keeps the tag's 11px/600 and brand hue and
   spends them on a superscript instead. `line-height: 0` keeps it out of the line box, so the
   lede and every feature bullet carrying one are exactly as tall as they were without it.
   The visible word is "Pro"; the accessible text is " Pro plan", because "Pro" alone runs
   into the word it follows and then reads as an adjective for it. */
.plan-mark {
    margin-left: 2px;
    color: var(--blue-strong);
    font-size: 11px;
    font-weight: 600;
    line-height: 0;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.proof-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
    margin-top: 28px;
    color: var(--muted);
    font-size: 14px;
}

.proof-row span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* The one line of consent under the sign-in buttons. Signing in is where a person agrees to the
   Terms and Privacy Policy, so it says so where the button is; it is set as small print because the
   console asks again, properly, before it opens. */
.consent-note {
    margin: 12px 0 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
}

.consent-note a {
    color: var(--blue-strong);
    text-underline-offset: 2px;
    white-space: nowrap;
}

.pricing-terms .consent-note {
    margin: 0 0 8px;
}

/* This was an 8px square with a second square offset 4px beside it — a hard-edged pixel
   mark, which is most of why the row read as retro. One small round tick instead. */
.proof-row span::before {
    content: "";
    width: 5px;
    height: 5px;
    flex: none;
    border-radius: 50%;
    background: var(--blue);
}

.hero-visual {
    border: 0;
    border-radius: var(--radius-lg);
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
}

.landing-page .hero-visual {
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
}

.parallax-card {
    transition: transform 90ms linear;
}

.cloud-route {
    --relay-cycle: 4.2s;
    position: relative;
    min-height: 430px;
    padding: 24px;
    overflow: visible;
    background: transparent;
}

.cloud-route::before {
    content: none;
}

.cloud-route::after {
    content: none;
}

.route-road {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.route-road path {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.route-depth {
    stroke: var(--glow-route-soft);
    stroke-width: 12;
}

.route-line {
    stroke: url("#route-gradient");
    stroke-width: 4;
}

.route-icon {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    width: var(--icon-size, 42px);
    height: var(--icon-size, 42px);
    display: grid;
    place-items: center;
    color: var(--icon-color);
    background: transparent;
    box-shadow: none;
    transform: translate(-50%, -50%);
    transition: transform 180ms ease;
}

/* Icons sit flat on the tile. The white 2px offset drop-shadow under each one was an
   emboss, and a 1.9 stroke at 28px is a heavy icon; 1.5 reads as drawn rather than
   stamped. */
.route-icon svg {
    width: calc(var(--icon-size, 42px) * 0.62);
    height: calc(var(--icon-size, 42px) * 0.62);
}

.route-icon img {
    width: calc(var(--icon-size, 42px) * 1.02);
    height: calc(var(--icon-size, 42px) * 0.8);
    object-fit: contain;
}

.route-icon path {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.webtzm-icon {
    color: #4d7c0f;
}

.webtzm-icon img {
    image-rendering: crisp-edges;
}

.workspace-icon .google-blue {
    fill: #4285f4;
}

.workspace-icon .google-green {
    fill: #34a853;
}

.workspace-icon .google-yellow {
    fill: #fbbc05;
}

.workspace-icon .google-red {
    fill: #ea4335;
}

.google-mini .google-blue {
    fill: #4285f4;
}

.google-mini .google-green {
    fill: #34a853;
}

.google-mini .google-yellow {
    fill: #fbbc05;
}

.google-mini .google-red {
    fill: #ea4335;
}

.section-heading {
    max-width: 760px;
    margin: 0 auto 42px;
    text-align: center;
}

.section-heading h2,
.split-section h2 {
    margin: 0;
    font-size: clamp(32px, 3.4vw, 40px);
    font-weight: 400;
    line-height: 1.08;
    letter-spacing: -0.024em;
    text-wrap: balance;
}

.section-heading p {
    margin: 16px auto 0;
}

.value-band {
    padding-top: 64px;
    padding-bottom: 64px;
    border-block: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.78);
}

.feature-deck {
    position: relative;
    max-width: var(--container);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    align-items: start;
    min-height: 292px;
    padding: 16px 0 12px;
}

.feature-deck::before {
    content: "";
    position: absolute;
    inset: 44px 18px 42px;
    border-radius: 16px;
    background:
        linear-gradient(90deg, rgba(0, 104, 232, 0.12) 1px, transparent 1px) 0 0 / 26px 26px,
        linear-gradient(rgba(0, 104, 232, 0.08) 1px, transparent 1px) 0 0 / 26px 26px,
        radial-gradient(circle at 12% 28%, rgba(0, 104, 232, 0.12), transparent 24%),
        radial-gradient(circle at 88% 66%, rgba(0, 104, 232, 0.10) , transparent 24%);
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    opacity: 0.72;
    pointer-events: none;
}

.lift-card {
    position: relative;
    overflow: hidden;
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.lift-card::before {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.46));
    opacity: 0;
    transition: opacity 180ms ease;
}

.lift-card > * {
    position: relative;
    z-index: 1;
}

.lift-card:hover,
.lift-card:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 22px 58px rgba(0, 79, 184, 0.14);
}

.lift-card:hover::before,
.lift-card:focus-visible::before {
    opacity: 1;
}

.feature-card {
    --card-accent: #0072ff;
    display: grid;
    grid-template-columns: 42px 1fr;
    grid-template-rows: auto auto 1fr;
    gap: 4px 12px;
    align-content: start;
    min-height: 230px;
    padding: 16px;
    
    border-radius: var(--radius-lg);
    background:
        linear-gradient(180deg, var(--glass-highlight), transparent 46%),
        var(--glass-fill);
    box-shadow:
        inset 0 0 0 1px var(--glass-stroke),
        var(--shadow-surface);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .feature-card {
        -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
        backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
        background:
            linear-gradient(180deg, var(--glass-highlight), transparent 46%),
            var(--glass-fill-quiet);
    }
}

.feature-card::after {
    content: "";
    position: absolute;
    z-index: 0;
    left: 12px;
    top: 14px;
    width: 54px;
    height: 46px;
    border-radius: 999px;
    background:
        radial-gradient(circle at 40% 44%, color-mix(in srgb, var(--card-accent) 34%, rgba(255, 255, 255, 0.8)), transparent 54%),
        radial-gradient(circle at 70% 38%, rgba(255, 255, 255, 0.72), transparent 42%);
    filter: blur(11px);
    opacity: 0.54;
}

.feature-card.lift-card:hover,
.feature-card.lift-card:focus-visible {
    transform: translateY(-5px);
}

/* Offsets were -4px, 30px, 2px and 26px: not a cascade and not a row, just four cards
   that missed. With a heading above them they line up. */

.feature-icon,
.integration-icon{
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
}

.feature-icon {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 38px;
    height: 38px;
    border-radius: var(--radius-lg);
    color: var(--card-accent);
    background: color-mix(in srgb, var(--card-accent) 11%, rgba(255, 255, 255, 0.88));
    
    filter: drop-shadow(0 8px 12px color-mix(in srgb, currentColor 14%, transparent));
}

.feature-icon svg{
    width: 21px;
    height: 21px;
}

.feature-icon svg path{
    fill: none;
    stroke: currentColor;
    stroke-width: 1.85;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.feature-icon.google-mini svg path {
    stroke: none;
}

.feature-kicker {
    grid-column: 2;
    grid-row: 1;
    display: inline-flex;
    margin: 0;
    color: var(--blue-strong);
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
}

.feature-card h3 {
    grid-column: 2;
    grid-row: 2;
    margin: 0;
    font-size: 16px;
    line-height: 1.15;
}

.feature-card p {
    grid-column: 1 / -1;
    margin: 0;
    padding-top: 8px;
    color: var(--muted);
    line-height: 1.45;
}

/* Each card used to carry one paragraph a reader had to finish before learning whether it
   applied to them. The lede states the promise; these state what you get. The marker is a
   route tick, the same shape the proof row uses, so the two read as one language. */
.feature-points {
    grid-column: 1 / -1;
    margin: 12px 0 0;
    padding: 0;
    display: grid;
    gap: 8px;
    list-style: none;
}

.feature-points li {
    position: relative;
    padding-left: 24px;
    color: var(--muted);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.45;
}

.feature-points li::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 6px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--blue);
}

/* One glass definition serves every public panel. It stacks a highlight gradient over a
   translucent fill so the rim reads on a pale backdrop as well as a dark one, and puts the
   boundary in the `box-shadow` rather than a border, so the card keeps its measured size.
   `backdrop-filter` is progressive: without it the fill alone still separates the card
   from the atmosphere, which is why the alpha never goes below .54. */
.demo-panel,
.sheet-panel,
.workflow-detail,
.architecture-strip,
.atlas-stage,
.use-case-infinite,
.price-card{
    border-radius: var(--radius-lg);
    background:
        linear-gradient(180deg, var(--glass-highlight), transparent 46%),
        var(--glass-fill);
    box-shadow:
        inset 0 0 0 1px var(--glass-stroke),
        var(--shadow-raised);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .demo-panel,
    .sheet-panel,
    .workflow-detail,
    .architecture-strip,
    .atlas-stage,
    .use-case-infinite,
    .price-card{
        -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
        backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
        background:
            linear-gradient(180deg, var(--glass-highlight), transparent 46%),
            var(--glass-fill-quiet);
    }
}

table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

th,
td {
    padding: 16px 16px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    white-space: nowrap;
}

th {
    color: var(--subtle);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

td {
    color: var(--text);
    font-size: 14px;
}

th:nth-child(1),
td:nth-child(1) {
    width: 16%;
}

th:nth-child(2),
td:nth-child(2) {
    width: 20%;
}

th:nth-child(3),
td:nth-child(3) {
    width: 26%;
}

th:nth-child(4),
td:nth-child(4) {
    width: 38%;
    white-space: normal;
    overflow-wrap: anywhere;
}

@keyframes rowFlash {
    0% { background: rgba(99, 102, 241, 0.16); }
    100% { background: transparent; }
}

@keyframes detailSwap {
    0% {
        opacity: 0;
        transform: translateY(8px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.use-cases {
    padding-top: 64px;
    padding-bottom: 64px;
}

.use-case-atlas {
    max-width: var(--container);
    margin: 0 auto;
    display: grid;
    gap: 16px;
}

.atlas-stage {
    position: relative;
    min-height: 410px;
    display: grid;
    grid-template-columns: minmax(250px, 300px) minmax(340px, 1fr) minmax(250px, 300px);
    gap: 32px;
    align-items: center;
    overflow: hidden;
    isolation: isolate;
    padding: 32px 32px 32px;
    
    border-radius: var(--radius-lg);
    background:
        linear-gradient(140deg, rgba(255, 255, 255, 0.86), rgba(247, 249, 255, 0.66)),
        radial-gradient(circle at 50% 50%, rgba(0, 104, 232, 0.09), transparent 36%),
        radial-gradient(circle at 86% 76%, rgba(35, 139, 97, 0.10), transparent 28%);
    box-shadow: 0 22px 58px rgba(0, 79, 184, 0.11);
}

.atlas-stage::before,
.atlas-stage::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

.atlas-stage::before {
    opacity: 0.42;
    background-image:
        linear-gradient(rgba(99, 102, 241, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(99, 102, 241, 0.08) 1px, transparent 1px);
    background-size: 32px 32px;
    mask-image: radial-gradient(circle at 50% 50%, #000 16%, transparent 72%);
}

.atlas-stage::after {
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.82), transparent 18%, transparent 82%, rgba(255, 255, 255, 0.84)),
        linear-gradient(180deg, rgba(255, 255, 255, 0.78), transparent 24%, transparent 76%, rgba(255, 255, 255, 0.74));
}

.landing-page .process-atlas .atlas-stage,
.process-atlas .atlas-stage {
    overflow: visible;
    border-color: transparent;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
}

.process-atlas .atlas-stage::before,
.process-atlas .atlas-stage::after {
    display: none;
}

.process-lines {
    position: absolute;
    inset: 0;
    z-index: 3;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.process-bus,
.process-hub-link,
.process-spine,
.process-join,
.process-transfer {
    fill: none;
    stroke: rgba(0, 104, 232, 0.16);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.process-bus,
.process-hub-link {
    stroke: rgba(100, 116, 139, 0.30);
}

.process-bus {
    stroke-dasharray: 3 7;
}

.process-spine {
    stroke: rgba(100, 116, 139, 0.26);
}

.process-spine--mini {
    stroke: rgba(35, 139, 97, 0.18);
}

.process-transfer {
    stroke: rgba(35, 139, 97, 0.28);
    stroke-width: 1.5;
}

.process-transfer--flow {
    stroke: url(#route-green);
    stroke-width: 2.4;
    stroke-dasharray: 8 12;
    animation: atlasFlow 2.4s linear infinite;
}

/* The selected route glows; the unselected ones do not. That is the whole point of the
   glow here — it is how the diagram says which intake you picked, so it reads as state
   rather than decoration, and dark mode raises the same token instead of adding neon. */
.case-path {
    opacity: 0;
    stroke: url(#route-blue);
    stroke-width: 2.3;
    stroke-dasharray: none;
    transition: opacity 180ms ease;
}

/* The selected route stays a continuous line. A first pass animated the dash on this path
   itself, which meant that for most of each cycle the connection simply was not drawn —
   the diagram read as broken rather than active. Movement belongs to the packet already
   travelling this path, and the glow is what marks it as the selected one. */
.case-path.active {
    opacity: 1;
    filter: drop-shadow(0 0 var(--glow-spread) var(--glow-route-soft));
}

.flow-packet {
    fill: var(--glass-fill-strong);
    stroke: var(--blue);
    stroke-width: 1.5;
    opacity: 0;
    filter: drop-shadow(0 0 8px var(--glow-route));
    vector-effect: non-scaling-stroke;
}

.case-flow.active {
    opacity: 1;
}

.flow-packet--output {
    opacity: 1;
    stroke: var(--green);
    filter: drop-shadow(0 0 8px var(--glow-relay));
}

/* Reduced motion keeps the route legible and stops it moving. Every wire keeps its solid
   base stroke, so removing the packets removes the movement without removing the connection,
   and the relay keeps its rim without the sweep.

   This is the whole mechanism now. It used to be half of one: the hero also ran SMIL, which
   ignores this query entirely and had to be parked by pausing the SVG timeline from site.js.
   That went with the orbit rings it existed for. */
@media (prefers-reduced-motion: reduce) {
    .process-transfer--flow,
    .route-flow,
    .relay-pulse,
    .relay-matrix,
    .relay-matrix b,
    .relay-hub::after,
    .relay-out--selected,
    .relay-chip--source,
    .relay-chip--source::before,
    .relay-chip--source > * {
        animation: none;
    }
}

.process-column,
.process-hub {
    position: relative;
    z-index: auto;
}

.process-column > *,
.process-hub > * {
    position: relative;
    z-index: 4;
}

/* Stage indicator. The number was inside the label text, so the eye had to read a
   sentence to find its place in the sequence. It is a chip now: position first, then the
   verb for that stage. */
.process-step-label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    color: var(--subtle);
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0;
    text-transform: uppercase;
}

/* The number is a position marker, not a badge. A filled chip at 24px competed with the
   card titles beside it; a tabular numeral on a hairline rule reads as sequence. */
.process-step-label__index {
    display: inline-flex;
    align-items: center;
    padding-right: 8px;
    border-right: 1px solid var(--line);
    color: var(--subtle);
    font-size: 11px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.06em;
}

/* Stage 02 is the one Webtzm performs, so its numeral takes the route colour the
   connectors either side of it already use. Colour alone, no container. */
.process-step-label--relay .process-step-label__index {
    color: var(--blue);
    border-right-color: var(--glow-route-soft);
}

.process-step-label__text {
    min-width: 0;
}

.intake-list {
    display: grid;
    gap: 12px;
}

.use-case-node {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
        "index title"
        "index copy";
    gap: 4px 12px;
    align-items: center;
    min-height: 74px;
    width: 100%;
    padding: 12px 12px;
    border: 1px solid rgba(201, 223, 255, 0.56);
    border-radius: var(--radius-lg);
    color: var(--muted);
    background: rgba(255, 255, 255, 0.70);
    
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background 180ms ease, color 180ms ease;
    backdrop-filter: blur(12px);
}

.use-case-node::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -7px;
    width: 10px;
    height: 10px;
    border: 2px solid rgba(0, 104, 232, 0.24);
    border-radius: 999px;
    background: #ffffff;
    
    transform: translateY(-50%);
    transition: border-color 180ms ease, box-shadow 180ms ease;
}

.use-case-node:hover,
.use-case-node:focus-visible,
.use-case-node.active {
    color: var(--text);
    border-color: rgba(0, 104, 232, 0.72);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 18px 42px rgba(0, 79, 184, 0.14);
    transform: translate(-2px, -2px);
}

.use-case-node.active::after {
    border-color: var(--blue);
    box-shadow: 0 0 0 5px rgba(0, 104, 232, 0.14), 0 0 18px rgba(0, 104, 232, 0.32);
}

.use-case-node:focus-visible,
.use-case-mini:focus-visible {
    outline: 3px solid rgba(0, 104, 232, 0.24);
    outline-offset: 3px;
}

.use-case-node__index {
    grid-area: index;
    width: 36px;
    height: 36px;
    display: inline-grid;
    place-items: center;
    border: 1px solid rgba(201, 223, 255, 0.74);
    border-radius: 8px;
    color: var(--blue-strong);
    background: rgba(238, 242, 255, 0.94);
    
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
}

.use-case-node strong {
    grid-area: title;
    min-width: 0;
    color: var(--text);
    font-size: 16px;
    line-height: 1.08;
}

.use-case-node span:last-child {
    grid-area: copy;
    min-width: 0;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.24;
}

.intake-mini-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 10px;
}

.intake-mini-grid::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -6px;
    width: 10px;
    height: 10px;
    border: 2px solid var(--blue);
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 0 0 5px rgba(238, 242, 255, 0.82);
    transform: translateY(-50%);
}

.use-case-mini {
    position: relative;
    min-height: 44px;
    padding: 0 8px;
    border: 1px solid rgba(201, 223, 255, 0.58);
    border-radius: 8px;
    color: var(--blue-strong);
    background: rgba(255, 255, 255, 0.66);
    
    font: inherit;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.use-case-mini::after {
    content: none;
}

.use-case-mini:hover,
.use-case-mini.active {
    border-color: rgba(0, 104, 232, 0.62);
    background: rgba(238, 242, 255, 0.94);
    box-shadow: var(--shadow-surface);
    transform: translateY(-2px);
}

.process-hub {
    min-height: 288px;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 8px;
    padding: 12px 16px 12px;
    border: 0;
    color: #4d7c0f;
    text-align: center;
    background: transparent;
    box-shadow: none;
}

.landing-page .process-hub {
    background: transparent;
    backdrop-filter: none;
    box-shadow: none;
}

.output-card::before {
    content: "";
    position: absolute;
    top: 50%;
    z-index: 2;
    width: 13px;
    height: 13px;
    
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 0 0 6px rgba(238, 242, 255, 0.88);
    transform: translateY(-50%);
}

.process-cloud-lockup {
    display: grid;
    justify-items: center;
    gap: 8px;
}

.process-cloud-title {
    color: var(--text);
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    text-shadow: 0 1px 12px rgba(255, 255, 255, 0.92);
}

.process-cloud-node {
    --cloud-fill-top: #f7fffb;
    --cloud-fill-mid: #dcfce7;
    --cloud-fill-bottom: #a8eacc;
    --cloud-edge: rgba(77, 124, 15, 0.34);
    --cloud-border: rgba(77, 124, 15, 0.24);
    --cloud-shadow: rgba(77, 124, 15, 0.27);
    --cloud-glow: rgba(77, 124, 15, 0.18);
    --icon-size: clamp(48px, 5.3vw, 58px);
    --cloud-w: clamp(156px, 18vw, 196px);
    --cloud-h: clamp(106px, 11vw, 130px);
    position: relative;
    width: var(--cloud-w);
    height: var(--cloud-h);
    display: grid;
    place-items: center;
    isolation: isolate;
}

/* The hub is the same tile as the route stops, one elevation step up because it is the
   component the whole diagram is about. */
.process-cloud-node::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: var(--radius);
    background:
        linear-gradient(180deg, var(--glass-highlight), transparent 52%),
        var(--glass-fill-strong);
    box-shadow:
        inset 0 0 0 1px var(--glow-route),
        var(--shadow-raised);
    transition: box-shadow 180ms ease;
}

.process-cloud-node .route-icon {
    position: relative;
    left: auto;
    top: auto;
    z-index: 3;
    width: var(--icon-size);
    height: var(--icon-size);
    transform: none;
}

.process-cloud-node .route-icon svg {
    width: calc(var(--icon-size) * 0.66);
    height: calc(var(--icon-size) * 0.66);
}

.process-cloud-node .route-icon img {
    width: calc(var(--icon-size) * 1.12);
    height: calc(var(--icon-size) * 0.86);
}

.hub-port {
    position: absolute;
    top: 50%;
    z-index: 4;
    width: 13px;
    height: 13px;
    border: 3px solid var(--blue);
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 0 0 6px rgba(238, 242, 255, 0.88);
    transform: translateY(-50%);
}

.hub-port--in {
    left: -8px;
}

.hub-port--out {
    right: -8px;
    border-color: var(--green);
    box-shadow: 0 0 0 6px rgba(236, 253, 245, 0.82);
}

.process-hub h3,
.output-card h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.1;
}

.hub-promise {
    margin: 0;
    color: var(--text);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.16;
}

.selected-intake {
    width: min(100%, 282px);
    display: grid;
    gap: 4px;
    margin-top: 2px;
    padding-top: 8px;
    border-top: 1px solid rgba(77, 124, 15, 0.20);
}

.selected-intake span {
    color: var(--blue-strong);
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    text-transform: uppercase;
}

.selected-intake strong {
    color: var(--text);
    font-size: 14px;
    line-height: 1.14;
}

.selected-intake p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
}

.output-card {
    --output-card-height: 404px;
    position: relative;
    min-height: var(--output-card-height);
    height: auto;
    display: grid;
    grid-template-rows: 54px auto auto auto auto auto;
    justify-items: center;
    align-content: start;
    gap: 12px;
    padding: 24px 24px 24px;
    
    border-radius: var(--radius-lg);
    color: var(--muted);
    text-align: center;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 18px 46px rgba(0, 79, 184, 0.10);
    backdrop-filter: blur(12px);
}

.output-card::before {
    left: -8px;
    border-color: var(--green);
    box-shadow: 0 0 0 6px rgba(236, 253, 245, 0.82);
}

.output-icon {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: rgba(238, 242, 255, 0.90);
    box-shadow: var(--shadow-surface);
}

.output-icon svg {
    width: 30px;
    height: 30px;
}

.output-card p {
    margin: 0;
    max-width: 24ch;
    min-height: 42px;
    display: flex;
    align-items: center;
    color: var(--muted);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.3;
}

.output-recipe {
    width: 100%;
    min-height: 58px;
    display: grid;
    gap: 4px;
    margin: 0;
    padding: 8px 0 0;
    border-top: 1px solid rgba(201, 223, 255, 0.44);
}

.output-recipe dt {
    color: var(--blue-strong);
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    text-transform: uppercase;
}

.output-recipe dd {
    margin: 0;
    min-height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.28;
}

.output-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.output-tags span {
    display: inline-flex;
    align-items: center;
    min-height: 25px;
    padding: 0 8px;
    border: 1px solid rgba(201, 223, 255, 0.62);
    border-radius: 8px;
    color: var(--blue-strong);
    background: rgba(238, 242, 255, 0.82);
    
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    text-transform: uppercase;
}

.use-case-detail__checks {
    width: 100%;
    min-height: 68px;
    display: grid;
    align-content: start;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: left;
}

.use-case-detail__checks li {
    position: relative;
    padding-left: 16px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.3;
}

/* Every list marker on this page was an 8px square with a second square offset beside it.
   One quiet round tick, at the same size everywhere. */
.use-case-detail__checks li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 0.68em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--green);
    transform: translateY(-50%);
}

.use-case-detail.case-detail-swap {
    animation: detailSwap 220ms ease;
}

.use-case-infinite {
    position: relative;
    display: block;
    min-height: 0;
    overflow: visible;
    padding: 0;
    
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
}

.landing-page .use-case-infinite {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
}

.use-case-infinite-copy {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 8px 0 2px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    text-align: center;
}

.use-case-infinite strong {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 6px;
    font-size: 16px;
    line-height: 1.2;
}

.use-case-infinite strong span {
    display: inline-block;
    color: var(--blue-strong);
    font-size: 20px;
    font-weight: 500;
    line-height: 1;
    text-shadow: 0 7px 18px rgba(0, 79, 184, 0.26);
    transform: translateY(-2px);
}

.use-case-infinite p {
    margin: 0;
    color: var(--muted);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.45;
}

.use-case-chip-cloud {
    position: relative;
    top: auto;
    right: auto;
    z-index: 1;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    gap: 8px;
    padding: 12px 0 12px;
    pointer-events: auto;
    transform: none;
}

.use-case-chip-cloud span {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 8px;
    border: 1px solid rgba(201, 223, 255, 0.54);
    border-radius: 8px;
    color: var(--blue-strong);
    background: rgba(255, 255, 255, 0.70);
    box-shadow: 0 10px 24px rgba(0, 79, 184, 0.08);
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    backdrop-filter: blur(8px);
}

.landing-page.parallax-ready .use-cases .use-case-node,
.landing-page.parallax-ready .use-cases .use-case-mini,
.landing-page.parallax-ready .use-cases .process-hub,
.landing-page.parallax-ready .use-cases .output-card {
    opacity: 1;
}

.landing-page.parallax-ready .use-cases.is-visible .use-case-node,
.landing-page.parallax-ready .use-cases.is-visible .use-case-mini,
.landing-page.parallax-ready .use-cases.is-visible .process-hub,
.landing-page.parallax-ready .use-cases.is-visible .output-card {
    opacity: 1;
    animation: useCaseNodeIn 440ms ease;
}

@keyframes atlasFlow {
    to {
        stroke-dashoffset: -72;
    }
}

@keyframes useCaseNodeIn {
    from {
        transform: translateY(14px);
    }

    to {
        transform: translateY(0);
    }
}

@keyframes useCaseNodeInCompact {
    from {
        transform: translateY(12px);
    }

    to {
        transform: translateY(0);
    }
}

.integration-groups,
.pricing-grid {
    max-width: var(--container);
    margin: 0 auto;
    display: grid;
    gap: 16px;
}

.integration-groups {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 24px 24px;
}

.integration-group {
    min-width: 0;
    display: grid;
    align-content: start;
    gap: 12px;
}

.integration-group__head {
    min-height: 118px;
    padding-right: 8px;
}

.integration-group__label,
.integration-modal__label {
    display: inline-flex;
    color: var(--blue-strong);
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    text-transform: uppercase;
}

.integration-group h3 {
    margin: 9px 0 8px;
    font-size: 20px;
    line-height: 1.12;
}

.integration-group p {
    max-width: 50ch;
    margin: 0;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.42;
}

.integration-card-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.integration-card {
    display: grid;
    grid-template-columns: 42px 1fr auto;
    grid-template-rows: auto auto auto;
    align-content: start;
    gap: 4px 12px;
    width: 100%;
    min-height: 154px;
    padding: 16px;
    
    border-radius: var(--radius-lg);
    appearance: none;
    cursor: pointer;
    color: inherit;
    font: inherit;
    text-align: left;
    text-decoration: none;
    position: relative;
    background:
        linear-gradient(180deg, var(--glass-highlight), transparent 46%),
        var(--glass-fill);
    box-shadow:
        inset 0 0 0 1px var(--glass-stroke),
        var(--shadow-surface);
    transition: transform 160ms ease, box-shadow 160ms ease;
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .integration-card {
        -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
        backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
        background:
            linear-gradient(180deg, var(--glass-highlight), transparent 46%),
            var(--glass-fill-quiet);
    }
}

.integration-card::after {
    content: "+";
    position: absolute;
    right: 16px;
    top: 16px;
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    
    border-radius: 50%;
    color: var(--blue-strong);
    background: var(--card-badge-fill);
    font-size: 15px;
    line-height: 1;
    opacity: 0.5;
    transition: opacity 160ms ease, background 160ms ease;
}

.integration-card:hover,
.integration-card:focus-visible {
    transform: translateY(-2px);
    box-shadow:
        inset 0 0 0 1px var(--card-hover-ring),
        var(--card-hover-lift);
}

.integration-card:hover::after,
.integration-card:focus-visible::after {
    opacity: 1;
    background: var(--card-badge-fill-active);
}

@media (prefers-reduced-motion: reduce) {
    .integration-card,
    .integration-card::after {
        transition: none;
    }

    .integration-card:hover,
    .integration-card:focus-visible {
        transform: none;
    }
}

.integration-icon {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-lg);
    color: #003b8f;
    background: rgba(224, 231, 255, 0.88);
    
    font-size: 16px;
    font-weight: 500;
}

.integration-icon img,
.integration-modal__icon img {
    width: 23px;
    height: 23px;
    display: block;
    object-fit: contain;
}

.integration-icon .ui-line-icon,
.integration-modal__icon .ui-line-icon,
.integration-icon .wordpress-mark,
.integration-modal__icon .wordpress-mark {
    width: 23px;
    height: 23px;
    display: block;
}

.ui-line-icon path,
.wordpress-mark path,
.wordpress-mark circle {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.wordpress-mark circle {
    stroke-width: 1.5;
}

.integration-card--codepen .integration-icon img,
.integration-modal__icon.integration-card--codepen img {
    width: 25px;
    height: 25px;
}



.integration-card strong {
    grid-column: 2 / 4;
    grid-row: 1;
    padding-right: 32px;
    color: var(--blue-strong);
    font-size: 16px;
    line-height: 1.15;
}

.integration-card > span:not(.integration-icon) {
    grid-column: 2 / 4;
    grid-row: 2;
    color: var(--muted);
    line-height: 1.35;
}

.integration-card em {
    grid-column: 1 / -1;
    grid-row: 3;
    padding-top: 8px;
    color: var(--subtle);
    font-size: 14px;
    line-height: 1.35;
    font-style: normal;
}

.integration-card--html .integration-icon,
.integration-modal__icon.integration-card--html {
    color: #4d7c0f;
    background: #ccfbf1;
}

.integration-card--v0 .integration-icon,
.integration-modal__icon.integration-card--v0 {
    color: #111827;
    background: #f3f4f6;
}

.integration-card--claude .integration-icon,
.integration-modal__icon.integration-card--claude {
    color: #574600;
    background: #ffedd5;
}

.integration-card--chatgpt .integration-icon,
.integration-modal__icon.integration-card--chatgpt {
    color: #111827;
    background: #eef8f2;
}

.integration-card--gemini .integration-icon,
.integration-modal__icon.integration-card--gemini {
    color: #0026ff;
    background: #ede9fe;
}

.integration-card--framer .integration-icon,
.integration-modal__icon.integration-card--framer {
    color: #1d4ed8;
    background: #dbeafe;
}

.integration-card--webflow .integration-icon,
.integration-modal__icon.integration-card--webflow {
    color: #146ef5;
    background: #dbeafe;
}

.integration-card--wordpress .integration-icon,
.integration-modal__icon.integration-card--wordpress {
    color: #21759b;
    background: #e0f2fe;
}

.integration-card--wix .integration-icon,
.integration-modal__icon.integration-card--wix {
    color: #0c6efc;
    background: #e0f2fe;
}

.integration-card--static-host .integration-icon,
.integration-modal__icon.integration-card--static-host {
    color: #1d4ed8;
    background: #dbeafe;
}

.integration-card--blogger .integration-icon,
.integration-modal__icon.integration-card--blogger {
    color: #ea580c;
    background: #ffedd5;
}

.integration-card--github-pages .integration-icon,
.integration-modal__icon.integration-card--github-pages {
    color: #222222;
    background: #f3f4f6;
}

.integration-card--codepen .integration-icon,
.integration-modal__icon.integration-card--codepen {
    color: #ffffff;
    background: #111827;
}

.integration-card--forms .integration-icon,
.integration-modal__icon.integration-card--forms {
    color: #574600;
    background: #fef3c7;
}

.integration-modal {
    width: min(720px, calc(100vw - 36px));
    max-height: min(780px, calc(100dvh - 36px));
    padding: 0;
    border: 0;
    color: var(--text);
    background: transparent;
}

.integration-modal::backdrop {
    background: rgba(16, 24, 39, 0.42);
    backdrop-filter: blur(5px);
}

.integration-modal__panel {
    position: relative;
    display: grid;
    gap: 16px;
    max-height: min(780px, calc(100dvh - 36px));
    overflow-y: auto;
    padding: 32px;
    border: 1px solid rgba(201, 223, 255, 0.72);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 30px 90px rgba(16, 24, 39, 0.22);
}

.integration-modal__close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(201, 223, 255, 0.72);
    border-radius: 50%;
    color: var(--blue-strong);
    background: #ffffff;
    cursor: pointer;
    font: inherit;
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    box-shadow: var(--shadow-surface);
}

.integration-modal__close svg {
    width: 17px;
    height: 17px;
}

.integration-modal__close svg path {
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
}

.integration-modal__close:hover,
.integration-modal__close:focus-visible {
    border-color: rgba(0, 104, 232, 0.5);
    box-shadow: var(--shadow-surface);
}

.integration-modal__intro {
    display: grid;
    grid-template-columns: 50px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding-right: 48px;
}

.integration-modal__icon {
    width: 46px;
    height: 46px;
    display: inline-grid;
    place-items: center;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-surface);
    font-size: 16px;
    font-weight: 500;
}

.integration-modal h3 {
    margin: 8px 0 0;
    font-size: clamp(1.5rem, 3vw, 2rem);
    line-height: 1.05;
}

.integration-modal p {
    margin: 0;
    color: var(--muted);
    font-size: 16px;
}

.integration-modal__origin {
    padding: 12px 16px;
    border-left: 3px solid var(--blue);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background: rgba(0, 104, 232, 0.06);
}

.integration-modal__origin strong {
    display: block;
    margin-bottom: 4px;
    color: var(--text);
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.integration-modal__example {
    display: grid;
    gap: 8px;
    padding: 16px;
    border: 1px solid rgba(0, 104, 232, 0.18);
    border-radius: var(--radius-lg);
    color: #eaf3ff;
    background: #101827;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.integration-modal__example strong {
    color: #ffffff;
    font-size: 12px;
    text-transform: uppercase;
}

.integration-modal ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.integration-modal li {
    position: relative;
    padding-left: 24px;
    color: var(--muted);
}

.integration-modal li + li {
    margin-top: 8px;
}

.integration-modal li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 0.72em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--blue);
    transform: translateY(-50%);
}

.integration-modal .integration-modal__checklist-example {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    counter-reset: integration-step;
    list-style: none;
}

.integration-modal .integration-modal__checklist-example li {
    min-height: 28px;
    display: flex;
    align-items: center;
    margin: 0;
    padding-left: 32px;
    color: #dbeafe;
    font-size: 14px;
    line-height: 1.45;
    counter-increment: integration-step;
}

.integration-modal .integration-modal__checklist-example li::before {
    top: 50%;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border: 1px solid #415373;
    border-radius: 8px;
    color: #9dc7ff;
    background: #17213a;
    box-shadow: none;
    content: counter(integration-step, decimal-leading-zero);
    font: 700 10px/1 "SFMono-Regular", Consolas, monospace;
}

.pricing {
    background: transparent;
}

.pricing .section-heading .price-note {
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.55;
}

.pricing-grid {
    width: min(100%, 1140px);
    min-width: 0;
    grid-template-columns: repeat(3, minmax(0, 360px));
    justify-content: center;
    gap: 16px;
    align-items: stretch;
    padding: 12px 0;
}

/* Pro Scale is monthly-only, but it is still one of three plans on offer. The yearly tab
   used to drop it out of the grid, which reads as a bug rather than as a plan with no
   yearly price; it stays, and the line that says so is what changes. */
.price-card[data-off-interval="true"] .price-card__trial-note--interval {
    color: var(--price-accent);
    font-weight: 600;
}

.pricing-period-picker {
    width: fit-content;
    max-width: calc(100% - 36px);
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    gap: 12px;
    margin: -14px auto 28px;
    padding: 4px 8px 4px 12px;
    
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.76);
    box-shadow: 0 14px 34px rgba(20, 71, 129, 0.1);
    backdrop-filter: blur(12px);
}

.pricing-period-picker__label {
    color: var(--muted);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* 12px frame minus 4px padding gives the selected tab a true 8px inner radius. */
.pricing-period-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(112px, 1fr));
    gap: 4px;
    padding: 4px;
    border-radius: 12px;
    background: rgba(221, 232, 246, 0.74);
}

.pricing-period-tabs button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    border: 0;
    border-radius: 8px;
    color: #53657d;
    background: transparent;
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.pricing-period-tabs button[aria-selected="true"] {
    color: var(--ink);
    background: #fff;
    box-shadow: 0 5px 14px rgba(20, 71, 129, 0.12), 0 0 0 1px rgba(0, 104, 232, 0.09);
}

.pricing-period-tabs button:hover:not([aria-selected="true"]) {
    color: var(--blue-strong);
    background: rgba(255, 255, 255, 0.48);
}

.pricing-period-tabs button:focus-visible {
    outline: 3px solid rgba(0, 104, 232, 0.36);
    outline-offset: 2px;
}

/* Layout only. Paint comes from the shared glass owner above so all three tiers read as
   one material; the featured card differs by glow, not by a second background recipe. */
.price-card {
    position: relative;
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0;
    overflow: hidden;
    padding: 32px;
}

/* The recommended plan is the only card that glows. The glow is the page saying "this
   one" — it carries the same information as the eyebrow, so it is not decoration, and it
   holds in both themes because the ink is a token. */
.price-card.featured {
    z-index: 1;
    margin: -12px 0;
    padding: 48px 32px 32px;
    background:
        linear-gradient(180deg, var(--glass-highlight), transparent 46%),
        var(--glass-fill-strong);
    box-shadow:
        inset 0 0 0 1px var(--glow-route),
        0 0 0 var(--glow-spread) var(--glow-route-soft),
        var(--shadow-overlay);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .price-card.featured {
        -webkit-backdrop-filter: blur(var(--glass-blur-strong)) saturate(var(--glass-saturate));
        backdrop-filter: blur(var(--glass-blur-strong)) saturate(var(--glass-saturate));
        background:
            linear-gradient(180deg, var(--glass-highlight), transparent 46%),
            var(--glass-fill);
    }
}

.price-card.featured h3 {
    color: var(--blue-strong);
    font-size: 24px;
}

.price-card.featured .price-card__eyebrow {
    color: #0057c7;
}

/* Tier is carried by the accent, not by a second background recipe. */
.price-card.scale {
    --price-accent: #4d7c0f;
}

.price-card__eyebrow {
    display: block;
    margin-bottom: 5px;
    color: var(--blue-strong);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.price-card.scale .price-card__eyebrow,
.price-card.scale .price-card__offer-label {
    color: var(--price-accent);
}

.price-card__plan-heading {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 12px;
}

.price-card__plan-heading > div {
    min-width: 0;
}

.price-card__icon {
    width: 48px;
    height: 48px;
    display: inline-flex;
    flex: 0 0 48px;
    align-items: center;
    justify-content: center;
    border: 1px solid currentColor;
    border-radius: 12px;
    color: #50627a;
    background: rgba(255, 255, 255, 0.78);
    
}

.price-card__lordicon {
    display: block;
    width: 28px;
    height: 28px;
    color: inherit;
    --lord-icon-primary: currentColor;
    --lord-icon-secondary: currentColor;
}

.price-card__lordicon-fallback {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.price-card__lordicon-fallback[hidden] {
    display: none;
}

.price-card__icon--pro {
    color: var(--blue);
    background: rgba(235, 244, 255, 0.82);
    box-shadow: var(--shadow-surface);
}

.price-card__icon--scale {
    color: #4d7c0f;
    border-color: rgba(132, 204, 22, 0.46);
    background: rgba(236, 252, 203, 0.88);
    box-shadow: 0 6px 18px rgba(63, 98, 18, 0.12);
}

.price-card__icon--scale .price-card__lordicon-fallback {
    filter: brightness(0) saturate(100%) invert(91%) sepia(30%) saturate(864%) hue-rotate(99deg) brightness(97%) contrast(88%);
}

.price-card__header {
    min-height: 164px;
}

.price-card h3 {
    margin: 0;
    font-size: 24px;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.price-card__header > p {
    margin: 16px 0 0;
    overflow-wrap: anywhere;
    line-height: 1.52;
}

.price-card p,
.price-card li {
    color: var(--muted);
}

.price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0 8px;
    min-height: 58px;
    margin: 20px 0 16px;
    color: var(--blue-strong);
    line-height: 1;
}

.price strong {
    font-size: clamp(2.5rem, 4vw, 3.5rem);
    font-weight: 600;
    letter-spacing: -0.055em;
}

.price span {
    color: var(--muted);
    font-size: 16px;
    font-weight: 600;
}

.price-card__price-panel {
    display: grid;
    align-content: start;
    min-height: 118px;
    margin-top: 18px;
}

.price-card__price-panel[hidden] {
    display: none;
}

.price-card__offer-label {
    color: #3f6212;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.price-card__price-panel .price {
    margin-top: 10px;
    margin-bottom: 8px;
}

.price-card__standard-price,
.price-card__trial-note {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.48;
}

.price-card__standard-price s {
    text-decoration-color: rgba(83, 101, 125, 0.6);
    text-decoration-thickness: 1.5px;
}

/* Reads with the price, not as a second heading: same size as the struck standard price,
   carrying the plan accent so it is the one line on the panel that is an argument.

   Deliberately not a <p>. ".price-card p, .price-card li" owns paragraph colour at 0-1-1 and
   outranks a single class, so a <p> here rendered muted and the only ways to win were a
   stronger selector or an importance override - both of which this repository refuses. The base owns the
   property; an element that is a price annotation rather than prose stays out of its way. */
.price-card__saving {
    display: block;
    margin-top: 6px;
    color: var(--price-accent, var(--blue-strong));
    font-size: 13px;
    font-weight: 500;
    line-height: 1.48;
}

.price-card__trial-note {
    min-height: 40px;
    margin-top: 10px;
    margin-bottom: 22px;
    color: var(--subtle);
}

/* The one line that is deliberately warm. It sits with the price because that is where the
   reader is deciding whether this is worth paying for. */
.price-card__trial-note--coffee {
    color: var(--muted);
    font-weight: 500;
}

.price-card__features {
    flex: 1 1 auto;
    margin: 0 0 28px;
    padding: 0;
    list-style: none;
}

.price-card__features li {
    position: relative;
    min-width: 0;
    padding-left: 24px;
    overflow-wrap: anywhere;
    line-height: 1.48;
}

.price-card__features li::before {
    position: absolute;
    top: 0.68em;
    left: 2px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--blue);
    content: "";
    transform: translateY(-50%);
}

.price-card.scale .price-card__features li::before {
    background: var(--price-accent);
}

.price-card__features li + li {
    margin-top: 11px;
}

.price-card__cta {
    width: 100%;
    min-height: 48px;
}

@media (min-width: 981px) {
  .price-card.featured .price-card__cta {
          margin-bottom: 7px;
      }
}

/* The scale card's note had its own tinted box; there is no box to tint any more. */

@media (prefers-reduced-motion: reduce) {
  .plan-lordicon {
          pointer-events: none;
      }
  .pricing-period-tabs button {
          transition: none;
      }
}

/* The landing surface had no screen-reader-only utility of its own. `.sr-only` exists, but
   only because Tailwind ships it, and `index.html` does not load Tailwind — so a hidden
   label written here would simply have rendered. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Small print, set as small print. It was a full-width panel with its own eyebrow, heading
   and rule - furniture that announced itself louder than the prices above it. The terms are
   not optional, so they stay; only the presentation changes. It was also painted in fixed
   dark values, which made it a black slab in light mode. */
.pricing-terms {
    max-width: 68ch;
    margin: 28px auto 0;
    padding: 14px 22px;
    border-radius: var(--radius-lg);
    text-align: center;
    /* Not a panel coming back: the atmosphere is a fixed backdrop, so this text sits over
       the skyline rather than over the page colour, and a contrast figure measured against
       the page ground is measuring the wrong thing. `--atmos-veil-strong` is the reading
       veil the hero already uses for exactly this - enough ground to read on, no border,
       no elevation, nothing that announces itself as a card. */
    background: var(--atmos-veil-strong);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .pricing-terms {
        -webkit-backdrop-filter: blur(var(--glass-blur));
        backdrop-filter: blur(var(--glass-blur));
    }
}

/* These are billing terms, so they are set to be read rather than merely to comply.
   Light uses --muted and dark uses --subtle because that is what lands both at a
   measured ~6.9 against their own ground; a single token gives light 4.81 and dark 6.85,
   which is the same theme mismatch in a new place. */
.pricing-terms p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.6;
}

.pricing-terms a {
    color: var(--blue-strong);
    text-underline-offset: 2px;
    white-space: nowrap;
}

.faq {
    padding-top: 64px;
    padding-bottom: 64px;
}

.faq .section-heading {
    margin-bottom: 34px;
}

/* One surface for the whole answer list. Each question was previously its own elevated
   card inside this card, which put 18 painted boxes on screen to hold 17 sentences. */
.faq-list {
    max-width: 820px;
    margin: 0 auto;
    display: grid;
    gap: 0;
    padding: 0;
}

/* ---- FAQ ----
   The rows were 56px tall with 12px of padding and an open panel that tinted the whole row
   including its question, so an expanded answer read as a highlighted block rather than as an
   answer under a question. Everything here is about giving the reading more room and letting
   the open state be quiet.

   The list is a card rather than a run of hairlines on the page background. Fourteen rows
   separated only by 1px lines is a table; a single surface with dividers inside it is a
   component, and it also gives the open state something to sit on. */
.faq-list {
    max-width: 780px;
    margin: 0 auto;
    display: grid;
    gap: 8px;
    padding: 6px;
    border-radius: var(--radius-lg);
    background:
        linear-gradient(180deg, var(--glass-highlight), transparent 46%),
        var(--glass-fill);
    box-shadow:
        inset 0 0 0 1px var(--glass-stroke),
        var(--shadow-surface);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .faq-list {
        -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
        backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
        background:
            linear-gradient(180deg, var(--glass-highlight), transparent 46%),
            var(--glass-fill-quiet);
    }
}

.landing-page .faq-list details {
    --quality-disclosure-min-height: 68px;
    --quality-disclosure-padding: 16px 18px;
    --quality-disclosure-icon-size: 30px;
    --quality-disclosure-icon-color: var(--blue);
    --quality-disclosure-icon-background: transparent;
    --quality-disclosure-icon-border: var(--line);
    --quality-disclosure-hover-background: transparent;
    border-radius: calc(var(--radius-lg) - 8px);
    border-bottom: 1px solid var(--line);
    background: transparent;
    box-shadow: none;
}

.faq-list details:last-child {
    border-bottom: 0;
}

/* Open marks the row, not the question. A tint behind the whole row put a coloured block
   under the heading a reader had just chosen; this leaves the question on the surface and
   only lifts the answer. */
.faq-list details[open] {
    background: color-mix(in srgb, var(--blue-soft) 26%, transparent);
}

.faq-list summary {
    color: var(--text);
    font-weight: 500;
    font-size: 16px;
    letter-spacing: -0.008em;
}

.faq-list summary:hover {
    color: var(--blue-strong);
}

/* The marker is drawn, not typed.
   The shared component sets a "+" glyph and swaps it for "−" (U+2212) when open. Centring the
   box cannot centre that: the minus sits on the font's math axis, which is above the middle
   of the em box, so it rides high in the circle while the plus looks fine. Two gradient bars
   positioned dead centre have no metrics to argue with, and collapsing the vertical one is a
   better open animation than rotating a symbol that is symmetrical anyway. */
.landing-page .faq-list summary::after,
.landing-page .faq-list details[open] summary::after {
    content: "";
    box-shadow: none;
    background-image:
        linear-gradient(currentColor, currentColor),
        linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    background-position: center, center;
    background-size: 11px 1.5px, 1.5px 11px;
    transition: background-size 200ms cubic-bezier(.2, .7, .3, 1),
        background-color 200ms ease, border-color 200ms ease;
}

.landing-page .faq-list details[open] summary::after {
    /* The upright bar closes; the bar that remains is the minus, exactly centred. */
    background-size: 11px 1.5px, 1.5px 0;
    background-color: color-mix(in srgb, var(--blue) 14%, transparent);
    border-color: transparent;
}

/* The answer opens rather than appearing. <details> cannot transition its own height, so the
   panel animates instead: it is the only child that changes, and a short fade with a small
   rise reads as the row opening without pretending to be a real height animation. */
.faq-list details > *:not(summary) {
    animation: faqReveal 220ms cubic-bezier(.2, .7, .3, 1) both;
}

@keyframes faqReveal {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}

/* The answer was constrained twice: a 56px right padding meant to clear the toggle, plus a
   measure. The toggle only exists on the summary row, so that padding was reserving space
   beside text nothing overlaps - which is the empty column down the right of every open
   answer. The measure alone decides the line length now. */
.faq-list p {
    margin: 0;
    padding: 0 24px 8px 18px;
    color: var(--muted);
    font-size: 15.5px;
    line-height: 1.7;
}

.faq-list p + p {
    padding-top: 12px;
}

.faq-list details[open] p:last-of-type {
    padding-bottom: 20px;
}

.site-footer {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 48px;
    align-items: start;
    padding: 56px max(var(--page-gutter), calc((100% - var(--container)) / 2)) 32px;
    border-top: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.78);
}

.site-footer > div,
.site-footer > nav {
    position: relative;
    z-index: 1;
}

.site-footer p {
    max-width: 360px;
    color: var(--muted);
    font-weight: 400;
    line-height: 1.55;
}

.site-footer nav {
    display: grid;
    grid-template-columns: repeat(3, minmax(148px, max-content));
    gap: 16px 56px;
    color: var(--muted);
    font-weight: 400;
}

/* `align-content: start` is the whole fix for a footer that never lined up.
   These groups are grid items in a stretched row, so without it each one distributed its
   own rows across the tallest column's height: four links spaced 29px, three spaced 36px,
   two spaced 48px. Three columns, three rhythms, nothing sharing a baseline. Packed to the
   start they all inherit one 44px row from the link itself. */
.footer-link-group {
    display: grid;
    align-content: start;
    gap: 0;
    min-width: 148px;
}

.footer-link-group span {
    margin-bottom: 8px;
    color: var(--subtle);
    line-height: 1.2;
}

.footer-link-group a[aria-current="page"] {
    color: var(--blue-strong);
}

@media (prefers-reduced-motion: reduce) {
  *,
      *::before,
      *::after {
          scroll-behavior: auto !important;
          transition: none !important;
          animation: none !important;
      }
  .landing-page.parallax-ready .reveal-section > * {
          opacity: 1;
          transform: none;
      }
}

@media (max-width: 1060px) {
  .section-rail {
          right: 20px;
          gap: 8px;
      }
  .floating-scrollbar {
          display: none;
      }
  .hero,
      .split-section{
          grid-template-columns: 1fr;
      }
  .hero {
          min-height: auto;
      }
  .feature-deck {
          min-height: auto;
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: 24px 16px;
          align-items: stretch;
          padding-bottom: 32px;
      }
  .use-case-atlas {
          grid-template-columns: 1fr;
      }
  .atlas-stage {
          grid-template-columns: 1fr;
          min-height: auto;
          gap: 16px;
      }
  .process-lines {
          display: none;
      }
  .hub-port,
      .output-card::before,
      .use-case-node::after,
      .use-case-mini::after,
      .intake-mini-grid::after {
          display: none;
      }
  .use-case-detail {
          min-height: auto;
      }
  .use-case-infinite {
          display: grid;
          gap: 12px;
          min-height: 0;
      }
  .use-case-infinite-copy {
          width: 100%;
      }
  .use-case-chip-cloud {
          position: relative;
          top: auto;
          right: auto;
          width: 100%;
          justify-content: center;
          padding: 12px 0 16px;
          pointer-events: auto;
          transform: none;
      }
  .feature-card--plug,
      .feature-card--publish,
      .feature-card--upload,
      .feature-card--google {
          grid-column: auto;
      }
  .integration-groups {
          grid-template-columns: 1fr;
      }
  .integration-group__head {
          min-height: 0;
      }
  .integration-group p {
          max-width: 58ch;
      }
  .integration-card-list {
          grid-template-columns: repeat(2, minmax(0, 1fr));
      }
}

@media (max-width: 900px) {
  .site-footer {
          display: grid;
          grid-template-columns: 1fr;
          gap: 32px;
          padding-top: 40px;
      }
  .site-footer nav {
          width: 100%;
          grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
          gap: 24px 16px;
      }
  /* The lede sat at a 360px measure inside a 342px column, so it wrapped one word short
     of the edge on every line. */
  .site-footer p {
          max-width: none;
      }
}

@media (min-width: 761px) and (max-width: 980px) {
  .pricing-grid {
          grid-template-columns: repeat(2, minmax(0, 360px));
          padding: 0;
      }
  .price-card.featured {
          margin: 0;
          padding: 32px;
      }
  .price-card.scale {
          width: 100%;
          max-width: 540px;
          grid-column: 1 / -1;
          justify-self: center;
      }
}

@media (max-width: 760px) {
  .section-dark,
      .section-light {
          padding: 40px var(--page-gutter);
      }
  .section-rail {
          display: none;
      }
  .value-band {
          padding-top: 48px;
          padding-bottom: 48px;
      }
  .hero h1{
          font-size: clamp(2.5rem, 10.5vw, 3.5rem);
      }
  .hero-actions{
          flex-wrap: wrap;
      }
  .section-grid.four,
      .section-grid.three,
      .demo-grid,
      .architecture-strip,
      .pricing-grid{
          grid-template-columns: 1fr;
      }
  .pricing-period-picker {
          width: 100%;
          max-width: 360px;
          grid-template-columns: 1fr;
          gap: 4px;
          margin-top: -8px;
          padding: 8px;
      }
  .pricing-period-picker__label {
          padding: 3px 4px 1px;
          text-align: center;
      }
  .pricing-period-tabs {
          width: 100%;
          grid-template-columns: repeat(2, minmax(0, 1fr));
      }
  .pricing-period-tabs button {
          min-width: 0;
          min-height: 48px;
          padding: 0 8px;
      }
  .pricing-grid {
          max-width: var(--container);
          grid-template-columns: 1fr;
          gap: 16px;
          padding: 0;
      }
  .price-card {
          padding: 24px;
      }
  .price-card.featured {
          margin: 0;
          padding: 24px 24px;
      }
  .price-card__header {
          min-height: 0;
          margin-bottom: 8px;
      }
  .price-card__icon {
          width: 44px;
          height: 44px;
          flex-basis: 44px;
          border-radius: 12px;
      }
  .atlas-stage {
          display: grid;
          gap: 12px;
          min-height: auto;
          padding: 16px;
      }
  .atlas-stage::before {
          mask-image: none;
      }
      .process-lines {
          display: none;
      }
      .use-case-node {
          position: relative;
          left: auto;
          top: auto;
          width: 100%;
          min-height: auto;
          transform: none;
      }
  .use-case-node:hover,
      .use-case-node:focus-visible,
      .use-case-node.active {
          transform: none;
      }
  .landing-page.parallax-ready .use-cases.is-visible .use-case-node {
          animation-name: useCaseNodeInCompact;
      }
  .process-hub {
          min-height: auto;
      }
  .output-card {
          --output-card-height: 388px;
      }
  .integration-groups{
          grid-template-columns: 1fr;
      }
  .feature-deck {
          grid-template-columns: 1fr;
          gap: 12px;
          padding: 0;
      }
  .feature-deck::before {
          display: none;
      }
  .feature-card {
          min-height: 0;
      }
  /* Fourteen full-width cards made this the tallest section on the phone. Mobile keeps
         the mark and the name as a two-up tile grid; the long-form detail already lives in
         the modal each tile opens. */
  .integration-card-list {
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: 8px;
      }
  .integration-card {
          min-height: 0;
          grid-template-columns: 32px minmax(0, 1fr);
          grid-template-rows: auto;
          align-items: center;
          gap: 12px;
          padding: 12px;
      }
  .integration-card .integration-icon {
          width: 32px;
          height: 32px;
      }
  .integration-card strong {
          font-size: 13px;
      }
  .integration-card > span:not(.integration-icon),
      .integration-card > em {
          display: none;
      }
  .integration-modal__panel {
          padding: 24px 16px;
      }
  .integration-modal__intro {
          grid-template-columns: 42px minmax(0, 1fr);
          padding-right: 32px;
      }
  .integration-modal__icon {
          width: 40px;
          height: 40px;
      }
  .hero {
          min-height: calc(100dvh - 96px);
          padding-top: 32px;
          padding-bottom: 64px;
          gap: 16px;
          background: linear-gradient(180deg, rgba(255, 255, 255, 0.78) 0%, rgba(246, 245, 255, 0.58) 100%);
      }
  .landing-page .hero {
          background: transparent;
      }
  .hero-lede {
          margin: 16px 0 18px;
          font-size: 16px;
          line-height: 1.52;
      }
  .faq {
          padding-top: 64px;
          padding-bottom: 64px;
      }
  .faq .section-heading {
          margin-bottom: 24px;
      }
  .faq-list {
          gap: 8px;
          padding: 8px;
      }
  .faq-list summary {
          min-height: 62px;
          padding: 16px 48px 16px 16px;
          font-size: 16px;
      }
  .faq-list summary::after {
          right: 16px;
      }
  .faq-list p {
          padding: 0 16px 16px;
          font-size: 16px;
      }
  .proof-row {
          margin-top: 16px;
          gap: 8px 12px;
          font-size: 13px;
          line-height: 1.35;
      }
  .proof-row span::before {
          width: 4px;
          height: 4px;
      }
}

@media (max-width: 420px) {
  .brand-logo {
          width: 116px;
          height: auto;
      }
  .hero {
          min-height: auto;
          padding-top: 32px;
          padding-bottom: 48px;
      }
  .hero h1 {
          font-size: clamp(2rem, 9.8vw, 2.5rem);
          line-height: 1.04;
      }
  .hero-actions {
          gap: 8px;
      }
  .hero-actions .btn-large {
          min-height: 46px;
          padding: 0 16px;
          font-size: 14px;
      }
  .google-mark {
          width: 20px;
          height: 20px;
          padding: 2px;
      }
}

[data-account-plan-badge][hidden] {
    display: none;
}

@keyframes routeFlow {
    to {
        stroke-dashoffset: -24;
    }
}

.section-label {
    display: block;
    margin-bottom: 8px;
    color: var(--dash-blue);
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
}

.workspace-tab {
    gap: 8px;
    min-width: 0;
}

.workspace-tab.is-active {
    border-color: rgba(0, 104, 232, 0.34);
    background: rgba(224, 231, 255, 0.48);
    box-shadow: none;
} label){
    cursor: not-allowed;
}

@keyframes create-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 860px) {
  .workspace-tab {
          gap: 4px;
          padding-inline: 4px;
      }
}

.dashboard-body :where(h1, h2, h3, strong, b) {
    font-weight: 600;
}

.dashboard-body :where(button, input, select, textarea) {
    font-weight: 400;
}

.section-label {
    margin-bottom: 6px;
    color: var(--dash-blue-strong);
    font-size: 12px;
    letter-spacing: 0.04em;
}

/* Dashboard motion polish */
@media (prefers-reduced-motion: no-preference) {
    .dashboard-body {
        --dash-motion-fast: 140ms;
        --dash-motion-base: 160ms;
        --dash-motion-slow: 320ms;
        --dash-motion-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
        --dash-motion-soft: cubic-bezier(0.16, 1, 0.3, 1);
    }
    .tab,
    .workspace-tab{
        transition:
            transform var(--dash-motion-fast) var(--dash-motion-ease),
            border-color var(--dash-motion-fast) ease,
            background-color var(--dash-motion-fast) ease,
            color var(--dash-motion-fast) ease,
            box-shadow var(--dash-motion-fast) ease,
            opacity var(--dash-motion-fast) ease;
    }
    .tab:hover,
    .workspace-tab:hover{
        transform: translateY(-1px);
    }
    .tab:active,
    .workspace-tab:active{
        transform: translateY(0);
    }
}

@keyframes dashboard-pop-in {
    from {
        opacity: 0;
        transform: translateY(-6px) scale(0.985);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes dashboard-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes dashboard-toast-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes dashboard-toast-out {
    to {
        opacity: 0;
        transform: translateY(6px);
    }
}

/* Fuji Dusk brand unification */
::selection {
    color: #ffffff;
    background: #0068e8;
}

:where(a, button, input, select, textarea, summary):focus-visible {
    outline-color: rgba(0, 104, 232, 0.72);
}

.landing-page .btn-primary:hover,
.landing-page .btn-primary:focus-visible {
    background: var(--blue-strong);
    box-shadow: var(--shadow-surface);
}

.landing-page .proof-row span::before {
    background: var(--green);
}

.landing-page .section-label,
.landing-page .eyebrow {
    color: var(--green);
}

.section-label {
    color: var(--dash-cyan);
    letter-spacing: 0.08em;
}

/* Keep the lower split on the same vertical axis as Relay / Outputs above. */


/* Unified interactive component contract */
:where(a, button, input, select, textarea, summary):focus-visible {
    outline: 2px solid #0068e8;
    outline-offset: 3px;
}

.btn:active,
.tab:active{
    transform: translateY(1px);
}


/* Keep the lower dashboard sections stacked on narrow screens. */
/* ---- Eyebrow labels ---------------------------------------------------------------
   Every small uppercase label on the page used to set its own size, weight, tracking and
   colour, and most of them chose 700 at 12px. Fourteen blocks, fourteen slightly different
   answers. One rule owns the idiom now: 11px, weight 500, wide tracking, muted ink. It is
   the difference between a label that announces itself and one that quietly orients you. */
.landing-page :is(
  .section-label,
  .eyebrow,
  .feature-kicker,
  .price-card__eyebrow,
  .price-card__offer-label,
  .lane__tag,
  .integration-group__label,
  .pricing-period-picker__label,
  .footer-link-group > span,
  .app-sheet__title,
  .landing-comparison__table caption,
  .landing-comparison__table thead th
) {
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.085em;
  text-transform: uppercase;
}

/* Section headings and card titles: the same restraint one step up. */
.landing-page :is(.feature-card h3, .lane h3, .price-card h3) {
  font-weight: 500;
  letter-spacing: -0.016em;
}

/* Actions read at 14px/500. A 700-weight button is shouting at the one place the page has
   already earned attention. */
.landing-page :is(.btn, .price-card__cta, .pricing-period-tabs button) {
  font-weight: 500;
  letter-spacing: -0.006em;
}

.landing-page .btn-large {
  font-size: 16px;
}

/* The route stops are absolutely placed at percentages and sized in fixed px, so below
   about 640px the widest tile hangs 5px past the hero's clipped edge — the "Public form"
   stop lost its left rim. One scale factor on the three size tokens keeps the composition
   and the arithmetic intact rather than repositioning each node. */
@media (max-width: 640px) {

    .cloud-route {
        padding: 24px 16px;
    }
}

/* ---- Footer brand column ----------------------------------------------------------
   The brand block and the link columns are separate grid items, so nothing was holding
   their tops on one line: the wordmark sat 10px below the column headings. A shared start
   alignment and one type ramp put them on the same first line. */
/* `> div` also matched `.footer-legal`, which is a div too — the measure meant for the
   brand blurb collapsed the legal strip into a stacked column. Name the brand block. */
.landing-page .site-footer > div:not(.footer-legal) {
    display: grid;
    align-content: start;
    gap: 16px;
    max-width: 34ch;
}

.landing-page .site-footer > div:not(.footer-legal) .brand {
    min-height: 0;
}

/* The compact footer brand is a fine-pointer decision: 44px of min-height buys nothing next to a
   mouse and costs the footer grid its tight stacking. On a touch screen it is a 116x25.6 tap
   target for the link that goes home, which is the case the 44px rule exists for. The header's
   brand keeps its height at every width; only this one opts out, so only this one has to opt back
   in. Measured at 390px before and after. */
@media (pointer: coarse) {
    .landing-page .site-footer > div:not(.footer-legal) .brand {
        min-height: 44px;
    }
}

.landing-page .site-footer p {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
}

/* The trust marks are a footnote, not a section. */
.landing-page .console-footer__trust {
    height: auto;
    margin-top: 4px;
}

/* Three link groups in a two-column grid leave the last one stranded beside an empty
   half-row. Rather than fight the balance, the trailing group takes the full width and
   lays its own links across both columns, so the block ends flush instead of ragged. */
@media (max-width: 620px) {
    .site-footer nav {
        gap: 20px 16px;
    }

    .footer-link-group:last-child {
        grid-column: 1 / -1;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .footer-link-group:last-child > span {
        grid-column: 1 / -1;
    }
}

/* ---- The hero relay -------------------------------------------------------------------
   The page's one diagram, and the only thing on the landing page whose job is to make a
   visitor keep scrolling. It replaced a four-node chain - form, Webtzm, Google, review -
   which drew the architecture as a line: the shape every product with a pipeline draws, and
   one that omitted the rule that actually shapes how Webtzm gets used.

   Three claims, carried by composition rather than labels. Several pages feed one relay, so
   the left is a group. The relay is a single place, so it is the only lit object in the
   middle, and it is the only one that pulses - the beat between arrival and departure is
   what says the submission was handled rather than merely forwarded. And a workflow delivers
   to exactly one Google output, so of four destinations one route carries traffic and three
   are drawn but idle.

   Nodes are HTML over an SVG whose viewBox is 520x430 with preserveAspectRatio="none", so a
   percentage on a node lands on the same point as a raw path coordinate at any size. Node
   widths are therefore load-bearing: every wire terminates on a port at a node's edge, and
   the edge is computed from the width. Change a width and the ports move. */

.relay-chip,
.relay-hub,
.relay-out {
    position: absolute;
    z-index: 2;
    left: var(--relay-x);
    top: var(--relay-y);
    transform: translate(-50%, -50%);
}

/* ---- Feeds: your own pages ---- */
.relay-chip--source {
    position: absolute;
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    color: var(--blue-strong);
    background:
        linear-gradient(180deg, var(--glass-highlight), transparent 52%),
        var(--glass-fill-strong);
    box-shadow:
        inset 0 0 0 1.5px var(--relay-wire-strong),
        var(--shadow-surface);
}

/* Entry is a ring leaving the node, not a wash inside it. A translucent fill over a
   translucent fill is muddy at any alpha - it can only ever tint what is already there,
   which is why the previous attempt read as weak however far it was pushed. A ring is drawn
   on top of everything and can be the brightest thing in the frame. */
.relay-chip--source::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    box-shadow: 0 0 0 1.5px var(--relay-signal);
    opacity: 0;
    pointer-events: none;
}

.relay-chip--source > * {
    position: relative;
    z-index: 1;
}

.relay-chip--source svg,
.relay-chip--source .app-lord-icon {
    width: 24px;
    height: 24px;
}

.relay-chip--source svg path {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ---- The relay ---- */
.relay-hub {
    display: grid;
    place-items: center;
    width: 104px;
    height: 104px;
    padding: 0;
    overflow: hidden;
    border-radius: 26px;
    background:
        linear-gradient(180deg, var(--glass-highlight), transparent 46%),
        var(--glass-fill-strong);
    box-shadow:
        inset 0 0 0 1px var(--glow-route),
        0 0 0 var(--glow-spread) var(--glow-route-soft),
        var(--shadow-overlay);
}

.relay-hub img {
    position: relative;
    z-index: 1;
    width: 54px;
    height: 42px;
    display: block;
    object-fit: contain;
}

/* ---- The relay reading ----
   Digits falling behind the mark, gated to the beat between arrival and departure. A sweep
   was a shape moving over the node; this is the node with something in it. Each column falls
   by exactly half its own height and repeats, which is why each carries twice as many digits
   as the square can show - the second half stands in for the first with no seam. */
.relay-matrix {
    position: absolute;
    inset: 0;
    display: flex;
    /* Not stretch: a stretched column takes the container's height and its digits overflow,
       so the fall had nothing to travel through. Each column needs its own content height -
       twice the square - for the half-height loop to have somewhere to go. */
    align-items: flex-start;
    justify-content: space-between;
    padding: 0 9px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    /* Faded at both ends so the digits arrive from somewhere rather than starting at a cut. */
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 22%, #000 72%, transparent);
    mask-image: linear-gradient(180deg, transparent, #000 22%, #000 72%, transparent);
    animation: relayProcess var(--relay-cycle) linear infinite;
}

.relay-matrix b {
    width: 1ch;
    color: var(--relay-signal);
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 10px;
    font-weight: 500;
    line-height: 1.12;
    word-break: break-all;
    animation: relayRain 1.7s linear infinite;
}

/* Uneven speeds and weights, or six columns fall as one block and read as a texture rather
   than as separate streams. */
.relay-matrix b:nth-child(2) { animation-duration: 2.3s; opacity: 0.72; }
.relay-matrix b:nth-child(3) { animation-duration: 1.4s; opacity: 0.9; }
.relay-matrix b:nth-child(4) { animation-duration: 2.6s; opacity: 0.62; }
.relay-matrix b:nth-child(5) { animation-duration: 1.9s; opacity: 0.85; }
.relay-matrix b:nth-child(6) { animation-duration: 2.1s; opacity: 0.7; }

@keyframes relayRain {
    from { transform: translateY(-50%); }
    to   { transform: translateY(0); }
}

/* ---- Destinations ----
   Unselected outputs stay legible: the point is that they were available and this workflow
   picked one, which a hidden option cannot say. */
.relay-out {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 3px 9px;
    align-items: center;
    width: 140px;
    padding: 10px 12px;
    border-radius: 13px;
    background:
        linear-gradient(180deg, var(--glass-highlight), transparent 52%),
        var(--glass-fill);
    box-shadow:
        inset 0 0 0 1.5px var(--relay-wire),
        var(--shadow-surface);
    opacity: 0.66;
}

.relay-out img,
.relay-out__mark {
    grid-column: 1;
    grid-row: 1;
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    color: var(--subtle);
}

.relay-out__mark svg,
.relay-out__mark .app-lord-icon {
    width: 18px;
    height: 18px;
}

.relay-out__mark svg path {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.relay-out strong {
    grid-column: 2;
    grid-row: 1;
    color: var(--text);
    white-space: nowrap;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.008em;
}

.relay-out__note {
    grid-column: 2;
    grid-row: 2;
    color: var(--blue-strong);
    font-size: 11px;
    line-height: 1.3;
}

/* The delivery confirmation. Emerald, not blue - it marks a submission that has already
   landed rather than one still in flight, and it brightens on the same beat the packet
   reaches this node so the glow reads as an event, not a decoration. */
.relay-out__status {
    color: var(--relay-land);
    font-weight: 600;
    opacity: 0.7;
    animation: relayStatusPulse var(--relay-cycle) ease-out infinite;
}

@keyframes relayStatusPulse {
    0%, 86%, 100% { opacity: 0.7; text-shadow: none; }
    93%           { opacity: 1; text-shadow: 0 0 6px var(--relay-land-soft); }
}

.relay-out--selected {
    opacity: 1;
    background:
        linear-gradient(180deg, var(--glass-highlight), transparent 46%),
        var(--glass-fill-strong);
    box-shadow:
        inset 0 0 0 1.5px var(--relay-wire-strong),
        var(--shadow-raised);
}

.relay-out--selected .relay-out__mark {
    color: var(--blue-strong);
}

/* Beat 1 - entry. The page takes a submission: the node brightens from the inside and its
   mark leans in, just before its packet leaves. */
.relay-chip--source::before {
    animation: relayEntry var(--relay-cycle) ease-out infinite;
    animation-delay: var(--relay-delay, 0s);
}

.relay-chip--source > * {
    animation: relayEntryMark var(--relay-cycle) ease-out infinite;
    animation-delay: var(--relay-delay, 0s);
}

@keyframes relayEntry {
    0%       { opacity: 0; transform: scale(0.9); }
    6%       { opacity: 1; }
    22%      { opacity: 0; transform: scale(1.45); }
    100%     { opacity: 0; transform: scale(1.45); }
}

@keyframes relayEntryMark {
    0%, 20%, 100% { transform: scale(1); color: var(--blue-strong); }
    7%            { transform: scale(1.18); color: var(--relay-signal); }
}

/* Beat 3 - the relay working. A ring leaves the card in the card's own shape, so it reads as
   this object doing something rather than as a decoration parked behind it. */
/* The rim brightens for the same window, so the digits read as contained by the node rather
   than passing behind it. */
.relay-hub::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1.5px var(--relay-signal);
    opacity: 0;
    pointer-events: none;
    animation: relayProcess var(--relay-cycle) linear infinite;
}

@keyframes relayProcess {
    0%, 43%   { opacity: 0; }
    48%, 72%  { opacity: 1; }
    78%, 100% { opacity: 0; }
}

/* And the card itself takes a breath on the same beat, so the ring has a source. */

/* Beat 5 - landing. The chosen output acknowledges, which closes the loop instead of letting
   the packet simply stop. */
.relay-out--selected {
    animation: relayLand var(--relay-cycle) ease-out infinite;
}

@keyframes relayLand {
    0%, 86%, 100% { box-shadow: inset 0 0 0 1px var(--card-hover-ring), var(--shadow-raised); }
    93%           { box-shadow: inset 0 0 0 1.5px var(--relay-land), 0 0 0 7px var(--relay-land-soft), var(--shadow-raised); }
}

/* ---- Wires ----
   '--line' is a divider token for a rule on a solid surface; used here it measured about 1.2
   against this ground and the diagram had no visible connections at all. These are their own
   paired tokens, stated in both themes. */
.relay-feed,
.relay-idle {
    fill: none;
    stroke: var(--relay-wire);
    stroke-width: 1.8;
    stroke-linecap: round;
}

.relay-idle {
    stroke: var(--relay-wire-idle);
    stroke-dasharray: 4 7;
}

/* ---- Ports ----
   A wire that slides under a node reads as a wire that missed it. A wire that lands on a port
   reads as a connection, which is the whole claim the diagram is making - so the ports get
   their own layer above the nodes rather than sharing the wires' layer beneath them. */
.route-ports {
    position: absolute;
    inset: 0;
    z-index: 3;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

/* The frame is stretched to the container, so without this the nubs turn into ovals. */
.route-ports circle {
    vector-effect: non-scaling-stroke;
}

.relay-port {
    fill: var(--relay-port-fill);
    stroke: var(--relay-wire-strong);
    stroke-width: 2;
}

.relay-port--live {
    fill: var(--relay-packet);
    stroke: var(--relay-packet);
}

/* ---- Traffic ----
   One dot per wire, run as a dash with almost no on-length. Movement is the packet, never the
   line: animating the dash of the line itself leaves the connection undrawn for most of every
   cycle, and the diagram reads as broken. */
.relay-pulse,
.route-flow {
    fill: none;
    stroke: var(--relay-packet);
    stroke-width: 5.5;
    stroke-linecap: round;
    /* One dot per wire: the gap spans the whole normalised length, so exactly one passes per
       cycle instead of a stream. A stream says "busy"; one packet says "your submission". */
    stroke-dasharray: 0.1 100;
}

/* The halo, wide and soft, under the core. */
.route-flow {
    stroke: var(--relay-packet-halo);
    stroke-width: 11;
}

.route-flow--core {
    stroke: var(--relay-packet-core);
    stroke-width: 5;
}

.relay-pulse {
    animation: relayIn var(--relay-cycle) cubic-bezier(.5, 0, .5, 1) infinite;
    animation-delay: var(--relay-delay, 0s);
}

.route-flow {
    animation: relayOut var(--relay-cycle) cubic-bezier(.4, 0, .45, 1) infinite;
}

@keyframes relayIn {
    0%, 8% { stroke-dashoffset: 100; opacity: 0; }
    13%    { opacity: 1; }
    42%    { stroke-dashoffset: 0; opacity: 1; }
    48%    { stroke-dashoffset: 0; opacity: 0; }
    100%   { stroke-dashoffset: 0; opacity: 0; }
}

@keyframes relayOut {
    0%, 62% { stroke-dashoffset: 100; opacity: 0; }
    66%     { opacity: 1; }
    93%     { stroke-dashoffset: 0; opacity: 1; }
    100%    { stroke-dashoffset: 0; opacity: 0; }
}

/* The hero scrolls away and the diagram keeps running behind everything below it. Off-screen
   it is paused rather than left animating, which is the same argument the atmosphere decay
   makes: do not pay for scenery nobody is looking at. */
.cloud-route[data-relay-idle="true"] :is(.relay-pulse, .route-flow,
.relay-out--selected, .relay-chip--source > *),
.cloud-route[data-relay-idle="true"] :is(.relay-matrix, .relay-matrix b),
.cloud-route[data-relay-idle="true"] .relay-hub::after,
.cloud-route[data-relay-idle="true"] .relay-chip--source::before {
    animation-play-state: paused;
}

@media (max-width: 900px) {
    .cloud-route {
        min-height: 360px;
    }

    .relay-out {
        width: 124px;
        padding: 8px 10px;
    }

    .relay-out strong {
        font-size: 12px;
    }

    .relay-hub {
        width: 100px;
        height: 100px;
    }
}

@media (max-width: 560px) {
    /* Below this the four destinations no longer fit beside the relay at their tablet size,
       so the same three size tokens that scale the tile down at 900px scale again here,
       and the frame follows the viewBox's own aspect ratio instead of a fixed height so the
       wires stay true rather than stretching into a taller, narrower box than they were
       drawn for. */
    .cloud-route {
        min-height: 0;
        aspect-ratio: 520 / 430;
        padding: 16px 12px;
    }

    .relay-chip--source {
        width: 38px;
        height: 38px;
    }

    .relay-chip--source svg,
    .relay-chip--source .app-lord-icon {
        width: 16px;
        height: 16px;
    }

    .relay-hub {
        width: 72px;
        height: 72px;
        border-radius: 18px;
    }

    .relay-hub img {
        width: 38px;
        height: 30px;
    }

    .relay-out {
        width: 104px;
        grid-template-columns: 16px minmax(0, 1fr);
        gap: 2px 6px;
        padding: 6px 8px;
        border-radius: 10px;
    }

    .relay-out img,
    .relay-out__mark {
        width: 16px;
        height: 16px;
    }

    .relay-out__mark svg,
    .relay-out__mark .app-lord-icon {
        width: 13px;
        height: 13px;
    }

    .relay-out strong {
        font-size: 10.5px;
    }

    .relay-out__note {
        font-size: 9px;
    }
}