/* Public marketing page. Scoped under .mkt so nothing here leaks into
   the authenticated app if style.css and marketing.css ever load together. */

.mkt{
    background:var(--ib-paper);
    color:var(--ib-ink);
}

.mkt-container{
    max-width:1080px;
    margin:0 auto;
    padding:0 32px;
}

/* ---------- reveal-on-scroll ---------- */

.mkt-reveal{
    opacity:0;
    transform:translateY(14px);
    transition:opacity .6s ease, transform .6s ease;
}

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

/* ---------- nav ---------- */

.mkt-nav{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:24px 32px;
    max-width:1080px;
    margin:0 auto;
}

.mkt-nav-brand{
    display:flex;
    align-items:center;
    gap:10px;
}

.mkt-nav-brand img{
    width:28px;
    height:28px;
}

/* brand-ziv is white by default (designed for the dark sidebar) --
   both spots it appears on this page sit on the light paper background */
.mkt-nav-brand .brand-ziv,
.mkt-footer-brand .brand-ziv{
    color:var(--ib-ink);
}

.mkt-nav .btn{
    padding:9px 20px;
}

/* ---------- hero ---------- */

.mkt-hero{
    padding:64px 0 96px;
    text-align:center;
}

.mkt-hero h1{
    font-size:64px;
    line-height:1.05;
    letter-spacing:-1.5px;
    font-weight:600;
    margin:0 0 24px;
}

.mkt-hero-sub{
    font-size:19px;
    line-height:1.6;
    color:var(--ib-text-secondary);
    max-width:640px;
    margin:0 auto 36px;
}

.mkt-hero-ctas{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:20px;
    margin-bottom:64px;
}

.mkt-hero-ctas .btn-primary{
    padding:14px 30px;
    font-size:15px;
}

.mkt-hero-ctas a.mkt-secondary-link{
    color:var(--ib-text-secondary);
    font-size:14px;
    text-decoration:underline;
}

/* browser-frame product shot */

.mkt-shot-frame{
    max-width:880px;
    margin:0 auto;
    border-radius:10px;
    overflow:hidden;
    border:1px solid var(--ib-border);
    box-shadow:0 24px 64px -24px rgba(24,26,29,0.28);
    background:var(--ib-surface);
}

.mkt-shot-chrome{
    display:flex;
    align-items:center;
    gap:6px;
    padding:11px 14px;
    background:var(--ib-ink);
}

.mkt-shot-chrome span{
    width:9px;
    height:9px;
    border-radius:50%;
    background:#4A4D52;
}

.mkt-shot-frame img{
    display:block;
    width:100%;
}

/* ---------- section shared ---------- */

.mkt-section{
    padding:80px 0;
}

.mkt-eyebrow{
    font-family:var(--ib-font-mono);
    font-size:11px;
    font-weight:500;
    text-transform:uppercase;
    letter-spacing:1px;
    color:var(--ib-brass);
    margin:0 0 14px;
}

.mkt-section h2{
    font-size:34px;
    letter-spacing:-0.5px;
    margin:0 0 20px;
    max-width:640px;
}

.mkt-section-body{
    font-size:17px;
    line-height:1.7;
    color:var(--ib-text-secondary);
    max-width:640px;
}

.mkt-section-centered{
    text-align:center;
}

.mkt-section-centered h2,
.mkt-section-centered .mkt-section-body{
    margin-left:auto;
    margin-right:auto;
}

/* ---------- recognition checklist ---------- */

.mkt-checklist{
    max-width:720px;
    margin:36px auto 0;
    text-align:left;
    list-style:none;
    padding:0;
}

.mkt-checklist li{
    display:flex;
    gap:14px;
    padding:18px 0;
    border-bottom:1px solid var(--ib-border-muted);
    font-size:16px;
    line-height:1.55;
}

.mkt-checklist li:first-child{
    border-top:1px solid var(--ib-border-muted);
}

.mkt-checklist li::before{
    content:"—";
    color:var(--ib-brass);
    flex-shrink:0;
}

.mkt-checklist-closer{
    margin-top:32px;
    font-size:16px;
    font-weight:500;
}

/* ---------- feature cards ---------- */

.mkt-cards{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:28px;
    margin-top:44px;
}

.mkt-card{
    background:var(--ib-surface);
    border:1px solid var(--ib-border-muted);
    border-radius:8px;
    padding:32px 28px;
}

.mkt-card h3{
    font-size:18px;
    margin:0 0 12px;
}

.mkt-card p{
    font-size:15px;
    line-height:1.65;
    color:var(--ib-text-secondary);
    margin:0;
}

/* ---------- trust note ---------- */

.mkt-trust{
    background:var(--ib-ink);
    color:var(--ib-paper);
}

.mkt-trust p{
    font-size:19px;
    line-height:1.6;
    max-width:600px;
    margin:0 auto;
}

/* ---------- access request form ---------- */

.mkt-access-card{
    background:var(--ib-surface);
    border:1px solid var(--ib-border-muted);
    border-radius:8px;
    padding:44px;
    max-width:520px;
    margin:44px auto 0;
    text-align:left;
}

.mkt-access-card label{
    display:block;
    margin-bottom:6px;
}

.mkt-access-card input{
    width:100%;
    margin-bottom:18px;
}

.mkt-access-card .btn{
    width:100%;
    justify-content:center;
}

.mkt-access-success{
    background:var(--ib-sage-bg);
    color:var(--ib-sage);
    border-radius:8px;
    padding:20px 24px;
    max-width:520px;
    margin:44px auto 0;
    font-size:15px;
}

.mkt-access-mailto{
    margin-top:16px;
    font-size:13px;
    color:var(--ib-text-secondary);
    text-align:center;
}

/* ---------- footer ---------- */

.mkt-footer{
    padding:48px 0;
    border-top:1px solid var(--ib-border-muted);
    text-align:center;
}

.mkt-footer-brand{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    margin-bottom:8px;
}

.mkt-footer-brand img{
    width:20px;
    height:20px;
}

.mkt-footer-tagline{
    font-family:var(--ib-font-mono);
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:0.5px;
    color:var(--ib-brass);
    margin:0 0 20px;
}

.mkt-footer-copyright{
    font-size:13px;
    color:var(--ib-text-secondary);
    margin:0;
}

/* ---------- hero eyebrow line ---------- */

.mkt-hero-eyebrow{
    font-family:var(--ib-font-mono);
    font-size:13px;
    font-weight:500;
    letter-spacing:1.5px;
    text-transform:uppercase;
    color:var(--ib-text-secondary);
    margin:0 0 22px;
}

/* ---------- how it works: numbered steps ---------- */

.mkt-steps{
    margin-top:44px;
    display:flex;
    flex-direction:column;
    gap:0;
}

.mkt-step{
    display:flex;
    gap:24px;
    padding:26px 0;
    border-bottom:1px solid var(--ib-border-muted);
    text-align:left;
}

.mkt-step:first-child{
    border-top:1px solid var(--ib-border-muted);
}

.mkt-step-num{
    font-family:var(--ib-font-mono);
    font-size:13px;
    color:var(--ib-brass);
    flex-shrink:0;
    width:32px;
    padding-top:2px;
}

.mkt-step-body h3{
    font-size:17px;
    margin:0 0 6px;
}

.mkt-step-body p{
    font-size:15px;
    line-height:1.6;
    color:var(--ib-text-secondary);
    margin:0;
}

/* ---------- terminology list ---------- */

.mkt-terms{
    margin-top:32px;
    font-size:16px;
    line-height:2.1;
    color:var(--ib-ink);
}

.mkt-terms span{
    color:var(--ib-border);
    margin:0 10px;
}

/* ---------- security list ---------- */

.mkt-security-list{
    max-width:640px;
    margin:28px auto 0;
    text-align:left;
    list-style:none;
    padding:0;
    font-size:15px;
    line-height:1.7;
    color:var(--ib-text-secondary);
}

.mkt-security-list li{
    padding:8px 0;
}

.mkt-security-list li::before{
    content:"✓ ";
    color:var(--ib-sage);
}

/* ---------- status badge (AI section) ---------- */

.mkt-status-badge{
    display:inline-block;
    font-family:var(--ib-font-mono);
    font-size:11px;
    font-weight:500;
    text-transform:uppercase;
    letter-spacing:0.5px;
    background:var(--ib-amber-bg);
    color:var(--ib-amber);
    padding:4px 10px;
    border-radius:4px;
    margin-bottom:14px;
}

/* ---------- placeholder callout on unfinished screenshot spots ---------- */

.mkt-shot-pending{
    font-family:var(--ib-font-mono);
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:0.5px;
    color:var(--ib-text-secondary);
    text-align:center;
    margin-top:10px;
}

@media (max-width: 860px){
    .mkt-hero h1{ font-size:42px; }
    .mkt-cards{ grid-template-columns:1fr; }
    .mkt-section h2{ font-size:28px; }
    .mkt-step{ gap:16px; }
}