/* Shared composition for editorial feature pages. Uses public site and app tokens. */
.feature-editorial .intro {
    max-width:900px;
    padding:12px 0 0;
}
.feature-editorial h1 {
    font-size:clamp(34px,4vw,52px);
    line-height:1.08;
    letter-spacing:-.05em;
    margin-top:8px;
}
.feature-editorial .intro .lead {
    max-width:760px;
    margin-top:10px;
    font-size:var(--fs-body);
}
.feature-editorial .feature-nav {
    display:flex;
    flex-wrap:wrap;
    gap:12px 24px;
    margin-top:20px;
    padding-block:16px;
    border-block:1px solid var(--line);
    font-size:var(--fs-sm);
}
.feature-editorial .retainer-focus {
    position:relative;
    aspect-ratio:1040 / 340;
    overflow:hidden;
}
.feature-editorial .retainer-focus-scroll {
    overflow-x:auto;
}
.feature-editorial .screen-focus {
    position:relative;
    aspect-ratio:var(--screen-ratio);
    overflow:hidden;
}
.feature-editorial :is(.screen-focus, .retainer-focus) > .site-image-link {
    position:absolute;
    inset:0;
}
.feature-editorial :is(.screen-focus, .retainer-focus) > .site-image-link:focus-visible {
    outline-offset:calc(-1 * var(--space-1));
}
.feature-editorial figure .screen-focus img {
    position:absolute;
    width:var(--screen-width);
    max-width:none;
    left:var(--screen-left);
    top:var(--screen-top);
}
/* Frame the existing capture around the complete retainer header, ledger and terms. */
.feature-editorial .retainer-focus img {
    position:absolute;
    width:137.0193%;
    max-width:none;
    left:-27.1154%;
    top:-168.8235%;
}
.feature-editorial .product-stage {
    background:var(--paper);
    margin-top:12px;
    padding:16px;
    border-radius:var(--r-xl);
}
.feature-editorial .stage-label {
    display:flex;
    justify-content:space-between;
    gap:16px;
    max-width:960px;
    margin:0 auto 16px;
    font-size:var(--fs-xs);
    color:var(--caption);
}
.feature-editorial figure {
    margin:0;
}
.feature-editorial .evidence-screen {
    max-width:800px;
    margin:24px auto;
    overflow:hidden;
    border:1px solid var(--line);
    border-radius:var(--r-xl);
    background:var(--paper);
}
.feature-editorial .evidence-screen--wide {
    max-width:960px;
}
.feature-editorial .evidence-screen--project {
    max-width:905px;
}
.feature-editorial .evidence {
    max-width:min(960px,var(--capture-width,960px));
    margin-inline:auto;
    border-radius:var(--r-xl);
    box-shadow:var(--shadow-pop);
    overflow:hidden;
}
.feature-editorial img {
    display:block;
    width:100%;
    height:auto;
    max-width:100%;
    object-fit:contain;
}
.feature-editorial figcaption {
    padding:12px 16px;
    background:var(--bg-panel);
    font-size:var(--fs-xs);
    color:var(--caption);
}
.feature-editorial .sequence {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:32px;
    margin:32px 0 0;
    padding:0;
    list-style:none;
}
.feature-editorial .num {
    font-size:var(--fs-xs);
    color:var(--caption);
    letter-spacing:.04em;
}
.feature-editorial .sequence h2 {
    font-size:var(--fs-lg);
    margin-top:12px;
}
.feature-editorial .sequence p:not(.num) {
    margin-top:10px;
    color:var(--text-muted);
    font-size:var(--fs-sm);
    line-height:1.7;
}
.feature-editorial .scene {
    display:grid;
    grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);
    align-items:center;
    gap:48px;
    padding-block:64px;
}
.feature-editorial .scene h2 {
    font-size:clamp(30px,3.4vw,44px);
    letter-spacing:-.04em;
}
.feature-editorial .scene p {
    margin-top:18px;
    color:var(--text-muted);
}
.feature-editorial .scene figure {
    padding:12px;
    background:var(--paper);
    border-radius:var(--r-xl);
}
.feature-editorial .scene img {
    max-width:var(--capture-width,100%);
    margin-inline:auto;
}
.feature-editorial .details {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:48px;
    border-block:1px solid var(--line);
    padding-block:32px;
}
.feature-editorial h3 {
    font-size:var(--fs-md);
    line-height:1.25;
}
.feature-editorial .details p {
    font-size:var(--fs-sm);
    line-height:1.75;
    color:var(--text-muted);
    margin-top:10px;
}
.feature-editorial .related {
    padding-block:48px;
}
.feature-editorial .section-title {
    font-size:clamp(28px,3vw,38px);
    margin-top:10px;
}
.feature-editorial .billing-options {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:48px;
    margin-top:24px;
}
.feature-editorial .billing-option {
    border-top:1px solid var(--line);
    padding-top:24px;
}
.feature-editorial .billing-options--three {
    grid-template-columns:repeat(3,minmax(0,1fr));
}
.feature-editorial .billing-option h3 {
    font-size:28px;
    letter-spacing:-.035em;
}
.feature-editorial .billing-option>p {
    margin-top:16px;
    color:var(--text-muted);
    line-height:1.75;
}
.feature-editorial .agreement-example {
    margin-top:20px;
    padding:20px;
    background:var(--paper);
    border-radius:var(--r-lg);
}
.feature-editorial .agreement-example>span {
    font-size:var(--fs-xs);
    color:var(--caption);
}
.feature-editorial .agreement-example strong {
    display:block;
    font-size:var(--fs-md);
    font-weight:500;
    margin-top:10px;
}
.feature-editorial .agreement-example p {
    font-size:var(--fs-sm);
    color:var(--text-muted);
    margin-top:10px;
}
.feature-editorial .billing-comparison {
    margin-top:24px;
}
.feature-editorial table {
    width:100%;
    border-collapse:collapse;
    table-layout:fixed;
    text-align:left;
    font-size:var(--fs-sm);
}
.feature-editorial tbody tr {
    display:grid;
    grid-template-columns:1fr 1fr;
    column-gap:48px;
    border-top:1px solid var(--line);
    padding-block:14px;
}
.feature-editorial tbody th {
    grid-column:1/-1;
    font-size:var(--fs-xs);
    font-weight:400;
    color:var(--caption);
    padding-bottom:6px;
}
.feature-editorial td {
    color:var(--text-muted);
    line-height:1.65;
}
.feature-editorial .comparison-links {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:48px;
    border-top:1px solid var(--line);
    padding-top:22px;
}
.feature-editorial a {
    text-underline-offset:4px;
}
.feature-editorial .comparison-links a,.feature-editorial .credit-note a,.feature-editorial .guide-link {
    display:inline-flex;
    align-items:center;
    gap:var(--icon-gap-sm);
    white-space:nowrap;
    font-size:var(--fs-sm);
    justify-self:start;
}
.feature-editorial .credit-note {
    font-size:var(--fs-sm);
    line-height:1.8;
    color:var(--text-muted);
    max-width:78ch;
    margin-top:28px;
}
.feature-editorial .handoff-flow {
    margin-top:24px;
    padding:28px;
    background:var(--paper);
    border-radius:var(--r-xl);
}
.feature-editorial .handoff-flow__start {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:var(--icon-gap-md);
}
.feature-editorial .handoff-flow strong {
    display:block;
    font-size:var(--fs-md);
    color:var(--ink);
}
.feature-editorial .handoff-flow span {
    display:block;
    font-size:var(--fs-sm);
    color:var(--text-muted);
}
.feature-editorial .handoff-flow__label {
    margin:20px 0;
    text-align:center;
    font-size:var(--fs-xs);
    color:var(--caption);
}
.feature-editorial .handoff-flow__choices,.feature-editorial .result-screens {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:24px;
}
.feature-editorial .handoff-flow__choices a {
    display:grid;
    justify-items:start;
    gap:8px;
    padding:24px;
    background:var(--bg-panel);
    border:1px solid var(--line);
    border-radius:var(--r-lg);
    text-decoration:none;
}
.feature-editorial .handoff-flow__choices a:hover {
    border-color:var(--field-border);
    box-shadow:var(--shadow-sm);
}
.feature-editorial .result-screens {
    margin-top:28px;
    align-items:start;
}
.feature-editorial .result-screens figure {
    width:100%;
    max-width:632px;
    margin-inline:auto;
    border:1px solid var(--line);
    border-radius:var(--r-xl);
    overflow:hidden;
}
.feature-editorial [id] {
    scroll-margin-top:96px;
}
.feature-editorial .questions {
    max-width:var(--site-max);
    padding-block:48px 72px;
}
.feature-editorial .questions-heading {
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:24px;
    margin-bottom:24px;
}
.feature-editorial .questions .section-title {
    font-size:28px;
    font-weight:500;
    letter-spacing:-.035em;
    margin:0;
}
.feature-editorial .faq {
    max-width:none;
    border-top:0;
}
.feature-editorial .faq summary {
    font-size:var(--fs-body);
    font-weight:500;
    padding:22px 0;
    gap:24px;
}
.feature-editorial .faq details {
    border-bottom:1px solid var(--line);
}
.feature-editorial .faq details:last-child {
    border-bottom:0;
}
.feature-editorial .faq__answer {
    max-width:70ch;
    padding-bottom:24px;
    line-height:1.8;
}
.feature-editorial .guide-link {
    color:var(--caption);
    text-decoration-color:var(--line);
}
.feature-editorial .guide-link:hover {
    color:var(--ink);
    text-decoration-color:var(--gold);
}
@media(max-width:760px) {
    .feature-editorial .retainer-focus {
        width:900px;
    }
    .feature-editorial .intro h1 {
        font-size:36px;
    }
    .feature-editorial .product-stage {
        padding:12px;
    }
    .feature-editorial .stage-label span:last-child {
        display:none;
    }
    .feature-editorial .sequence,.feature-editorial .scene,.feature-editorial .details {
        grid-template-columns:1fr;
        gap:24px;
    }
    .feature-editorial .scene {
        padding-block:40px;
    }
    .feature-editorial .billing-options,.feature-editorial tbody tr,.feature-editorial .comparison-links {
        gap:16px;
    }
    .feature-editorial .billing-options--responsive {
        grid-template-columns:1fr;
    }
    .feature-editorial .handoff-flow__choices,.feature-editorial .result-screens {
        grid-template-columns:1fr;
    }
    .feature-editorial .handoff-flow {
        padding:20px;
    }
    .feature-editorial .billing-option h3 {
        font-size:21px;
    }
    .feature-editorial .billing-option>p,.feature-editorial td {
        font-size:var(--fs-sm);
    }
    .feature-editorial .agreement-example {
        padding:12px;
    }
    .feature-editorial .agreement-example strong {
        font-size:var(--fs-body);
    }
    .feature-editorial .comparison-links a {
        white-space:nowrap;
        font-size:var(--fs-xs);
        gap:var(--icon-gap-sm);
    }
    .feature-editorial .comparison-links {
        grid-template-columns:minmax(0,1fr);
    }
    .feature-editorial .questions {
        padding-block:32px 48px;
    }
    .feature-editorial .questions-heading {
        flex-direction:column;
        gap:12px;
        margin-bottom:12px;
    }
}
.feature-editorial .reminder-invoice-story {
    align-items:start;
}