/*
 * Self-hosted fonts.
 *
 * Both are variable fonts, so all four Inter weights and all three Space
 * Grotesk weights come from one file each — two requests, latin subset only,
 * rather than a stylesheet from fonts.googleapis.com that then fetches from
 * fonts.gstatic.com. That removed two DNS lookups and two TLS handshakes from
 * the critical path, and the stylesheet is no longer a third-party render block.
 *
 * font-display: swap keeps text visible while they load, which is what Google's
 * own &display=swap was asking for.
 *
 * Fonts: Inter and Space Grotesk, SIL Open Font License 1.1.
 */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/inter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                   U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                   U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('../fonts/space-grotesk-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                   U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                   U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   WPCWP — stage2 rebuild
   Design system, components and page styles.

   Written as one stylesheet on purpose: the brief forbids build tools, so
   there is no bundler to concatenate partials. Sections below run from tokens
   outward to components, then page-specific blocks, then responsive and
   accessibility rules last so they win without needing !important.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */

:root {
    /* Brand */
    --violet: #7C3AED;
    --violet-hover: #6D28D9;
    --cyan: #00D2FF;
    --coral: #FF6B35;
    --lime: #A3E635;

    /* Surfaces */
    --dark: #0B1120;
    --dark-elevated: #1E293B;
    --white: #FFFFFF;
    --slate-light: #F8FAFC;

    /* Text */
    --text-heading: #0F172A;
    --text-body: #475569;
    --text-muted: #94A3B8;
    --text-light: #F8FAFC;

    /* Borders */
    --border-dark: rgba(255, 255, 255, 0.1);
    --border-light: #E2E8F0;

    /* Glass */
    --glass-bg: rgba(255, 255, 255, 0.04);
    --glass-bg-strong: rgba(255, 255, 255, 0.08);
    --glass-border: 1px solid rgba(255, 255, 255, 0.12);
    --glass-blur: blur(16px);

    /* Radii */
    --r-card: 20px;
    --r-card-lg: 24px;
    --r-sm: 12px;
    --r-pill: 9999px;

    /* Shadows */
    --shadow-lift: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    --shadow-card: 0 1px 3px rgba(15, 23, 42, 0.06), 0 8px 24px -12px rgba(15, 23, 42, 0.12);
    --shadow-violet: 0 12px 32px -8px rgba(124, 58, 237, 0.45);

    /* Type */
    --font-display: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
    --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* Layout */
    --wrap: 1200px;
    --wrap-narrow: 860px;
    --gutter: 24px;
    --section-y: 96px;

    /* Motion */
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --speed: 0.28s;

    /* Chrome */
    --header-h: 68px;
    --bar-h: 44px;
}

/* --------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + 24px);
}

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.65;
    color: var(--text-body);
    background: var(--white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* `clip`, not `hidden`. overflow on body propagates to the viewport when
       html is `visible`, which hid the scrollbar without stopping the document
       being wider than the screen — visible as a white band once zoomed.
       `clip` neither propagates nor creates a scroll container. The `hidden`
       line before it is the fallback for browsers without `clip`. */
    overflow-x: hidden;
    overflow-x: clip;
}

body.is-locked {
    overflow: hidden;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 0.5em;
    font-family: var(--font-display);
    color: var(--text-heading);
    line-height: 1.15;
    letter-spacing: -0.02em;
    font-weight: 700;
}

p {
    margin: 0 0 1em;
}

a {
    color: var(--violet);
    text-decoration: none;
    transition: color var(--speed) var(--ease);
}

a:hover {
    color: var(--violet-hover);
}

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

ul, ol {
    margin: 0 0 1em;
    padding-left: 1.25em;
}

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

button {
    cursor: pointer;
    border: 0;
    background: none;
}

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

hr {
    border: 0;
    border-top: 1px solid var(--border-light);
    margin: 40px 0;
}

/* --------------------------------------------------------------------------
   3. TYPE SCALE
   -------------------------------------------------------------------------- */

.h-hero {
    font-size: clamp(2.25rem, 5.2vw, 4rem);
    line-height: 1.05;
    letter-spacing: -0.035em;
}

.h-section {
    font-size: clamp(1.75rem, 3.4vw, 2.75rem);
    letter-spacing: -0.03em;
}

.h-card {
    font-size: 1.125rem;
    letter-spacing: -0.015em;
    margin-bottom: 0.4em;
}

.lead {
    font-size: clamp(1.02rem, 1.5vw, 1.18rem);
    line-height: 1.7;
    color: var(--text-body);
}

.text-muted {
    color: var(--text-muted);
}

.mono-num {
    font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   4. LAYOUT UTILITIES
   -------------------------------------------------------------------------- */

.wrap {
    width: 100%;
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.wrap-narrow {
    max-width: var(--wrap-narrow);
}

.section {
    padding-top: var(--section-y);
    padding-bottom: var(--section-y);
}

/* Adjacent sections stack BOTH paddings — 96px below one and 96px above the
   next — so every boundary is a 192px hole rather than a gap. Halve the
   second one.

   Where the two sections share a ground there is no visible boundary at all,
   just an expanse of the same colour, so the top padding goes entirely and the
   first section's bottom padding does the separating on its own. That case is
   not rare: seventeen pages have adjacent untinted sections, and the guides
   run up to seven in a row. */
.section + .section { padding-top: calc(var(--section-y) / 2); }

.section:not(.section-alt) + .section:not(.section-alt),
.section-alt + .section-alt {
    padding-top: 0;
}

.section-tight {
    padding-top: 64px;
    padding-bottom: 64px;
}

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

.section-dark {
    background: var(--dark);
    color: var(--text-muted);
}

.section-dark h1,
.section-dark h2,
.section-dark h3,
.section-dark h4 {
    color: var(--text-light);
}

.section-head {
    max-width: 720px;
    margin: 0 auto 56px;
    text-align: center;
}

.section-head.is-left {
    margin-left: 0;
    text-align: left;
}

.section-head p {
    margin-bottom: 0;
}

.eyebrow {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--violet);
    margin-bottom: 14px;
}

.section-dark .eyebrow {
    color: var(--cyan);
}

.grid {
    display: grid;
    gap: 24px;
}

.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.stack-sm > * + * { margin-top: 12px; }
.center { text-align: center; }
.mt-32 { margin-top: 32px; }
.mb-0 { margin-bottom: 0; }

/* Skip link — first focusable element on every page. */
.skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 200;
    background: var(--violet);
    color: #fff;
    padding: 12px 20px;
    border-radius: 0 0 var(--r-sm) 0;
}

.skip:focus {
    left: 0;
    color: #fff;
}

/* --------------------------------------------------------------------------
   5. BUTTONS
   -------------------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1;
    padding: 15px 28px;
    border-radius: var(--r-pill);
    border: 1px solid transparent;
    transition: transform var(--speed) var(--ease),
                box-shadow var(--speed) var(--ease),
                background-color var(--speed) var(--ease),
                border-color var(--speed) var(--ease),
                color var(--speed) var(--ease);
    white-space: nowrap;
}

.btn:hover {
    transform: translateY(-2px);
}

.btn-primary {
    background: var(--violet);
    color: #fff;
    box-shadow: var(--shadow-violet);
}

.btn-primary:hover {
    background: var(--violet-hover);
    color: #fff;
    box-shadow: 0 18px 40px -10px rgba(124, 58, 237, 0.6);
}

.btn-outline {
    border-color: var(--border-light);
    color: var(--text-heading);
    background: var(--white);
}

.btn-outline:hover {
    border-color: var(--violet);
    color: var(--violet);
}

/* Outline sitting on a dark surface needs the inverse treatment. */
.section-dark .btn-outline,
.hero .btn-outline,
.cta-banner .btn-outline {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.28);
    color: var(--text-light);
}

.section-dark .btn-outline:hover,
.hero .btn-outline:hover,
.cta-banner .btn-outline:hover {
    border-color: var(--cyan);
    color: var(--cyan);
}

.btn-accent {
    background: var(--coral);
    color: #fff;
    box-shadow: 0 12px 32px -8px rgba(255, 107, 53, 0.5);
}

.btn-accent:hover {
    background: #ef5a24;
    color: #fff;
}

.btn-sm {
    padding: 11px 20px;
    font-size: 0.875rem;
}

.btn-block {
    display: flex;
    width: 100%;
}

.btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.btn-group.is-center {
    justify-content: center;
}

/* --------------------------------------------------------------------------
   6. BADGES & PILLS
   -------------------------------------------------------------------------- */

.pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: var(--r-pill);
    font-size: 0.82rem;
    font-weight: 500;
    background: var(--glass-bg-strong);
    border: var(--glass-border);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    color: var(--text-light);
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: var(--r-pill);
    font-size: 0.72rem;
    font-weight: 700;
    font-family: var(--font-display);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.badge-lime {
    background: var(--lime);
    color: #1A2E05;
}

.badge-violet {
    background: rgba(124, 58, 237, 0.12);
    color: var(--violet);
}

.badge-coral {
    background: rgba(255, 107, 53, 0.14);
    color: #C2410C;
}

.badge-cyan {
    background: rgba(0, 210, 255, 0.14);
    color: #0E7490;
}

/* --------------------------------------------------------------------------
   7. ANNOUNCEMENT BAR
   -------------------------------------------------------------------------- */

.announce {
    position: relative;
    z-index: 60;
    background: linear-gradient(90deg, var(--violet) 0%, #9333EA 50%, var(--cyan) 160%);
    color: #fff;
    font-size: 0.875rem;
    min-height: var(--bar-h);
    display: flex;
    align-items: center;
}

.announce[hidden] {
    display: none;
}

.announce__in {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 10px var(--gutter);
    width: 100%;
    max-width: var(--wrap);
    margin: 0 auto;
    text-align: center;
}

.announce code {
    font-family: var(--font-display);
    font-weight: 700;
    background: rgba(255, 255, 255, 0.2);
    padding: 2px 8px;
    border-radius: 6px;
    letter-spacing: 0.04em;
}

.announce__close {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
    opacity: 0.75;
    padding: 6px;
    line-height: 1;
    border-radius: 6px;
    transition: opacity var(--speed) var(--ease);
}

.announce__close:hover {
    opacity: 1;
}

/* --------------------------------------------------------------------------
   8. HEADER & NAVIGATION
   -------------------------------------------------------------------------- */

.header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, 0.85);
    border-bottom: 1px solid transparent;
    transition: background-color var(--speed) var(--ease),
                border-color var(--speed) var(--ease),
                box-shadow var(--speed) var(--ease);
}

.header.scrolled {
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-bottom-color: var(--border-light);
    box-shadow: 0 4px 24px -12px rgba(15, 23, 42, 0.25);
}

.header__in {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    height: var(--header-h);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.2rem;
    letter-spacing: -0.03em;
    color: var(--text-heading);
}

.brand:hover {
    color: var(--text-heading);
}

.brand__mark {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--violet), #A855F7 60%, var(--cyan));
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 0.95rem;
    box-shadow: 0 6px 16px -6px rgba(124, 58, 237, 0.7);
}

.nav {
    display: flex;
    align-items: center;
    gap: 30px;
}

.nav__link {
    font-size: 0.925rem;
    font-weight: 500;
    color: var(--text-body);
    position: relative;
    padding: 4px 0;
}

.nav__link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 0;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--violet), var(--cyan));
    transition: width var(--speed) var(--ease);
}

.nav__link:hover,
.nav__link[aria-current="page"] {
    color: var(--text-heading);
}

.nav__link:hover::after,
.nav__link[aria-current="page"]::after {
    width: 100%;
}

.header__actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

.nav__toggle {
    display: none;
    width: 42px;
    height: 42px;
    border-radius: var(--r-sm);
    border: 1px solid var(--border-light);
    color: var(--text-heading);
    font-size: 1.05rem;
    align-items: center;
    justify-content: center;
}

/* Mobile drawer */
.drawer {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(340px, 86vw);
    background: var(--white);
    z-index: 90;
    transform: translateX(100%);
    transition: transform 0.34s var(--ease);
    display: flex;
    flex-direction: column;
    padding: 20px;
    overflow-y: auto;
    box-shadow: -20px 0 60px -30px rgba(15, 23, 42, 0.5);
}

.drawer.is-open {
    transform: translateX(0);
}

.drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

.drawer__close {
    width: 42px;
    height: 42px;
    border-radius: var(--r-sm);
    border: 1px solid var(--border-light);
    display: grid;
    place-items: center;
    color: var(--text-heading);
}

.drawer__link {
    display: block;
    padding: 14px 4px;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.05rem;
    color: var(--text-heading);
    border-bottom: 1px solid var(--border-light);
}

.drawer__link:hover {
    color: var(--violet);
}

.drawer .btn {
    margin-top: 24px;
}

.overlay {
    position: fixed;
    inset: 0;
    background: rgba(11, 17, 32, 0.55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index: 80;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--speed) var(--ease), visibility var(--speed) var(--ease);
}

.overlay.is-open {
    opacity: 1;
    visibility: visible;
}

/* --------------------------------------------------------------------------
   9. HERO + MESH
   -------------------------------------------------------------------------- */

.hero {
    position: relative;
    background: var(--dark);
    color: var(--text-muted);
    padding: 88px 0 100px;
    overflow: hidden;
    isolation: isolate;
}

/* Two counter-drifting radial fields. Kept on a pseudo-element so the mesh
   never intercepts pointer events from the content above it. */
.hero__mesh {
    position: absolute;
    inset: -30%;
    z-index: -1;
    background:
        radial-gradient(38% 44% at 18% 22%, rgba(124, 58, 237, 0.55) 0%, transparent 62%),
        radial-gradient(34% 40% at 82% 16%, rgba(0, 210, 255, 0.32) 0%, transparent 60%),
        radial-gradient(46% 46% at 62% 88%, rgba(168, 85, 247, 0.34) 0%, transparent 64%),
        radial-gradient(30% 34% at 8% 78%, rgba(255, 107, 53, 0.18) 0%, transparent 60%);
    filter: blur(28px);
    animation: mesh-drift 22s ease-in-out infinite alternate;
}

.hero__grid-lines {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(70% 60% at 50% 40%, #000 0%, transparent 78%);
    -webkit-mask-image: radial-gradient(70% 60% at 50% 40%, #000 0%, transparent 78%);
}

.hero__in {
    text-align: center;
    max-width: 860px;
    margin: 0 auto;
}

.hero h1 {
    color: var(--text-light);
    margin: 22px 0 20px;
}

.hero h1 .grad {
    background: linear-gradient(100deg, var(--cyan), #C4B5FD 55%, var(--violet));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hero__sub {
    font-size: clamp(1.02rem, 1.6vw, 1.2rem);
    color: #CBD5E1;
    max-width: 680px;
    margin: 0 auto 34px;
}

.hero .btn-group {
    justify-content: center;
    margin-bottom: 26px;
}

.hero__trust {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 26px;
    font-size: 0.86rem;
    color: var(--text-muted);
}

.hero__trust span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.hero__trust i, .hero__trust .icon {
    color: var(--lime);
}

@keyframes mesh-drift {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    50%  { transform: translate3d(2.5%, -2%, 0) scale(1.06); }
    100% { transform: translate3d(-2%, 2.5%, 0) scale(1.02); }
}

/* --------------------------------------------------------------------------
   10. GUTENBERG EDITOR MOCKUP (pure CSS/HTML — no images anywhere)
   -------------------------------------------------------------------------- */

.editor {
    margin: 64px auto 0;
    max-width: 1040px;
    background: rgba(255, 255, 255, 0.05);
    border: var(--glass-border);
    border-radius: var(--r-card-lg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.9);
    overflow: hidden;
    text-align: left;
}

.editor__bar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 18px;
    background: rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid var(--border-dark);
}

.editor__dots {
    display: flex;
    gap: 7px;
}
.editor__dots i, .editor__dots .icon {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
}

.editor__dots i:nth-child(1) { background: #FF5F57; }
.editor__dots i:nth-child(2) { background: #FEBC2E; }
.editor__dots i:nth-child(3) { background: #28C840; }

.editor__tools {
    display: flex;
    gap: 6px;
    margin-left: 6px;
}

.editor__tools span {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.07);
    display: grid;
    place-items: center;
    color: var(--text-muted);
    font-size: 0.75rem;
}

.editor__title-chip {
    margin-left: auto;
    font-size: 0.75rem;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.editor__body {
    display: grid;
    grid-template-columns: 1fr 316px;
}

.editor__canvas {
    padding: 30px 34px 36px;
    border-right: 1px solid var(--border-dark);
}

.editor__post-title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-light);
    letter-spacing: -0.025em;
    margin-bottom: 20px;
}

.editor__block {
    position: relative;
    padding: 10px 12px;
    border-radius: 8px;
    margin-bottom: 8px;
    border: 1px solid transparent;
}

.editor__block.is-selected {
    border-color: rgba(124, 58, 237, 0.55);
    background: rgba(124, 58, 237, 0.08);
}

.editor__block-label {
    position: absolute;
    top: -9px;
    left: 10px;
    font-size: 0.62rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 700;
    font-family: var(--font-display);
    color: #fff;
    background: var(--violet);
    padding: 2px 7px;
    border-radius: 4px;
}

.editor__h2 {
    font-family: var(--font-display);
    font-size: 1.02rem;
    font-weight: 600;
    color: #E2E8F0;
}

.editor__line {
    height: 9px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.14);
    margin: 9px 0;
}

.editor__line.w-90 { width: 90%; }
.editor__line.w-75 { width: 75%; }
.editor__line.w-60 { width: 60%; }
.editor__line.w-45 { width: 45%; }

.editor__line.is-writing {
    background: linear-gradient(90deg, rgba(124, 58, 237, 0.85), rgba(0, 210, 255, 0.55));
    animation: type-in 2.6s var(--ease) infinite;
}

@keyframes type-in {
    0%   { width: 8%; opacity: 0.5; }
    60%  { width: 72%; opacity: 1; }
    100% { width: 8%; opacity: 0.5; }
}

/* Assistant sidebar */
.assistant {
    padding: 22px 20px;
    background: rgba(255, 255, 255, 0.03);
}

.assistant__head {
    display: flex;
    align-items: center;
    gap: 9px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--text-light);
    margin-bottom: 6px;
}
.assistant__head i, .assistant__head .icon {
    color: var(--cyan);
}

.assistant__status {
    font-size: 0.74rem;
    color: var(--lime);
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 18px;
}

.assistant__status::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--lime);
    animation: pulse-dot 1.6s ease-in-out infinite;
}

@keyframes pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.35; transform: scale(0.75); }
}

.assistant__label {
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 700;
    font-family: var(--font-display);
    color: var(--text-muted);
    margin: 18px 0 9px;
}

.assistant__outline {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.8rem;
}

.assistant__outline li {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 6px 0;
    color: #CBD5E1;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
}
.assistant__outline i, .assistant__outline .icon {
    color: var(--lime);
    font-size: 0.72rem;
    margin-top: 4px;
}
.assistant__outline li.is-pending i, .assistant__outline li.is-pending .icon {
    color: var(--text-muted);
}

.tone-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.tone-chip {
    font-size: 0.72rem;
    padding: 5px 11px;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #CBD5E1;
}

.tone-chip.is-active {
    background: rgba(124, 58, 237, 0.3);
    border-color: rgba(124, 58, 237, 0.7);
    color: #fff;
}

.seo-meter {
    margin-top: 8px;
}

.seo-meter__top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 8px;
}

.seo-meter__score {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--lime);
    line-height: 1;
}

.seo-meter__score small {
    font-size: 0.78rem;
    color: var(--text-muted);
    font-weight: 500;
}

.seo-meter__track {
    height: 7px;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, 0.1);
    overflow: hidden;
}

.seo-meter__fill {
    height: 100%;
    width: 94%;
    border-radius: var(--r-pill);
    background: linear-gradient(90deg, var(--cyan), var(--lime));
}

.assistant .btn {
    margin-top: 20px;
}

/* --------------------------------------------------------------------------
   11. TRUST / COMPATIBILITY BAR
   -------------------------------------------------------------------------- */

.trustbar {
    padding: 40px 0;
    border-bottom: 1px solid var(--border-light);
    background: var(--white);
}

.trustbar__label {
    text-align: center;
    font-size: 0.76rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 24px;
}

.trustbar__row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 14px 40px;
}

.trustbar__item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.98rem;
    color: #64748B;
    transition: color var(--speed) var(--ease);
}
.trustbar__item i, .trustbar__item .icon {
    font-size: 1.3rem;
    color: #94A3B8;
    transition: color var(--speed) var(--ease);
}
.trustbar__item:hover, .trustbar__item:hover i, .trustbar__item:hover .icon {
    color: var(--violet);
}

/* --------------------------------------------------------------------------
   12. CARDS
   -------------------------------------------------------------------------- */

.card {
    background: var(--white);
    border: 1px solid var(--border-light);
    border-radius: var(--r-card);
    padding: 28px;
    transition: transform var(--speed) var(--ease),
                box-shadow var(--speed) var(--ease),
                border-color var(--speed) var(--ease);
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lift);
    border-color: rgba(124, 58, 237, 0.35);
}

.card p:last-child {
    margin-bottom: 0;
}

.card__icon {
    width: 46px;
    height: 46px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    font-size: 1.1rem;
    margin-bottom: 18px;
    background: rgba(124, 58, 237, 0.1);
    color: var(--violet);
}

.card__icon.is-cyan  { background: rgba(0, 210, 255, 0.12);  color: #0891B2; }
.card__icon.is-coral { background: rgba(255, 107, 53, 0.12); color: #EA580C; }
.card__icon.is-lime  { background: rgba(163, 230, 53, 0.18); color: #4D7C0F; }

/* Glass card variant for dark sections */
.card-glass {
    background: var(--glass-bg);
    border: var(--glass-border);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    color: #CBD5E1;
}

.card-glass:hover {
    background: var(--glass-bg-strong);
    border-color: rgba(0, 210, 255, 0.4);
    box-shadow: 0 24px 50px -24px rgba(0, 0, 0, 0.8);
}

.card-glass .card__icon {
    background: rgba(255, 255, 255, 0.08);
    color: var(--cyan);
}

/* --------------------------------------------------------------------------
   13. STEPS (How it works)
   -------------------------------------------------------------------------- */

/* Numbered because installation genuinely is ordered — you cannot connect an
   account before the plugin exists. */
.steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    counter-reset: step;
}

.step {
    position: relative;
    padding: 32px 28px;
    background: var(--white);
    border: 1px solid var(--border-light);
    border-radius: var(--r-card);
}

.step__num {
    counter-increment: step;
    font-family: var(--font-display);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--violet);
    display: block;
    margin-bottom: 14px;
}

.step__num::before {
    content: "STEP 0" counter(step);
}

.step__connector {
    position: absolute;
    top: 46px;
    right: -16px;
    color: var(--border-light);
    font-size: 1rem;
}

.steps .step:last-child .step__connector {
    display: none;
}

/* --------------------------------------------------------------------------
   14. CHECKLIST / DIFFERENTIATORS
   -------------------------------------------------------------------------- */

.checklist {
    list-style: none;
    padding: 0;
    margin: 0;
}

.checklist li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 9px 0;
}
.checklist i, .checklist .icon {
    color: var(--lime);
    margin-top: 5px;
    flex-shrink: 0;
}
.checklist.is-cross i, .checklist.is-cross .icon {
    color: #F87171;
}

.versus {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.versus__col {
    border-radius: var(--r-card);
    padding: 30px;
    border: 1px solid var(--border-light);
    background: var(--white);
}

.versus__col.is-them {
    background: var(--slate-light);
}

.versus__col.is-us {
    border-color: rgba(124, 58, 237, 0.4);
    box-shadow: var(--shadow-card);
}

.versus__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--text-heading);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* --------------------------------------------------------------------------
   15. PRICING
   -------------------------------------------------------------------------- */

.price-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: start;
}

.price-card {
    position: relative;
    background: var(--white);
    border: 1px solid var(--border-light);
    border-radius: var(--r-card-lg);
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
    transition: transform var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}

.price-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lift);
}

.price-card.is-featured {
    border-color: var(--violet);
    box-shadow: var(--shadow-violet);
}

.price-card__flag {
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    /* An absolutely positioned box anchored at left:50% may only use the half
       of the card to its right, so anything longer than about "Most popular"
       wraps to two lines. The translate keeps it centred whatever its width,
       so it is safe to let it size to its text and overhang. */
    white-space: nowrap;
}

.price-card__name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--text-heading);
}

.price-card__desc {
    font-size: 0.88rem;
    color: var(--text-muted);
    margin-bottom: 20px;
}

.price-card__amount {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-bottom: 4px;
}

.price-card__amount .num {
    font-family: var(--font-display);
    font-size: 2.9rem;
    font-weight: 700;
    color: var(--text-heading);
    letter-spacing: -0.04em;
    line-height: 1;
}

.price-card__amount .per {
    font-size: 0.92rem;
    color: var(--text-muted);
}

.price-card__note {
    font-size: 0.8rem;
    color: var(--text-muted);
    min-height: 20px;
    margin-bottom: 22px;
}

.price-card__features {
    list-style: none;
    padding: 0;
    margin: 0 0 26px;
    font-size: 0.9rem;
    flex-grow: 1;
}

.price-card__features li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 7px 0;
    border-bottom: 1px solid var(--border-light);
}

.price-card__features li:last-child {
    border-bottom: 0;
}

.price-card__features i, .price-card__features .icon {
    color: var(--violet);
    margin-top: 5px;
    font-size: 0.8rem;
    flex-shrink: 0;
}

/* Billing toggle */
.billing-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-bottom: 40px;
    font-size: 0.92rem;
    font-weight: 500;
}

.billing-toggle__switch {
    position: relative;
    width: 56px;
    height: 30px;
    border-radius: var(--r-pill);
    background: var(--border-light);
    transition: background-color var(--speed) var(--ease);
    flex-shrink: 0;
}

.billing-toggle__switch::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.25);
    transition: transform var(--speed) var(--ease);
}

.billing-toggle__switch[aria-checked="true"] {
    background: var(--violet);
}

.billing-toggle__switch[aria-checked="true"]::after {
    transform: translateX(26px);
}

.billing-toggle__opt.is-active {
    color: var(--text-heading);
    font-weight: 600;
}

/* Guarantee band */
.guarantee {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 26px 30px;
    border-radius: var(--r-card);
    background: rgba(163, 230, 53, 0.1);
    border: 1px solid rgba(163, 230, 53, 0.45);
}

.guarantee__icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--lime);
    color: #1A2E05;
    font-size: 1.25rem;
    flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   16. COMPARISON MATRIX
   -------------------------------------------------------------------------- */

/* Domain cost calculator. Two columns on desktop — the question on the left,
   the answer on the right — collapsing to one at phone width so the answer
   sits directly under the field that produced it. */
.calc {
    display: grid;
    grid-template-columns: minmax(200px, 280px) 1fr;
    gap: 28px;
    align-items: start;
    background: var(--white);
    border: 1px solid var(--border-light);
    border-radius: var(--r-card);
    padding: 28px;
    box-shadow: var(--shadow-card);
}

/* Both columns open with a label of identical height and margin. That is what
   aligns them: the input box and the price below it start at the same offset,
   instead of a 0.9rem label sitting beside a 2rem number and the eye being
   asked to relate them. */
.calc__input label,
.calc__label {
    display: block;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.9rem;
    line-height: 1.65;
    color: var(--text-heading);
    margin-bottom: 8px;
}

.calc__input input {
    width: 100%;
    padding: 13px 16px;
    font: inherit;
    font-variant-numeric: tabular-nums;
    color: var(--text-heading);
    background: var(--white);
    border: 1px solid var(--border-light);
    border-radius: var(--r-sm);
}

.calc__input input:focus-visible {
    outline: 3px solid var(--cyan);
    outline-offset: 2px;
    border-color: var(--violet);
}

/* The AI cost calculator has four fields where the pricing one has a single
   input. A column sized for one control left the answer stranded at the top
   beside a stack four times its height, so this variant drops the two-column
   split: fields run across the card, the answer sits beneath them.

   The fields reuse .field, the site's own form component, so the controls are
   the same ones every other form on the site uses rather than a second set
   styled to look similar. */
.calc--stack { display: block; }

.calc__fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 20px;
}

/* .field carries a bottom margin for stacked forms. The grid gap does that job
   here, and the two together make the rows uneven. */
.calc__fields .field { margin-bottom: 0; }

.calc--stack .calc__result {
    margin-top: 24px;
    padding-top: 22px;
    border-top: 1px solid var(--border-light);
}

@media (max-width: 620px) {
    .calc__fields { grid-template-columns: 1fr; }
}

/* The call to action, anchored under the field rather than after the answer.
   The answer changes length as you type; a button below it would shift down
   the page while the reader is moving toward it. */
.calc__cta { margin-top: 14px; }
.calc__cta .btn { width: 100%; }

/* <output> is inline by default, which would collapse the answer onto one
   line and ignore the paragraphs' margins. */
.calc__out { display: block; }

.calc__lead {
    margin: 0 0 8px;
    /* Matches the input's box height (13px padding, 1 line, 1px border) so the
       number and the field it answers occupy the same band. */
    line-height: 1.5;
    min-height: 48px;
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--text-heading);
    font-variant-numeric: tabular-nums;
}

.calc__lead span {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-muted);
    letter-spacing: 0;
}

.calc__detail {
    margin: 0 0 10px;
    font-size: 0.9rem;
    color: var(--text-body);
}

@media (max-width: 720px) {
    .calc { grid-template-columns: 1fr; gap: 20px; padding: 22px; }
    .calc__lead { font-size: 1.7rem; }
}

/* Footnote under the comparison table, for the asterisk on "Unlimited*". */
.table-note {
    margin: 12px 0 0;
    font-size: 0.8rem;
    line-height: 1.55;
    color: var(--text-muted);
}

/* A caveat standing on its own, rather than a caption tucked under a table.
   The base rule is built for the caption case: 12px above and nothing below,
   which leaves it jammed against whatever precedes it and flush against
   whatever follows. It also needs a measure — at 0.8rem across the full wrap
   the line runs about 150 characters, well past readable. */
.table-note.is-standalone {
    max-width: 68ch;
    margin: 36px auto 0;
    text-align: center;
}

.table-scroll {
    /* The matrix inside is min-width:860px. Without this the scroll container
       grows to fit it and pushes the whole document wider than the phone. */
    max-width: 100%;
    overflow-x: auto;
    border: 1px solid var(--border-light);
    border-radius: var(--r-card);
    background: var(--white);
    -webkit-overflow-scrolling: touch;
}

.matrix {
    min-width: 860px;
    font-size: 0.88rem;
}

.matrix th,
.matrix td {
    padding: 15px 18px;
    text-align: left;
    border-bottom: 1px solid var(--border-light);
    vertical-align: middle;
}

.matrix thead th {
    background: var(--slate-light);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.82rem;
    color: var(--text-heading);
    white-space: nowrap;
    position: sticky;
    top: 0;
}

.matrix tbody th {
    font-weight: 500;
    color: var(--text-heading);
    white-space: nowrap;
}

.matrix tbody tr:last-child th,
.matrix tbody tr:last-child td {
    border-bottom: 0;
}

.matrix tbody tr:hover td,
.matrix tbody tr:hover th {
    background: rgba(124, 58, 237, 0.035);
}

/* The product's own column is highlighted the whole way down. */
.matrix .col-us {
    background: rgba(124, 58, 237, 0.06);
    font-weight: 600;
    color: var(--text-heading);
}

.matrix thead .col-us {
    background: rgba(124, 58, 237, 0.14);
    color: var(--violet);
}

.tick  { color: #16A34A; }
.cross { color: #DC2626; }
.part  { color: #CA8A04; }

/* --------------------------------------------------------------------------
   17. TESTIMONIALS
   -------------------------------------------------------------------------- */

.quote-card {
    background: var(--white);
    border: 1px solid var(--border-light);
    border-radius: var(--r-card);
    padding: 28px;
    display: flex;
    flex-direction: column;
    transition: transform var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}

.quote-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lift);
}

.stars {
    color: #F59E0B;
    font-size: 0.85rem;
    letter-spacing: 2px;
    margin-bottom: 14px;
}

.quote-card blockquote {
    margin: 0 0 22px;
    font-size: 0.98rem;
    color: var(--text-body);
    flex-grow: 1;
}

.quote-card figcaption {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Avatars are CSS-drawn initials — the brief bans image files outright. */
.avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.92rem;
    color: #fff;
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--violet), var(--cyan));
}

/* A mirrored profile picture fills the same 44px circle the initials use, so
   a card with a photo and one without line up exactly. The gradient stays
   underneath as the loading colour rather than a grey flash. */
.avatar.has-photo { overflow: hidden; }

.avatar.has-photo img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.avatar.is-b { background: linear-gradient(135deg, #EC4899, var(--coral)); }
.avatar.is-c { background: linear-gradient(135deg, #0EA5E9, var(--lime)); }

.quote-card__name {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.94rem;
    color: var(--text-heading);
    line-height: 1.3;
}

/* The proof section's stat row and the team's note sit below the six cards,
   so they need their own top gap: `.grid` supplies gap BETWEEN its children,
   never above itself. */
.proof-stats { margin-top: 30px; }

/* A lone quote-card. The class was written for a three-up grid; standing by
   itself with no width bound, the blockquote runs the full wrap and the line
   length becomes unreadable. --wrap-narrow is the measure the FAQ already
   uses for exactly this reason. */
.quote-card.is-note {
    max-width: var(--wrap-narrow);
    margin: 30px auto 0;
}

.quote-card__role {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   18. FAQ ACCORDION
   -------------------------------------------------------------------------- */

.faq {
    max-width: var(--wrap-narrow);
    margin: 0 auto;
    border: 1px solid var(--border-light);
    border-radius: var(--r-card);
    overflow: hidden;
    background: var(--white);
}

.faq__item + .faq__item {
    border-top: 1px solid var(--border-light);
}

.faq__q {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 24px;
    text-align: left;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-heading);
    transition: background-color var(--speed) var(--ease), color var(--speed) var(--ease);
}

.faq__q:hover {
    background: var(--slate-light);
    color: var(--violet);
}
.faq__q i, .faq__q .icon {
    color: var(--violet);
    font-size: 0.9rem;
    flex-shrink: 0;
    transition: transform var(--speed) var(--ease);
}
.faq__q[aria-expanded="true"] i, .faq__q[aria-expanded="true"] .icon {
    transform: rotate(180deg);
}

/* Grid-rows transition animates to intrinsic height without a magic max-height. */
.faq__a {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.34s var(--ease);
}

.faq__a.is-open {
    grid-template-rows: 1fr;
}

.faq__a > div {
    overflow: hidden;
}

.faq__a p {
    padding: 0 24px 22px;
    margin: 0;
    font-size: 0.94rem;
}

/* --------------------------------------------------------------------------
   19. CTA BANNER
   -------------------------------------------------------------------------- */

.cta-banner {
    position: relative;
    border-radius: var(--r-card-lg);
    padding: 68px 40px;
    text-align: center;
    overflow: hidden;
    isolation: isolate;
    background: linear-gradient(120deg, #4C1D95 0%, var(--violet) 42%, #0891B2 100%);
    color: #E9D5FF;
}

.cta-banner::after {
    content: "";
    position: absolute;
    inset: -40%;
    z-index: -1;
    background:
        radial-gradient(38% 44% at 22% 18%, rgba(0, 210, 255, 0.4) 0%, transparent 62%),
        radial-gradient(36% 42% at 80% 82%, rgba(255, 107, 53, 0.3) 0%, transparent 62%);
    filter: blur(24px);
    animation: mesh-drift 18s ease-in-out infinite alternate;
}

.cta-banner h2 {
    color: #fff;
    margin-bottom: 14px;
}

.cta-banner p {
    max-width: 620px;
    margin: 0 auto 30px;
    font-size: 1.05rem;
}

.cta-banner .btn-primary {
    background: #fff;
    color: var(--violet);
    box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.5);
}

.cta-banner .btn-primary:hover {
    background: var(--slate-light);
    color: var(--violet-hover);
}

/* --------------------------------------------------------------------------
   20. FORMS
   -------------------------------------------------------------------------- */

.form-card {
    background: var(--white);
    border: 1px solid var(--border-light);
    border-radius: var(--r-card);
    padding: 32px;
    box-shadow: var(--shadow-card);
}

.field {
    margin-bottom: 18px;
}

.field label {
    display: block;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--text-heading);
    margin-bottom: 7px;
}

.field .req {
    color: var(--coral);
}

.field input,
.field select,
.field textarea {
    width: 100%;
    padding: 13px 15px;
    border: 1px solid var(--border-light);
    border-radius: var(--r-sm);
    background: var(--white);
    font-size: 0.94rem;
    transition: border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}

.field input::placeholder,
.field textarea::placeholder {
    color: #CBD5E1;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--violet);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.16);
}

.field textarea {
    min-height: 140px;
    resize: vertical;
}

.field__error {
    display: block;
    font-size: 0.8rem;
    color: #DC2626;
    margin-top: 6px;
    min-height: 0;
    opacity: 0;
    transition: opacity var(--speed) var(--ease);
}

.field.has-error input,
.field.has-error select,
.field.has-error textarea {
    border-color: #DC2626;
    background: rgba(220, 38, 38, 0.03);
}

.field.has-error .field__error {
    opacity: 1;
}

.field.is-valid input,
.field.is-valid select,
.field.is-valid textarea {
    border-color: #16A34A;
}

.field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 18px;
}

.form-note {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin: 14px 0 0;
}

/* The two contact columns hold forms with different field counts — the
   technical one also asks for a site address and a plan — so the cards ended
   at different heights with their buttons at different levels.

   The grid already stretches the columns; what was missing is the form opting
   in to filling one, and the submit button being pushed to the bottom instead
   of simply following the last field. Scoped to .contact-col rather than
   .grid-2 > .reveal, so it cannot reach the other pages that pair reveals in
   a two-column grid. */
.contact-col { display: flex; flex-direction: column; }

.contact-col .form-card {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.contact-col .form-card > .btn { margin-top: auto; }

/* "(optional)" next to a label. The required fields are already marked, and
   marking both sides is what stops "no marking" meaning two different things
   on the same form. */
.field__opt {
    font-weight: 400;
    color: var(--text-muted);
}

/* Two fields sharing a row. minmax(0,1fr) rather than 1fr, because an input's
   default intrinsic width is wider than half these columns and plain 1fr lets
   it push the row past its container. */
.field-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 16px;
}

/* At phone width a row of two is two rows of one, and each needs its own
   spacing back. */
@media (max-width: 520px) {
    .field-row { grid-template-columns: 1fr; gap: 0; }
}

/* The booking embed. The fallback is the resting state and is simply replaced
   when a frame is injected, so a missing URL, missing JavaScript or a refused
   frame all leave the visitor with a way to reach us rather than a blank box. */
.booking {
    background: var(--white);
    border: 1px solid var(--border-light);
    border-radius: var(--r-card);
    box-shadow: var(--shadow-card);
    padding: 28px;
    max-width: 820px;
    margin-inline: auto;
}

.booking.is-loaded {
    /* The frame brings its own padding, and Google's page is already white. */
    padding: 0;
    overflow: hidden;
}

.booking.is-loaded .booking__fallback { display: none; }

.booking iframe { display: block; width: 100%; }

.booking__fallback h2 { margin-top: 0; }
.booking__fallback p:last-of-type { margin-bottom: 0; }

/* A checkbox row. The label wraps the input so the whole line is a hit target,
   which also means the label must not be the block-level one the other fields
   use or the text would sit under the box. */
.field--check label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-weight: 400;
    font-size: 0.9rem;
    color: var(--text-body);
    margin: 0;
    cursor: pointer;
}

.field--check input[type="checkbox"] {
    width: auto;
    margin: 3px 0 0;
    flex-shrink: 0;
}

/* Toast */
.toast {
    position: fixed;
    left: 50%;
    bottom: 32px;
    transform: translate(-50%, 140%);
    z-index: 120;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 22px;
    border-radius: var(--r-pill);
    background: var(--dark-elevated);
    color: var(--text-light);
    font-size: 0.92rem;
    box-shadow: 0 20px 50px -18px rgba(0, 0, 0, 0.7);
    transition: transform 0.42s var(--ease), opacity 0.42s var(--ease);
    opacity: 0;
    max-width: calc(100vw - 40px);
}

.toast.is-visible {
    transform: translate(-50%, 0);
    opacity: 1;
}
.toast i, .toast .icon {
    color: var(--lime);
    font-size: 1.05rem;
}
.toast.is-error i, .toast.is-error .icon {
    color: var(--coral);
}

/* --------------------------------------------------------------------------
   21. FOOTER
   -------------------------------------------------------------------------- */

.footer {
    background: var(--dark);
    color: var(--text-muted);
    padding: 72px 0 32px;
    font-size: 0.9rem;
}

.footer__top {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: 40px;
    padding-bottom: 48px;
    border-bottom: 1px solid var(--border-dark);
}

.footer .brand {
    color: var(--text-light);
    margin-bottom: 14px;
}

.footer .brand:hover {
    color: var(--text-light);
}

.footer__blurb {
    max-width: 300px;
    font-size: 0.88rem;
}

.footer__title {
    font-family: var(--font-display);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-light);
    margin-bottom: 16px;
}

.footer__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer__list li {
    margin-bottom: 10px;
}

.footer__list a {
    color: var(--text-muted);
}

.footer__list a:hover {
    color: var(--cyan);
}

.footer__news {
    margin-top: 20px;
}

.footer__news .field {
    margin-bottom: 10px;
}

/* The footer sits on --dark. The shared .field label rule sets
   color: var(--text-heading), which is near-black and effectively invisible
   there, so the label is set explicitly for this context. */
.footer__news label {
    color: var(--white);
}

.footer__news input {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--border-dark);
    color: var(--text-light);
}

.footer__news input::placeholder {
    color: #64748B;
}

.footer__news .field__error {
    color: #FCA5A5;
}

.footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 26px;
    font-size: 0.84rem;
}

.footer__legal {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.footer__legal a {
    color: var(--text-muted);
}

.footer__legal a:hover {
    color: var(--cyan);
}

/* --------------------------------------------------------------------------
   22. PAGE HEADER (inner pages)
   -------------------------------------------------------------------------- */

.page-head {
    position: relative;
    background: var(--dark);
    color: #CBD5E1;
    padding: 76px 0 68px;
    overflow: hidden;
    isolation: isolate;
    text-align: center;
}

.page-head::after {
    content: "";
    position: absolute;
    inset: -50%;
    z-index: -1;
    background:
        radial-gradient(34% 46% at 24% 20%, rgba(124, 58, 237, 0.5) 0%, transparent 62%),
        radial-gradient(32% 40% at 78% 78%, rgba(0, 210, 255, 0.26) 0%, transparent 60%);
    filter: blur(26px);
    animation: mesh-drift 24s ease-in-out infinite alternate;
}

.page-head h1 {
    color: var(--text-light);
    font-size: clamp(2rem, 4vw, 3.1rem);
    margin-bottom: 16px;
}

.page-head p {
    max-width: 660px;
    margin: 0 auto;
    font-size: 1.05rem;
}

.crumbs {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-bottom: 18px;
}

.crumbs a {
    color: var(--text-muted);
}

.crumbs a:hover {
    color: var(--cyan);
}

/* --------------------------------------------------------------------------
   23. FEATURE DETAIL BLOCKS
   -------------------------------------------------------------------------- */

.feature-block + .feature-block {
    margin-top: 72px;
}

.feature-block__head {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 26px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--border-light);
}

.feature-block__head .card__icon {
    margin-bottom: 0;
}

.feature-block__head h2 {
    font-size: 1.5rem;
    margin: 0;
}

/* Split layout used on what-we-do / why-choose-us */
.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
}

.split__media {
    background: var(--dark);
    border-radius: var(--r-card-lg);
    padding: 32px;
    color: #CBD5E1;
    border: 1px solid var(--border-dark);
}

/* Pipeline diagram — CSS only, describes the real request path. */
.pipeline {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: hop;
}

.pipeline li {
    position: relative;
    padding: 0 0 26px 44px;
    counter-increment: hop;
}

.pipeline li::before {
    content: counter(hop);
    position: absolute;
    left: 0;
    top: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    font-size: 0.78rem;
    font-weight: 700;
    color: #fff;
    background: var(--violet);
}

.pipeline li::after {
    content: "";
    position: absolute;
    left: 13px;
    top: 30px;
    bottom: 4px;
    width: 2px;
    background: linear-gradient(180deg, var(--violet), rgba(0, 210, 255, 0.25));
}

.pipeline li:last-child {
    padding-bottom: 0;
}

.pipeline li:last-child::after {
    display: none;
}

.pipeline strong {
    display: block;
    color: var(--text-light);
    font-family: var(--font-display);
    font-size: 0.98rem;
    margin-bottom: 3px;
}

.pipeline span {
    font-size: 0.88rem;
}

/* Stat tiles */
.stat {
    text-align: center;
    padding: 26px 20px;
    border-radius: var(--r-card);
    border: 1px solid var(--border-light);
    background: var(--white);
}

.stat__num {
    display: block;
    font-family: var(--font-display);
    font-size: 2.3rem;
    font-weight: 700;
    letter-spacing: -0.04em;
    color: var(--violet);
    line-height: 1.1;
}

.stat__label {
    font-size: 0.86rem;
    color: var(--text-muted);
}

.section-dark .stat {
    background: var(--glass-bg);
    border: var(--glass-border);
}

.section-dark .stat__num {
    color: var(--cyan);
}

/* Benchmark bars */
.bench {
    list-style: none;
    padding: 0;
    margin: 0;
}

.bench li {
    margin-bottom: 20px;
}

.bench__top {
    display: flex;
    justify-content: space-between;
    font-size: 0.88rem;
    margin-bottom: 7px;
}

.bench__name {
    font-weight: 500;
    color: var(--text-heading);
}

.bench__val {
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
}

.bench__track {
    height: 10px;
    border-radius: var(--r-pill);
    background: var(--border-light);
    overflow: hidden;
}

.bench__fill {
    height: 100%;
    border-radius: var(--r-pill);
    background: linear-gradient(90deg, #CBD5E1, #94A3B8);
}

.bench li.is-us .bench__fill {
    background: linear-gradient(90deg, var(--violet), var(--cyan));
}

.bench li.is-us .bench__name {
    color: var(--violet);
    font-weight: 700;
}

/* --------------------------------------------------------------------------
   24. LEGAL PAGES
   -------------------------------------------------------------------------- */

.legal {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 56px;
    align-items: start;
}

.legal__toc {
    position: sticky;
    top: calc(var(--header-h) + 24px);
    border: 1px solid var(--border-light);
    border-radius: var(--r-card);
    padding: 22px;
    background: var(--white);
}

.legal__toc h2 {
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 14px;
}

.legal__toc ol {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: toc;
    font-size: 0.88rem;
}

.legal__toc li {
    counter-increment: toc;
    margin-bottom: 9px;
}

.legal__toc a {
    color: var(--text-body);
    display: flex;
    gap: 9px;
}

.legal__toc a::before {
    content: counter(toc) ".";
    color: var(--text-muted);
    flex-shrink: 0;
}

.legal__toc a:hover {
    color: var(--violet);
}

.legal__body h2 {
    font-size: 1.35rem;
    margin-top: 44px;
    scroll-margin-top: calc(var(--header-h) + 24px);
}

.legal__body h2:first-child {
    margin-top: 0;
}

.legal__body h3 {
    font-size: 1.05rem;
    margin-top: 26px;
}

.legal__body li {
    margin-bottom: 8px;
}

.legal__updated {
    display: inline-block;
    font-size: 0.84rem;
    color: var(--text-muted);
    padding: 8px 16px;
    border-radius: var(--r-pill);
    background: var(--slate-light);
    border: 1px solid var(--border-light);
    margin-bottom: 32px;
}

/* --------------------------------------------------------------------------
   25. SCROLL REVEAL
   -------------------------------------------------------------------------- */

/* Only applied when JS is present, so a no-JS visitor never gets stuck with
   invisible content. script.js adds .js to <html> immediately. */
.js .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}

.js .reveal.is-visible {
    opacity: 1;
    transform: none;
}

.js .reveal-d1 { transition-delay: 0.08s; }
.js .reveal-d2 { transition-delay: 0.16s; }
.js .reveal-d3 { transition-delay: 0.24s; }

/* --------------------------------------------------------------------------
   26. ACCESSIBILITY
   -------------------------------------------------------------------------- */

:focus-visible {
    outline: 3px solid var(--cyan);
    outline-offset: 3px;
    border-radius: 4px;
}

.section-dark :focus-visible,
.hero :focus-visible,
.footer :focus-visible {
    outline-color: var(--lime);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --------------------------------------------------------------------------
   27. RESPONSIVE
   -------------------------------------------------------------------------- */

@media (max-width: 1040px) {
    :root {
        --section-y: 76px;
    }

    .grid-4 { grid-template-columns: repeat(2, 1fr); }

    .editor__body {
        grid-template-columns: 1fr;
    }

    .editor__canvas {
        border-right: 0;
        border-bottom: 1px solid var(--border-dark);
    }

    .footer__top {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }

    .legal {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .legal__toc {
        position: static;
    }
}

@media (max-width: 860px) {
    .nav,
    .header__actions .btn {
        display: none;
    }

    .nav__toggle {
        display: inline-flex;
    }

    .grid-3,
    .grid-2,
    .price-grid,
    .steps,
    .versus,
    .split {
        grid-template-columns: 1fr;
    }

    .split {
        gap: 32px;
    }

    .step__connector {
        display: none;
    }

    .announce__in {
        padding-right: 46px;
        font-size: 0.82rem;
    }
}

@media (max-width: 620px) {
    :root {
        --section-y: 60px;
        --gutter: 18px;
    }

    .grid-4 {
        grid-template-columns: 1fr;
    }

    .hero {
        padding: 60px 0 72px;
    }

    .hero .btn-group .btn,
    .cta-banner .btn-group .btn {
        width: 100%;
    }

    .field-row {
        grid-template-columns: 1fr;
    }

    .cta-banner {
        padding: 48px 22px;
    }

    .form-card {
        padding: 24px 20px;
    }

    .guarantee {
        flex-direction: column;
        text-align: center;
    }

    .footer__top {
        grid-template-columns: 1fr;
    }

    .editor__canvas,
    .assistant {
        padding: 22px 18px;
    }
}

/* --------------------------------------------------------------------------
   28. REDUCED MOTION
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }

    .js .reveal {
        opacity: 1;
        transform: none;
    }
}

/* --------------------------------------------------------------------------
   29. PRINT
   -------------------------------------------------------------------------- */

@media print {
    .announce,
    .header,
    .drawer,
    .overlay,
    .cta-banner,
    .footer,
    .toast {
        display: none !important;
    }

    body {
        color: #000;
        background: #fff;
    }
}

/* ------------------------------------------------------------------ icons */
/*
 * Inline SVG replaced the Font Awesome webfont. The font cost 156KB of
 * fa-solid, 117KB of fa-brands and 19KB of CSS, fetched from a third origin,
 * to draw a few dozen shapes; the sprite for a whole page is a couple of KB and
 * arrives with the HTML.
 *
 * Sized in em and filled with currentColor so every existing rule that set a
 * font-size or a color on an <i> keeps working unchanged.
 */
.icon {
    /* The reset above sets `img, svg { display: block }`, which stacked every
       inline icon onto its own line once these replaced Font Awesome's <i>.
       The rating stars were the visible symptom; it applied everywhere an icon
       sat in a line of text. */
    display: inline-block;
    width: 1em;
    height: 1em;
    fill: currentColor;
    vertical-align: -0.125em;
    flex: none;
}

/* --------------------------------------------------------------- byok band */
/*
 * The bring-your-own-key statement, as a band above the footer on the features
 * page and nowhere else.
 *
 * It was previously repeated at the top of six pages, which put a caveat in
 * front of the pitch on every one of them. Said once, at the end, where a
 * reader who has just read what the plugin does is ready for how it is paid for.
 */
.byok-band__inner {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    max-width: var(--wrap-narrow);
    padding: 26px 28px;
    border: 1px solid var(--border-light);
    border-left: 4px solid var(--violet);
    border-radius: var(--r-card);
    background: var(--white);
    box-shadow: var(--shadow-card);
}

.byok-band__title {
    font-size: 1.25rem;
    margin: 0 0 6px;
}

.byok-band__inner p {
    margin: 0;
    max-width: 68ch;
    color: var(--text-body);
}

.byok-band__inner .card__icon { margin-bottom: 0; }

@media (max-width: 640px) {
    .byok-band__inner { flex-direction: column; gap: 14px; padding: 22px; }
}

/* ---------------------------------------------------------------- consent */
/*
 * Cookie consent bar. Uses the same tokens as everything else, so it reads as
 * part of the site rather than a bolted-on widget from a vendor.
 *
 * Deliberately NOT a full-screen modal. A wall over the content to extract a
 * click is the pattern that makes people click "accept" to make it go away,
 * which produces consent that is not freely given and therefore worthless.
 */
.consent {
    position: fixed;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    z-index: 900;
    width: min(720px, calc(100% - 32px));
    display: flex;
    flex-wrap: wrap;
    gap: 12px 20px;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: var(--dark);
    color: var(--text-light);
    border: 1px solid var(--border-dark);
    border-radius: var(--r-card);
    box-shadow: var(--shadow-lift);
}

.consent__text {
    margin: 0;
    /* Basis on the inline axis only. Setting it here as `flex: 1 1 320px` made
       the column layout below treat 320px as a HEIGHT, which is what produced
       the tall empty banner on phones. */
    flex: 1 1 auto;
    min-width: min(320px, 100%);
    font-size: 14px;
    line-height: 1.5;
}

.consent__text a { color: var(--cyan); }

.consent__actions {
    display: flex;
    gap: 10px;
    flex: 0 0 auto;
}

/* Reject and accept are the same size and weight. A reject styled as the quiet
   option is a dark pattern with extra steps. */
.consent__actions .btn { min-width: 104px; justify-content: center; }

@media (max-width: 560px) {
    .consent {
        flex-direction: column;
        align-items: stretch;
        /* Stacked, the banner should be exactly as tall as its contents. */
        gap: 14px;
    }
    /* No growing in a column: the paragraph must not absorb spare height. */
    .consent__text { flex: 0 0 auto; min-width: 0; }
    .consent__actions { flex: 0 0 auto; }
    .consent__actions .btn { flex: 1 1 0; min-width: 0; }
}

/* Changelog entries. Long lists of prose bullets, so they need more room to
   breathe than a feature list and a visible marker to scan down. */
.changelog__list{list-style:disc;padding-left:1.25rem;margin:.75rem 0 0}
.changelog__list li{margin:0 0 .6rem;line-height:1.6}
.changelog__list li:last-child{margin-bottom:0}

/* Centred note under a price grid. The three of these were written as inline
   style attributes, one per page, which is how a fourth gets added rather than
   reused. Same `is-center` modifier the button group already uses. */
.price-card__note.is-center{text-align:center}

/* An empty note still took up space: min-height 20px plus a 22px bottom margin,
   about 42px of nothing. Two on the pricing page are empty for most visitors —
   the tax note (only INR has one) and the annual-unavailable hint (only shown
   outside USD) — so roughly 84px of blank page sat between the heading and the
   cards, and immediately above the "Buying from India?" line.

   Hiding them costs no layout shift: neither is filled in response to the
   monthly/annual toggle. Both depend only on the currency, which is fixed for
   the life of the page. min-height stays for notes that DO have text, where it
   keeps the three cards' footers aligned. */
.price-card__note:empty { display: none; }

/* The annual-billing note sat flush against the bottom of the cards. .price-grid
   carries no bottom margin (its gap is between cards, not below them) and the
   global reset zeroes p's margin-top, so nothing at all separated them. */
.price-grid + .price-card__note { margin-top: 28px; }

/* Per-plan saving, under the price. Derived from the feed at runtime, never
   written into the page — the real figures are 8% and 17%, not one number. */
.price-card__saving {
    margin: 6px 0 0;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--violet);
}

/* The price change itself. Short, and only on the figures — animating the
   whole grid would be motion for its own sake. */
.price-grid.is-swapping .price-card__amount,
.price-grid.is-swapping .price-card__saving {
    animation: price-swap var(--speed) var(--ease) both;
}

@keyframes price-swap {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

/* Annual is priced in USD only, so the switch is disabled for a visitor
   seeing another currency. It has to look unavailable, not merely inert. */
.billing-toggle__switch:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.billing-toggle__switch:focus-visible {
    outline: 2px solid var(--violet);
    outline-offset: 2px;
}

/* The labels either side are clickable, so they should say so. */
.billing-toggle__opt { cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
    .price-grid.is-swapping .price-card__amount,
    .price-grid.is-swapping .price-card__saving { animation: none; }
}