/* =====================================================================
   TrafixIA — AI Survival Diagnostic (additions to the home)
   ---------------------------------------------------------------------
   This stylesheet loads on top of style.css.
   It reuses the home components as much as possible (.glass, .btn--*,
   .eyebrow, .sec-head, .section-pad, .reveal…) and only introduces the
   blocks specific to the sales page:
     · 01/12 numbering
     · 4-stat grid (2×2)
     · Three scenarios (A/B muted, C accented)
     · 8 analytical deliverables grid
     · Report / Debrief twin
     · 4 process steps (dark variant of the method component)
     · Guarantee seal
     · FAQ accordion
   ===================================================================== */


/* ── Section numbering ── */
.dsi-no{
    font-family: var(--mono);
    font-size: .72rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--acc-3);
    display: inline-block;
    margin-bottom: 24px;
}


/* ── Adapted hero (variants of the home hero) ── */
.dsi-hero h1{ max-width: 22ch; }
.dsi-hero__lede{
    margin-top: clamp(20px, 3vh, 32px);
    font-family: var(--serif);
    font-style: italic;
    font-size: clamp(1.15rem, 1.7vw, 1.45rem);
    line-height: 1.45;
    color: rgba(239,234,224,.82);
    max-width: 40ch;
}
.dsi-hero__intro{
    margin-top: clamp(18px, 2.6vh, 28px);
    padding-left: 22px;
    border-left: 2px solid var(--acc);
    max-width: 56ch;
    font-size: 1.04rem;
    line-height: 1.65;
    color: rgba(239,234,224,.85);
}
.dsi-hero__cta-second{
    margin-top: 16px;
    font-family: var(--mono);
    font-size: .76rem;
    letter-spacing: .12em;
    color: var(--muted);
    text-transform: uppercase;
    display: block;
}
.dsi-hero__cta-second a{
    color: var(--warm);
    border-bottom: 1px solid var(--acc-3);
    padding-bottom: 2px;
    transition: color .2s ease;
}
.dsi-hero__cta-second a:hover{ color: var(--acc-3); }

.dsi-hero__margin{
    padding: 28px;
    border-left: 1px solid var(--line);
    max-width: 280px;
}
.dsi-hero__margin .num{
    font-family: var(--serif);
    font-size: 4rem;
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--warm);
    display: block;
    margin-bottom: 14px;
}
.dsi-hero__margin .num em{ color: var(--acc-3); font-style: italic; font-size: .7em; }
.dsi-hero__margin .label{
    font-size: .95rem;
    color: rgba(239,234,224,.7);
    line-height: 1.5;
    display: block;
    margin-bottom: 12px;
    max-width: 28ch;
}
.dsi-hero__margin .src{
    font-family: var(--mono);
    font-size: .68rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
}


/* ── 4 stats (Reality section) ── */
.dsi-stats-grid{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}
.dsi-stat{
    padding: 36px 32px;
    min-height: 240px;
    display: flex; flex-direction: column; justify-content: space-between;
    gap: 18px;
}
.dsi-stat .num{
    font-family: var(--serif);
    font-size: clamp(3.4rem, 6vw, 5.4rem);
    line-height: .9;
    letter-spacing: -0.04em;
}
.dsi-stat .num em{
    color: var(--acc-3);
    font-style: italic;
    font-size: .55em;
    margin-left: .05em;
    vertical-align: baseline;
}
.dsi-stat .lbl{
    font-size: 1rem;
    color: rgba(239,234,224,.78);
    line-height: 1.55;
    max-width: 32ch;
}
.dsi-stat .src{
    font-family: var(--mono);
    font-size: .68rem;
    letter-spacing: .14em;
    color: var(--muted);
    text-transform: uppercase;
}
.dsi-stats__note{
    margin-top: 56px;
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.18rem;
    color: rgba(239,234,224,.7);
    max-width: 64ch;
    line-height: 1.55;
}


/* ── 3 scenarios ── */
.dsi-scen-list{ display: flex; flex-direction: column; gap: 18px; }
.dsi-scen{
    padding: clamp(32px, 4vw, 56px);
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: clamp(28px, 4vw, 56px);
    align-items: start;
}
.dsi-scen__tag{
    font-family: var(--mono);
    font-size: .76rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--muted);
}
.dsi-scen__title{
    font-family: var(--serif);
    font-size: clamp(1.7rem, 2.6vw, 2.4rem);
    letter-spacing: -0.022em;
    line-height: 1.1;
    margin: 0 0 20px;
    color: var(--warm);
}
.dsi-scen__body{
    font-size: 1.05rem;
    line-height: 1.7;
    color: rgba(239,234,224,.78);
    max-width: 60ch;
}
.dsi-scen--atone .dsi-scen__title{ color: rgba(239,234,224,.55); }
.dsi-scen--atone .dsi-scen__body{ color: rgba(239,234,224,.5); }
.dsi-scen--bold{
    background:
      linear-gradient(135deg, rgba(229,90,43,.18) 0%, rgba(198,52,47,.06) 50%, rgba(244,184,96,.10) 100%);
    border-color: rgba(229,90,43,.28);
}
.dsi-scen--bold .dsi-scen__tag{ color: var(--acc-3); }
.dsi-scen--bold .dsi-scen__title em{
    background: linear-gradient(110deg, #F4B860, #E55A2B);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}

.dsi-scen-transition{
    margin-top: 56px;
    font-family: var(--serif);
    font-style: italic;
    font-size: clamp(1.25rem, 1.8vw, 1.55rem);
    color: rgba(239,234,224,.88);
    max-width: 70ch;
    line-height: 1.5;
}


/* ── 8 analytical deliverables ── */
.dsi-liv-grid{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}
.dsi-liv{
    padding: 32px 36px;
    min-height: 200px;
    display: flex; flex-direction: column; gap: 14px;
    transition: transform .35s cubic-bezier(.2,.65,.2,1);
}
.dsi-liv:hover{ transform: translateY(-3px); }
.dsi-liv .num{
    font-family: var(--mono);
    font-size: .76rem;
    letter-spacing: .14em;
    color: var(--acc-3);
}
.dsi-liv .title{
    font-family: var(--serif);
    font-size: 1.5rem;
    letter-spacing: -0.018em;
    line-height: 1.15;
    color: var(--warm);
    margin: 0;
}
.dsi-liv .txt{
    font-size: 1rem;
    line-height: 1.6;
    color: rgba(239,234,224,.72);
}


/* ── Report + Debrief (twin) ── */
.dsi-twin{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}
.dsi-twin__col{
    padding: clamp(36px, 4vw, 56px);
}
.dsi-twin__tag{
    font-family: var(--mono);
    font-size: .72rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--acc-3);
    margin-bottom: 18px;
    display: inline-block;
}
.dsi-twin__title{
    font-family: var(--serif);
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    letter-spacing: -0.022em;
    line-height: 1.05;
    color: var(--warm);
    margin: 0 0 24px;
}
.dsi-twin__copy{
    font-size: 1.05rem;
    line-height: 1.7;
    color: rgba(239,234,224,.8);
    margin: 0 0 32px;
    max-width: 46ch;
}
.dsi-twin__meta{
    list-style: none; padding: 0; margin: 0;
    border-top: 1px solid var(--line);
}
.dsi-twin__meta li{
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
    font-size: .96rem;
    color: rgba(239,234,224,.82);
    align-items: baseline;
}
.dsi-twin__meta .k{
    font-family: var(--mono);
    font-size: .7rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--muted);
}


/* ── 4 process steps (dark variant of the method component) ── */
.dsi-proc-list{
    display: grid;
    grid-template-columns: 1fr;
    border-top: 1px solid var(--line-strong);
}
.dsi-proc-step{
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: clamp(32px, 5vw, 80px);
    padding: 40px 0;
    border-bottom: 1px solid var(--line);
    align-items: start;
}
.dsi-proc-step:last-child{ border-bottom: 1px solid var(--line-strong); }
.dsi-proc__day{
    font-family: var(--mono);
    font-size: .82rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--acc-3);
}
.dsi-proc__title{
    font-family: var(--serif);
    font-size: clamp(1.6rem, 2.4vw, 2.1rem);
    letter-spacing: -0.022em;
    line-height: 1.1;
    color: var(--warm);
    margin: 0 0 14px;
}
.dsi-proc__body{
    font-size: 1.05rem;
    line-height: 1.7;
    color: rgba(239,234,224,.78);
    max-width: 64ch;
}


/* ── Guarantee seal ── */
.dsi-seal-wrap{ display: flex; justify-content: center; }
.dsi-seal{
    max-width: 880px;
    padding: clamp(48px, 6vw, 88px) clamp(32px, 5vw, 80px);
    position: relative;
    text-align: left;
}
.dsi-seal::before, .dsi-seal::after{
    content:""; position: absolute;
    width: 16px; height: 16px;
    border: 1px solid var(--acc-3);
}
.dsi-seal::before{ top: 12px; left: 12px; border-right: 0; border-bottom: 0; }
.dsi-seal::after{ bottom: 12px; right: 12px; border-left: 0; border-top: 0; }
.dsi-seal__crest{
    font-family: var(--mono);
    font-size: .72rem;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--acc-3);
    display: inline-block;
    margin-bottom: 28px;
}
.dsi-seal__main{
    font-family: var(--serif);
    font-size: clamp(1.4rem, 2.2vw, 1.9rem);
    letter-spacing: -0.014em;
    line-height: 1.4;
    color: var(--warm);
    margin: 0 0 28px;
    text-wrap: balance;
}
.dsi-seal__caption{
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.1rem;
    line-height: 1.55;
    color: rgba(239,234,224,.72);
    margin: 0;
    max-width: 62ch;
}
.dsi-seal__cond{
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid var(--line);
    font-family: var(--mono);
    font-size: .72rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
}


/* ── FAQ accordion ── */
.dsi-faq-list{
    border-top: 1px solid var(--line-strong);
}
.dsi-faq-item{
    border-bottom: 1px solid var(--line);
}
.dsi-faq-item > summary{
    list-style: none;
    cursor: pointer;
    padding: 28px 0;
    display: grid;
    grid-template-columns: 60px 1fr 28px;
    gap: 20px;
    align-items: baseline;
    font-family: var(--serif);
    font-size: clamp(1.2rem, 1.7vw, 1.5rem);
    letter-spacing: -0.018em;
    line-height: 1.3;
    color: var(--warm);
    transition: color .2s ease;
}
.dsi-faq-item > summary::-webkit-details-marker{ display: none; }
.dsi-faq-item > summary::marker{ content: ""; }
.dsi-faq-item > summary:hover{ color: var(--acc-3); }
.dsi-faq-item > summary .n{
    font-family: var(--mono);
    font-size: .78rem;
    letter-spacing: .14em;
    color: var(--acc-3);
    align-self: center;
}
.dsi-faq-item > summary .plus{
    width: 16px; height: 16px;
    position: relative;
    align-self: center;
    justify-self: end;
}
.dsi-faq-item > summary .plus::before,
.dsi-faq-item > summary .plus::after{
    content:""; position: absolute; left: 0; top: 50%;
    width: 100%; height: 1.5px; background: var(--warm);
    transition: transform .25s ease, background .25s ease;
}
.dsi-faq-item > summary .plus::after{ transform: rotate(90deg); }
.dsi-faq-item[open] > summary{ color: var(--acc-3); }
.dsi-faq-item[open] > summary .plus::before,
.dsi-faq-item[open] > summary .plus::after{ background: var(--acc-3); }
.dsi-faq-item[open] > summary .plus::after{ transform: rotate(0); }
.dsi-faq__answer{
    padding: 0 28px 32px 80px;
    font-size: 1.05rem;
    line-height: 1.75;
    color: rgba(239,234,224,.78);
    max-width: 72ch;
}


/* ── Responsive ── */
@media (max-width: 980px){
    .dsi-stats-grid{ grid-template-columns: 1fr; }
    .dsi-scen{ grid-template-columns: 1fr; gap: 16px; }
    .dsi-liv-grid{ grid-template-columns: 1fr; }
    .dsi-twin{ grid-template-columns: 1fr; }
    .dsi-proc-step{ grid-template-columns: 1fr; gap: 14px; padding: 32px 0; }
    .dsi-hero__margin{ border-left: 0; border-top: 1px solid var(--line); padding: 24px 0 0; max-width: none; }
    .dsi-faq-item > summary{ grid-template-columns: 48px 1fr 20px; gap: 14px; }
    .dsi-faq__answer{ padding: 0 0 28px 62px; }
    .dsi-seal{ padding: 40px 28px; }
}