/* ==========================================================
   Marketing nav / hero / section / CTA / footer chrome — ported
   verbatim from app.py's "R17: marketing landing page sections"
   inline <style> block (.ds-mkt-* classes, unchanged). The handful of
   Streamlit-only selectors that have no static-HTML equivalent
   (body:has(.ds-tour-shell) [data-testid="stApp"]/[data-testid=
   "stHeader"] overrides, which exist only to undo Streamlit's own
   chrome and scroll clipping; .st-key-marketing_nav, Streamlit's
   auto-generated container class) are translated to a plain
   `.ds-mkt-nav` selector carrying the same fixed-nav rule, since a
   static page has no Streamlit header/scroll-clipping to fight in the
   first place. ========================================================== */

html { scroll-behavior: smooth; }
.ds-mkt-inner { max-width:1120px; margin:0 auto; padding:0 1.2rem; }

.ds-mkt-nav {
    position:fixed; top:0; left:0; right:0; z-index:9999;
    padding:.85rem 2.4rem; background:rgba(6,10,26,.94);
    backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid rgba(127,146,219,.16);
    display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
}
.ds-mkt-nav-brand { display:flex; align-items:center; gap:.5rem; height:2.5rem; }
.ds-mkt-nav-mark {
    display:grid; place-items:center; width:30px; height:30px; border-radius:9px; flex:0 0 30px;
    background:linear-gradient(145deg,#7c5cff,#2478c8); color:#fff; font-weight:800; font-size:.72rem;
}
.ds-mkt-nav-name { color:#fff; font-weight:750; font-size:.98rem; letter-spacing:-.01em; }
.ds-mkt-nav-links { display:flex; align-items:center; justify-content:center; gap:1.7rem; height:2.5rem; }
.ds-mkt-nav-links a { color:rgba(210,220,244,.74); font-size:.86rem; font-weight:600; text-decoration:none; transition:color .15s ease; }
.ds-mkt-nav-links a:hover { color:#8feaff; }
.ds-mkt-nav-actions { display:flex; align-items:center; gap:.6rem; }
.ds-mkt-nav-actions .btn { min-height:2.5rem; font-size:.84rem; }
@media (max-width:900px){
    .ds-mkt-nav-links { display:none; }
    .ds-mkt-nav { padding:.7rem 1rem; flex-wrap: wrap; }
    /* Production: Streamlit's own columns stack full-width here, turning
       the nav into 3 tall rows (brand, Log in, Get started). Reproduced
       with flex-wrap + full-width buttons rather than Streamlit's grid,
       since there is no Streamlit column system on a static page - same
       visible result (stacked, full-width nav rows), same underlying
       choice (no hamburger/mobile menu; the nav links are simply hidden
       below 900px, exactly as in production). */
    .ds-mkt-nav-brand { flex: 1 1 100%; }
    .ds-mkt-nav-actions { flex: 1 1 100%; }
    .ds-mkt-nav-actions .btn { flex: 1 1 0; }
    body { padding-top: 7.5rem; }
    /* body already supplies the stacked mobile nav's clearance above;
       without this override the hero's own desktop nav-clearance
       padding (4.75rem) stacked on top of it, leaving a large unwanted
       gap before the hero badge on small screens. */
    .ds-mkt-hero-intro { padding-top: 1rem; }
}

/* Hero as a dedicated first screen on desktop/larger laptops (>1100px,
   the same threshold the two-column layout itself uses): min-height
   fills the FULL viewport (100svh - svh rather than vh so mobile
   browser chrome doesn't cause a layout jump), with box-sizing:border-
   box so the nav-clearance padding-top is counted inside that 100svh
   rather than added on top of it - the box's own bottom edge then
   lands exactly on the viewport's bottom edge, so the next section
   starts right where the first screen ends instead of peeking in (an
   earlier version of this rule subtracted var(--nav-h) from
   min-height AND added it back as padding-top, double-counting it -
   the box ended up var(--nav-h) short of the viewport, leaving that
   much of "How it works" visible underneath; this fixes that).
   align-items:center then vertically centers the whole row (copy +
   tour) inside the space left after both paddings, so the gap above
   the tour group and the gap below it come from the same centering
   math and read as optically balanced without any fixed or negative
   margin. Below 1100px this intentionally relaxes to natural flow (see
   the media query below) - the brief scopes "dedicated first screen"
   to desktop/laptop only; tablet/mobile stack and scroll. */
.ds-mkt-hero-intro { padding:0 2.4rem; }
@media (min-width:1101px){
    .ds-mkt-hero-intro {
        min-height: 100svh;
        padding-top: var(--nav-h);
        padding-bottom: 1.5rem;
        display:flex;
        align-items:center;
        box-sizing:border-box;
    }
    .ds-hero-row { width:100%; }
}

/* Two-column hero row: copy on the left (~38-40%, left-aligned), Quick
   Tour on the right (~60-62%, the dominant visual). The copy column's
   width is a clamp rather than a fixed percentage so it naturally
   settles toward the requested ~35%/65% split on very wide displays
   (it stops growing past 480px, so extra viewport width goes to the
   tour column instead) while never dropping below a readable 320px on
   narrower desktop/laptop widths. */
.ds-hero-row {
    display:flex; align-items:center; gap:clamp(1.5rem, 3vw, 3rem);
    max-width:1500px; margin:0 auto;
}
.ds-hero-copy {
    flex:1 1 clamp(320px, 38%, 480px);
    max-width:480px;
    text-align:left;
    display:flex; flex-direction:column; align-items:flex-start;
}
.ds-mkt-hero-badge {
    display:inline-flex; align-items:center; gap:.4rem; padding:.26rem .65rem; border-radius:999px;
    background:rgba(124,92,255,.14); border:1px solid rgba(124,92,255,.28); color:#c9c1ff;
    font-size:.68rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
}
h1.ds-mkt-hero-title {
    margin:.5rem 0 0 !important; color:#fff;
    font-family: var(--ds-heading-font) !important;
    font-size: clamp(1.9rem, 3.1vw, 2.6rem) !important;
    font-weight: 730 !important;
    letter-spacing: -.035em !important;
    line-height: 1.1 !important;
    max-width:700px;
}
.ds-mkt-hero-title span { background:linear-gradient(90deg,#8feaff,#a78bfa); -webkit-background-clip:text; background-clip:text; color:transparent; }
.ds-mkt-hero-sub { margin:.4rem 0 0; color:rgba(216,225,245,.72); font-size:.96rem; line-height:1.55; max-width:660px; }
/* Contrast raised from the previous rgba(200,210,236,.6) - still
   clearly secondary to the white H1, but easier to read at a glance;
   line-height opened up slightly (1.5 -> 1.6) for a less cramped
   paragraph. */
.ds-mkt-hero-desc { margin:.65rem 0 0; color:rgba(212,221,243,.78); font-size:.95rem; line-height:1.6; max-width:430px; }
/* DELIBERATE DEVIATION FROM PRODUCTION: app.py's own .ds-hero-tour-wrap
   is max-width:980px, centered, because the tour sits full-width below
   a single centered copy column there. In this round's two-column hero
   it's the right column instead, so it fills whatever width the
   .ds-hero-row flexbox gives it (flex:1 1 0%, i.e. "the space left
   over after the copy column") rather than capping at 980px - this is
   what makes the tour "the dominant visual" the brief asked for. */
.ds-hero-tour-wrap { flex:1 1 0%; min-width:0; max-width:none; margin:0; }

/* CTA row: centred within the copy column (width:100% so the centring
   has the full column to work with, not just the buttons' own combined
   width), both buttons at one shared height/label size regardless of
   which variant, "Get started free" kept visually dominant via the
   existing .btn-primary gradient/shadow plus a touch more width. */
.ds-mkt-hero-ctas { width:100%; display:flex; gap:1rem; justify-content:center; margin-top:1.5rem; flex-wrap:wrap; }
.ds-mkt-hero-ctas .btn {
    min-height:56px; padding:0 1.7rem; font-size:1rem; border-radius:12px;
}
.ds-mkt-hero-ctas .btn-primary { min-width:220px; }
.ds-mkt-hero-ctas .btn:not(.btn-primary) { min-width:140px; }
.ds-mkt-hero-ctas .btn:focus-visible { outline:2px solid var(--cyan); outline-offset:3px; }

/* Tablet/mobile: stack copy above tour (DOM order already puts copy
   first) instead of side-by-side - two columns stop being readable
   once the copy column has to shrink much past its 320px floor. 1100px
   matches the breakpoint css/tour.css already uses for the tour's own
   internal sizing, so both change together. The "dedicated first
   screen" behaviour above is scoped to min-width:1101px specifically
   so it never applies here - this is the natural, scrolling stacked
   layout the brief allows for tablet/mobile. */
@media (max-width:1100px){
    .ds-mkt-hero-intro { padding-top:calc(var(--nav-h) + .5rem); padding-bottom:.6rem; }
    .ds-hero-row { flex-direction:column; align-items:stretch; gap:1.6rem; }
    .ds-hero-copy { max-width:none; flex-basis:auto; align-items:flex-start; }
    .ds-hero-tour-wrap { width:100%; }
    .ds-mkt-hero-ctas { justify-content:flex-start; }
}
@media (max-width:900px){
    .ds-mkt-hero-intro { padding-left:1rem; padding-right:1rem; padding-top:1rem; }
    .ds-mkt-hero-ctas .btn-primary { min-width:0; flex:1 1 200px; }
    .ds-mkt-hero-ctas .btn:not(.btn-primary) { min-width:0; flex:1 1 120px; }
}

.ds-mkt-section { padding:3.2rem 0; border-top:1px solid rgba(130,145,220,.10); }
.ds-mkt-section:first-of-type { border-top:none; }

/* "How it works" now uses the same generic section/.container/.kicker/h2
   hierarchy as Capabilities (see index.html) - its only difference is a
   trimmed bottom padding, so the pinned scroll-story canvas that follows
   starts closer to the heading instead of the generic section's full
   3.4rem gap. */
#ds-story { padding-bottom: 1rem; }
.ds-mkt-kicker {
    font-family: var(--ds-heading-font) !important;
    color:#8bdcff; font-size:.72rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
}
h2.ds-mkt-heading {
    margin:.5rem 0 0 !important; color:#fff;
    font-family: var(--ds-heading-font) !important;
    font-size: clamp(1.7rem, 2.6vw, 2.2rem) !important;
    font-weight: 700 !important;
    letter-spacing: -.03em !important;
    line-height: 1.15 !important;
}
.ds-mkt-lede { margin:.6rem 0 0; color:rgba(214,224,244,.68); font-size:1.02rem; line-height:1.65; max-width:640px; }

.ds-mkt-cta {
    border-radius:26px; padding:3rem 2rem; text-align:center;
    background:linear-gradient(135deg,rgba(76,58,199,.35),rgba(20,120,190,.28));
    border:1px solid rgba(146,138,255,.25);
}
.ds-mkt-cta h3 { margin:0; color:#fff; font-size:clamp(1.4rem,2.6vw,1.9rem); font-weight:760; letter-spacing:-.02em; }
.ds-mkt-cta p { margin:.6rem auto 0; max-width:520px; color:rgba(224,232,248,.78); font-size:.95rem; }
.ds-mkt-cta-section { max-width:1120px; margin:0 auto; padding:3.2rem 1.2rem; border-top:1px solid rgba(130,145,220,.10); }
.ds-mkt-cta-section .btn { margin-top:1.3rem; min-height:3rem; padding:0 1.8rem; }

.ds-mkt-footer { margin-top:1rem; padding:1.6rem 0 .4rem; border-top:1px solid rgba(130,145,220,.1); display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.6rem; }
.ds-mkt-footer-brand { display:flex; align-items:center; gap:.5rem; color:rgba(216,225,245,.7); font-size:.82rem; }
.ds-mkt-footer-links a { color:rgba(196,206,232,.6); font-size:.82rem; text-decoration:none; margin-left:1.1rem; }
.ds-mkt-footer-links a:hover { color:#fff; }

/* ---------- Buttons: production's .stButton>button / button[kind="primary"]
   base + :hover rules (styles.css), reproduced as plain classes since a
   static page has no Streamlit button widget to style. ---------- */
.btn {
    display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
    min-height:40px; padding:0 1.1rem; border-radius:11px;
    color:#e7ebfa; background:rgba(18,27,57,.72); border:1px solid rgba(132,111,221,.32);
    font-size:.84rem; font-weight:600; text-decoration:none; cursor:pointer;
    transition:.2s ease;
}
.btn:hover { color:#fff; background:rgba(124,92,255,.16); border-color:rgba(150,126,255,.66); transform:translateY(-1px); }
.btn-primary {
    color:#fff !important; background:linear-gradient(110deg,#7c5cff,#5b3fde) !important;
    border-color:#8f74ff !important; box-shadow:0 9px 25px rgba(91,63,222,.25) !important;
}
.btn-primary:hover { box-shadow:0 12px 30px rgba(91,63,222,.32) !important; }