/* Velar Bureau — home packages: three ready solutions (js/pk3.js) */
.packages .pk-more { display: none; }
.pk3__tabs { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 16px; background: rgba(14, 15, 17, .06); }
.pk3__tabs button { padding: 11px 18px; border: 0; background: none; font: inherit; font-weight: 500; font-size: .95rem; color: #646A76; cursor: pointer; transition: background .25s, color .25s; }
.pk3__tabs button.is-on { background: #0E0F11; color: #E3E7ED; }
.pk3__g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pk3__c { display: flex; flex-direction: column; padding: clamp(24px, min(2.6vw, 37.44px), 40px); background: rgba(255, 255, 255, .45); border: 1px solid rgba(14, 15, 17, .1); color: #0E0F11;
  transition: transform .6s var(--ease), border-color .3s; }
.pk3__c:hover { transform: translateY(-4px); border-color: rgba(14, 15, 17, .35); }
.pk3__c--on { background: #0E0F11; color: #E3E7ED; border-color: #0E0F11; }
.pk3__c header { display: flex; justify-content: space-between; align-items: center; min-height: 26px; }
.pk3__n { font-family: var(--fm); font-size: .78rem; color: var(--signal); }
.pk3__rec { padding: 5px 9px; background: var(--signal); color: #0E0F11; font-size: .74rem; font-weight: 500; }
.pk3__c h3 { margin: 28px 0 0; font-weight: 500; font-size: clamp(1.8rem, min(2.6vw, 37.44px), 2.6rem); letter-spacing: -.04em; line-height: 1; }
.pk3__lead { margin: 12px 0 0; min-height: 3em; color: #646A76; font-size: .98rem; line-height: 1.45; }
.pk3__c--on .pk3__lead { color: #9CA2AD; }
.pk3__p { display: grid; gap: 6px; margin-top: 28px; padding-top: 24px; border-top: 1px solid rgba(14, 15, 17, .12); }
.pk3__c--on .pk3__p { border-top-color: rgba(227, 231, 237, .14); }
.pk3__p b { font-family: var(--fd); font-stretch: 112%; font-weight: 500; font-size: clamp(2.2rem, min(3.4vw, 48.96px), 3.4rem); letter-spacing: -.03em; line-height: 1; }
.pk3__p small { color: #646A76; font-size: .88rem; }
.pk3__c--on .pk3__p small { color: #9CA2AD; }
.pk3__c ul { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 10px; }
.pk3__c li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; font-size: .95rem; line-height: 1.35; }
.pk3__ck { width: 18px; height: 18px; color: var(--signal); }
.pk3__all { font-weight: 500; }
.pk3__go { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 56px; margin-top: auto; padding: 0 20px; border: 1px solid rgba(14, 15, 17, .25); font-weight: 500; transition: background .3s, color .3s, border-color .3s; }
.pk3__c ul { margin-bottom: 32px; }
.pk3__c { min-height: 100%; }
.pk3__go svg { width: 16px; height: 16px; transition: transform .45s var(--ease); }
.pk3__go:hover { background: #0E0F11; color: #E3E7ED; border-color: #0E0F11; }
.pk3__go:hover svg { transform: translate(3px, -3px); }
.pk3__c--on .pk3__go { background: var(--signal); color: #0E0F11; border-color: var(--signal); }
.pk3__c--on .pk3__go:hover { background: #E3E7ED; border-color: #E3E7ED; }
.pk3__more { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 22px 0 0; color: #646A76; }
.pk3__more a { display: inline-flex; align-items: center; gap: 8px; color: #0E0F11; font-weight: 500; border-bottom: 1px solid currentColor; }
.pk3__more a svg { width: 14px; height: 14px; }
.pk3__more em { font-style: normal; margin-left: auto; font-size: .84rem; }
@media (max-width: 1000px) { .pk3__g { grid-template-columns: minmax(0, 1fr); } .pk3__lead { min-height: 0; } .pk3__more em { margin-left: 0; width: 100%; } }
/* one set of packages (no sector tabs) and an enterprise block that reads as its own tier */
.pk3__ent { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px clamp(20px, min(2.4vw, 34.56px), 36px); margin-top: 10px;
  padding: 18px 18px 18px clamp(22px, min(2.4vw, 34.56px), 34px); background: #0E0F11; color: #E3E7ED; position: relative; transition: background .35s; }
.pk3__ent::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--signal); }
.pk3__ent:hover { background: #17191C; }
.pk3__ent-tag { padding: 5px 9px; border: 1px solid rgba(227, 231, 237, .24); font-family: var(--fm); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--signal); }
.pk3__ent-t { display: grid; gap: 3px; }
.pk3__ent-t b { font-weight: 500; font-size: clamp(1.05rem, min(1.4vw, 20.16px), 1.35rem); letter-spacing: -.02em; }
.pk3__ent-t small { color: #9CA2AD; font-size: .9rem; }
.pk3__ent-go { display: inline-flex; align-items: center; justify-content: space-between; gap: 20px; height: 52px; min-width: 190px; padding: 0 20px; background: var(--signal); color: #0E0F11; font-weight: 500; transition: background .3s; }
.pk3__ent-go svg { width: 16px; height: 16px; transition: transform .45s var(--ease); }
.pk3__ent:hover .pk3__ent-go { background: #E3E7ED; }
.pk3__ent:hover .pk3__ent-go svg { transform: translate(3px, -3px); }
@media (max-width: 900px) { .pk3__ent { grid-template-columns: minmax(0, 1fr); justify-items: start; padding: 22px; } }
.pk3__note { margin: 16px 0 0; font-size: .84rem; color: #646A76; }
/* the middle card stays dark; the enterprise block is the darkest, so the middle card gets a lighter graphite */
.pk3__c--on { background: #1C1F23; border-color: #1C1F23; }

/* the price as a scratch ticket (js/pk3.js): a dark card, a dotted plate over the price, holographic glow on tilt */
.tk { position: relative; display: flex; flex-direction: column; gap: 12px; margin-top: 28px; padding: 14px 14px 12px; aspect-ratio: 505 / 300; background: #131313; color: #F7F7EE;
  box-shadow: 0 40px 70px -40px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .07); transform-style: preserve-3d; will-change: transform; overflow: hidden; container-type: inline-size; }
.tk.is-scratching { user-select: none; -webkit-user-select: none; }
.tk__top { display: flex; align-items: center; justify-content: space-between; padding: 0 4px; font-size: max(11px, 3.4cqw); font-weight: 500; }
.tk__top b { font-family: var(--fd); font-stretch: 125%; font-weight: 700; font-size: max(10px, 3cqw); letter-spacing: .04em; }
.tk__top span { color: #B8B8B0; }
.tk__area { position: relative; flex: 1; overflow: hidden; background: #131313; cursor: crosshair; touch-action: pan-y; }
.tk__prize { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--fd); font-stretch: 112%; font-weight: 700; font-size: 16cqw; line-height: 1; letter-spacing: -.04em; white-space: nowrap; }
.tk__prize span { grid-area: 1 / 1; background: linear-gradient(180deg, #F2F2EE 0%, #9A9A94 46%, #E6E6E0 54%, #6F6F6A 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tk__prize span + span { opacity: .66; filter: blur(1.6cqw); transform: translateY(.8cqw); z-index: -1; }
.pk3__c--on .tk__prize span:first-child { background: linear-gradient(180deg, #FFD9CF 0%, #E2492B 48%, #FF8A6E 54%, #B8331A 100%); -webkit-background-clip: text; background-clip: text; }
.tk__cv { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; transition: opacity .7s, transform .7s var(--ease); }
.tk.is-open .tk__cv { opacity: 0; transform: scale(1.06); }
.tk__meta { position: absolute; left: 8px; right: 8px; bottom: 6px; z-index: 2; display: flex; justify-content: space-between; pointer-events: none; font-family: var(--fd); font-stretch: 112%; font-weight: 600; font-size: max(8px, 2.3cqw); line-height: 1.3; letter-spacing: .04em; color: #E8E8E2; }
.tk__meta div { display: grid; } .tk__meta div + div { text-align: right; }
.tk__fx { position: absolute; z-index: 4; display: block; pointer-events: none; }
.tk__holo { width: 78%; aspect-ratio: 1; border-radius: 50%; left: 50%; top: 50%; opacity: 0; transform: translate(-50%, -50%); background: conic-gradient(from 0deg, #CBFD5C, #35ADE9, #5607FF, #FF6A1A, #CBFD5C); filter: blur(40px); mix-blend-mode: color-dodge; }
.tk__shine { width: 50%; aspect-ratio: 1; border-radius: 50%; left: 50%; top: 50%; opacity: 0; transform: translate(-50%, -50%); background: #E8E8E8; filter: blur(30px); mix-blend-mode: overlay; z-index: 5; }
.tk__grain { inset: 0; opacity: .4; mix-blend-mode: overlay; background-size: 128px 128px; z-index: 5; }
.tk__hint { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 10px 0 0; font-size: .82rem; color: #8C929C; transition: opacity .4s; }
.tk__show { padding: 0; border: 0; background: none; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.tk__show:hover { color: var(--signal); }
.pk3__c.is-open .tk__hint { opacity: 0; pointer-events: none; }
.pk3__c--on .tk { box-shadow: 0 40px 70px -40px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .1); }
@media (prefers-reduced-motion: reduce) { .tk__cv { display: none; } .tk__hint { display: none; } }

/* calmer ticket: no top line or small print, the price plain and left-aligned like the rest of the type */
.tk { aspect-ratio: auto; height: clamp(110px, min(9vw, 129.6px), 140px); padding: 0; }
.tk__top, .tk__meta, .tk__holo, .tk__shine { display: none !important; }
.tk__prize { justify-items: start; padding: 0 clamp(18px, 7cqw, 28px); font-family: var(--fd); font-stretch: 112%; font-weight: 500; font-size: clamp(2.2rem, min(3.4vw, 48.96px), 3.4rem); letter-spacing: -.03em; }
.tk__prize span, .pk3__c--on .tk__prize span:first-child { background: none !important; -webkit-background-clip: border-box; background-clip: border-box; color: #F7F7EE; }
.tk__prize span + span { display: none; }
.pk3__sub { margin: 10px 0 0; font-size: .88rem; color: #646A76; }
.pk3__c--on .pk3__sub { color: #9CA2AD; }
.tk__hint > span { display: none; }
.tk__hint { justify-content: flex-start; margin-top: 4px; }

/* price with the one-off / monthly line right under it. Under the plate the price already sits on the card itself
   (no ticket background, final colours and alignment), so scratching reveals exactly what stays; only the plate fades out */
.tk, .tk__area { background: transparent !important; box-shadow: none !important; }
.pk3__c--on .tk { box-shadow: none !important; }
.tk__grain { display: none; }
.tk__prize { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 8px; padding: 0 !important; }
.tk__prize span { color: #0E0F11 !important; }
.pk3__c--on .tk__prize span { color: #F7F7EE !important; }
.tk__once { font-family: var(--f); font-stretch: 100%; font-weight: 400; font-size: .95rem; letter-spacing: 0; line-height: 1.3; white-space: normal; color: #646A76; }
.pk3__c--on .tk__once { color: #9CA2AD; }
.tk.is-open { transform: none !important; }
.tk.is-open .tk__area { cursor: default; }

/* hint on the plate: a finger rubbing back and forth, gone on the first stroke */
.tk__rub { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 0 14px; pointer-events: none;
  color: #F7F7EE; font-size: .86rem; font-weight: 500; line-height: 1.25; text-align: left; text-shadow: 0 1px 8px rgba(0, 0, 0, .35); transition: opacity .35s, transform .35s var(--ease); }
.tk__rub span { max-width: 22ch; }
.tk__rub-ic { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: rgba(14, 15, 17, .55); box-shadow: 0 0 0 1px rgba(255, 255, 255, .14); }
.tk__rub-ic svg { width: 30px; height: 30px; overflow: visible; }
.tk__rub-tr { opacity: .55; }
.tk__rub-f { animation: tkRub 1.6s cubic-bezier(.45, 0, .55, 1) infinite; transform-box: fill-box; }
@keyframes tkRub { 0%, 100% { transform: translate(-5px, 2px) rotate(-8deg); } 50% { transform: translate(6px, -1px) rotate(6deg); } }
.tk.is-touched .tk__rub, .tk.is-open .tk__rub { opacity: 0; transform: scale(.96); }
@media (prefers-reduced-motion: reduce) { .tk__rub { display: none; } }

/* the earned discount: old price struck through, a signal chip */
.tk__disc { position: absolute; right: 0; top: 50%; z-index: 2; display: grid; justify-items: end; gap: 6px; transform: translateY(-50%); animation: tkIn .6s var(--ease) both .25s; }
.tk__disc s { font-family: var(--fd); font-stretch: 112%; font-size: 1rem; color: #8C929C; text-decoration-thickness: 1.5px; }
.tk__disc b { padding: 5px 9px; background: var(--signal); color: #0E0F11; font-size: .74rem; font-weight: 500; white-space: nowrap; }
@keyframes tkIn { from { opacity: 0; transform: translate(10px, -50%); } }

/* achievement toast */
.ach { position: fixed; left: 50%; bottom: max(24px, env(safe-area-inset-bottom, 0px) + 16px); z-index: 1000; display: flex; align-items: center; gap: 14px; width: min(420px, calc(100vw - 32px));
  padding: 14px 16px 14px 14px; background: #0E0F11; color: #E3E7ED; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .08);
  opacity: 0; transform: translate(-50%, 24px) scale(.96); pointer-events: none; transition: opacity .4s, transform .6s var(--ease); }
.ach::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--signal); }
.ach.is-on { opacity: 1; transform: translate(-50%, 0) scale(1); }
.ach__ic { flex: none; width: 44px; height: 44px; display: grid; place-items: center; background: var(--signal); color: #0E0F11; }
.ach.is-on .ach__ic { animation: achPop .7s var(--ease) both .1s; }
.ach__ic svg { width: 24px; height: 24px; }
.ach__t { display: grid; gap: 2px; min-width: 0; }
.ach__t small { font-family: var(--fm); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--signal); }
.ach__t b { font-weight: 500; font-size: 1.05rem; letter-spacing: -.01em; }
.ach__t em { font-style: normal; font-size: .84rem; color: #9CA2AD; line-height: 1.35; }
.ach__pct { margin-left: auto; font-family: var(--fd); font-stretch: 112%; font-weight: 600; font-size: 1.6rem; letter-spacing: -.03em; color: var(--signal); }
@keyframes achPop { 0% { transform: scale(.4) rotate(-20deg); } 60% { transform: scale(1.12) rotate(6deg); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .ach { transition: opacity .3s; transform: translate(-50%, 0); } .ach.is-on .ach__ic { animation: none; } }

/* compact hint: a small plate with a signal square sliding along a dashed track, one word, and a glint passing over the plate */
.tk__rub { inset: auto; left: 50%; top: 50%; transform: translate(-50%, -50%); gap: 10px; padding: 8px 14px 8px 10px; background: rgba(14, 15, 17, .72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font-family: var(--fd); font-stretch: 125%; font-weight: 600; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; text-shadow: none; white-space: nowrap; }
.tk__rub span { max-width: none; }
.tk__rub-ic { width: 40px; height: 16px; border-radius: 0; background: none; box-shadow: none; }
.tk__rub-ic svg { width: 40px; height: 16px; }
.tk__rub-tr { opacity: .4; }
.tk__rub-f { animation: tkSlide 1.8s cubic-bezier(.65, 0, .35, 1) infinite; transform-box: view-box; }
@keyframes tkSlide { 0%, 100% { transform: translateX(-13px); } 50% { transform: translateX(13px); } }
.tk.is-touched .tk__rub, .tk.is-open .tk__rub { opacity: 0; transform: translate(-50%, -50%) scale(.92); }
.tk__area::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .2) 50%, transparent 62%) no-repeat; background-size: 260% 100%; animation: tkGlint 3.4s ease-in-out infinite; }
@keyframes tkGlint { 0% { background-position: 140% 0; } 55%, 100% { background-position: -40% 0; } }
.tk.is-touched .tk__area::after, .tk.is-open .tk__area::after { display: none; }
@media (prefers-reduced-motion: reduce) { .tk__area::after { display: none; } }

/* achievement toast slides in from the right edge, bottom-right corner */
.ach { left: auto; right: max(24px, env(safe-area-inset-right, 0px) + 16px); transform: translateX(calc(100% + 48px)); transition: opacity .3s, transform .7s cubic-bezier(.2, .9, .25, 1); }
.ach.is-on { transform: none; }
@media (max-width: 720px) { .ach { right: 16px; bottom: calc(88px + env(safe-area-inset-bottom, 0px)); } }
@media (prefers-reduced-motion: reduce) { .ach, .ach.is-on { transform: none; } }

/* v234 — phone: the old price and the discount chip sit beside the big number, not over the line under it */
@media (max-width: 700px) { .tk__disc { top: 6px; transform: none; gap: 4px; } }

/* scratch switched off (js/pk3.js, SCRATCH = false): the price shows at once, in the same place and type as the opened ticket */
.tk--plain .tk__area { cursor: default; }
.tk--plain .tk__area::after { display: none; }
.tk--plain .tk__disc { animation: none; }
.pk3__c--plain .tk { height: auto; min-height: clamp(110px, min(9vw, 129.6px), 140px); }
.pk3__c--plain .tk__area { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; align-content: start; column-gap: 12px; row-gap: 10px; overflow: visible; }
.pk3__c--plain .tk__prize { display: contents; }
.pk3__c--plain .tk__prize > span { grid-column: 1; grid-row: 1; }
.pk3__c--plain .tk__once { grid-column: 1 / -1; grid-row: 2; }
.pk3__c--plain .tk__disc { position: static; transform: none; grid-column: 2; grid-row: 1; }
.pk3__c--plain .tk + ul { margin-top: 28px; }