/* Editorial illustrations; intentionally not replicas of the product UI. */

/* Quarterly planner: full-width fourth step, independent of the visual slides. */
.agencies-spread .capability-sequence[data-step="3"]{grid-template-columns:minmax(0,1fr);gap:26px}
.agencies-spread [data-step="3"] .capability-step:not([data-capability-step="3"]){display:none}
.agencies-spread [data-step="3"] .capability-copy-stack{min-height:0}
.agencies-spread [data-step="3"] h3{text-align:center;max-width:none;margin:0}
.agencies-spread [data-step="3"] .capability-shot:not(.agency-calculator){display:none}
.agencies-spread [data-step="3"] .agency-visuals{min-height:0;max-width:none;justify-self:stretch;width:100%}
.agency-calculator{font-family:var(--font-display)}
.credit-layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:32px;align-items:start}
.credit-rows{border-top:1px solid #ded9ce}
.credit-row{display:grid;grid-template-columns:minmax(0,1fr) 64px 120px 65px;gap:18px;align-items:center;padding:14px 0;border-bottom:1px solid #ded9ce}
.credit-action>strong{font-size:17px;font-weight:600}
.credit-scope{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px;font-size:13px;color:#69645b}
.credit-scope select{font:inherit;color:inherit;border:1px solid #d9d3c8;border-radius:6px;background:transparent;padding:5px 8px;max-width:100%}
.credit-price{display:grid;gap:3px;font-size:14px}.credit-price span{font-size:11px;color:#69645b}
.credit-counter{display:flex;align-items:center;justify-content:space-between;border:1px solid #d9d3c8;border-radius:8px}
.credit-counter button{border:0;background:transparent;color:inherit;font:22px var(--font-display);width:40px;height:42px;cursor:pointer}
.credit-counter button:disabled{opacity:.28;cursor:default}.credit-counter output{font-size:15px}
.credit-subtotal{text-align:right;font-size:14px}
.credit-summary{border:1px solid #ded9ce;border-radius:12px;padding:26px;background:#f1ede4}
.credit-summary>span{font-size:14px}.credit-total{display:flex;align-items:baseline;gap:10px;margin:18px 0}
.credit-total strong{font-size:64px;line-height:1;font-weight:600;letter-spacing:-.05em}.credit-total>span{font-size:18px;color:#69645b}
.credit-summary progress{display:block;width:100%;height:7px;border:0;border-radius:8px;overflow:hidden;background:#dcd6cb;accent-color:#e85a1a}
.credit-summary progress::-webkit-progress-bar{background:#dcd6cb}.credit-summary progress::-webkit-progress-value{background:#e85a1a}
.credit-summary progress::-moz-progress-bar{background:#e85a1a}
.agencies-spread .credit-summary p{font:500 15px/1.5 var(--font-display);margin:14px 0 26px}
.credit-summary button{display:block;width:100%;min-height:44px;border:1px solid #2d2b25;border-radius:8px;background:#2d2b25;color:#fff;font:500 14px var(--font-display);cursor:pointer}
.credit-summary button+button{margin-top:9px;background:transparent;color:#2d2b25;border-color:#d1cabb}
.agency-calculator :is(button,select):focus-visible{outline:2px solid #e85a1a;outline-offset:3px}
.is-over-budget [data-credit-status],.is-over-budget .credit-total strong{color:#a52d12}
.agencies-spread .credit-note{font:400 13px/1.6 var(--font-display);color:#69645b;max-width:90ch;margin:18px 0 0}
@media(max-width:800px){
 .credit-layout{grid-template-columns:1fr;gap:24px}
 .credit-row{grid-template-columns:minmax(0,1fr) 110px;gap:10px;padding:18px 0}
 .credit-action{grid-column:1/-1}.credit-price{display:flex;align-items:baseline;gap:5px}
 .credit-counter{grid-column:2;grid-row:span 2}.credit-subtotal{text-align:left}
 .credit-summary{padding:22px}.credit-total strong{font-size:52px}
}

.agencies-spread .spread-inner{width:100%;max-width:1400px;margin:auto}
.agencies-spread h2{font-size:clamp(40px,5vw,72px);line-height:1.06;letter-spacing:-.045em;text-align:center;width:100%;max-width:none;margin:0 auto 48px}
.agencies-spread .capability-sequence{grid-template-columns:minmax(0,.85fr) minmax(0,1.35fr);gap:clamp(30px,5vw,80px);align-items:center}
.agencies-spread .capability-step h3{font-size:clamp(30px,3.2vw,48px);line-height:1.05;letter-spacing:-.035em}
.agencies-spread .capability-step p{font-size:18px;line-height:1.6;max-width:40ch}
.agencies-spread .agency-visuals{display:grid;aspect-ratio:auto;min-height:420px;padding:0;min-width:0}
.agencies-spread .capability-shot{position:relative;inset:auto;grid-area:1/1;width:100%;margin:0;align-self:center;transform:none;box-shadow:none}
.sequence-ready .agencies-spread .capability-shot{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(12px)}
.sequence-ready .agencies-spread [data-step="0"] .capability-shot:nth-child(1),.sequence-ready .agencies-spread [data-step="1"] .capability-shot:nth-child(2),.sequence-ready .agencies-spread [data-step="2"] .capability-shot:nth-child(3),.sequence-ready .agencies-spread [data-step="3"] .capability-shot:nth-child(4),.sequence-ready .agencies-spread [data-step="3"] [data-capability-step="3"]{opacity:1;visibility:visible;pointer-events:auto;transform:none}
.agency-board{padding:32px;background:#fff;border:1px solid #dfddd5;border-radius:12px;font-family:var(--font-display)}
.agency-board-kicker{font:500 15px/1.4 var(--font-display);margin-bottom:26px;color:#625f57}
.agency-check{display:grid;grid-template-columns:24px 1fr 22px;gap:14px;padding:21px 0;border-top:1px solid #e8e6df}
.agency-check>span{color:#e85a1a;font-size:12px;padding-top:4px}
.agency-check strong{font-size:22px;letter-spacing:-.025em;font-weight:600}
.agency-check p{font:400 15px/1.5 var(--font-display);color:#625f57;margin:8px 0 0;max-width:42ch}
.agency-check>b{color:#e85a1a;font-size:21px}
.agencies-spread figcaption{font:400 11px/1.5 var(--font-display);color:#68645d;margin:20px 0 0}
.agencies-spread .agency-export .screen-zoom{display:block;width:100%;padding:0;background:transparent;box-shadow:none}
.agencies-spread .agency-export img{width:100%;height:auto;object-fit:contain}
.agency-export-note{display:flex;align-items:center;gap:18px;border-top:1px solid #d9d4c9;padding:24px 0;margin-top:20px;font-family:var(--font-display)}
.agency-export-note>span{font-size:36px;color:#e85a1a}.agency-export-note strong{font-size:20px}.agency-export-note p{font:14px/1.5 var(--font-display);margin:7px 0 0;color:#6f665b}
.agency-seats,.agency-scans{display:flex;align-items:baseline;gap:20px;margin:0 0 32px}.agency-seats>strong,.agency-scans>strong{font-size:88px;line-height:1;letter-spacing:-.065em;color:#e85a1a;font-weight:600}.agency-seats>span,.agency-scans>span{font-size:17px;max-width:15ch}
.agency-team-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:7px 12px;padding:19px 0;border-top:1px solid #e8e6df}.agency-team-row>strong{font-size:19px}.agency-team-row>span{grid-column:1;font-size:14px;color:#625f57}.agency-team-row>b,.agency-avatars{grid-area:1/2/3/3;color:#e85a1a}.agency-avatars{display:flex}.agency-avatars i{display:grid;place-items:center;width:32px;height:32px;background:#eeeae1;border:2px solid white;border-radius:50%;font:11px var(--font-display);margin-left:-6px;color:#37352f}.agency-avatars i:first-child{background:#fce8dc;color:#a53c09}
.agency-plan-row{display:flex;justify-content:space-between;gap:20px;padding:22px 0;border-top:1px solid #e8e6df;font-size:16px}.agency-plan-row strong{font-weight:500;text-align:right}.agency-topup{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:16px;padding:20px;background:#fff3ea;color:#a43e0e;border-radius:6px;font-size:15px}
@media(max-width:800px){.agencies-spread .capability-sequence{grid-template-columns:1fr;gap:24px}.agencies-spread h2{margin-bottom:22px}.agencies-spread .capability-step p{font-size:16px;max-width:none}.agencies-spread .agency-visuals{min-height:0}.agency-board{padding:22px}.agency-check strong{font-size:19px}.agency-check{padding:15px 0}.agency-seats>strong,.agency-scans>strong{font-size:65px}.agencies-spread .sequence-steps{gap:4px 18px}.agency-export-note strong{font-size:16px}}
@media(prefers-reduced-motion:reduce){.agencies-spread .capability-shot,.agencies-spread .capability-step{transition:none!important;transform:none!important}}
@media print{.agencies-spread .agency-visuals{display:block}.agencies-spread .capability-shot{opacity:1!important;visibility:visible!important;position:relative;break-inside:avoid;margin-bottom:24px}}
/* Step one is a full-width editorial spread, not duplicated copy + diagram. */
.agency-team-video video{display:block;width:100%;height:auto;border:0;border-radius:8px;background:transparent}
@media(min-width:1001px){
 .agencies-spread:has([data-step="2"]) .spread-inner{max-width:1480px}
 .agencies-spread .capability-sequence[data-step="2"]{grid-template-columns:minmax(0,.68fr) minmax(0,1.32fr);gap:40px}
}
.agencies-spread [data-step="0"]{grid-template-columns:minmax(0,1fr)}
.agencies-spread [data-step="0"] .agency-visuals{display:none}
.agencies-spread [data-step="0"] .capability-step:not([data-capability-step="0"]){display:none}
.agencies-spread [data-step]:not([data-step="0"]) .agency-safeguards{display:none}
.agencies-spread .agency-safeguards h3{text-align:center;width:100%;max-width:none;margin:0 auto 40px}
.agency-safeguard-grid{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.agency-safeguard-grid li{grid-column:span 2;grid-row:span 3;display:grid;grid-template-rows:subgrid;row-gap:12px;border:1px solid #e2ded5;border-radius:12px;padding:24px;background:transparent}
.agency-safeguard-grid li:nth-child(n+4){grid-column:span 3}
.agency-safeguard-grid li>span{display:block;color:#e85a1a;font:500 12px/1.4 var(--font-display);margin:0}
.agency-safeguard-grid h4{font:600 clamp(21px,2vw,28px)/1.15 var(--font-display);letter-spacing:-.025em;margin:0;max-width:26ch}
.agencies-spread .agency-safeguard-grid p{font-size:15px;line-height:1.55;max-width:55ch;margin:0}
.agencies-spread .agency-safeguard-grid p strong{font-weight:700;color:var(--article-ink)}
.agencies-spread .sequence-steps{justify-content:center}
@media(max-width:800px){.agencies-spread h2{margin-bottom:32px}.agency-safeguard-grid{grid-template-columns:1fr;gap:16px}.agency-safeguard-grid li,.agency-safeguard-grid li:nth-child(n+4){grid-column:auto;grid-row:auto;grid-template-rows:auto;padding:24px}.agencies-spread .agency-safeguards h3{margin-bottom:24px}.agencies-spread .agency-safeguard-grid p{font-size:16px}}