/* Bookr desktop homepage — the card tells the story. See assets/bookr-desk-card.js.
 *
 * Linked from index.html with media="(min-width:1024px) and (hover:hover)", and every layout
 * rule below is scoped under html.dk-card, which only the script sets on a desktop. A phone
 * never applies a line of this file.
 *
 * The card is artwork of the real printed card, so it is black in BOTH themes; the page
 * around it follows the theme. Marked theme-pin where the checker would otherwise flag it. */

/* ═════════════════════════════ the card ═════════════════════════════ */
#dk-card {
  --w: min(560px, 38vw);
  /* z-index 1, under the words (.sc-inner is lifted to 2 below): in flight the card passes
     BEHIND the text it is crossing instead of over it. */
  position: fixed; left: 0; top: 0; z-index: 1; pointer-events: none;
  width: var(--w); aspect-ratio: 85 / 55;
  /* transform (position, and each throw's route) is written by bookr-desk-card.js */
  perspective: 1700px;
}

.dkc-lift, .dkc-tilt, .dkc-flip { width: 100%; height: 100%; transform-style: preserve-3d; }
/* Resting: a slow float. In the air the throw (bookr-desk-card.js) does all the moving. */
/* Never quite still: a slow drift in all three directions, on an uneven loop so it never
   reads as a repeating bob. */
.dkc-lift { animation: dkcFloat 11s ease-in-out infinite; }
#dk-card.moving .dkc-lift { animation: none; }
@keyframes dkcFloat {
  0%, 100% { transform: translate3d(0, -8px, 0) rotateX(2deg) rotateY(-3deg) rotateZ(-.6deg); }
  27%      { transform: translate3d(7px, 3px, 0) rotateX(-1.5deg) rotateY(2.5deg) rotateZ(.5deg); }
  55%      { transform: translate3d(-4px, 9px, 0) rotateX(1deg) rotateY(-1.2deg) rotateZ(-.2deg); }
  78%      { transform: translate3d(-7px, -2px, 0) rotateX(-2deg) rotateY(3deg) rotateZ(.7deg); }
}
.dkc-tilt { transform: rotateX(var(--ty, 0deg)) rotateY(var(--tx, 0deg)); transition: transform .6s cubic-bezier(.2,.8,.2,1); }
/* Mouse over the card: it follows the pointer closely, lifts towards you, and a glare tracks
   the cursor (--gx/--gy, bookr-desk-card.js). */
#dk-card.hover .dkc-tilt { transform: rotateX(var(--ty, 0deg)) rotateY(var(--tx, 0deg)) scale(1.045); transition: transform .12s ease-out; }
.dkc-flip { transform: none; }
#dk-card.still .dkc-lift { animation: none; }

.dkc-face {
  position: absolute; inset: 0; overflow: hidden;
  border-radius: 4.5% / 7%;
  background: #000; color: #D8D8D4; /* theme-pin: the real card is black whatever the page theme */
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  container-type: inline-size;
  font-family: var(--font, "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif);
  box-shadow: 0 0 0 1px rgba(216,216,212,.16), 0 50px 110px -34px rgba(37,99,235,.6), 0 30px 60px -24px rgba(0,0,0,.55);
  transition: box-shadow .5s ease;
}
#dk-card.moving .dkc-face {
  box-shadow: 0 0 0 1px rgba(216,216,212,.2), 0 90px 140px -30px rgba(37,99,235,.55), 0 60px 90px -30px rgba(0,0,0,.5);
}
.dkc-face::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3; border-radius: inherit;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255,255,255,.2), rgba(59,130,246,.08) 28%, transparent 55%); /* theme-pin: a glare on the black card */
  opacity: 0; transition: opacity .35s ease;
}
#dk-card.hover .dkc-face::before { opacity: 1; }
#dk-card.hover .dkc-face { box-shadow: 0 0 0 1px rgba(216,216,212,.24), 0 70px 130px -30px rgba(37,99,235,.75), 0 40px 70px -24px rgba(0,0,0,.6); }
/* A pass of light each time it lands, like tilting it under a lamp. */
.dkc-face::after {
  content: ""; position: absolute; inset: -20%; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.12) 50%, transparent 62%); /* theme-pin: a highlight on the black card */
  transform: translateX(-80%);
}
#dk-card.landed .dkc-face::after { animation: dkcSheen 1.1s ease forwards; }
@keyframes dkcSheen { from { transform: translateX(-80%); } to { transform: translateX(80%); } }

/* ── shared bits ── */
.dkc-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.dkc-pad { position: absolute; inset: 0; padding: 5.4cqw 6.4cqw; display: flex; flex-direction: column; }
.dkc-word { font-weight: 700; font-size: 22.9cqw; letter-spacing: -.03em; font-stretch: 92%; line-height: .9; }
.dkc-word.sm { font-size: 17cqw; }
.dkc-stop, .dkc-mark i {
  display: inline-block; width: .165em; height: .158em; margin-left: .035em; border-radius: .05em;
  background: var(--blue2, #3B82F6); animation: dkcDot 2.4s ease-in-out infinite;
}
@keyframes dkcDot { 0%,100% { box-shadow: 0 0 1.2cqw rgba(59,130,246,.55); } 50% { box-shadow: 0 0 3.4cqw rgba(59,130,246,1); } }
.dkc-foot-url { position: absolute; left: 0; right: 0; bottom: 8.5%; text-align: center;
  font-family: var(--mono, "Geist Mono", ui-monospace, monospace); font-size: 2.3cqw; letter-spacing: .14em; opacity: .85; }
.dkc-pro { display: inline-block; font-family: var(--mono, "Geist Mono", monospace); font-weight: 600; font-size: .78em; letter-spacing: .1em;
  color: #fff; background: var(--blue, #2563EB); padding: .18em .5em; border-radius: .4em; vertical-align: .12em; } /* theme-pin: white on the Bookr-blue badge, on the black card */
.dkc-face em { font-style: normal; }

/* ── booking page ── */
.dkc-head { display: flex; align-items: center; gap: 2.6cqw; }
.dkc-av { flex: none; width: 7.6cqw; height: 7.6cqw; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--blue2, #3B82F6), var(--blue, #2563EB)); color: #fff; font-weight: 700; font-size: 3.6cqw; } /* theme-pin: white initial on the blue avatar */
.dkc-id { display: flex; flex-direction: column; min-width: 0; }
.dkc-id b { font-size: 3.9cqw; font-weight: 700; letter-spacing: -.02em; color: #F4F4F1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* theme-pin: card lettering */
.dkc-id em { font-family: var(--mono, "Geist Mono", monospace); font-size: 2.2cqw; color: rgba(216,216,212,.6); margin-top: .5cqw; }
.dkc-svcs { list-style: none; margin: 3.2cqw 0 0; padding: 0; display: grid; gap: 1.4cqw; }
.dkc-svcs li { display: flex; justify-content: space-between; align-items: center; gap: 2cqw;
  padding: 1.5cqw 2.2cqw; border-radius: 1.8cqw; border: .25cqw solid rgba(216,216,212,.12); font-size: 3.1cqw; font-weight: 600; }
.dkc-svcs li.on { border-color: var(--blue2, #3B82F6); background: rgba(37,99,235,.14); }
.dkc-svcs li span { display: flex; align-items: baseline; gap: 1.6cqw; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dkc-svcs li em { font-family: var(--mono, "Geist Mono", monospace); font-weight: 400; font-size: 2cqw; color: rgba(216,216,212,.55); }
.dkc-svcs li b { color: var(--blue2, #3B82F6); }
.dkc-times { display: flex; gap: 1.6cqw; margin-top: 2.2cqw; }
.dkc-times span { flex: 1; text-align: center; padding: 1.2cqw 0; border-radius: 1.6cqw; border: .25cqw solid rgba(216,216,212,.14);
  font-family: var(--mono, "Geist Mono", monospace); font-size: 2.3cqw; }
.dkc-times span.on { background: var(--blue, #2563EB); border-color: var(--blue, #2563EB); color: #fff; } /* theme-pin: white on blue, on the black card */
.dkc-pay { margin-top: auto; text-align: center; padding: 2cqw 0; border-radius: 2cqw; font-weight: 700; font-size: 3.1cqw;
  background: var(--blue, #2563EB); color: #fff; box-shadow: 0 0 3cqw rgba(37,99,235,.55); } /* theme-pin: white on blue, on the black card */

/* ── payment ping ── */
.dkc-ping-top { display: flex; align-items: center; gap: 1.6cqw; font-size: 2.8cqw; font-weight: 700; }
.dkc-mark { font-size: 5cqw; line-height: 1; }
.dkc-mark i { margin: 0; width: .5em; height: .5em; border-radius: .14em; }
.dkc-ping-top em { margin-left: auto; font-family: var(--mono, "Geist Mono", monospace); font-weight: 400; font-size: 2.2cqw; color: rgba(216,216,212,.55); }
.dkc-ping-lbl { margin-top: 3.4cqw; font-size: 3.6cqw; color: rgba(216,216,212,.7); }
.dkc-ping-amt { font-size: 18cqw; font-weight: 700; letter-spacing: -.05em; line-height: .95; color: var(--blue2, #3B82F6);
  text-shadow: 0 0 5cqw rgba(59,130,246,.45); }
.dkc-ping-line { margin-top: 1.4cqw; font-size: 3.1cqw; font-weight: 600; color: #F4F4F1; } /* theme-pin: card lettering */
.dkc-ping-foot { margin-top: auto; padding-top: 2cqw; border-top: .25cqw solid rgba(216,216,212,.12);
  font-family: var(--mono, "Geist Mono", monospace); font-size: 2.3cqw; color: rgba(216,216,212,.6); }
.dkc-ping-foot b { color: var(--blue2, #3B82F6); font-weight: 600; }

/* ── the day ── */
.dkc-day-head { display: flex; justify-content: space-between; align-items: baseline; }
.dkc-day-head b { font-size: 5cqw; font-weight: 700; letter-spacing: -.03em; color: #F4F4F1; } /* theme-pin: card lettering */
.dkc-day-head em { font-family: var(--mono, "Geist Mono", monospace); font-size: 2.2cqw; color: rgba(216,216,212,.55); }
.dkc-rows { list-style: none; margin: 2.4cqw 0 0; padding: 0; display: grid; gap: 1.2cqw; }
.dkc-rows li { display: flex; align-items: center; gap: 2.2cqw; padding: 1.1cqw 2cqw; border-radius: 1.6cqw; background: rgba(216,216,212,.06); }
.dkc-rows li > em { font-family: var(--mono, "Geist Mono", monospace); font-size: 2.1cqw; color: rgba(216,216,212,.5); flex: none; width: 7cqw; }
.dkc-rows li span { flex: 1; min-width: 0; font-size: 2.8cqw; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dkc-rows li span i { font-style: normal; font-weight: 400; color: rgba(216,216,212,.5); margin-left: 1.4cqw; font-size: 2.3cqw; }
.dkc-rows li b { font-family: var(--mono, "Geist Mono", monospace); font-size: 2.4cqw; color: var(--blue2, #3B82F6); }
.dkc-day-foot { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; }
.dkc-day-foot span b { display: block; font-size: 7cqw; font-weight: 700; letter-spacing: -.03em; line-height: 1; color: var(--blue2, #3B82F6); }
.dkc-day-foot span em { font-family: var(--mono, "Geist Mono", monospace); font-size: 2cqw; letter-spacing: .12em; text-transform: uppercase; color: rgba(216,216,212,.55); }
.dkc-day-foot > i { font-style: normal; font-family: var(--mono, "Geist Mono", monospace); font-size: 2.1cqw; padding: 1.2cqw 2.4cqw; border-radius: 99px;
  border: .25cqw solid rgba(59,130,246,.55); background: rgba(37,99,235,.16); color: #D8D8D4; } /* theme-pin: card lettering */

/* ── 100% ── */
.dkc-fee-big { font-size: 29cqw; font-weight: 700; letter-spacing: -.055em; line-height: 1; padding-inline: .1em;
  background: linear-gradient(92deg, var(--blue, #2563EB), var(--blue2, #3B82F6)); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 4cqw rgba(37,99,235,.35)); }
.dkc-fee-lbl { margin-top: 2cqw; font-family: var(--mono, "Geist Mono", monospace); font-size: 2.3cqw; letter-spacing: .16em; text-transform: uppercase; color: rgba(216,216,212,.7); }

/* ── Pro ── */
.dkc-plan-top { display: flex; align-items: center; justify-content: space-between; font-size: 3.4cqw; }
.dkc-plan-top em { font-family: var(--mono, "Geist Mono", monospace); font-size: 2.3cqw; letter-spacing: .12em; text-transform: uppercase; color: var(--blue2, #3B82F6); }
.dkc-plan-price { margin-top: 3cqw; font-size: 15cqw; font-weight: 700; letter-spacing: -.05em; line-height: 1; color: #F4F4F1; } /* theme-pin: card lettering */
.dkc-plan-price small { font-size: .3em; font-weight: 500; letter-spacing: 0; color: rgba(216,216,212,.6); margin-left: .2em; }
.dkc-plan-list { list-style: none; margin: auto 0 0; padding: 0; display: grid; gap: 1.2cqw; }
.dkc-plan-list li { position: relative; padding-left: 4cqw; font-size: 2.9cqw; }
.dkc-plan-list li::before { content: ""; position: absolute; left: 0; top: .45em; width: 1.6cqw; height: 1.6cqw; border-radius: 30%;
  background: var(--blue2, #3B82F6); box-shadow: 0 0 1.4cqw rgba(59,130,246,.8); }

/* ── their link ── */
.dkc-url { margin-top: 4cqw; display: flex; align-items: center; gap: 1.8cqw; }
.dkc-url span { font-family: var(--mono, "Geist Mono", monospace); font-size: 3cqw; padding: 1.4cqw 2.6cqw; border-radius: 99px;
  border: .25cqw solid rgba(216,216,212,.2); background: rgba(216,216,212,.05); }
.dkc-url b { color: var(--blue2, #3B82F6); font-weight: 600; }
.dkc-caret { display: inline-block; width: .5em; height: 1em; vertical-align: -.15em; margin-left: .1em; background: var(--blue2, #3B82F6); animation: dkcBlink 1s steps(1) infinite; }
@keyframes dkcBlink { 50% { opacity: 0; } }
.dkc-url em { font-family: var(--mono, "Geist Mono", monospace); font-size: 2.1cqw; letter-spacing: .12em; text-transform: uppercase;
  color: #fff; background: var(--blue, #2563EB); padding: 1cqw 1.8cqw; border-radius: 99px; } /* theme-pin: white on the Bookr-blue tag */

/* ═════════════════════════════ the page around it ═════════════════════════════
   Words go in a column on the side AWAY from the card:
   left on s1, sfee, open (card right) · right on s2, s5 (card left).
   #s3 (the ping) and #s4 (the day) are not shown on desktop — five screens, not seven.
   The phones are gone on desktop — the card carries what they showed. */
html.dk-card #s3, html.dk-card #s4,
html.dk-card .sc-phone,
html.dk-card #sfee .fee-big,
html.dk-card #sfee .fee-name,
html.dk-card .s5-swipe { display: none; }

html.dk-card .scene, html.dk-card .closer, html.dk-card #s5 { max-width: none; }
html.dk-card .sc-inner {
  justify-content: center; align-items: flex-start; text-align: left;
  padding: 60px 0 0 max(64px, calc(50vw - 640px + 64px)); max-width: none;
}
/* The scene rules pin s2-s5 to the top with an ID selector (#s2 .sc-inner); beside a card
   that sits mid-screen the words have to be centred too, so these need the IDs as well. */
html.dk-card #s2 .sc-inner, html.dk-card #s3 .sc-inner, html.dk-card #s4 .sc-inner,
html.dk-card #sfee .sc-inner, html.dk-card #s5 .sc-inner {
  justify-content: center; padding-top: 60px; padding-bottom: 0;
}
html.dk-card #s2 .sc-inner, html.dk-card #s5 .sc-inner {
  padding-left: max(52vw, calc(100vw - 704px)); padding-right: 64px;
}
html.dk-card .sc-inner > * { max-width: 540px; margin-left: 0; margin-right: 0; }
html.dk-card .sc-inner, html.dk-card #open .wrap { position: relative; z-index: 2; }

/* The words come before the card: the card drops out of their way at once, the words slide
   in ~.3s later on a clear side, and the card rises into place after them.
   The hero (#s1) is exempt: it is already on screen when the page opens. */
html.dk-card .scene:not(#s1) .sc-inner > *, html.dk-card #open .join-card > * {
  opacity: 0; transform: translateY(28px); filter: blur(6px);
  transition: opacity .7s ease .32s, transform .8s cubic-bezier(.16,1,.3,1) .32s, filter .7s ease .32s;
}
/* Scrolling back up: the words drift in from ABOVE instead — the same fade, the other way. */
html.dk-card.dk-up .scene:not(#s1) .sc-inner > *, html.dk-card.dk-up #open .join-card > * { transform: translateY(-28px); }
/* :not(#s1) here too: it carries an ID's weight, and without it the hide rule above wins. */
html.dk-card .scene.dk-on:not(#s1) .sc-inner > *, html.dk-card #open.dk-on .join-card > *,
html.dk-card.dk-up .scene.dk-on:not(#s1) .sc-inner > *, html.dk-card.dk-up #open.dk-on .join-card > * { opacity: 1; transform: none; filter: none; }
html.dk-card .dk-on .sc-inner > :nth-child(2), html.dk-card #open.dk-on .join-card > :nth-child(2) { transition-delay: .38s; }
html.dk-card .dk-on .sc-inner > :nth-child(3), html.dk-card #open.dk-on .join-card > :nth-child(3) { transition-delay: .44s; }
html.dk-card .dk-on .sc-inner > :nth-child(4), html.dk-card #open.dk-on .join-card > :nth-child(4) { transition-delay: .5s; }
html.dk-card .dk-on .sc-inner > :nth-child(n+5), html.dk-card #open.dk-on .join-card > :nth-child(n+5) { transition-delay: .56s; }
html.dk-card .sc-eyebrow { font-size: 13px; letter-spacing: .16em; margin-bottom: 18px; }
html.dk-card .sc-cap { font-size: clamp(52px, 4.8vw, 80px); line-height: 1; letter-spacing: -.05em; margin-bottom: 0; }
html.dk-card .sc-more { display: block; font-size: 19px; line-height: 1.5; color: var(--muted); max-width: 30ch; margin-top: 24px; }

/* s1 — the hero keeps its size; everything left-aligned under it */
html.dk-card #s1 .sc-inner > * { max-width: 600px; }
html.dk-card #s1 .sc-h1 { font-size: clamp(92px, 8vw, 128px); margin-inline: 0; }
html.dk-card #s1 .sc-sub { font-size: 21px; }
html.dk-card #s1 .claim-form, html.dk-card #s1 .trade-pick, html.dk-card #s1 .claim-out { width: 100%; max-width: 520px; }
html.dk-card #s1 .claim-ladder { text-align: left; }
html.dk-card #s1 .sc-cue { align-self: flex-start; margin-left: 240px; }

/* sfee — the card is the 100%, the words explain it */
html.dk-card #sfee .fee-points { margin-top: 30px; }
html.dk-card #sfee .fee-points li { font-size: 20px; max-width: 40ch; }
html.dk-card #sfee .fee-link { font-size: 16px; }

/* s5 — both plans as plain lists, side by side, no boxes */
html.dk-card #s5 .sc-cap { margin-bottom: 30px; }
html.dk-card #s5 .plan-carousel { max-width: 600px; justify-content: flex-start; gap: 36px; padding: 0; overflow: visible; }
html.dk-card #s5 .plan-card { flex: 1; width: auto; max-width: none; padding: 0; background: none; border: 0; }
html.dk-card #s5 .plan-name { font-size: 16px; }
html.dk-card #s5 .plan-price { font-size: 34px; }
html.dk-card #s5 .plan-tag, html.dk-card #s5 .plan-feats li { font-size: 14.5px; }
html.dk-card #s5 .plan-fee { font-size: 11px; }
html.dk-card #s5 .s5-link { font-size: 16px; margin-top: 24px; }

/* closer — the link and the button on the left, the card (their link) on the right */
html.dk-card #open { max-width: none; }
html.dk-card #open .wrap { max-width: none; padding-left: max(64px, calc(50vw - 640px + 64px)); padding-right: 0; }
html.dk-card #open .join-card { max-width: 520px; margin: 0; text-align: left; }
html.dk-card #open h2 { font-size: clamp(64px, 5.6vw, 92px); line-height: .95; letter-spacing: -.05em; }
html.dk-card #open .ladder, html.dk-card #open .claim-go, html.dk-card #open .claim-go-any { max-width: none; margin-inline: 0; }

/* Reduced motion: the calm version. The card fades across (bookr-desk-card.js calmStep) instead
   of flying, nothing drifts or pulses, and the words fade in with no slide or blur. */
@media (prefers-reduced-motion: reduce) {
  #dk-card .dkc-lift, #dk-card .dkc-lift *, #dk-card *::after { animation: none !important; }
  #dk-card .dkc-tilt { transition: none !important; }
  html.dk-card .scene:not(#s1) .sc-inner > *, html.dk-card #open .join-card > *,
  html.dk-card.dk-up .scene:not(#s1) .sc-inner > *, html.dk-card.dk-up #open .join-card > * {
    transform: none; filter: none; transition: opacity .6s ease .25s;
  }
}