/* 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-family:var(--font-display);
    font-weight:var(--font-display-weight);
    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 {
    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 video {
    display:block;
    width:100%;
    max-width:100%;
    height:auto;
}
.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 :is(h2, h3) {
    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:not(.spotlight) {
    padding:12px;
    background:var(--paper);
    border-radius:var(--r-xl);
}
.feature-editorial .scene img:not(.spotlight__shot) {
    max-width:var(--capture-width,100%);
    margin-inline:auto;
}
/* the figure first, for a page that alternates its scenes */
.feature-editorial .scene--flip {
    grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);
}
.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 {
    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 [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 {
        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;
}
/* a scene whose screen needs the full width: the words above, the screen beneath */
.feature-editorial .scene--wide {
    grid-template-columns:minmax(0,1fr);
    gap:28px;
}
.feature-editorial .scene--wide > div:first-child {
    max-width:640px;
}
.feature-editorial .feature-spot {
    margin-top:clamp(20px,3vw,32px);
}
/* The product leads: a short introduction, then one readable screen at a time. */
.feature-editorial--focused .intro {
    max-width:900px;
    margin-inline:auto;
    padding-block:var(--space-6) var(--space-3);
    text-align:center;
}
.feature-editorial--focused .intro h1 { font-size:var(--fs-d1); line-height:1.04; text-wrap:balance; }
.feature-editorial--focused .intro .lead { max-width:42ch; margin:var(--space-5) auto 0; font-size:var(--fs-lead); line-height:1.55; text-wrap:balance; }
.feature-editorial--focused .intro .credit-note { margin-inline:auto; font-size:var(--fs-sm); }
.feature-editorial--focused .intro .page-head__cta,
.feature-editorial--focused .feature-nav { justify-content:center; }
.feature-editorial--focused .feature-nav { margin-top:var(--space-6); border-top:0; }
.feature-editorial--focused .spotlight { --spot-pad:clamp(16px,2.5vw,32px); border:1px solid var(--line); border-radius:var(--r-xl); background:var(--paper); }
.feature-editorial--focused .spotlight .spotlight__shot { border-radius:var(--r-md); box-shadow:var(--shadow-card); }
.feature-editorial--focused .related { padding-block:clamp(48px,7vw,88px); }
.feature-editorial--focused .section-title { font-size:var(--fs-d2); line-height:1.08; text-wrap:balance; }
.feature-editorial--focused .credit-note { max-width:66ch; font-size:var(--fs-body); line-height:1.65; }
.feature-editorial--focused .scene--wide > div:first-child { max-width:740px; }
.feature-editorial--focused .feature-spot { margin-top:var(--space-7); }
.feature-editorial--focused .billing-option { padding:var(--space-6); }
.contracts-story .scene { padding-block:clamp(48px,7vw,88px); }
.contracts-story .scene h2 { font-family:var(--font-display); font-weight:var(--font-display-weight); font-size:var(--fs-d2); line-height:1.08; text-wrap:balance; }
.contracts-story .scene > div:first-child > p:not(.kicker) { max-width:56ch; }
.contracts-story .contracts-story__create { grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:var(--space-8); }
.contracts-story__guide { display:flex; align-items:center; justify-content:space-between; gap:var(--space-8); padding-block:var(--space-8); border-block:1px solid var(--line); }
.contracts-story__guide > div { max-width:620px; }
.contracts-story__guide .section-title { font-size:var(--fs-xl); }
.contracts-story__guide p:not(.kicker) { margin-top:var(--space-4); color:var(--text-muted); line-height:1.7; }
.contracts-story__guide > a { flex-shrink:0; }
@media (max-width:760px) {
    .contracts-story .contracts-story__create { grid-template-columns:minmax(0,1fr); }
    .contracts-story__guide { flex-direction:column; align-items:flex-start; }
}
@media (max-width:600px) {
    .feature-editorial--focused .intro { padding-top:var(--space-4); }
    .feature-editorial--focused .feature-nav { gap:var(--space-3) var(--space-5); }
    .feature-editorial--focused .screen-focus--import { aspect-ratio:auto; height:280px; }
    .feature-editorial--focused figure .screen-focus--import img { width:680px; }
}
.feature-editorial .qbo-example__steps {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:var(--space-8);
    margin:var(--space-8) 0 0;
    padding:0;
    list-style:none;
}
.feature-editorial .qbo-example__steps > li {
    border-top:1px solid var(--line);
    padding-top:var(--space-6);
}
.feature-editorial .qbo-example__steps h3 {
    margin-top:var(--space-3);
    font-size:var(--fs-xl);
}
.feature-editorial .qbo-example__steps p {
    margin-top:var(--space-4);
    font-size:var(--fs-sm);
    color:var(--text-muted);
    line-height:1.75;
}
.feature-editorial .qbo-example__lines {
    margin:var(--space-5) 0 0;
}
.feature-editorial .qbo-example__lines > div {
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:var(--space-4);
    padding-block:var(--space-2);
}
.feature-editorial .qbo-example__lines dt {
    min-width:0;
    font-size:var(--fs-sm);
    font-weight:400;
}
.feature-editorial .qbo-example__lines small {
    display:block;
    margin-top:var(--space-1);
    color:var(--caption);
    font-size:var(--fs-xs);
}
.feature-editorial .qbo-example__lines dd {
    flex-shrink:0;
    margin:0;
    font-size:var(--fs-md);
    font-variant-numeric:tabular-nums;
}
.feature-editorial .qbo-example__total {
    border-top:1px solid var(--line);
    margin-top:var(--space-2);
}
.feature-editorial .qbo-example > .guide-link {
    margin-top:var(--space-4);
}
@media(max-width:760px) {
    .feature-editorial .qbo-example__steps {
        grid-template-columns:minmax(0,1fr);
    }
}