/* Public Edge Overview demo.
 *
 * This is a deliberately small port of the signed-in Overview primitives. It
 * consumes the same instrument tokens and class names as neo-os.css, but stays
 * scoped to .public-edge-demo so the public marketing shell cannot inherit the
 * app's body/sidebar layout rules. When the dashboard surface changes, update
 * this port with it and the product page remains visibly honest about the
 * relationship between the two experiences.
 */
.public-edge-demo {
    --edge-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    --edge-border: rgba(186, 230, 253, 0.14);
    --edge-border-strong: rgba(186, 230, 253, 0.26);
    --edge-surface: rgba(255, 255, 255, 0.018);
    --edge-surface-raised: rgba(255, 255, 255, 0.032);
    --edge-track: rgba(186, 230, 253, 0.12);
    --edge-text: #dceaf4;
    --edge-text-muted: #8397a9;
    --edge-text-faint: #7b91a5;
    --edge-accent: #38bdf8;
    --edge-accent-faint: rgba(56, 189, 248, 0.30);
    --edge-accent-bg: rgba(56, 189, 248, 0.08);
    --edge-pnl-positive: #6fbf9a;
    --edge-pnl-negative: #ff8066;
    --edge-radius: 5px;
    --edge-radius-sm: 3px;
    --edge-surface-inset: #091625;
    --edge-sky-bright: #7dd3fc;
    color: var(--edge-text);
}

.public-edge-demo .window-title {
    margin-left: auto;
}

.public-edge-demo__layout {
    display: grid;
    grid-template-columns: 142px minmax(0, 1fr);
    min-height: 598px;
}

.public-edge-demo__rail {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: .2rem;
    padding: 1.1rem .65rem .8rem;
    border-right: 1px solid var(--edge-border);
    background: rgba(0, 0, 0, .08);
}

.public-edge-demo__brand {
    padding: 0 .55rem 1.25rem;
    color: var(--edge-text);
    font: 600 .72rem/1 var(--edge-mono);
    letter-spacing: .18em;
}

.public-edge-demo__rail-label,
.public-edge-demo__rail-foot {
    padding: 0 .55rem .45rem;
    color: var(--edge-text-faint);
    font: 500 .56rem/1.2 var(--edge-mono);
    letter-spacing: .12em;
    text-transform: uppercase;
}

.public-edge-demo__rail .edge-nav-link {
    gap: .55rem;
    padding: .48rem .55rem;
    border: 1px solid transparent;
    border-radius: var(--edge-radius-sm);
    color: var(--edge-text-muted);
    font: 500 .67rem/1.2 var(--edge-mono);
    text-decoration: none;
}

.public-edge-demo__rail .edge-nav-link.active {
    border-color: var(--edge-accent-faint);
    background: var(--edge-accent-bg);
    color: var(--edge-text);
}

.public-edge-demo__rail .edge-nav-icon {
    width: 1rem;
    color: var(--edge-text-faint);
    font-size: .68rem;
    text-align: center;
}

.public-edge-demo__rail .edge-nav-link.active .edge-nav-icon {
    color: var(--edge-sky-bright);
}

.public-edge-demo__rail-foot {
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid var(--edge-border);
    line-height: 1.5;
}

.public-edge-demo__content {
    container-type: inline-size;
    min-width: 0;
    padding: 1.15rem;
    background: rgba(5, 11, 22, .16);
}

.public-edge-demo__head,
.public-edge-demo .edge-panel__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .7rem 1rem;
}

.public-edge-demo__head {
    margin-bottom: .9rem;
}

.public-edge-demo .edge-panel__eyebrow,
.public-edge-demo .edge-tile__label,
.public-edge-demo .edge-tile__sub,
.public-edge-demo .edge-chip {
    font-family: var(--edge-mono);
    font-weight: 500;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.public-edge-demo .edge-panel__eyebrow {
    color: var(--edge-text-faint);
    font-size: .58rem;
    line-height: 1.2;
}

.public-edge-demo .edge-panel__title {
    margin-top: .22rem;
    color: var(--edge-text);
    font-size: .78rem;
    font-weight: 600;
    line-height: 1.3;
}

.public-edge-demo .edge-chip {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: .35rem;
    padding: .32rem .48rem;
    border: 1px solid var(--edge-accent-faint);
    border-radius: 999px;
    background: var(--edge-accent-bg);
    color: var(--edge-sky-bright);
    font-size: .53rem;
    line-height: 1;
}

.public-edge-demo .edge-chip i {
    font-size: .5rem;
}

.public-edge-demo .edge-tile-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .55rem;
}

.public-edge-demo .edge-tile,
.public-edge-demo .edge-panel {
    position: relative;
    min-width: 0;
    border: 1px solid var(--edge-border);
    border-radius: var(--edge-radius);
    background: var(--edge-surface);
    box-shadow: inset 0 1px 0 rgba(220, 234, 244, .05), 0 1px 3px rgba(2, 6, 15, .28);
}

.public-edge-demo .edge-tile {
    container-type: inline-size;
    padding: .65rem .7rem;
    overflow: hidden;
}

.public-edge-demo .edge-tile--lead {
    border-color: var(--edge-border-strong);
}

.public-edge-demo .edge-tile--lead::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 1px;
    background: linear-gradient(90deg, var(--edge-accent), transparent);
    content: '';
}

.public-edge-demo .edge-tile__label {
    display: flex;
    align-items: center;
    gap: .3rem;
    min-width: 0;
    color: var(--edge-text-faint);
    font-size: .54rem;
    line-height: 1.2;
}

.public-edge-demo .edge-tile__label i {
    color: var(--edge-text-muted);
    font-size: .53rem;
}

.public-edge-demo .edge-tile__value {
    margin-top: .36rem;
    color: var(--edge-text);
    font: 500 clamp(.76rem, 7.5cqi, 1.04rem)/1.1 var(--edge-mono);
    font-variant-numeric: tabular-nums;
}

.public-edge-demo .edge-tile--lead .edge-tile__value {
    color: var(--edge-accent);
}

.public-edge-demo .edge-tile__sub {
    margin-top: .3rem;
    overflow: hidden;
    color: var(--edge-text-faint);
    font-size: .49rem;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.public-edge-demo .edge-pnl-positive { color: var(--edge-pnl-positive) !important; }
.public-edge-demo .edge-pnl-negative { color: var(--edge-pnl-negative) !important; }

/* The public evidence extract intentionally omits the dashboard's full gauge
   block. Port the arc variant here because the hero uses the same shared
   scoreGauge() renderer as the signed-in Overview. */
.public-edge-demo .edge-gauge-wrap {
    display: block;
    color: inherit;
    text-decoration: none;
}

.public-edge-demo .edge-gauge {
    position: relative;
    padding: 1.1rem 1.25rem 1.25rem;
    border: 1px solid var(--edge-border);
    border-radius: var(--edge-radius);
    background: var(--edge-surface);
    box-shadow: inset 0 1px 0 rgba(220, 234, 244, .05), 0 1px 3px rgba(2, 6, 15, .28);
}

.public-edge-demo .edge-gauge__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .55rem;
}

.public-edge-demo .edge-gauge__title {
    color: var(--edge-text-muted);
    font: 500 .58rem/1.2 var(--edge-mono);
    letter-spacing: .09em;
    text-transform: uppercase;
}

.public-edge-demo .edge-gauge__head .edge-stat-sublink {
    margin-left: auto;
    color: var(--edge-sky-bright);
    font: 500 .52rem/1.2 var(--edge-mono);
    text-decoration: none;
}

.public-edge-demo .edge-gauge__dial {
    position: relative;
    width: 100%;
    max-width: 11rem;
    margin: .5rem auto 0;
}

.public-edge-demo .edge-gauge__svg {
    display: block;
    width: 100%;
    height: auto;
}

.public-edge-demo .edge-gauge__track,
.public-edge-demo .edge-gauge__arc {
    fill: none;
    stroke-width: 10;
    stroke-linecap: round;
}

.public-edge-demo .edge-gauge__track { stroke: var(--edge-track); }
.public-edge-demo .edge-gauge__arc {
    stroke: var(--edge-accent);
    transition: stroke-dashoffset 480ms cubic-bezier(.2, 0, 0, 1);
}

.public-edge-demo .edge-gauge__readout {
    position: absolute;
    right: 0;
    bottom: .25rem;
    left: 0;
    text-align: center;
    line-height: 1.05;
}

.public-edge-demo .edge-gauge__score {
    display: block;
    color: var(--edge-text);
    font: 500 1.65rem/1 var(--edge-mono);
    font-variant-numeric: tabular-nums;
}

.public-edge-demo .edge-gauge__scale {
    display: block;
    color: var(--edge-text-faint);
    font: 500 .55rem/1.2 var(--edge-mono);
}

.public-edge-demo .edge-gauge__breakdown {
    max-height: 0;
    margin-top: .6rem;
    overflow: hidden;
    opacity: 0;
    transition: max-height 260ms cubic-bezier(.2, 0, 0, 1), opacity 200ms linear;
}

.public-edge-demo .edge-gauge:hover .edge-gauge__breakdown,
.public-edge-demo .edge-gauge:focus .edge-gauge__breakdown,
.public-edge-demo .edge-gauge:focus-within .edge-gauge__breakdown {
    max-height: 22rem;
    opacity: 1;
}

.public-edge-demo .edge-gauge__dl {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    margin: 0;
    padding-top: .6rem;
    border-top: 1px solid var(--edge-border);
}

.public-edge-demo .edge-gauge__dl > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
}

.public-edge-demo .edge-gauge__dl dt,
.public-edge-demo .edge-gauge__dl dd,
.public-edge-demo .edge-gauge__note {
    font: 500 .52rem/1.25 var(--edge-mono);
}

.public-edge-demo .edge-gauge__dl dt,
.public-edge-demo .edge-gauge__note { color: var(--edge-text-muted); }
.public-edge-demo .edge-gauge__dl dd { margin: 0; color: var(--edge-text); }
.public-edge-demo .edge-gauge__note { margin: .6rem 0 0; line-height: 1.45; }

@media (hover: none) {
    .public-edge-demo .edge-gauge__breakdown {
        max-height: none;
        overflow: visible;
        opacity: 1;
    }
}

.public-edge-demo__performance {
    container-type: inline-size;
    margin-top: .7rem;
}

.public-edge-demo .edge-perf__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .7rem;
}

.public-edge-demo .edge-panel {
    padding: .75rem;
}

.public-edge-demo .edge-perf__chart {
    display: flex;
    flex-direction: column;
}

.public-edge-demo__chart {
    position: relative;
    min-width: 0;
    margin-top: .65rem;
    overflow: hidden;
    border: 1px solid var(--edge-border);
    border-radius: var(--edge-radius-sm);
    background-color: var(--edge-surface-inset);
    background-image: linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px);
    background-size: 100% 40px, 62px 100%;
}

.public-edge-demo__chart svg {
    display: block;
    width: 100%;
    height: 145px;
}

.public-edge-demo__grid-lines line {
    stroke: rgba(148, 190, 220, .13);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.public-edge-demo__area {
    fill: rgba(56, 189, 248, .10);
}

.public-edge-demo__line {
    fill: none;
    stroke: var(--edge-accent);
    stroke-width: 2.5;
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.public-edge-demo.is-played .public-edge-demo__line {
    animation: publicEdgeDraw .95s cubic-bezier(.22, .7, .2, 1) both .3s;
}

.public-edge-demo__point {
    fill: var(--edge-surface-inset);
    stroke: var(--edge-sky-bright);
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
}

.public-edge-demo.is-played .public-edge-demo__point {
    animation: publicEdgePoint .35s ease both .55s;
}

.public-edge-demo__point:nth-of-type(2) { animation-delay: .72s; }
.public-edge-demo__point:nth-of-type(3) { animation-delay: .88s; }

.public-edge-demo__head {
    fill: var(--edge-sky-bright);
}

.public-edge-demo.is-played .public-edge-demo__head {
    animation: publicEdgePoint .35s ease both 1.05s;
}

.public-edge-demo__axis {
    fill: var(--edge-text-faint);
    font: 500 9px var(--edge-mono);
    letter-spacing: .03em;
}

.public-edge-demo__scan {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 8%;
    width: 1px;
    background: linear-gradient(transparent, var(--edge-accent), transparent);
    opacity: 0;
}

.public-edge-demo.is-playing .public-edge-demo__scan {
    animation: publicEdgeScan 1.1s ease-in-out both .35s;
}

.public-edge-demo__legend {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
    padding-top: .55rem;
    color: var(--edge-text-faint);
    font: 500 .52rem/1.2 var(--edge-mono);
    letter-spacing: .04em;
    text-transform: uppercase;
}

.public-edge-demo__legend i {
    display: inline-block;
    width: 1rem;
    height: 2px;
    margin-right: .25rem;
    vertical-align: middle;
    background: var(--edge-accent);
}

.public-edge-demo__gauge-panel {
    display: flex;
    align-items: stretch;
}

.public-edge-demo__gauge-panel .edge-gauge-mount,
.public-edge-demo__gauge-panel .edge-gauge-wrap,
.public-edge-demo__gauge-panel .edge-gauge {
    width: 100%;
}

.public-edge-demo__gauge-panel .edge-gauge {
    border: 0;
    border-radius: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
}

.public-edge-demo__gauge-panel .edge-gauge__title,
.public-edge-demo__gauge-panel .edge-gauge__scale,
.public-edge-demo__gauge-panel .edge-gauge__coverage,
.public-edge-demo__gauge-panel .edge-gauge__dl,
.public-edge-demo__gauge-panel .edge-gauge__note,
.public-edge-demo__gauge-panel .edge-stat-sublink {
    font-size: .58rem;
}

.public-edge-demo__gauge-panel .edge-gauge__score {
    font-size: 1.65rem;
}

.public-edge-demo__gauge-panel .edge-gauge__dial {
    max-width: 11rem;
}

.public-edge-demo__guard-panel {
    display: flex;
    flex-direction: column;
}

.public-edge-demo__guard-state {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-top: 1.1rem;
    padding: .65rem;
    border: 1px solid var(--edge-border);
    border-radius: var(--edge-radius-sm);
    background: var(--edge-surface-raised);
}

.public-edge-demo__guard-lamp {
    flex: 0 0 auto;
    width: .45rem;
    height: .45rem;
    border-radius: 50%;
    background: var(--edge-pnl-positive);
    box-shadow: 0 0 0 3px rgba(111, 191, 154, .12);
}

.public-edge-demo__guard-state strong {
    color: var(--edge-text);
    font-size: .66rem;
    font-weight: 600;
}

.public-edge-demo__guard-state p {
    margin: .22rem 0 0;
    color: var(--edge-text-muted);
    font: 400 .56rem/1.4 var(--edge-mono);
}

.public-edge-demo__guard-meta {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
    margin-top: auto;
    padding-top: .65rem;
    color: var(--edge-text-faint);
    font: 500 .52rem/1.2 var(--edge-mono);
    text-transform: uppercase;
}

.public-edge-demo__guard-meta strong {
    color: var(--edge-text-muted);
    font-weight: 500;
}

.public-edge-demo__caption {
    display: flex;
    align-items: flex-start;
    gap: .35rem;
    margin: .75rem 0 0;
    color: var(--edge-text-faint);
    font: 400 .56rem/1.45 var(--edge-mono);
}

.public-edge-demo__caption i {
    flex: 0 0 auto;
    padding-top: .1rem;
    color: var(--edge-accent);
}

@container (min-width: 34rem) {
    .public-edge-demo .edge-tile-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@container (min-width: 47rem) {
    .public-edge-demo .edge-perf__grid {
        grid-template-columns: minmax(0, 1.45fr) minmax(0, .8fr) minmax(0, .8fr);
    }
}

@media (max-width: 700px) {
    .public-edge-demo__layout {
        grid-template-columns: 1fr;
    }

    .public-edge-demo__rail {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        align-items: center;
        gap: .25rem;
        min-height: 2.8rem;
        padding: .45rem;
        border-right: 0;
        border-bottom: 1px solid var(--edge-border);
    }

    .public-edge-demo__brand,
    .public-edge-demo__rail-label,
    .public-edge-demo__rail-foot {
        display: none;
    }

    .public-edge-demo__rail .edge-nav-link {
        justify-content: center;
        padding: .45rem .25rem;
    }

    .public-edge-demo__rail .edge-nav-label {
        display: none;
    }

    .public-edge-demo__content {
        padding: .75rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .public-edge-demo.is-played .public-edge-demo__line,
    .public-edge-demo.is-played .public-edge-demo__point,
    .public-edge-demo.is-played .public-edge-demo__head,
    .public-edge-demo.is-playing .public-edge-demo__scan {
        animation: none;
    }
}

@keyframes publicEdgeDraw {
    from { stroke-dashoffset: 1; }
}

@keyframes publicEdgePoint {
    from { opacity: 0; transform: scale(.55); transform-box: fill-box; transform-origin: center; }
}

@keyframes publicEdgeScan {
    0% { left: 8%; opacity: 0; }
    12% { opacity: .8; }
    88% { left: 92%; opacity: .8; }
    100% { left: 92%; opacity: 0; }
}

/* ============================================================
   Middle of the product page: the one worked pattern example, the
   coach tightening and the tools drawer. This sheet loads only on
   /products/edge-lab and everything below is additive — lab.css
   keeps every rule it had. Type roles, panels and buttons reuse the
   lab.css tokens so the sections read as the same design system the
   rest of the page (and the homepage) speaks.
   ============================================================ */

/* ---------------------------------------------- native disclosures */
/* Progressive detail without a JS dependency: summary is the closed
   state, the body opens under it. Focus ring and marker removal are
   part of the pattern, not decoration. */
.p-details {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(8, 17, 32, .5);
}
.p-details summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 18px;
    border-radius: inherit;
    color: var(--paper);
    font: 600 13.5px/1.4 var(--sans);
    cursor: pointer;
    list-style: none;
}
.p-details summary::-webkit-details-marker { display: none; }
.p-details summary:focus-visible {
    outline: 2px solid var(--neo-accent);
    outline-offset: -2px;
}
.p-details__count {
    padding: 2px 8px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--muted-2);
    font-size: 10px;
}
.p-details__icon {
    margin-left: auto;
    color: var(--muted-1);
    font: 400 16px/1 var(--mono);
    transition: transform .25s var(--ease-out);
}
.p-details[open] .p-details__icon { transform: rotate(45deg); }
.p-details__body { padding: 2px 18px 18px; }

/* --------------------------------------- featured pattern example */
.ep-feature {
    padding: 28px 30px 26px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: linear-gradient(180deg, #0d1420, #0a0f1a 60%);
}
.ep-feature__question {
    margin: 0;
    color: var(--paper);
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -.02em;
    line-height: 1.3;
}
.ep-feature__lead {
    max-width: 72ch;
    margin: 10px 0 0;
    color: var(--muted-1);
    font-size: 14px;
    line-height: 1.65;
}

/* Two cohorts, one zero-anchored scale: the shared zero is what makes
   the sign flip legible before any figure is read. Same grammar as the
   product's own compare bars. */
.ep-compare { display: grid; gap: 10px; margin-top: 24px; }
.ep-compare__row {
    display: grid;
    grid-template-columns: minmax(170px, 250px) 1fr 96px;
    gap: 14px;
    align-items: center;
}
.ep-compare__label {
    display: grid;
    gap: 2px;
    color: var(--muted-1);
    font-size: 12.5px;
    line-height: 1.35;
}
.ep-compare__label small { color: var(--muted-2); font-size: 10px; }
.ep-compare__track {
    position: relative;
    height: 9px;
    border-radius: 2px;
    background: rgba(186, 230, 253, .07);
}
.ep-compare__track::before {
    content: '';
    position: absolute;
    left: var(--zero, 50%);
    top: -4px;
    bottom: -4px;
    width: 1px;
    background: rgba(186, 230, 253, .32);
}
.ep-compare__fill {
    position: absolute;
    top: 0;
    height: 100%;
    border-radius: 2px;
}
.ep-compare__fill--neg {
    right: calc(100% - var(--zero, 50%));
    width: var(--w, 0%);
    background: var(--coral);
}
.ep-compare__fill--pos {
    left: var(--zero, 50%);
    width: var(--w, 0%);
    background: var(--mint);
}
.ep-compare__value { font-size: 12px; font-weight: 600; text-align: right; }
.ep-neg { color: var(--coral); }
.ep-pos { color: var(--mint); }

.ep-feature__diff {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin: 18px 0 0;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}
.ep-feature__diff span { color: var(--muted-2); font-size: 9px; letter-spacing: .14em; }
.ep-feature__diff b { color: var(--coral); font-size: 15px; }

.ep-feature__note { margin: 12px 0 0; color: var(--muted-2); font-size: 12px; }
.ep-feature__caveat {
    max-width: 72ch;
    margin: 10px 0 0;
    padding-left: 12px;
    border-left: 2px solid rgba(125, 211, 252, .35);
    color: var(--muted-2);
    font-size: 12.5px;
    line-height: 1.6;
}
.ep-feature__details { margin-top: 18px; background: rgba(4, 12, 25, .55); }

.ep-facts { display: grid; gap: 0; margin: 0; }
.ep-facts > div {
    display: grid;
    grid-template-columns: minmax(180px, 280px) 1fr;
    gap: 14px;
    padding: 10px 0;
    border-top: 1px solid rgba(186, 230, 253, .08);
}
.ep-facts > div:first-child { border-top: 0; }
.ep-facts dt { color: var(--muted-2); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; padding-top: 2px; }
.ep-facts dd { margin: 0; color: var(--neo-text); font-size: 13px; line-height: 1.55; }
.ep-facts dd small { display: block; margin-top: 2px; color: var(--muted-2); font-size: 11px; }

.ep-more { margin-top: 12px; }

/* ------------------------------------------------- coach tightening */
/* The coach-window chrome and choreography live in lab.css. Only the
   deltas this page needs go here: the visible "illustrative data"
   badge, rate bars (a rate is not P&L, so it wears the accent, never
   the P&L hues), and a shorter staged arrival. */
.coach-sample {
    padding: 3px 9px;
    border: 1px solid rgba(125, 211, 252, .3);
    border-radius: 999px;
    color: var(--neo-accent-strong);
    font-size: 9px;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.c-bars--rate .c-bar-track::before { display: none; }
.c-bar-fill--rate {
    left: 0;
    width: var(--w, 0%);
    background: rgba(125, 211, 252, .7);
}
.c-bar-sub { display: block; margin-top: 2px; color: var(--muted-2); font-size: 9px; }

.c-breakdown { margin-top: 4px; background: rgba(4, 12, 25, .55); }
.c-breakdown summary { padding: 12px 15px; font-size: 12.5px; }
.c-breakdown-facts { margin: 0; padding-bottom: 6px; }
.c-breakdown-facts > div {
    display: grid;
    grid-template-columns: minmax(110px, 160px) 1fr;
    gap: 12px;
    padding: 8px 0;
    border-top: 1px solid rgba(186, 230, 253, .08);
}
.c-breakdown-facts > div:first-child { border-top: 0; }
.c-breakdown-facts dt { color: var(--muted-2); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; padding-top: 2px; }
.c-breakdown-facts dd { margin: 0; color: var(--neo-text); font-size: 12.5px; line-height: 1.5; }

/* Shorter arrival: card, bars, prose — the chip row is gone, so the turn
   starts immediately. Reduced motion lands on the settled turn via
   lab.css's global guard, so nothing hidden needs these delays. */
.coach-window.is-played .c-card { animation-delay: .35s; }
.coach-window.is-played .c-bar-fill { animation-delay: .65s; }
.coach-window.is-played .c-answer p { animation-delay: .85s; }
.coach-window.is-played .c-answer p:nth-child(2) { animation-delay: 1.05s; }

/* ------------------------------------------ tools drawer + trust note */
.ep-tools__list {
    display: grid;
    gap: 0;
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
    counter-reset: ep-tools;
}
.ep-tools__list li {
    counter-increment: ep-tools;
    display: grid;
    gap: 5px;
    padding: 13px 0;
    border-top: 1px solid var(--line);
}
.ep-tools__list li:first-child { border-top: 0; }
.ep-tools__list li::before {
    content: counter(ep-tools, decimal-leading-zero);
    color: var(--muted-cool);
    font: 500 9px/1 var(--mono);
    letter-spacing: .1em;
}
.ep-tools__list h3 { margin: 0; color: var(--paper); font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.ep-tools__list p { margin: 0; color: var(--muted-2); font-size: 12.5px; line-height: 1.6; }
.ep-tools__drawer { background: rgba(8, 17, 32, .5); }

.ep-trust {
    margin-top: 26px;
    padding: 22px 26px 24px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: rgba(8, 17, 32, .5);
}
.ep-trust h3 { margin: 0; color: var(--paper); font-size: 17px; font-weight: 600; letter-spacing: -.02em; }
.ep-trust p { max-width: 76ch; margin: 8px 0 0; color: var(--muted-1); font-size: 13.5px; line-height: 1.65; }
.ep-trust__link {
    display: inline-block;
    margin-top: 14px;
    color: var(--neo-accent-strong);
    font-size: 13px;
    font-weight: 600;
}
.ep-trust__link .arrow { transition: transform .25s var(--ease-out); display: inline-block; }
.ep-trust__link:hover .arrow { transform: translateX(3px); }
.ep-trust__link:focus-visible { outline: 2px solid var(--neo-accent); outline-offset: 3px; border-radius: 2px; }

/* --------------------------------------------------------- responsive */
@media (max-width: 860px) {
    .ep-feature { padding: 22px 18px 20px; }
    .ep-compare__row { grid-template-columns: 1fr 92px; }
    .ep-compare__label { grid-column: 1 / -1; }
    .ep-facts > div,
    .c-breakdown-facts > div { grid-template-columns: 1fr; gap: 4px; }
}
@media (max-width: 430px) {
    .ep-compare__row { grid-template-columns: 1fr 78px; gap: 10px; }
    .p-details summary { padding: 13px 14px; }
    .p-details__body { padding: 2px 14px 14px; }
}

/* ================= alsó szekciók: egységes ritmus (scoped) =========== */
/* Csak a saját szekcióim; globális section/container szabály nincs.
   Cél: szekcióköz asztali gépen 72–80px, mobilon ~48px. */
.evidence-lab { padding: 72px 0 40px; }
.coach-section { padding: 40px 0 32px; }
.ep-tools { padding: 40px 0 36px; }
.integrations { padding: 36px 0 40px; }
.final-cta.edge-plan-choice { padding: 40px 0 72px; }
.evidence-lab .section-head,
.coach-section .section-head,
.ep-tools .section-head,
.integrations .section-head { margin-bottom: 40px; }
.coach-section .coach-window { margin-top: 0; }

/* coach belső terek: tömörebb kártya, periódus a sávcímkén */
.coach-section .c-log { gap: 12px; padding: 20px 22px 16px; }
.coach-section .c-card { padding: 14px 16px; }
.c-bar-period {
    margin-left: 8px;
    color: var(--muted-2);
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}
.c-hint {
    margin: 0;
    padding: 12px 22px 14px;
    border-top: 1px solid var(--line);
    color: var(--muted-2);
    font-size: 12px;
    letter-spacing: .02em;
}

/* mintapélda belső tereinek mérséklése */
.ep-feature { padding: 24px 26px 22px; }

/* nullavonal jelzése: diszkrét "0" az utolsó sáv alatt */
.ep-compare__row:last-child .ep-compare__track::after {
    content: "0";
    position: absolute;
    left: var(--zero, 50%);
    top: calc(100% + 3px);
    transform: translateX(-50%);
    color: var(--muted-2);
    font: 400 9px/1 var(--mono);
}

/* mobil ritmus */
@media (max-width: 860px) {
    .evidence-lab { padding: 40px 0 24px; }
    .coach-section { padding: 24px 0 24px; }
    .ep-tools { padding: 24px 0 20px; }
    .integrations { padding: 28px 0 24px; }
    .final-cta.edge-plan-choice { padding: 28px 0 48px; }
    .evidence-lab .section-head,
    .coach-section .section-head,
    .ep-tools .section-head,
    .integrations .section-head { margin-bottom: 28px; }
}
