/* sales.css - the sales letter.
   Loaded AFTER style.css and only used by body.sales, so the booking and admin pages keep
   the old stylesheet untouched. The brand gradient and Inter come from the previous build
   on purpose: the site should look like the same company it was yesterday. */

body.sales {
    margin: 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: #1d2033;
    background: #fff;
    -webkit-font-smoothing: antialiased;
}
body.sales .wrap { width: 100%; max-width: 780px; margin: 0 auto; padding: 0 24px; box-sizing: border-box; }

/* ---- hero ---- */
.hero-sales {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    padding: 88px 0 72px;
    text-align: center;
}
.hero-sales h1 { font-size: clamp(32px, 6vw, 52px); line-height: 1.12; font-weight: 700; margin: 0 0 20px; letter-spacing: -0.02em; }
.hero-sales .hl { display: inline-block; margin-top: 6px; color: #ffe9a8; }
.hero-sales .lede { font-size: clamp(17px, 2.4vw, 20px); line-height: 1.55; margin: 0 auto 32px; max-width: 34em; opacity: .95; font-weight: 300; }
.hero-sales .micro { margin: 18px 0 0; font-size: 14px; opacity: .8; }

/* ---- the only button on the site ---- */
body.sales a.cta-button {
    display: inline-flex; align-items: center; gap: 10px;
    background: #fff; color: #5a3fa0;
    font-size: 17px; font-weight: 600;
    padding: 16px 30px; border-radius: 999px;
    text-decoration: none; border: 0;
    box-shadow: 0 10px 28px rgba(24, 16, 54, .22);
    transition: transform .15s ease, box-shadow .15s ease;
}
body.sales a.cta-button:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(24, 16, 54, .28); }
body.sales a.cta-button .arrow { width: 18px; height: 18px; }
/* On white sections the button needs the gradient instead, or it disappears.
   ⚠️ `body.sales` must be repeated here. Without it (0,2,2) beats (0,2,1) and the button
   stayed white-on-white with only a shadow to find it by - caught in the first screenshot. */
body.sales .band a.cta-button {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
}
body.sales .closer a.cta-button { background: #fff; color: #5a3fa0; }

/* ---- bands ---- */
.band { padding: 64px 0; }
.band.alt { background: #f6f7fb; }
.band h2, .closer h2 { font-size: clamp(24px, 3.6vw, 32px); font-weight: 700; margin: 0 0 24px; letter-spacing: -0.01em; }
.band p, .band li, .band dd { font-size: 17px; line-height: 1.6; }
.band .micro { font-size: 14px; color: #5c6076; margin-top: 18px; }

.ticks { list-style: none; padding: 0; margin: 0; }
.ticks li { position: relative; padding: 10px 0 10px 34px; border-bottom: 1px solid #e7e9f2; }
.ticks li:last-child { border-bottom: 0; }
.ticks li::before {
    content: ""; position: absolute; left: 4px; top: 17px;
    width: 14px; height: 8px; border-left: 2.5px solid #5a3fa0; border-bottom: 2.5px solid #5a3fa0;
    transform: rotate(-45deg);
}

.steps { margin: 0 0 28px; padding-left: 24px; }
.steps li { padding: 9px 0; }

.costs { width: 100%; border-collapse: collapse; }
.costs th, .costs td { text-align: left; padding: 14px 10px; border-bottom: 1px solid #e7e9f2; font-size: 16px; vertical-align: top; }
.costs th { font-weight: 600; width: 38%; }
.costs td:nth-child(2) { font-weight: 700; white-space: nowrap; }
.costs .note { color: #5c6076; font-size: 14px; }

.cases article { padding: 22px 0; border-bottom: 1px solid #e3e6f1; }
.cases article:last-child { border-bottom: 0; }
.cases .sector { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: #7a7f99; margin: 0 0 6px; }
.cases h3 { font-size: 20px; margin: 0 0 12px; font-weight: 600; }
.cases p { margin: 6px 0; }

.recs blockquote { margin: 0 0 24px; padding: 20px 24px; background: #f6f7fb; border-left: 3px solid #764ba2; border-radius: 0 10px 10px 0; }
.recs blockquote p { margin: 0 0 10px; font-style: italic; }
.recs cite { font-style: normal; font-weight: 600; font-size: 15px; color: #4a4f68; }

.faq { margin: 0 0 28px; }
.faq dt { font-weight: 600; margin-top: 20px; font-size: 17px; }
.faq dd { margin: 6px 0 0; color: #41455c; }

/* ---- closer ---- */
.closer { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #fff; padding: 72px 0; text-align: center; }
.closer p { font-size: 18px; line-height: 1.55; margin: 0 auto 28px; max-width: 32em; opacity: .95; font-weight: 300; }

/* ---- footer ---- */
.site-foot { padding: 34px 24px 48px; text-align: center; background: #14162a; color: #9aa0bd; }
.site-foot nav { display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: center; margin-bottom: 14px; }
.site-foot a { color: #cdd2ea; text-decoration: none; font-size: 15px; }
.site-foot a:hover { color: #fff; text-decoration: underline; }
.site-foot .foot-note { margin: 0; font-size: 13px; }

/* ---- deposit page ---- */
.pay { max-width: 520px; margin: 0 auto; padding: 56px 24px 72px; text-align: center; }
.pay h1 { font-size: 28px; margin: 0 0 10px; }
.pay .amount { font-size: 46px; font-weight: 700; margin: 18px 0 6px; letter-spacing: -0.02em; }
.pay .what { color: #5c6076; margin: 0 0 30px; }
.pay .row { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid #e7e9f2; text-align: left; font-size: 16px; }
.pay .pending { background: #fff8e6; border: 1px solid #f0dca8; border-radius: 10px; padding: 18px 20px; text-align: left; font-size: 15px; line-height: 1.55; }

@media (max-width: 560px) {
    .hero-sales { padding: 64px 0 56px; }
    .band { padding: 48px 0; }
    /* ⚠️ A three-column price table does not fit 375px - it squeezed every cell into a
       column of single words. Stack each row into a block instead: label, then the number
       big, then the note underneath. Caught on the mobile screenshot, not in review. */
    .costs, .costs tbody, .costs tr, .costs th, .costs td { display: block; width: auto; }
    .costs tr { padding: 14px 0; border-bottom: 1px solid #e7e9f2; }
    .costs th, .costs td { border: 0; padding: 0; }
    .costs th { font-size: 16px; margin-bottom: 2px; }
    .costs td:nth-child(2) { font-size: 20px; margin-bottom: 4px; }
    .costs .note { font-size: 14px; }
}

/* ---- who you are talking to ---- */
.band.who .wrap { display: flex; gap: 26px; align-items: flex-start; }
.band.who .face { border-radius: 50%; flex: 0 0 120px; object-fit: cover; object-position: 50% 18%; box-shadow: 0 6px 20px rgba(24,16,54,.18); }
.band.who h2 { margin-top: 0; }
.band.who a.linkedin { color: #5a3fa0; font-weight: 600; text-decoration: none; border-bottom: 2px solid #d9d2ef; }
.band.who a.linkedin:hover { border-bottom-color: #5a3fa0; }
@media (max-width: 560px) {
    .band.who .wrap { flex-direction: column; align-items: center; text-align: center; gap: 18px; }
}

.deposit-form { text-align: left; margin: 0 0 28px; }
.deposit-form label { display: block; margin-bottom: 16px; font-size: 15px; font-weight: 600; color: #3a3e55; }
.deposit-form .opt { font-weight: 400; color: #8a8fa8; }
.deposit-form input {
    display: block; width: 100%; box-sizing: border-box; margin-top: 6px;
    padding: 13px 14px; font-size: 16px; font-family: inherit;
    border: 1px solid #d3d7e6; border-radius: 10px; background: #fff; color: #1d2033;
}
.deposit-form input:focus { outline: 0; border-color: #764ba2; box-shadow: 0 0 0 3px rgba(118,75,162,.14); }
.deposit-form button.cta-button {
    width: 100%; justify-content: center; margin-top: 6px; cursor: pointer;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #fff;
}