/* Talk-to-Expert Advisory Funnel — Step 4F Meet the Founder + Step 5F augment.
   Loaded by:
     - founder/details.blade.php (Step 4F standalone)
     - founder/schedule.blade.php (Step 5F augment — after screen-schedule.css)

   Also styles the shared founder_profile partial (MTF + MTUS reuse — MTUS
   loads this CSS via screen-moving-details.css @import chain). */


/* ══════════════════════════════════════════════════════════════════════
   v1.2 Hero portrait block v2 (Orhan 2026-09-09) — /get-started/meet-monezzi
   Slide 1 hero pattern physical copy per §16.3 zero-shared-files boundary.
   Own class prefix `.mz-tte-mtf-hero-v2-*`. NO cross-project @import.

   Layout:
     Mobile: portrait 212x265 absolute top-right, content-left with
             right-side padding-reserved via max-width calc.
     Desktop @720px+: portrait 312x390, wider padding reserved.

   Sources: /assets/mz/v2/get-started/img/orhan-dogan-profile-{224x280,454x568}.png
   ══════════════════════════════════════════════════════════════════════ */
.mz-tte-mtf-hero-v2 {
    position: relative;
    margin: -32px -32px 32px;
    padding: 22px 16px 24px;
    background-color: #F4F8FD;
    border-radius: 20px 20px 0 0;
    overflow: hidden;
    min-height: 366px;
}
@media (min-width: 720px) {
    .mz-tte-mtf-hero-v2 {
        margin: -32px -32px 32px; /* full-bleed match card default padding-inline 32px */
        padding: 36px 32px;
        min-height: 410px;
    }
}
.mz-tte-mtf-hero-v2-portrait {
    position: absolute;
    top: 0;
    right: 0;
    width: 212px;
    height: 265px;
    z-index: 1;
    pointer-events: none;
    user-select: none;
    display: block;
}
.mz-tte-mtf-hero-v2-portrait img {
    width: 100%;
    height: 100%;
    display: block;
}
@media (min-width: 720px) {
    .mz-tte-mtf-hero-v2-portrait { width: 312px; height: 390px; }
}
.mz-tte-mtf-hero-v2-inner {
    position: relative;
    z-index: 2;
}
/* Top-of-hero text (eyebrow, h1, lede) stays within left column so portrait
   right-aligned never overlaps. Founder card gets its own wider width. */
.mz-tte-mtf-hero-v2 .mz-tte-page-label,
.mz-tte-mtf-hero-v2 .mz-tte-h1,
.mz-tte-mtf-hero-v2 .mz-tte-lead {
    max-width: calc(100% - 148px);
}
@media (min-width: 720px) {
    .mz-tte-mtf-hero-v2 .mz-tte-page-label,
    .mz-tte-mtf-hero-v2 .mz-tte-h1,
    .mz-tte-mtf-hero-v2 .mz-tte-lead { max-width: calc(100% - 340px); }
}
.mz-tte-mtf-hero-v2 .mz-tte-mtf-founder-hero-card { max-width: 88%; }
@media (min-width: 720px) {
    .mz-tte-mtf-hero-v2 .mz-tte-mtf-founder-hero-card { max-width: 68%; }
}

/* TTE variant (no portrait — Orhan 2026-09-09): hero text + credential card
   take the full inner width since there's no image on the right. */
.mz-tte-tte-hero-v2 .mz-tte-page-label,
.mz-tte-tte-hero-v2 .mz-tte-h1,
.mz-tte-tte-hero-v2 .mz-tte-lead,
.mz-tte-tte-hero-v2 .mz-tte-mtf-founder-hero-card {
    max-width: 100%;
}
.mz-tte-tte-hero-v2 .mz-tte-h1 {
    white-space: normal;
}

/* WhatsApp variant — last check item extra bold ("FREE · No card required"). */
.mz-tte-wa-hero-v2 .mz-tte-mtf-founder-hero-checks li:last-child {
    font-weight: 800;
}

/* WhatsApp variant — no portrait + no credential card head → shrink hero
   height so the card doesn't leave a large empty band under the checks list. */
.mz-tte-wa-hero-v2 {
    min-height: 0;
    padding-bottom: 16px;
}
@media (min-width: 720px) {
    .mz-tte-wa-hero-v2 {
        min-height: 0;
        padding-bottom: 24px;
    }
}
.mz-tte-mtf-hero-v2 .mz-tte-page-label { white-space: nowrap; }
.mz-tte-mtf-hero-v2 .mz-tte-h1 {
    font-size: 22px;
    white-space: nowrap;
    color: #0F172A;
}
.mz-tte-mtf-hero-v2 .mz-tte-lead {
    font-size: 13px;
    line-height: 1.5;
    color: #334155;
    font-weight: 600;
}
@media (min-width: 720px) {
    .mz-tte-mtf-hero-v2 .mz-tte-h1 { font-size: 32px; }
    .mz-tte-mtf-hero-v2 .mz-tte-lead { font-size: 15px; }
}

/* ─── Hero-scale question + answer (below hero, above price card) ───
   H2 sized identical to H1 canonical (28px mobile, 32px desktop). SEO/AEO
   search-intent anchor; wraps freely (no nowrap). Answer paragraph slate-700. */
.mz-tte-mtf-hero-question {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-size: 24px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: #0F172A;
    margin: 18px 0 10px;
}
@media (min-width: 720px) {
    .mz-tte-mtf-hero-question { font-size: 30px; margin: 24px 0 12px; }
}
.mz-tte-mtf-hero-answer {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.55;
    color: #334155;
    margin: 0 0 20px;
    max-width: 640px;
}
@media (min-width: 720px) {
    .mz-tte-mtf-hero-answer { font-size: 16px; margin-bottom: 24px; }
}


/* ─── Founder credential card ─── */
.mz-tte-mtf-founder-hero-card {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 12px;
    margin: 12px 0 0;
}
@media (min-width: 720px) {
    .mz-tte-mtf-founder-hero-card { margin: 22px 0 0; }
}
.mz-tte-mtf-founder-hero-head {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 14px;
}
.mz-tte-mtf-founder-hero-avatar {
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #F0F7FF;
    border: 1px solid #DBEAFE;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #2563EB;
}
.mz-tte-mtf-founder-hero-avatar svg { width: 22px; height: 22px; }
.mz-tte-mtf-founder-hero-txt { min-width: 0; }
.mz-tte-mtf-founder-hero-name {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 15px;
    font-weight: 800;
    color: #0F172A;
    margin: 2px 0 2px;
    line-height: 1.25;
    display: flex;
    align-items: center;
}
.mz-tte-mtf-founder-hero-role {
    font-size: 12.5px;
    color: #334155;
    font-weight: 600;
    margin: 0;
    line-height: 1.35;
}
.mz-tte-mtf-founder-hero-linkedin {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    margin-inline-start: 12px;
    text-decoration: none;
    line-height: 0;
}
.mz-tte-mtf-founder-hero-linkedin img {
    display: block;
    width: 19px;
    height: 19px;
}
.mz-tte-mtf-founder-hero-linkedin:hover { opacity: 0.85; }

.mz-tte-mtf-founder-hero-checks {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.mz-tte-mtf-founder-hero-checks li {
    font-size: 13px;
    color: #0F172A;
    font-weight: 500;
    line-height: 1.45;
    padding-inline-start: 24px;
    position: relative;
}
.mz-tte-mtf-founder-hero-checks li::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #0553F7;
}
.mz-tte-mtf-founder-hero-checks li::after {
    content: '\2713';
    position: absolute;
    inset-inline-start: 3px;
    top: 1px;
    color: #FFFFFF;
    font-size: 10px;
    font-weight: 800;
    line-height: 16px;
    width: 10px;
    text-align: center;
}


/* ────── Founder profile shared block (Doc 515 §16.6 tte_founder_block.xEwmto) ────── */
.mz-tte-founder-block {
    padding: var(--tte-space-4);
    background: rgba(124, 58, 237, 0.06); /* MTF premium purple accent */
    border: 1px solid rgba(124, 58, 237, 0.16);
    border-radius: var(--tte-radius-md);
    margin-block: var(--tte-space-4) var(--tte-space-5);
}

.mz-tte-founder-block--mtus {
    /* MTUS uses teal accent to differentiate from MTF (relocation vs founder). */
    background: rgba(15, 118, 110, 0.06);
    border-color: rgba(15, 118, 110, 0.16);
}

.mz-tte-founder-head {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-block-end: var(--tte-space-2);
}

.mz-tte-founder-name {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-size: var(--tte-fs-3);
    font-weight: 700;
    color: var(--tte-ink);
}

.mz-tte-founder-role {
    font-size: var(--tte-fs-1);
    color: var(--tte-ink);
    font-weight: 600;
    letter-spacing: 0.02em;
}

.mz-tte-founder-role--secondary {
    color: var(--tte-ink);
    font-weight: 600;
    letter-spacing: 0.02em;
}

.mz-tte-founder-credibility {
    margin: 0;
    font-size: var(--tte-fs-1);
    color: var(--tte-ink);
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: 0.01em;
}

/* ────── Step 4F details screen — MTF-specific ────── */
.mz-tte-mtf-details-card {
    padding-block: var(--tte-space-6);
    padding-block-end: 120px; /* new taller sticky bar clearance (Orhan 2026-09-09) */
}

.mz-tte-mtf-details-title {
    margin-block-end: var(--tte-space-3);
}

/* Positioning intro (h2 lead HARD spec verbatim) */
.mz-tte-mtf-positioning-intro {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-size: var(--tte-fs-3);
    font-weight: 600;
    line-height: 1.4;
    color: var(--tte-ink);
    margin: 0 0 var(--tte-space-3) 0;
}

/* Sub-lead (h3) */
.mz-tte-mtf-sub-lead {
    font-size: var(--tte-fs-2);
    color: var(--tte-ink);
    font-weight: 500;
    line-height: 1.5;
    margin: 0 0 var(--tte-space-4) 0;
}

/* Price card (HARD: $995 / 60-minute session premium purple) */
.mz-tte-mtf-price-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--tte-space-1);
    padding: var(--tte-space-4);
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.2);
    border-radius: var(--tte-radius-md);
    margin-block-end: var(--tte-space-4);
}

.mz-tte-mtf-price-amount {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-size: var(--tte-fs-4);
    font-weight: 800;
    color: #0F172A; /* matte navy — strong, high-contrast (Orhan 2026-09-09) */
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.mz-tte-mtf-price-format {
    font-size: var(--tte-fs-1);
    color: #334155;
    font-weight: 600;
    letter-spacing: 0.01em;
}

/* Positioning HARD — prominent card (spec verbatim) */
.mz-tte-mtf-positioning-hard {
    padding: var(--tte-space-3) var(--tte-space-4);
    background: rgba(180, 83, 9, 0.06);
    border-inline-start: 3px solid var(--tte-warn);
    border-radius: 0 var(--tte-radius-sm) var(--tte-radius-sm) 0;
    color: var(--tte-warn);
    font-size: var(--tte-fs-1);
    line-height: 1.5;
    margin-block-end: var(--tte-space-5);
}

.mz-tte-mtf-section-title {
    margin: var(--tte-space-4) 0 var(--tte-space-2) 0;
}

.mz-tte-mtf-section-intro {
    color: var(--tte-ink);
    font-weight: 500;
    line-height: 1.6;
    margin: 0 0 var(--tte-space-3) 0;
    font-size: var(--tte-fs-1);
}

/* ────── Founder + CTO dimension split (2-column card) ────── */
.mz-tte-mtf-dim-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--tte-space-3);
    margin-block-end: var(--tte-space-5);
}

.mz-tte-mtf-dim-card {
    padding: var(--tte-space-4);
    background: rgba(124, 58, 237, 0.04);
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: var(--tte-radius-md);
}

.mz-tte-mtf-dim-card-title {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-size: var(--tte-fs-2);
    font-weight: 700;
    color: #7c3aed;
    margin: 0 0 var(--tte-space-3) 0;
}

.mz-tte-mtf-dim-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
}

.mz-tte-mtf-dim-list li {
    padding-inline-start: var(--tte-space-3);
    position: relative;
    font-size: var(--tte-fs-1);
    color: var(--tte-ink);
    line-height: 1.5;
}

.mz-tte-mtf-dim-list li::before {
    content: '·';
    position: absolute;
    inset-inline-start: 0;
    color: #7c3aed;
    font-weight: 700;
}

/* ────── Who this is for chip list ────── */
.mz-tte-mtf-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tte-space-2);
    margin-block-end: var(--tte-space-4);
}

.mz-tte-mtf-chip {
    padding: 6px var(--tte-space-3);
    background: rgba(37, 99, 235, 0.08);
    color: var(--tte-primary);
    border-radius: 999px;
    font-size: var(--tte-fs-1);
    font-weight: 600;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

/* ────── Positioning statement (spec verbatim block) ────── */
.mz-tte-mtf-positioning-statement {
    padding: var(--tte-space-4);
    background: rgba(124, 58, 237, 0.06);
    border-inline-start: 3px solid #7c3aed;
    border-radius: 0 var(--tte-radius-sm) var(--tte-radius-sm) 0;
    font-size: var(--tte-fs-2);
    line-height: 1.6;
    color: var(--tte-ink);
    margin-block-end: var(--tte-space-3);
}

.mz-tte-mtf-positioning-short {
    font-size: var(--tte-fs-2);
    color: var(--tte-ink);
    font-weight: 500;
    font-style: italic;
    line-height: 1.5;
    margin: 0 0 var(--tte-space-5) 0;
}

/* ────── 9 quote examples (recognition) ────── */
.mz-tte-mtf-quote-list {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--tte-space-4) 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--tte-space-2);
}

.mz-tte-mtf-quote-list li {
    padding: var(--tte-space-3);
    background: var(--tte-card-bg);
    border: 1px solid var(--tte-line);
    border-inline-start: 3px solid #7c3aed;
    border-radius: 0 var(--tte-radius-sm) var(--tte-radius-sm) 0;
    font-size: var(--tte-fs-1);
    line-height: 1.6;
    color: #000000;
    opacity: 1;
    font-style: italic;
}

/* Negative/exclusion variant — soft red border indicates "NOT covered" / "This is NOT" scope. */
.mz-tte-mtf-quote-list--negative li {
    border-inline-start-color: #ef4444;
    background: #fef2f2;
}

/* WhatsApp upsell bridge — "What is NOT covered" li'lerini link yapar.
   Sağa yaslanmış chevron (›) tıklanabilirliği belirginleştirir. */
.mz-tte-mtf-limits-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--tte-space-2);
    color: inherit;
    text-decoration: none;
}
.mz-tte-mtf-limits-link::after {
    content: '›';
    flex-shrink: 0;
    font-size: 22px;
    line-height: 1;
    font-weight: 700;
    color: #1d4ed8;
    transition: transform 0.15s ease;
}
.mz-tte-mtf-limits-link:hover,
.mz-tte-mtf-limits-link:focus-visible {
    color: #1d4ed8;
}
.mz-tte-mtf-limits-link:hover::after,
.mz-tte-mtf-limits-link:focus-visible::after {
    transform: translateX(3px);
}

.mz-tte-mtf-reaction-quote {
    margin: 0 0 var(--tte-space-5) 0;
    padding: var(--tte-space-4);
    background: rgba(124, 58, 237, 0.08);
    border-radius: var(--tte-radius-md);
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-size: var(--tte-fs-2);
    line-height: 1.6;
    font-weight: 600;
    color: var(--tte-ink);
    text-align: center;
    font-style: italic;
}

/* Advisory areas (native <details>/<summary>) */
.mz-tte-mtf-area {
    background: var(--tte-card-bg);
    border: 1px solid var(--tte-line);
    border-radius: var(--tte-radius-sm);
    margin-block-end: var(--tte-space-2);
    overflow: hidden;
}

.mz-tte-mtf-area > summary {
    padding: var(--tte-space-3);
    cursor: pointer;
    font-weight: 600;
    color: var(--tte-ink);
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--tte-space-2);
}

.mz-tte-mtf-area > summary::marker,
.mz-tte-mtf-area > summary::-webkit-details-marker {
    display: none;
}

.mz-tte-mtf-area > summary::after {
    content: '+';
    color: var(--tte-primary);
    font-weight: 700;
    font-size: var(--tte-fs-3);
    line-height: 1;
    flex-shrink: 0;
    transition: transform .16s ease;
}

.mz-tte-mtf-area[open] > summary::after {
    content: '−';
    transform: rotate(0deg);
}

.mz-tte-mtf-area-body {
    padding: 0 var(--tte-space-3) var(--tte-space-3);
    color: var(--tte-ink);
    font-size: var(--tte-fs-1);
    line-height: 1.6;
}

.mz-tte-mtf-area-intro {
    margin: var(--tte-space-3) 0 var(--tte-space-2) 0;
    color: var(--tte-ink);
}

.mz-tte-mtf-area-platform {
    margin: 0 0 var(--tte-space-3) 0;
    padding: var(--tte-space-2);
    background: rgba(37, 99, 235, 0.04);
    border-radius: var(--tte-radius-sm);
    color: var(--tte-ink);
    font-weight: 600;
    font-size: var(--tte-fs-1);
    letter-spacing: 0.02em;
    text-align: center;
}

.mz-tte-mtf-area-list {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--tte-space-3) 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
}

.mz-tte-mtf-area-list li {
    padding-inline-start: var(--tte-space-3);
    position: relative;
    color: var(--tte-ink);
    font-weight: 500;
    line-height: 1.5;
}

.mz-tte-mtf-area-list li::before {
    content: '·';
    position: absolute;
    inset-inline-start: 0;
    color: var(--tte-primary);
    font-weight: 700;
}

/* ────── Value proposition repeat (spec verbatim, prominent blockquote) ────── */
.mz-tte-mtf-value-prop {
    margin: var(--tte-space-5) 0 var(--tte-space-4) 0;
    padding: var(--tte-space-4) var(--tte-space-5);
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.08), rgba(37, 99, 235, 0.08));
    border-radius: var(--tte-radius-md);
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-size: var(--tte-fs-2);
    line-height: 1.6;
    font-weight: 600;
    color: var(--tte-ink);
    text-align: center;
    font-style: italic;
    border-inline-start: none;
}

/* Booking scope clarity HARD (spec verbatim) — soluk YASAK, canlı ink weight 500 */
.mz-tte-mtf-booking-scope {
    padding: var(--tte-space-3);
    background: rgba(124, 58, 237, 0.04);
    border: 1px solid rgba(124, 58, 237, 0.16);
    border-radius: var(--tte-radius-sm);
    color: var(--tte-ink);
    font-weight: 500;
    font-size: var(--tte-fs-1);
    line-height: 1.6;
    margin-block-start: var(--tte-space-4);
}

/* ────── Step 5F schedule augment (loaded after screen-schedule.css) ────── */
.mz-tte-mtf-schedule-card {
    padding-block-end: 120px; /* MTF-only override for new taller sticky bar (Orhan 2026-09-09) */
}

.mz-tte-mtf-schedule-summary {
    /* MTF schedule summary card — purple accent (override schedule blue). */
    background: rgba(124, 58, 237, 0.06);
    border-color: rgba(124, 58, 237, 0.16);
}

.mz-tte-mtf-schedule-summary .mz-tte-schedule-summary-price {
    color: #7c3aed;
}

.mz-tte-schedule-summary-with {
    font-size: var(--tte-fs-2);
    color: var(--tte-ink);
    margin-block-start: var(--tte-space-1);
}

.mz-tte-mtf-session-info {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--tte-space-5) 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--tte-space-2);
}

.mz-tte-mtf-session-info li {
    padding: var(--tte-space-3);
    background: var(--tte-card-bg);
    border: 1px solid var(--tte-line);
    border-radius: var(--tte-radius-sm);
    font-size: var(--tte-fs-1);
    line-height: 1.5;
}

/* Optional support fallback (small text, muted, unobtrusive) */
.mz-tte-mtf-schedule-support {
    padding-block-start: var(--tte-space-4);
    border-block-start: 1px solid var(--tte-line);
    margin-block-start: var(--tte-space-4);
    font-size: var(--tte-fs-1);
    text-align: center;
}

@media (min-width: 720px) {
    .mz-tte-mtf-dim-split {
        grid-template-columns: 1fr 1fr;
        gap: var(--tte-space-4);
    }
    .mz-tte-mtf-dim-list {
        grid-template-columns: 1fr;
    }
    .mz-tte-mtf-quote-list {
        grid-template-columns: 1fr 1fr;
        font-weight: 500;
    }
    .mz-tte-mtf-area-list {
        grid-template-columns: 1fr 1fr;
        gap: 6px var(--tte-space-4);
    }
    .mz-tte-mtf-session-info {
        grid-template-columns: 1fr 1fr;
    }
    .mz-tte-mtf-details-card {
        padding-block-end: 120px; /* keep sticky bar clearance on desktop */
    }
}

/* Body wrapper — mobile pulls content 14px outward beyond card padding,
   desktop resets to card default (Orhan 2026-09-09).
   Block direction (top/bottom) untouched. */
.mz-tte-mtf-body {
    margin-inline: -14px;
}
@media (min-width: 720px) {
    .mz-tte-mtf-body {
        margin-inline: 0;
    }
}


/* Sticky bar CSS moved to canonical tte-base.css (Orhan 2026-09-10) — all
   TTE paid screens auto-load via layout. No cross-file duplication. */