/* Offering pages: one template built from the homepage's parts (build-offerings.mjs, offerings-spec).
   Hero with a live signature card, the proof bar as "At a glance", How it works beside You leave with, one feature,
   compact downloads with live page previews, and the next-step panel. Layout and colour here; sizes come from the
   type tokens in typography.css (--fs-*, --fw-*, --lh-*, --ls-*). Motion: motion.js (.motion-on, .reveal,
   [data-animate].is-visible) below the fold, and motion-boot.js (.intro-offer) above it. */

.offering-page{--section-y:clamp(40px,3.9vw,72px);--sand:#eee4d8;--ivory:#fffaf3;--blush:#f2ddd5;--clay:#e7c2b6;--claret:#812635;--mauve:#87505a;--card-line:#ddcbc0}
.offering-page .wrap{width:min(var(--page-max),90%);margin-inline:auto}
.offering-page em{font-style:normal}
.offering-page [hidden]{display:none!important}
.offering-page main{overflow-x:clip}   /* the phone downloads strip bleeds to the edge; with classic scroll bars, 100vw would scroll the page */
.offering-page button{color:inherit}
.offering-page .button{color:#fff7ed}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.offer-band{padding-block:var(--section-y)}
.band-sand{background:var(--sand)}
.offer-label{margin:0 0 18px;color:var(--label)}
.offer-scope{margin-top:16px;color:var(--muted)}

/* ---- 1. Hero: what it is, in one screen ---- */
.offer-hero{display:grid;gap:32px;padding-block:clamp(28px,3.2vw,56px) clamp(36px,3.8vw,64px)}
.offer-intro{min-width:0;container-type:inline-size}
.offer-eyebrow{display:flex;align-items:center;gap:12px;margin:0 0 clamp(18px,1.7vw,28px);color:var(--label)}
.offer-mark{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:10px;background:var(--blush);color:var(--claret)}
.offer-hero h1{color:var(--burgundy)}
.offer-hero h1 em{color:var(--claret)}
.offer-lead{max-width:30em;margin-top:clamp(14px,1.3vw,22px);color:var(--muted)}
.offer-actions{display:flex;align-items:center;flex-wrap:wrap;gap:14px 28px;margin-top:clamp(22px,2vw,32px)}
.offer-actions .text-link{color:var(--burgundy);gap:8px}
.offer-download svg{flex:none}
@media(min-width:1024px){
  .offer-hero{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);column-gap:5%;align-items:center}
  .offer-hero.hero-heatmap{grid-template-columns:minmax(0,1fr)}   /* the heatmap needs a wide card: beside the text from 1280 px */
  .offer-hero h1{font-size:min(var(--fs-h1),9cqi)}   /* the page-title size, capped only so the longest line (10.9em) stays on one line */
}
@media(min-width:1280px){.offer-hero.hero-heatmap{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}}

/* ---- Signature card: the homepage journey card's chrome ---- */
.offer-card{position:relative;margin:0;min-width:0;padding:clamp(18px,1.7vw,30px);background:var(--ivory);border:1px solid var(--card-line);border-radius:12px;box-shadow:0 18px 42px #4b111b0c;container-type:inline-size}
@media(max-width:1023px){.offer-card{width:100%;max-width:none}}   /* edges line up with the glance bar and the panels below */
.offer-card .journey-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 clamp(14px,1.3vw,22px);color:var(--label-muted)}
.offer-card .journey-top a{text-transform:none;letter-spacing:0;color:var(--burgundy)}
.journey-sample{flex:none;padding:5px 10px;border-radius:20px;background:#f0e7db;color:var(--muted)}
.band-sand .journey-sample{background:var(--ivory);box-shadow:0 0 0 1px var(--card-line)}
.offer-node{position:relative;z-index:1;display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:50%;background:var(--blush);color:var(--claret)}
.offer-when{display:block;margin-top:2px;color:var(--muted);font-variant-numeric:tabular-nums lining-nums}

/* Heatmap (Business Value Assessment): the homepage capability canvas, sized to its card. Every tile grows to fit its
   name (soft hyphens from the builder break long words), so no name is cut off or hidden at any width: the three areas
   sit side by side in a wide card and stack, four tiles to a row, in a narrow one. */
.offer-board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
.offer-board .jc-domain{display:flex;flex-direction:column;min-width:0;padding:5px;border:1px solid #eadcd0;border-radius:6px;background:#f7efe6}
.offer-board .jc-label{display:block;margin:0 0 6px 1px;font-size:clamp(10.5px,1.2cqi,13px);font-weight:var(--fw-strong);letter-spacing:var(--ls-data-caps);line-height:1.2;text-transform:uppercase;color:#85626b}
.offer-board .jc-mosaic{flex:1;display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:auto;gap:3px}   /* each row as tall as its longest name; spare height is shared */
.offer-board .jc-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0;padding:7px 3px;border:1px solid;border-radius:5px;text-align:center;color:#54202b}
.jc-tile.low,.offer-legend .low{background:#efd0c9;border-color:#dcb9b0}
.jc-tile.mid,.offer-legend .mid{background:#ebdcc2;border-color:#dcc8a4}
.jc-tile.high,.offer-legend .high{background:#dfe3cc;border-color:#c9d0b0}
.offer-board .jc-tile b{font-size:clamp(15px,2.6cqi,24px);font-weight:var(--fw-semibold);line-height:1;letter-spacing:var(--ls-h5);font-variant-numeric:tabular-nums lining-nums}
.offer-board .jc-tile small{max-width:100%;font-size:clamp(10px,2.2cqi - 1px,13px);font-weight:var(--fw-medium);line-height:1.2;color:#764950;hyphens:none;overflow-wrap:anywhere}
/* Soft hyphens (from the builder) only where a tile is too narrow for its longest word; wider tiles never split a word. */
@container (max-width:499px){.offer-board .jc-tile small{hyphens:manual}}
.offer-legend{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;margin-top:clamp(12px,1.2vw,18px);color:var(--muted)}
.offer-legend>span{display:inline-flex;align-items:center;gap:7px}
.offer-legend i{width:11px;height:11px;border:1px solid;border-radius:3px}
/* Phone cards use readable pairs instead of splitting capability names across four narrow tiles. */
@container (max-width:429px){
  .offer-board{grid-template-columns:1fr}
  .offer-board .jc-tile{min-height:66px;padding:8px 6px}
  .offer-board .jc-tile small{font-size:12px;hyphens:none;overflow-wrap:normal}
  .offer-board .jc-mosaic{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Value journey (AI readiness): crawl, walk, run on one rail. */
.offer-journey{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.offer-journey li{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:14px;align-items:start}
.offer-journey li:nth-child(2) .offer-node{background:var(--clay)}
.offer-journey li:nth-child(3) .offer-node{background:var(--claret);color:#fff5eb}
.offer-journey strong{display:inline;color:var(--burgundy);margin-right:8px}
.offer-journey .offer-when{display:inline}
.offer-journey p{margin-top:5px;color:var(--ink)}
.offer-journey li:not(:last-child)::before,.offer-journey li:not(:last-child)::after{content:'';position:absolute;left:21px;top:50px;bottom:-8px;width:2px;background:#e3cfc6;transform-origin:top;--gx:1;--gy:0}
.offer-journey li:not(:last-child)::after{background:var(--claret)}
@container (min-width:430px){
  .offer-journey{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
  .offer-journey li{display:block}
  .offer-journey li>div{margin-top:14px}
  .offer-journey strong{display:block;margin:0}
  .offer-journey .offer-when{display:block}
  .offer-journey li:not(:last-child)::before,.offer-journey li:not(:last-child)::after{left:52px;right:-12px;top:21px;bottom:auto;width:auto;height:2px;transform-origin:left;--gx:0;--gy:1}
}
@container (min-width:760px){.offer-node{width:52px;height:52px}.offer-node svg{width:26px;height:26px}.offer-journey li:not(:last-child)::before,.offer-journey li:not(:last-child)::after{left:62px;top:25px}}

/* Sample day (Day-in-the-life discovery): seven rows on a rail. */
.day-list{list-style:none;margin:0;padding:0;--tw:66px}
.day-list li{position:relative;display:grid;grid-template-columns:var(--tw) minmax(0,1fr);column-gap:30px;padding-block:7px}
.day-list time{text-align:right;color:var(--muted);font-weight:var(--fw-semibold);font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
.day-list li::before{content:'';position:absolute;left:calc(var(--tw) + 10px);top:calc(7px + .78em - 5px);width:10px;height:10px;border-radius:50%;background:var(--ivory);border:2px solid #cfaea3;box-sizing:border-box;z-index:1}
.day-list li:not(:last-child)::after{content:'';position:absolute;left:calc(var(--tw) + 14px);top:calc(7px + .78em + 5px);height:calc(100% - 10px);width:2px;background:#e3cfc6;transform-origin:top;--gx:1;--gy:0}
.day-list .is-key time{color:var(--claret)}
.day-list .is-key span{color:var(--burgundy);font-weight:var(--fw-semibold)}
.day-list .is-key::before{background:var(--claret);border-color:var(--claret)}
/* A wide card reads the agenda one step larger. */
@container (min-width:640px){.day-list{--tw:84px}.day-list li{padding-block:9px}}

/* ---- 2. At a glance: the homepage proof bar ---- */
.offer-glance{padding-block:26px}
.offer-glance .proof-copy>span{color:var(--muted)}

/* ---- 3. How it works + You leave with ---- */
.offer-work{display:grid;gap:40px}
.offer-steps{list-style:none;margin:0;padding:0;display:grid;gap:24px;--gap:28px}
.offer-steps[data-count="3"]{--n:3}.offer-steps[data-count="4"]{--n:4}
.offer-steps>li{position:relative;display:grid;grid-template-columns:42px minmax(0,1fr);column-gap:16px;align-items:start}
.offer-steps>li>:not(.step-number){grid-column:2}
.offer-steps .step-number{grid-row:1/span 2;width:42px;height:42px;border:1px solid #cdaaa1;background:var(--paper);color:var(--muted)}
.band-sand .offer-steps .step-number{background:var(--sand)}
.offer-steps h3{margin-top:9px;color:var(--burgundy)}
.offer-steps p{margin-top:4px;color:var(--muted)}
.offer-steps>li:not(:last-child)::before,.offer-steps>li:not(:last-child)::after{content:'';position:absolute;left:20px;top:48px;bottom:-18px;width:2px;background:#d8beb4;transform-origin:top}
.offer-steps>li:not(:last-child)::after{background:var(--claret);transform:scaleY(0)}
.offer-chips{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.offer-chips li{display:inline-flex;align-items:center;gap:6px;padding:5px 11px 5px 8px;border-radius:100px;background:var(--blush);color:var(--burgundy)}
.offer-chips svg{flex:none;color:var(--claret)}
.offer-leave{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.offer-leave>li{display:grid;grid-template-columns:58px minmax(0,1fr);gap:16px;align-items:center;align-content:start}
.offer-leave .output-art{display:block;width:58px;height:44px;overflow:visible}
.offer-leave h3{color:var(--burgundy)}
.offer-leave p{margin-top:3px;color:var(--muted)}
@media(min-width:600px) and (max-width:1279px){
  .offer-leave{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
  .offer-leave>li{grid-template-columns:1fr;align-items:start;gap:12px}
}
@media(min-width:700px){
  .offer-steps{grid-template-columns:repeat(var(--n),minmax(0,1fr));column-gap:var(--gap)}
  .offer-steps>li{display:block}
  .offer-steps h3{margin-top:16px}
  .offer-steps>li:not(:last-child)::before,.offer-steps>li:not(:last-child)::after{left:50px;right:calc(8px - var(--gap));top:20px;bottom:auto;width:auto;height:2px;transform-origin:left}
  .offer-steps>li:not(:last-child)::after{transform:scaleX(0)}
}
@media(min-width:1280px){
  .offer-work{grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:0}
  .offer-steps-zone{padding-right:clamp(32px,3.2vw,80px)}
  .offer-leave-zone{padding-left:clamp(32px,3.2vw,80px);border-left:1px solid var(--line);container-type:inline-size}
  .offer-steps{--gap:clamp(22px,2vw,44px)}
}
/* Four steps need the full width on laptops: How it works runs across, You leave with sits below it in three columns. */
@media(min-width:1280px) and (max-width:1919px){
  .offer-work[data-steps="4"]{grid-template-columns:minmax(0,1fr);row-gap:clamp(36px,3vw,48px)}
  .offer-work[data-steps="4"] .offer-steps-zone{padding-right:0}
  .offer-work[data-steps="4"] .offer-leave-zone{padding:clamp(32px,2.6vw,44px) 0 0;border-left:0;border-top:1px solid var(--line)}
  .offer-work[data-steps="4"] .offer-leave>li{grid-template-columns:72px minmax(0,1fr);align-items:center;gap:18px}   /* one compact row of three */
  .offer-work[data-steps="4"] .offer-leave .output-art{width:72px;height:52px}
}
@container (min-width:640px){
  .offer-leave{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2vw,36px)}
  .offer-leave>li{grid-template-columns:1fr;align-items:start;gap:14px}
}
@container (min-width:720px){.offer-leave .output-art{width:96px;height:64px}}

/* ---- 4. Features ---- */
.offer-feature-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 40px;margin-bottom:clamp(20px,2vw,32px)}
.offer-feature-head .offer-label{margin-bottom:12px}
.offer-feature-head h2{color:var(--ink)}
.offer-feature-head h2 em{color:var(--mauve)}
.offer-feature-line{max-width:40ch;color:var(--muted)}
/* Before and after (Day-in-the-life discovery). */
.offer-story{display:grid;gap:4px}
.offer-story .offer-feature-head{align-items:center}
.offer-compare{display:grid;gap:12px}
.compare-card{padding:clamp(20px,2vw,30px);border-radius:10px;background:var(--ivory);border:1px solid var(--card-line)}
.compare-card.is-after{background:var(--burgundy);border-color:var(--burgundy);color:#fff5eb}
.compare-label{color:var(--label)}
.is-after .compare-label{color:var(--rose)}
.compare-card h3{margin:8px 0 12px;color:var(--burgundy)}
.is-after h3{color:#fff5eb}
.compare-card ul{list-style:none;margin:0;padding:0}
.compare-card li{display:flex;align-items:flex-start;gap:11px;padding:9px 0;border-top:1px solid var(--line)}
.is-before li::before{content:'';flex:none;width:7px;height:7px;margin:.6em 4px 0 3px;border-radius:1px;background:#d79e9b;transform:rotate(45deg)}
.is-after li{border-color:#ffffff24;color:#f6e3da}
.is-after li svg{flex:none;margin-top:1px;color:var(--rose)}
.compare-arrow{display:grid;place-items:center;width:36px;height:36px;margin:auto;border-radius:50%;background:var(--ivory);border:1px solid var(--card-line);color:var(--claret)}
.compare-arrow svg{transform:rotate(90deg)}
@media(min-width:700px){
  .offer-compare{grid-template-columns:minmax(0,1fr) 36px minmax(0,1fr);align-items:stretch}
  .compare-arrow{align-self:center}
  .compare-arrow svg{transform:none}
}
@media(min-width:1280px){
  .offer-story{grid-template-columns:minmax(0,1fr) minmax(0,2.4fr);column-gap:5%;align-items:center}
  .offer-story .offer-feature-head{display:block;margin:0}
  .offer-story .offer-feature-head .journey-sample{display:inline-block;margin-top:18px}
}

/* ---- 5. Downloads: every page previewed, one row, one thumbnail height ---- */
.offer-docs .offer-label{margin-bottom:16px}
.offer-doc-row{position:relative;display:flex;align-items:flex-start;gap:clamp(22px,2.4vw,44px);--thumb-h:clamp(180px,6.5vw + 125px,300px)}
.doc-card{position:relative;flex:0 1 auto;min-width:0;margin:0;padding:12px;background:var(--ivory);border:1px solid var(--card-line);border-radius:10px}
.doc-pages{list-style:none;margin:0;padding:0;display:flex;gap:10px}
.doc-pages>li{position:relative;flex:0 1 auto;min-width:0}
.doc-pages>li:first-child{z-index:1}
.doc-page{position:relative;display:block;width:fit-content;max-width:100%;border-radius:5px;background:#fff;box-shadow:0 0 0 1px var(--line),0 12px 22px -14px rgba(75,17,27,.45);overflow:hidden}
.doc-page img{display:block;width:auto;height:auto;max-width:100%;max-height:var(--thumb-h)}
.doc-page:focus-visible{outline:2px solid #8d2f41;outline-offset:3px}
.page-no{position:absolute;right:8px;bottom:8px;padding:2px 7px;border-radius:20px;background:#fffaf3e6;color:var(--burgundy);box-shadow:0 0 0 1px var(--line)}
.doc-card figcaption{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;width:0;min-width:100%;margin:12px 2px 0}
/* A row with room to spare (few or narrow pages) sets each caption beside its pages, centred on them. The cards share
   the row, so the shelf always reaches the container's right edge, in line with the panels above and below it. */
@media(min-width:600px){
  .offer-doc-row>.doc-card:last-child{flex-grow:1}
  .docs-side .doc-card{display:flex;flex:1 1 auto;align-items:center;gap:clamp(20px,1.6vw,32px)}
  .docs-side .doc-card figcaption{flex:0 0 auto;flex-direction:column;align-items:flex-start;gap:4px;width:max-content;min-width:0;max-width:11em;margin:0 8px 0 0}
  .docs-side .doc-card figcaption a{margin-top:8px}
  .offer-downloads .offer-doc-row{--thumb-h:clamp(180px,15vw,420px)}   /* tall enough to overfill the row; the cards then shrink evenly to fit it exactly */
  .offer-downloads .docs-side{--thumb-h:clamp(200px,11vw + 60px,420px)}   /* a short shelf shows its pages larger */
}
.doc-card figcaption strong{color:var(--burgundy)}
.doc-card figcaption small{color:var(--muted)}
.doc-card figcaption a{display:inline-flex;align-items:center;gap:6px;color:var(--burgundy)}
.doc-card figcaption a>span:not(.visually-hidden){text-decoration:underline;text-decoration-color:#a8808066;text-underline-offset:4px;text-decoration-thickness:1px}
.doc-card figcaption a:hover>span{text-decoration-color:currentColor}
.doc-card figcaption a:focus-visible{outline:2px solid #8d2f41;outline-offset:3px;border-radius:2px}
@media(max-width:599px){
  .offer-doc-row{overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;margin-inline:calc(50% - 50vw);padding:4px 5vw 14px;scroll-padding-inline:5vw;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
  .doc-card,.doc-pages>li{flex:0 0 auto;scroll-snap-align:start}
  .offer-docs-head{flex:1 1 100%;min-width:0}   /* full width, so the strip's full-bleed margins resolve against the page */
  .doc-page img{max-width:74vw}   /* the next page or document peeks in: the cue to swipe */
  .doc-card[data-shape="portrait"] .doc-page img{max-height:calc(var(--thumb-h) * 1.25)}
  .compare-card li{padding-block:8px}
}

/* ---- 6. Next step + More offerings: the homepage contact panel, inset ---- */
.offer-next{display:grid;gap:30px;margin-block:var(--section-y) calc(var(--section-y) * .8);padding:clamp(28px,2.8vw,48px) clamp(22px,3.2vw,56px);background:var(--clay);border-radius:6px}
.offer-next .offer-label{color:var(--label)}
.offer-next h2{color:var(--ink)}
.offer-next .offer-actions{margin-top:clamp(20px,1.8vw,28px)}
.offer-next .offer-actions .text-link{color:var(--burgundy)}
.offer-lite{margin-top:18px}
.offer-lite li{background:#f6e6de}
.offer-more{min-width:0}
.offer-more .offer-label{margin-bottom:10px}
.offer-more ul{list-style:none;margin:0;padding:0;border-top:1px solid #d9a99f}
.offer-more li{border-bottom:1px solid #d9a99f}
.offer-more li a{display:grid;grid-template-columns:22px minmax(0,1fr);align-items:center;gap:14px;min-height:54px;padding-block:10px;color:var(--burgundy)}
.offer-more .service-icon{display:block;color:var(--claret);transition:color .25s,transform .3s}
.offer-more li a:hover .offer-more-name{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.offer-more li a:hover .service-icon{color:var(--burgundy)}
.offer-more li a:focus-visible{outline-offset:2px}
.offer-all{margin-top:16px;color:var(--burgundy)}
/* After a parchment band the band's own padding is the gap; after sand the panel needs its own. */
.offer-band:not(.band-sand)+.offer-next{margin-top:0}
@media(min-width:900px){.offer-next{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);column-gap:7%;align-items:center}}

/* ---- Type: the typography.css roles, applied to the template's own classes (tokens only) ---- */
.offer-eyebrow,.offer-label,.compare-label{font-size:var(--fs-label);font-weight:var(--fw-strong);line-height:var(--lh-ui);letter-spacing:var(--ls-caps);text-transform:uppercase;font-variant-numeric:tabular-nums}
.offer-lead{font-size:var(--fs-lead);font-weight:var(--fw-regular);line-height:var(--lh-body);letter-spacing:var(--ls-body)}
.offer-steps h3,.compare-card h3,.offer-more-name{font-size:var(--fs-h5);font-weight:var(--fw-medium);line-height:var(--lh-title);letter-spacing:var(--ls-h5)}
.offer-leave h3,.offer-journey strong,.phase-copy strong,.doc-card figcaption strong{font-size:var(--fs-title);font-weight:var(--fw-semibold);line-height:var(--lh-title);letter-spacing:var(--ls-title)}
.offer-steps p,.offer-leave p,.offer-journey p,.day-list li,.compare-card li,.offer-feature-line{font-size:var(--fs-body-sm);font-weight:var(--fw-regular);line-height:var(--lh-sm);letter-spacing:var(--ls-body)}
.offer-when,.offer-scope,.offer-legend,.doc-card figcaption small,.page-no{font-size:var(--fs-caption);line-height:var(--lh-caption);letter-spacing:var(--ls-body)}
.page-no{font-weight:var(--fw-semibold);font-variant-numeric:tabular-nums}
.offer-chips li{font-size:var(--fs-caption);font-weight:var(--fw-strong);line-height:var(--lh-ui);letter-spacing:var(--ls-body)}
.doc-card figcaption a{font-size:var(--fs-ui);font-weight:var(--fw-strong);line-height:var(--lh-ui)}
/* The next-step panel sits one level below the page title. */
.offer-next-main h2{font-size:var(--fs-h3);line-height:var(--lh-heading);letter-spacing:var(--ls-h3)}
.day-list time{font-size:var(--fs-caption)}
@container (min-width:640px){.day-list li{font-size:var(--fs-body)}.day-list time{font-size:var(--fs-body-sm)}}

/* ---- Motion ---- */
@keyframes offer-pop{from{opacity:.4;transform:scale(.85)}}
@keyframes offer-rise{from{opacity:0;transform:translateY(var(--rise,10px))}}
@keyframes offer-grow{from{transform:scale(var(--gx,0),var(--gy,1))}}
@keyframes offer-rate{from{background-color:#f3ebe1;border-color:#e8dccf}}
@keyframes offer-score{from{opacity:0;transform:scale(.6)}}
@keyframes offer-tick{from{background-color:#ede3d8;color:transparent}}
@keyframes offer-dot{from{background-color:#fffaf3;border-color:#cfaea3}}
@keyframes offer-line{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes offer-form{from{opacity:.15;transform:translateY(3px)}}
@keyframes offer-check{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
/* Sequence indexes come from the markup's order, never from inline styles. */
.offer-glance>div:nth-child(2){--g:1}.offer-glance>div:nth-child(3){--g:2}
.offer-board .jc-domain:nth-child(2){--a:1}.offer-board .jc-domain:nth-child(3){--a:2}
.offer-board .jc-tile:nth-child(2){--t:1}.offer-board .jc-tile:nth-child(3){--t:2}.offer-board .jc-tile:nth-child(4){--t:3}.offer-board .jc-tile:nth-child(5){--t:4}.offer-board .jc-tile:nth-child(6){--t:5}.offer-board .jc-tile:nth-child(7){--t:6}.offer-board .jc-tile:nth-child(8){--t:7}
.offer-journey li:nth-child(2){--s:1}.offer-journey li:nth-child(3){--s:2}
.phase-track li:nth-child(2){--o:4}.phase-track li:nth-child(3){--o:7}.phase-track li:nth-child(4){--o:13}
.phase-ticks i:nth-child(2){--k:1}.phase-ticks i:nth-child(3){--k:2}.phase-ticks i:nth-child(4){--k:3}.phase-ticks i:nth-child(5){--k:4}.phase-ticks i:nth-child(6){--k:5}
.day-list li:nth-child(2){--r:1}.day-list li:nth-child(3){--r:2}.day-list li:nth-child(4){--r:3}.day-list li:nth-child(5){--r:4}.day-list li:nth-child(6){--r:5}.day-list li:nth-child(7){--r:6}
.offer-steps>li:nth-child(2){--i:1}.offer-steps>li:nth-child(3){--i:2}.offer-steps>li:nth-child(4){--i:3}
.compare-card li:nth-child(2){--c:1}.compare-card li:nth-child(3){--c:2}.compare-card li:nth-child(4){--c:3}

/* Above the fold, once, on load (html.intro-offer from motion-boot.js). The h1 and lead stay still. */
.intro-offer .offer-mark{animation:offer-pop .4s cubic-bezier(.2,1.4,.3,1) 80ms both}
.intro-offer .offer-hero .offer-actions{--rise:8px;animation:offer-rise .45s cubic-bezier(.22,1,.36,1) 180ms both}
.intro-offer .offer-card{--rise:12px;animation:offer-rise .5s cubic-bezier(.22,1,.36,1) 140ms both}
.intro-offer .offer-glance>div{animation:offer-rise .5s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(250ms + var(--g,0) * 70ms)}
/* Heatmap: tiles are rated in, area by area. */
.intro-offer .offer-board .jc-tile{animation:offer-rate .35s ease-out both;animation-delay:calc((var(--a,0) * 8 + var(--t,0)) * 28ms + 400ms)}
.intro-offer .offer-board .jc-tile>*{animation:offer-score .35s cubic-bezier(.2,1.3,.3,1) both;animation-delay:calc((var(--a,0) * 8 + var(--t,0)) * 28ms + 440ms)}
/* Value journey: each stage lights up as the rail reaches it. */
.intro-offer .offer-journey .offer-node{animation:offer-pop .4s cubic-bezier(.2,1.4,.3,1) both;animation-delay:calc(450ms + var(--s,0) * 300ms)}
.intro-offer .offer-journey li>div{--rise:6px;animation:offer-rise .4s ease-out both;animation-delay:calc(500ms + var(--s,0) * 300ms)}
.intro-offer .offer-journey li::after{animation:offer-grow .3s linear both;animation-delay:calc(600ms + var(--s,0) * 300ms)}
/* Phase track: the fifteen ticks fill in order; each phase icon pops as its first tick fills. */
.intro-offer .phase-ticks i{animation:offer-tick .3s ease-out both;animation-delay:calc((var(--o,0) + var(--k,0)) * 45ms + 400ms)}
.intro-offer .phase-track .offer-node{animation:offer-pop .4s cubic-bezier(.2,1.4,.3,1) both;animation-delay:calc(var(--o,0) * 45ms + 380ms)}
/* Sample day: rows arrive in order, the rail runs down, the last dot lands. */
.intro-offer .day-list li{--rise:6px;animation:offer-rise .4s ease-out both;animation-delay:calc(350ms + var(--r,0) * 60ms)}
.intro-offer .day-list li::after{animation:offer-grow .15s linear both;animation-delay:calc(450ms + var(--r,0) * 150ms)}
.intro-offer .day-list li:last-child::before{animation:offer-dot .3s ease-out 1350ms both}

/* How it works: each badge fills and checks off, then the rail runs to the next ([data-animate] on view). */
.motion-on .offer-steps .step-number{transition:background-color .4s,border-color .4s,color .4s;transition-delay:calc(200ms + var(--i,0) * 350ms)}
.motion-on .offer-steps.is-visible .step-number{background:var(--burgundy);border-color:var(--burgundy);color:var(--paper)}
.motion-on .offer-steps .step-digit{transition-delay:calc(200ms + var(--i,0) * 350ms)}
.motion-on .offer-steps.is-visible .step-digit{opacity:0;transform:scale(.6)}
.motion-on .offer-steps .step-check{transition-delay:calc(260ms + var(--i,0) * 350ms)}
.motion-on .offer-steps.is-visible .step-check{opacity:1;transform:scale(1)}
.motion-on .offer-steps .step-check path{transition-delay:calc(360ms + var(--i,0) * 350ms)}
.motion-on .offer-steps.is-visible .step-check path{stroke-dashoffset:0}
.motion-on .offer-steps>li::after{transition:transform .3s linear;transition-delay:calc(450ms + var(--i,0) * 350ms)}
.motion-on .offer-steps.is-visible>li::after{transform:none}
/* You leave with: the drawings draw themselves as each card arrives. */
.motion-on .offer-leave .is-visible .output-draw{stroke-dasharray:100;animation:offer-line .9s ease-out both;animation-delay:calc(var(--reveal-delay,0ms) + 200ms)}
.motion-on .offer-leave .is-visible .output-cells{animation:offer-form .65s ease-out both;animation-delay:calc(var(--reveal-delay,0ms) + 150ms)}
/* Before and after: the After card's checks draw in sequence. */
.motion-on .compare-card.is-after.is-visible svg path{stroke-dasharray:1;animation:offer-check .35s ease-out both;animation-delay:calc(var(--reveal-delay,0ms) + 380ms + var(--c,0) * 120ms)}
/* Downloads: the pages of each PDF fan out from a stack; a page lifts on hover. */
.motion-on .offer-doc-row .doc-pages>li{transition:transform .45s cubic-bezier(.22,1,.36,1)}
.motion-on .offer-doc-row .doc-card+.doc-card .doc-pages>li{transition-delay:80ms}
@media(min-width:600px){   /* phones scroll the strip sideways, so its pages never move under the snap points */
  .motion-on .offer-doc-row:not(.is-visible) .doc-pages>li:first-child{transform:translateY(8px)}
  .motion-on .offer-doc-row:not(.is-visible) .doc-pages>li+li{transform:translateX(-40%) rotate(-2deg)}
}
.motion-on .doc-page{transition:transform .35s,box-shadow .35s}
.motion-on .doc-page:hover{transform:translateY(-4px);box-shadow:0 0 0 1px var(--line),0 16px 26px -14px rgba(75,17,27,.5)}
/* More offerings: the homepage service-icon hover. */
.motion-on .offer-more li a:hover .service-icon{transform:scale(1.09)}
.motion-on .offer-more li a:hover .offer-more-arrow{transform:translateX(3px)}
/* Reduced motion (the device setting or the footer toggle), no JS, or print: the static, complete page. */
.motion-off .offering-page *,.motion-off .offering-page *::before,.motion-off .offering-page *::after{animation:none!important}
@media(prefers-reduced-motion:reduce){.offering-page *,.offering-page *::before,.offering-page *::after{animation:none!important;transition:none!important}}

/* ---- Small screens ---- */
@media(max-width:600px){
  .offer-hero{gap:26px}
  .offer-actions{gap:16px 24px}
  .offer-glance{padding-block:24px}
  .offer-leave>li{grid-template-columns:48px minmax(0,1fr);gap:13px}
  .offer-leave .output-art{width:48px;height:38px}
  .offer-feature-head{margin-bottom:18px}
  .offer-next{margin-inline:auto;width:min(var(--page-max),94%)}
  .offer-more li a{gap:11px;grid-template-columns:22px minmax(0,1fr)}
}
@media print{.offer-doc-row .doc-pages>li{transform:none!important}.reading-progress,.skip-link{display:none!important}}
/* Phones: download cards stack instead of hiding the second one off-screen. */
@media(max-width:600px){.offer-doc-row{flex-direction:column;overflow:visible;margin-inline:0;padding:0;gap:26px;scroll-snap-type:none}.offer-doc-row>.doc-card{width:100%}}

/* Loop animations stay mounted. Visibility and reduced-motion preferences freeze their current frame. */
[data-offering-loop]:not(.is-looping),
[data-offering-loop]:not(.is-looping) *,
[data-offering-loop]:not(.is-looping)::before,
[data-offering-loop]:not(.is-looping)::after,
[data-offering-loop]:not(.is-looping) *::before,
[data-offering-loop]:not(.is-looping) *::after{animation-play-state:paused!important}