/* ============================================================================
   The Effortless Difference (Pages/WhyEffortless/Index.cshtml). Ported from "The Effortless Difference.dc.html".
   A dark page: hero backdrop "Nested squares", tone Dark (gold lines). Shared light pieces (.hero, .subnav,
   .section, .grid-3, .split, .btn, .link-arrow, ...) live in site.css and are re-toned here. Razor only, no JS.
   ============================================================================ */

/* Visually hidden text (table marks, icon-only links). */

/* ============================================================================
   Dark page frame. Shared CSS candidate: the same block is in for-advisors.css.
   ============================================================================ */

.hero--dark .hero__title { color: #fff; }
.hero--dark .hero__lead { color: var(--dk-text); }

.link-arrow--gold { color: var(--gold); font-weight: 700; }
.link-arrow--gold:hover { color: #ffc978; }

/* Dark testimonial card. */
.dk-quote {
    margin: 0;
    border: 1px solid var(--dk-line);
    border-radius: 14px;
    background: rgba(255, 255, 255, .04);
    padding: 24px 26px;
}
.dk-quote__mark { display: block; color: var(--gold); font-size: 15px; }
.dk-quote__item { margin: 0; padding-top: 14px; }
.dk-quote__item + .dk-quote__item { margin-top: 14px; border-top: 1px solid rgba(255, 255, 255, .08); }

/* Rotating quotes (#cost): one quote at a time, 4s each, looping.
   Every item runs the same keyframes; a negative delay of -(cycle - slot * n) parks item n partway in,
   so their visible slots follow each other. Adding a fourth quote means adding one nth-child delay and
   widening the cycle - the slot maths is the only thing to keep in step.
   The items share one grid cell rather than being absolutely positioned, so the box is always as tall
   as the longest quote at whatever width it is read. */
.dk-quote--rotate .dk-quote__rotator { display: grid; }
.dk-quote--rotate .dk-quote__item {
    grid-area: 1 / 1;
    opacity: 0;
    transform: translateY(10px);
    animation: quote-cycle 12s cubic-bezier(.4, 0, .2, 1) infinite;
}
.dk-quote--rotate .dk-quote__item + .dk-quote__item { margin-top: 0; border-top: 0; }
.dk-quote--rotate .dk-quote__item:nth-child(2) { animation-delay: -8s; }
.dk-quote--rotate .dk-quote__item:nth-child(3) { animation-delay: -4s; }
@keyframes quote-cycle {
    0% { opacity: 0; transform: translateY(10px); }
    4.6% { opacity: 1; transform: translateY(0); }        /* .55s fade in, as the design had */
    31% { opacity: 1; transform: translateY(0); }
    37% { opacity: 0; transform: translateY(0); }         /* fades past its 4s boundary, so the next
                                                             quote is already fading in over it - a
                                                             crossfade, never an empty box */
    37.1% { opacity: 0; transform: translateY(10px); }    /* reset out of sight, never seen sliding back */
    100% { opacity: 0; transform: translateY(10px); }
}

.dk-quote__dots { margin-top: 6px; display: flex; gap: 6px; }
.dk-quote__dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .22);
    animation: quote-dot 12s steps(1, end) infinite;
}
.dk-quote__dot:nth-child(2) { animation-delay: -8s; }
.dk-quote__dot:nth-child(3) { animation-delay: -4s; }
@keyframes quote-dot {
    0%, 33.3% { background: var(--gold); }
    33.4%, 100% { background: rgba(255, 255, 255, .22); }
}
.dk-quote__text { margin: 0; font-size: 15px; line-height: 1.6; color: #fff; text-wrap: pretty; }
.dk-quote__text--lg { margin-top: 14px; font-size: 16px; }
.dk-quote__who { margin-top: 12px; font-size: 13px; font-weight: 600; color: var(--gold); }

/* Dark closing panel. */

/* ============================================================================ end of shared dark frame */

/* ---- Hero ---- */
.why-hero { padding: 88px 32px 76px; }
.why-hero .hero__inner { max-width: 940px; }
.why-hero .hero__title { font-size: 68px; line-height: 1.03; }
.why-hero .hero__lead { margin-top: 28px; }
.why-hero .btn-row { margin-top: 34px; }
.hero-chips {
    margin: 30px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}
.hero-chip {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 16px;
    border-radius: 999px;
    background: rgba(250, 175, 66, .10);
    border: 1px solid rgba(250, 175, 66, .34);
    font-size: 13.5px;
    font-weight: 600;
    color: #ffd694;
    white-space: nowrap;
}
.hero-chip .icon { height: 10px; width: auto; color: var(--gold); }

/* ---- The status quo ---- */
.pull {
    margin-top: 24px;
    padding: 22px 24px;
    border-left: 2px solid var(--gold);
    background: rgba(250, 175, 66, .06);
    border-radius: 0 14px 14px 0;
}
.pull__q { margin: 0; font-size: 19px; line-height: 1.5; font-weight: 600; color: #fff; text-wrap: pretty; }
.pull__a { margin: 12px 0 0; font-size: 16px; line-height: 1.6; color: var(--dk-text); text-wrap: pretty; }
.cost .pull + .lead { margin-top: 20px; }
.cost__link { margin-top: 26px; }
.cost__side { min-width: 0; display: flex; flex-direction: column; gap: 18px; }

/* Vertical ticker of hidden costs: two copies of the list, the track scrolls one list-height. */
.cost-ticker {
    position: relative;
    height: 400px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%);
}
.cost-ticker__track { display: flex; flex-direction: column; animation: cost-ticker 24s linear infinite; }
.cost-ticker__group { margin: 0; padding: 0 0 10px; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.cost-item {
    flex: none;
    min-height: 72px;
    display: flex;
    align-items: center;
    gap: 13px;
    border: 1px solid var(--dk-line);
    border-radius: 14px;
    background: rgba(255, 255, 255, .04);
    padding: 12px 18px;
    font-size: 14.5px;
    line-height: 1.45;
    color: var(--dk-text);
}
.cost-item .icon { flex: none; height: 12px; width: auto; color: #e0555f; }
@keyframes cost-ticker {
    from { transform: translateY(0); }
    to { transform: translateY(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .cost-ticker { height: auto; -webkit-mask-image: none; mask-image: none; }
    .cost-ticker__track { animation: none; }
    .cost-ticker__group[aria-hidden] { display: none; }
    /* Quotes stop rotating and stack in full, the way they read before this section animated. */
    .dk-quote--rotate .dk-quote__rotator { display: block; }
    .dk-quote--rotate .dk-quote__item { opacity: 1; transform: none; animation: none; }
    .dk-quote--rotate .dk-quote__item + .dk-quote__item { margin-top: 14px; border-top: 1px solid rgba(255, 255, 255, .08); }
    .dk-quote__dots { display: none; }
    .dk-quote__dot { animation: none; }
}

/* ---- Five pillars (#independence) ---- */
.pillars__intro { max-width: 840px; }
.pillars__grid { margin-top: 46px; gap: 18px; }
.pillar-card {
    min-width: 0;
    border: 1px solid var(--dk-line);
    border-radius: var(--r-card);
    background: linear-gradient(180deg, rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, .03) 100%);
    padding: 30px 28px;
}
.pillar-card__head { display: flex; align-items: center; gap: 14px; }
.pillar-card__n {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(250, 175, 66, .14);
    border: 1px solid rgba(250, 175, 66, .34);
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 800;
    color: var(--gold);
}
.pillar-card__icon { display: inline-flex; font-size: 19px; color: var(--gold); --duo-secondary: #ffd694; --duo-opacity: .34; }
.pillar-card__title { margin-top: 20px; font-size: 19px; line-height: 1.25; font-weight: 700; color: #fff; }
.pillar-card__body { margin: 10px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--dk-dim); text-wrap: pretty; }

/* ---- The alternatives ---- */
.compare__intro { max-width: 840px; }
.alt-grid { margin-top: 44px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.alt-card {
    min-width: 0;
    border: 1px solid var(--dk-line);
    border-radius: var(--r-card);
    background: rgba(255, 255, 255, .04);
    padding: 32px 30px;
}
.alt-card__head { display: flex; align-items: center; gap: 13px; }
.alt-card__icon {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .07);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #fff;
    --duo-secondary: #8fa2b8;
    --duo-opacity: .5;
}
.alt-card__title { font-size: 20px; line-height: 1.25; font-weight: 700; color: #fff; }
.alt-card__pitch { margin: 18px 0 0; font-size: 14.5px; line-height: 1.65; color: var(--dk-dim); text-wrap: pretty; }
.alt-card__catch {
    margin-top: 16px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 16px 18px;
    border-radius: 14px;
    background: rgba(250, 175, 66, .08);
    border: 1px solid rgba(250, 175, 66, .22);
}
.alt-card__catch p { margin: 0; font-size: 14.5px; line-height: 1.6; color: #ffd694; text-wrap: pretty; }
.alt-card__warn { display: inline-flex; flex: none; margin-top: 4px; font-size: 12px; color: var(--gold); }
.alt-card__answer {
    margin: 16px 0 0;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    font-size: 15px;
    line-height: 1.6;
    font-weight: 600;
    color: #fff;
    text-wrap: pretty;
}
.alt-card__arrow { display: inline-flex; flex: none; margin-top: 5px; font-size: 11px; color: var(--gold); }

/* At-a-glance comparison table. */
.glance {
    margin-top: 44px;
    border: 1px solid var(--dk-line);
    border-radius: var(--r-card);
    background: rgba(255, 255, 255, .03);
    padding: 34px 32px;
}
.glance__label { margin: 0; font-size: 12.5px; letter-spacing: .2em; text-transform: uppercase; font-weight: 700; color: var(--gold); }
.glance__scroll { margin-top: 22px; overflow-x: auto; contain: inline-size; }
/* min-width keeps the six columns readable down to tablets; on phones the table wraps instead (see the 559px block),
   because a fixed 640px minimum made mobile Chrome widen the whole layout viewport to fit it. */
.glance__table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 13.5px; }
.glance__table th, .glance__table td { padding: 16px 10px; text-align: center; }
.glance__table thead th {
    padding: 0 10px 14px;
    font-size: 12px;
    line-height: 1.35;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--dk-dim);
    vertical-align: bottom;
}
.glance__table th:first-child, .glance__table td:first-child { text-align: left; padding-left: 0; padding-right: 14px; width: 32%; }
.glance__table tbody th { font-weight: 600; color: #fff; }
.glance__table tbody th, .glance__table tbody td { border-top: 1px solid rgba(255, 255, 255, .10); color: var(--dk-dim); }
.glance__ea { background: rgba(112, 190, 68, .12); color: var(--green-l); font-weight: 800; }
.glance__table thead .glance__ea--head { padding-top: 20px; border-radius: 10px 10px 0 0; color: var(--green-l); font-weight: 800; }
.glance__table tbody .glance__ea { border-top-color: rgba(112, 190, 68, .28); color: var(--green-l); }
.glance__legend { margin: 18px 0 0; font-size: 12.5px; color: var(--dk-dim); }

.compare-cta {
    margin-top: 36px;
    border-radius: var(--r-card);
    border: 1px solid rgba(250, 175, 66, .30);
    background: rgba(250, 175, 66, .07);
    padding: 32px 34px;
    display: flex;
    gap: 28px;
    align-items: center;
    flex-wrap: wrap;
}
.compare-cta__copy { min-width: 280px; flex: 1; }
.compare-cta__title { font-size: 24px; line-height: 1.2; font-weight: 700; color: #fff; }
.compare-cta__body { margin: 10px 0 0; font-size: 15.5px; line-height: 1.6; color: var(--dk-text); }
.compare-cta__btn { padding: 14px 24px; font-size: 15px; }

/* ---- Proven ---- */
.proven__intro { max-width: 840px; }
.proof-grid { margin-top: 44px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.proof-card {
    min-width: 0;
    border: 1px solid rgba(250, 175, 66, .24);
    border-radius: var(--r-card-sm);
    background: rgba(250, 175, 66, .07);
    padding: 26px 22px;
}
.proof-card__icon { display: inline-flex; font-size: 20px; color: var(--gold); --duo-secondary: #ffd694; --duo-opacity: .34; }
.proof-card__title { margin-top: 16px; font-size: 16px; line-height: 1.3; font-weight: 700; color: #fff; }
.proof-card__note { margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: var(--dk-dim); }
.proven__quote { margin-top: 26px; border-radius: var(--r-card); padding: 26px 30px; }

/* ---- Demo ---- */
.why-demo { padding-bottom: 112px; }

/* ---- Responsive ---- */
@media (max-width: 959px) {
    
    .why-hero { padding: 64px 24px 56px; }
    .why-hero .hero__title { font-size: 46px; }
    .alt-grid { grid-template-columns: 1fr; }
    .proof-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .glance { padding: 26px 22px; }
    .dk-panel { padding: 64px 28px 72px; }
    .dk-panel__title { font-size: 34px; }
    .why-demo { padding-bottom: 72px; }
}
@media (max-width: 559px) {
    .glance__table { min-width: 0; font-size: 12px; }
    .glance__table th, .glance__table td { padding: 12px 4px; overflow-wrap: anywhere; }
    .glance__table th:first-child, .glance__table td:first-child { width: 30%; padding-right: 8px; }
    .why-hero { padding: 48px 20px 40px; }
    .why-hero .hero__title { font-size: 36px; }
    .hero-chip { white-space: normal; }
    .proof-grid { grid-template-columns: 1fr; }
    .compare-cta { padding: 24px 20px; }
    .compare-cta__btn { width: 100%; }
    .dk-panel { padding: 48px 20px 56px; border-radius: var(--r-card); }
    .glance { padding: 20px 16px; }
    .why-demo { padding-bottom: 56px; }
}