/* 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(255,255,255,.045),rgba(255,255,255,.012) 46%),#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(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:#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(23,255,197,.05),rgba(255,255,255,0) 40%),var(--cc-glass-2);box-shadow:0 30px 80px rgba(0,0,0,.45)}
.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:#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:#fff;text-decoration:none}
.p .pkg-rung:hover{color:#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(23,255,197,.09),rgba(23,255,197,.02));box-shadow:0 0 24px rgba(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(23,255,197,.34);box-shadow:0 30px 90px -40px rgba(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(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(23,255,197,.62);border-radius:var(--cc-r);box-shadow:0 0 0 1px rgba(23,255,197,.12),0 0 42px rgba(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(23,255,197,.34);border-top:0;border-radius:0 0 10px 10px;background:rgba(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(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(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:#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:#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:#fff;font-weight:600}
.p .pkg-alt.is-strike .pkg-alt-v{color:var(--cc-mute);text-decoration:line-through;text-decoration-color:rgba(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(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(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(255,255,255,.07);list-style:none}
.p .pkg-sum-n{font-size:14.5px;color:#fff}
.p .pkg-sum-bar{position:relative;height:8px;border-radius:99px;background:rgba(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(23,255,197,.35),var(--cc-mint));box-shadow:0 0 12px rgba(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:#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:#fff}
.p .pkg-sum-big{font-size:30px;font-weight:550;letter-spacing:-.02em;color:#fff}
.p .pkg-sum-big.is-old{font-size:22px;color:var(--cc-mute);text-decoration:line-through;text-decoration-color:rgba(255,255,255,.35)}
.p .pkg-sum-pk .pkg-sum-big{color:var(--cc-mint);text-shadow:0 0 22px rgba(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:#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:#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(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(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:#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(0,0,0,.25)}
.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:#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(23,255,197,.24);border-radius:28px;background:radial-gradient(70% 140% at 100% 50%,rgba(23,255,197,.10),transparent 60%),#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:#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(23,255,197,.07),rgba(23,255,197,.015));box-shadow:inset 0 0 0 1px rgba(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:#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(255,255,255,.07);border-radius:99px;font-size:13px;line-height:1.2;color:rgba(255,255,255,.42);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(23,255,197,.32);background-color:rgba(23,255,197,.07);color:#fff}
.pkg-js .p .pkg-cov:not(.is-seen) li.on{border-color:rgba(255,255,255,.07);background-color:transparent;color:rgba(255,255,255,.42)}

/* ------------------------------------------------ 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(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:#0a1311;background-image:radial-gradient(rgba(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:#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(255,255,255,.16);transform-origin:left}
.p .pkg-scene .pkg-l.t,.p .pkg-hvp .pkg-l.t{height:8px;background:rgba(255,255,255,.34)}
.p .pkg-hvp .pkg-l{display:block;height:6px;border-radius:3px;background:rgba(255,255,255,.16)}
.p .pkg-blk{display:block;width:100%;border-radius:6px;background:linear-gradient(135deg,#123a31,#0a2230)}
.p .pkg-blk.hero{height:26px}
.p .pkg-blk.sm{height:13px;background:rgba(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(255,255,255,.08)}
.p .pkg-px{display:inline-flex;align-items:center;height:20px;padding:0 8px;border:1px solid rgba(23,255,197,.35);border-radius:99px;background:rgba(23,255,197,.08);font-size:10.5px;font-weight:600;line-height:1;color:#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(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:#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(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(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:#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(255,255,255,.14);border-radius:10px;background:#0d1917;overflow:hidden;box-shadow:0 14px 30px rgba(0,0,0,.35)}
.p .pkg-win-bar{display:flex;align-items:center;gap:4px;height:22px;padding:0 6px 0 8px;border-bottom:1px solid rgba(255,255,255,.08)}
.p .pkg-win-bar>i{width:6px;height:6px;border-radius:50%;background:rgba(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(255,255,255,.3);border-radius:14px;background:#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:#fff}
.p .pkg-sheet{width:min(90%,250px);padding:11px 14px 12px;box-sizing:border-box;border:1px solid rgba(255,255,255,.14);border-radius:12px;background:#0d1917;box-shadow:0 14px 30px rgba(0,0,0,.35)}
.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:#17FFC5}
.p .pkg-sw .b{background:#1863DC}
.p .pkg-sw .c{background:#E9DCC7}
.p .pkg-sw .d{background:#10201c;box-shadow:inset 0 0 0 1px rgba(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:#fff}
.p .pkg-type span{font-size:12px;font-weight:600;line-height:1.3;color:#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(255,255,255,.14);border-radius:12px;transition:border-color .5s,box-shadow .6s}
.p .pkg-hb.on{border-color:rgba(23,255,197,.7);box-shadow:0 0 0 4px rgba(23,255,197,.07),0 0 28px rgba(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(255,255,255,.14);border-radius:9px;background:#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(23,255,197,.3);background:linear-gradient(135deg,#1a3a33,#0e2a24)}
.p .pkg-cardp.r{width:44%;height:36%;background:linear-gradient(160deg,#1a2b3d,#0d1917);border-color:rgba(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(255,255,255,.12)}
.p .pkg-grid6 i:nth-child(2),.p .pkg-grid6 i:nth-child(6){background:rgba(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:#fff}
.p .pkg-bub.q{align-self:flex-end;border-bottom-right-radius:4px;background:rgba(255,255,255,.1)}
.p .pkg-bub.a{align-self:flex-start;border:1px solid rgba(23,255,197,.35);border-bottom-left-radius:4px;background:rgba(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(255,255,255,.14);border-radius:7px;background:#0d1917}
.p .pkg-mc.m{background:linear-gradient(180deg,#0f231f,#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(23,255,197,.8);box-shadow:0 0 16px rgba(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(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(255,255,255,.14);border-radius:10px;background:#0d1917}
.p .pkg-ss-make{flex-direction:column;gap:14px}
.p .pkg-track{display:block;width:80%;height:8px;border-radius:4px;background:rgba(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(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(23,255,197,.14);color:#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(255,255,255,.16);border-radius:18px;background:rgba(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(255,255,255,.13);border-radius:12px;background:#0d1917;box-shadow:0 14px 30px rgba(0,0,0,.35)}
.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:#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:#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:#fff;text-decoration:none}
.p s.pkg-cnt{font-size:18px;color:var(--cc-mute);text-decoration:line-through;text-decoration-color:rgba(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:#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(255,255,255,.4)}
.p .pkg-cnt.is-h{font-size:30px;color:var(--cc-mint);text-shadow:0 0 22px rgba(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(23,255,197,.7);border-radius:18px;box-shadow:0 0 0 6px rgba(23,255,197,.06),0 0 50px rgba(23,255,197,.22),inset 0 0 40px rgba(23,255,197,.06);pointer-events:none}
.p .pkg-sv{font-weight:600;color:#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:#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(255,255,255,.2);border-radius:99px;background:rgba(7,12,11,.86);font-size:11.5px;font-weight:600;line-height:1;color:#fff}
.p .pkg-wk-t.is-h{border-color:rgba(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(4,10,9,.94) 72%);font-size:13.5px;font-weight:600;line-height:1.3;color:#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(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(255,255,255,.025);box-shadow:none;color:#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(23,255,197,.42)}
.p .pkg-pk[aria-pressed="true"]{border-color:rgba(23,255,197,.62);background:rgba(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(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(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:#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:#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:#fff}
.p .pkg-plan-big{font-size:38px;font-weight:550;line-height:1.25;letter-spacing:-.03em;color:#fff}
.p .pkg-plan-time{margin-top:6px}
.p .pkg-nudge{margin-top:16px;padding:14px 16px;border:1px solid rgba(23,255,197,.35);border-radius:14px;background:rgba(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:#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(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(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(23,255,197,.06);color:#fff}
.p .pkg-addp svg{width:15px;height:15px;color:var(--cc-mint)}
.p .pkg-addp.is-on{border-style:solid;border-color:rgba(23,255,197,.6);color:#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(23,255,197,.45);border-radius:99px;background:rgba(9,16,14,.95);box-shadow:0 18px 50px rgba(0,0,0,.6);
    color:#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(23,255,197,.5);border-radius:99px;background:rgba(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(255,255,255,.12);border-radius:12px;background:#0d1917;box-shadow:0 14px 34px rgba(0,0,0,.35)}
.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,#17FFC5,#0A9E7E)}
.p .pkg-x-url{overflow:hidden;font-size:10px;font-weight:600;line-height:1.2;color:#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(255,255,255,.08)}
.p .pkg-x-bar>i{flex:none;width:5px;height:5px;border-radius:50%;background:rgba(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(255,255,255,.16);transform-origin:left}
.p .pkg-x .pkg-l.t{height:7px;background:rgba(255,255,255,.34)}
.p .pkg-x-pic{display:block;border-radius:6px;background:linear-gradient(135deg,#145244,#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(23,255,197,.45);border-radius:99px;background:#0f231f;font-size:10px;font-weight:600;line-height:1.2;color:#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(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:#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(255,255,255,.08);overflow:hidden}
.p .pkg-x-trk b{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,rgba(23,255,197,.5),var(--cc-mint));transform-origin:left}
.p .pkg-x-fix{padding:7px 9px;border:1px solid rgba(255,255,255,.12);border-radius:9px;background:#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:#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(255,255,255,.14);border-radius:10px;background:#0d1917;overflow:hidden;box-shadow:0 14px 34px rgba(0,0,0,.35);
  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(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(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(23,255,197,.55)}
.p .pkg-x-logo{display:block;flex:none;width:18px;height:6px;border-radius:3px;background:rgba(255,255,255,.55)}
.p .pkg-x-burger{display:block;width:10px;height:7px;margin-left:auto;border-top:1.5px solid rgba(255,255,255,.5);border-bottom:1.5px solid rgba(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(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(255,255,255,.1);border-radius:6px;background:rgba(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(255,255,255,.1);border-radius:5px;background:rgba(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(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:#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(255,255,255,.12);border-radius:12px;background:#0d1917;box-shadow:0 14px 34px rgba(0,0,0,.35)}
.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:#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:#17FFC5}
.p .pkg-x-sw .b{background:#1863DC}
.p .pkg-x-sw .c{background:#E9DCC7}
.p .pkg-x-sw .d{background:#0B1513;box-shadow:inset 0 0 0 1px rgba(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:#fff}
.p .pkg-x-spec span{font-size:9.5px;font-weight:600;line-height:1.25;color:#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(255,255,255,.16);border-radius:4px;background:#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(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(23,255,197,.4);border-radius:50%;background:#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(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(255,255,255,.16);border-radius:12px;background:#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(23,255,197,.8);box-shadow:0 0 0 4px rgba(23,255,197,.08),0 0 26px rgba(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(255,255,255,.14);border-radius:8px;background:#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:#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:#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,#1a3a33,#0e2a24)}
.p .pkg-x-fold i:nth-child(2){background:linear-gradient(160deg,#1a2b3d,#0d1917)}
.p .pkg-x-post{display:block;height:40%;width:auto;aspect-ratio:1;border-radius:4px;background:linear-gradient(135deg,#17FFC5,#0A9E7E 60%,#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:#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(23,255,197,.45);background:rgba(23,255,197,.1);color:#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(255,255,255,.1)}
.p .pkg-x-days .lit i{background:rgba(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(255,255,255,.12);border-radius:8px;background:#0a1412}
.p .pkg-x-req b{max-width:100%;font-size:9px;font-weight:600;line-height:1.25;color:#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(255,255,255,.16);border-radius:99px;background:#0a1412;font-size:9.5px;color:#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(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(23,255,197,.55);background:#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:#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(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(23,255,197,.6);background:rgba(23,255,197,.1);color:#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(23,255,197,.3);border-radius:10px;background:#0a1714;box-shadow:0 10px 24px rgba(0,0,0,.45)}
.p .pkg-x-b{max-width:92%;margin:0;padding:4px 7px;border-radius:8px;font-size:8.5px;line-height:1.3;color:#fff}
.p .pkg-x-b.q{align-self:flex-end;border-bottom-right-radius:3px;background:rgba(255,255,255,.12)}
.p .pkg-x-b.a{align-self:flex-start;border:1px solid rgba(23,255,197,.35);border-bottom-left-radius:3px;background:rgba(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(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(23,255,197,.5);border-radius:8px;background:#0f231f}
.p .pkg-x-lead b{font-size:9.5px;font-weight:600;line-height:1.2;color:#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(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}
}