/* ==========================================================================
   Gonok card: wordmark on top, the Android app peeking up from the bottom.
   Hovering the phone slides the Windows app in from the left and shrinks
   the phone to true scale in front of it.

   Scene sizes are in em, where 1em = 1/110 of the card width.
   The phone screen is laid out on its screenshot's grid (1u = 1/918 of the
   screen width) and the laptop screen on its own (1l = 1/2000), so both
   apps match the real ones and scale as one picture.
   ========================================================================== */

.gk-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.gk-media { background: linear-gradient(180deg, #f3f5fb 0%, #e6ebf9 100%); box-shadow: inset 0 0 0 1px var(--line); }
.gk-scene {
  --gk-blue: #1b4beb;
  --gk-blue-d: #294be2;
  --gk-ink: #0f172a;
  --gk-sub: #5b6170;
  --gk-faint: #7b8494;
  --gk-line: #e8e9ed;
  --gk-bg: #f6f7f9;
  --ease-soft: cubic-bezier(.22, .8, .2, 1);
  position: absolute; inset: 0;
  container-type: inline-size;
  overflow: hidden;
  font-family: "Inter", "Hind Siliguri", system-ui, sans-serif;
  color: var(--gk-ink);
  line-height: 1.25;
  -webkit-font-smoothing: antialiased;
}
.gk-scene > * { font-size: .9vw; font-size: calc(100cqw / 110); }
.gk-scene p, .gk-scene ul { margin: 0; }
.gk-scene ul { list-style: none; padding: 0; }
.gk-scene button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; text-align: left; }
.gk-scene svg { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; }
.gk-scene small { display: block; }
.gk-scene :focus-visible { outline: 2px solid var(--gk-blue); outline-offset: 2px; }
.gk-scene .tk { font-family: "Inter", "Hind Siliguri", sans-serif; font-weight: inherit; }
.gk-scene svg.gk-wm { fill: currentColor; stroke: none; }

/* --------------------------------------------------------------------------
   Wordmark
   -------------------------------------------------------------------------- */
.gk-brand { position: absolute; left: 0; right: 0; top: 16em; display: flex; flex-direction: column; align-items: center; text-align: center; }
.gk-brand .gk-wm { width: 44em; height: 7.88em; color: var(--gk-blue); }
.gk-tagline { margin-top: .85em !important; font-size: 3.3em; font-weight: 500; letter-spacing: -.01em; color: #3f4656; }

/* --------------------------------------------------------------------------
   Phone: peeks up from the bottom, shrinks beside the laptop on hover
   -------------------------------------------------------------------------- */
.gk-phone {
  position: absolute; left: 29em; top: 36em; z-index: 2;
  width: 52em; padding: 1.1em;
  border-radius: 7.6em;
  background: #0d0e11;
  box-shadow: inset 0 0 0 .18em #2b2d33, 0 4em 7em -2em rgba(20, 45, 140, .38), 0 1.4em 2.4em -1.4em rgba(10, 20, 60, .35);
  transform-origin: 0 0;
  transition: transform 1s var(--ease-soft);
}
/* Open: the phone shrinks to true scale (about a quarter of the laptop's
   width, like a 6.5" phone beside a 14" laptop) and stands in front of the
   laptop's right edge, half over its screen. */
.gk-scene.is-open .gk-phone { transform: translate(53.1em, 32.6em) scale(.38); }

.gk-pscreen {
  --u: calc(100cqw / 918);
  position: relative; overflow: hidden;
  aspect-ratio: 918 / 2000;
  container-type: inline-size;
  border-radius: 6.5em;
  background: var(--gk-bg);
}
.gk-pscreen * { --u: calc(100cqw / 918); }

.gk-status {
  position: absolute; left: 0; right: 0; top: 0; z-index: 4;
  display: flex; justify-content: space-between; align-items: center;
  height: calc(120 * var(--u)); padding: 0 calc(72 * var(--u)) 0 calc(75 * var(--u));
  font-size: calc(33 * var(--u)); font-weight: 600; color: #111;
}
.gk-status__r { display: inline-flex; align-items: center; gap: calc(16 * var(--u)); }
.gk-status__r i { display: block; height: calc(30 * var(--u)); }
.gk-status__r i:first-child { width: calc(34 * var(--u)); background: #222; clip-path: polygon(0 100%, 100% 0, 100% 100%); }
.gk-status__r i:last-child { width: calc(55 * var(--u)); border-radius: calc(9 * var(--u)); background: linear-gradient(90deg, #111 41%, #bdbdbd 41%); }
.gk-homebar { position: absolute; left: calc(305 * var(--u)); top: calc(1966 * var(--u)); z-index: 6; width: calc(305 * var(--u)); height: calc(9 * var(--u)); border-radius: 1em; background: #7d7d7d; }

.gk-pview {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden;
  transition: opacity .35s ease, visibility 0s .35s;
}
.gk-pview.is-active { opacity: 1; visibility: visible; transition: opacity .35s ease, visibility 0s; }
.gk-pview > * { position: absolute; }

/* Home: every block sits at its screenshot coordinates */
.gk-ptitle { left: calc(42 * var(--u)); top: calc(181 * var(--u)); font-size: calc(66 * var(--u)); font-weight: 500; letter-spacing: -.035em; line-height: 1; }
.gk-plang {
  left: calc(571 * var(--u)); top: calc(174 * var(--u)); width: calc(181 * var(--u)); height: calc(80 * var(--u));
  display: flex; align-items: center; justify-content: center; gap: calc(18 * var(--u));
  border-radius: calc(40 * var(--u)); background: #fff; box-shadow: inset 0 0 0 calc(2 * var(--u)) var(--gk-line);
  font-size: calc(31 * var(--u)); color: #7b8494; line-height: 1;
}
.gk-plang b { font-weight: 700; color: #111; }
.gk-plang i { font-style: normal; color: #c3c7cf; }
.gk-prefresh {
  left: calc(776 * var(--u)); top: calc(165 * var(--u)); width: calc(99 * var(--u)); height: calc(99 * var(--u));
  display: grid; place-items: center; border-radius: 50%;
  background: #fff; box-shadow: inset 0 0 0 calc(2 * var(--u)) var(--gk-line);
}
.gk-prefresh svg { width: calc(46 * var(--u)); height: calc(46 * var(--u)); color: #111; }

.gk-ptotal {
  left: calc(41 * var(--u)); right: calc(42 * var(--u)); top: calc(327 * var(--u)); height: calc(375 * var(--u));
  border-radius: calc(60 * var(--u));
  background: linear-gradient(180deg, #b7c5f4 0%, #d2dcf7 46%, #f5f6fa 100%);
  box-shadow: inset 0 0 0 calc(2 * var(--u)) rgba(196, 208, 244, .9);
}
.gk-ptotal > * { position: absolute; left: calc(62 * var(--u)); }
.gk-ptotal__eyebrow { top: calc(66 * var(--u)); font-size: calc(29 * var(--u)); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: #2a52e0; line-height: 1; }
.gk-ptotal__big { top: calc(126 * var(--u)); font-size: calc(102 * var(--u)); font-weight: 500; letter-spacing: -.04em; line-height: 1; color: #0b1020; }
.gk-ptotal__meta { top: calc(272 * var(--u)); white-space: nowrap; font-size: calc(31.5 * var(--u)); color: #4b5563; line-height: 1; }
.gk-ptotal__meta svg { display: inline-block; width: calc(36 * var(--u)); height: calc(36 * var(--u)); margin-right: calc(12 * var(--u)); vertical-align: calc(-6 * var(--u)); color: #4b5563; }
.gk-ptotal__meta i { font-style: normal; margin: 0 calc(22 * var(--u)); color: #9aa1ad; }

.gk-psell {
  left: calc(41 * var(--u)); right: calc(42 * var(--u)); top: calc(723 * var(--u)); height: calc(198 * var(--u));
  display: flex; align-items: center;
  padding: 0 calc(41 * var(--u)) !important;
  border-radius: calc(56 * var(--u)) !important;
  background: var(--gk-blue) !important; color: #fff !important;
  box-shadow: 0 calc(18 * var(--u)) calc(40 * var(--u)) rgba(27, 75, 235, .28);
  transition: transform .2s var(--ease-soft), box-shadow .2s;
}
.gk-psell:hover { box-shadow: 0 calc(24 * var(--u)) calc(50 * var(--u)) rgba(27, 75, 235, .36); }
.gk-psell:active { transform: scale(.98); }
.gk-psell__ico { flex: none; display: grid; place-items: center; width: calc(131 * var(--u)); height: calc(131 * var(--u)); border-radius: calc(36 * var(--u)); background: rgba(255, 255, 255, .19); }
.gk-psell__ico svg { width: calc(66 * var(--u)); height: calc(66 * var(--u)); }
.gk-psell__tx { flex: 1; margin: calc(8 * var(--u)) 0 0 calc(43 * var(--u)); }
.gk-psell__tx b { display: block; font-size: calc(46 * var(--u)); font-weight: 450; letter-spacing: -.01em; line-height: 1; }
.gk-psell__tx small { margin-top: calc(25 * var(--u)); font-size: calc(33 * var(--u)); color: #dde5ff; line-height: 1; }
.gk-psell__go { flex: none; display: grid; place-items: center; width: calc(81 * var(--u)); height: calc(81 * var(--u)); border-radius: calc(22 * var(--u)); background: rgba(255, 255, 255, .2); }
.gk-psell__go svg { width: calc(42 * var(--u)); height: calc(42 * var(--u)); }

.gk-ptile { top: calc(942 * var(--u)); width: calc(406 * var(--u)); height: calc(316 * var(--u)); border-radius: calc(52 * var(--u)); }
.gk-ptile.is-lilac { left: calc(41 * var(--u)); background: #e0e5f8; color: var(--gk-blue); }
.gk-ptile.is-sand { left: calc(469 * var(--u)); background: #f4ebda; color: #eea024; }
.gk-ptile > * { position: absolute; }
.gk-ptile__ico { left: calc(41 * var(--u)); top: calc(41 * var(--u)); display: grid; place-items: center; width: calc(101 * var(--u)); height: calc(101 * var(--u)); border-radius: calc(28 * var(--u)); background: #fff; }
.gk-ptile__ico svg { width: calc(54 * var(--u)); height: calc(54 * var(--u)); }
.gk-ptile svg.gk-ptile__go { right: calc(56 * var(--u)); top: calc(76 * var(--u)); width: calc(34 * var(--u)); height: calc(34 * var(--u)); }
.gk-ptile b { left: calc(41 * var(--u)); top: calc(173 * var(--u)); font-size: calc(37.5 * var(--u)); font-weight: 450; letter-spacing: -.015em; line-height: 1.15; color: #111827; }
.gk-ptile small { left: calc(41 * var(--u)); top: calc(239 * var(--u)); font-size: calc(31 * var(--u)); color: var(--gk-sub); line-height: 1.1; }

.gk-plabel { left: calc(52 * var(--u)); top: calc((var(--y) - 15) * var(--u)); font-size: calc(29 * var(--u)); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--gk-faint); line-height: 1; }

.gk-pqa { left: calc(42 * var(--u)); top: calc(1392 * var(--u)); display: flex; gap: calc(24 * var(--u)); }
.gk-pqa > span {
  flex: none; display: flex; align-items: center;
  height: calc(166 * var(--u)); padding: 0 calc(46 * var(--u));
  border-radius: calc(52 * var(--u)); background: #fff; box-shadow: inset 0 0 0 calc(2 * var(--u)) var(--gk-line);
  font-size: calc(39 * var(--u)); font-weight: 450; letter-spacing: -.015em; color: #111827;
}
.gk-pqa > span:first-child { width: calc(380 * var(--u)); }
.gk-pqa > span:nth-child(2) { width: calc(408 * var(--u)); }
.gk-pqa i, .gk-pdue i { display: grid; place-items: center; flex: none; border-radius: calc(30 * var(--u)); }
.gk-pqa i { width: calc(105 * var(--u)); height: calc(105 * var(--u)); margin-right: calc(30 * var(--u)); }
.gk-pqa i svg { width: calc(56 * var(--u)); height: calc(56 * var(--u)); }
.is-red { background: #fce8e9; color: #e0393e; }
.is-blue { background: #e7edfd; color: var(--gk-blue); }
.is-green { background: #e5f5ec; color: #1f9d5c; }
.is-yellow { background: #fdf2e0; color: #eea024; }

.gk-pdue {
  left: calc(var(--x) * var(--u)); top: calc(1698 * var(--u)); width: calc(406 * var(--u)); height: calc(250 * var(--u));
  padding: calc(42 * var(--u)) calc(40 * var(--u));
  border-radius: calc(52 * var(--u)); background: #fff; box-shadow: inset 0 0 0 calc(2 * var(--u)) var(--gk-line);
}
.gk-pdue i { width: calc(71 * var(--u)); height: calc(71 * var(--u)); border-radius: calc(20 * var(--u)); }
.gk-pdue i svg { width: calc(38 * var(--u)); height: calc(38 * var(--u)); }
.gk-pdue small { margin-top: calc(26 * var(--u)); font-size: calc(30 * var(--u)); color: var(--gk-sub); }
.gk-pdue b { display: block; margin-top: calc(6 * var(--u)); font-size: calc(42 * var(--u)); font-weight: 600; letter-spacing: -.02em; }

/* Bottom tabs */
.gk-tabs {
  position: absolute; left: 0; right: 0; top: calc(1785 * var(--u)); bottom: 0; z-index: 5;
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: #fff; box-shadow: 0 calc(-2 * var(--u)) 0 #eceef1;
  font-size: calc(29.5 * var(--u)); line-height: 1;
  transition: transform .4s var(--ease-soft);
}
.gk-tabs > * {
  display: flex !important; flex-direction: column; align-items: center !important;
  padding-top: calc(33 * var(--u)) !important; gap: calc(22 * var(--u));
  color: #5f6a7c !important; text-align: center;
}
.gk-tabs svg { width: calc(56 * var(--u)); height: calc(56 * var(--u)); }
.gk-tabs .is-active { color: var(--gk-blue) !important; }
.gk-pscreen[data-pv="sell"] .gk-tabs, .gk-pscreen[data-pv="done"] .gk-tabs { transform: translateY(100%); }

/* Sub-screens share one header */
.gk-pback {
  left: calc(42 * var(--u)); top: calc(165 * var(--u)); width: calc(99 * var(--u)); height: calc(99 * var(--u));
  display: grid !important; place-items: center; border-radius: 50%;
  background: #fff !important; box-shadow: inset 0 0 0 calc(2 * var(--u)) var(--gk-line);
}
.gk-pback svg { width: calc(46 * var(--u)); height: calc(46 * var(--u)); }
.gk-phead { left: calc(170 * var(--u)); top: calc(188 * var(--u)); font-size: calc(52 * var(--u)); font-weight: 600; letter-spacing: -.03em; line-height: 1; }

/* Scan */
.gk-cam {
  left: calc(42 * var(--u)); right: calc(42 * var(--u)); top: calc(300 * var(--u)); height: calc(700 * var(--u));
  overflow: hidden; border-radius: calc(56 * var(--u));
  background: radial-gradient(120% 80% at 50% 40%, #2a303b 0%, #0d1016 100%);
}
.gk-cam > * { position: absolute; }
.gk-cam__hint { left: 0; right: 0; top: calc(52 * var(--u)); text-align: center; font-size: calc(30 * var(--u)); color: rgba(255, 255, 255, .78); }
.gk-cam__item {
  left: 50%; top: 50%; width: calc(470 * var(--u)); height: calc(300 * var(--u));
  transform: translate(-50%, -50%) rotate(-4deg);
  border-radius: calc(20 * var(--u));
  background:
    repeating-linear-gradient(90deg, #1b1d22 0 calc(5 * var(--u)), transparent 0 calc(9 * var(--u)), #1b1d22 0 calc(11 * var(--u)), transparent 0 calc(19 * var(--u))) calc(80 * var(--u)) calc(110 * var(--u)) / calc(310 * var(--u)) calc(110 * var(--u)) no-repeat,
    linear-gradient(#f4f1ea, #e7e2d6);
  box-shadow: 0 calc(30 * var(--u)) calc(60 * var(--u)) rgba(0, 0, 0, .45);
  transition: transform .5s var(--ease-soft);
}
.gk-cam__frame {
  left: 50%; top: 50%; width: calc(560 * var(--u)); height: calc(380 * var(--u)); transform: translate(-50%, -50%);
  --c: rgba(255, 255, 255, .95); --w: calc(7 * var(--u)); --l: calc(66 * var(--u));
  background:
    linear-gradient(var(--c), var(--c)) 0 0 / var(--l) var(--w), linear-gradient(var(--c), var(--c)) 0 0 / var(--w) var(--l),
    linear-gradient(var(--c), var(--c)) 100% 0 / var(--l) var(--w), linear-gradient(var(--c), var(--c)) 100% 0 / var(--w) var(--l),
    linear-gradient(var(--c), var(--c)) 0 100% / var(--l) var(--w), linear-gradient(var(--c), var(--c)) 0 100% / var(--w) var(--l),
    linear-gradient(var(--c), var(--c)) 100% 100% / var(--l) var(--w), linear-gradient(var(--c), var(--c)) 100% 100% / var(--w) var(--l);
  background-repeat: no-repeat;
  transition: --c .3s;
}
.gk-cam.is-found .gk-cam__frame { --c: #4ade80; }
.gk-cam__line {
  left: calc(205 * var(--u)); right: calc(205 * var(--u)); top: 50%; height: calc(5 * var(--u));
  border-radius: 1em; background: #5b84ff; box-shadow: 0 0 calc(24 * var(--u)) #5b84ff;
  opacity: 0;
}
.gk-cam.is-scanning .gk-cam__line { opacity: 1; animation: gk-scan 1.6s ease-in-out infinite alternate; }
@keyframes gk-scan { from { transform: translateY(calc(-150 * var(--u))); } to { transform: translateY(calc(150 * var(--u))); } }

.gk-scanning { left: 0; right: 0; top: calc(1060 * var(--u)); text-align: center; font-size: calc(33 * var(--u)); color: var(--gk-sub); }
.gk-scanning[hidden] { display: none; }

.gk-found {
  left: calc(42 * var(--u)); right: calc(42 * var(--u)); top: calc(1030 * var(--u));
  padding: calc(44 * var(--u));
  border-radius: calc(52 * var(--u)); background: #fff; box-shadow: inset 0 0 0 calc(2 * var(--u)) var(--gk-line), 0 calc(20 * var(--u)) calc(50 * var(--u)) rgba(15, 23, 42, .08);
  opacity: 0; transform: translateY(calc(40 * var(--u))); pointer-events: none;
  transition: opacity .3s ease, transform .45s var(--ease-soft);
}
.gk-found.is-on { opacity: 1; transform: none; pointer-events: auto; }
.gk-found__src { font-size: calc(28 * var(--u)); color: var(--gk-faint); }
.gk-found__name { margin-top: calc(14 * var(--u)) !important; font-size: calc(42 * var(--u)); font-weight: 600; letter-spacing: -.02em; line-height: 1.2; }
.gk-found__meta { margin-top: calc(10 * var(--u)) !important; font-size: calc(32 * var(--u)); color: var(--gk-sub); }
.gk-found__btns { display: grid; grid-template-columns: 1fr 1.3fr; gap: calc(24 * var(--u)); margin-top: calc(40 * var(--u)); }

.gk-btn {
  display: grid !important; place-items: center;
  height: calc(130 * var(--u)); border-radius: calc(40 * var(--u)) !important;
  background: #fff !important; box-shadow: inset 0 0 0 calc(2 * var(--u)) #dfe2e8;
  font-size: calc(36 * var(--u)) !important; font-weight: 600; color: #111827 !important;
  transition: transform .15s;
}
.gk-btn:active { transform: scale(.97); }
.gk-btn--primary { background: var(--gk-blue) !important; box-shadow: 0 calc(14 * var(--u)) calc(34 * var(--u)) rgba(27, 75, 235, .28); color: #fff !important; }
.gk-btn--ghost { background: rgba(255, 255, 255, .18) !important; box-shadow: none; color: #fff !important; }
.gk-btn--white { background: #fff !important; box-shadow: none; color: var(--gk-blue) !important; }

.gk-pcart {
  left: calc(41 * var(--u)); right: calc(42 * var(--u)); top: calc(1490 * var(--u)); height: calc(180 * var(--u));
  display: flex; align-items: center; gap: calc(20 * var(--u));
  padding: 0 calc(34 * var(--u)) 0 calc(48 * var(--u));
  border-radius: calc(56 * var(--u)); background: var(--gk-blue); color: #fff;
  box-shadow: 0 calc(18 * var(--u)) calc(40 * var(--u)) rgba(27, 75, 235, .28);
  opacity: 0; transform: translateY(calc(60 * var(--u))); pointer-events: none;
  transition: opacity .3s ease, transform .45s var(--ease-soft);
}
.gk-pcart.is-on { opacity: 1; transform: none; pointer-events: auto; }
.gk-pcart__tx { flex: 1; }
.gk-pcart__tx b { display: block; font-size: calc(40 * var(--u)); font-weight: 600; line-height: 1; }
.gk-pcart__tx small { margin-top: calc(14 * var(--u)); font-size: calc(32 * var(--u)); color: #dde5ff; line-height: 1; }
.gk-pcart .gk-btn { height: calc(116 * var(--u)); padding: 0 calc(32 * var(--u)); font-size: calc(32 * var(--u)) !important; border-radius: calc(34 * var(--u)) !important; }

/* Sale complete */
.gk-pdone { text-align: center; }
.gk-pdone > * { left: 0; right: 0; }
.gk-pdone__tick {
  left: calc(349 * var(--u)) !important; top: calc(470 * var(--u)); width: calc(220 * var(--u)); height: calc(220 * var(--u));
  display: grid; place-items: center; border-radius: 50%;
  background: #e5f5ec; color: #1f9d5c;
}
.gk-pdone__tick svg { width: calc(110 * var(--u)); height: calc(110 * var(--u)); }
.gk-pview.is-active .gk-pdone__tick { animation: gk-pop .55s var(--ease-soft) both; }
@keyframes gk-pop { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
.gk-pdone__title { top: calc(770 * var(--u)); font-size: calc(62 * var(--u)); font-weight: 600; letter-spacing: -.03em; }
.gk-pdone__amt { top: calc(865 * var(--u)); font-size: calc(36 * var(--u)); color: var(--gk-sub); }
.gk-pdone__sync {
  left: 50% !important; right: auto !important; top: calc(960 * var(--u)); transform: translateX(-50%);
  display: flex; align-items: center; gap: calc(16 * var(--u)); white-space: nowrap;
  padding: calc(20 * var(--u)) calc(34 * var(--u)); border-radius: 2em;
  background: #e7edfd; color: var(--gk-blue); font-size: calc(30 * var(--u)); font-weight: 500;
}
.gk-pdone__sync svg { width: calc(40 * var(--u)); height: calc(40 * var(--u)); }
.gk-pdone__btn { left: calc(41 * var(--u)) !important; right: calc(42 * var(--u)) !important; top: calc(1490 * var(--u)); height: calc(170 * var(--u)) !important; border-radius: calc(56 * var(--u)) !important; font-size: calc(40 * var(--u)) !important; }

/* Inventory and activity lists */
.gk-plist { left: calc(42 * var(--u)); right: calc(42 * var(--u)); top: calc(330 * var(--u)); display: grid; gap: calc(20 * var(--u)); }
.gk-plist li {
  display: flex; align-items: center; gap: calc(30 * var(--u));
  min-height: calc(150 * var(--u)); padding: calc(26 * var(--u)) calc(40 * var(--u));
  border-radius: calc(44 * var(--u)); background: #fff; box-shadow: inset 0 0 0 calc(2 * var(--u)) var(--gk-line);
}
.gk-plist .tx { flex: 1; min-width: 0; }
.gk-plist .tx b { display: block; font-size: calc(35 * var(--u)); font-weight: 500; letter-spacing: -.01em; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gk-plist .tx small { margin-top: calc(8 * var(--u)); font-size: calc(28 * var(--u)); color: var(--gk-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gk-plist .amt { font-size: calc(36 * var(--u)); font-weight: 600; white-space: nowrap; }
.gk-plist .ic { flex: none; display: grid; place-items: center; width: calc(80 * var(--u)); height: calc(80 * var(--u)); border-radius: 50%; }
.gk-plist .ic svg { width: calc(40 * var(--u)); height: calc(40 * var(--u)); }
.gk-stock { flex: none; padding: calc(10 * var(--u)) calc(22 * var(--u)); border-radius: 2em; background: #e7edfd; color: var(--gk-blue); font-size: calc(28 * var(--u)); font-weight: 600; }
.gk-stock.is-low { background: #fce8e9; color: #e0393e; }
.gk-plist li.is-new { animation: gk-new 2.4s ease both; }
@keyframes gk-new { 0%, 40% { background: #e7edfd; } 100% { background: #fff; } }

/* --------------------------------------------------------------------------
   Laptop: hidden off the left edge until the phone is hovered
   -------------------------------------------------------------------------- */
.gk-laptop {
  position: absolute; left: 12em; top: 60em; z-index: 1;
  width: 80em;
  opacity: 0;
  transform: translateX(-112%);
  transition: transform 1s var(--ease-soft), opacity .6s ease;
}
.gk-scene.is-open .gk-laptop { opacity: 1; transform: none; transition: transform 1s var(--ease-soft) .08s, opacity .5s ease .08s; }
.gk-lid {
  padding: 1.15em 1.15em 1.5em;
  border-radius: 2.4em 2.4em .6em .6em;
  background: #121318;
  box-shadow: inset 0 0 0 .16em #2e3038;
}
.gk-base {
  position: relative; height: 2.3em; margin: 0 -6%;
  border-radius: 0 0 2.4em 2.4em / 0 0 1.6em 1.6em;
  background: linear-gradient(180deg, #e5e8ee 0%, #c7ccd6 55%, #9aa0ad 100%);
  box-shadow: 0 2.4em 3.6em -1.6em rgba(20, 35, 90, .45);
}
.gk-base span { position: absolute; left: 50%; top: 0; width: 15%; height: .8em; transform: translateX(-50%); border-radius: 0 0 .8em .8em; background: #b3b9c4; }

.gk-lscreen {
  --l: calc(100cqw / 2000);
  position: relative; overflow: hidden;
  aspect-ratio: 2000 / 1125;
  container-type: inline-size;
  border-radius: .5em;
  background: var(--gk-bg);
  line-height: 1.2;
}
.gk-lscreen * { --l: calc(100cqw / 2000); }
.gk-lscreen svg { width: calc(18 * var(--l)); height: calc(18 * var(--l)); }

.gk-side { position: absolute; left: 0; top: 0; bottom: 0; width: calc(255 * var(--l)); background: #fff; box-shadow: inset calc(-1.5 * var(--l)) 0 0 #ebeef1; }
.gk-side__top { position: absolute; left: calc(16 * var(--l)); right: calc(19 * var(--l)); top: calc(21 * var(--l)); height: calc(36 * var(--l)); display: flex; align-items: center; justify-content: space-between; }
.gk-side__top .gk-wm { width: calc(109 * var(--l)); height: calc(19.5 * var(--l)); color: var(--gk-blue-d); }
.gk-side__search { display: grid; place-items: center; width: calc(36 * var(--l)); height: calc(36 * var(--l)); border-radius: calc(10 * var(--l)); box-shadow: inset 0 0 0 calc(1.5 * var(--l)) #e3e6eb; color: #4b5563; }
.gk-side__nav { position: absolute; left: calc(12 * var(--l)); right: calc(14 * var(--l)); top: calc(88 * var(--l)); }
.gk-side__label { height: calc(26 * var(--l)); padding-left: calc(13 * var(--l)); font-size: calc(13 * var(--l)); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; line-height: calc(26 * var(--l)); color: #6b7280; }
.gk-side__label:not(:first-child) { margin-top: calc(22.5 * var(--l)) !important; }
.gk-nav {
  position: relative; display: flex; align-items: center; gap: calc(12 * var(--l));
  height: calc(41 * var(--l)); margin-bottom: calc(1 * var(--l)); padding-left: calc(14 * var(--l));
  border-radius: calc(8 * var(--l));
  font-size: calc(17 * var(--l)); color: #1f2937;
}
.gk-nav svg { width: calc(18 * var(--l)); height: calc(18 * var(--l)); }
.gk-nav.is-active { background: #e9edfc; color: var(--gk-blue-d); }
.gk-nav.is-active::before { content: ""; position: absolute; left: 0; top: calc(8 * var(--l)); bottom: calc(8 * var(--l)); width: calc(3 * var(--l)); border-radius: 1em; background: var(--gk-blue-d); }
.gk-side__foot { position: absolute; left: 0; right: 0; bottom: 0; height: calc(114 * var(--l)); box-shadow: inset 0 calc(1.5 * var(--l)) 0 #ebeef1; }
.gk-side__row { position: absolute; left: calc(12 * var(--l)); right: calc(15 * var(--l)); top: calc(11 * var(--l)); display: flex; justify-content: space-between; align-items: center; }
.gk-syncpill { display: inline-flex; align-items: center; gap: calc(7 * var(--l)); height: calc(31 * var(--l)); padding: 0 calc(12 * var(--l)); border-radius: 2em; box-shadow: inset 0 0 0 calc(1.5 * var(--l)) #e6e8ec; font-size: calc(13 * var(--l)); color: #6b7280; transition: background .3s, color .3s; }
.gk-syncpill svg { width: calc(14 * var(--l)); height: calc(14 * var(--l)); }
.gk-syncpill.is-flash { background: #e7edfd; color: var(--gk-blue-d); }
.gk-syncpill.is-flash svg { animation: gk-spin .9s linear 2; }
@keyframes gk-spin { to { transform: rotate(360deg); } }
.gk-theme { display: inline-flex; gap: calc(8 * var(--l)); padding: calc(7 * var(--l)) calc(10 * var(--l)); border-radius: 2em; box-shadow: inset 0 0 0 calc(1.5 * var(--l)) #e6e8ec; color: #4b5563; }
.gk-theme svg { width: calc(15 * var(--l)); height: calc(15 * var(--l)); }
.gk-theme svg.is-on { color: var(--gk-blue-d); }
.gk-userrow { position: absolute; left: calc(16 * var(--l)); right: calc(19 * var(--l)); top: calc(56 * var(--l)); display: flex; align-items: center; gap: calc(10 * var(--l)); }
.gk-av { display: grid; place-items: center; width: calc(36 * var(--l)); height: calc(36 * var(--l)); border-radius: 50%; background: #e9edfc; color: var(--gk-blue-d); font-size: calc(13 * var(--l)); font-weight: 600; }
.gk-userrow > span:nth-child(2) { flex: 1; }
.gk-userrow b { display: block; font-size: calc(15 * var(--l)); font-weight: 500; }
.gk-userrow small { display: flex; align-items: center; gap: calc(6 * var(--l)); font-size: calc(12 * var(--l)); color: #6b7280; }
.gk-userrow small i { width: calc(6 * var(--l)); height: calc(6 * var(--l)); border-radius: 50%; background: var(--gk-blue-d); }
.gk-userrow svg { width: calc(16 * var(--l)); height: calc(16 * var(--l)); color: #6b7280; }

.gk-lmain > * { position: absolute; }
.gk-ltitle { left: calc(415 * var(--l)); top: calc(24 * var(--l)); font-size: calc(32 * var(--l)); font-weight: 600; letter-spacing: -.02em; line-height: 1.1; }
.gk-llang { left: calc(1757 * var(--l)); top: calc(25 * var(--l)); width: calc(83 * var(--l)); height: calc(32 * var(--l)); display: flex; align-items: center; gap: calc(11 * var(--l)); padding: 0 calc(2 * var(--l)); border-radius: 2em; background: #fff; box-shadow: inset 0 0 0 calc(1.5 * var(--l)) #e6e8ec; font-size: calc(13 * var(--l)); color: #4b5563; }
.gk-llang b { display: grid; place-items: center; width: calc(39 * var(--l)); height: calc(28 * var(--l)); border-radius: 2em; background: var(--gk-blue-d); color: #fff; font-weight: 600; }

.gk-lhero {
  left: calc(415 * var(--l)); top: calc(88 * var(--l)); width: calc(1425 * var(--l)); height: calc(177 * var(--l));
  border-radius: calc(18 * var(--l));
  background: linear-gradient(180deg, #e1e7f9 0%, #eff2f9 100%);
  box-shadow: inset 0 0 0 calc(1.5 * var(--l)) #d3daf6;
}
.gk-lhero > * { position: absolute; }
.gk-lhero__eyebrow { left: calc(28 * var(--l)); top: calc(34 * var(--l)); font-size: calc(15 * var(--l)); font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: var(--gk-blue-d); }
.gk-lhero__big { left: calc(28 * var(--l)); top: calc(64 * var(--l)); display: flex; align-items: center; font-size: calc(48 * var(--l)); font-weight: 600; letter-spacing: -.03em; line-height: 1; }
.gk-vs { margin-left: calc(14 * var(--l)); padding: calc(4 * var(--l)) calc(9 * var(--l)); border-radius: 2em; font-size: calc(13 * var(--l)); font-weight: 500; letter-spacing: 0; transition: background .3s, color .3s; }
.gk-vs.is-down { background: #fbe0e3; color: #e5484d; }
.gk-vs.is-up { background: #dcf5e6; color: #16a34a; }
.gk-lhero__meta { left: calc(28 * var(--l)); top: calc(128 * var(--l)); white-space: nowrap; font-size: calc(16 * var(--l)); color: #4b5563; }
.gk-dots { letter-spacing: .1em; color: #6b7280; }
.gk-lhero__meta svg { display: inline-block; width: calc(16 * var(--l)); height: calc(16 * var(--l)); margin-left: calc(8 * var(--l)); vertical-align: calc(-2 * var(--l)); color: #6b7280; }
.gk-dots { margin-left: calc(6 * var(--l)); }
.gk-sep { margin: 0 calc(14 * var(--l)); color: #9aa1ad; }
.gk-lhero__range { right: calc(29 * var(--l)); top: calc(31 * var(--l)); font-size: calc(12 * var(--l)); letter-spacing: .06em; text-transform: uppercase; color: #6b7280; }
.gk-lscreen svg.gk-chart { left: calc(1095 * var(--l)); top: calc(52 * var(--l)); width: calc(302 * var(--l)); height: calc(100 * var(--l)); overflow: visible; }
.gk-chart path { transition: d .8s var(--ease-soft); }

.gk-llabel { left: calc(419 * var(--l)); top: calc((var(--y) - 9) * var(--l)); font-size: calc(14 * var(--l)); font-weight: 500; letter-spacing: .07em; text-transform: uppercase; color: #4b5563; line-height: 1.2; }
.gk-llabel--act { left: calc(1292 * var(--l)); }
.gk-lmore { right: calc(165 * var(--l)); top: calc((var(--y) - 9) * var(--l)); display: flex; align-items: center; gap: calc(5 * var(--l)); font-size: calc(14 * var(--l)); font-weight: 500; color: var(--gk-blue-d); line-height: 1.2; }
.gk-lmore svg { width: calc(14 * var(--l)); height: calc(14 * var(--l)); }

.gk-ic { display: grid; place-items: center; flex: none; width: calc(46 * var(--l)); height: calc(46 * var(--l)); border-radius: 50%; }
.gk-ic svg { width: calc(20 * var(--l)); height: calc(20 * var(--l)); }
.gk-ic.is-green { background: #e9f5ee; color: #22a35a; }
.gk-ic.is-orange { background: #faf2ea; color: #d9822b; }
.gk-ic.is-blue { background: #e9edfc; color: var(--gk-blue-d); }

.gk-lstats { left: calc(415 * var(--l)); top: calc(324 * var(--l)); display: grid; grid-template-columns: repeat(4, calc(344 * var(--l))); gap: calc(16 * var(--l)); }
.gk-lstats > div, .gk-lacc > div {
  position: relative; height: calc(88 * var(--l));
  border-radius: calc(14 * var(--l)); background: #fff; box-shadow: inset 0 0 0 calc(1.5 * var(--l)) #ebeef1;
}
.gk-lstats > div > *, .gk-lacc > div > * { position: absolute; }
.gk-lstats .gk-ic, .gk-lacc .gk-ic { left: calc(19 * var(--l)); top: calc(21 * var(--l)); }
.gk-lstats small, .gk-lacc small { left: calc(79 * var(--l)); top: calc(21 * var(--l)); font-size: calc(14 * var(--l)); color: #4b5563; }
.gk-lstats b, .gk-lacc b { left: calc(79 * var(--l)); top: calc(43 * var(--l)); font-size: calc(21 * var(--l)); font-weight: 600; letter-spacing: -.01em; }
.gk-lacc { left: calc(415 * var(--l)); top: calc(954 * var(--l)); display: grid; grid-template-columns: repeat(2, calc(344 * var(--l))); gap: calc(16 * var(--l)); }
.gk-lacc > div { height: calc(100 * var(--l)); }
.gk-lacc b { top: calc(48 * var(--l)); }
.gk-lacc em { margin-left: calc(6 * var(--l)); padding: calc(2 * var(--l)) calc(7 * var(--l)); border-radius: calc(4 * var(--l)); background: #e9edfc; color: var(--gk-blue-d); font-style: normal; font-size: calc(11 * var(--l)); font-weight: 600; text-transform: uppercase; }

.gk-lqa { left: calc(415 * var(--l)); top: calc(472 * var(--l)); width: calc(842 * var(--l)); height: calc(422 * var(--l)); }
.gk-lqa > * { position: absolute; display: flex; align-items: center; }
.gk-lqa__start {
  left: 0; top: 0; width: calc(414 * var(--l)); height: calc(96 * var(--l));
  padding: 0 calc(23 * var(--l)); gap: calc(15 * var(--l));
  border-radius: calc(14 * var(--l)); background: var(--gk-blue-d); color: #fff;
  box-shadow: 0 calc(8 * var(--l)) calc(20 * var(--l)) rgba(41, 75, 226, .25);
  font-size: calc(18 * var(--l)); font-weight: 600;
}
.gk-lqa__start i { display: grid; place-items: center; width: calc(49 * var(--l)); height: calc(49 * var(--l)); border-radius: 50%; background: rgba(255, 255, 255, .2); }
.gk-lqa__start i svg { width: calc(22 * var(--l)); height: calc(22 * var(--l)); }
.gk-lqa__start .go { margin-left: auto; width: calc(18 * var(--l)); height: calc(18 * var(--l)); }
.gk-lqa__row, .gk-lqa__tile { border-radius: calc(14 * var(--l)); background: #fff; box-shadow: inset 0 0 0 calc(1.5 * var(--l)) #ebeef1; font-size: calc(18 * var(--l)); font-weight: 500; }
.gk-lqa__row { left: 0; top: calc((112 + (var(--r) - 1) * 109) * var(--l)); width: calc(414 * var(--l)); height: calc(92 * var(--l)); padding: 0 calc(23 * var(--l)); gap: calc(14 * var(--l)); }
.gk-lqa__tile { left: calc((430 + var(--c) * 214) * var(--l)); top: calc(var(--t) * 219 * var(--l)); width: calc(198 * var(--l)); height: calc(204 * var(--l)); flex-direction: column; justify-content: center; gap: calc(14 * var(--l)); }
.gk-lqa__tile .gk-ic { width: calc(50 * var(--l)); height: calc(50 * var(--l)); }

.gk-lact {
  left: calc(1288 * var(--l)); top: calc(472 * var(--l)); width: calc(552 * var(--l)); height: calc(422 * var(--l));
  overflow: hidden; border-radius: calc(14 * var(--l)); background: #fff; box-shadow: inset 0 0 0 calc(1.5 * var(--l)) #ebeef1;
}
.gk-lact li { position: relative; display: flex; align-items: center; gap: calc(14 * var(--l)); height: calc(68 * var(--l)); padding: 0 calc(19 * var(--l)); box-shadow: inset 0 calc(-1.5 * var(--l)) 0 #ebeef1; }
.gk-lact li:nth-child(n+7) { display: none; }
.gk-lact .gk-ic { width: calc(36 * var(--l)); height: calc(36 * var(--l)); }
.gk-lact .gk-ic svg { width: calc(16 * var(--l)); height: calc(16 * var(--l)); }
.gk-lact .tx { flex: 1; min-width: 0; }
.gk-lact .tx b { display: block; font-size: calc(16 * var(--l)); font-weight: 500; }
.gk-lact .tx small { margin-top: calc(3 * var(--l)); font-size: calc(13 * var(--l)); color: #4b5563; }
.gk-lact .amt { font-size: calc(16 * var(--l)); font-weight: 500; }
.gk-lact li.is-new { animation: gk-lnew 2.4s ease both; }
@keyframes gk-lnew { 0% { background: #e9edfc; transform: translateY(-40%); opacity: 0; } 20% { transform: none; opacity: 1; } 60% { background: #e9edfc; } 100% { background: #fff; } }

@media (prefers-reduced-motion: reduce) {
  .gk-scene *, .gk-scene *::before, .gk-scene *::after { animation: none !important; transition: none !important; }
}