/* /whole-stack page (TGWS Priority, whole online stack). Moved out of the page 2026-11-03 and extended with the stack sizer, use cases and motion. */
.stack-examples{margin:14px 0 0;padding:12px 0 0;border-top:1px solid #e4ece9;font-size:13px;line-height:1.6;color:var(--muted)}

/* Hero diagram: how a request moves (labelled, three steps, two systems) */
.stack-map{justify-self:center;width:100%;max-width:440px;background:#fff;border:1px solid #d6dfcf;border-radius:24px;padding:26px 26px 20px;box-shadow:0 30px 70px -40px rgba(23,59,55,.45);position:relative;overflow:hidden}
.stack-map::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:linear-gradient(90deg,#147f78,#a9d6cf 70%,#d3ba77)}
.map-step{display:grid;grid-template-columns:34px 1fr;gap:14px;align-items:start}
.map-step>i{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#147f78;color:#fff;font:600 14px/1 Manrope,Inter,sans-serif;font-style:normal}
.map-step small{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-bottom:4px}
.map-step b{display:block;font:600 17px/1.35 Manrope,Inter,sans-serif;letter-spacing:-.02em;color:var(--ink)}
.map-step span{display:block;font-size:13px;line-height:1.55;color:var(--muted);margin-top:2px}
.map-step .who{display:flex;align-items:center;gap:10px;margin-top:8px}
.map-step .who img{width:30px;height:30px;border-radius:50%;object-fit:cover}
.map-flow{position:relative;height:30px;margin-left:16px;border-left:2px dashed #a9d6cf}
.map-flow::after{content:"";position:absolute;left:-5px;top:0;width:8px;height:8px;border-radius:50%;background:var(--gold);animation:map-dot 2.4s ease-in-out infinite}
@keyframes map-dot{0%{top:-2px;opacity:0}20%{opacity:1}80%{opacity:1}100%{top:24px;opacity:0}}
.map-tools{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:12px}
.map-tools span{display:flex;align-items:center;gap:6px;margin:0;padding:8px 9px;border:1px solid #e1e9e5;border-radius:12px;background:#f7faf8;font-size:12px;line-height:1.2;color:var(--ink)}
.map-tools svg{flex:none;width:16px;height:16px;fill:none;stroke:#147f78;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.map-foot{margin:16px 0 0;padding-top:12px;border-top:1px solid #e4ece9;font-size:12px;line-height:1.6;color:var(--muted)}
/* Four facts under the hero */
.fact-strip{border-bottom:1px solid var(--line);background:#fffdf8}
.fact-strip .wrap{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;padding-block:30px}
.fact-strip div{display:flex;flex-direction:column;gap:4px;min-width:0}
.fact-strip b{font:600 30px/1.1 Manrope,Inter,sans-serif;letter-spacing:-.03em;color:#147f78}
.fact-strip span{font-size:13px;line-height:1.5;color:var(--muted)}
/* Coverage cards with icons, visible without script */
.stack-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.stack-grid article{position:relative;overflow:hidden;padding:24px;border:1px solid #dfe8e4;border-radius:20px;background:#fff;transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s,border-color .45s}
.stack-grid article::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,#147f78,#a9d6cf 70%,#d3ba77)}
.stack-grid article:hover{transform:translateY(-4px);border-color:#9fc9bd;box-shadow:0 24px 50px -26px rgba(20,127,120,.4)}
.stack-grid .cap-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:linear-gradient(135deg,#e8f3ef,#f6efdd);color:#147f78;margin-bottom:16px}
.stack-grid .cap-icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.stack-grid h3{font-size:19px;margin:10px 0 8px}
.stack-grid p{font-size:14px;line-height:1.65}
.film-note{font-size:12px;color:var(--muted);margin-top:16px}
@media(max-width:1000px){.stack-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.fact-strip .wrap{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.map-tools{grid-template-columns:repeat(2,minmax(0,1fr))}.stack-grid{grid-template-columns:1fr}.stack-map{padding:22px 18px 16px}.fact-strip b{font-size:24px}.fact-strip .wrap{gap:18px;padding-block:24px}}
@media(prefers-reduced-motion:reduce){.map-flow::after{animation:none;top:10px}.stack-grid article{transition:none}}
#terms .plain{margin-bottom:18px}
#terms .actions{margin-top:22px;flex-wrap:wrap}
.covered-foot{margin-top:28px;font-size:14px;line-height:1.7;color:var(--muted);max-width:760px}
.no-calls{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:start}
.no-calls .plain{font-family:Manrope,Inter,sans-serif;font-size:clamp(22px,2.2vw,30px);line-height:1.4;letter-spacing:-.03em;color:var(--ink);margin:0}
.no-calls ul{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.no-calls li{display:grid;grid-template-columns:22px 1fr;gap:12px;font-size:15px;line-height:1.65;color:var(--muted)}
.no-calls li::before{content:"";width:10px;height:10px;margin-top:7px;border-radius:50%;background:var(--teal)}
.no-calls li strong{color:var(--ink);font-weight:600}
@media(max-width:900px){.no-calls{grid-template-columns:1fr;gap:28px}}

/* ---- 2026-11-03 pass: spacing, stack sizer, use cases, motion ---- */
/* Coverage cards: same edges, product line pinned to the bottom so rows align */
.stack-grid article{display:flex;flex-direction:column}
.stack-grid article .eyebrow{margin:0}
.stack-grid h3{margin:10px 0 8px}
.stack-grid .stack-examples{margin-top:auto;padding-top:12px}
.stack-grid article>p:not(.stack-examples){margin:0 0 14px}
.covered-foot{margin-top:28px}

/* Hero diagram: the active step lights up in turn */
.map-step>i{transition:background .4s,box-shadow .4s,transform .4s}
.map-step b{transition:color .4s}
.stack-map.is-cycling .map-step>i{background:#9ccfc5}
.stack-map.is-cycling .map-step.is-active>i{background:#147f78;transform:scale(1.08);box-shadow:0 0 0 6px rgba(20,127,120,.14)}
.stack-map.is-cycling .map-step:not(.is-active) b{color:#4d6460}
.map-tools span{transition:background .35s,border-color .35s,transform .35s}
.stack-map.is-cycling .map-step.is-active .map-tools span{animation:tool-ping 1.8s ease-out both}
.map-tools span:nth-child(2){animation-delay:.12s!important}.map-tools span:nth-child(3){animation-delay:.24s!important}.map-tools span:nth-child(4){animation-delay:.36s!important}.map-tools span:nth-child(5){animation-delay:.48s!important}.map-tools span:nth-child(6){animation-delay:.6s!important}
@keyframes tool-ping{0%{background:#f7faf8;border-color:#e1e9e5}35%{background:#e3f3ee;border-color:#8fc8bb;transform:translateY(-2px)}100%{background:#f7faf8;border-color:#e1e9e5;transform:none}}

/* Use cases */
.case-filter{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 28px}
.case-filter button{font:600 13px/1 Inter,sans-serif;padding:10px 15px;border-radius:30px;border:1px solid #cfdcd5;background:#fff;color:var(--ink);cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.case-filter button:hover{border-color:#8fc8bb}
.case-filter button[aria-pressed="true"]{background:#147f78;border-color:#147f78;color:#fff}
.case-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.case{display:flex;flex-direction:column;gap:12px;min-width:0;padding:24px;border:1px solid #dfe8e4;border-radius:20px;background:#fff}
.case[hidden]{display:none!important}
.case.is-entering{animation:case-in .45s cubic-bezier(.2,.7,.2,1) both}
@keyframes case-in{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
.case-tag{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;padding:5px 10px 5px 8px;border-radius:20px;background:#eef6f2;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#147f78}
.case-tag svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.case blockquote{margin:0;font:600 19px/1.35 Manrope,Inter,sans-serif;letter-spacing:-.02em;color:var(--ink)}
.case p{margin:0;font-size:14px;line-height:1.65;color:var(--muted)}
.case .case-tools{font-size:12px;color:#7a8a86}
.case-size{margin-top:auto;padding-top:14px;border-top:1px solid #e9efec;display:grid;gap:8px}
.case-size span{font-size:13px;color:var(--muted)}
.case-size b{color:#147f78;font-weight:700}
.case-size i{position:relative;display:block;height:6px;border-radius:6px;background:#edf2ef;overflow:hidden}
.case-size i::before,.case-size i::after{content:"";position:absolute;inset:0 auto 0 0;border-radius:6px;transform-origin:left;transition:transform 1s cubic-bezier(.2,.7,.2,1) .2s}
.case-size i::before{width:calc(var(--hi)*100%);background:#bfe0d8}
.case-size i::after{width:calc(var(--lo)*100%);background:#147f78}

/* How it works sits on paper now: give the steps a light card edge */
#how .steps article{padding-top:22px}

/* Stack sizer */
.sizer{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:28px;align-items:start}
.sizer-controls{display:grid;gap:16px;margin:0}
.sz-step{margin:0;padding:24px;border:1px solid #dfe8e4;border-radius:20px;background:#fff;min-width:0}
.sz-step legend,.sz-tune>label{display:grid;grid-template-columns:30px 1fr;column-gap:12px;align-items:center;float:left;width:100%;margin:0 0 16px;padding:0;font:600 18px/1.3 Manrope,Inter,sans-serif;letter-spacing:-.02em;color:var(--ink)}
.sz-step legend+*,.sz-tune>label+*{clear:both}
.sz-step legend i,.sz-tune>label i{grid-row:span 2;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#147f78;color:#fff;font:600 13px/1 Manrope,Inter,sans-serif;font-style:normal}
.sz-step legend small,.sz-tune>label small{grid-column:2;font:400 13px/1.5 Inter,sans-serif;letter-spacing:0;color:var(--muted)}
.sz-tune>label small{display:inline;margin-left:6px}
.sz-areas{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.sz-chip,.sz-seg label{position:relative;cursor:pointer;min-width:0}
.sz-chip input,.sz-seg input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.sz-chip span{display:flex;flex-direction:column;align-items:flex-start;gap:8px;height:100%;box-sizing:border-box;padding:12px;border:1px solid #dbe5e0;border-radius:14px;background:#f8fbf9;font-size:13px;font-weight:600;line-height:1.3;color:var(--ink);transition:background .2s,border-color .2s,box-shadow .2s,transform .2s}
.sz-chip svg{width:20px;height:20px;fill:none;stroke:#7a9a93;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:stroke .2s}
.sz-chip:hover span{border-color:#9fc9bd}
.sz-chip input:checked+span{background:#e6f4ef;border-color:#147f78;box-shadow:inset 0 0 0 1px #147f78}
.sz-chip input:checked+span svg{stroke:#147f78}
.sz-chip input:focus-visible+span,.sz-seg input:focus-visible+span{outline:2px solid #147f78;outline-offset:2px}
.sz-seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.sz-seg span{display:flex;flex-direction:column;gap:3px;height:100%;box-sizing:border-box;padding:12px 14px;border:1px solid #dbe5e0;border-radius:14px;background:#f8fbf9;font-size:12px;line-height:1.45;color:var(--muted);transition:background .2s,border-color .2s,box-shadow .2s}
.sz-seg b{font:600 15px/1.3 Manrope,Inter,sans-serif;color:var(--ink)}
.sz-seg input:checked+span{background:#e6f4ef;border-color:#147f78;box-shadow:inset 0 0 0 1px #147f78}
.sz-range{display:grid;grid-template-columns:1fr 52px;gap:14px;align-items:center}
.sz-range input{width:100%;accent-color:#147f78}
.sz-range output{font:600 20px/1 Manrope,Inter,sans-serif;color:#147f78;text-align:right;font-variant-numeric:tabular-nums}
.sz-note{margin:8px 0 0;font-size:12px;color:var(--muted)}
.sizer-card{position:sticky;top:90px;padding:28px;border:1px solid #c9dcd3;border-radius:24px;background:radial-gradient(ellipse at top right,#d6eee5,transparent 60%),linear-gradient(150deg,#fffdf8,#eef7f2);box-shadow:0 30px 70px -45px rgba(23,59,55,.5);overflow:hidden}
.sizer-card::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:linear-gradient(90deg,#147f78,#a9d6cf 70%,#d3ba77)}
.sizer-card .eyebrow{margin-bottom:10px}
.sz-price{display:flex;align-items:baseline;gap:8px;margin:0}
.sz-price b{font:600 clamp(44px,5vw,60px)/1 Manrope,Inter,sans-serif;letter-spacing:-.04em;color:#147f78;font-variant-numeric:tabular-nums}
.sz-price span{font-size:15px;color:var(--muted)}
.sz-cap{margin:10px 0 0;font-size:14px;color:var(--muted)}
.sz-cap b{color:var(--ink)}
.sz-adjusted{margin:6px 0 0;font-size:12px;color:var(--gold)}
.sz-month{margin-top:20px;padding-top:18px;border-top:1px solid #d9e6e0}
.sz-month-head{margin:0 0 10px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.sz-month ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.sz-month li{display:flex;justify-content:space-between;gap:14px;font-size:13px;line-height:1.4;color:var(--ink)}
.sz-month li b{flex:none;font-weight:600;color:#147f78;font-variant-numeric:tabular-nums}
.sz-month li.is-new{animation:case-in .4s cubic-bezier(.2,.7,.2,1) both}
.sz-meter{height:8px;margin-top:14px;border-radius:8px;background:#e1ece7;overflow:hidden}
.sz-meter i{display:block;height:100%;width:var(--fill,60%);border-radius:8px;background:linear-gradient(90deg,#147f78,#62c9b8 75%,#d3ba77);transition:width .6s cubic-bezier(.2,.7,.2,1)}
.sz-left{margin:8px 0 0;font-size:12px;color:var(--muted)}
.sz-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.sz-actions .button{flex:1 1 auto;justify-content:center}
.sz-actions .button.secondary{background:#fff}
.sz-fine{margin:14px 0 0;font-size:12px;line-height:1.6;color:var(--muted)}
.sz-terms{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.sz-terms li{display:flex;flex-direction:column;gap:4px;padding-top:16px;border-top:2px solid #147f78;font-size:14px;line-height:1.6;color:var(--muted)}
.sz-terms b{font:600 16px/1.35 Manrope,Inter,sans-serif;color:var(--ink)}

/* FAQ: heading beside the questions */
.faq-layout{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);gap:60px;align-items:start}
.faq-layout .section-heading{position:sticky;top:100px;margin:0}
.faq-layout .faq{max-width:none}

/* Request: what happens next fills the aside */
.next-steps{list-style:none;counter-reset:n;margin:30px 0 26px;padding:0;display:grid;gap:14px}
.next-steps li{counter-increment:n;display:grid;grid-template-columns:30px 1fr;column-gap:12px;font-size:14px;line-height:1.55;color:var(--muted)}
.next-steps li::before{content:counter(n);grid-row:span 2;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:1px solid #9fc9bd;background:#fff;color:#147f78;font:600 13px/1 Manrope,Inter,sans-serif}
.next-steps b{color:var(--ink);font-weight:600}

/* Scroll reveal: only when script runs and motion is allowed; content is visible otherwise */
.ws-motion [data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.7,.2,1) var(--d,0s),transform .7s cubic-bezier(.2,.7,.2,1) var(--d,0s)}
.ws-motion [data-reveal].is-in{opacity:1;transform:none}
.ws-motion .case-size i::before,.ws-motion .case-size i::after{transform:scaleX(0)}
.ws-motion .is-in .case-size i::before,.ws-motion .is-in .case-size i::after,.ws-motion .case.is-in .case-size i::before,.ws-motion .case.is-in .case-size i::after{transform:scaleX(1)}

@media(max-width:1000px){
  .case-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sizer{grid-template-columns:1fr}
  .sizer-card{position:relative;top:auto}
  .faq-layout{grid-template-columns:1fr;gap:20px}
  .faq-layout .section-heading{position:static}
}
@media(max-width:640px){
  /* Coverage cards: icon beside the heading, tighter padding */
  .stack-grid{gap:12px}
  .stack-grid article{display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:14px;padding:18px}
  .stack-grid .cap-icon{grid-row:span 2;width:40px;height:40px;border-radius:12px;margin:0}
  .stack-grid article .eyebrow{align-self:end}
  .stack-grid h3{margin:4px 0 0;font-size:18px}
  .stack-grid article>p{grid-column:1/-1}
  .stack-grid article>p:not(.stack-examples){margin:10px 0 0}
  .stack-grid .stack-examples{margin-top:10px;padding-top:10px}
  .case-filter{flex-wrap:nowrap;overflow-x:auto;margin-inline:-6%;padding:2px 6% 6px;scrollbar-width:none}
  .case-filter::-webkit-scrollbar{display:none}
  .case-filter button{flex:none}
  .case-grid{grid-template-columns:1fr;gap:12px}
  .case{padding:20px}
  .case blockquote{font-size:18px}
  .sz-step{padding:18px}
  .sz-areas{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sz-chip span{flex-direction:row;align-items:center;padding:11px}
  .sz-seg,.sz-seg-3{grid-template-columns:1fr}
  .sz-seg span{flex-direction:row;align-items:baseline;gap:8px;flex-wrap:wrap}
  .sizer-card{padding:22px}
  .sz-actions .button{flex:1 1 100%}
  .sz-terms{grid-template-columns:1fr;gap:14px}
}
@media(prefers-reduced-motion:reduce){
  .stack-map .map-step>i,.map-tools span,.sz-meter i,.case-size i::before,.case-size i::after{transition:none;animation:none}
  .case.is-entering,.sz-month li.is-new{animation:none}
}
/* Film heading: the line sits under the heading instead of floating at the far right */
#film .film-heading{display:block}
#film .film-heading p{max-width:560px;margin:18px 0 0;font-size:15px}
/* Phones: first six examples, then a button for the rest */
.case-more{display:block;margin:16px auto 0;font:600 14px/1 Inter,sans-serif;padding:14px 22px;border-radius:30px;border:1px solid #9fc9bd;background:#fff;color:#147f78;cursor:pointer}
@media(max-width:640px){.case-grid.is-collapsed .case:nth-child(n+7){display:none}}
@media(min-width:641px){.case-more{display:none!important}}
.sz-tune>label small{display:block;margin:0}
.sz-bar{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:40;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 10px 10px 18px;border:1px solid #c9dcd3;border-radius:18px;background:rgba(255,253,248,.96);backdrop-filter:blur(10px);box-shadow:0 18px 40px -18px rgba(23,59,55,.45);animation:case-in .3s cubic-bezier(.2,.7,.2,1)}
.sz-bar div{display:flex;flex-direction:column;line-height:1.2}
.sz-bar b{font:600 22px/1.1 Manrope,Inter,sans-serif;color:#147f78;font-variant-numeric:tabular-nums}
.sz-bar span{font-size:12px;color:var(--muted)}
@media(min-width:1001px){.sz-bar{display:none!important}}
.sizer-card .eyebrow{scroll-margin-top:110px}