/* Visual layer of the offer pages: media heroes, perched agents, live chips, illustrations, comparison, photo bands.
   Everything is visible at rest; motion only adds to it and stops with "Pause animations" or reduced motion. */

/* ---------- agents used on the pages ---------- */
.pg-ag{position:relative;display:inline-block;width:var(--w,64px);aspect-ratio:1.18;flex:none;transform-origin:50% 100%;animation:pgx-breathe 4.6s ease-in-out var(--d,0s) infinite;cursor:pointer;-webkit-tap-highlight-color:transparent}
.pg-ag img{position:absolute;left:50%;bottom:0;width:100%;height:auto;translate:-50% 0;user-select:none;-webkit-user-drag:none;transition:opacity .15s}
.pg-ag .j{opacity:0}
.pg-ag:hover .b,.pg-ag.hop .b,.pg-plan:hover .pg-ag .b,.is-joy .pg-ag .b{opacity:0}
.pg-ag:hover .j,.pg-ag.hop .j,.pg-plan:hover .pg-ag .j,.is-joy .pg-ag .j{opacity:1}
.pg-ag.hop{animation:pgx-hop .75s cubic-bezier(.33,.9,.4,1)}
.pg-ag::after{content:"";position:absolute;left:12%;right:12%;bottom:-6%;height:12%;border-radius:50%;background:radial-gradient(closest-side,rgba(20,20,22,.22),rgba(20,20,22,0));z-index:-1}
@keyframes pgx-breathe{0%,100%{transform:scale(1,1)}50%{transform:scale(1.025,.975)}}
@keyframes pgx-hop{0%{transform:scale(1)}14%{transform:scale(1.12,.86)}42%{transform:translateY(-34%) scale(.94,1.07)}70%{transform:translateY(0) scale(1.08,.92)}86%{transform:scale(.98,1.02)}100%{transform:scale(1)}}
.pg-crew{display:flex;align-items:flex-end;justify-content:center}
.pg-crew .pg-ag{margin:0 calc(var(--w,64px) * -.06)}

/* ---------- hero with media ---------- */
.pg-hero.split{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);gap:clamp(30px,5vw,80px);align-items:center}
.pg-hero.split h1{font-size:clamp(44px,6.2vw,98px)}
.pg-stage{position:relative;padding-top:clamp(40px,5vw,64px)}
.pg-media{position:relative;overflow:hidden;border-radius:clamp(18px,2vw,28px);background:#e9eae6;aspect-ratio:4/3;box-shadow:0 40px 80px -40px rgba(20,22,24,.45)}
.pg-media img,.pg-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.pg-media video{pointer-events:none}
.pg-media video::-webkit-media-controls,.pg-media video::-webkit-media-controls-start-playback-button{display:none!important;-webkit-appearance:none}
.pg-stage .pg-crew{position:absolute;z-index:3;left:0;right:0;top:clamp(40px,5vw,64px);translate:0 -88%}
.pg-stage .pg-crew.right{justify-content:flex-end;padding-right:8%}
.pg-stage .pg-crew.left{justify-content:flex-start;padding-left:8%}
.pg-chip{position:absolute;z-index:4;display:flex;align-items:center;gap:10px;padding:11px 15px;border-radius:16px;background:rgba(255,255,255,.94);box-shadow:0 18px 40px -16px rgba(20,22,24,.45),0 0 0 1px rgba(20,22,24,.05);font-size:13.5px;font-weight:600;color:#141416;white-space:nowrap;animation:pgx-float 6s ease-in-out var(--d,0s) infinite}
.pg-chip small{display:block;font-size:11.5px;font-weight:400;color:#6a6f74}
.pg-chip i{width:10px;height:10px;border-radius:50%;background:var(--c,#64a932);flex:none;box-shadow:0 0 0 4px color-mix(in srgb,var(--c,#64a932) 22%,transparent)}
@keyframes pgx-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* ---------- reveal on scroll (only when JavaScript runs and motion is allowed) ---------- */
html.pgx-reveal [data-reveal]{transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1)}
html.pgx-reveal [data-reveal]:not(.in){opacity:0;transform:translateY(26px)}

/* ---------- photo band with parallax ---------- */
.pg-photo{position:relative;height:clamp(320px,62vh,640px);overflow:hidden;background:#141416}
.pg-photo img{position:absolute;left:0;top:-12%;width:100%;height:124%;object-fit:cover;will-change:transform}
.pg-photo figcaption{position:absolute;left:var(--pg-gut);right:var(--pg-gut);bottom:clamp(22px,4vw,48px);display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px;color:#fff}
.pg-photo figcaption strong{max-width:16ch;font-size:clamp(30px,4.4vw,64px);line-height:1;letter-spacing:-.05em;font-weight:600;text-shadow:0 2px 30px rgba(0,0,0,.35)}
.pg-photo figcaption span{font-size:13px;letter-spacing:.14em;text-transform:uppercase;opacity:.86}
.pg-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 45%,rgba(10,12,14,.55));pointer-events:none}
.pg-photo figcaption{z-index:1}

/* ---------- visual cards ---------- */
.pg-vcards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.pg-vcard{display:flex;flex-direction:column;overflow:hidden;border-radius:22px;background:#fff;border:1px solid var(--pg-line)}
.pg-white .pg-vcard{background:var(--pg-card)}
.pg-vcard .v{position:relative;aspect-ratio:4/3;overflow:hidden;background:#ecebe6}
.pg-vcard .v img,.pg-vcard .v video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pg-vcard .t{padding:22px 24px 26px;display:grid;gap:8px}
.pg-vcard h3{margin:0;font-size:21px;letter-spacing:-.03em;line-height:1.2}
.pg-vcard p{margin:0;font-size:15px;line-height:1.55;color:var(--pg-muted)}
/* opaque white illustration: colors over a white layer over metallic film */
.ill-white{position:absolute;inset:0;background:linear-gradient(135deg,#d7dadd,#f4f5f6 40%,#b7bcc1 70%,#e6e8ea)}
.ill-white b{position:absolute;left:14%;right:14%;height:22%;border-radius:8px;box-shadow:0 10px 18px -10px rgba(0,0,0,.35)}
.ill-white b:nth-child(1){top:20%;background:#fff;transform:translateX(-6%)}
.ill-white b:nth-child(2){top:40%;background:linear-gradient(90deg,#F50C0C,#FAA1DB);transform:translateX(0)}
.ill-white b:nth-child(3){top:60%;background:linear-gradient(90deg,#19AAE3,#64A932);transform:translateX(6%)}
.in .ill-white b,.pg-vcard:hover .ill-white b{animation:pgx-layer 1.2s cubic-bezier(.22,1,.36,1) both}
.ill-white b:nth-child(2){animation-delay:.12s!important}.ill-white b:nth-child(3){animation-delay:.24s!important}
@keyframes pgx-layer{from{opacity:0;translate:0 14px}}
.ill-white em{position:absolute;right:10px;bottom:10px;font:600 11px/1 Inter,system-ui,sans-serif;font-style:normal;color:#4b5052;background:#fff;padding:5px 8px;border-radius:20px}
/* extended gamut illustration */
.ill-gamut{position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(circle at 50% 50%,#fff,#eceee9)}
.ill-gamut svg{width:74%;height:auto;overflow:visible}
.ill-gamut .cmyk{fill:rgba(20,20,22,.06);stroke:#141416;stroke-width:1.5;stroke-dasharray:4 4}
.ill-gamut .ecg{fill:url(#ecg);opacity:.92;transform-origin:50% 50%;transform-box:fill-box}
.in .ill-gamut .ecg{animation:pgx-grow 1.6s cubic-bezier(.22,1,.36,1) both}
@keyframes pgx-grow{from{transform:scale(.6);opacity:.2}}
.ill-gamut text{font:600 11px Inter,system-ui,sans-serif;fill:#141416}

/* ---------- folding carton illustration ---------- */
.pg-carton{position:relative;border-radius:28px;background:#fff;border:1px solid var(--pg-line);padding:clamp(22px,4vw,48px);overflow:hidden}
.pg-carton svg{display:block;width:100%;height:auto;overflow:visible}
.pg-carton .cut{fill:none;stroke:#141416;stroke-width:2.2;stroke-linejoin:round;stroke-dasharray:var(--len);stroke-dashoffset:0}
.pg-carton .fold{fill:none;stroke:#141416;stroke-width:1.4;stroke-dasharray:6 6;opacity:.55}
.pg-carton .panel{opacity:1}
html.pgx-motion .pg-carton:not(.in) .cut{stroke-dashoffset:var(--len)}
html.pgx-motion .pg-carton:not(.in) .panel,html.pgx-motion .pg-carton:not(.in) .fold{opacity:0}
html.pgx-motion .pg-carton .cut{transition:stroke-dashoffset 2.2s cubic-bezier(.65,0,.35,1)}
html.pgx-motion .pg-carton .panel{transition:opacity .7s ease calc(1.6s + var(--i) * .16s)}
html.pgx-motion .pg-carton .fold{transition:opacity .6s ease 1.4s}
.pg-carton .legend{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:22px;font-size:13.5px;color:var(--pg-muted)}
.pg-carton .legend span{display:inline-flex;align-items:center;gap:8px}
.pg-carton .legend i{width:12px;height:12px;border-radius:50%;background:var(--c)}
.pg-carton .pg-crew{position:absolute;right:clamp(16px,4vw,46px);top:clamp(12px,2.6vw,30px)}

/* ---------- before / after comparison ---------- */
.pg-compare{position:relative;overflow:hidden;border-radius:clamp(18px,2vw,28px);aspect-ratio:16/10;background:#141416;box-shadow:0 40px 80px -40px rgba(20,22,24,.45);--pos:50%;touch-action:pan-y}
.pg-compare img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-drag:none}
.pg-compare .after{clip-path:inset(0 0 0 var(--pos))}
.pg-compare .bar{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 18px rgba(0,0,0,.35);pointer-events:none}
.pg-compare .knob{position:absolute;top:50%;left:var(--pos);width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;background:#fff;box-shadow:0 10px 30px -6px rgba(0,0,0,.45);display:grid;place-items:center;pointer-events:none}
.pg-compare .knob::before{content:"‹ ›";font:700 18px/1 Inter,system-ui,sans-serif;color:#141416;letter-spacing:4px}
.pg-compare .tag{position:absolute;top:16px;padding:7px 12px;border-radius:20px;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;pointer-events:none}
.pg-compare .tag.l{left:16px;background:rgba(20,20,22,.78);color:#fff}
.pg-compare .tag.r{right:16px;background:#fff;color:#141416}
.pg-compare input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.pg-compare input:focus-visible~.knob{outline:3px solid #19aae3;outline-offset:3px}
.pg-compare-note{margin:12px 2px 0;font-size:12.5px;color:#6a6f74}

/* ---------- ColorConnect flow ---------- */
.pg-flow{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:8px}
.pg-flow::before{content:"";position:absolute;left:6%;right:6%;top:46px;height:2px;background:repeating-linear-gradient(90deg,#141416 0 8px,transparent 8px 16px);opacity:.25}
.pg-flow .packet{position:absolute;top:40px;left:6%;width:14px;height:14px;border-radius:50%;background:var(--cl-red,#f50c0c);box-shadow:0 0 0 6px rgba(245,12,12,.16);animation:pgx-packet 6s cubic-bezier(.65,0,.35,1) infinite}
@keyframes pgx-packet{0%{left:6%;background:#F50C0C}25%{background:#FAA1DB}50%{background:#19AAE3}75%{background:#FBCB05}92%,100%{left:calc(94% - 14px);background:#64A932}}
.pg-flow li{position:relative;list-style:none;display:flex;flex-direction:column;gap:10px;padding-top:0}
.pg-flow .node{position:relative;z-index:1;width:92px;height:92px;border-radius:26px;background:#fff;border:1px solid var(--pg-line);display:grid;place-items:center;box-shadow:0 14px 30px -18px rgba(20,22,24,.4)}
.pg-flow .node svg{width:44px;height:44px;color:#141416}
.pg-flow h3{margin:8px 0 0;font-size:21px;letter-spacing:-.03em;line-height:1.2}
.pg-flow p{margin:0;font-size:15px;line-height:1.6;color:var(--pg-muted)}
.pg-flow .mono{font-size:12px;color:var(--pg-muted)}
.pg-board{margin-top:clamp(40px,6vw,80px)}

/* ---------- subscription timeline ---------- */
.pg-timeline{position:relative;margin-top:30px;padding:36px 0 8px}
.pg-timeline .track{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:8px}
.pg-timeline .yr{position:relative;height:16px;border-radius:9px;background:repeating-linear-gradient(90deg,#14141633 0 10px,transparent 10px 16px)}
.pg-timeline .yr.one{background:#e9eae6;overflow:hidden}
.pg-timeline .yr.one::after{content:"";position:absolute;inset:0;border-radius:9px;background:linear-gradient(90deg,#19AAE3,#64A932);transform-origin:0 50%}
html.pgx-motion .pg-timeline:not(.in) .yr.one::after{transform:scaleX(0)}
html.pgx-motion .pg-timeline .yr.one::after{transition:transform 1.8s cubic-bezier(.65,0,.35,1)}
.pg-timeline .labels{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:8px;margin-top:12px;font-size:13px;color:var(--pg-muted)}
.pg-timeline .labels b{display:block;color:#141416;font-size:14px}
.pg-timeline .pg-ag{position:absolute;top:-30px;left:calc(40% - 28px)}

/* ---------- browser illustration (access) ---------- */
.pg-browser{position:relative;border-radius:18px;background:#fff;box-shadow:0 40px 80px -40px rgba(20,22,24,.45),0 0 0 1px rgba(20,22,24,.06);overflow:hidden}
.pg-browser .bar{display:flex;align-items:center;gap:8px;padding:12px 16px;background:#f2f3f1;border-bottom:1px solid #e3e5e3}
.pg-browser .bar i{width:11px;height:11px;border-radius:50%;background:#e2e4e2}
.pg-browser .bar i:nth-child(1){background:#ff5f57}.pg-browser .bar i:nth-child(2){background:#febc2e}.pg-browser .bar i:nth-child(3){background:#28c840}
.pg-browser .url{flex:1;margin-left:14px;padding:7px 12px;border-radius:9px;background:#fff;font-size:12.5px;color:#6a6f74;display:flex;align-items:center;gap:8px}
.pg-browser .url svg{width:12px;height:12px}
.pg-browser .body{display:grid;grid-template-columns:170px 1fr;min-height:300px}
.pg-browser .side{padding:18px 14px;background:#141416;display:grid;align-content:start;gap:10px}
.pg-browser .side img{width:110px;height:auto;margin-bottom:10px;filter:brightness(1.6)}
.pg-browser .side span{height:10px;border-radius:5px;background:#ffffff26}
.pg-browser .side span:nth-of-type(2){width:70%}.pg-browser .side span:nth-of-type(3){width:85%}.pg-browser .side span:nth-of-type(4){width:60%}
.pg-browser .main{padding:22px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;align-content:start;background:#f6f7f4}
.pg-browser .tile{height:96px;border-radius:12px;background:#fff;border:1px solid #e6e8e5;position:relative;overflow:hidden}
.pg-browser .tile::after{content:"";position:absolute;left:12px;right:12px;bottom:14px;height:26px;background:linear-gradient(90deg,var(--c) 0 var(--v),#eceee9 var(--v));border-radius:6px;transition:background-size 1s}
.pg-browser .tile b{position:absolute;left:12px;top:12px;width:48%;height:10px;border-radius:5px;background:#dfe2df}
.pg-browser .wide{grid-column:1/-1;height:120px}
.pg-browser .wide::after{background:repeating-linear-gradient(90deg,#64A932 0 10px,transparent 10px 14px);height:40px;opacity:.85}
.pg-browser .pg-ag{position:absolute;right:22px;bottom:16px}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .pg-hero.split{grid-template-columns:1fr}
  .pg-vcards{grid-template-columns:1fr 1fr}
  .pg-flow{grid-template-columns:1fr 1fr;row-gap:34px}
  .pg-flow::before,.pg-flow .packet{display:none}
}
@media (max-width:600px){
  .pg-vcards{grid-template-columns:1fr}
  .pg-flow{grid-template-columns:1fr}
  .pg-chip{font-size:12px;padding:9px 12px}
  .pg-timeline .labels{font-size:11.5px}
  .pg-browser .body{grid-template-columns:1fr}.pg-browser .side{display:none}
  .pg-photo{height:340px}
}
@media (prefers-reduced-motion:reduce){.pg-ag,.pg-chip,.pg-flow .packet{animation:none}}
html[data-motion="paused"] .pg-ag,html[data-motion="paused"] .pg-chip,html[data-motion="paused"] .pg-flow .packet{animation:none!important}

/* pricing stage: the five on a white podium with a grid floor */
.pg-podium{position:relative;aspect-ratio:4/3;border-radius:clamp(18px,2vw,28px);overflow:hidden;background:radial-gradient(ellipse 70% 60% at 50% 40%,#fff 40%,rgba(255,255,255,0) 100%),linear-gradient(rgba(0,0,0,.05) 1px,transparent 1px) 0 0/40px 40px,linear-gradient(90deg,rgba(0,0,0,.05) 1px,transparent 1px) 0 0/40px 40px,#fff;box-shadow:0 40px 80px -40px rgba(20,22,24,.35),0 0 0 1px rgba(20,22,24,.06)}
.pg-podium .pg-crew{position:absolute;left:0;right:0;bottom:22%}
.pg-podium .pg-ag img{-webkit-box-reflect:below -2px linear-gradient(transparent 62%,rgba(255,255,255,.35))}
.pg-plan>.pg-ag{position:absolute;top:-22px;right:22px}
.pg-plan.featured>.pg-ag{right:auto;left:22px}
.pg-plan.featured .pg-badge{right:22px}
.pg-stage .pg-podium .pg-crew{top:auto;bottom:22%;translate:none}
.pg-photo{margin:0}
.pg-board{max-width:920px;margin-left:auto;margin-right:auto}
.pg-browser .side img{filter:none}
.pg-plan.featured>.pg-ag{left:auto;right:22px}
.pg-plan.featured .pg-badge{right:auto;left:22px}
@media (max-width:600px){
  .pg-podium .pg-ag{--w:clamp(48px,16vw,104px)!important}
  .pg-stage:has(.pg-podium) .pg-chip{display:none}
  .pg-hero.split .pg-stage{margin-top:8px}
}

/* ================= flat illustrations (style of the folding carton) ================= */
.ill-defs{position:absolute;width:0;height:0;overflow:hidden}
.ill{position:relative;border-radius:28px;background:#fff;border:1px solid var(--pg-line);padding:clamp(18px,3.2vw,42px);overflow:hidden}
.ill svg{display:block;width:100%;height:auto;overflow:visible}
.ill .ln{stroke:#141416;stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round}
.ill .ln.thin{stroke-width:1.3}
.ill .ln.fold{stroke-width:1.4;stroke-dasharray:6 6;opacity:.5}
.ill .ln.target{stroke:#64A932;stroke-width:2;opacity:.9}
.ill .tx{font-family:Inter,system-ui,-apple-system,sans-serif;letter-spacing:-.01em}
.ill .dash-poly{stroke:#141416;stroke-width:1.6;stroke-dasharray:5 5}
.ill .fan{transform:rotate(var(--a))}
.ill .key{transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(var(--s1))}
.ill .ring-bg{stroke:#eceee9;stroke-width:12}
.ill .ring{stroke:#64A932;stroke-width:12;stroke-linecap:round;stroke-dasharray:440;stroke-dashoffset:220}
.ill .loopline{stroke:url(#ecg);stroke-width:9;stroke-linecap:round;stroke-dasharray:22 14}
.ill .wire{stroke:#141416;stroke-width:2;stroke-dasharray:4 9;stroke-linecap:round;opacity:.65}
.ill .pg-crew{position:absolute;right:clamp(16px,4vw,46px);top:clamp(12px,2.6vw,30px)}
.ill-legend{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:20px;font-size:13.5px;color:var(--pg-muted)}
.ill-legend span{display:inline-flex;align-items:center;gap:8px}
.ill-legend i{width:12px;height:12px;border-radius:50%;background:var(--c)}
/* hero illustration: same card, sized like the media it replaces */
.pg-stage .ill{box-shadow:0 40px 80px -46px rgba(20,22,24,.38)}
/* drawing on arrival */
html.pgx-motion .ill .ln:not(.fold){stroke-dasharray:var(--len);transition:stroke-dashoffset 1.9s cubic-bezier(.65,0,.35,1)}
html.pgx-motion .ill:not(.in) .ln:not(.fold){stroke-dashoffset:var(--len)}
html.pgx-motion .ill .fl,html.pgx-motion .ill .tx,html.pgx-motion .ill .fold,html.pgx-motion .ill .loopline,html.pgx-motion .ill .wire,html.pgx-motion .ill .ring{transition:opacity .6s ease calc(.9s + var(--i,0) * .08s)}
html.pgx-motion .ill:not(.in) .fl,html.pgx-motion .ill:not(.in) .tx,html.pgx-motion .ill:not(.in) .fold,html.pgx-motion .ill:not(.in) .loopline,html.pgx-motion .ill:not(.in) .wire,html.pgx-motion .ill:not(.in) .ring{opacity:0}
html.pgx-motion .ill .fan{transition:transform 1.3s cubic-bezier(.34,1.4,.64,1) 1s}
html.pgx-motion .ill:not(.in) .fan{transform:rotate(0)}
/* living loops once drawn */
.ill.in .swing{animation:ill-swing 5.5s ease-in-out 2s infinite}
@keyframes ill-swing{0%,100%{transform:rotate(var(--r))}50%{transform:rotate(calc(var(--r) * -1))}}
.ill .swing{transform:rotate(var(--r))}
.ill.in .scanner{animation:ill-scan 5s cubic-bezier(.65,0,.35,1) 2s infinite alternate}
@keyframes ill-scan{to{transform:translateX(860px)}}
.ill.in .key{animation:ill-key 2.6s cubic-bezier(.65,0,.35,1) calc(1.6s + var(--i) * .05s) infinite alternate}
@keyframes ill-key{from{transform:scaleY(var(--s0))}to{transform:scaleY(var(--s1))}}
.ill.in .ring{animation:ill-ring 4s cubic-bezier(.65,0,.35,1) 1.4s infinite}
@keyframes ill-ring{0%{stroke-dashoffset:440}55%,100%{stroke-dashoffset:220}}
.ill.in .loopline{animation:ill-dash 1.4s linear infinite}
.ill.in .wire{animation:ill-dash 1.1s linear infinite}
@keyframes ill-dash{to{stroke-dashoffset:-36}}
.ill.in .pulse{animation:ill-pulse 1.8s ease-in-out infinite}
@keyframes ill-pulse{50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.ill .swing,.ill .scanner,.ill .key,.ill .ring,.ill .loopline,.ill .wire,.ill .pulse{animation:none!important}}
html[data-motion="paused"] .ill *{animation-play-state:paused!important}
/* comparison built from two illustrations */
.pg-compare.ill-compare{background:#fff;border:1px solid var(--pg-line)}
.pg-compare.ill-compare .side{position:absolute;inset:0;display:grid;place-items:center;padding:4%;background:#fff}
.pg-compare.ill-compare .side svg{width:100%;height:auto}
.pg-compare.ill-compare .side.after{clip-path:inset(0 0 0 var(--pos));background:#fbfbf8}
.pg-compare.ill-compare .bar{background:#141416;box-shadow:none}
.pg-compare.ill-compare .knob{background:#141416}
.pg-compare.ill-compare .knob::before{color:#fff}
/* illustration bands between sections */
.ill-band .pg-head{margin-bottom:clamp(22px,3vw,36px)}
.ill-band .pg-head .mono{font-size:12px;letter-spacing:.16em;color:var(--pg-muted)}
.ill-band .ill{padding:clamp(18px,3vw,40px) clamp(10px,2vw,30px)}
.pg-vcard .v.ill-v{background:#fff;display:grid;place-items:center;padding:14px;border-bottom:1px solid var(--pg-line)}
.pg-vcard .v.ill-v svg{width:100%;height:auto;max-height:100%}
.pg-vcard.ill{padding:0;border-radius:22px}
.pg-compare.ill{padding:0}
.pg-vcard.ill .t{padding:22px 24px 26px}
.ill .pg-crew{translate:none;left:auto}
@media (max-width:600px){.pg-stage:has(.ill-legend) .pg-chip{display:none}}

/* ================= technology drawings: moving parts ================= */
.ill .spin{transform-box:fill-box;transform-origin:center}
.ill.in .spin{animation:ill-rot 3.2s linear infinite}
@keyframes ill-rot{to{transform:rotate(360deg)}}
.ill .web{stroke:#141416;stroke-width:3;stroke-dasharray:16 8}
.ill.in .web{animation:ill-web 1s linear infinite}
@keyframes ill-web{to{stroke-dashoffset:-24}}
.ill .sheet{opacity:0}
.ill.in .sheet{animation:ill-sheet 4.8s linear var(--d) infinite}
@keyframes ill-sheet{0%{opacity:0;transform:translateX(0)}6%{opacity:1}92%{opacity:1}100%{opacity:0;transform:translateX(420px)}}
.ill .print-mark{opacity:0}
.ill.in .print-mark{animation:ill-mark 2.1s linear var(--d) infinite}
@keyframes ill-mark{0%{opacity:0;transform:translateX(0)}10%{opacity:1}90%{opacity:1}100%{opacity:0;transform:translateX(90px)}}
.ill .keys-line{stroke:url(#ecg);stroke-width:5;stroke-linecap:round;stroke-dasharray:12 9}
.ill.in .keys-line{animation:ill-dash 1.2s linear infinite}
.ill.in .key-sm{animation:ill-keysm 2.4s ease-in-out infinite alternate}
@keyframes ill-keysm{to{transform:translateY(-3px)}}
.ill .lead{opacity:.55}
.ill .drop{opacity:0}
.ill.in .drop{animation:ill-drop 2.6s cubic-bezier(.65,0,.35,1) var(--d) infinite}
@keyframes ill-drop{0%{opacity:0;transform:translateY(-34px)}25%{opacity:1}70%{opacity:1;transform:translateY(22px)}100%{opacity:0;transform:translateY(22px)}}
@media (prefers-reduced-motion:reduce){.ill .spin,.ill .web,.ill .sheet,.ill .print-mark,.ill .keys-line,.ill .key-sm,.ill .drop{animation:none!important}.ill .sheet,.ill .print-mark,.ill .drop{opacity:1}}

/* ================= two processes, one portal ================= */
.proc-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.proc-card{display:flex;flex-direction:column;border-radius:26px;background:#fff;border:1px solid var(--pg-line);overflow:hidden}
.proc-card .ill{border:0;border-radius:0;border-bottom:1px solid var(--pg-line);background:#fbfbf8}
.proc-card .t{padding:26px 30px 30px;display:flex;flex-direction:column;gap:12px;flex:1}
.proc-card .mono{font-size:11.5px;letter-spacing:.14em;color:var(--pg-muted)}
.proc-card h3{margin:0;font-size:clamp(24px,2.2vw,32px);letter-spacing:-.04em;line-height:1.1}
.proc-card .pg-checks li{font-size:15.5px;padding:13px 0 13px 32px}
.proc-card .pg-checks li::before{top:15px;width:16px;height:16px;background-size:12px}
.proc-card .text-link,.proc-card button.text-link{align-self:flex-start;margin-top:auto}
@media (max-width:1000px){.proc-duo{grid-template-columns:1fr}}

/* ================= ColorConnect system map: see sysmap.css ================= */

/* ================= home: audience pictures, process cards ================= */
.aud-rows .aud-pic{width:118px;height:auto;margin-bottom:4px}
.aud-rows .aud-pic svg{width:100%;height:auto;overflow:visible}
.aud-rows .aud-pic .ln{stroke:#141416;stroke-width:2.2;stroke-linejoin:round}
.aud-rows .aud-pic .ln.thin{stroke-width:1.3}
.process-pair .ill.process-ill{border:0;border-radius:3px 3px 0 0;border-bottom:1px solid var(--pg-line);background:#fbfbf8;min-height:0}

/* ================= home: how it fits together (ColorLoop + ColorConnect + system map) ================= */
.fit-map{background:#fff;border-top:1px solid var(--pg-line)}
.fit-head{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,80px);align-items:end;margin:28px 0 clamp(30px,4vw,50px)}
.fit-head h2{margin:0;font-size:clamp(40px,4.8vw,76px);line-height:1;letter-spacing:-.06em;text-wrap:balance}
.fit-head h2 span{color:var(--cl-red,#f50c0c)}
.fit-duo{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fit-duo article{display:flex;flex-direction:column;gap:8px;padding:22px 24px;border-radius:20px;background:#f7f7f4;border:1px solid var(--pg-line)}
.fit-duo article:first-child{border-top:4px solid #19AAE3}.fit-duo article:last-child{border-top:4px solid #64A932}
.fit-duo .mono{font-size:11.5px;letter-spacing:.14em;color:var(--pg-muted)}
.fit-duo strong{font-size:28px;letter-spacing:-.04em;line-height:1.05}
.fit-duo em{font-style:normal;font-size:16px;font-weight:600}
.fit-duo p{margin:0;font-size:14.5px;line-height:1.55;color:var(--pg-muted)}
.fit-duo .text-link{align-self:flex-start;margin-top:auto}
@media (max-width:1000px){.fit-head{grid-template-columns:1fr}}
@media (max-width:600px){.fit-duo{grid-template-columns:1fr}}

/* ================= home: audience posters, same family as OFFSET / FLEXO ================= */
.pg-audiences{background:var(--pg-paper,#f4f3ec)}
.pg-audiences .aud-rows{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:86px;border-top:0}
.aud-rows a.aud-card{display:flex;flex-direction:column;gap:0;padding:0;border:1px solid #bdc8c2;border-radius:6px;background:#fbfaf5;overflow:visible;transition:transform .5s cubic-bezier(.16,1,.3,1),box-shadow .5s}
.aud-rows a.aud-card+a.aud-card{padding-left:0}
.aud-rows a.aud-card:hover{transform:translateY(-6px);box-shadow:8px 14px 0 #14141612}
.aud-poster{position:relative;min-height:400px;border-radius:5px 5px 0 0;padding:24px;container-type:inline-size;overflow:visible}
.aud-poster.print-box:hover{transform:none;box-shadow:none}
.aud-poster .offset-word{font-size:clamp(64px,21cqw,150px);margin:26px 0;white-space:nowrap}
.aud-poster .offset-word>span{margin-left:.18em}
.aud-poster .print-box-top,.aud-poster .print-box-bottom{font-size:10.5px;letter-spacing:.12em}
.aud-pack{background:#f6a6d6}
.aud-upgrade{background:#8fca6c}
.aud-standard{background:#6fc4ea}
.aud-poster::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:1;border-radius:inherit;background-image:radial-gradient(#14141655 .7px,transparent 1px);background-size:4px 4px;opacity:.28;mask-image:linear-gradient(125deg,transparent 20%,black)}
.aud-agent{position:absolute;z-index:3;right:22px;top:0;translate:0 -84%}
.aud-agent .pg-ag::after{display:none}
.aud-card:hover .aud-agent .pg-ag{animation:pgx-hop .75s cubic-bezier(.33,.9,.4,1)}
.aud-card:hover .aud-agent .b{opacity:0}.aud-card:hover .aud-agent .j{opacity:1}
.aud-card:hover .offset-word{text-shadow:3px 2px 0 var(--cl-pink,#faa1db),-3px -2px 0 var(--cl-blue,#19aae3)}
.aud-card:hover .offset-word>span{transform:rotate(90deg)}
.aud-copy{display:flex;flex-direction:column;gap:10px;padding:22px 24px 26px}
.aud-copy .mono{font-size:11.5px;letter-spacing:.14em;color:var(--pg-muted)}
.aud-copy strong{font-size:clamp(19px,1.6vw,23px);line-height:1.25;letter-spacing:-.025em;font-weight:600;color:#141416}
.aud-copy em{font-style:normal;font-size:14px;font-weight:500;color:#141416;border-bottom:1px solid currentColor;width:max-content}
.aud-copy em::after{content:"  →"}
@media (max-width:1000px){.pg-audiences .aud-rows{grid-template-columns:1fr;gap:58px}.aud-poster{min-height:330px}}

/* ================= technical drawings: numbered callouts instead of leader lines ================= */
.ill .mk circle{fill:#141416}
.ill .mk text{fill:#fff;font:700 12px Inter,system-ui,sans-serif}
.ill .tx.halo{paint-order:stroke;stroke:#fbfbf8;stroke-width:6px;stroke-linejoin:round}
.ill-key{display:flex;flex-wrap:wrap;gap:8px 18px;margin:14px 0 0;padding:0;list-style:none;font-size:13px;color:var(--pg-muted)}
.ill-key li{display:inline-flex;align-items:center;gap:8px}
.ill-key b{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#141416;color:#fff;font-size:12px}
@media (max-width:600px){.aud-poster .offset-word{font-size:clamp(64px,24cqw,150px)}}

/* ================= home: two plain shortcuts (packaging, Rutherford customers) ================= */
.pg-audiences.aud-simple{background:#fff;padding-top:clamp(28px,4vw,48px);padding-bottom:clamp(48px,6vw,80px);border-top:0}
.aud-tiles{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.aud-tile{position:relative;display:flex;flex-direction:column;gap:10px;padding:clamp(26px,3vw,40px);padding-right:clamp(110px,12vw,170px);border-radius:24px;background:var(--tint);transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s}
.aud-tile:hover{transform:translateY(-4px);box-shadow:0 22px 40px -26px rgba(20,22,24,.45)}
.aud-tile strong{font-size:clamp(26px,2.6vw,38px);line-height:1.05;letter-spacing:-.045em;color:#141416}
.aud-tile p{margin:0;max-width:420px;font-size:16px;line-height:1.55;color:#3a4038}
.aud-tile em{margin-top:8px;font-style:normal;font-size:15px;font-weight:600;color:#141416;border-bottom:1.5px solid currentColor;width:max-content}
.aud-tile em::after{content:"  →"}
.aud-tile-ag{position:absolute;right:clamp(22px,3vw,40px);bottom:clamp(22px,3vw,34px)}
.aud-tile:hover .aud-tile-ag .pg-ag{animation:pgx-hop .75s cubic-bezier(.33,.9,.4,1)}
.aud-tile:hover .aud-tile-ag .b{opacity:0}.aud-tile:hover .aud-tile-ag .j{opacity:1}
@media (max-width:760px){.aud-tiles{grid-template-columns:1fr}.aud-tile{padding-right:96px}}

/* ================= colored boxes: one tinted group per page, the rest stays white (declutter, 5 Oct 2026) ================= */
:root{--t-blue:#e1f3fb;--t-pink:#fbe3f1;--t-red:#fde3e0;--t-green:#e6f3dc;--t-yellow:#fdf3c4}
/* pricing: the three plans */
.page-pricing .pg-plans .pg-plan:nth-child(1){background:var(--t-blue);border-color:transparent}.page-pricing .pg-plans .pg-plan:nth-child(2){background:var(--t-pink)}.page-pricing .pg-plans .pg-plan:nth-child(3){background:var(--t-yellow);border-color:transparent}
.pg-plan .pg-price{border-top-color:rgba(20,20,22,.14)}
/* packaging: the four moments at the press */
.page-packaging .pg-vcards .pg-vcard:nth-child(1) .t{background:var(--t-pink)}.page-packaging .pg-vcards .pg-vcard:nth-child(2) .t{background:var(--t-blue)}.page-packaging .pg-vcards .pg-vcard:nth-child(3) .t{background:var(--t-yellow)}.page-packaging .pg-vcards .pg-vcard:nth-child(4) .t{background:var(--t-green)}
.pg-vcards .pg-vcard .t{flex:1}
/* Rutherford customers: the switch steps */
.page-rutherford-customers .pg-steps li{padding:22px 22px 24px;border-top:0;border-radius:20px}
.page-rutherford-customers .pg-steps li:nth-child(1){background:var(--t-blue)}.page-rutherford-customers .pg-steps li:nth-child(2){background:var(--t-pink)}.page-rutherford-customers .pg-steps li:nth-child(3){background:var(--t-yellow)}.page-rutherford-customers .pg-steps li:nth-child(4){background:var(--t-green)}
/* ColorConnect: offset and flexo */
.proc-duo .proc-card:nth-child(1) .t{background:var(--t-yellow)}.proc-duo .proc-card:nth-child(2) .t{background:var(--t-blue)}
.proc-card .pg-checks li{border-bottom-color:rgba(20,20,22,.12)}
/* sign in: the access cards */
.page-access .pg-cards article{border-color:transparent}
.page-access .pg-cards article:nth-child(1){background:var(--t-blue)}.page-access .pg-cards article:nth-child(2){background:var(--t-green)}.page-access .pg-cards article:nth-child(3){background:var(--t-yellow)}

/* ================= phone pass (5 Oct 2026, v5) ================= */
/* comparison slider: pages-fx.js drives the split from touch and mouse, so the invisible range input lets them through */
.pg-compare{cursor:ew-resize}
.pg-compare input{pointer-events:none}
/* phones: the two labels sit above the drawing instead of over the monitor */
@media (max-width:600px){
  .pg-compare.ill-compare{aspect-ratio:4/3}
  .pg-compare.ill-compare .side{padding:52px 12px 12px}
  .pg-compare .tag{top:12px;padding:6px 10px}
  .pg-compare .tag.l{left:12px}.pg-compare .tag.r{right:12px}
}
/* landscape phones: the comparison fits under the header */
@media (orientation:landscape) and (max-height:500px){.pg-stage .pg-compare{max-width:calc((100svh - 110px) * 1.6);margin-inline:auto}.pg-compare-note{text-align:center}}
/* small labels at 12px, the card kicker without a lone last word */
.proc-card .mono,.fit-duo .mono{font-size:12px}
.proc-card .mono{text-wrap:balance}
@media (max-width:600px){.pg-timeline .labels{font-size:12px}}
/* feature cards on phones: less empty space around the drawings */
@media (max-width:600px){.pg-vcard .v.ill-v{aspect-ratio:16/11}}
@media (max-width:600px){.pg-vcard .v.ill-v{padding:8px}}

/* ================= v3 (9 Oct 2026): nothing loops by itself =================
   The characters stand still and hop once (hover, click, or when their container plays: pages-v3.js);
   chips, packets and the old drawings stay on their final frame. */
.pg-ag{animation:none}
.pg-ag.hop{animation:pgx-hop .75s cubic-bezier(.33,.9,.4,1)}
.pg-chip,.pg-flow .packet{animation:none}
.ill.in .swing,.ill.in .scanner,.ill.in .key,.ill.in .ring,.ill.in .loopline,.ill.in .wire,.ill.in .pulse,
.ill.in .spin,.ill.in .web,.ill.in .sheet,.ill.in .print-mark,.ill.in .keys-line,.ill.in .key-sm,.ill.in .drop{animation:none}
.ill .sheet,.ill .print-mark,.ill .drop{opacity:1}