/* ==========================================================================
   sales-base.css — Sales Page Chrome Only
   Loaded by all sales pages (Website, Social, Branding) alongside marketing.css.
   Contains ONLY the sticky header and footer that replace platform chrome.
   All layout components, buttons, cards, grids live in marketing.css.
   ========================================================================== */

/* ── SALES HEADER ── */
.sales-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255,255,255,0.96);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--light-border);
    box-shadow: 0 1px 8px 0 rgba(0,0,0,0.06);
}

.sales-header-inner {
    max-width: var(--platform-content-width);
    margin: 0 auto;
    padding: 0 1.5rem;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

.sales-logo { height: 36px; }

.sales-nav {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.sales-nav a {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.15;
    color: var(--blue-600);
    font-weight: 500;
    text-decoration: none;
    padding: 0.45rem 0.9rem;
    border-radius: 8px;
    transition: color 0.2s;
}

.sales-nav a:hover {
    color: var(--primary-blue);
    text-decoration: none;
}

.sales-nav-step {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--light-text);
    font-weight: 600;
    margin-bottom: 2px;
}

.sales-nav-label {
    font-size: 0.95rem;
    font-weight: 600;
}

.sales-nav a:hover .sales-nav-step {
    color: var(--primary-blue);
}

/* Anchor-qualified so it matches the specificity of the upstream `.sales-nav a`
   rule (which sets --blue-600 and would otherwise out-specify .sales-nav-cta).
   Same-element compound (no descendant context) — passes CSS Hard Rule 9.
   AA contrast: 9:1 dark ink on vibrant green at rest, still AA on hover. */
a.sales-nav-cta {
    align-items: center;
    background: var(--primary-green);
    color: var(--black);
    font-weight: 500;
    padding: 0.55rem 1.15rem;
    border-radius: 32px;
}

a.sales-nav-cta:hover {
    background: color-mix(in srgb, var(--primary-green) 85%, black);
    color: var(--black);
}

/* ── SALES FOOTER ── */
.sales-footer {
    background: var(--primary-blue);
    padding: 2.5rem 1.5rem;
}

.sales-footer-inner {
    max-width: var(--platform-content-width);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.sales-footer-logo { height: 28px; filter: brightness(10); opacity: 0.85; }

.sales-footer-copy {
    font-size: 0.83rem;
    color: rgba(255,255,255,0.55);
}

.sales-footer-links {
    display: flex;
    gap: 1.25rem;
}

.sales-footer-links a {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.5);
    text-decoration: none;
}

.sales-footer-links a:hover { color: var(--white); }

/* ── HERO EYEBROW (shared partial) ──
   Prominence comes from WEIGHT + CONTRAST + TREATMENT, never larger text
   (decision B, 2026-06). Rendered as a frosted dark-glass category label that
   BELONGS to the dark hero rather than a white sticker pasted on top: a faint
   white-glass fill + backdrop blur sit it into the image, a luminous hairline
   border defines the edge, and font-weight 700 (the platform eyebrow-label
   convention) carries the presence. The text reuses the hero's own highlight
   token var(--green-300) — identical to `.sales-hero h1 em` — so the eyebrow
   and the headline accent read as one green thread on the dark hero. */
.sales-hero-eyebrow {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--green-300);
    background: color-mix(in srgb, var(--white) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--white) 30%, transparent);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    padding: 0.35rem 0.95rem;
    border-radius: 999px;
    margin-bottom: 1rem;
    box-shadow: 0 1px 4px rgba(0,0,0,0.28);
}

/* ── PACKAGE GRID (shared partial — DB-driven from SubscriptionPackages) ── */
.sales-package-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
    margin-top: 2.5rem;
    text-align: left;
}

.sales-package-card {
    background: var(--white);
    border: 1px solid var(--light-border);
    border-radius: 14px;
    padding: 1.75rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    box-shadow: 0 2px 14px rgba(0,0,0,0.04);
    transition: transform 0.18s, box-shadow 0.18s;
    position: relative;
}

.sales-package-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(0,0,0,0.08);
}

.sales-package-card--featured {
    border-color: var(--primary-green);
    box-shadow: 0 4px 22px color-mix(in srgb, var(--primary-green) 18%, transparent);
}

.sales-package-featured-tag {
    position: absolute;
    top: -10px;
    left: 1.5rem;
    background: var(--primary-green);
    color: var(--white);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
}

.sales-package-name {
    margin: 0;
    font-size: 1.2rem;
    color: var(--primary-blue);
}

.sales-package-tagline {
    margin: 0;
    color: var(--gray-550);
    font-size: 0.95rem;
    line-height: 1.45;
}

.sales-package-price {
    margin: 0.25rem 0 0 0;
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--primary-blue);
}

.sales-package-price-descriptor {
    margin: 0;
    color: var(--gray-550);
    font-size: 0.85rem;
}

.sales-package-features {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
}

.sales-package-features li {
    color: var(--gray-700);
    font-size: 0.92rem;
    line-height: 1.45;
    padding-left: 1.4rem;
    position: relative;
}

.sales-package-features li::before {
    content: "✓";
    color: var(--primary-green);
    font-weight: 700;
    position: absolute;
    left: 0;
    top: 0;
}

.sales-package-features li.is-highlighted {
    font-weight: 600;
    color: var(--primary-blue);
}

.sales-package-card .cta-button {
    align-self: stretch;
    text-align: center;
    margin-top: 0.5rem;
}

.sales-package-empty {
    margin: 1.5rem auto 0 auto;
    max-width: 520px;
    padding: 1.5rem;
    background: rgba(255,255,255,0.6);
    border: 1px dashed var(--light-border);
    border-radius: 12px;
    color: var(--gray-550);
    text-align: center;
    font-size: 0.95rem;
}

/* ── DEPLOYMENT SURFACES GRID (page-local cards) ── */
.sales-deploy-grid,
.sales-audience-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-top: 2.5rem;
    text-align: left;
}

.sales-deploy-card,
.sales-audience-card {
    background: var(--white);
    border: 1px solid var(--light-border);
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.sales-deploy-card h3,
.sales-audience-card h3 {
    margin: 0;
    font-size: 1.1rem;
    color: var(--primary-blue);
}

.sales-deploy-card p,
.sales-audience-card p {
    margin: 0;
    color: var(--gray-600);
    font-size: 0.95rem;
    line-height: 1.5;
}

.sales-deploy-card a,
.sales-audience-card a {
    color: var(--primary-green);
    font-weight: 500;
    text-decoration: none;
}

.sales-deploy-card a:hover,
.sales-audience-card a:hover { text-decoration: underline; }

/* ── VALUE LADDER (shared partial — Predicted / Observed / Confirmed) ── */
.sales-value-ladder-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 2.5rem;
    text-align: left;
}

.sales-value-ladder-card {
    background: var(--white);
    border: 1px solid var(--light-border);
    border-radius: 14px;
    padding: 1.75rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    box-shadow: 0 2px 14px rgba(0,0,0,0.04);
}

.sales-value-ladder-label {
    align-self: flex-start;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--white);
    background: var(--primary-blue);
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
}

.sales-value-ladder-card p {
    margin: 0;
    color: var(--gray-700);
    font-size: 0.97rem;
    line-height: 1.55;
}

/* ── REFINEMENT PIPELINE (shared partial) ── */
.sales-refinement-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    margin-top: 2.5rem;
    text-align: left;
}

.sales-refinement-stage {
    background: var(--white);
    border: 1px solid var(--light-border);
    border-radius: 12px;
    padding: 1.25rem;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    flex: 1 1 170px;
    max-width: 220px;
    box-sizing: border-box;
}

.sales-refinement-stage--moat {
    border-color: var(--primary-green);
    box-shadow: 0 4px 18px color-mix(in srgb, var(--primary-green) 18%, transparent);
}

.sales-refinement-num {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--primary-green);
}

.sales-refinement-stage h3 {
    margin: 0;
    font-size: 1.1rem;
    color: var(--primary-blue);
}

.sales-refinement-stage p {
    margin: 0;
    color: var(--gray-600);
    font-size: 0.92rem;
    line-height: 1.5;
}

.sales-refinement-moat-tag {
    align-self: flex-start;
    margin-top: 0.35rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--white);
    background: var(--primary-green);
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
}

/* ── DEMO SHOWCASE (Family B only — Brief §11: limited to the 3 polished demos) ── */
.sales-demo-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 2.5rem;
    text-align: left;
}

.sales-demo-card {
    display: flex;
    flex-direction: column;
    background: var(--white);
    border: 1px solid var(--light-border);
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 2px 14px rgba(0,0,0,0.04);
    transition: transform 0.18s, box-shadow 0.18s;
}

.sales-demo-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(0,0,0,0.08);
    text-decoration: none;
    color: inherit;
}

.sales-demo-thumb {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--gray-100);
}

.sales-demo-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sales-demo-body {
    padding: 1.4rem 1.5rem 1.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.sales-demo-label {
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--primary-green);
}

.sales-demo-body h3 {
    margin: 0;
    font-size: 1.1rem;
    color: var(--primary-blue);
}

.sales-demo-body p {
    margin: 0;
    color: var(--gray-600);
    font-size: 0.94rem;
    line-height: 1.5;
}

.sales-demo-cta {
    margin-top: 0.35rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--primary-green);
}

/* ── SHARED CONTACT FORM (Pages/Shared/_SalesContactForm.cshtml) ── */
.sales-contact-form-section {
    padding: 5rem 1.5rem;
    border-top: 1px solid var(--light-border);
    border-bottom: 1px solid var(--light-border);
}

.sales-contact-form-heading {
    margin: 0 0 0.5rem 0;
    text-align: center;
    color: var(--primary-blue);
}

.sales-contact-form-lead {
    margin: 0 auto 2.25rem auto;
    max-width: 640px;
    text-align: center;
    color: var(--gray-600);
    font-size: 1.05rem;
    line-height: 1.55;
}

.sales-contact-form-status {
    max-width: 720px;
    margin: 0 auto 1.5rem auto;
    padding: 0.85rem 1.1rem;
    border-radius: 10px;
    font-size: 0.95rem;
    line-height: 1.45;
}

.sales-contact-form-status--ok {
    background: color-mix(in srgb, var(--primary-green) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--primary-green) 45%, transparent);
    color: var(--green-480);
}

.sales-contact-form-status--error {
    background: color-mix(in srgb, var(--red-600) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--red-600) 35%, transparent);
    color: var(--red-650);
}

.sales-contact-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 720px;
    margin: 0 auto;
    background: var(--white);
    border: 1px solid var(--light-border);
    border-radius: 14px;
    padding: 2.25rem;
    box-shadow: 0 4px 24px 0 color-mix(in srgb, var(--primary-blue) 9%, transparent);
}

.sales-contact-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.sales-contact-form-field {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.sales-contact-form-field label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--blue-600);
    letter-spacing: 0.01em;
}

.sales-contact-form-required {
    color: var(--red-600);
    margin-left: 0.15rem;
}

.sales-contact-form-field input,
.sales-contact-form-field select {
    box-sizing: border-box;
    width: 100%;
    padding: 0.7rem 0.9rem;
    font-size: 0.97rem;
    font-family: inherit;
    color: var(--blue-600);
    background: var(--white);
    border: 1px solid var(--light-border);
    border-radius: 8px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.sales-contact-form-field input:focus,
.sales-contact-form-field select:focus,
.sales-contact-form-field textarea:focus {
    outline: none;
    border-color: var(--primary-green);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-green) 18%, transparent);
}

.sales-contact-form-field textarea {
    box-sizing: border-box;
    width: 100%;
    padding: 0.7rem 0.9rem;
    font-size: 0.97rem;
    font-family: inherit;
    color: var(--blue-600);
    background: var(--white);
    border: 1px solid var(--light-border);
    border-radius: 8px;
    transition: border-color 0.15s, box-shadow 0.15s;
    resize: vertical;
    min-height: 130px;
    line-height: 1.5;
}

.sales-contact-form-field--error input,
.sales-contact-form-field--error select,
.sales-contact-form-field--error textarea {
    border-color: var(--red-600);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--red-600) 14%, transparent);
}

.sales-contact-form-field--error input:focus,
.sales-contact-form-field--error select:focus,
.sales-contact-form-field--error textarea:focus {
    border-color: var(--red-600);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--red-600) 24%, transparent);
}

.sales-contact-form-field-error {
    display: block;
    margin-top: 0.1rem;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--red-600);
    line-height: 1.35;
}

.sales-contact-form-recaptcha {
    margin-top: 0.25rem;
}

.sales-contact-form-actions {
    display: flex;
    justify-content: center;
    margin-top: 0.75rem;
}

.sales-contact-form-actions .cta-button {
    min-width: 220px;
    text-align: center;
}

/* ── NEXT STEP / CHAINING BLOCK ── */
.sales-next-step {
    background: var(--surface-soft, var(--green-99d));
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.sales-next-step-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--green-700); /* AA on light: brand green is ~2.2:1 on white */
    margin-bottom: 0.6rem;
}

.sales-next-step h2 {
    margin: 0 auto 1.25rem;
    max-width: 38rem;
}

.sales-next-step-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.85rem 1.25rem;
    margin-top: 1.25rem;
}

.sales-next-step-cta {
    display: inline-block;
    padding: 0.85rem 1.6rem;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    line-height: 1.2;
    transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}

.sales-next-step-cta--primary {
    background: var(--primary-green); /* vibrant; AA via dark ink, not by dulling the green */
    color: var(--black);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--primary-green) 22%, transparent);
}

.sales-next-step-cta--primary:hover {
    box-shadow: 0 4px 18px color-mix(in srgb, var(--primary-green) 42%, transparent);
}

.sales-next-step-cta--bypass {
    background: transparent;
    color: var(--green-700); /* readable green text on light; border stays brand green */
    border: 1px solid var(--primary-green);
}

.sales-next-step-cta--bypass:hover {
    background: color-mix(in srgb, var(--primary-green) 8%, transparent);
}

.sales-next-step-vertical {
    margin-top: 1.1rem;
    font-size: 0.95rem;
}

.sales-next-step-vertical a {
    color: var(--text-muted, var(--slate-550));
    text-decoration: none;
    border-bottom: 1px dotted currentColor;
}

.sales-next-step-vertical a:hover {
    color: var(--primary-green);
    border-bottom-color: var(--primary-green);
}

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
    .sales-value-ladder-grid { grid-template-columns: 1fr; }
    .sales-demo-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
    .sales-nav a:not(.sales-nav-cta) { display: none; }
    .sales-footer-inner { flex-direction: column; text-align: center; }
    .sales-deploy-grid,
    .sales-audience-grid { grid-template-columns: 1fr; }
    .sales-demo-grid { grid-template-columns: 1fr; }
    .sales-contact-form-row { grid-template-columns: 1fr; }
    .sales-contact-form { padding: 1.5rem; gap: 1.25rem; }
    .sales-contact-form-row { gap: 1.25rem; }
    .sales-next-step-actions { flex-direction: column; align-items: stretch; }
    .sales-next-step-cta { text-align: center; }
}