/* ==========================================================================
   site.css — the marketing site's light design system.
   Loaded LAST on every page except viewer.html and account.html.

   Replaces the near-black homepage2.css treatment with the same palette the
   app's light theme uses (--primary-dark #03456d, --primary-bright #00a6cc,
   --accent-orange #f4611e) on near-white surfaces.

   Layering:
     main.css            brand tokens + app chrome        (kept)
     homepage2.css       OLD dark home page               (no longer linked by index.html)
     features-pages.css  shared marketing layout          (kept, lightened here)
     site.css            this file — surfaces, type, motion
   ========================================================================== */

/* ---------------------------------------------------------------- tokens */
:root {
    /* Surfaces. Warm-neutral rather than pure white so large areas do not
       glare, with a faint blue cast that ties back to the brand. */
    --site-bg:            #f7f9fb;
    --site-bg-alt:        #eef3f8;
    --site-surface:       #ffffff;
    --site-surface-muted: #f2f6fa;

    /* Ink. Near-black rather than #000 — softer against light surfaces. */
    --site-ink:        #10202b;
    --site-ink-soft:   #3d5566;
    --site-ink-muted:  #6b8394;

    --site-line:        rgba(3, 69, 109, 0.12);
    --site-line-strong: rgba(3, 69, 109, 0.22);

    --site-brand:       #03456d;
    --site-accent:      #00a6cc;
    --site-accent-deep: #0086a6;
    --site-warm:        #f4611e;

    /* Tinted rather than grey shadows — grey shadows read as dirt on a light page. */
    --site-shadow-sm: 0 1px 2px rgba(3, 69, 109, 0.06), 0 2px 6px rgba(3, 69, 109, 0.05);
    --site-shadow-md: 0 4px 12px rgba(3, 69, 109, 0.08), 0 12px 28px rgba(3, 69, 109, 0.07);
    --site-shadow-lg: 0 8px 24px rgba(3, 69, 109, 0.10), 0 24px 56px rgba(3, 69, 109, 0.10);
    --site-glow:      0 6px 24px rgba(0, 166, 204, 0.35);

    --site-radius:    14px;
    --site-radius-lg: 22px;
    --site-maxw:      1180px;

    --site-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------------------------------------------------------------- base */
/* main.css pins html/body to height:100% + overflow:hidden so the VIEWER fills the
   window and never scrolls. Every marketing page has to undo that or it is clipped
   to one viewport — which is exactly what happened when homepage2.css (the previous
   owner of this override) stopped being linked. Keep these four properties together. */
html.homepage2-page,
html.site-page {
    background: var(--site-bg);
    height: auto !important;
    min-height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* Every other marketing page (features, pricing, downloads, gallery, contact,
   the feature detail pages, privacy, terms) shares one body class and gets its
   darkness from a single rule in features-pages.css: `background:#000 !important`
   plus a fixed dark gradient on ::before. Overriding those two is most of the
   work; the rest of that file is layout and survives unchanged. */
html.features-page { background: var(--site-bg); }

body.features-page {
    background: var(--site-bg) !important;
    color: var(--site-ink) !important;
}
body.features-page::before { display: none !important; }

body.homepage2,
body.site,
body.features-page {
    background: var(--site-bg) !important;
    color: var(--site-ink) !important;
    height: auto !important;
    min-height: 100vh !important;
    overflow-y: visible !important;
    overflow-x: hidden !important;
    position: relative !important;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* The old dark animated gradient behind the home page. */
body.homepage2::before { display: none !important; }

/* Ambient light: two soft brand-tinted pools, fixed so they drift past the
   content as it scrolls. Cheap (no repaint) and does the "high-tech" work
   without darkening anything. */
body.homepage2::after,
body.site::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(60rem 60rem at 12% -10%, rgba(0, 166, 204, 0.16), transparent 60%),
        radial-gradient(50rem 50rem at 92% 8%,  rgba(3, 69, 109, 0.12),  transparent 60%),
        radial-gradient(46rem 46rem at 70% 96%, rgba(244, 97, 30, 0.08), transparent 62%);
}

/* Faint engineering grid — the single strongest "this is a technical product"
   cue available for the price of one gradient. Masked so it fades out before
   it can compete with the copy. */
.site-grid-bg { position: relative; }
.site-grid-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(to right,  var(--site-line) 1px, transparent 1px),
        linear-gradient(to bottom, var(--site-line) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 30%, transparent 78%);
            mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 30%, transparent 78%);
    opacity: 0.7;
}

.site-wrap { max-width: var(--site-maxw); margin: 0 auto; padding: 0 24px; }

/* ---------------------------------------------------------------- type */
body.homepage2 h1, body.homepage2 h2, body.homepage2 h3,
body.site h1, body.site h2, body.site h3 {
    color: var(--site-ink);
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.site-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--site-accent-deep);
    background: rgba(0, 166, 204, 0.10);
    border: 1px solid rgba(0, 166, 204, 0.22);
    padding: 6px 14px; border-radius: 999px;
}

.site-h1 { font-size: clamp(2.4rem, 6vw, 4.4rem); font-weight: 800; }
.site-h2 { font-size: clamp(1.9rem, 4vw, 3rem);   font-weight: 800; }
.site-h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); font-weight: 700; }

.site-lead {
    font-size: clamp(1.05rem, 1.6vw, 1.25rem);
    line-height: 1.65;
    color: var(--site-ink-soft);
    max-width: 62ch;
}

/* Gradient headline accent. -webkit-text-fill-color is what actually clips in
   Chromium/WebKit; the plain color is the fallback if the clip is unsupported,
   so the text is never invisible. */
/* Kept inside the blue/cyan family on purpose. Running it out to the orange made
   the tail of a long headline fail contrast against the near-white page — and
   which words got the pale end depended on where the text happened to wrap.
   Orange stays as a separate accent (badges, rules, icons). */
.site-gradient-text {
    color: var(--site-brand);
    background: linear-gradient(100deg, var(--site-brand) 0%, #0a6c9e 45%, var(--site-accent) 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ---------------------------------------------------------------- buttons */
.site-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    font-family: inherit; font-size: 1rem; font-weight: 700;
    padding: 15px 30px; border-radius: 999px;
    border: 1px solid transparent; cursor: pointer; text-decoration: none;
    transition: transform 0.25s var(--site-ease), box-shadow 0.25s var(--site-ease),
                background 0.25s var(--site-ease), color 0.25s var(--site-ease);
}
.site-btn-primary {
    color: #fff;
    background: linear-gradient(100deg, var(--site-accent) 0%, var(--site-brand) 100%);
    box-shadow: var(--site-glow);
}
.site-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 32px rgba(0, 166, 204, 0.45); color: #fff; }
.site-btn-ghost {
    color: var(--site-brand);
    background: var(--site-surface);
    border-color: var(--site-line-strong);
    box-shadow: var(--site-shadow-sm);
}
.site-btn-ghost:hover { transform: translateY(-2px); box-shadow: var(--site-shadow-md); color: var(--site-brand); }

/* ---------------------------------------------------------------- cards */
.site-card {
    background: var(--site-surface);
    border: 1px solid var(--site-line);
    border-radius: var(--site-radius-lg);
    box-shadow: var(--site-shadow-sm);
    padding: 28px;
    transition: transform 0.3s var(--site-ease), box-shadow 0.3s var(--site-ease),
                border-color 0.3s var(--site-ease);
}
.site-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--site-shadow-md);
    border-color: rgba(0, 166, 204, 0.35);
}

/* Gradient hairline along the top edge, drawn on a pseudo-element so it can be
   revealed on hover without shifting layout. */
.site-card-lit { position: relative; overflow: hidden; }
.site-card-lit::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--site-accent), var(--site-brand), var(--site-warm));
    transform: scaleX(0); transform-origin: left;
    transition: transform 0.45s var(--site-ease);
}
.site-card-lit:hover::before { transform: scaleX(1); }

.site-icon-badge {
    width: 52px; height: 52px; border-radius: 15px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.35rem; color: #fff;
    background: linear-gradient(135deg, var(--site-accent), var(--site-brand));
    box-shadow: 0 6px 18px rgba(0, 166, 204, 0.32);
    margin-bottom: 18px;
}

/* "More info" link inside a card. margin-top:auto pins it to the bottom so a row
   of cards with uneven copy still has its links on one line. */
.site-more {
    margin-top: auto;
    padding-top: 16px;
    display: inline-flex; align-items: center; gap: 7px;
    font-weight: 700; font-size: 0.95rem; text-decoration: none;
    color: var(--site-accent-deep);
    transition: gap 0.25s var(--site-ease), color 0.25s var(--site-ease);
}
.site-more:hover { gap: 12px; color: var(--site-brand); }
.site-more i { font-size: 0.85em; }

/* Cards in a grid stretch to the tallest; make them columns so .site-more can
   push itself to the bottom. */
.site-grid .site-card { display: flex; flex-direction: column; }

.site-grid { display: grid; gap: 24px; }
.site-grid-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.site-grid-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.site-grid-4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

/* ---------------------------------------------------------------- sections */
body.homepage2 .section,
/* features.html, downloads.html and friends carry body.features-page rather than
   body.site, so the section rhythm never applied there — headings and eyebrows
   sat flush against whatever preceded them. */
body.site .site-section,
body.features-page .site-section {
    position: relative;
    padding: clamp(72px, 9vw, 128px) 0;
    background: transparent;
    color: var(--site-ink);
}
.site-section-alt { background: linear-gradient(180deg, transparent, var(--site-bg-alt) 18%, var(--site-bg-alt) 82%, transparent); }

.site-section-head { text-align: center; max-width: 780px; margin: 0 auto clamp(40px, 5vw, 64px); }
.site-section-head .site-lead { margin-inline: auto; }

/* ---------------------------------------------------------------- motion */
/* Scroll reveal. Elements start slightly low and transparent; siteAnimations.js
   adds .is-visible via IntersectionObserver.

   .no-motion is set on <html> by that script when the user prefers reduced
   motion, and it hard-resets every animated property — an opacity:0 element
   whose observer never fires would otherwise be invisible forever, which is a
   far worse failure than an unanimated page. */
[data-reveal] {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.7s var(--site-ease), transform 0.7s var(--site-ease);
    transition-delay: var(--reveal-delay, 0ms);
    will-change: opacity, transform;
}
[data-reveal="left"]  { transform: translateX(-32px); }
[data-reveal="right"] { transform: translateX(32px); }
[data-reveal="zoom"]  { transform: scale(0.94); }

[data-reveal].is-visible { opacity: 1; transform: none; will-change: auto; }

html.no-motion [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}
html.no-motion .site-float,
html.no-motion .site-pulse,
html.no-motion .site-marquee-track { animation: none !important; }

@media (prefers-reduced-motion: reduce) {
    [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
    .site-float, .site-pulse, .site-marquee-track { animation: none !important; }
}

@keyframes siteFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.site-float { animation: siteFloat 7s ease-in-out infinite; }

@keyframes sitePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0, 166, 204, 0.45); }
    50%      { box-shadow: 0 0 0 16px rgba(0, 166, 204, 0); }
}
.site-pulse { animation: sitePulse 2.8s ease-out infinite; }

/* Scroll-linked progress bar under the header. */
#siteProgress {
    position: fixed; top: 0; left: 0; height: 3px; width: 100%;
    transform: scaleX(0); transform-origin: left; z-index: 9999;
    background: linear-gradient(90deg, var(--site-accent), var(--site-brand), var(--site-warm));
    pointer-events: none;
}

/* ---------------------------------------------------------------- hero */
.site-hero {
    position: relative;
    min-height: min(92vh, 900px);
    display: flex; align-items: center;
    padding: clamp(96px, 12vh, 150px) 0 clamp(64px, 8vh, 100px);
    overflow: hidden;
}
.site-hero-grid {
    display: grid; gap: clamp(32px, 5vw, 64px);
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: center;
}
@media (max-width: 900px) { .site-hero-grid { grid-template-columns: 1fr; } }

.site-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.site-hero-note { margin-top: 14px; font-size: 0.92rem; color: var(--site-ink-muted); }

.site-stats { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
.site-stat {
    background: var(--site-surface);
    border: 1px solid var(--site-line);
    border-radius: var(--site-radius);
    box-shadow: var(--site-shadow-sm);
    padding: 14px 20px; min-width: 132px;
}
.site-stat b { display: block; font-size: 1.5rem; font-weight: 800; color: var(--site-brand); line-height: 1.15; }
/* Direct child only. The figures wrap their number in <span data-countup>, so a
   bare `.site-stat span` also hit THAT and rendered "30s" as a small 30 beside a
   big s (and "4 apps" as a small 4 beside big apps). */
.site-stat > span { font-size: 0.82rem; color: var(--site-ink-muted); }

/* ---------------------------------------------------------------- host strip */
/* Revit / SketchUp / Rhino / browser — the newest and least-known part of the
   product, so it sits directly under the hero. */
.site-hosts { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.site-host {
    display: inline-flex; align-items: center; gap: 10px;
    background: var(--site-surface);
    border: 1px solid var(--site-line);
    border-radius: 999px;
    box-shadow: var(--site-shadow-sm);
    padding: 11px 22px;
    font-weight: 700; color: var(--site-ink-soft); font-size: 0.95rem;
    transition: transform 0.25s var(--site-ease), box-shadow 0.25s var(--site-ease), color 0.25s var(--site-ease);
}
.site-host:hover { transform: translateY(-3px); box-shadow: var(--site-shadow-md); color: var(--site-brand); }
.site-host i { color: var(--site-accent); }
.site-host-soon { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
                  color: var(--site-warm); background: rgba(244, 97, 30, 0.12);
                  border-radius: 999px; padding: 3px 9px; }

/* ---------------------------------------------------------------- steps */
.site-steps { counter-reset: site-step; display: grid; gap: 22px; }
/* Two-column grid rather than absolute positioning, so the badge tracks the
   heading instead of a hard-coded offset: it sits in column 1 spanning the rows,
   top-aligned with the first one. The old `position:absolute; top:2px` was tuned
   for a heading size that has since changed, which left the numbers floating
   above their titles. (Flex is wrong here — the heading and paragraph are
   siblings, so a flex row would stand them side by side.) */
.site-step { display: grid; grid-template-columns: 50px 1fr; column-gap: 24px; align-items: start; }
.site-step > * { grid-column: 2; min-width: 0; }
/* The heading inherits a top margin from the global h3 rule, which pushed the
   title 22px below the badge. Zero it so the two tops meet. */
.site-step .site-h3 { margin-top: 0; line-height: 1.2; }
.site-step::before {
    counter-increment: site-step;
    content: counter(site-step);
    grid-column: 1; grid-row: 1 / -1; align-self: start;
    width: 50px; height: 50px; border-radius: 15px;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 1.2rem; color: #fff;
    background: linear-gradient(135deg, var(--site-brand), var(--site-accent));
    box-shadow: 0 6px 18px rgba(3, 69, 109, 0.26);
}

/* ---------------------------------------------------------------- misc */
.site-check { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; }
.site-check li { position: relative; padding-left: 30px; color: var(--site-ink-soft); line-height: 1.55; }
.site-check li::before {
    content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
    position: absolute; left: 0; top: 1px; font-size: 0.82rem;
    color: var(--site-accent);
}

.site-figure {
    border-radius: var(--site-radius-lg);
    border: 1px solid var(--site-line);
    box-shadow: var(--site-shadow-lg);
    overflow: hidden;
    background: var(--site-surface);
}
.site-figure img, .site-figure video { display: block; width: 100%; height: auto; }

/* Inside a card the figures sit side by side, so they have to agree on a shape —
   the three sources are 400x400, 665x441 and 1140x1140. A square box with `cover`
   crops the odd one out horizontally and leaves all three the same height. */
.site-card .site-figure img { aspect-ratio: 1 / 1; height: auto; object-fit: cover; }

.site-quote {
    border-left: 3px solid var(--site-accent);
    padding-left: 22px; font-size: 1.1rem; line-height: 1.65;
    color: var(--site-ink-soft); font-style: italic;
}

/* ---------------------------------------------------------------- lighten the shared marketing CSS */
/* features-pages.css / info-pages.css were authored against the dark page. These
   are deliberately narrow overrides rather than edits to those files, so the old
   look is one stylesheet link away if this direction is rejected. */
body.site .feature-hero, body.features-page .feature-hero,
body.site .info-hero,    body.features-page .info-hero,
body.site .page-hero,    body.features-page .page-hero { background: transparent; color: var(--site-ink); }

body.site .feature-card,   body.features-page .feature-card,
body.site .info-card,      body.features-page .info-card,
body.site .content-card,   body.features-page .content-card,
body.features-page .pricing-card,
body.features-page .download-card {
    background: var(--site-surface);
    border: 1px solid var(--site-line);
    box-shadow: var(--site-shadow-sm);
    color: var(--site-ink);
}

body.site p,  body.features-page p,
body.site li, body.features-page li { color: var(--site-ink-soft); }

body.site h1, body.features-page h1,
body.site h2, body.features-page h2,
body.site h3, body.features-page h3,
body.site h4, body.features-page h4 { color: var(--site-ink); }

body.site a { color: var(--site-accent-deep); }
body.site a:hover { color: var(--site-brand); }

/* --- shared components on the detail / info pages ------------------------
   downloads, the six feature pages, pricing, contact, privacy and terms all share
   this vocabulary from features-pages.css. Restyling it here lifts all of them at
   once, so those pages keep their markup and their copy. Selectors are prefixed
   with body.features-page to outrank the originals without needing !important. */

body.features-page main { position: relative; }

body.features-page .feature-hero,
body.features-page .about-hero {
    text-align: center;
    padding: clamp(120px, 16vh, 180px) 24px clamp(40px, 6vh, 72px);
    max-width: 860px; margin: 0 auto;
    background: transparent;
}
body.features-page .feature-hero h1,
body.features-page .about-hero h1 {
    font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 800;
    letter-spacing: -0.02em; color: var(--site-ink); margin-bottom: 20px;
}
body.features-page .feature-hero p,
body.features-page .about-hero p {
    font-size: clamp(1.05rem, 1.6vw, 1.2rem); line-height: 1.65;
    color: var(--site-ink-soft); max-width: 66ch; margin: 0 auto;
}

body.features-page .feature-content,
body.features-page .policy-container,
body.features-page .contact-container {
    max-width: var(--site-maxw); margin: 0 auto;
    padding: 0 24px clamp(72px, 9vw, 120px);
}

/* A contact form does not want the full 1180px measure — the fields stretch so
   wide that the eye loses the line between a label and its box. Narrow it, and
   left-align the labels: the card's centred text was pushing them to the middle
   of a full-width field, which reads as decoration rather than a form. */
body.features-page .contact-container {
    max-width: min(60%, 720px);
    /* site.css's container rule zeroes the top padding, which left the title
       sitting on the very edge of the card. */
    padding-top: clamp(28px, 4vw, 44px);
}
body.features-page .contact-container form,
body.features-page .contact-container label {
    text-align: left;
}

/* Both section titles get one treatment: "Feature Request" was an h2 with
   font-weight:inherit, so it rendered light and thin beside the bold h1. */
body.features-page .contact-container h1,
body.features-page .feature-request-section h2 {
    font-size: clamp(1.5rem, 3vw, 1.9rem);
    font-weight: 700;
    line-height: 1.2;
    color: var(--site-ink);
    text-align: center;
    margin: 0 0 14px;
}

/* The form ran tall enough to scroll for three fields — pull the stack in. */
body.features-page .contact-container p { margin-bottom: 12px; }
body.features-page .contact-container hr { margin: 12px auto !important; }
body.features-page .contact-form-section,
body.features-page .feature-request-section { gap: 12px; }
body.features-page .contact-form-section { margin-bottom: 20px; }
body.features-page .feature-request-section { margin-top: 20px; padding-top: 20px; }
body.features-page .contact-container label { margin-bottom: 4px; }
body.features-page .contact-container textarea { min-height: 84px; }

@media (max-width: 900px) {
    body.features-page .contact-container { max-width: 100%; }
}

/* Prose blocks become light cards so long pages have rhythm instead of one slab. */
body.features-page .feature-description,
body.features-page .install-block,
body.features-page .contact-form-section,
body.features-page .feature-request-section {
    background: var(--site-surface);
    border: 1px solid var(--site-line);
    border-radius: var(--site-radius-lg);
    box-shadow: var(--site-shadow-sm);
    padding: clamp(24px, 3vw, 38px);
    margin-bottom: 26px;
    color: var(--site-ink);
}
body.features-page .feature-description h2,
body.features-page .install-block h3 {
    color: var(--site-ink); font-weight: 800; letter-spacing: -0.01em;
    margin-top: 0; margin-bottom: 14px;
}
body.features-page .feature-description h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
body.features-page .install-block h3 {
    font-size: 1.3rem; display: flex; align-items: center; gap: 12px;
    padding-bottom: 14px; border-bottom: 1px solid var(--site-line);
}
body.features-page .install-block h3 img { height: 30px; width: auto; }

body.features-page .feature-description p,
body.features-page .feature-description li,
body.features-page .install-block p,
body.features-page .install-block li,
body.features-page .policy-container p,
body.features-page .policy-container li {
    color: var(--site-ink-soft) !important;   /* beats the inline color:#ccc these pages carry */
    line-height: 1.7;
}
body.features-page .install-block ol { padding-left: 22px; }
body.features-page .install-block ol li { margin-bottom: 11px; }
body.features-page .file-note { color: var(--site-ink-muted) !important; font-size: 0.95rem; }

/* Inline code was white-on-black. */
body.features-page code {
    background: rgba(0, 166, 204, 0.10) !important;
    color: var(--site-brand) !important;
    border: 1px solid rgba(0, 166, 204, 0.20);
    border-radius: 5px; padding: 2px 7px; font-size: 0.92em;
}

body.features-page .download-grid,
body.features-page .purchase-cards-container {
    display: grid; gap: 24px;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    margin-bottom: 30px;
}
body.features-page .plan-card,
body.features-page .value-proposition-card {
    background: var(--site-surface);
    border: 1px solid var(--site-line);
    border-radius: var(--site-radius-lg);
    box-shadow: var(--site-shadow-sm);
    padding: 28px; color: var(--site-ink);
}
body.features-page .download-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    font-weight: 700; padding: 13px 26px; border-radius: 999px;
    color: #fff !important; text-decoration: none;
    background: linear-gradient(100deg, var(--site-accent) 0%, var(--site-brand) 100%);
    box-shadow: var(--site-glow);
    transition: transform 0.25s var(--site-ease), box-shadow 0.25s var(--site-ease);
}
body.features-page .download-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 32px rgba(0,166,204,0.45); }
body.features-page .download-btn.unavailable {
    background: var(--site-surface-muted); color: var(--site-ink-muted) !important;
    box-shadow: none; pointer-events: none;
}

body.features-page .video-placeholder,
body.features-page .video-container {
    background: var(--site-surface-muted);
    border: 1px dashed var(--site-line-strong);
    border-radius: var(--site-radius-lg);
    color: var(--site-ink-muted);
}

body.features-page .back-link {
    display: inline-flex; align-items: center; gap: 9px;
    font-weight: 700; text-decoration: none;
    color: var(--site-accent-deep) !important;
    background: var(--site-surface);
    border: 1px solid var(--site-line);
    border-radius: 999px; padding: 12px 24px;
    box-shadow: var(--site-shadow-sm);
    transition: gap 0.25s var(--site-ease), box-shadow 0.25s var(--site-ease);
}
body.features-page .back-link:hover { gap: 14px; box-shadow: var(--site-shadow-md); }

body.features-page .last-updated { color: var(--site-ink-muted) !important; font-style: italic; }
body.features-page .brand-name .incontext { color: var(--site-brand); }
body.features-page .brand-name .three-d  { color: var(--site-warm); }

/* Any panel still carrying a hard-coded dark surface from the previous design.
   Narrow on purpose — these are the exact values features-pages.css and the
   page markup use, not a blanket `* { background: white }`. */
body.features-page [style*="background:#181c1c"],
body.features-page [style*="background: #181c1c"],
body.features-page [style*="background:#000"],
body.features-page [style*="background: #000"] {
    background: var(--site-surface) !important;
    color: var(--site-ink) !important;
    border: 1px solid var(--site-line);
}

/* ---------------------------------------------------------------- footer */
/* main.css gives .site-footer `background:#000`, which left a black slab under
   every relit page. Scoped to the marketing body classes so the app's own chrome
   in main.css is untouched. */
body.homepage2 .site-footer,
body.site .site-footer,
body.features-page .site-footer {
    background: var(--site-bg-alt);
    border-top: 1px solid var(--site-line);
    color: var(--site-ink-soft);
}
body.homepage2 .site-footer h4,
body.site .site-footer h4,
body.features-page .site-footer h4 {
    color: var(--site-ink);
    font-weight: 800; letter-spacing: 0.02em;
}
body.homepage2 .site-footer p,
body.site .site-footer p,
body.features-page .site-footer p { color: var(--site-ink-muted); }

body.homepage2 .site-footer a,
body.site .site-footer a,
body.features-page .site-footer a {
    color: var(--site-ink-soft);
    text-decoration: none;
    transition: color 0.2s var(--site-ease);
}
body.homepage2 .site-footer a:hover,
body.site .site-footer a:hover,
body.features-page .site-footer a:hover { color: var(--site-accent-deep); }

/* The logo art is dark-on-transparent, so it needed no inversion on black and
   needs none here either — it just needs to not sit on black. */
body.homepage2 .site-footer .footer-logo,
body.site .site-footer .footer-logo,
body.features-page .site-footer .footer-logo { filter: none; }

body.homepage2 .site-footer .social-links a,
body.site .site-footer .social-links a,
body.features-page .site-footer .social-links a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 50%;
    background: var(--site-surface);
    border: 1px solid var(--site-line);
    color: var(--site-ink-soft);
    box-shadow: var(--site-shadow-sm);
    transition: transform 0.25s var(--site-ease), color 0.25s var(--site-ease),
                box-shadow 0.25s var(--site-ease);
}
body.homepage2 .site-footer .social-links a:hover,
body.site .site-footer .social-links a:hover,
body.features-page .site-footer .social-links a:hover {
    transform: translateY(-3px);
    color: var(--site-accent-deep);
    box-shadow: var(--site-shadow-md);
}

body.homepage2 .site-footer .footer-bottom,
body.site .site-footer .footer-bottom,
body.features-page .site-footer .footer-bottom {
    border-top: 1px solid var(--site-line);
    color: var(--site-ink-muted);
}

/* ---------------------------------------------------------------- responsive */
@media (max-width: 640px) {
    .site-wrap { padding: 0 18px; }
    .site-btn { width: 100%; }
    .site-hero-actions { flex-direction: column; align-items: stretch; }
    .site-step { grid-template-columns: 44px 1fr; column-gap: 18px; }
    .site-step::before { width: 44px; height: 44px; border-radius: 13px; font-size: 1.05rem; }
}