/* pricing-lab: the Pricing page prototype (variants A, B, C). Loaded after cc-site.css and out/proto.css.
   Every new class starts with pkg- (grepped 2026-10-15: no pkg- class in cc-site.css, out/proto.css, the shared CSS
   or any built page). Bare tags (h3, ul, li, button, p) get their margins, sizes and colours set here, because the
   live theme and Elementor restyle bare tags. Breakpoints follow the site: 1199.98, 1099.98, 767.98, 599.98. */

.p.pg-pricing{--pkg-card:linear-gradient(180deg,rgba(var(--cc-fg, 255, 255, 255),.045),rgba(var(--cc-fg, 255, 255, 255),.012) 46%),var(--cc-d-0b1513, #0B1513)}
.pkg-embed .p-note{display:none}

/* ------------------------------------------------ section head + currency switch */
.p .pkg-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px 40px;flex-wrap:wrap}
/* the text column has a set basis: its width must not follow the heading's own width, which changes when the word-by-word
   reveal (SplitText) ends; at 1100 px that pushed the currency switch onto a new line, 70 px taller, under every pin below */
.p .pkg-head>div:first-child{flex:1 1 460px;max-width:720px}
.p .pkg-head .pkg-cur{flex:none}
.p .pkg-hs .hs-head>div:first-child{flex:1 1 460px;max-width:820px}
.p .pkg-cur{display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px 12px;max-width:340px;font-size:13px;color:var(--cc-mute)}
/* "Without VAT", and in euros the rate used (Dinos, 2026-10-15) */
.p .pkg-cur-n{flex:1 0 100%;margin:0;font-size:12.5px;line-height:1.4;color:var(--cc-mute);text-align:right;text-wrap:balance}
.p .pkg-cur-n.is-plan{text-align:left}
.p .pkg-seg{position:relative;display:inline-flex;padding:4px;border:1px solid var(--cc-line);border-radius:99px;background:var(--cc-glass)}
.p .pkg-seg i{position:absolute;top:4px;bottom:4px;left:0;width:76px;transform:translateX(var(--sx,4px));border:1px solid var(--cc-mint-24);border-radius:99px;background:var(--cc-mint-08);box-shadow:0 0 18px rgba(var(--cc-mint-rgb, 23, 255, 197),.12);transition:transform .45s var(--cc-ease);pointer-events:none}
.p .pkg-seg button,.p .pkg-seg button:hover,.p .pkg-seg button:focus{position:relative;z-index:1;margin:0;width:76px;height:36px;padding:0 14px;border:0;border-radius:99px;background:transparent;box-shadow:none;color:var(--cc-soft);font:600 13px/1 var(--cc-font);letter-spacing:0;text-transform:none;cursor:pointer;transition:color .3s}
.p .pkg-seg button[aria-pressed="true"]{color:var(--cc-fff, #fff)}
.p .pkg-seg button:focus-visible{outline:2px solid var(--cc-mint);outline-offset:2px}

/* ------------------------------------------------ hero: the price ladder */
.p .pkg-hero .pg-grid{align-items:center}
.p .pkg-ladder{position:relative;padding:22px 22px 18px;border:1px solid var(--cc-line);border-radius:var(--cc-r);background:linear-gradient(180deg,rgba(var(--cc-mint-rgb, 23, 255, 197),.05),rgba(var(--cc-fg, 255, 255, 255),0) 40%),var(--cc-glass-2);box-shadow:0 30px 80px rgba(var(--cc-k, 0, 0, 0), calc(.45 * var(--cc-ka, 1)))}
.p .pkg-lad-hd{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:0 10px 14px;border-bottom:1px solid var(--cc-line);font-size:14px;font-weight:600;color:var(--cc-fff, #fff)}
.p .pkg-lad-s{font-size:12.5px;font-weight:400;color:var(--cc-mute)}
.p .pkg-rw{position:relative;margin-top:10px}
.p .pkg-rungs{position:relative;list-style:none;margin:0;padding:0}
.p .pkg-rungs li{margin:0;padding:0;list-style:none}
.p .pkg-rung{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:11px 12px;border-radius:14px;color:var(--cc-fff, #fff);text-decoration:none}
.p .pkg-rung:hover{color:var(--cc-fff, #fff)}
.p .pkg-rn{display:flex;flex-direction:column;gap:2px;min-width:0}
.p .pkg-rn b{font-size:15.5px;font-weight:600;letter-spacing:-.005em}
.p .pkg-rn em{font-style:normal;font-size:12.5px;color:var(--cc-mute)}
.p .pkg-rv{display:inline-flex;align-items:baseline;gap:6px;flex:none}
.p .pkg-rv i{font-style:normal;font-size:12px;color:var(--cc-mute)}
.p .pkg-rp{font-size:19px;font-weight:600;letter-spacing:-.01em}
.p .pkg-rper{font-size:12.5px;color:var(--cc-mute)}
.p .pkg-rung.on .pkg-rp{color:var(--cc-mint)}
.p .pkg-rung .pkg-rp{transition:color .4s}
.p .pkg-mark{position:absolute;left:0;right:0;top:0;height:var(--mh,56px);transform:translateY(var(--my,0));border:1px solid var(--cc-mint-24);border-radius:14px;background:linear-gradient(90deg,rgba(var(--cc-mint-rgb, 23, 255, 197),.09),rgba(var(--cc-mint-rgb, 23, 255, 197),.02));box-shadow:0 0 24px rgba(var(--cc-mint-rgb, 23, 255, 197),.10);opacity:0;transition:transform .7s var(--cc-ease),opacity .4s;pointer-events:none}
.p .pkg-ladder.is-live .pkg-mark{opacity:1}
.p .pkg-lad-ft{margin-top:12px;padding:14px 10px 2px;border-top:1px solid var(--cc-line);font-size:13px;color:var(--cc-soft)}

/* ------------------------------------------------ package cards (A, C): subgrid rows so prices, times and lists line up */
.p .pkg-grid{display:grid;gap:24px 20px;margin-top:52px;grid-template-columns:repeat(4,minmax(0,1fr))}
.p .pkg-grid.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.p .pkg-card{position:relative;display:grid;grid-row:span 8;grid-template-rows:subgrid;row-gap:0;min-width:0;padding:28px 26px 26px;border:1px solid var(--cc-line);border-radius:var(--cc-r);background:var(--pkg-card)}
.p .pkg-card.is-featured,.p .pkg-row.is-featured,.p .pkg-feature{isolation:isolate;border-color:rgba(var(--cc-mint-rgb, 23, 255, 197),.34);box-shadow:0 30px 90px -40px rgba(var(--cc-mint-rgb, 23, 255, 197),.35);transition:border-color .7s var(--cc-ease),box-shadow .9s var(--cc-ease)}
.p .pkg-card.is-featured::before,.p .pkg-row.is-featured::before,.p .pkg-feature::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:radial-gradient(120% 55% at 50% 0%,rgba(var(--cc-mint-rgb, 23, 255, 197),.11),transparent 62%);pointer-events:none;transition:opacity .8s var(--cc-ease)}
/* variant A: a mint outline glides from the first card to Holistic once the cards are on screen, then Holistic lights up */
.p .pkg-grid{position:relative}
.p .pkg-grid.is-glide .pkg-card.is-featured:not(.is-lit){border-color:var(--cc-line);box-shadow:none}
.p .pkg-grid.is-glide .pkg-card.is-featured:not(.is-lit)::before{opacity:0}
.p .pkg-grid.is-glide .pkg-card.is-featured:not(.is-lit) .pkg-flag{opacity:0;transform:translateY(-6px)}
.p .pkg-card .pkg-flag{transition:opacity .5s var(--cc-ease) .15s,transform .5s var(--cc-ease) .15s}
.p .pkg-glide{position:absolute;left:0;top:0;z-index:3;border:1px solid rgba(var(--cc-mint-rgb, 23, 255, 197),.62);border-radius:var(--cc-r);box-shadow:0 0 0 1px rgba(var(--cc-mint-rgb, 23, 255, 197),.12),0 0 42px rgba(var(--cc-mint-rgb, 23, 255, 197),.22);pointer-events:none;opacity:0;transition:transform 1s var(--cc-ease),opacity .45s var(--cc-ease)}
.p .pkg-glide.is-on{opacity:1}
/* the "Most complete" tab hangs from the top edge INSIDE the card, in its top padding (nothing crosses the border) */
.p .pkg-flag{position:absolute;top:0;right:22px;z-index:2;display:inline-flex;align-items:center;gap:7px;height:25px;padding:0 11px;border:1px solid rgba(var(--cc-mint-rgb, 23, 255, 197),.34);border-top:0;border-radius:0 0 10px 10px;background:rgba(var(--cc-mint-rgb, 23, 255, 197),.07);font-size:11.5px;font-weight:600;line-height:1;color:var(--cc-mint);white-space:nowrap}
.p .pkg-flag i{width:7px;height:7px;border-radius:50%;background:var(--cc-mint);box-shadow:0 0 10px var(--cc-mint)}
.p .pkg-flag.is-static{position:static;align-self:flex-start;height:28px;margin-bottom:22px;padding:0 12px;border-top:1px solid rgba(var(--cc-mint-rgb, 23, 255, 197),.34);border-radius:99px}
.p .pkg-card.is-featured,.p .pkg-row.is-featured{padding-top:34px}
.p .pkg-top{display:flex;align-items:center;gap:14px;min-width:0}
.p .pkg-ic{display:grid;place-items:center;flex:none;width:46px;height:46px;border:1px solid var(--cc-line);border-radius:13px;background:rgba(var(--cc-fg, 255, 255, 255),.03);color:var(--cc-mint)}
.p .pkg-ic svg{width:22px;height:22px}
.p .pkg-kick{margin:0;font-size:12.5px;line-height:1.3;color:var(--cc-mute)}
.p h3.pkg-name,.p .pkg-name{margin:3px 0 0;padding:0;font-family:var(--cc-font);font-size:23px;font-weight:550;font-stretch:104%;line-height:1.12;letter-spacing:-.02em;color:var(--cc-fff, #fff);text-transform:none}.p h3.pkg-name,.p h3.pkg-name{font-size:23px !important}
.p .pkg-name.is-big{margin-top:6px;font-size:clamp(28px,2.6vw,36px);line-height:1.25}.p h3.pkg-name.is-big{font-size:clamp(28px,2.6vw,36px) !important}
.p .pkg-lede{margin:16px 0 0;font-size:15px;line-height:1.55;color:var(--cc-soft)}
.p .pkg-lede.is-big{font-size:17px;max-width:46ch}
.p .pkg-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px;margin-top:22px;padding:18px 0 6px;border-top:1px solid var(--cc-line)}
.p .pkg-from{font-size:13px;color:var(--cc-mute)}
.p .pkg-amt{font-size:42px;font-weight:550;font-stretch:104%;line-height:1.1;letter-spacing:-.03em;color:var(--cc-fff, #fff)}
.p .pkg-price.is-big{padding-bottom:12px}
.p .pkg-price.is-big .pkg-amt{font-size:clamp(46px,4.4vw,60px);line-height:1.15}
.p .pkg-unit{font-size:13px;color:var(--cc-mute)}
.p .pkg-alt{margin:4px 0 0;font-size:13.5px;line-height:1.45;color:var(--cc-soft);text-wrap:balance}
.p .pkg-alt b,.p .pkg-alt .pkg-alt-v{color:var(--cc-fff, #fff);font-weight:600}
.p .pkg-alt.is-strike .pkg-alt-v{color:var(--cc-mute);text-decoration:line-through;text-decoration-color:rgba(var(--cc-fg, 255, 255, 255),.4)}
.p .pkg-time{display:inline-flex;align-items:center;justify-self:start;align-self:start;gap:8px;margin:16px 0 0;padding:6px 12px 6px 10px;border:1px solid var(--cc-line);border-radius:99px;background:rgba(var(--cc-fg, 255, 255, 255),.03);font-size:13px;line-height:1.3;color:var(--cc-soft)}
.p .pkg-time svg{width:15px;height:15px;flex:none;color:var(--cc-mint)}
.p .pkg-incw{margin:22px 0 0;padding:18px 0 0;border-top:1px solid var(--cc-line);min-width:0}
.p .pkg-lab{margin:0 0 12px;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--cc-mute)}
.p .pkg-inc{display:grid;align-content:start;gap:11px;margin:0;padding:0;list-style:none}
.p .pkg-inc li{position:relative;margin:0;padding:0 0 0 27px;list-style:none;font-size:14.5px;line-height:1.48;color:var(--cc-soft)}
.p .pkg-inc li svg{position:absolute;left:0;top:2px;width:17px;height:17px;color:var(--cc-mint)}
.p .pkg-inc.is-2{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 28px}
.p .pkg-cta{align-self:end;padding-top:26px}
.p .pkg-cta .cc-btn{width:100%;justify-content:center}
.p .pkg-cta .cc-btn--primary{padding-right:26px}

/* ------------------------------------------------ rows (B) */
.p .pkg-rows{display:grid;gap:22px;margin-top:52px}
.p .pkg-row{position:relative;display:grid;grid-template-columns:minmax(0,4.2fr) minmax(0,5fr) minmax(0,2.8fr);gap:40px;align-items:center;padding:30px 30px 30px 30px;border:1px solid var(--cc-line);border-radius:var(--cc-r);background:var(--pkg-card)}
.p .pkg-row .pkg-time{margin-top:18px}
.p .pkg-pills{display:flex;flex-wrap:wrap;gap:9px;margin:0;padding:0;list-style:none}
.p .pkg-pill{display:inline-flex;align-items:center;gap:7px;margin:0;padding:7px 13px 7px 10px;border:1px solid var(--cc-line);border-radius:99px;background:rgba(var(--cc-fg, 255, 255, 255),.03);font-size:13.5px;line-height:1.35;color:var(--cc-soft);list-style:none}
.p .pkg-pill svg{width:14px;height:14px;flex:none;color:var(--cc-mint)}
.p .pkg-row-c{display:flex;flex-direction:column;align-items:flex-end;text-align:right}
.p .pkg-row-c .pkg-price{justify-content:flex-end;margin-top:0;padding-top:0;border-top:0}
.p .pkg-row-c .pkg-alt:empty{display:none}
.p .pkg-row-c .pkg-cta{width:100%;padding-top:18px}

/* ------------------------------------------------ Holistic maths (A: own section, C: inside the feature) */
.p .pkg-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center}
.p .pkg-sum{padding:28px;border:1px solid var(--cc-line);border-radius:var(--cc-r);background:var(--cc-glass-2)}
.p .pkg-sum-t{margin:0 0 6px;font-size:13px;color:var(--cc-mute)}
.p .pkg-sum-rows{margin:0;padding:0;list-style:none}
.p .pkg-sum-rows li{display:grid;grid-template-columns:minmax(0,12em) minmax(0,1fr) auto;align-items:center;gap:16px;margin:0;padding:12px 0;border-bottom:1px solid rgba(var(--cc-fg, 255, 255, 255),.07);list-style:none}
.p .pkg-sum-n{font-size:14.5px;color:var(--cc-fff, #fff)}
.p .pkg-sum-bar{position:relative;height:8px;border-radius:99px;background:rgba(var(--cc-fg, 255, 255, 255),.06);overflow:hidden}
.p .pkg-sum-bar i{position:absolute;left:0;top:0;bottom:0;width:calc(var(--w) * 2.4);max-width:100%;border-radius:99px;background:linear-gradient(90deg,rgba(var(--cc-mint-rgb, 23, 255, 197),.35),var(--cc-mint));box-shadow:0 0 12px rgba(var(--cc-mint-rgb, 23, 255, 197),.35);transform-origin:left;transform:scaleX(0);transition:transform .9s var(--cc-ease) calc(var(--i) * .22s)}
.p .pkg-sum.is-on .pkg-sum-bar i{transform:scaleX(1)}
.p .pkg-sum-v{min-width:4.2em;text-align:right;font-size:15px;font-weight:600;color:var(--cc-fff, #fff)}
.p .pkg-sum-tot,.p .pkg-sum-pk{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.p .pkg-sum-tot{margin-top:18px;font-size:14px;color:var(--cc-mute)}
.p .pkg-sum-pk{margin-top:10px;padding-top:14px;border-top:1px solid var(--cc-line);font-size:15px;font-weight:600;color:var(--cc-fff, #fff)}
.p .pkg-sum-big{font-size:30px;font-weight:550;letter-spacing:-.02em;color:var(--cc-fff, #fff)}
.p .pkg-sum-big.is-old{font-size:22px;color:var(--cc-mute);text-decoration:line-through;text-decoration-color:rgba(var(--cc-fg, 255, 255, 255),.35)}
.p .pkg-sum-pk .pkg-sum-big{color:var(--cc-mint);text-shadow:0 0 22px rgba(var(--cc-mint-rgb, 23, 255, 197),.35)}
.p .pkg-sum-ft{margin:14px 0 0;font-size:13.5px;line-height:1.55;color:var(--cc-soft)}
.p .pkg-sum-ft b{color:var(--cc-fff, #fff);font-weight:600}
.p .pkg-sum-tot,.p .pkg-sum-pk,.p .pkg-sum-ft{opacity:0;transform:translateY(8px);transition:opacity .6s var(--cc-ease),transform .6s var(--cc-ease)}
.p .pkg-sum.is-on .pkg-sum-tot{opacity:1;transform:none;transition-delay:.95s}
.p .pkg-sum.is-on .pkg-sum-pk{opacity:1;transform:none;transition-delay:1.25s}
.p .pkg-sum.is-on .pkg-sum-ft{opacity:1;transform:none;transition-delay:1.5s}

/* ------------------------------------------------ Holistic feature (C) */
.p .pkg-feature{position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:56px;align-items:center;margin-top:52px;padding:40px;border:1px solid;border-radius:28px;background:var(--cc-d-0b1513, #0B1513)}
.p .pkg-feat-a{display:flex;flex-direction:column;min-width:0}
.p .pkg-feat-price{display:flex;flex-direction:column;align-items:stretch}
.p .pkg-feat-price .pkg-time{align-self:flex-start;margin-top:10px}
.p .pkg-feat-a .pkg-cta{align-self:flex-start;padding-top:28px}
.p .pkg-feat-a .pkg-cta .cc-btn{width:auto}
.p .pkg-sum.is-compact{background:rgba(var(--cc-bg-rgb, 4, 10, 9),.6)}

/* ------------------------------------------------ add-ons as pills */
/* twelve add-ons: 3 x 4 on desktop, 2 x 6 on tablets, one column on phones, so every row ends flush */
.p .pkg-adds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:44px 0 0;padding:0;list-style:none}
.p .pkg-add{display:flex;align-items:center;justify-content:space-between;gap:14px;min-width:0;margin:0;padding:12px 12px 12px 18px;border:1px solid var(--cc-line);border-radius:18px;background:rgba(var(--cc-fg, 255, 255, 255),.025);list-style:none;transition:border-color .3s,background .3s}
.p .pkg-add:hover{border-color:var(--cc-mint-24);background:var(--cc-mint-08)}
.p .pkg-add-n{display:flex;flex-direction:column;gap:1px;min-width:0}
.p .pkg-add-n b{font-size:14.5px;font-weight:600;color:var(--cc-fff, #fff);line-height:1.3}
.p .pkg-add-n em{font-style:normal;font-size:12.5px;line-height:1.3;color:var(--cc-mute)}
.p .pkg-add-v{display:inline-flex;align-items:baseline;gap:5px;flex:none;padding:6px 12px;border:1px solid var(--cc-line);border-radius:99px;background:rgba(var(--cc-k, 0, 0, 0), calc(.25 * var(--cc-ka, 1)))}
.p .pkg-add-v i{font-style:normal;font-size:11.5px;color:var(--cc-mute)}
.p .pkg-add-p{font-size:15px;font-weight:600;color:var(--cc-mint)}

/* ------------------------------------------------ how it works */
.p .pkg-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:48px 0 0;padding:0;list-style:none;counter-reset:none}
.p .pkg-step{position:relative;margin:0;padding:28px 26px;border:1px solid var(--cc-line);border-radius:var(--cc-r);background:var(--pkg-card);list-style:none}
.p .pkg-step-n{position:relative;display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;font-size:14px;font-weight:600;color:var(--cc-mint)}
.p .pkg-step-n svg{position:absolute;inset:0;width:40px;height:40px;transform:rotate(-90deg);overflow:visible}
.p .pkg-step-n circle{fill:none;stroke:var(--cc-mint);stroke-width:1.5;stroke-dasharray:120;stroke-dashoffset:0;opacity:.7}
.p .pkg-step-n b{position:relative;font-weight:600}
.p h3.pkg-step-t,.p .pkg-step-t{margin:20px 0 0;padding:0;font-family:var(--cc-font);font-size:21px;font-weight:550;line-height:1.2;letter-spacing:-.015em;color:var(--cc-fff, #fff);text-transform:none}.p h3.pkg-step-t{font-size:21px !important}
.p .pkg-step-p{margin:10px 0 0;font-size:15px;line-height:1.6;color:var(--cc-soft)}

/* ------------------------------------------------ "not sure where to start" band */
.p .pkg-band{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px 48px;align-items:center;padding:40px 44px;border:1px solid rgba(var(--cc-mint-rgb, 23, 255, 197),.24);border-radius:28px;background:radial-gradient(70% 140% at 100% 50%,rgba(var(--cc-mint-rgb, 23, 255, 197),.10),transparent 60%),var(--cc-d-0a1412, #0A1412)}
.p .pkg-band-k{margin:0;font-size:13.5px;font-weight:600;color:var(--cc-mint)}
.p .pkg-band-h{margin:10px 0 0;max-width:30ch;font-size:clamp(24px,2.3vw,32px);font-weight:500;font-stretch:104%;line-height:1.15;letter-spacing:-.02em;color:var(--cc-fff, #fff);text-wrap:balance}
.p .pkg-band-p{margin:12px 0 0;font-size:15px;line-height:1.55;color:var(--cc-soft)}
.p .pkg-band-r{display:flex;align-items:center;gap:24px}
.p .pkg-band-v{display:flex;flex-direction:column;align-items:flex-end;gap:4px;margin:0}
.p .pkg-band-v .pkg-amt{line-height:1.2}
.p .pkg-band-v span{font-size:12.5px;color:var(--cc-mute)}
.p .pkg-mail{color:var(--cc-mint);text-decoration:none;border-bottom:1px solid var(--cc-mint-24)}

/* ------------------------------------------------ at a glance: what each package covers */
.p .pkg-cov{display:grid;gap:6px;margin-top:44px;padding:10px;border:1px solid var(--cc-line);border-radius:var(--cc-r);background:var(--cc-glass-2)}
.p .pkg-cov-row{display:grid;grid-template-columns:minmax(0,14em) minmax(0,1fr);gap:12px 24px;align-items:center;padding:14px 16px;border-radius:16px}
.p .pkg-cov-row.is-featured{background:linear-gradient(90deg,rgba(var(--cc-mint-rgb, 23, 255, 197),.07),rgba(var(--cc-mint-rgb, 23, 255, 197),.015));box-shadow:inset 0 0 0 1px rgba(var(--cc-mint-rgb, 23, 255, 197),.22)}
.p .pkg-cov-a{display:flex;flex-direction:column;gap:2px;min-width:0}
.p .pkg-cov-n{font-size:16px;font-weight:600;line-height:1.3;color:var(--cc-fff, #fff)}
.p .pkg-cov-row.is-featured .pkg-cov-n{color:var(--cc-mint)}
.p .pkg-cov-m{font-size:13px;line-height:1.4;color:var(--cc-mute)}
.p .pkg-cov-v{font-weight:600;color:var(--cc-soft)}
.p .pkg-cov-l{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin:0;padding:0;list-style:none}
.p .pkg-cov-l li{display:flex;align-items:center;justify-content:center;gap:6px;height:38px;margin:0;padding:0 8px;border:1px solid rgba(var(--cc-fg, 255, 255, 255),.07);border-radius:99px;font-size:13px;line-height:1.2;color:rgba(var(--cc-fg, 255, 255, 255), calc(.42 * var(--cc-tm, 1) + var(--cc-tc, 0)));list-style:none;white-space:nowrap;transition:color .45s var(--cc-ease),border-color .45s var(--cc-ease),background-color .45s var(--cc-ease);transition-delay:calc(var(--k,0) * 90ms + 250ms)}
.p .pkg-cov-l li svg{width:14px;height:14px;flex:none;color:var(--cc-mint)}
.p .pkg-cov-l li.on{border-color:rgba(var(--cc-mint-rgb, 23, 255, 197),.32);background-color:rgba(var(--cc-mint-rgb, 23, 255, 197),.07);color:var(--cc-fff, #fff)}
.pkg-js .p .pkg-cov:not(.is-seen) li.on{border-color:rgba(var(--cc-fg, 255, 255, 255),.07);background-color:transparent;color:rgba(var(--cc-fg, 255, 255, 255), calc(.42 * var(--cc-tm, 1) + var(--cc-tc, 0)))}

/* ------------------------------------------------ micro-animations: each runs once, when its block arrives on screen
   (pricing.js adds .pkg-js to <html> and .is-seen to the block; without JS everything is simply shown) */
.p .pkg-inc li,.p .pkg-pill{transition:opacity .45s var(--cc-ease),transform .45s var(--cc-ease);transition-delay:calc(var(--k,0) * 80ms + 150ms)}
.pkg-js .p .pkg-inc li,.pkg-js .p .pkg-pill{opacity:0;transform:translateY(6px)}
.pkg-js .p .is-seen .pkg-inc li,.pkg-js .p .is-seen .pkg-pill,.pkg-js .p .pkg-inc.is-seen li{opacity:1;transform:none}
.p .pkg-inc li svg path,.p .pkg-pill svg path,.p .pkg-cov-l li svg path{stroke-dasharray:22;stroke-dashoffset:0;transition:stroke-dashoffset .5s var(--cc-ease);transition-delay:calc(var(--k,0) * 80ms + 320ms)}
.p .pkg-cov-l li svg path{transition-delay:calc(var(--k,0) * 90ms + 330ms)}
.pkg-js .p .pkg-inc li svg path,.pkg-js .p .pkg-pill svg path,.pkg-js .p .pkg-cov-l li svg path{stroke-dashoffset:22}
.pkg-js .p .is-seen .pkg-inc li svg path,.pkg-js .p .is-seen .pkg-pill svg path,.pkg-js .p .pkg-cov.is-seen li svg path{stroke-dashoffset:0}
.p .pkg-step-n circle{transition:stroke-dashoffset 1.1s var(--cc-ease);transition-delay:calc(var(--k,0) * 280ms + 200ms)}
.pkg-js .p .pkg-step-n circle{stroke-dashoffset:120}
.pkg-js .p .pkg-steps.is-seen .pkg-step-n circle{stroke-dashoffset:0}

/* ------------------------------------------------ proposal tags (?marks=1), for the review only */
.pkg-marks .p [data-prop]{position:relative}
.pkg-marks .p .pkg-amt[data-prop]::after,.pkg-marks .p .pkg-rp[data-prop]::after,.pkg-marks .p .pkg-sum-big[data-prop]::after,.pkg-marks .p .pkg-sum-v[data-prop]::after,
.pkg-marks .p p[data-prop]::after,.pkg-marks .p li[data-prop]::after{content:"proposal";display:inline-block;margin-left:8px;padding:2px 7px;border:1px dashed rgba(255,209,102,.6);border-radius:99px;font-size:10.5px;font-weight:600;line-height:1.3;letter-spacing:.02em;color:#ffd166;vertical-align:middle;text-decoration:none;text-shadow:none;white-space:nowrap}
.pkg-marks .p .pkg-amt[data-prop]::after{font-size:10.5px;vertical-align:super;letter-spacing:.02em}

/* ------------------------------------------------ tablet */
@media (max-width:1199.98px){
  .p .pkg-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .p .pkg-row{grid-template-columns:minmax(0,1fr) auto;gap:24px 40px}
  .p .pkg-row .pkg-pills{grid-column:1/-1;grid-row:2}
  .p .pkg-row-c{grid-column:2;grid-row:1;align-self:start}
  .p .pkg-row-c .pkg-cta{width:auto}
  .p .pkg-feature{grid-template-columns:minmax(0,1fr);gap:36px}
  .p .pkg-adds{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* three cards would leave one alone on a two-column row: from tablet down each becomes a wide card instead */
@media (max-width:1099.98px){
  .p .pkg-grid.c3{grid-template-columns:minmax(0,1fr);gap:28px}
  .p .pkg-grid.c3 .pkg-card{grid-row:auto;grid-template-rows:none;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-auto-flow:row dense;column-gap:40px;padding:30px}
  .p .pkg-grid.c3 .pkg-card>*{grid-column:1}
  .p .pkg-grid.c3 .pkg-card>.pkg-incw{grid-column:2;grid-row:1/span 7;margin-top:0;padding-top:0;border-top:0}
  .p .pkg-grid.c3 .pkg-card>.pkg-cta{grid-column:2}
  .p .pkg-split{grid-template-columns:minmax(0,1fr);gap:40px}
  .p .pkg-cov-row{grid-template-columns:minmax(0,1fr)}
  .p .pkg-cov-a{flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
  .p .pkg-steps{grid-template-columns:minmax(0,1fr)}
  .p .pkg-step{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:20px}
  .p .pkg-step-n{grid-row:1/span 2}
  .p .pkg-step-t{margin-top:6px}
}
/* phones: their own layouts */
@media (max-width:767.98px){
  .p .pkg-head{align-items:flex-start}
  .p .pkg-grid,.p .pkg-grid.c3{grid-template-columns:minmax(0,1fr);gap:30px;margin-top:40px}
  .p .pkg-card{grid-row:auto;grid-template-rows:none;padding:26px 20px 22px}
  .p .pkg-grid.c3 .pkg-card{grid-template-columns:minmax(0,1fr);padding:26px 20px 22px}
  .p .pkg-grid.c3 .pkg-card>.pkg-incw{grid-column:1;grid-row:auto;margin-top:22px;padding-top:18px;border-top:1px solid var(--cc-line)}
  .p .pkg-grid.c3 .pkg-card>.pkg-cta{grid-column:1}
  .p .pkg-amt{font-size:40px}
  .p .pkg-row{grid-template-columns:minmax(0,1fr);gap:22px;padding:26px 20px 22px}
  .p .pkg-row .pkg-pills{grid-column:1;grid-row:auto}
  .p .pkg-row-c{grid-column:1;grid-row:auto;align-items:stretch;text-align:left;padding-top:20px;border-top:1px solid var(--cc-line)}
  .p .pkg-row-c .pkg-price{justify-content:flex-start}
  .p .pkg-row-c .pkg-cta{width:100%}
  .p .pkg-pill{font-size:13px}
  .p .pkg-feature{padding:28px 20px 24px;border-radius:24px;margin-top:40px}
  .p .pkg-inc.is-2{grid-template-columns:minmax(0,1fr)}
  .p .pkg-feat-a .pkg-cta,.p .pkg-feat-a .pkg-cta .cc-btn{width:100%}
  .p .pkg-sum{padding:22px 18px}
  .p .pkg-sum-rows li{grid-template-columns:minmax(0,1fr) auto;gap:6px 12px}
  .p .pkg-sum-bar{grid-column:1/-1;grid-row:2}
  .p .pkg-sum-big{font-size:26px}
  .p .pkg-cov{margin-top:36px;padding:8px}
  .p .pkg-cov-row{padding:14px 12px}
  .p .pkg-cov-l{grid-template-columns:repeat(3,minmax(0,1fr))}
  .p .pkg-adds{grid-template-columns:minmax(0,1fr);gap:10px;margin-top:36px}
  .p .pkg-add{padding:12px 10px 12px 16px}
  .p .pkg-band{grid-template-columns:minmax(0,1fr);padding:28px 20px;border-radius:24px}
  .p .pkg-band-r{flex-direction:column;align-items:stretch;gap:16px}
  .p .pkg-band-v{flex-direction:row;align-items:baseline;gap:10px}
  .p .pkg-band-r .cc-btn{justify-content:center}
  .p .pkg-ladder{padding:16px 12px 12px}
  .p .pkg-rung{padding:10px 10px}
  .p .pkg-lad-hd{padding:0 8px 12px}
  .p .pkg-lad-ft{padding:12px 8px 2px}
}
@media (max-width:599.98px){
  .p .pkg-cur{width:100%;max-width:none;justify-content:space-between}
  .p .pkg-cur-n{text-align:left}
  .p h3.pkg-name,.p .pkg-name{font-size:22px}.p h3.pkg-name,.p h3.pkg-name{font-size:22px !important}
  .p .pkg-cov-l{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){
  .p .pkg-sum-bar i{transition:none;transform:scaleX(1)}
  .p .pkg-sum-tot,.p .pkg-sum-pk,.p .pkg-sum-ft{opacity:1;transform:none;transition:none}
  .p .pkg-mark,.p .pkg-seg i,.p .pkg-inc li,.p .pkg-pill,.p .pkg-cov-l li,.p .pkg-step-n circle,
  .p .pkg-inc li svg path,.p .pkg-pill svg path,.p .pkg-cov-l li svg path,.p .pkg-card .pkg-flag{transition:none}
}

/* =====================================================================================================================
   LIFE (Kyro, 2026-10-15: "lack life", "very boring", "don't compare with the other pages ... while the user scrolls").
   Every moving part below is played by the site's own runtime, not by pricing.js:
   - the card scenes are proto.js tiles ([data-tile] > .t-f, [data-a] parts, data-offset), as on Process and Industry;
   - the Holistic maths is proto.js's pinned build ([data-build].pr-build: .s-l layers, [data-at] floats that stay);
   - the project row is pages.js [data-marquee]; the steps are pages.js [data-hscroll] (the About timeline).
   ===================================================================================================================== */

/* ------------------------------------------------ hero: a calm drifting glow over the moving floor */
.p .pkg-hero{isolation:isolate}
.p .pkg-hero::after{content:"";position:absolute;left:-10%;right:-10%;top:-12%;height:115%;z-index:-1;pointer-events:none;
  background:radial-gradient(36% 32% at 26% 40%,rgba(var(--cc-mint-rgb, 23, 255, 197),.075),transparent 70%),radial-gradient(30% 30% at 80% 24%,rgba(24,99,220,.10),transparent 70%);
  animation:pkg-aurora 22s ease-in-out infinite alternate}
@keyframes pkg-aurora{from{transform:translate3d(-3%,0,0) scale(1)}to{transform:translate3d(3%,2.5%,0) scale(1.06)}}

/* the ladder's live preview: the package the marker is on, its card scene in miniature */
.p .pkg-pvw{position:relative;height:150px;margin:12px 0 2px;border:1px solid var(--cc-line);border-radius:14px;overflow:hidden;
  background-color:var(--cc-d-0a1311, #0a1311);background-image:radial-gradient(rgba(var(--cc-fg, 255, 255, 255),.055) 1px,transparent 1px);background-size:22px 22px}
.p .pkg-pv{position:absolute;inset:0;opacity:0;transition:opacity .55s var(--cc-ease)}
.p .pkg-pv.on{opacity:1}
/* the miniature: the card scene laid out at full size, then scaled to the preview (smaller, not squeezed) */
.p .pkg-scene.is-mini{position:absolute;left:50%;top:50%;width:139%;height:139%;margin:0;border:0;border-radius:0;background:transparent;transform:translate(-50%,-50%) scale(.72)}

/* ------------------------------------------------ the scenes (shared parts) */
.p .pkg-scene{position:relative;height:210px;margin:0 0 22px;border:1px solid var(--cc-line);border-radius:14px;overflow:hidden;background-color:var(--cc-d-0a1311, #0a1311)}
.p .pkg-scene.is-row{height:200px;margin-bottom:18px}
.p .pkg-scene.is-big{height:250px;margin:0 0 24px}
.p .pkg-scene.is-stop{height:120px;margin:0 0 20px;border-radius:12px}
.p .pkg-sc{display:flex;align-items:center;justify-content:center;gap:16px;padding:14px 16px;box-sizing:border-box}
.p .pkg-scene .pkg-l{display:block;height:6px;border-radius:3px;background:rgba(var(--cc-fg, 255, 255, 255),.16);transform-origin:left}
.p .pkg-scene .pkg-l.t,.p .pkg-hvp .pkg-l.t{height:8px;background:rgba(var(--cc-fg, 255, 255, 255),.34)}
.p .pkg-hvp .pkg-l{display:block;height:6px;border-radius:3px;background:rgba(var(--cc-fg, 255, 255, 255),.16)}
.p .pkg-blk{display:block;width:100%;border-radius:6px;background:linear-gradient(135deg,var(--cc-d-123a31, #123a31),var(--cc-d-0a2230, #0a2230))}
.p .pkg-blk.hero{height:26px}
.p .pkg-blk.sm{height:13px;background:rgba(var(--cc-fg, 255, 255, 255),.08)}
.p .pkg-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;width:100%}
.p .pkg-cols i{display:block;height:15px;border-radius:5px;background:rgba(var(--cc-fg, 255, 255, 255),.08)}
.p .pkg-px{display:inline-flex;align-items:center;height:20px;padding:0 8px;border:1px solid rgba(var(--cc-mint-rgb, 23, 255, 197),.35);border-radius:99px;background:rgba(var(--cc-mint-rgb, 23, 255, 197),.08);font-size:10.5px;font-weight:600;line-height:1;color:var(--cc-fff, #fff);white-space:nowrap}
.p .pkg-cap{display:block;font-size:9.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--cc-mute)}
.p .pkg-tick{position:relative;display:inline-grid;place-items:center;flex:none;width:16px;height:16px;box-sizing:border-box;border:1.5px solid rgba(255,120,120,.6);border-radius:50%;transition:border-color .35s,background-color .35s}
.p .pkg-tick::after{content:"!";font-size:9.5px;font-weight:800;line-height:1;color:#ffc2c2}
.p .pkg-tick.on{border-color:var(--cc-mint);background-color:rgba(var(--cc-mint-rgb, 23, 255, 197),.14)}
.p .pkg-tick.on::after{content:"\2713";color:var(--cc-mint)}
.p .pkg-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--cc-mint);box-shadow:0 0 8px var(--cc-mint)}
.p .pkg-cr{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;line-height:1.2;color:var(--cc-soft);white-space:nowrap}
.p .pkg-chk{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 12px}
.p .pkg-mk{display:block;flex:none;width:56px;height:56px;overflow:visible}
.p .pkg-mk .ln{fill:none;stroke:var(--cc-mint);stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round}
.p .pkg-mk .ln.m{stroke:var(--cc-fff, #fff)}
.p .pkg-pulse,.p .pkg-chart{display:block;width:100%;overflow:visible}
.p .pkg-pulse .ln,.p .pkg-chart .ln{fill:none;stroke:var(--cc-mint);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.p .pkg-pulse .ln.w,.p .pkg-chart .ln.w{stroke:rgba(var(--cc-fg, 255, 255, 255),.12)}
.p .pkg-chart .ln.d{stroke-dasharray:3 5}
.p .pkg-ring circle.bg,.p .pkg-hv.a circle.bg{fill:none;stroke:rgba(var(--cc-fg, 255, 255, 255),.1);stroke-width:5}
.p .pkg-ring path.fg,.p .pkg-hv.a path.fg{fill:none;stroke:var(--cc-mint);stroke-width:5;stroke-linecap:round}

/* audit: a score ring fills, issues tick off one by one */
.p .pkg-sc-audit{gap:20px}
.p .pkg-ring{position:relative;flex:none;width:86px;height:86px}
.p .pkg-ring svg{display:block;width:100%;height:100%}
.p .pkg-ring b{position:absolute;left:0;right:0;top:25px;text-align:center;font-size:22px;font-weight:600;line-height:1.1;color:var(--cc-fff, #fff)}
.p .pkg-ring i{position:absolute;left:0;right:0;top:51px;text-align:center;font-style:normal;font-size:9px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--cc-mute)}
.p .pkg-iss{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.p .pkg-iss li{display:flex;align-items:center;gap:8px;margin:0;padding:0;font-size:12.5px;line-height:1.2;color:var(--cc-soft);white-space:nowrap;list-style:none}

/* website: a page assembles block by block, then the same page on a phone */
.p .pkg-win{width:min(90%,250px);border:1px solid rgba(var(--cc-fg, 255, 255, 255),.14);border-radius:10px;background:var(--cc-d-0d1917, #0d1917);overflow:hidden;box-shadow:0 14px 30px rgba(var(--cc-k, 0, 0, 0), calc(.35 * var(--cc-ka, 1)))}
.p .pkg-win-bar{display:flex;align-items:center;gap:4px;height:22px;padding:0 6px 0 8px;border-bottom:1px solid rgba(var(--cc-fg, 255, 255, 255),.08)}
.p .pkg-win-bar>i{width:6px;height:6px;border-radius:50%;background:rgba(var(--cc-fg, 255, 255, 255),.2)}
.p .pkg-win-bar .pkg-px{margin-left:auto;height:16px;font-size:9.5px}
.p .pkg-win-b{display:flex;flex-direction:column;gap:7px;padding:10px}
.p .pkg-phone{display:flex;flex-direction:column;gap:6px;width:70px;height:114px;padding:12px 8px;box-sizing:border-box;border:1.5px solid rgba(var(--cc-fg, 255, 255, 255),.3);border-radius:14px;background:var(--cc-d-0d1917, #0d1917)}
.p .pkg-phone .pkg-blk.hero{height:22px}

/* brand: the mark draws itself, then its colours and type fill a small guide */
.p .pkg-logo{display:flex;align-items:center;gap:14px}
.p .pkg-wm{font-size:24px;font-weight:600;font-stretch:112%;letter-spacing:-.02em;line-height:1.2;color:var(--cc-fff, #fff)}
.p .pkg-sheet{width:min(90%,250px);padding:11px 14px 12px;box-sizing:border-box;border:1px solid rgba(var(--cc-fg, 255, 255, 255),.14);border-radius:12px;background:var(--cc-d-0d1917, #0d1917);box-shadow:0 14px 30px rgba(var(--cc-k, 0, 0, 0), calc(.35 * var(--cc-ka, 1)))}
.p .pkg-sheet-r{display:flex;align-items:center;gap:12px;margin-top:8px}
.p .pkg-sheet .pkg-mk{width:32px;height:32px}
.p .pkg-sw{display:flex;gap:6px}
.p .pkg-sw i{display:block;width:22px;height:22px;border-radius:6px}
.p .pkg-sw .a{background:var(--cc-mint-hex, #17FFC5)}
.p .pkg-sw .b{background:#1863DC}
.p .pkg-sw .c{background:#E9DCC7}
.p .pkg-sw .d{background:var(--cc-d-10201c, #10201c);box-shadow:inset 0 0 0 1px rgba(var(--cc-fg, 255, 255, 255),.22)}
.p .pkg-type{display:flex;align-items:center;gap:10px;margin-top:9px}
.p .pkg-type b{font-size:24px;font-weight:600;line-height:1.1;color:var(--cc-fff, #fff)}
.p .pkg-type span{font-size:12px;font-weight:600;line-height:1.3;color:var(--cc-fff, #fff)}
.p .pkg-type em{display:block;font-style:normal;font-weight:400;font-size:10.5px;color:var(--cc-mute)}

/* holistic: brand, site, print and social slide into one box, which lights */
.p .pkg-sc-holi{display:block;padding:0}
.p .pkg-hb{position:absolute;left:19%;top:9%;width:62%;height:82%;box-sizing:border-box;border:1px solid rgba(var(--cc-fg, 255, 255, 255),.14);border-radius:12px;transition:border-color .5s,box-shadow .6s}
.p .pkg-hb.on{border-color:rgba(var(--cc-mint-rgb, 23, 255, 197),.7);box-shadow:0 0 0 4px rgba(var(--cc-mint-rgb, 23, 255, 197),.07),0 0 28px rgba(var(--cc-mint-rgb, 23, 255, 197),.22)}
.p .pkg-pc{position:absolute;width:26%;height:34%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:6px;box-sizing:border-box;border:1px solid rgba(var(--cc-fg, 255, 255, 255),.14);border-radius:9px;background:var(--cc-d-0d1917, #0d1917);overflow:hidden}
.p .pkg-pc .pkg-mk{width:30px;height:30px}
.p .pkg-pc .pkg-blk.hero{height:14px}
.p .pkg-cardp{display:block;width:62%;height:26%;border-radius:4px;border:1px solid rgba(var(--cc-mint-rgb, 23, 255, 197),.3);background:linear-gradient(135deg,var(--cc-d-1a3a33, #1a3a33),var(--cc-d-0e2a24, #0e2a24))}
.p .pkg-cardp.r{width:44%;height:36%;background:linear-gradient(160deg,var(--cc-d-1a2b3d, #1a2b3d),var(--cc-d-0d1917, #0d1917));border-color:rgba(var(--cc-fg, 255, 255, 255),.18)}
.p .pkg-grid6{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;width:66%}
.p .pkg-grid6 i{display:block;aspect-ratio:1;border-radius:3px;background:rgba(var(--cc-fg, 255, 255, 255),.12)}
.p .pkg-grid6 i:nth-child(2),.p .pkg-grid6 i:nth-child(6){background:rgba(var(--cc-mint-rgb, 23, 255, 197),.45)}

/* care, growth: a line draws, then the status */
.p .pkg-sc-care,.p .pkg-sc-grow{flex-direction:column;align-items:stretch;justify-content:center;gap:12px}
.p .pkg-sc-care .pkg-pulse{height:46px}
.p .pkg-sc-grow .pkg-chart{height:44px}
.p .pkg-sc-grow .s-chip{font-size:11px}
.p .pkg-pos{color:var(--cc-mint);font-weight:700}

/* AI assistant: a question types, the answer comes, a lead goes to the inbox */
.p .pkg-sc-ai{flex-direction:column;align-items:stretch;justify-content:center;gap:8px;padding:12px 16px}
.p .pkg-bub{max-width:86%;margin:0;padding:7px 11px;border-radius:12px;font-size:12px;line-height:1.35;color:var(--cc-fff, #fff)}
.p .pkg-bub.q{align-self:flex-end;border-bottom-right-radius:4px;background:rgba(var(--cc-fg, 255, 255, 255),.1)}
.p .pkg-bub.a{align-self:flex-start;border:1px solid rgba(var(--cc-mint-rgb, 23, 255, 197),.35);border-bottom-left-radius:4px;background:rgba(var(--cc-mint-rgb, 23, 255, 197),.06)}
.p .pkg-lead{align-self:center;font-size:11px}
.p .pkg-lead .s-ok{width:15px;height:15px;font-size:9px}

/* the steps' scenes */
.p .pkg-ss-pick{gap:8px}
.p .pkg-mc{position:relative;display:block;width:34px;height:46px;box-sizing:border-box;border:1px solid rgba(var(--cc-fg, 255, 255, 255),.14);border-radius:7px;background:var(--cc-d-0d1917, #0d1917)}
.p .pkg-mc.m{background:linear-gradient(180deg,var(--cc-d-0f231f, #0f231f),var(--cc-d-0b1714, #0b1714))}
.p .pkg-mc.m i{position:absolute;inset:-1px;border:1px solid transparent;border-radius:7px;transition:border-color .4s,box-shadow .5s}
.p .pkg-mc.m i.on{border-color:rgba(var(--cc-mint-rgb, 23, 255, 197),.8);box-shadow:0 0 16px rgba(var(--cc-mint-rgb, 23, 255, 197),.3)}
.p .pkg-ss-call{gap:12px}
.p .pkg-ss-call .s-av{width:28px;height:28px;font-size:12px;font-style:normal}
.p .pkg-wave{display:flex;align-items:center;gap:4px;height:40px}
.p .pkg-wave i{display:block;width:4px;border-radius:2px;background:rgba(var(--cc-mint-rgb, 23, 255, 197),.7);transform-origin:center}
.p .pkg-doc{display:grid;gap:5px;min-width:140px;padding:9px 14px 10px;box-sizing:border-box;border:1px solid rgba(var(--cc-fg, 255, 255, 255),.14);border-radius:10px;background:var(--cc-d-0d1917, #0d1917)}
.p .pkg-ss-make{flex-direction:column;gap:14px}
.p .pkg-track{display:block;width:80%;height:8px;border-radius:4px;background:rgba(var(--cc-fg, 255, 255, 255),.08);overflow:hidden}
.p .pkg-track .s-bar{width:100%;height:8px}
.p .pkg-rounds{display:flex;align-items:center;gap:6px}
.p .pkg-rounds em{margin-right:4px;font-style:normal;font-size:11.5px;color:var(--cc-mute)}
.p .pkg-rounds i{display:inline-grid;place-items:center;width:20px;height:20px;box-sizing:border-box;border:1px solid rgba(var(--cc-fg, 255, 255, 255),.18);border-radius:50%;font-size:10.5px;font-style:normal;color:var(--cc-mute);transition:border-color .35s,color .35s,background-color .35s}
.p .pkg-rounds i.on{border-color:var(--cc-mint);background-color:rgba(var(--cc-mint-rgb, 23, 255, 197),.14);color:var(--cc-fff, #fff)}
.p .pkg-ss-live{flex-direction:column;gap:10px}
.p .pkg-ss-live .pkg-pulse{width:80%;height:36px}

/* C: the Holistic feature, scene and list on the right */
.p .pkg-feat-b{min-width:0}
.p .pkg-feat-b .pkg-incw{margin-top:0;padding-top:0;border-top:0}

/* ------------------------------------------------ the Holistic scroll scene (wide screens) */
.p .pkg-hscene .p-canvas .p-vp.pkg-hvp{height:460px}
.p .pkg-hbox{position:absolute;left:22px;right:22px;top:22px;bottom:106px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:12px;padding:14px;box-sizing:border-box;border:1px dashed rgba(var(--cc-fg, 255, 255, 255),.16);border-radius:18px;background:rgba(var(--cc-bg-rgb, 4, 10, 9),.35)}
.p .pkg-hp{position:relative;display:flex;flex-direction:column;gap:3px;min-width:0;min-height:0;padding:12px 12px 10px;box-sizing:border-box;border:1px solid rgba(var(--cc-fg, 255, 255, 255),.13);border-radius:12px;background:var(--cc-d-0d1917, #0d1917);box-shadow:0 14px 30px rgba(var(--cc-k, 0, 0, 0), calc(.35 * var(--cc-ka, 1)))}
.p .pkg-hv{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;min-height:0}
.p .pkg-hv .pkg-mk{width:40px;height:40px}
.p .pkg-hv .pkg-sw i{width:16px;height:16px;border-radius:5px}
.p .pkg-hv.w{flex-direction:column;align-items:stretch;gap:6px;padding:0 8px}
.p .pkg-hv.w .pkg-blk.hero{height:22px}
.p .pkg-hv.c .pkg-cardp{width:46%;height:34%}
.p .pkg-hv.c .pkg-cardp.r{width:34%;height:52%}
.p .pkg-hv.s .pkg-grid6{width:52%}
.p .pkg-hv.a svg{display:block;width:54px;height:54px}
.p .pkg-hp-n{font-size:13px;font-weight:600;line-height:1.25;color:var(--cc-fff, #fff)}
.p .pkg-hp-p{font-size:12.5px;line-height:1.3;color:var(--cc-mute)}
.p .pkg-hp-v{color:var(--cc-mint);font-weight:600}
.p .pkg-hbar{position:absolute;left:22px;right:22px;bottom:20px;height:68px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 20px;box-sizing:border-box;border:1px solid var(--cc-line);border-radius:14px;background:var(--cc-d-0b1513, #0b1513)}
.p .pkg-hbar-l{display:flex;flex-direction:column;gap:3px;font-size:12px;line-height:1.3;color:var(--cc-mute)}
.p .pkg-cnt{font-size:24px;font-weight:600;line-height:1.3;letter-spacing:-.02em;color:var(--cc-fff, #fff);text-decoration:none}
.p s.pkg-cnt{font-size:18px;color:var(--cc-mute);text-decoration:line-through;text-decoration-color:rgba(var(--cc-fg, 255, 255, 255),.4)}
.p .pkg-hbar-r{font-size:14px;line-height:1.3;color:var(--cc-soft);transition:opacity .25s var(--cc-ease)}
.p .pkg-hbar-h{position:absolute;right:20px;top:50%;display:flex;align-items:baseline;gap:10px;font-size:14px;font-weight:600;line-height:1.3;color:var(--cc-fff, #fff);
  opacity:0;transform:translateY(-35%);transition:opacity .45s var(--cc-ease),transform .45s var(--cc-ease)}
.p .pkg-hbar.is-final .pkg-hbar-h{opacity:1;transform:translateY(-50%)}
.p .pkg-hbar.is-final .pkg-hbar-r{opacity:0}
.p .pkg-hbar [data-hsum]{transition:color .4s}
.p .pkg-hbar.is-final [data-hsum]{color:var(--cc-mute);text-decoration:line-through;text-decoration-color:rgba(var(--cc-fg, 255, 255, 255),.4)}
.p .pkg-cnt.is-h{font-size:30px;color:var(--cc-mint);text-shadow:0 0 22px rgba(var(--cc-mint-rgb, 23, 255, 197),.35)}
.p .pkg-hglow{position:absolute;left:22px;right:22px;top:22px;bottom:106px;box-sizing:border-box;border:1.5px solid rgba(var(--cc-mint-rgb, 23, 255, 197),.7);border-radius:18px;box-shadow:0 0 0 6px rgba(var(--cc-mint-rgb, 23, 255, 197),.06),0 0 50px rgba(var(--cc-mint-rgb, 23, 255, 197),.22),inset 0 0 40px rgba(var(--cc-mint-rgb, 23, 255, 197),.06);pointer-events:none}
.p .pkg-sv{font-weight:600;color:var(--cc-fff, #fff)}
.p .pkg-sv.m{color:var(--cc-mint)}
.p .pkg-hscene .pkg-hs-narrow{display:none}
.p .pkg-hscene .p-step b{font-size:16px}
.p .pkg-hscene .p-step .d>span{white-space:nowrap}

/* ------------------------------------------------ "What it builds": the project row */
.p .pkg-work-sec .pkg-mq{margin-top:44px}
.p .pkg-mq .mq-track a.pkg-wk{position:relative;width:320px;color:var(--cc-fff, #fff);text-decoration:none}
.p .pkg-wk img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.p .pkg-wk-t{position:absolute;left:12px;top:12px;display:inline-flex;align-items:center;height:24px;padding:0 10px;border:1px solid rgba(var(--cc-fg, 255, 255, 255),.2);border-radius:99px;background:rgba(var(--cc-bg-rgb, 7, 12, 11),.86);font-size:11.5px;font-weight:600;line-height:1;color:var(--cc-fff, #fff)}
.p .pkg-wk-t.is-h{border-color:rgba(var(--cc-mint-rgb, 23, 255, 197),.55);color:var(--cc-mint)}
.p .pkg-wk-n{position:absolute;left:0;right:0;bottom:0;padding:36px 14px 12px;background:linear-gradient(180deg,transparent,rgba(var(--cc-bg-rgb, 4, 10, 9),.94) 72%);font-size:13.5px;font-weight:600;line-height:1.3;color:var(--cc-fff, #fff)}

/* ------------------------------------------------ the steps walking sideways */
.p [data-pkg-hscroll]>.p-node{display:none}
/* plain figures: the site's tabular figures give Mona Sans a slashed zero, which reads like code (Kyro: no monospace look) */
.p .pkg-hs .hs-year,.p .pkg-hs .hs-stop small,.p .pkg-hscene .p-step .n,.p .pkg-hscene .p-prog{font-variant-numeric:lining-nums proportional-nums}
.p .pkg-hs .p-intro,.p .pkg-head .p-intro{text-wrap:pretty}
.p .pkg-hs .hs-stop{flex-basis:360px}
.p .pkg-hs .hs-stop.on .pkg-scene{border-color:rgba(var(--cc-mint-rgb, 23, 255, 197),.24)}

/* ------------------------------------------------ "Build your own plan" (the card reuses the contact form's .cf look and fields) */
.p .pkg-build{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:40px;align-items:start;margin-top:44px}
.p .pkg-pg+.pkg-pg{margin-top:26px}
.p .pkg-pks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.p .pkg-pk,.p .pkg-pk:hover,.p .pkg-pk:focus{position:relative;display:flex;align-items:center;gap:12px;width:100%;min-height:64px;margin:0;padding:10px 14px 10px 12px;box-sizing:border-box;
  border:1px solid var(--cc-line);border-radius:16px;background:rgba(var(--cc-fg, 255, 255, 255),.025);box-shadow:none;color:var(--cc-fff, #fff);font:inherit;line-height:1.3;text-align:left;text-transform:none;letter-spacing:0;cursor:pointer;
  transition:border-color .25s,background-color .25s,opacity .25s}
.p .pkg-pk:hover{border-color:rgba(var(--cc-mint-rgb, 23, 255, 197),.42)}
.p .pkg-pk[aria-pressed="true"]{border-color:rgba(var(--cc-mint-rgb, 23, 255, 197),.62);background:rgba(var(--cc-mint-rgb, 23, 255, 197),.08)}
.p .pkg-pk:focus-visible{outline:2px solid var(--cc-mint);outline-offset:2px}
.p .pkg-pk.is-h{grid-column:1/-1}
.p .pkg-pk.is-in{opacity:.5}
.p .pkg-pk-ck{display:grid;place-items:center;flex:none;width:22px;height:22px;box-sizing:border-box;border:1.5px solid rgba(var(--cc-fg, 255, 255, 255),.25);border-radius:7px;transition:border-color .25s,background-color .25s}
.p .pkg-pk-ck svg{width:14px;height:14px;color:var(--cc-mint);opacity:0;transform:scale(.6);transition:opacity .2s,transform .3s var(--cc-ease)}
.p .pkg-pk[aria-pressed="true"] .pkg-pk-ck{border-color:var(--cc-mint);background:rgba(var(--cc-mint-rgb, 23, 255, 197),.16)}
.p .pkg-pk[aria-pressed="true"] .pkg-pk-ck svg{opacity:1;transform:none}
.p .pkg-pk-n{display:flex;flex:1;flex-direction:column;gap:2px;min-width:0}
.p .pkg-pk-n b{font-size:14.5px;font-weight:600}
.p .pkg-pk-n em{font-style:normal;font-size:12px;color:var(--cc-mute)}
.p .pkg-pk-v{display:flex;flex:none;align-items:baseline;gap:4px;white-space:nowrap}
.p .pkg-pk-v i{font-style:normal;font-size:11.5px;color:var(--cc-mute)}
.p .pkg-pk-p{font-size:15px;font-weight:600;color:var(--cc-mint)}
.p .pkg-pk-per{font-size:11.5px;color:var(--cc-mute)}
.p .pkg-plan{margin:0}
.p .pkg-plan-k{margin:0;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--cc-mute)}
.p .pkg-plan-l{display:grid;gap:8px;margin:14px 0 0;padding:0;list-style:none}
.p .pkg-plan-l li{display:flex;justify-content:space-between;align-items:baseline;gap:14px;margin:0;padding:0;font-size:14.5px;line-height:1.35;color:var(--cc-fff, #fff);list-style:none}
.p .pkg-plan-l li span+span{flex:none;color:var(--cc-soft);white-space:nowrap}
.p .pkg-plan-l li.is-note{font-size:12.5px;color:var(--cc-mute)}
.p .pkg-plan-sum{display:grid;gap:7px;margin-top:16px;padding-top:14px;border-top:1px solid var(--cc-line)}
.p .pkg-plan-r{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:0;font-size:13.5px;line-height:1.35;color:var(--cc-mute)}
.p .pkg-plan-r[hidden],.p .pkg-nudge[hidden],.p .pkg-plan-done[hidden],.p .pkg-plan-time[hidden]{display:none}
.p .pkg-plan-r b{font-weight:600;color:var(--cc-fff, #fff)}
.p .pkg-plan-r s{color:var(--cc-mute)}
.p .pkg-plan-r.is-save b{color:var(--cc-mint)}
.p .pkg-plan-t{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:2px 0 0;font-size:14px;font-weight:600;color:var(--cc-fff, #fff)}
.p .pkg-plan-big{font-size:38px;font-weight:550;line-height:1.25;letter-spacing:-.03em;color:var(--cc-fff, #fff)}
.p .pkg-plan-time{margin-top:6px}
.p .pkg-nudge{margin-top:16px;padding:14px 16px;border:1px solid rgba(var(--cc-mint-rgb, 23, 255, 197),.35);border-radius:14px;background:rgba(var(--cc-mint-rgb, 23, 255, 197),.06)}
.p .pkg-nudge p{margin:0;font-size:13.5px;line-height:1.5;color:var(--cc-soft)}
.p .pkg-nudge p b{color:var(--cc-mint);font-weight:600}
.p .pkg-nudge-b,.p .pkg-nudge-b:hover,.p .pkg-nudge-b:focus{display:inline-flex;align-items:center;height:38px;margin:10px 0 0;padding:0 16px;border:1px solid var(--cc-mint);border-radius:99px;background:transparent;box-shadow:none;color:var(--cc-fff, #fff);font:600 13.5px/1 var(--cc-font);text-transform:none;letter-spacing:0;cursor:pointer;transition:background-color .25s}
.p .pkg-nudge-b:hover{background:rgba(var(--cc-mint-rgb, 23, 255, 197),.12)}
.p .pkg-plan-f .cf-label{margin-top:22px}
.p .pkg-opt{font-size:.85em;color:var(--cc-mute)}
.p .pkg-plan-done{align-content:center}
.p .pkg-plan-done .pkg-plan-l{width:100%;max-width:320px;margin:4px auto 0;text-align:left}
.p .pkg-plan-done p{margin:0}
.p .pkg-plan-bar{display:none}
/* "Add to my plan" on every package */
.p .pkg-addp,.p .pkg-addp:hover,.p .pkg-addp:focus{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;height:42px;margin:10px 0 0;padding:0 16px;box-sizing:border-box;
  border:1px dashed rgba(var(--cc-mint-rgb, 23, 255, 197),.38);border-radius:99px;background:transparent;box-shadow:none;color:var(--cc-soft);font:600 13.5px/1 var(--cc-font);text-transform:none;letter-spacing:0;cursor:pointer;
  transition:border-color .25s,color .25s,background-color .25s}
.p .pkg-addp:hover{border-color:var(--cc-mint);background:rgba(var(--cc-mint-rgb, 23, 255, 197),.06);color:var(--cc-fff, #fff)}
.p .pkg-addp svg{width:15px;height:15px;color:var(--cc-mint)}
.p .pkg-addp.is-on{border-style:solid;border-color:rgba(var(--cc-mint-rgb, 23, 255, 197),.6);color:var(--cc-fff, #fff)}
.p .pkg-feat-a .pkg-cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.p .pkg-feat-a .pkg-addp{width:auto;margin:0;height:54px;padding:0 22px}
@media (max-width:1099.98px){
  .p .pkg-build{grid-template-columns:minmax(0,1fr);gap:32px}
  .p .pkg-plan{max-width:620px}
}
@media (max-width:767.98px){
  .p .pkg-pks{grid-template-columns:minmax(0,1fr)}
  .p .pkg-plan{padding:24px 18px}
  .p .pkg-plan-big{font-size:34px}
  .p .pkg-plan-bar,.p .pkg-plan-bar:hover,.p .pkg-plan-bar:focus{position:fixed;left:12px;right:12px;bottom:12px;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:12px;
    height:58px;margin:0;padding:0 7px 0 18px;box-sizing:border-box;border:1px solid rgba(var(--cc-mint-rgb, 23, 255, 197),.45);border-radius:99px;background:rgba(var(--cc-bg-rgb, 9, 16, 14),.95);box-shadow:0 18px 50px rgba(var(--cc-k, 0, 0, 0), calc(.6 * var(--cc-ka, 1)));
    color:var(--cc-fff, #fff);font:inherit;font-size:14px;text-align:left;text-transform:none;letter-spacing:0;cursor:pointer;transform:translateY(150%);transition:transform .45s var(--cc-ease)}
  .p .pkg-plan-bar.is-on{transform:none}
  .p .pkg-plan-bar b{font-weight:600}
  .p .pkg-plan-bar span span{color:var(--cc-mint);font-weight:600}
  .p .pkg-plan-bar em{display:inline-flex;align-items:center;height:42px;padding:0 16px;border:1px solid rgba(var(--cc-mint-rgb, 23, 255, 197),.5);border-radius:99px;background:rgba(var(--cc-mint-rgb, 23, 255, 197),.12);font-style:normal;font-size:13.5px;font-weight:600;white-space:nowrap}
  .p .pkg-feat-a .pkg-addp{width:100%;height:42px}
}
@media (prefers-reduced-motion:reduce){
  .p .pkg-plan-bar,.p .pkg-pk,.p .pkg-pk-ck,.p .pkg-pk-ck svg{transition:none}
}

@media (max-width:1099.98px),(prefers-reduced-motion:reduce){
  .p .pkg-hscene .p-steps,.p .pkg-hscene .pkg-hs-intro{display:none}
  .p .pkg-hscene .pkg-hs-narrow{display:block;margin-top:34px;max-width:620px}
  .p .pkg-hscene .pkg-hs-narrow .p-btns{margin-top:26px}
}
@media (max-width:767.98px){
  .p .pkg-scene.is-big{height:220px}
  .p .pkg-mq .mq-track a.pkg-wk{width:250px}
}

/* =====================================================================================================================
   THE CARD SCENES, round 2 (Kyro: "make them better"): a real piece of the work fills each frame, as on the Process
   tiles (panels #0d1917 with a hairline border, small uppercase captions, mint only for what is done or chosen).
   Every scene ends on its result chip (.pkg-x-res). All sizes hold from 240 px wide (four cards at 1440) upwards.
   ===================================================================================================================== */
.p .pkg-x{display:block;padding:10px;box-sizing:border-box}
.p .pkg-x-pn{position:relative;box-sizing:border-box;border:1px solid rgba(var(--cc-fg, 255, 255, 255),.12);border-radius:12px;background:var(--cc-d-0d1917, #0d1917);box-shadow:0 14px 34px rgba(var(--cc-k, 0, 0, 0), calc(.35 * var(--cc-ka, 1)))}
.p .pkg-x>.pkg-x-pn:only-of-type,.p .pkg-x-audit>.pkg-x-pn,.p .pkg-x-care>.pkg-x-pn{height:100%;display:flex;flex-direction:column;gap:7px;padding:9px 11px}
.p .pkg-x-cap{display:block;font-size:8.5px;font-weight:600;line-height:1.2;letter-spacing:.14em;text-transform:uppercase;color:var(--cc-mute)}
.p .pkg-x-h{display:flex;align-items:center;gap:6px;min-width:0}
.p .pkg-x-h .pkg-x-cap{margin-left:auto;white-space:nowrap}
.p .pkg-x-fav{flex:none;width:9px;height:9px;border-radius:3px;background:linear-gradient(135deg,var(--cc-mint-hex, #17FFC5),#0A9E7E)}
.p .pkg-x-url{overflow:hidden;font-size:10px;font-weight:600;line-height:1.2;color:var(--cc-fff, #fff);white-space:nowrap;text-overflow:ellipsis}
.p .pkg-x-bar{display:flex;align-items:center;gap:3px;height:16px;padding:0 6px;border-bottom:1px solid rgba(var(--cc-fg, 255, 255, 255),.08)}
.p .pkg-x-bar>i{flex:none;width:5px;height:5px;border-radius:50%;background:rgba(var(--cc-fg, 255, 255, 255),.22)}
.p .pkg-x-bar .pkg-x-url{margin-left:6px;font-size:8.5px;font-weight:500;color:var(--cc-mute)}
.p .pkg-x .pkg-l{display:block;height:5px;border-radius:3px;background:rgba(var(--cc-fg, 255, 255, 255),.16);transform-origin:left}
.p .pkg-x .pkg-l.t{height:7px;background:rgba(var(--cc-fg, 255, 255, 255),.34)}
.p .pkg-x-pic{display:block;border-radius:6px;background:linear-gradient(135deg,var(--cc-d-145244, #145244),var(--cc-d-0b2a3a, #0b2a3a) 70%,#1863DC)}
/* the result chip: the last beat of every scene */
.p .pkg-x-res{display:inline-flex;align-items:center;align-self:flex-start;gap:6px;max-width:100%;margin-top:auto;padding:4px 10px 4px 5px;box-sizing:border-box;border:1px solid rgba(var(--cc-mint-rgb, 23, 255, 197),.45);border-radius:99px;background:var(--cc-d-0f231f, #0f231f);font-size:10px;font-weight:600;line-height:1.2;color:var(--cc-fff, #fff);white-space:nowrap}
.p .pkg-x-res .s-ok{width:15px;height:15px;font-size:9px}
/* placed without a CSS transform: the pop animates the transform (GSAP) */
.p .pkg-x-res.is-low{position:absolute;left:0;right:0;bottom:10px;width:max-content;max-width:calc(100% - 20px);margin:0 auto}

/* audit: a report for yourbusiness.com: the score and four bars, then the top fix */
.p .pkg-x-rep{display:flex;align-items:center;gap:12px}
.p .pkg-x-ring{position:relative;flex:none;width:60px;height:60px}
.p .pkg-x-ring svg{display:block;width:100%;height:100%}
.p .pkg-x-ring circle.bg{fill:none;stroke:rgba(var(--cc-fg, 255, 255, 255),.1);stroke-width:5}
.p .pkg-x-ring path.fg{fill:none;stroke:var(--cc-mint);stroke-width:5;stroke-linecap:round}
.p .pkg-x-ring b{position:absolute;left:0;right:0;top:15px;text-align:center;font-size:17px;font-weight:600;line-height:1.2;color:var(--cc-fff, #fff)}
.p .pkg-x-ring i{position:absolute;left:0;right:0;top:36px;text-align:center;font-style:normal;font-size:7.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--cc-mute)}
.p .pkg-x-cats{display:grid;flex:1;gap:6px;min-width:0;margin:0;padding:0;list-style:none}
.p .pkg-x-cats li{display:grid;grid-template-columns:minmax(0,7.2em) minmax(0,1fr);align-items:center;gap:6px;margin:0;font-size:9px;line-height:1.2;color:var(--cc-soft);list-style:none;white-space:nowrap}
.p .pkg-x-trk{display:block;height:5px;border-radius:3px;background:rgba(var(--cc-fg, 255, 255, 255),.08);overflow:hidden}
.p .pkg-x-trk b{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,rgba(var(--cc-mint-rgb, 23, 255, 197),.5),var(--cc-mint));transform-origin:left}
.p .pkg-x-fix{padding:7px 9px;border:1px solid rgba(var(--cc-fg, 255, 255, 255),.12);border-radius:9px;background:var(--cc-d-0a1412, #0a1412)}
.p .pkg-x-fix-h{display:flex;align-items:center;justify-content:space-between;gap:8px}
.p .pkg-x-fix .s-chip{padding:2px 8px;font-size:9px}
.p .pkg-x-fix p{margin:4px 0 0;font-size:10px;line-height:1.35;color:var(--cc-fff, #fff)}

/* website: the home page builds in one window, which then narrows into a phone and reflows into one column */
.p .pkg-x-bw{position:absolute;left:10px;top:10px;bottom:10px;width:calc(100% - 20px);box-sizing:border-box;border:1px solid rgba(var(--cc-fg, 255, 255, 255),.14);border-radius:10px;background:var(--cc-d-0d1917, #0d1917);overflow:hidden;box-shadow:0 14px 34px rgba(var(--cc-k, 0, 0, 0), calc(.35 * var(--cc-ka, 1)));
  transition:width .85s var(--cc-ease),left .85s var(--cc-ease),border-radius .85s var(--cc-ease),border-color .4s}
/* the phone and its result sit together in the middle of a wide frame (no empty half) */
.p .pkg-x-bw.on{left:max(10px,calc(50% - 128px));width:92px;border-radius:16px;border-color:rgba(var(--cc-fg, 255, 255, 255),.3)}
.p .pkg-x-bw .pkg-x-bar{transition:opacity .3s}
.p .pkg-x-bw.on .pkg-x-bar{opacity:0}
.p .pkg-x-d,.p .pkg-x-m{position:absolute;left:0;right:0;top:16px;bottom:0;display:flex;flex-direction:column;gap:7px;padding:8px 10px;box-sizing:border-box;transition:opacity .25s}
.p .pkg-x-d.on{opacity:0}
.p .pkg-x-m{top:0;width:92px;gap:5px;padding:12px 8px;opacity:0;transition:opacity .35s}
.p .pkg-x-m.on{opacity:1}
.p .pkg-x-nav{display:flex;align-items:center;gap:6px}
.p .pkg-x-nav span{display:block;width:16px;height:4px;border-radius:2px;background:rgba(var(--cc-fg, 255, 255, 255),.2)}
.p .pkg-x-nav span:first-of-type{margin-left:auto}
.p .pkg-x-nav b{display:block;width:24px;height:9px;border-radius:5px;background:rgba(var(--cc-mint-rgb, 23, 255, 197),.55)}
.p .pkg-x-logo{display:block;flex:none;width:18px;height:6px;border-radius:3px;background:rgba(var(--cc-fg, 255, 255, 255),.55)}
.p .pkg-x-burger{display:block;width:10px;height:7px;margin-left:auto;border-top:1.5px solid rgba(var(--cc-fg, 255, 255, 255),.5);border-bottom:1.5px solid rgba(var(--cc-fg, 255, 255, 255),.5);box-sizing:border-box}
.p .pkg-x-hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:8px;align-items:center}
.p .pkg-x-hero>div{display:flex;flex-direction:column;gap:5px}
.p .pkg-x-hero .pkg-x-pic{height:56px}
.p .pkg-x-btn{display:block;width:34px;height:10px;border-radius:5px;background:rgba(var(--cc-mint-rgb, 23, 255, 197),.55)}
.p .pkg-x-c3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:auto}
.p .pkg-x-c3 i{display:block;height:34px;border:1px solid rgba(var(--cc-fg, 255, 255, 255),.1);border-radius:6px;background:rgba(var(--cc-fg, 255, 255, 255),.04)}
.p .pkg-x-m .pkg-x-pic{height:30px}
.p .pkg-x-c1{display:block;height:16px;border:1px solid rgba(var(--cc-fg, 255, 255, 255),.1);border-radius:5px;background:rgba(var(--cc-fg, 255, 255, 255),.04)}
.p .pkg-x-res.is-side{position:absolute;left:max(114px,calc(50% - 24px));top:0;bottom:0;height:max-content;max-width:150px;margin:auto 0;align-self:auto;white-space:normal;text-align:left}

/* brand: the mark is drawn on a grid, then settles into the guide's header; colours with codes, the type, two uses */
.p .pkg-x-gd{position:absolute;inset:0;transition:opacity .45s}
.p .pkg-x-gd.on{opacity:0}
.p .pkg-x-gd i{position:absolute;box-sizing:border-box;border:1px dashed rgba(var(--cc-mint-rgb, 23, 255, 197),.22)}
.p .pkg-x-gd .c1{left:50%;top:50%;width:104px;height:104px;margin:-52px 0 0 -52px;border-radius:50%}
.p .pkg-x-gd .c2{left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%}
.p .pkg-x-gd .h{left:12%;right:12%;top:50%;height:0;border-width:1px 0 0}
.p .pkg-x-gd .v{top:8%;bottom:8%;left:50%;width:0;border-width:0 0 0 1px}
.p .pkg-x-mk{display:block;width:100%;height:100%;overflow:visible}
.p .pkg-x-mk .ln{fill:none;stroke:var(--cc-mint);stroke-width:2.6;stroke-linejoin:round;stroke-linecap:round}
.p .pkg-x-mk .ln.m{stroke:var(--cc-fff, #fff)}
/* the mark: drawn big in the middle, then it travels to its place in the guide (one object) */
.p .pkg-x-mkw{position:absolute;left:50%;top:50%;width:32px;height:32px;margin:-16px 0 0 -16px;transform:scale(2.5);transition:left .8s var(--cc-ease),top .8s var(--cc-ease),transform .8s var(--cc-ease)}
.p .pkg-x-mkw.on{left:37px;top:35px;transform:none}   /* the slot: frame 10 + sheet 11 + 16, frame 10 + sheet 9 + 16 */
.p .pkg-x-sheet{position:relative;height:100%;display:flex;flex-direction:column;gap:8px;padding:9px 11px;box-sizing:border-box}
.p .pkg-x-sbg{position:absolute;inset:0;border:1px solid rgba(var(--cc-fg, 255, 255, 255),.12);border-radius:12px;background:var(--cc-d-0d1917, #0d1917);box-shadow:0 14px 34px rgba(var(--cc-k, 0, 0, 0), calc(.35 * var(--cc-ka, 1)))}
.p .pkg-x-sheet>*:not(.pkg-x-sbg){position:relative}
.p .pkg-x-sh{display:flex;align-items:center;gap:10px;min-height:32px}
.p .pkg-x-slot{flex:none;width:32px;height:32px}
.p .pkg-x-sht{display:flex;flex-direction:column;gap:2px}
.p .pkg-x-sht b{font-size:13px;font-weight:600;font-stretch:112%;line-height:1.1;color:var(--cc-fff, #fff)}
.p .pkg-x-sws{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.p .pkg-x-sw{display:flex;flex-direction:column;gap:3px;min-width:0}
.p .pkg-x-sw i{display:block;height:18px;border-radius:5px}
.p .pkg-x-sw .a{background:var(--cc-mint-hex, #17FFC5)}
.p .pkg-x-sw .b{background:#1863DC}
.p .pkg-x-sw .c{background:#E9DCC7}
.p .pkg-x-sw .d{background:var(--cc-d-0b1513, #0B1513);box-shadow:inset 0 0 0 1px rgba(var(--cc-fg, 255, 255, 255),.25)}
.p .pkg-x-sw em{overflow:hidden;font-style:normal;font-size:8px;line-height:1.2;color:var(--cc-mute);white-space:nowrap;text-overflow:clip}
.p .pkg-x-use{display:flex;align-items:center;gap:8px}
.p .pkg-x-spec{display:flex;align-items:center;gap:6px;min-width:0;margin-right:auto}
.p .pkg-x-spec b{font-size:20px;font-weight:600;line-height:1.1;color:var(--cc-fff, #fff)}
.p .pkg-x-spec span{font-size:9.5px;font-weight:600;line-height:1.25;color:var(--cc-fff, #fff);white-space:nowrap}
.p .pkg-x-spec em{display:block;font-style:normal;font-weight:400;font-size:8px;color:var(--cc-mute)}
.p .pkg-x-bc{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:3px;flex:none;width:52px;height:32px;padding:5px;box-sizing:border-box;border:1px solid rgba(var(--cc-fg, 255, 255, 255),.16);border-radius:4px;background:var(--cc-d-132621, #132621)}
.p .pkg-x-bc .pkg-x-mk{position:absolute;left:5px;top:4px;width:11px;height:11px}
.p .pkg-x-bc i{display:block;width:60%;height:2.5px;border-radius:2px;background:rgba(var(--cc-fg, 255, 255, 255),.3)}
.p .pkg-x-bc i+i{width:40%}
.p .pkg-x-av{display:grid;place-items:center;flex:none;width:30px;height:30px;padding:6px;box-sizing:border-box;border:1px solid rgba(var(--cc-mint-rgb, 23, 255, 197),.4);border-radius:50%;background:var(--cc-d-0b1714, #0b1714)}
.p .pkg-x-sheet .pkg-x-res{margin-top:auto}

/* holistic: four real pieces on one board, joined to the mark, which lights */
.p .pkg-x-wire{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.p .pkg-x-wire .ln{fill:none;stroke:rgba(var(--cc-mint-rgb, 23, 255, 197),.55);stroke-width:1.4;stroke-linejoin:round}
.p .pkg-x-hub{position:absolute;left:41%;top:6%;width:18%;height:27%;display:grid;place-items:center;box-sizing:border-box;border:1px solid rgba(var(--cc-fg, 255, 255, 255),.16);border-radius:12px;background:var(--cc-d-0d1917, #0d1917)}
.p .pkg-x-hub .pkg-x-mk{position:relative;width:auto;height:64%;aspect-ratio:1}
.p .pkg-x-hubg{position:absolute;inset:-1px;border:1px solid transparent;border-radius:12px;transition:border-color .5s,box-shadow .6s}
.p .pkg-x-hubg.on{border-color:rgba(var(--cc-mint-rgb, 23, 255, 197),.8);box-shadow:0 0 0 4px rgba(var(--cc-mint-rgb, 23, 255, 197),.08),0 0 26px rgba(var(--cc-mint-rgb, 23, 255, 197),.3)}
.p .pkg-x-art{position:absolute;top:52%;width:21.1%;height:30%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:5px 4px;box-sizing:border-box;border:1px solid rgba(var(--cc-fg, 255, 255, 255),.14);border-radius:8px;background:var(--cc-d-0d1917, #0d1917);overflow:hidden}
.p .pkg-x-art em{font-style:normal;font-size:8px;font-weight:600;line-height:1.1;color:var(--cc-soft)}
.p .pkg-x-art .pkg-x-pic{width:86%;height:28%}
.p .pkg-x-art .pkg-l{width:70%;height:3px}
.p .pkg-x-art .pkg-x-bar.s{width:100%;height:auto;padding:0 0 2px;border:0}
.p .pkg-x-art .pkg-x-bar.s>i{width:3px;height:3px}
.p .pkg-x-swr{display:flex;gap:3px}
.p .pkg-x-swr i{display:block;width:9px;height:9px;border-radius:3px}
.p .pkg-x-swr .a{background:var(--cc-mint-hex, #17FFC5)}
.p .pkg-x-swr .b{background:#1863DC}
.p .pkg-x-swr .c{background:#E9DCC7}
.p .pkg-x-aa{font-size:11px;font-weight:600;line-height:1;color:var(--cc-fff, #fff)}
.p .pkg-x-fold{display:flex;gap:1px;height:40%;width:80%}
.p .pkg-x-fold i{flex:1;border-radius:2px;background:linear-gradient(160deg,var(--cc-d-1a3a33, #1a3a33),var(--cc-d-0e2a24, #0e2a24))}
.p .pkg-x-fold i:nth-child(2){background:linear-gradient(160deg,var(--cc-d-1a2b3d, #1a2b3d),var(--cc-d-0d1917, #0d1917))}
.p .pkg-x-post{display:block;height:40%;width:auto;aspect-ratio:1;border-radius:4px;background:linear-gradient(135deg,var(--cc-mint-hex, #17FFC5),#0A9E7E 60%,var(--cc-d-0b2a3a, #0b2a3a))}
/* the narrowest frames (four cards at 1100 to 1200 px): drop the report's caption, smaller colour codes */
.p .pkg-scene{container-type:inline-size}
@container (max-width:232px){
  .p .pkg-x-h .pkg-x-cap{display:none}
  .p .pkg-x-sw em{font-size:6.8px;letter-spacing:-.02em}
}

/* care: this month's dashboard: updates done one by one, the month up, an edit request done */
.p .pkg-x-rows{display:grid;gap:4px;margin:0;padding:0;list-style:none}
.p .pkg-x-rows li{display:flex;align-items:center;justify-content:space-between;gap:8px;height:18px;margin:0;padding:0 0 0 2px;font-size:10px;line-height:1.2;color:var(--cc-fff, #fff);list-style:none}
.p .pkg-x-st{position:relative;display:inline-grid;flex:none}
.p .pkg-x-st em{grid-area:1/1;justify-self:end;padding:2px 7px;border-radius:99px;font-style:normal;font-size:8.5px;font-weight:600;line-height:1.3;white-space:nowrap;transition:opacity .3s}
.p .pkg-x-st .w{border:1px solid rgba(255,190,90,.45);background:rgba(255,190,90,.08);color:#ffd9a0}
.p .pkg-x-st .ok{border:1px solid rgba(var(--cc-mint-rgb, 23, 255, 197),.45);background:rgba(var(--cc-mint-rgb, 23, 255, 197),.1);color:var(--cc-fff, #fff);opacity:0}
.p .pkg-x-st .ok:before{content:"\2713  ";color:var(--cc-mint)}
.p .pkg-x-st.on .w{opacity:0}
.p .pkg-x-st.on .ok{opacity:1}
.p .pkg-x-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:8px;align-items:stretch}
.p .pkg-x-up{display:flex;flex-direction:column;justify-content:center;gap:5px;min-width:0}
.p .pkg-x-days{position:relative;display:block;height:12px}
.p .pkg-x-days>span{position:absolute;inset:0;display:grid;grid-template-columns:repeat(30,minmax(0,1fr));gap:1.5px}
.p .pkg-x-days i{display:block;border-radius:1.5px;background:rgba(var(--cc-fg, 255, 255, 255),.1)}
.p .pkg-x-days .lit i{background:rgba(var(--cc-mint-rgb, 23, 255, 197),.75)}
.p .pkg-x-days .lit{clip-path:inset(0 100% 0 0);transition:clip-path 1.1s linear}
.p .pkg-x-days .lit.on{clip-path:inset(0 0 0 0)}
.p .pkg-x-req{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0;padding:6px 8px;border:1px solid rgba(var(--cc-fg, 255, 255, 255),.12);border-radius:8px;background:var(--cc-d-0a1412, #0a1412)}
.p .pkg-x-req b{max-width:100%;font-size:9px;font-weight:600;line-height:1.25;color:var(--cc-fff, #fff)}
.p .pkg-x-req .pkg-x-st em{justify-self:start}

/* growth: a local search; your row climbs from 7th to 3rd, then an AI answer cites you */
.p .pkg-x-grow{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:8px;align-items:start;padding-bottom:40px}
.p .pkg-x-serp{display:flex;flex-direction:column;gap:6px;padding:8px 9px}
.p .pkg-x-q{display:flex;align-items:center;gap:6px;height:20px;padding:0 8px;border:1px solid rgba(var(--cc-fg, 255, 255, 255),.16);border-radius:99px;background:var(--cc-d-0a1412, #0a1412);font-size:9.5px;color:var(--cc-fff, #fff);white-space:nowrap;overflow:hidden}
.p .pkg-x-q svg{flex:none;width:10px;height:10px;fill:none;stroke:var(--cc-mute);stroke-width:2.2;stroke-linecap:round}
.p .pkg-x-res-w{display:grid;grid-template-columns:12px minmax(0,1fr);gap:4px}
.p .pkg-x-rank{display:grid;grid-auto-rows:17px;margin:0;padding:0;list-style:none}
.p .pkg-x-rank li{display:flex;align-items:center;margin:0;font-size:8.5px;font-weight:600;color:var(--cc-mute);list-style:none;font-variant-numeric:lining-nums proportional-nums}
.p .pkg-x-list{display:grid;grid-auto-rows:17px;margin:0;padding:0;list-style:none}
.p .pkg-x-list li{display:flex;align-items:center;gap:6px;height:15px;margin:1px 0;padding:0 6px;box-sizing:border-box;border-radius:6px;list-style:none}
.p .pkg-x-list li i{flex:none;width:7px;height:7px;border-radius:2px;background:rgba(var(--cc-fg, 255, 255, 255),.2)}
.p .pkg-x-list li .pkg-l{width:60%}
.p .pkg-x-list li.me{position:relative;z-index:1;border:1px solid rgba(var(--cc-mint-rgb, 23, 255, 197),.55);background:var(--cc-d-0f231f, #0f231f)}
.p .pkg-x-list li.me i{background:var(--cc-mint)}
.p .pkg-x-list li.me b{overflow:hidden;font-size:9px;font-weight:600;line-height:1;color:var(--cc-fff, #fff);white-space:nowrap;text-overflow:ellipsis}
.p .pkg-x-aia{display:flex;flex-direction:column;gap:6px;padding:9px 9px 10px}
.p .pkg-x-cite{align-self:flex-start;max-width:100%;padding:2px 6px;border:1px solid rgba(var(--cc-fg, 255, 255, 255),.16);border-radius:99px;font-size:8px;font-weight:600;line-height:1.3;color:var(--cc-mute);white-space:nowrap;transition:border-color .4s,color .4s,background-color .4s}
.p .pkg-x-cite.on{border-color:rgba(var(--cc-mint-rgb, 23, 255, 197),.6);background:rgba(var(--cc-mint-rgb, 23, 255, 197),.1);color:var(--cc-fff, #fff)}

/* AI assistant: a site with its chat; the visitor asks, it answers, the lead lands in the inbox */
.p .pkg-x.pkg-x-ai{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:8px;align-items:start;padding-bottom:40px}
.p .pkg-x-site{display:flex;flex-direction:column;gap:5px;height:100%;padding:0 0 8px;overflow:hidden}
.p .pkg-x-site>.pkg-l{margin:0 9px}
.p .pkg-x-site>.pkg-l:first-of-type{margin-top:4px}
.p .pkg-x-chat{display:flex;flex-direction:column;gap:4px;margin:6px 8px 0 18%;padding:7px 8px;border:1px solid rgba(var(--cc-mint-rgb, 23, 255, 197),.3);border-radius:10px;background:var(--cc-d-0a1714, #0a1714);box-shadow:0 10px 24px rgba(var(--cc-k, 0, 0, 0), calc(.45 * var(--cc-ka, 1)))}
.p .pkg-x-b{max-width:92%;margin:0;padding:4px 7px;border-radius:8px;font-size:8.5px;line-height:1.3;color:var(--cc-fff, #fff)}
.p .pkg-x-b.q{align-self:flex-end;border-bottom-right-radius:3px;background:rgba(var(--cc-fg, 255, 255, 255),.12)}
.p .pkg-x-b.a{align-self:flex-start;border:1px solid rgba(var(--cc-mint-rgb, 23, 255, 197),.35);border-bottom-left-radius:3px;background:rgba(var(--cc-mint-rgb, 23, 255, 197),.07)}
.p .pkg-x-dots{display:flex;align-self:flex-start;gap:3px;height:0;margin:0;padding:0 6px;overflow:hidden;opacity:0;transition:opacity .2s}
.p .pkg-x-dots.on{height:auto;padding:4px 6px;opacity:1}
.p .pkg-x-dots i{width:4px;height:4px;border-radius:50%;background:rgba(var(--cc-fg, 255, 255, 255),.6);animation:pkg-dot 1s ease-in-out infinite}
.p .pkg-x-dots i:nth-child(2){animation-delay:.15s}
.p .pkg-x-dots i:nth-child(3){animation-delay:.3s}
@keyframes pkg-dot{0%,100%{opacity:.3}50%{opacity:1}}
.p .pkg-x-inbox{display:flex;flex-direction:column;gap:6px;padding:9px}
.p .pkg-x-lead{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:2px 6px;padding:6px 7px;border:1px solid rgba(var(--cc-mint-rgb, 23, 255, 197),.5);border-radius:8px;background:var(--cc-d-0f231f, #0f231f)}
.p .pkg-x-lead b{font-size:9.5px;font-weight:600;line-height:1.2;color:var(--cc-fff, #fff)}
.p .pkg-x-lead span{grid-column:2;font-size:8.5px;line-height:1.2;color:var(--cc-soft)}
.p .pkg-x-old{display:flex;align-items:center;gap:6px;padding:0 2px}
.p .pkg-x-old i{flex:none;width:6px;height:6px;border-radius:50%;background:rgba(var(--cc-fg, 255, 255, 255),.2)}
.p .pkg-x-old .pkg-l{width:70%}
@media (prefers-reduced-motion:reduce){
  .p .pkg-x-bw,.p .pkg-x-d,.p .pkg-x-m,.p .pkg-x-gd,.p .pkg-x-mkw,.p .pkg-x-hubg,.p .pkg-x-st em,.p .pkg-x-days .lit,.p .pkg-x-cite,.p .pkg-x-dots{transition:none}
  .p .pkg-x-dots i{animation:none}
}
@media (prefers-reduced-motion:reduce){
  .p .pkg-hero::after{animation:none}
  .p .pkg-mq{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .p .pkg-pv,.p .pkg-hb,.p .pkg-mc.m i,.p .pkg-rounds i,.p .pkg-tick{transition:none}
}