/* ==========================================================================
   /products/edgar only. Loaded by templates/product_edgar.html through the
   base template's head_extra block; nothing here is linked from any other
   page and every rule is scoped under .ed or .ed-main.

   Two grounds, hard cut between them (a chaptered page, not a drifting one).
   The grounds are authored, not inherited from the OS theme, so contrast is
   the same either way; under prefers-color-scheme: dark the light ground
   steps down to a raised dark instead of glaring. `color` is restated
   wherever the ink token is restated, because `color` inherits as a computed
   value and redefining a variable alone does not re-ink the text under it.
   ========================================================================== */

/* `main.wrap` in style.css is element+class, so it out-specifies a bare
   `.ed-main`; matching the element keeps the reset from losing to it. */
main.ed-main {
    max-width: none;
    padding: 0;
}

.ed {
    /* Dark ground */
    --ed-dark-canvas: #0d1512;
    --ed-dark-surface: #14201b;
    --ed-dark-ink: #f1efe7;
    --ed-dark-ink-soft: #a8b5ac;
    --ed-dark-accent: #7fd4a0;
    --ed-dark-line: rgba(241, 239, 231, 0.14);

    /* Light ground */
    --ed-light-canvas: #f4f3ee;
    --ed-light-surface: #ecebe3;
    --ed-light-ink: #16181d;
    --ed-light-ink-soft: #565f59;
    --ed-light-accent: #1f4d3d;
    --ed-light-line: rgba(20, 24, 26, 0.14);

    --ed-measure: 62ch;
    --ed-gutter: clamp(20px, 5vw, 64px);
    --ed-section: clamp(72px, 11vh, 132px);
    --ed-radius: 14px;
    --ed-ease: cubic-bezier(0.23, 1, 0.32, 1);

    font-size: 1rem;
    line-height: 1.6;
}

@media (prefers-color-scheme: dark) {
    .ed {
        --ed-light-canvas: #1a221e;
        --ed-light-surface: #202a25;
        --ed-light-ink: #eceade;
        --ed-light-ink-soft: #9fada4;
        --ed-light-accent: #7fd4a0;
        --ed-light-line: rgba(236, 234, 222, 0.16);
    }
}

/* ---- Grounds --------------------------------------------------------- */

.ed-sec {
    position: relative;
    padding: var(--ed-section) 0;
}

.ed-sec--dark {
    background: var(--ed-dark-canvas);
    --ed-ink: var(--ed-dark-ink);
    --ed-ink-soft: var(--ed-dark-ink-soft);
    --ed-accent: var(--ed-dark-accent);
    --ed-line: var(--ed-dark-line);
    --ed-surface: var(--ed-dark-surface);
    color: var(--ed-dark-ink);
}

.ed-sec--light {
    background: var(--ed-light-canvas);
    --ed-ink: var(--ed-light-ink);
    --ed-ink-soft: var(--ed-light-ink-soft);
    --ed-accent: var(--ed-light-accent);
    --ed-line: var(--ed-light-line);
    --ed-surface: var(--ed-light-surface);
    color: var(--ed-light-ink);
}

.ed-wrap {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 var(--ed-gutter);
}

/* ---- Type ------------------------------------------------------------ */

.ed-display {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.04;
    letter-spacing: -0.012em;
    text-wrap: balance;
    margin: 0;
    color: var(--ed-ink);
}

.ed-display--xl { font-size: clamp(2.1rem, 5.1vw, 4rem); }
.ed-display--lg { font-size: clamp(1.75rem, 3.6vw, 2.8rem); }
.ed-display--md { font-size: clamp(1.35rem, 2.3vw, 1.85rem); line-height: 1.18; }

.ed-h3 {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: 0.004em;
    margin: 0 0 10px;
    color: var(--ed-ink);
}

.ed-lede {
    font-size: clamp(1.05rem, 1.5vw, 1.24rem);
    line-height: 1.55;
    max-width: 54ch;
    color: var(--ed-ink-soft);
    text-wrap: pretty;
    margin: 22px 0 0;
}

.ed-body {
    font-size: 1rem;
    line-height: 1.68;
    max-width: var(--ed-measure);
    text-wrap: pretty;
    margin: 0 0 16px;
}

.ed-measure { max-width: var(--ed-measure); }
.ed-muted { color: var(--ed-ink-soft); }

.ed-kicker {
    font-family: var(--font-display);
    font-size: 1.05rem;
    line-height: 1.45;
    color: var(--ed-accent);
    max-width: 46ch;
    margin: 0;
}

.ed-link {
    color: var(--ed-accent);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.ed-link:hover { text-decoration-thickness: 2px; }

.ed ::selection {
    background: var(--ed-accent);
    color: var(--ed-dark-canvas);
}

.ed a:focus-visible,
.ed button:focus-visible,
.ed [tabindex]:focus-visible {
    outline: 2px solid var(--ed-accent);
    outline-offset: 3px;
    border-radius: 4px;
}

/* ---- Buttons --------------------------------------------------------- */

.ed-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 32px 0 0;
}

.ed-btn {
    display: inline-block;
    padding: 13px 22px;
    border-radius: var(--radius-pill);
    font-size: 0.97rem;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid transparent;
    transition: background-color 140ms var(--ed-ease),
                color 140ms var(--ed-ease),
                transform 120ms var(--ed-ease);
}

.ed-btn--primary {
    background: var(--ed-accent);
    color: #0b1310;
}

.ed-btn--primary:hover { background: #a5e6bd; }

.ed-btn--ghost {
    border-color: var(--ed-line);
    color: var(--ed-ink);
}

.ed-btn--ghost:hover { border-color: var(--ed-accent); color: var(--ed-accent); }
.ed-btn:active { transform: translateY(1px); }

/* The light ground's accent is dark, so its primary button flips its ink. */
.ed-sec--light .ed-btn--primary { color: #f4f3ee; }
.ed-sec--light .ed-btn--primary:hover { background: #163a2e; }

@media (prefers-color-scheme: dark) {
    .ed-sec--light .ed-btn--primary { color: #0b1310; }
    .ed-sec--light .ed-btn--primary:hover { background: #a5e6bd; }
}

/* ---- 1. Hero --------------------------------------------------------- */

.ed-hero {
    min-height: min(88vh, 780px);
    display: flex;
    align-items: flex-end;
    padding-top: clamp(120px, 22vh, 240px);
    padding-bottom: clamp(56px, 9vh, 110px);
    overflow: hidden;
}

.ed-hero__stage {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.ed-hero__poster,
.ed-hero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 62% 50%;
}

/* The clip fades up over the poster once a real frame has painted, so a
   blocked or failed video simply leaves the still in place. */
.ed-hero__video {
    opacity: 0;
    transition: opacity 600ms var(--ed-ease);
}

.ed-hero__video.is-playing { opacity: 1; }

/* A band, not a full-frame overlay: the copy spans the frame's width at
   every size, so density belongs at the bottom and the photograph keeps its
   own contrast above roughly 45%. */
.ed-hero__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
        rgba(9, 15, 13, 0.94) 0%,
        rgba(9, 15, 13, 0.82) 24%,
        rgba(9, 15, 13, 0.42) 52%,
        rgba(9, 15, 13, 0.14) 76%,
        rgba(9, 15, 13, 0.05) 100%);
}

.ed-hero__copy {
    position: relative;
    z-index: 1;
    width: 100%;
}

.ed-hero .ed-display--xl { max-width: 17ch; }

/* ---- 2. The afternoon ------------------------------------------------ */

.ed-split {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: clamp(32px, 6vw, 88px);
    align-items: start;
}

/* Sticky parts hold where the design puts them, or 16px under the sticky site
   header (--site-header-h) where that is lower, so they never slide under it
   and a short viewport does not lose the header's height twice. */
.ed-split__aside {
    position: sticky;
    top: max(var(--site-header-h) + 16px, clamp(24px, 12vh, 96px));
}

.ed-split__aside .ed-body { margin-top: 20px; }

.ed-pain__item {
    padding: 34px 0;
    border-top: 1px solid var(--ed-line);
}

.ed-pain__item:first-child { border-top: 0; padding-top: 0; }

/* The one card that has somewhere to send you. It sits under the kicker
   rather than beside it so the kicker still lands as the card's last word,
   and it is a size down from the body, because it is an offer and not part
   of the argument. */
.ed-pain__more {
    margin: 16px 0 0;
    font-size: 0.93rem;
}

/* ---- 3. The peak: the ledger ---------------------------------------- */

.ed-peak { padding-bottom: calc(var(--ed-section) * 1.2); }

.ed-peak__head .ed-display--xl { max-width: 14ch; }
.ed-peak__head .ed-lede { max-width: 50ch; }

.ed-ledger {
    list-style: none;
    margin: clamp(40px, 6vw, 72px) 0 0;
    padding: 0;
    border-top: 1px solid var(--ed-line);
}

.ed-ledger__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 8px 24px;
    padding: 15px 0;
    border-bottom: 1px solid var(--ed-line);
}

.ed-ledger__topic {
    font-family: var(--font-display);
    font-size: clamp(1.05rem, 1.9vw, 1.4rem);
    color: var(--ed-ink);
}

.ed-ledger__claim,
.ed-ledger__truth {
    font-size: 0.78rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    font-weight: 700;
    white-space: nowrap;
}

.ed-ledger__claim {
    /* Only ever shown once JS is driving the row. */
    display: none;
    color: var(--ed-ink-soft);
}

.ed-ledger__truth { color: var(--ed-accent); }

.ed-ledger__row[data-ed-verdict="same"] .ed-ledger__truth { color: var(--ed-ink-soft); }
.ed-ledger__row[data-ed-verdict="reworded"] .ed-ledger__truth { color: var(--ed-ink-soft); }

/* The seven that were already there recede once resolved: the two that are
   genuinely new are what should be left standing at the end of the act. */
.ed-ledger__row[data-ed-verdict="same"] .ed-ledger__topic,
.ed-ledger__row[data-ed-verdict="reworded"] .ed-ledger__topic {
    color: var(--ed-ink-soft);
    text-decoration: line-through;
    text-decoration-thickness: 1px;
    text-decoration-color: var(--ed-line);
}

.ed-peak__verdict {
    margin-top: clamp(40px, 6vw, 72px);
    max-width: var(--ed-measure);
}

.ed-peak__verdict .ed-display--md { margin-bottom: 22px; }

/* --- JS-driven state. Nothing above this hides content. --- */

.ed--js .ed-ledger__claim { display: inline; }
.ed--js .ed-ledger__truth {
    opacity: 0;
    transform: translateY(4px);
}

.ed--js .ed-ledger__row .ed-ledger__topic {
    color: var(--ed-ink);
    text-decoration: none;
    transition: color 320ms var(--ed-ease), opacity 320ms var(--ed-ease);
}

.ed--js .ed-ledger__row.is-resolved .ed-ledger__claim {
    opacity: 0;
    transform: translateY(-4px);
}

.ed--js .ed-ledger__row.is-resolved .ed-ledger__truth {
    opacity: 1;
    transform: none;
}

.ed--js .ed-ledger__row.is-resolved[data-ed-verdict="same"] .ed-ledger__topic,
.ed--js .ed-ledger__row.is-resolved[data-ed-verdict="reworded"] .ed-ledger__topic {
    color: var(--ed-ink-soft);
    text-decoration: line-through;
    text-decoration-thickness: 1px;
    text-decoration-color: var(--ed-line);
}

.ed--js .ed-ledger__claim,
.ed--js .ed-ledger__truth {
    transition: opacity 260ms var(--ed-ease), transform 260ms var(--ed-ease);
}

/* Both chips occupy the same cell so the row does not reflow on the swap. */
.ed--js .ed-ledger__row {
    grid-template-columns: minmax(0, 1fr) auto;
}

.ed--js .ed-ledger__claim,
.ed--js .ed-ledger__truth {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
}

/* ---- 4. The turn ----------------------------------------------------- */

.ed-turn { padding-top: 0; }

.ed-turn__figure {
    margin: 0 0 clamp(40px, 7vw, 88px);
    line-height: 0;
}

.ed-turn__figure img {
    width: 100%;
    height: clamp(240px, 46vh, 460px);
    object-fit: cover;
    display: block;
}

.ed-turn__copy .ed-body { margin-top: 24px; }
.ed-turn__copy .ed-kicker { margin-top: 26px; }

.ed--js .ed-turn__figure img {
    clip-path: inset(0 0 100% 0);
    transition: clip-path 900ms var(--ed-ease);
}

.ed--js .ed-turn__figure.is-in img { clip-path: inset(0 0 0 0); }

/* ---- 5. The lanes rail ---------------------------------------------- */

.ed-lanes { padding-left: 0; padding-right: 0; }

.ed-rail {
    display: flex;
    gap: clamp(18px, 2.4vw, 30px);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding: 4px var(--ed-gutter) 26px;
    /* Snap positions ignore the scrollport's padding, so without this the
       first item snaps flush to the edge and loses the gutter. */
    scroll-padding-left: var(--ed-gutter);
    scrollbar-color: var(--ed-line) transparent;
    overscroll-behavior-x: contain;
}

.ed-rail > * {
    flex: 0 0 auto;
    scroll-snap-align: start;
    width: min(21rem, 78vw);
}

.ed-rail__intro,
.ed-rail__outro {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: min(19rem, 74vw);
}

.ed-rail__intro .ed-body { margin: 18px 0 0; }
.ed-rail__outro .ed-body { margin-bottom: 14px; }

.ed-card {
    background: var(--ed-surface);
    border: 1px solid var(--ed-line);
    border-radius: var(--ed-radius);
    padding: 26px 24px 28px;
}

.ed-card .ed-body { margin: 0; font-size: 0.96rem; }

/* ---- 6. Trust -------------------------------------------------------- */

.ed-trust__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap: clamp(32px, 5vw, 72px);
    align-items: start;
}

/* The copy column is much taller than the image, so the image holds while
   the argument runs past it rather than floating in the middle of a gap. */
.ed-trust__figure {
    margin: 0;
    line-height: 0;
    border-radius: var(--ed-radius);
    overflow: hidden;
    position: sticky;
    top: max(var(--site-header-h) + 16px, clamp(24px, 16vh, 140px));
}

.ed-trust__figure img {
    width: 100%;
    height: auto;
    display: block;
}

.ed-trust__copy .ed-body:first-of-type { margin-top: 24px; }

/* ---- 7. Close -------------------------------------------------------- */

.ed-cta__panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(24px, 4vw, 56px);
    align-items: start;
    margin: clamp(32px, 5vw, 56px) 0 clamp(48px, 7vw, 80px);
    padding: clamp(26px, 3.4vw, 40px);
    background: var(--ed-surface);
    border: 1px solid var(--ed-line);
    border-radius: var(--ed-radius);
}

.ed-price {
    font-family: var(--font-display);
    font-size: clamp(1.9rem, 3.4vw, 2.6rem);
    font-weight: 600;
    margin: 0;
    font-variant-numeric: tabular-nums;
}

.ed-price-alt {
    margin: 4px 0 16px;
    color: var(--ed-ink-soft);
}

.ed-cta__panel .ed-body { font-size: 0.92rem; }

.ed-cta__links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
    gap: clamp(24px, 4vw, 56px);
    padding-bottom: clamp(32px, 5vw, 56px);
}

.ed-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ed-list li {
    padding: 9px 0;
    border-top: 1px solid var(--ed-line);
    font-size: 0.97rem;
}

/* An article that is written but not yet published. The tag has to read as a
   state and not as a second link, so it is the only uppercase text on the
   page and it never carries the accent colour a link does. */
.ed-tag {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    border: 1px solid var(--ed-line);
    border-radius: var(--radius-pill, 999px);
    color: var(--ed-ink-soft);
    font-size: 0.72rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    white-space: nowrap;
    vertical-align: 1px;
}

/* ---- "Watch the explainer" ------------------------------------------
   A second row under each article title, quieter than the title itself: the
   article is the thing being offered and the video is the alternative route
   into it. It is an anchor, not a button, because with the script off it is
   still a working link to the file, so it gets the accent colour a link gets
   and a triangle to say what kind of link it is. Nothing here loads until it
   is clicked. */

.ed-watch {
    /* A flex container is block-level, so the row starts under the title
       instead of trailing it; fit-content keeps the target the width of the
       words rather than the width of the column. */
    display: flex;
    width: fit-content;
    align-items: center;
    gap: 7px;
    /* Padding rather than margin: it is the tap target on a phone, where the
       label alone is only about 20px tall. */
    margin-top: 1px;
    padding: 5px 0;
    color: var(--ed-ink-soft);
    font-size: 0.86rem;
    text-decoration: none;
    cursor: pointer;
}

.ed-watch::before {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 4.5px 0 4.5px 7px;
    border-color: transparent transparent transparent var(--ed-accent);
    transition: transform 220ms var(--ed-ease);
}

.ed-watch:hover,
.ed-watch:focus-visible { color: var(--ed-ink); }
.ed-watch:hover::before { transform: translateX(2px); }

/* Open: the triangle turns down, so a reader who scrolled past the player
   can still tell which row opened it. */
.ed-watch[aria-expanded="true"]::before { transform: rotate(90deg); }
.ed-watch[aria-expanded="true"]:hover::before { transform: rotate(90deg); }

/* The injected player is styled once, in style.css, since both pages that
   carry the affordance load it. Only the frame's own colours are re-stated
   here, in this page's tokens rather than the site palette. */
.ed .explainer-frame {
    max-width: none;
    margin: 12px 0 4px;
    border-color: var(--ed-line);
    border-radius: var(--ed-radius);
}

/* The subscribe form and flash come from the shared partials; give them the
   page's ground rather than the site stylesheet's. */
.ed-cta__action form { margin: 0; }

.ed-cta__action button[type="submit"],
.ed-cta__action button[type="button"] {
    font-size: 0.97rem;
    padding: 13px 22px;
    border-radius: var(--radius-pill);
    cursor: pointer;
}

.ed-cta__action .billing-interval {
    border: 1px solid var(--ed-line);
    border-radius: 10px;
}

.ed-cta__action .plan-trial-note {
    color: var(--ed-ink-soft);
    font-size: 0.9rem;
}

/* ---- Entrances (JS-gated, once, on entry) --------------------------- */

.ed--js [data-ed-in] {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 620ms var(--ed-ease), transform 620ms var(--ed-ease);
}

.ed--js [data-ed-in].is-in {
    opacity: 1;
    transform: none;
}

/* ---- Responsive ------------------------------------------------------ */

@media (max-width: 900px) {
    .ed-split,
    .ed-trust__grid,
    .ed-cta__panel {
        grid-template-columns: minmax(0, 1fr);
    }

    .ed-split__aside,
    .ed-trust__figure { position: static; }

    .ed-hero {
        min-height: auto;
        padding-top: clamp(90px, 26vh, 180px);
    }

    /* The desktop floor on the display ramp wraps a hero headline to six
       lines on a phone; step it down a rung and give it more measure. */
    .ed-hero .ed-display--xl {
        font-size: clamp(1.85rem, 8vw, 2.5rem);
        max-width: 20ch;
    }

    .ed-ledger__row {
        grid-template-columns: minmax(0, 1fr);
    }

    .ed-ledger__claim,
    .ed-ledger__truth { white-space: normal; }

    .ed--js .ed-ledger__claim,
    .ed--js .ed-ledger__truth {
        grid-column: 1;
        grid-row: 2;
        justify-self: start;
    }
}

/* ---- Reduced motion: fewer and gentler, not zero. The opacity that
       carries comprehension stays; every position change goes. ---------- */

@media (prefers-reduced-motion: reduce) {
    .ed--js [data-ed-in],
    .ed--js .ed-ledger__claim,
    .ed--js .ed-ledger__truth {
        transform: none !important;
    }

    .ed--js .ed-turn__figure img {
        clip-path: none !important;
        transition: none;
    }

    .ed * {
        animation-duration: 0.01ms !important;
        transition-duration: 120ms !important;
    }
}