/* ============================================================
   CONCEPT OVERLAY — flatter surfaces, hairline borders,
   monospace section labels, browser-chrome product frames.

   Loaded AFTER style.css, so it only layers on top. Nothing in
   the real stylesheet is edited. Remove the one <link> tag that
   pulls this file in and the page is exactly as it was.

   Works in light and dark, still following the device setting.
   ============================================================ */

:root {
    --c-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, "Cascadia Mono", Consolas, monospace;

    --c-line: rgba(11, 18, 32, .13);
    --c-line-strong: rgba(11, 18, 32, .22);
    --c-surface: rgba(255, 255, 255, .72);
    --c-surface-2: rgba(11, 18, 32, .028);
    --c-chrome: rgba(11, 18, 32, .035);

    --c-ring: 0 0 0 1px var(--c-line);
    --c-ring-strong: 0 0 0 1px var(--c-line-strong);
    /* one restrained lift, only where an element genuinely floats */
    --c-lift: 0 0 0 1px var(--c-line), 0 20px 44px -30px rgba(11, 18, 32, .5);

    --c-radius: 12px;
    --c-radius-sm: 10px;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --c-line: rgba(238, 241, 243, .12);
        --c-line-strong: rgba(238, 241, 243, .22);
        --c-surface: rgba(255, 255, 255, .04);
        --c-surface-2: rgba(255, 255, 255, .03);
        --c-chrome: rgba(255, 255, 255, .04);
        --c-lift: 0 0 0 1px var(--c-line), 0 24px 48px -28px rgba(0, 0, 0, .7);
    }
}

html[data-theme="dark"] {
    --c-line: rgba(238, 241, 243, .12);
    --c-line-strong: rgba(238, 241, 243, .22);
    --c-surface: rgba(255, 255, 255, .04);
    --c-surface-2: rgba(255, 255, 255, .03);
    --c-chrome: rgba(255, 255, 255, .04);
    --c-lift: 0 0 0 1px var(--c-line), 0 24px 48px -28px rgba(0, 0, 0, .7);
}

/* ------------------------------------------------------------
   1. FLATTER SURFACES
   Blurred drop-shadows out, a single crisp hairline in. Radii
   pulled back to 12px so corners read as precise, not soft.
   ------------------------------------------------------------ */

.card,
.bubble,
.productBox,
.striking-card,
.product-card,
.outcome-card,
.curve-box,
.mock-checklist,
.panel,
.softCard {
    box-shadow: var(--c-ring) !important;
    border-color: transparent !important;
    border-radius: var(--c-radius) !important;
    background: var(--c-surface) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transition: box-shadow .18s cubic-bezier(.22, 1, .36, 1),
                transform .18s cubic-bezier(.22, 1, .36, 1) !important;
}

/* Selected states must keep their fill — the flattening rule above would
   otherwise wash an active tab to white and take its white label with it. */
.productBox.active {
    background: var(--ctaBlue) !important;
    color: #fff !important;
    box-shadow: none !important;
}

.productBox:hover,
.striking-card:hover,
.product-card:hover,
.outcome-card:hover,
.curve-box:hover {
    box-shadow: var(--c-ring-strong) !important;
    transform: none !important;
}

/* This card is intentionally a dark navy panel in BOTH themes, and its
   heading is white gradient text. Flatten its shadow and corners only —
   repainting its background would erase the heading. */
.ns-narrative-card {
    box-shadow: var(--c-ring) !important;
    border-color: transparent !important;
    border-radius: var(--c-radius) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Elements that genuinely sit above the page keep one soft lift. */
.productsDropdown,
.mobileMenu,
.dashboard {
    box-shadow: var(--c-lift) !important;
    border-color: transparent !important;
}

.headerBand {
    box-shadow: 0 1px 0 0 var(--c-line) !important;
    border-radius: 0 !important;
}

.btn,
.btn.primary,
.btn.ghost {
    box-shadow: none !important;
    border-radius: var(--c-radius-sm) !important;
}

.btn.primary:hover {
    box-shadow: var(--c-ring-strong) !important;
}

.logo {
    box-shadow: none !important;
    border-radius: var(--c-radius-sm) !important;
}

/* ------------------------------------------------------------
   2. MONOSPACE SECTION LABELS
   The rounded teal chip becomes a small letterspaced mono line.
   Reads as editorial signposting rather than a badge.
   ------------------------------------------------------------ */

.pill-badge {
    display: inline-block !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    border-radius: 0 !important;
    font-family: var(--c-mono) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: .16em !important;
    text-transform: uppercase !important;
    color: var(--cta) !important;
    position: relative;
    padding-left: 26px !important;
}

/* a short rule instead of a pill outline */
.pill-badge::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 18px;
    height: 1px;
    background: currentColor;
    opacity: .55;
}

.pill-badge.purple {
    color: #8b5cf6 !important;
}

/* ------------------------------------------------------------
   3. BROWSER-CHROME PRODUCT FRAMES
   The dashboard already had three dots. This turns the strip
   into a real window chrome: dots left, a mono address bar in
   the middle, a live indicator on the right.
   ------------------------------------------------------------ */

.dashboard {
    border-radius: var(--c-radius) !important;
    overflow: hidden;
}

.dash-top {
    background: var(--c-chrome) !important;
    border-bottom: 1px solid var(--c-line) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    display: grid !important;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 10px 14px !important;
}

/* traffic lights move to the left, sized like real ones */
.dash-top .dots {
    order: -1;
    display: flex;
    gap: 6px;
}

.dash-top .dot {
    width: 9px !important;
    height: 9px !important;
    background: var(--c-line-strong) !important;
}

/* the window title becomes a centred address bar */
.dash-top .title {
    justify-self: center;
    font-family: var(--c-mono) !important;
    font-size: 11.5px !important;
    font-weight: 400 !important;
    letter-spacing: .01em;
    color: var(--muted) !important;
    background: var(--c-surface-2);
    box-shadow: var(--c-ring);
    border-radius: 7px;
    padding: 5px 14px !important;
    max-width: 320px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* the little square app glyph is redundant inside an address bar */
.dash-top .title .mini {
    width: 13px !important;
    height: 13px !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    opacity: .8;
}

/* live indicator on the right of the chrome — one pseudo-element only, so
   it stays on the chrome's single grid row. The dot is painted as a
   background rather than a second pseudo, which would wrap to a new row. */
.dash-top::after {
    content: 'Live';
    justify-self: end;
    font-family: var(--c-mono);
    font-size: 10.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
    opacity: .85;
    white-space: nowrap;
    padding-left: 15px;
    background-image: radial-gradient(circle at 4px 50%, var(--cta) 0 3px, transparent 3.5px);
    background-repeat: no-repeat;
}

.dash-body {
    background: transparent !important;
}

/* panels inside the frame sit flat against it */
.dash-body .panel {
    background: var(--c-surface-2) !important;
    box-shadow: var(--c-ring) !important;
}

@media (max-width: 640px) {
    .dash-top .title { max-width: 150px; }
    .dash-top::after { content: ''; padding-left: 9px; }
}


/* ------------------------------------------------------------
   4. "WHAT WE'RE BUILDING" ROADMAP SECTION  (homepage)
   Content styles for the roadmap block on index.html. Uses the
   same hairline surfaces as section 1, and the existing theme
   tokens, so light and dark are handled with no extra rules.
   ------------------------------------------------------------ */

.roadmap-intro {
    color: var(--muted);
    max-width: 720px;
    margin: 16px auto 0;
    font-size: 18px;
    line-height: 1.6;
}

.roadmap-groups {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 40px;
    max-width: 1100px;
    margin: 0 auto;
    text-align: left;
}

.roadmap-group-title {
    font-family: var(--c-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--c-line);
}

.roadmap-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.roadmap-item {
    display: block;
    padding: 16px 18px;
    border-radius: var(--c-radius);
    background: var(--c-surface-2);
    box-shadow: var(--c-ring);
}

.roadmap-name {
    display: block;
    font-weight: 700;
    font-size: 15px;
    color: var(--text);
    margin-bottom: 5px;
}

.roadmap-desc {
    display: block;
    font-size: 14px;
    line-height: 1.6;
    color: var(--muted);
}

.roadmap-note {
    max-width: 720px;
    margin: 40px auto 0;
    font-size: 14px;
    line-height: 1.65;
    color: var(--muted);
    padding: 16px 18px;
    border-left: 2px solid var(--c-line-strong);
    text-align: left;
}

.roadmap-cta {
    display: flex;
    gap: 26px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 30px;
    font-size: 15px;
    font-weight: 600;
}

.roadmap-cta a {
    color: var(--cta);
    text-decoration: none;
}

.roadmap-cta a:hover {
    text-decoration: underline;
}

@media (max-width: 640px) {
    .roadmap-groups { gap: 30px; }
    .roadmap-cta { gap: 14px; flex-direction: column; align-items: center; }
}


/* ------------------------------------------------------------
   5. MOBILE OVERFLOW GUARDS
   Grid and flex children default to min-width:auto, so they refuse to shrink
   below their content's intrinsic width and push the whole page sideways.
   These rules only bite on narrow screens; nothing changes on desktop.
   ------------------------------------------------------------ */

@media (max-width: 640px) {
    /* Any direct child of a grid or flex container may shrink. */
    .products-grid > *,
    .features-row > *,
    .stats-grid > *,
    .roadmap-list > *,
    [style*="grid-template-columns"] > * {
        min-width: 0;
    }

    /* The two collection cards carry 40px of side padding, which alone is a
       quarter of a 320px screen. */
    .product-card {
        padding: 32px 20px !important;
    }

    /* Last resort for a single word longer than the screen. Only engages when
       there is no other break opportunity. */
    h1, h2, h3 {
        overflow-wrap: break-word;
    }
}


/* ------------------------------------------------------------
   6. MOBILE VERTICAL RHYTHM
   Section wrappers carry desktop vertical padding (80-100px top AND bottom)
   inline, which on a 390px screen turns each section into most of a blank
   screen. Measured before this rule: 1,928px of vertical padding on the home
   page alone. Horizontal padding is deliberately untouched - that value is the
   page gutter.
   ------------------------------------------------------------ */

@media (max-width: 640px) {
    .platform-section,
    .problem-band,
    .products-section,
    .roadmap-section,
    .enterprise-cta-wrapper,
    .container.platform-hero,
    [style*="padding: 100px"],
    [style*="padding: 80px"],
    [style*="padding-top: 100px"],
    [style*="padding-top: 80px"],
    [style*="padding-top: 76px"],
    [style*="padding-bottom: 100px"],
    [style*="padding-bottom: 80px"] {
        padding-top: 44px !important;
        padding-bottom: 44px !important;
    }

    /* The closing call to action is the worst of them: 100px top and bottom
       around three short lines. */
    .container.relative {
        padding-top: 40px !important;
        padding-bottom: 48px !important;
    }

    /* The band between the hero and the product grid also carries a large
       bottom margin on top of its padding. */
    .problem-band {
        margin-bottom: 40px !important;
    }
}


/* ------------------------------------------------------------
   7. MOBILE REVEAL TIMING AND PRODUCT ROW RHYTHM
   ------------------------------------------------------------ */

@media (max-width: 640px) {
    /* 2.5s is longer than a section stays on screen while a thumb is moving.
       The visitor sees a half-faded, 20px-displaced heading and reads it as
       clipped or missing. Same effect, fast enough to have finished by the
       time it is looked at. */
    html.anim-ready .reveal-on-scroll,
    html.anim-ready .stagger-item,
    html.anim-ready .pop-in {
        transition-duration: .45s !important;
        transition-delay: 0s !important;
    }

    html.anim-ready .reveal-on-scroll {
        transform: translateY(10px);
    }

    /* Product rows: badge tucked under the name rather than a full line away. */
    .product-feature-list li {
        margin-bottom: 10px;
        line-height: 1.4;
    }

    .product-feature-list .availBadge {
        margin-top: 2px;
    }
}

/* Someone who has asked their system for reduced motion should not be shown a
   fade-and-slide at all. This also removes any chance of content sitting
   mid-animation when they look at it. */
@media (prefers-reduced-motion: reduce) {
    html.anim-ready .reveal-on-scroll,
    html.anim-ready .stagger-item,
    html.anim-ready .pop-in {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* ------------------------------------------------------------
   8. DECORATIVE GLOW MUST NOT WIDEN THE PAGE
   .cta-bg-glow is a fixed 1000px circle centred behind the closing call to
   action. On any viewport narrower than 1000px it hangs past the right edge and
   creates horizontal scroll - measured at 768px, where it reached 884px on a
   768px viewport. It is decorative and pointer-events:none, so capping it to
   the width available costs nothing visually.
   ------------------------------------------------------------ */

.cta-bg-glow {
    width: min(1000px, 100%);
    max-height: 100%;
}