/* Service only: left-aligned copy beside/above a readable paper stack. */
/* --sp-reserve: breathing room kept under the pinned paper (clear of mobile
   browser toolbars) now that the dots/arrow row is gone. The controller
   subtracts it when fitting the paper. */
.sp-story{--sp-sheet-height:clamp(380px,calc(100svh - 240px),640px);--sp-page-height:var(--sp-sheet-height);--sp-reserve:32px;position:relative;background:var(--paper)}
.sp-stage{width:min(1080px,calc(100% - 48px));margin:auto;padding:calc(var(--nav-h) + 10px) 0 8px}
.sp-chapters{position:relative;overflow:visible}
.sp-chapter{display:flex;flex-direction:column;align-items:center;gap:24px;margin:0 0 48px;scroll-margin-top:75px}
.sp-copy{width:100%;max-width:760px;text-align:left;position:relative;z-index:12;flex-shrink:0;background:var(--paper)}
.sp-copy h1,.sp-copy h2{font-size:clamp(28px,3.1vw,42px);font-weight:650;letter-spacing:-.04em;line-height:1.1;margin:0 0 8px;max-width:none;text-wrap:balance}
.sp-copy em{font-style:normal;color:var(--teal-ink);margin-inline-start:.12em}
.sp-lede{font-size:16px;line-height:1.45;color:#4e5e67;max-width:760px;margin:0;text-wrap:pretty}
.sp-legacy-anchor{display:block;height:0;scroll-margin-top:75px}
.sp-paper{width:min(460px,100%);min-height:var(--sp-sheet-height);position:relative;flex-shrink:0;background:#fff;color:#163530;box-shadow:0 2px 3px #172e2310,0 16px 36px -20px #172e2340;border:1px solid #d8dfd9;border-radius:1px}
/* The editable HTML cover at every width (2026-09-30, John): the logo is
   centred and set down from the top as on the printed plan; the title and
   the one live action group stay left, centred as a group in the sheet. */
.sp-cover{display:flex;justify-content:center}
.sp-mobile-cover{display:flex;flex-direction:column;width:100%;padding:24px 26px 18px;color:#007d71}
.sp-mobile-cover>img{width:76px;height:76px;object-fit:contain;align-self:center;margin:clamp(12px,4svh,40px) 0 16px;flex-shrink:0}
.sp-mobile-cover p{font-size:13px;line-height:1.6;flex-shrink:0;margin-top:auto}
.sp-mobile-cover b{display:block;font-size:36px;letter-spacing:-.035em;font-weight:650;line-height:1.2;margin-top:4px}
.sp-mobile-cover small{display:block;margin-top:auto;padding-top:12px;font-size:11px;color:#52635b;flex-shrink:0}
.sp-document{display:flex;flex-direction:column;padding:20px 26px 14px}
.sp-letterhead{display:flex;align-items:center;gap:9px;padding-bottom:10px;border-bottom:1px solid #dbe5e0;color:#52635b;font-size:11px;line-height:1.35;flex-shrink:0}
.sp-letterhead img{width:28px;height:28px;object-fit:contain}
.sp-letterhead b{color:#006a60;font-weight:600}
.sp-document-body{padding-top:10px;flex:1;min-height:auto}
.sp-doc-label{font-size:14px;color:#007d71;font-weight:650;margin-bottom:4px}
.sp-document h3{font-size:24px;line-height:1.15;letter-spacing:-.025em;margin-bottom:12px}
.sp-checklist,.sp-support-steps{list-style:none;margin:0;padding:0}
.sp-checklist li{display:flex;gap:10px;border-top:1px solid #e5ebe7;padding:9px 0}
.sp-box{width:14px;height:14px;border:1px solid #559586;flex-shrink:0;margin-top:3px;border-radius:1px}
.sp-checklist b,.sp-support-steps b{display:block;font-size:15px;font-weight:600;line-height:1.35}
.sp-checklist li div>span,.sp-support-steps p{display:block;font-size:14px;color:#485d53;line-height:1.4;margin-top:2px}
.sp-doc-note{font-size:14px;color:#4c6056;line-height:1.4;margin-top:12px}
.sp-page-footer{display:flex;justify-content:space-between;font-size:10px;color:#667b70;border-top:1px solid #e5ebe7;padding-top:8px;margin-top:12px;flex-shrink:0}
.sp-monitor-mark{margin:6px 0 10px}
.sp-monitor-mark svg{width:100%;height:70px;display:block}
.sp-chart-grid{stroke:#e6eee9;stroke-width:1}
.sp-chart-line{stroke:#007d71;stroke-width:2;stroke-linejoin:round}
.sp-monitor-mark circle{stroke:#007d71;stroke-width:1;fill:#ffffffa0}
.sp-monitor-mark>span{font-size:10px;color:#52695c;display:block;margin-top:3px}
.sp-review-list>div{border-top:1px solid #e5ebe7;padding:10px 0;display:grid;grid-template-columns:90px 1fr;gap:9px}
.sp-review-list dt{font-size:15px;font-weight:600;color:#1c4038}
.sp-review-list dd{font-size:14px;line-height:1.4;color:#485d53}
.sp-support-steps li{display:flex;gap:12px;border-top:1px solid #e5ebe7;padding:12px 0}
.sp-support-steps li>span{font-size:18px;color:#007d71;line-height:1.3;font-weight:500;flex:0 0 18px}
/* The customer line always sits under the primary, never beside it
   (2026-09-26, John): label on one line, call link on its own line below. */
.sp-actions{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin:20px auto 0;position:relative;z-index:15;flex-shrink:0}
.sp-actions .btn{font-size:14px;min-height:44px;padding:10px 19px;box-shadow:none;justify-content:center;line-height:1.35;text-align:center}
.sp-actions--desktop{display:none}
.sp-customer-actions{flex:0 0 auto;min-width:0}
.sp-customer-actions>span{font-size:12px;color:var(--mid-on-paper);display:block;white-space:nowrap}
.sp-customer-actions>a{display:flex;width:fit-content;align-items:center;min-height:28px;font-size:13px;font-weight:600;color:var(--teal-ink);text-decoration:underline;text-underline-offset:3px}
/* The actions are real cover content, so they turn with the cover. The group
   is only as wide as its widest child (the button), so the customer lines
   centre on the button, not on the sheet. */
.sp-actions--cover,.sp-actions--desktop{width:fit-content;align-items:center}
.sp-actions--cover{margin:16px 0 22px}
.sp-actions--desktop .sp-customer-actions{display:flex;flex-direction:column;align-items:center;text-align:center}
.sp-actions--cover .btn{flex:0 0 auto;padding:10px 16px;font-size:14px;white-space:nowrap}
.sp-actions--cover .sp-customer-actions{display:flex;flex-direction:column;align-items:center;text-align:center;line-height:1.3}
.sp-actions--cover .sp-customer-actions>span{font-size:11px}
.sp-actions--cover .sp-customer-actions>a{font-size:14px;min-height:28px}
/* Quiet stack: two sheets just visible under the page, still a document. */
.sp-stack{display:none;position:absolute;pointer-events:none;z-index:0}
.sp-stack::before,.sp-stack::after{content:'';position:absolute;inset:0;background:#fdfdfb;border:1px solid #dde3dd;border-radius:1px;transform-origin:50% 75%}
.sp-stack::before{transform:translate(4px,5px) rotate(.4deg);box-shadow:0 6px 14px -12px #183a2830}
.sp-stack::after{transform:translate(-3px,3px) rotate(-.3deg)}
/* Screen-reader-only page status and page-turn instructions. */
.sp-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.sp-story[data-page="2"] .sp-stack::before{visibility:hidden}
.sp-story[data-page="3"] .sp-stack{visibility:hidden}
.sp-scope-note{font-size:12px;color:var(--faint-on-paper);line-height:1.6;margin:18px 0 24px}
.sp-scope-note a{color:var(--teal-ink);text-underline-offset:3px}
/* Real height is measured, never forced by shrinking or clipping text. */
.sp-story.is-enhanced .sp-stage{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;padding-bottom:calc(8px + var(--sp-reserve))}
.sp-story.is-enhanced .sp-chapters{height:var(--sp-chapter-height);flex-shrink:0}
.sp-story.is-enhanced .sp-chapters>.sp-chapter{position:absolute;inset:0;margin:0;visibility:hidden;pointer-events:none}
.sp-story.is-enhanced .sp-copy{height:var(--sp-copy-height)}
.sp-story.is-enhanced .sp-paper{height:var(--sp-paper-height)}
.sp-story.is-enhanced .sp-chapter.is-current,.sp-story.is-enhanced .sp-chapter.is-next{visibility:visible}
.sp-story.is-enhanced .sp-chapter.is-current{pointer-events:auto}
.sp-story.is-enhanced .sp-chapter.is-current>.sp-paper{z-index:2}
.sp-story.is-enhanced .sp-chapter.is-next>.sp-paper{z-index:1}
.sp-story.is-enhanced .sp-chapter.is-turning>.sp-paper{visibility:hidden}
.sp-story.is-enhanced .sp-stack{display:block}
/* Direct page turn: horizontal drags belong to the book, while native
   vertical scrolling and pinch zoom stay with the browser. When the reader
   has zoomed in, horizontal panning is theirs again. */
.sp-story.is-enhanced .sp-chapters{touch-action:pan-y pinch-zoom}
.sp-story.is-enhanced.is-zoomed .sp-chapters{touch-action:auto}
.sp-story.is-enhanced .sp-paper img{-webkit-user-drag:none}
.sp-story.is-dragging .sp-chapters{-webkit-user-select:none;user-select:none;cursor:grabbing}
.sp-chapters:focus{outline:none}
.sp-chapters:focus-visible .sp-chapter.is-current>.sp-paper{outline:2px solid var(--teal-ink);outline-offset:4px}

/* Only the front is clipped to the crease. The back/shadow may leave the sheet. */
.sp-curl{position:absolute;pointer-events:none;z-index:10;overflow:visible;contain:layout style}
.sp-curl[hidden]{display:none}
.sp-curl-field{position:absolute;inset:0}
.sp-curl-surface{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.sp-curl-content{position:absolute;top:0;left:0}
.sp-curl-content>.sp-paper{width:100%;height:100%;min-height:0;box-shadow:none}
@media(max-width:860px){
 .sp-story{--sp-sheet-height:clamp(380px,calc(100svh - 210px),600px)}
 .sp-stage{width:calc(100% - 44px);padding-top:calc(var(--nav-h) + 6px)}
 .sp-chapter{margin-bottom:36px}
 .sp-copy h1,.sp-copy h2{font-size:clamp(26px,7.2vw,34px);max-width:24ch;margin-bottom:5px}
 .sp-copy em{display:block;margin-inline-start:0}
 .sp-lede{font-size:14px;line-height:1.4;max-width:48ch}
 .sp-paper{width:min(420px,100%)}
 .sp-mobile-cover>img{width:62px;height:62px}

 .sp-document{padding:12px 16px 8px}
 .sp-letterhead{display:none}
 .sp-document-body{padding:0}
 .sp-doc-label{font-size:14px;margin-bottom:6px}
 .sp-document h3{display:none}
 .sp-checklist li{padding:6px 0;gap:8px}
 .sp-checklist b,.sp-support-steps b,.sp-review-list dt{font-size:14px}
 .sp-checklist li div>span,.sp-support-steps p{font-size:14px;line-height:1.35;margin-top:1px}
 .sp-doc-note{font-size:14px;line-height:1.35;margin-top:9px}
 .sp-page-footer{margin-top:9px;padding-top:5px}
 .sp-review-list>div{padding:7px 0;grid-template-columns:78px 1fr;gap:8px}
 .sp-support-steps li{padding:8px 0;gap:9px}
 .sp-monitor-mark svg{height:48px}
}
/* Short phones (390x600): recover the cover's whitespace, never its content.
   Logo (62px, top at 28px, still below the old 24px), text and the 44px
   button keep their size; the auto margins still centre the title group. */
@media(max-width:860px) and (max-height:650px){
 .sp-mobile-cover{padding:16px 24px 12px}
 .sp-mobile-cover>img{margin:12px 0 10px}
 .sp-actions--cover{margin:12px 0 14px}
 .sp-mobile-cover small{padding-top:8px}
}
@media(min-width:861px) and (max-width:1023px) and (max-height:760px){
 .sp-story{--sp-sheet-height:340px}
 /* The stacked cover actions are taller; a smaller logo keeps the 340px cover clear. */
 .sp-mobile-cover{padding:18px 24px 14px}
 .sp-mobile-cover>img{width:48px;height:48px;margin:4px 0 10px}
 .sp-copy h1,.sp-copy h2{font-size:32px}
 .sp-lede{font-size:15px}
 .sp-document{padding:12px 22px 10px}
 .sp-letterhead{display:none}
 .sp-document-body{padding:0}
 .sp-document h3{display:none}
 .sp-doc-label{margin-bottom:7px}
 .sp-checklist li{padding:4px 0}
 .sp-support-steps li{padding:8px 0}
 .sp-review-list>div{padding:8px 0}
 .sp-monitor-mark svg{height:40px}
}
/* Desktop from 1024px (2026-09-24, John): the words sit to the left of the
   document, as on the Energy Efficiency and EMS openings (6vw margins, a
   two-line headline with the teal clause on its own line), and the pages
   still turn. --sp-layout tells service-plan.js to fit the paper beside the
   words rather than under them. The static state uses the same two columns,
   so what the controller measures is what it animates. Enhanced, the pinned
   stage is one grid: each copy block includes its actions in the left
   column and the page is in the right.
   The shared hero-spacing rule anchors the story (and so the page) at the
   common top gap; the words and actions then centre on the page beside
   them (2026-09-26, John), in the static layout too. Each chapter's words and page join that grid through a subgrid (the
   chapter itself is display:contents), so every chapter shares one set of
   rows and the four stacked copies and pages sit exactly on top of each
   other, as the absolutely positioned chapters did before. The words drop
   their paper backing here: the turning page sweeps left beside the
   document and passes under the words rather than being cut off by a box. */
@media(min-width:1024px){
 /* The reserve equals the removed dots/arrow row, so the page, the words and
    the real cover keep their exact desktop geometry. */
 .sp-story{--sp-layout:side;--sp-side-gap:clamp(40px,5vw,88px);--sp-reserve:54px}
 .sp-stage{width:calc(100% - 12vw);padding:calc(var(--nav-h) + 20px) 0 12px}
 .sp-chapter{display:grid;grid-template-columns:minmax(0,1fr) minmax(460px,1fr);gap:0 var(--sp-side-gap);align-items:center;margin-bottom:72px}
 .sp-copy{text-align:left;max-width:none;background:none;align-self:center}
 .sp-copy h1,.sp-copy h2{font-size:clamp(36px,3.6vw,56px);margin:0 0 16px;max-width:none}
 .sp-copy em{display:block;margin-inline-start:0}
 .sp-lede{font-size:clamp(17px,1.3vw,20px);line-height:1.6;margin:0;max-width:36ch}
 .sp-paper{width:460px;justify-self:center}
 /* Left beside the words; as wide as its button, so the customer lines
    centre on the button exactly as they do on the cover. */
 .sp-actions--desktop{display:flex;justify-content:flex-start;margin:24px 0 0;width:fit-content}
 /* The cover carries its own actions; the left group returns on later pages. */
 [data-plan-page="0"] .sp-actions--desktop{display:none}
 .sp-actions .btn{white-space:nowrap;flex-shrink:0}
 .sp-scope-note{width:calc(100% - 12vw);max-width:none;margin-inline:auto;padding:0}
 .sp-story.is-enhanced .sp-stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(460px,1fr);grid-template-rows:var(--sp-side-pad,1fr) auto auto var(--sp-side-pad,1fr);align-content:center;column-gap:var(--sp-side-gap);padding-bottom:calc(12px + var(--sp-reserve))}
 .sp-story.is-enhanced .sp-chapters{grid-column:1/-1;grid-row:1/5;height:auto;display:grid;grid-template-columns:subgrid;grid-template-rows:subgrid}
 .sp-story.is-enhanced .sp-chapters>.sp-chapter{display:contents}
 /* Same rows as the page and only as tall as its visible words and actions,
    so both centre on one axis. The controller's copy reserve still decides
    whether the side layout fits; it just no longer top-pins the words. */
 .sp-story.is-enhanced .sp-copy{grid-column:1;grid-row:1/5;align-self:center;height:auto}
 .sp-story.is-enhanced .sp-paper{grid-column:2;grid-row:1/5;align-self:center}
}
/* Short desktops recover part of that reserve so the readable page still
   fits the pinned stage (the page itself is never shrunk or clipped). */
@media(min-width:1024px) and (max-height:700px){.sp-story{--sp-reserve:40px}}
@media(prefers-reduced-motion:reduce){
 .sp-story *{transition-duration:0s!important;animation:none!important}
}
@media print{
 .sp-story{height:auto!important}.sp-stage{position:static!important;height:auto!important}
 .sp-chapters{height:auto!important}.sp-chapters>.sp-chapter{position:relative!important;visibility:visible!important;transform:none!important;break-inside:avoid}
 .sp-copy,.sp-paper{height:auto!important;visibility:visible!important;opacity:1!important}.sp-curl,.sp-stack{display:none!important}
}