/* ══════════════════════════════════════════════════════════════════════════
   THE INVITATION CARD — the consultation section (#konsultaciya), 7 Oct 2026.
   Built from the design board the founder approved
   (claude.ai/artifact/Y4ipZ3h4FvLVorXNhSrmdD, v21) and his words:
     «i love how everything looks now» (the tactile paper look, 7 Oct)
     «btw … i like this button» (the gold .event button)
     «our clients are old ladies» → one tap does it, dragging is only extra
   The card rises on scroll, tilts with the mouse, turns over to the calendar,
   the calendar's ink soaks away (Riddle's diary), the boarding pass is tossed
   in from the right, and one tap on the stub tears it off and books the call.
   The stub moves like paper (js/booking.js runs it frame by frame), and the
   ending is the board's F6: a seal with a tick, «Вы записаны» in ink, and the
   gold piece of the ticket she keeps.
   Paper and gold textures are small seamless tiles (assets/img/tex-*.webp).
   Drawn by js/booking.js. No inline style anywhere: the CSP forbids it.
   ══════════════════════════════════════════════════════════════════════════ */

.cons{
  --paper:#FCF0E5;
  --ink:#2E1128;
  --ink-2:#5A4453;
  --ink-3:#7A6272;
  --gold-ink:#9A630F;
  --plum-ink:#371536;
  --hair:rgba(46,17,40,.14);
  position:relative;overflow-x:clip;isolation:isolate;
  padding:clamp(96px,10vw,150px) 0 clamp(110px,11vw,170px);
  background:
    radial-gradient(58% 46% at 50% 30%, rgba(104,52,100,.55), rgba(104,52,100,0) 72%),
    radial-gradient(120% 80% at 50% 118%, #12050e 0%, rgba(18,5,14,0) 62%),
    #26122a;
}
/* the velvet: a fine grain over the plum, never a pattern you can see */
.cons::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:url(../assets/img/tex-grain.webp) 0 0/256px 256px;opacity:.05}   /* 8 Oct 2026: no blend mode (it re-blended the whole section on every scroll frame) */

.paper{background:var(--paper) url(../assets/img/tex-paper-ivory.webp) 0 0/768px 768px}
.goldpaper{background:#F0B760 url(../assets/img/tex-paper-gold.webp) 0 0/512px 512px}

/* ── the card in space ─────────────────────────────────────────────────── */
.ccard{position:relative;max-width:1000px;margin:0 auto;perspective:2200px;perspective-origin:50% 38%;scroll-margin-top:96px}
.ccard__tilt{position:relative;transform-style:preserve-3d;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .55s cubic-bezier(.16,1,.3,1)}
.ccard__inner{position:relative;display:grid;transform-style:preserve-3d;transition:transform .85s cubic-bezier(.45,.05,.2,1)}
.ccard.is-flipped .ccard__inner{transform:rotateY(180deg)}
.ccard__inner.is-resizing{transition:transform .85s cubic-bezier(.45,.05,.2,1), height .45s cubic-bezier(.3,.1,.2,1)}
.ccard__face{grid-area:1/1;position:relative;min-width:0;border-radius:3px;color:var(--ink);
  -webkit-backface-visibility:hidden;backface-visibility:hidden;transform-style:preserve-3d;
  /* card stock: a lit top edge, a slight warm fall-off, real thickness (five 1px edges), a soft long shadow */
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), inset 0 -40px 60px -50px rgba(110,60,30,.22),
    0 1px 0 #EAD9C9, 0 2px 0 #E2CEBC, 0 3px 0 #D9C3AF, 0 4px 0 #CFB7A1, 0 5px 0 #C4AA92,
    0 6px 2px rgba(40,12,36,.5), 0 24px 34px -14px rgba(26,6,24,.6), 0 70px 100px -40px rgba(26,6,24,.75)}
.ccard__back{transform:rotateY(180deg)}
/* light across the paper; js/booking.js moves it with the mouse */
.ccard__face::after{content:"";position:absolute;inset:0;border-radius:3px;pointer-events:none;
  background:radial-gradient(70% 60% at 22% 14%, rgba(255,255,255,.22), rgba(255,255,255,0) 60%),
             linear-gradient(155deg, rgba(255,255,255,0) 40%, rgba(80,40,20,.08) 100%)}

/* ── rising on scroll (only once the script has proved it can also show it) ── */
.js-card .ccard__tilt{transform-origin:50% 100%}
.js-card .ccard:not(.is-in) .ccard__tilt{opacity:0;transform:translateY(150px) rotateX(36deg) scale(.93);transition:none}
.js-card .ccard.is-in .ccard__tilt{transition:transform .95s cubic-bezier(.16,1,.3,1), opacity .5s ease-out}
.js-card .ccard:not(.is-in) .ccard__print{transform:translateZ(150px) rotate(-9deg);opacity:0}
.js-card .ccard.is-in .ccard__print{transition:transform .9s cubic-bezier(.16,1,.3,1) .28s, opacity .4s ease-out .28s}

/* ── FRONT ─────────────────────────────────────────────────────────────── */
.ccard__front{min-height:620px;display:flex;align-items:center;padding:56px 56px 56px 446px}
.ccard__mark{position:absolute;top:28px;right:32px;width:42px;height:42px;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.8)) drop-shadow(0 -1px 0 rgba(110,70,15,.3))}
.ccard__print{position:absolute;left:-54px;top:46px;width:404px;margin:0;padding:14px 14px 0;background:#FBF7F1;border-radius:2px;
  transform:translateZ(60px) rotate(-3deg);-webkit-backface-visibility:hidden;backface-visibility:hidden;
  box-shadow:inset 0 1px 0 #fff, 0 1px 0 rgba(40,12,36,.05), 0 16px 22px -10px rgba(26,6,24,.5), 0 44px 70px -24px rgba(26,6,24,.6)}
.ccard__print img{display:block;width:100%;height:auto;aspect-ratio:376/452;object-fit:cover;object-position:50% 22%}
.ccard__print figcaption{padding:14px 4px 18px;font-size:13px;line-height:1.4;color:var(--ink-2)}
.ccard__body{position:relative;max-width:480px}
.ccard__kicker{margin:0 0 14px;font-size:15px;font-weight:600;letter-spacing:.02em;color:var(--gold-ink);text-shadow:0 1px 0 rgba(255,255,255,.7)}
.ccard__h{margin:0 0 18px;font-family:var(--serif);font-weight:500;font-size:clamp(40px,4.3vw,54px);line-height:1.04;letter-spacing:-.01em;
  color:var(--ink);text-wrap:balance;text-shadow:0 1px 0 rgba(255,255,255,.85), 0 -1px 0 rgba(46,17,40,.08)}
.ccard__lede{margin:0 0 26px;max-width:440px;font-size:16px;line-height:1.6;color:var(--ink-2);text-shadow:0 1px 0 rgba(255,255,255,.6)}
.ccard__facts{margin:0 0 30px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--hair);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
.ccard__facts div{padding:14px 16px 0}
.ccard__facts div:first-child{padding-left:0}
.ccard__facts div+div{border-left:1px solid rgba(46,17,40,.12)}
.ccard__facts dt{margin:0 0 4px;font-size:13px;line-height:1.3;color:var(--ink-3)}
.ccard__facts dd{margin:0;font-size:16px;font-weight:600;line-height:1.35;color:var(--ink)}
.ccard__cta{display:flex;align-items:center;flex-wrap:wrap;gap:18px 22px}
.ccard__cta .event{flex:none}
.ccard__cta .btn{padding:19px 36px;font-size:17px}
.ccard__note{margin:0;max-width:230px;font-size:13px;line-height:1.45;color:var(--ink-3)}

/* ── BACK: shared ─────────────────────────────────────────────────────── */
.ccard__back{display:flex;flex-direction:column;min-height:620px;padding:46px 56px 38px;outline:none}
.pill{display:inline-flex;align-items:center;gap:8px;padding:12px 18px;border-radius:999px;border:1px solid rgba(46,17,40,.16);
  background:rgba(255,255,255,.45);box-shadow:inset 0 1px 0 #fff, 0 4px 10px -6px rgba(46,17,40,.4);
  font:600 14px/1 var(--sans);color:var(--ink);white-space:nowrap;cursor:pointer;text-decoration:none;
  transition:background .2s, box-shadow .2s, transform .15s}
.pill svg{width:18px;height:18px;flex:none}
@media (hover:hover){ .pill:hover{background:rgba(255,255,255,.75)} }
.pill:active{transform:translateY(1px)}
.ccard :focus-visible{outline:3px solid var(--gold-ink);outline-offset:3px}
/* headings the script moves the focus to (tabindex=-1) are not controls: no box round them */
.ccard [tabindex="-1"]:focus{outline:none}
/* the ticket's fields show focus with their own thicker line and light ground (.tk__in:focus) */
.ccard .tk__in:focus-visible{outline:none}

/* ── the calendar ─────────────────────────────────────────────────────── */
.cal{display:flex;flex-direction:column;flex:1}
.cal[hidden]{display:none}
.cal__head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px 24px}
.cal__h{margin:0 0 8px;font-family:var(--serif);font-weight:500;font-size:clamp(32px,3.2vw,40px);line-height:1.1;color:var(--ink);
  text-shadow:0 1px 0 rgba(255,255,255,.85);outline:none}
.cal__tz{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;max-width:60ch}
.cal__now{margin:0;font-size:14px;line-height:1.45;color:var(--ink-3)}
.cal__now b{font-weight:600;color:var(--ink-2)}
.cal__tzbtn{padding:2px 0;border:0;background:none;font:inherit;font-size:13.5px;color:var(--ink-2);
  text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.cal__tzsel{flex-basis:100%;max-width:380px;margin-top:6px;padding:10px 12px;border-radius:8px;border:1px solid rgba(46,17,40,.22);
  background:rgba(255,255,255,.7);color:var(--ink);font:inherit;font-size:15px}
.cal__tzsel[hidden]{display:none}
.cal__days{display:flex;align-items:center;gap:10px;margin-top:26px}
.cal__arrow{flex:none;width:44px;height:44px;display:grid;place-items:center;border-radius:999px;border:1px solid rgba(46,17,40,.16);
  background:rgba(255,255,255,.5);box-shadow:inset 0 1px 0 #fff, 0 4px 10px -6px rgba(46,17,40,.4);color:var(--ink);cursor:pointer}
.cal__arrow svg{width:18px;height:18px}
.cal__arrow:disabled{opacity:.4;cursor:default;box-shadow:none}
.cal__strip{flex:1;min-width:0;display:flex;gap:6px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;padding:6px 2px 8px;margin:-6px 0 -8px}
.cal__strip::-webkit-scrollbar{display:none}
.cal__day{flex:0 0 calc((100% - 54px) / 10);min-width:62px;scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:10px 0 9px;border:0;border-radius:10px;background:transparent;font-family:var(--sans);color:var(--ink);cursor:pointer;
  transition:background .2s, box-shadow .2s}
.cal__wd{font-size:13px;font-weight:600;color:var(--ink-3)}
.cal__num{font-family:var(--serif);font-size:28px;line-height:1.1;font-variant-numeric:lining-nums;text-shadow:0 1px 0 rgba(255,255,255,.85)}
.cal__mon{font-size:12px;color:var(--ink-3)}
@media (hover:hover){ .cal__day:not(:disabled):not([aria-pressed="true"]):hover{background:rgba(255,255,255,.45)} }
.cal__day[aria-pressed="true"]{background:#F0B760 url(../assets/img/tex-paper-gold.webp) 0 0/512px;color:var(--plum-ink);
  box-shadow:inset 0 2px 5px rgba(110,60,5,.35), inset 0 -1px 0 rgba(255,255,255,.35), 0 1px 0 rgba(255,255,255,.8)}
.cal__day[aria-pressed="true"] .cal__wd,.cal__day[aria-pressed="true"] .cal__mon{color:var(--plum-ink)}
.cal__day:disabled{cursor:default;opacity:.38}
.cal__day.is-closed .cal__num{text-decoration:line-through;text-decoration-thickness:1px}
.cal__rule{height:1px;margin-top:16px;background:var(--hair);box-shadow:0 1px 0 rgba(255,255,255,.7)}
.cal__slots{margin-top:18px;display:flex;flex-direction:column;gap:14px}
.cal__part{margin:0 0 9px;font-size:13px;font-weight:600;color:var(--ink-3)}
.cal__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:9px}
.cal__slot{height:46px;border-radius:10px;border:1px solid rgba(46,17,40,.16);background:rgba(255,255,255,.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95), 0 1px 0 rgba(46,17,40,.08), 0 6px 10px -8px rgba(46,17,40,.45);
  font:600 16px/1 var(--sans);color:var(--ink);font-variant-numeric:lining-nums tabular-nums;cursor:pointer;
  transition:transform .15s, box-shadow .2s, background .2s, border-color .2s}
@media (hover:hover){ .cal__slot:not(:disabled):hover{background:#FFFDF9;border-color:rgba(46,17,40,.45);transform:translateY(-2px);
  box-shadow:inset 0 1px 0 #fff, 0 2px 0 rgba(46,17,40,.12), 0 12px 18px -10px rgba(46,17,40,.55)} }
.cal__slot:active{transform:translateY(1px)}
/* unavailable = outside our hours, booked or too soon: one quiet look, never «someone took it» */
.cal__slot:disabled{cursor:not-allowed;background:transparent;box-shadow:none;border-style:dashed;border-color:rgba(46,17,40,.2);
  color:rgba(46,17,40,.38);text-decoration:line-through;text-decoration-color:rgba(46,17,40,.35);font-weight:500}
.cal__slot.is-chosen{background:#FFFDF9;border-color:rgba(46,17,40,.45);animation:slotPress .34s ease-out both;
  box-shadow:inset 0 1px 0 #fff, 0 0 0 3px #F0B760, 0 10px 16px -10px rgba(46,17,40,.5)}
@keyframes slotPress{0%{transform:translateY(-2px)}40%{transform:translateY(1px) scale(.95)}100%{transform:none}}
.cal__alt{margin:auto 0 0;padding-top:24px;font-size:13px;color:var(--ink-3)}
.cal__alt a{color:var(--ink-3);text-decoration:underline;text-underline-offset:3px}
.cal__msg{max-width:52ch;padding:20px 0}
.cal__msg p{margin:0 0 18px;font-size:16px;line-height:1.6;color:var(--ink-2)}
.cal__skel{display:grid;gap:10px;margin-top:22px}
.cal__skel i{display:block;height:46px;border-radius:10px;background:rgba(46,17,40,.06);animation:calPulse 1.3s ease-in-out infinite}
.cal__skel i:first-child{height:70px;margin-bottom:10px}
@keyframes calPulse{50%{background:rgba(46,17,40,.11)}}
/* 8 Oct 2026: the small plane instead of the grey bars (css/plane.css) */
.cal__skel--plane{display:flex;justify-content:center;padding:46px 0 34px}
.tk__sending--plane{display:flex;align-items:center;justify-content:center;gap:12px}
.cal__wait{margin:16px 0 0;font-size:15px;line-height:1.5;color:var(--ink-2)}

/* ── ink: the calendar soaks into the paper, the ticket's words come up ── */
.is-soaking [data-ink]{animation:inkSoak .75s cubic-bezier(.3,.1,.3,1) both}
.is-unsoaking [data-ink]{animation:inkReturn .7s cubic-bezier(.3,.1,.2,1) both}
@keyframes inkSoak{0%{opacity:1;filter:none;text-shadow:0 0 0 rgba(46,17,40,0)}
  24%{opacity:1;filter:blur(.35px);text-shadow:0 0 5px rgba(46,17,40,.45)}
  60%{opacity:.5;filter:blur(1.6px);text-shadow:0 0 9px rgba(46,17,40,.25)}
  100%{opacity:0;filter:blur(3px);text-shadow:0 0 12px rgba(46,17,40,0);visibility:hidden}}
@keyframes inkReturn{0%{opacity:0;filter:blur(4px)}35%{opacity:.4;filter:blur(2px)}100%{opacity:1;filter:none}}
.ink-w{display:inline-block;white-space:nowrap}
.ink-l{position:relative;display:inline-block;white-space:pre}
.ink-c{display:inline-block;opacity:0;animation:inkIn 1.2s cubic-bezier(.3,.1,.2,1) both}
.ink-b{position:absolute;left:0;top:0;color:#6A3560;filter:blur(3px);opacity:0;pointer-events:none;animation:inkBleed 1s ease-out both}
.tk__stub .ink-b,.tk__time .ink-b{color:#F0B760}
@keyframes inkIn{0%{opacity:0;filter:blur(6px)}30%{opacity:.35;filter:blur(3px)}100%{opacity:1;filter:none}}
@keyframes inkBleed{0%{opacity:0;transform:scale(1.4)}22%{opacity:.5;transform:scale(1.22)}60%{opacity:.22;transform:scale(1.07)}100%{opacity:0;transform:scale(1)}}

/* ── the boarding pass ────────────────────────────────────────────────── */
.tk{display:flex;flex-direction:column;flex:1}
.tk[hidden]{display:none}
.tk__head{display:flex;align-items:center;justify-content:space-between;gap:16px 24px}
.tk__h{margin:0;font-family:var(--serif);font-weight:500;font-size:clamp(28px,3vw,36px);line-height:1.1;color:var(--ink);outline:none}
.tk__head .pill{flex:none}
.tk__pass{position:relative;margin-top:20px;transform:rotate(-.6deg)}
.tk__pass.is-dropping{animation:tkDrop 1.36s linear both}
.tk__pass.is-leaving{animation:tkLeave .55s cubic-bezier(.5,0,.75,0) both}
@keyframes tkDrop{
  0%{transform:perspective(1400px) translate(var(--tk-x),-170px) rotateY(-26deg) rotateX(12deg) rotate(11deg) scale(1.1);
    filter:drop-shadow(0 60px 50px rgba(26,6,24,.45));animation-timing-function:cubic-bezier(.22,.61,.36,1)}
  33.8%{transform:perspective(1400px) translate(28px,8px) rotateY(-5deg) rotateX(3.5deg) rotate(-2.2deg) scale(1.025);
    filter:drop-shadow(0 22px 24px rgba(26,6,24,.38));animation-timing-function:cubic-bezier(.55,0,.8,.4)}
  42.6%{transform:perspective(1400px) translate(-4px,2px) rotateY(2.4deg) rotateX(-1.8deg) rotate(-1.4deg) scale(1);
    filter:drop-shadow(0 6px 8px rgba(26,6,24,.3));animation-timing-function:cubic-bezier(.12,.7,.3,1)}
  58.8%{transform:perspective(1400px) translate(-17px,0) rotateY(-1.1deg) rotateX(.7deg) rotate(-.1deg) scale(1);animation-timing-function:cubic-bezier(.4,0,.3,1)}
  73.5%{transform:perspective(1400px) translate(6px,0) rotateY(.45deg) rotateX(-.3deg) rotate(-.9deg) scale(1);animation-timing-function:ease-in-out}
  86.8%{transform:perspective(1400px) translate(-2px,0) rotateY(-.15deg) rotateX(.1deg) rotate(-.5deg) scale(1);animation-timing-function:ease-in-out}
  100%{transform:perspective(1400px) translate(0,0) rotateY(0deg) rotateX(0deg) rotate(-.6deg) scale(1);filter:drop-shadow(0 2px 3px rgba(26,6,24,.18))}}
@keyframes tkLeave{to{transform:translateY(-24px) rotate(-.6deg) scale(1.03);opacity:0}}
.tk.is-going .tk__head,.tk.is-going .tk__legal{opacity:0;transition:opacity .35s ease}
.ccard{--tk-x:min(1050px,110vw)}
.tk__body{position:relative;border-radius:12px 12px 0 0;padding:18px 30px 22px;color:var(--plum-ink);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 1px 0 rgba(120,70,10,.25), 0 12px 20px -10px rgba(60,20,40,.4)}
.tk__top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:12px;border-bottom:1px solid rgba(55,21,54,.18)}
.tk__brand{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:700;letter-spacing:.03em;white-space:nowrap}
.tk__brand svg{width:20px;height:20px}
.tk__kind{font-size:13px;font-weight:600;opacity:.8;white-space:nowrap}
.tk__grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:40px;padding-top:16px}
.tk__form{display:flex;flex-direction:column;gap:14px;margin:0}
.tk__f{display:flex;flex-direction:column;gap:4px}
.tk__lbl{font-size:13px;font-weight:700;letter-spacing:.02em;color:rgba(55,21,54,.8)}
.tk__lbl em{font-style:normal;font-weight:600;opacity:.8}
.tk__in{height:40px;width:100%;padding:0 2px;border:0;border-bottom:1.5px solid rgba(55,21,54,.38);border-radius:0;background:transparent;
  font:600 18px/1.2 var(--sans);color:var(--ink);outline:none;transition:border-color .2s, background .2s}
.tk__in:focus{border-bottom:2px solid var(--plum-ink);background:rgba(255,255,255,.18)}
.tk__in[aria-invalid="true"]{border-bottom-color:#B3343A;background:rgba(221,90,95,.12)}
.tk__in:disabled{opacity:.85;-webkit-text-fill-color:var(--ink)}
.tk__in:-webkit-autofill,.tk__in:-webkit-autofill:hover,.tk__in:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--ink);caret-color:var(--ink);transition:background-color 600000s 0s, color 600000s 0s}
.tk__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* WhatsApp instead of Google Meet (founder, 7 Oct 2026: «as a toggle on button»).
   Off = Google Meet, the default. The whole row is the switch, big enough for any finger;
   the real checkbox sits under the drawn one, so the keyboard and screen readers work. */
.tk__wa{position:relative;display:flex;align-items:center;gap:14px;margin:2px -12px 0;padding:10px 12px;border-radius:12px;
  cursor:pointer;-webkit-user-select:none;user-select:none;transition:background .2s}
.tk__wa[hidden]{display:none}
@media (hover:hover){ .tk__wa:hover{background:rgba(255,255,255,.2)} }
.tk__wain{position:absolute;left:12px;top:50%;width:50px;height:30px;margin:-15px 0 0;opacity:0;cursor:pointer}
.tk__waknob{position:relative;flex:none;width:50px;height:30px;border-radius:999px;background:rgba(55,21,54,.24);
  box-shadow:inset 0 2px 4px rgba(55,21,54,.32);transition:background .25s;pointer-events:none}
.tk__waknob::after{content:"";position:absolute;left:3px;top:3px;width:24px;height:24px;border-radius:999px;background:#FEF0E7;
  box-shadow:0 2px 4px rgba(46,17,40,.35), inset 0 -1px 0 rgba(46,17,40,.12);transition:transform .28s cubic-bezier(.3,.7,.4,1.2)}
.tk__wain:checked + .tk__waknob{background:var(--plum-ink)}
.tk__wain:checked + .tk__waknob::after{transform:translateX(20px)}
.tk__wain:focus-visible + .tk__waknob{outline:3px solid var(--plum-ink);outline-offset:3px}
.tk__wain:disabled,.tk__wa:has(.tk__wain:disabled){cursor:default}
.tk__wain:disabled + .tk__waknob{opacity:.65}
.tk__watxt{display:flex;flex-direction:column;gap:2px;line-height:1.25}
.tk__watxt b{font-size:16px;font-weight:700;color:var(--plum-ink)}
.tk__wahint{font-size:13px;font-weight:600;color:rgba(55,21,54,.74)}
.tk__facts{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 20px;align-content:start}
.tk__facts dt{font-size:12px;font-weight:700;letter-spacing:.03em;color:rgba(55,21,54,.78)}
.tk__facts dd{margin:2px 0 0;font-size:17px;font-weight:600;line-height:1.3;min-height:1.3em}
.tk__facts dd.tk__time{margin:0;font-family:var(--serif);font-size:34px;font-weight:500;line-height:1.15;font-variant-numeric:lining-nums tabular-nums;min-height:1.15em}
.tk__edge{position:absolute;left:0;right:0;bottom:-7px;height:14px;pointer-events:none;clip-path:inset(0 100% 0 0);
  background:radial-gradient(circle at 8px 7px, #F6EADF 4.5px, transparent 5px) 0 0/16px 14px repeat-x}
.tk__err{margin:16px 0 0;padding:11px 14px;border-left:3px solid #B3343A;border-radius:0 8px 8px 0;background:rgba(255,246,240,.55);
  font-size:15px;font-weight:600;line-height:1.5;color:#7A1F26}
.tk__err[hidden]{display:none}
.tk__legal{margin:18px 0 0;max-width:62ch;font-size:13px;line-height:1.5;color:var(--ink-3)}
.tk__legal a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.tk__pass.is-shaking{animation:tkShake .42s cubic-bezier(.36,.07,.19,.97) both}
@keyframes tkShake{10%,90%{transform:translateX(-1px) rotate(-.6deg)}20%,80%{transform:translateX(3px) rotate(-.6deg)}
  30%,50%,70%{transform:translateX(-5px) rotate(-.6deg)}40%,60%{transform:translateX(5px) rotate(-.6deg)}}

/* ── the stub: sticks out, one tap tears it, dragging works too ───────── */
.tk__stubwrap{position:relative}
.tk__stubwrap.nudge{animation:stubNudge 3.2s ease-in-out 1.6s infinite}
@keyframes stubNudge{0%,74%,100%{transform:translateY(0)}80%{transform:translateY(6px)}86%{transform:translateY(0)}91%{transform:translateY(3px)}96%{transform:translateY(0)}}
.tk__stub{position:relative;display:flex;align-items:center;gap:22px;width:100%;margin:0;padding:20px 30px 22px;border:0;
  border-top:2px dashed rgba(240,183,96,.6);border-radius:0 0 14px 14px;background:#3A1838 url(../assets/img/tex-paper-plum.webp) 0 0/512px;
  color:#FEF0E7;font-family:var(--sans);text-align:left;cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none;
  transform-origin:100% 0;transition:transform .45s cubic-bezier(.16,1,.3,1), opacity .3s;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10), inset 0 -10px 18px -12px rgba(0,0,0,.45), 0 2px 0 #22101F, 0 22px 30px -14px rgba(26,6,24,.75)}
.tk__stub.is-live{transition:none}
/* after a failed try, a fresh stub slides back in */
.tk__stub.is-back{animation:stubBack .55s cubic-bezier(.2,.8,.2,1) both}
@keyframes stubBack{from{transform:translateY(26px);opacity:0}to{transform:none;opacity:1}}
/* the torn part: a still copy of the stub that peels off and falls (js/booking.js) */
.tk__flap{position:absolute;left:0;right:0;top:0;z-index:1;pointer-events:none;will-change:transform}
.tk__flap .tk__stub{transition:none;cursor:default}
.tk__flap,.tk__flap *{animation:none!important}
.tk__flap .ink-c{opacity:1;filter:none}
.tk__flap .ink-b,.tk__flap .tk__ring{display:none}
.tk__stub:focus-visible{outline:3px solid #F0B760;outline-offset:3px}
.tk__notch{position:absolute;top:-13px;width:24px;height:24px;border-radius:999px;pointer-events:none;clip-path:inset(11px 0 0 0)}
/* the round notches where the stub joins: each piece keeps its own half, so they part cleanly */
.tk__bn{position:absolute;bottom:-13px;width:24px;height:24px;border-radius:999px;pointer-events:none;clip-path:inset(0 0 13px 0)}
.tk__bn--l{left:-12px;box-shadow:inset -2px 0 3px rgba(60,20,40,.25)}
.tk__bn--r{right:-12px;box-shadow:inset 2px 0 3px rgba(60,20,40,.25)}
.tk__notch--l{left:-12px;box-shadow:inset -2px 0 3px rgba(60,20,40,.25)}
.tk__notch--r{right:-12px;box-shadow:inset 2px 0 3px rgba(60,20,40,.25)}
/* his favourite gold button, on the stub */
.tk__pill{position:relative;isolation:isolate;flex:none;display:inline-flex;border-radius:999px}
.tk__pill::before,.tk__pill::after{content:"";position:absolute;border-radius:999px;pointer-events:none;
  background:linear-gradient(135deg,#593283 0%,#DD5A5F 52%,#F0B760 100%)}
.tk__pill::before{inset:-3px;z-index:-1}
.tk__pill::after{inset:-16px;z-index:-2;opacity:.38;filter:blur(20px)}
.tk__pillin{display:inline-flex;flex:1;align-items:center;justify-content:center;gap:12px;padding:15px 28px 15px 18px;border-radius:999px;
  background:#F0B760;color:#371536;font-size:19px;font-weight:700;line-height:1;white-space:nowrap}
.tk__hand{position:relative;flex:none;width:30px;height:30px}
.tk__hand svg{display:block;width:100%;height:100%;animation:tapHand 1.6s ease-in-out infinite}
.tk__ring{position:absolute;left:4px;top:-4px;width:22px;height:22px;border-radius:999px;border:2px solid #371536;animation:tapRing 1.6s ease-out infinite}
@keyframes tapHand{0%,55%,100%{transform:translateY(0) scale(1)}63%{transform:translateY(2px) scale(.9)}72%{transform:translateY(0) scale(1)}}
@keyframes tapRing{0%,58%{transform:scale(.3);opacity:0}64%{transform:scale(.5);opacity:.9}100%{transform:scale(1.8);opacity:0}}
.tk__help{font-size:14px;line-height:1.4;color:rgba(254,240,231,.82)}
.tk__stubtime{margin-left:auto;display:flex;align-items:center;gap:10px;font-family:var(--serif);font-size:24px;color:#F0B760;
  font-variant-numeric:lining-nums;white-space:nowrap}
.tk__stubtime svg{width:20px;height:20px;flex:none}
/* where the stub was: sending, booked, or what went wrong */
.tk__after{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;padding:10px 20px;text-align:center;pointer-events:none}
.tk__after[hidden]{display:none}
.tk__after > *{pointer-events:auto}
.tk__sending{margin:0;font-family:var(--serif);font-size:24px;color:var(--ink-2)}
.tk__sending i{display:inline-block;width:6px;height:6px;margin-left:6px;border-radius:999px;background:var(--ink-2);vertical-align:middle;
  animation:inkDot 1s ease-in-out infinite}
@keyframes inkDot{50%{opacity:.25;transform:scale(.6)}}
.tk__retry{margin-top:6px}

/* ── booked: the ending from the board (F6) ───────────────────────────
   Founder, 7 Oct: «it should have been the one we had before: with the tick and
   vi zapisani text and the bottom bit of the ticket». Seal pressed in, tick drawn,
   «Вы записаны» in ink, the gold piece dropped onto the card, then the e-mail line. */
.bk{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:12px 0 8px}
.bk[hidden]{display:none}
.bk__seal{position:relative;flex:none;width:92px;height:92px;display:flex;align-items:center;justify-content:center;border-radius:999px;
  border:1.5px solid rgba(154,99,15,.75);color:var(--ink);
  box-shadow:inset 0 3px 6px rgba(60,25,40,.22), inset 0 -2px 0 rgba(255,255,255,.85), 0 1px 0 rgba(255,255,255,.9)}
.bk__seal svg{display:block;width:40px;height:40px;overflow:visible}
.bk__seal polyline{fill:none;stroke:currentColor;stroke-width:12;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 2}
.bk__seal::after{content:"";position:absolute;inset:-1.5px;border-radius:999px;border:1.5px solid rgba(154,99,15,.55);opacity:0;pointer-events:none}
.bk__h{margin:22px 0 10px;font-family:var(--serif);font-weight:500;font-size:58px;line-height:1.12;color:var(--ink);white-space:nowrap;
  text-shadow:0 1px 0 rgba(255,255,255,.85);outline:none}
.bk__sub{margin:0 0 26px;font-size:15px;line-height:1.4;color:var(--ink-3)}
.bk__keep{position:relative;max-width:100%;display:flex;align-items:center;gap:18px;padding:18px 30px 22px;border-radius:10px 10px 0 0;
  color:var(--plum-ink);text-align:left;transform:rotate(-2deg);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 1px 0 rgba(120,70,10,.3), 0 10px 18px -8px rgba(60,20,40,.45), 0 26px 40px -22px rgba(60,20,40,.5)}
.bk__time{flex:none;font-family:var(--serif);font-size:40px;font-weight:500;line-height:1;font-variant-numeric:lining-nums tabular-nums}
.bk__rule{flex:none;width:0;height:40px;border-left:1px solid rgba(55,21,54,.3)}
.bk__when{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.bk__date{font-family:var(--serif);font-size:22px;line-height:1.2}
.bk__zone{font-size:12px;line-height:1.35}
.bk__edge{position:absolute;left:0;right:0;bottom:-7px;height:14px;pointer-events:none;
  background:radial-gradient(circle at 8px 7px, #F6EADF 4.5px, transparent 5px) 0 0/16px 14px repeat-x}
.bk__note{margin:34px 0 0;max-width:560px;font-size:16px;line-height:1.6;color:var(--ink-2);text-shadow:0 1px 0 rgba(255,255,255,.6)}
.bk__note b{font-weight:700;color:var(--ink);overflow-wrap:anywhere}
.bk__note b.bk__tel{white-space:nowrap;overflow-wrap:normal}       /* a phone number never splits */
.bk.is-on .ccard__mark{animation:bkFade .6s ease-out .2s both}
.bk.is-on .bk__seal{animation:bkStamp .55s cubic-bezier(.2,.7,.3,1) .12s both}
.bk.is-on .bk__seal::after{animation:bkRing 1s ease-out .4s both}
.bk.is-on .bk__seal polyline{animation:bkTick .5s cubic-bezier(.65,0,.35,1) .42s both}
.bk.is-on .bk__sub{animation:bkFade .6s ease-out 1.35s both}
.bk.is-on .bk__keep{animation:bkKeep 1.05s linear .85s both}
.bk.is-on .bk__zone{animation:bkFade .6s ease-out 1.9s both}
.bk.is-on .bk__note{animation:bkFade .7s ease-out 2.05s both}
@keyframes bkStamp{0%{opacity:0;transform:scale(1.55) rotate(-10deg)}45%{opacity:1;transform:scale(.93) rotate(1.5deg)}
  70%{transform:scale(1.025) rotate(-.4deg)}100%{opacity:1;transform:none}}
@keyframes bkRing{0%{opacity:.75;transform:scale(1)}100%{opacity:0;transform:scale(1.55)}}
@keyframes bkTick{0%{stroke-dashoffset:1.05}100%{stroke-dashoffset:0}}
@keyframes bkFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes bkKeep{
  0%{opacity:0;transform:perspective(900px) translate(70px,-110px) rotateX(22deg) rotateY(-20deg) rotate(10deg) scale(1.08);
    animation-timing-function:cubic-bezier(.3,.6,.4,1)}
  8%{opacity:1}
  42%{transform:perspective(900px) translate(-4px,3px) rotateX(-3deg) rotateY(3deg) rotate(-3.4deg) scale(1);animation-timing-function:cubic-bezier(.3,0,.3,1)}
  62%{transform:perspective(900px) translate(3px,0) rotateX(1.2deg) rotateY(-1.2deg) rotate(-1.3deg) scale(1);animation-timing-function:ease-in-out}
  80%{transform:perspective(900px) translate(-1px,0) rotateX(-.4deg) rotateY(.4deg) rotate(-2.3deg) scale(1);animation-timing-function:ease-in-out}
  100%{opacity:1;transform:perspective(900px) translate(0,0) rotateX(0deg) rotateY(0deg) rotate(-2deg) scale(1)}}

/* ── a phone, or a narrow window ─────────────────────────────────────── */
@media (max-width:1100px){
  .ccard{max-width:none;margin:0 clamp(0px,4vw,54px) 0 clamp(40px,6vw,64px)}
}
@media (max-width:900px){
  .ccard{margin:0;perspective:1600px}
  .ccard__front{flex-direction:column;align-items:stretch;min-height:0;padding:0 22px 28px}
  .ccard__print{position:relative;left:auto;top:auto;width:min(308px,86%);margin:-34px auto 26px;padding:12px 12px 0;transform:translateZ(30px) rotate(-2deg)}
  .ccard__print figcaption{padding:10px 2px 14px;font-size:12.5px}
  .js-card .ccard:not(.is-in) .ccard__print{transform:translateZ(90px) rotate(-6deg)}
  .ccard__mark{top:auto;bottom:24px;right:20px;width:30px;height:30px}
  .ccard__body{max-width:none}
  .ccard__cta{flex-direction:column;align-items:stretch;gap:12px}
  .ccard__cta .event{display:block}
  .ccard__cta .btn{display:flex;width:100%}
  .ccard__note{max-width:none;text-align:center}
  .ccard__back{min-height:0;padding:28px 18px 24px}
  .cal__head{flex-direction:column-reverse;align-items:flex-start}
  .cal__day{flex-basis:calc((100% - 24px) / 5);min-width:0}
  .cal__arrow{display:none}
  .tk__head{flex-direction:column-reverse;align-items:flex-start;gap:12px}
  .tk__body{padding:14px 18px 18px}
  .tk__brand{font-size:12.5px;gap:8px}
  .tk__brand svg{width:17px;height:17px}
  .tk__kind{font-size:11.5px}
  .tk__grid{grid-template-columns:1fr;gap:16px}
  .tk__facts{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 12px;order:-1}
  .tk__facts dd{font-size:15px}
  .tk__facts dd.tk__time{font-size:26px}
  .tk__stub{flex-direction:column;align-items:stretch;gap:12px;padding:18px 16px 16px}
  .tk__pill{display:flex}
  .tk__pillin{font-size:17px;padding:14px 18px 14px 14px}
  .tk__hand{width:26px;height:26px}
  .tk__ring{left:3px;width:20px;height:20px}
  .tk__stubrow{display:flex;align-items:center;justify-content:space-between;gap:12px}
  .tk__help{font-size:12.5px}
  .tk__stubtime{font-size:19px}
  .bk{justify-content:flex-start;padding:46px 0 16px}   /* the phone card is as tall as its front: start at the top, like a letter */
  .bk .ccard__mark{top:18px;bottom:auto;right:18px;width:30px;height:30px}
  .bk__seal{width:76px;height:76px}
  .bk__seal svg{width:34px;height:34px}
  .bk__h{margin-top:18px;font-size:44px}
  .bk__sub{margin-bottom:22px}
  .bk__keep{gap:14px;padding:14px 20px 18px}
  .bk__time{font-size:32px}
  .bk__rule{height:34px}
  .bk__date{font-size:18px}
  .bk__note{margin-top:30px;font-size:15px}
}
@media (min-width:901px){ .tk__stubrow{display:contents} }
@media (max-width:420px){
  /* the first column holds «Google Meet / или WhatsApp»: a little wider, so «или WhatsApp» stays one line */
  .ccard__facts{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) minmax(0,1fr)}
  .ccard__facts div{padding:12px 8px 0}
  .ccard__facts dd{font-size:14px}
  .ccard__h{font-size:36px}
  .ccard__lede{font-size:15px}
  .tk__facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bk__h{font-size:38px}
  .bk__keep{padding:12px 16px 16px}
}
/* the smallest phones (320–360 px): the card's three facts as rows, so «Длительность»
   and «Google Meet или WhatsApp» never run into the next column */
@media (max-width:360px){
  .ccard__facts{grid-template-columns:1fr}
  .ccard__facts div,.ccard__facts div:first-child{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:10px 0}
  .ccard__facts div+div{border-left:0;border-top:1px solid rgba(46,17,40,.12)}
  .ccard__facts dt{margin:0}
  .ccard__facts dd{text-align:right}
}

/* ── less motion: everything still works, nothing flies ──────────────── */
@media (prefers-reduced-motion:reduce){
  .ccard__tilt,.ccard__inner,.tk__waknob,.tk__waknob::after{transition:none}
  .js-card .ccard:not(.is-in) .ccard__tilt,.js-card .ccard:not(.is-in) .ccard__print{opacity:1;transform:none}
  .ccard__print{transform:rotate(-3deg)}
  .is-soaking [data-ink],.is-unsoaking [data-ink],.ink-c,.ink-b,.tk__pass.is-dropping,.tk__pass.is-shaking,
  .tk__stubwrap.nudge,.tk__hand svg,.tk__ring,.cal__skel i,.cal__slot.is-chosen{animation:none}
  .ink-c{opacity:1;filter:none}
  .ink-b{display:none}
  .is-soaking [data-ink]{visibility:hidden}
  .tk__stub.is-back,.bk.is-on .ccard__mark,.bk.is-on .bk__seal,.bk.is-on .bk__seal::after,.bk.is-on .bk__seal polyline,
  .bk.is-on .bk__sub,.bk.is-on .bk__keep,.bk.is-on .bk__zone,.bk.is-on .bk__note{animation:none}
}

/* ══ THE SMALL COUNTER (index.html #tally, js/main.js) ═══════════════════════
   Founder, 7 Oct 2026: «small … added to an angle or small section of the web,
   like a small addition or even decoration», «like in front of bars: we sold
   78696 beers». A brass counter at the end of the facts strip. Hidden until a
   real number (with its source) is filled in.
   7 Oct 2026, founder: «remove that "lamp" thing» (his screenshot, crossed out):
   the little shade above the counter and its glow are gone. */
.tally{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  padding:24px 32px;background:var(--facts-d)}
.tally[hidden]{display:none}
.tally__case{padding:4px;border-radius:7px;
  background:linear-gradient(180deg,#F3D99A 0%,#C99847 38%,#8A6020 52%,#B8873C 70%,#E6C077 100%);
  box-shadow:0 1px 3px rgba(10,2,10,.6), inset 0 1px 0 rgba(255,255,255,.5), 0 14px 22px -12px rgba(10,2,10,.8)}
.tally__digits{display:flex;align-items:center;gap:3px;padding:4px;border-radius:4px;background:#0C040C;box-shadow:inset 0 2px 5px rgba(10,2,10,.9)}
.tally__d{position:relative;width:26px;height:38px;overflow:hidden;border-radius:3px;
  background:linear-gradient(180deg,#0A040A 0%,#24131F 20%,#3A2434 50%,#24131F 80%,#0A040A 100%)}
.tally__reel{position:absolute;left:0;right:0;top:0;display:flex;flex-direction:column;transition:transform 1.8s cubic-bezier(.2,.8,.2,1)}
.tally__reel span{height:38px;display:flex;align-items:center;justify-content:center;
  font:500 26px/1 var(--serif);color:#FEF0E7;font-variant-numeric:lining-nums tabular-nums}
.tally__gap{width:5px}
.tally__label{margin:0;max-width:20ch;font-size:12.5px;line-height:1.35;text-align:center;color:rgba(254,240,231,.86)}
/* the third fact carries Tatiana's list of directions (7 Oct 2026): it gets more room,
   so «28 направлений» stays on one line and the list is about as tall as its neighbours */
.facts__in:has(> .tally:not([hidden])){grid-template-columns:1fr 1fr 1.45fr auto}
/* with the counter there the three facts are a little narrower: keep «28 направлений» on one line */
.facts__in:has(> .tally:not([hidden])) .facts__n{font-size:clamp(26px,2.9vw,34px)}
.facts__in:has(> .tally:not([hidden])) .facts__i{padding:30px 24px}
@media (max-width:760px){ .facts__in:has(> .tally:not([hidden])){grid-template-columns:1fr} .tally{padding:22px 24px} }
@media (prefers-reduced-motion:reduce){ .tally__reel{transition:none} }

/* the moving light on the front of the card (js/booking.js slides it with the mouse): its own
   layer, moved by transform only, clipped to the card. 8 Oct 2026: it replaced a light that
   repainted the whole card on every mouse move. */
.ccard__glarebox{position:absolute;inset:0;z-index:5;overflow:hidden;border-radius:3px;pointer-events:none}
.ccard__glare{position:absolute;left:-50%;top:-50%;width:200%;height:200%;
  background:radial-gradient(22% 24% at 50% 50%, rgba(255,255,255,.32), rgba(255,255,255,0) 72%);
  will-change:transform;transition:transform .55s cubic-bezier(.16,1,.3,1)}
.ccard__tilt{will-change:transform}
@media (prefers-reduced-motion:reduce){.ccard__glare{transition:none}}

/* ── 9 Oct 2026, founder: «i have tatianas video ready … behind the image of tatiana (consultation)
      … the picture might need to be reformated to the format of the video like a wide polaroid».
      The print is now a WIDE polaroid (16:9, the video's shape). Her portrait is the cover with a
      gold play button; one tap plays the 36 s invitation inside the print, with sound
      (js/cvid.js). The video loads only on that tap (preload none). Source of the film:
      build/content/video-consult/ (README lists every fact on screen). ───────────────────── */
.ccard__print img{aspect-ratio:16/9;object-position:50% 50%}
.cvid{position:relative;aspect-ratio:16/9;overflow:hidden;background:#2A1428}
.cvid picture,.cvid picture img{display:block;width:100%;height:100%}
.cvid__v{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;background:#14060f}
.cvid__v[hidden]{display:none}
/* the gold button sits over the sea on the right, never on her face; the whole photo is the tap area */
.cvid__play{position:absolute;inset:0;display:flex;align-items:center;justify-content:flex-end;width:100%;height:100%;padding-right:9% !important;box-sizing:border-box;
  margin:0;padding:0;border:0;border-radius:0;cursor:pointer;color:#FFFFFF;-webkit-tap-highlight-color:transparent;
  background:linear-gradient(0deg,rgba(26,6,24,.42) 0%,rgba(26,6,24,0) 46%)}
.cvid__play[hidden]{display:none}
.cvid__btn{display:grid;place-items:center;width:68px;height:68px;border-radius:50%;background:#F0B760;color:#371536;
  box-shadow:0 0 0 6px rgba(255,253,246,.42),0 10px 24px rgba(26,6,24,.38);transition:transform .2s cubic-bezier(.16,1,.3,1)}
.cvid__btn svg{display:block;width:26px;height:26px;margin-left:4px}
.cvid__lbl{position:absolute;left:12px;bottom:11px;padding:7px 12px;border-radius:999px;background:rgba(26,6,24,.66);
  font:600 13px/1 var(--sans);letter-spacing:.01em;color:#FFFFFF;font-variant-numeric:lining-nums tabular-nums}
@media (hover:hover){ .cvid__play:hover .cvid__btn{transform:scale(1.07)} }
.cvid__play:active .cvid__btn{transform:scale(.96)}
.cvid__play:focus-visible{outline:3px solid #F0B760;outline-offset:-3px}
.cvid.is-playing .cvid__play,.cvid.is-playing picture{visibility:hidden}

/* computer: the wide print sits on the left edge of the card, centred top to bottom */
@media (min-width:901px){
  .ccard__front{padding-left:500px}
  .ccard__print{width:500px;top:50%;margin-top:-168px}
}
@media (min-width:901px) and (max-width:1100px){
  .ccard__front{padding-left:414px}
  .ccard__print{width:380px;margin-top:-134px}
}
/* phone and tablet: the print on top of the card, as wide as the card (the film is wide) */
@media (max-width:900px){
  .ccard__print{width:min(520px,calc(100% + 24px));margin-left:auto;margin-right:auto}
}
@media (max-width:560px){
  .ccard__print{margin-left:-12px;margin-right:-12px}
}
@media (prefers-reduced-motion:reduce){ .cvid__btn{transition:none} }