/* Products page: real laptop + light app screens in brand colours + a cursor using the app (device.js).
   Loaded after products.css and lapui.css. Black / white / grey + orange accent, problems in burnt orange. */

/* ---------- just the screen: a clean app window, no device frame ---------- */
.pd-fig { padding-bottom: 0; }
.lap-lid { padding: 0; border-radius: 14px; overflow: hidden; background: #fff;
  box-shadow: 0 0 0 1px #e3e3e3, 0 30px 50px -34px rgba(0,0,0,.35), 0 12px 22px -16px rgba(0,0,0,.18); }
.lap-cam, .lap-base, .lap-notch { display: none !important; }
.lap-scr { border-radius: 0; background: #f6f6f6; }
.lap-gl { display: none; }
.dev-sh { bottom: -22px; opacity: .6; }
.lap-cap { margin-top: 22px; }
/* ---------- light app theme ---------- */
.ui, .ui-lt { background: #f6f6f6; color: #111; }
.u-top { background: #fff; border-bottom: 1px solid #ececec; }
.u-burger, .u-burger::after { border-color: #6b6b6b; } .u-burger::after { background: #6b6b6b; }
.u-ic { background: #f2f2f2; box-shadow: inset 0 0 0 1px #e3e3e3; }
.u-side { background: #fff; border-right: 1px solid #ececec; }
.u-si { color: #3a3a3a; } .u-si b { border-color: #9a9a9a; }
.u-si.on { background: #fff1e2; color: #c25e00; } .u-si.on b { border-color: #f7861e; }
.u-pn { background: #fff; box-shadow: 0 0 0 1px #e8e8e8, 0 8px 18px -14px rgba(0,0,0,.25); }
.u-pn h4 { color: #111; }
.u-muted { color: #8a8a8a; }
.u-btn.bl { background: #111; }
.u-sel { background: #fff; box-shadow: 0 0 0 1px #dcdcdc; color: #3a3a3a; }
.t-tab { color: #6b6b6b; } .t-tab.on { color: #111; font-weight: 700; }
.t-row { border-bottom: 1px solid #efefef; color: #111; } .t-row.h { color: #6b6b6b; }
.t-ok { background: #111; color: #fff; } .t-nok { background: #fde8dc; color: #c2410c; }
.t-g { color: #111; } .t-r { color: #c2410c; }
.t-hl { background: #fff7ee; box-shadow: inset 0 0 0 1px rgba(247,134,30,.45); }
@keyframes u-pulse { 50% { box-shadow: 0 0 0 5px rgba(194,65,12,0), 0 0 12px rgba(194,65,12,.45); } }
.p-k { background: #fff; box-shadow: 0 0 0 1px #e8e8e8; } .p-k b { color: #111; } .p-k span { color: #6b6b6b; }
.p-ax { background: #ececec; } .p-lg { color: #3a3a3a; } .p-hb { background: #ececec; }
.p-pie { background: conic-gradient(#f7861e 0 46%, #111 46% 66%, #9a9a9a 66% 80%, #c2410c 80% 92%, #d4d4d4 92% 100%); }
.h-card { background: #fff; box-shadow: 0 0 0 1px #e3e3e3; }
.h-card.al { background: #c2410c; }
@keyframes h-al { 50% { background: #9a3412; } }
.h-card small { color: #6b6b6b; } .h-card b { color: #111; }
.h-card.al small, .h-card.al b { color: #fff; }
.h-card u { border-color: #d4d4d4; border-right-color: transparent; }
.h-card i { background: #f7861e; } .h-card.al i { background: #fff; }
.h-tb { background: linear-gradient(90deg, #e3e3e3 0%, #ffd2a8 45%, #f7861e 70%, #c2410c 100%); }
.h-tb::after { background: #111; box-shadow: none; }
.h-tile { background: #f4f4f4; color: #111; box-shadow: inset 0 0 0 1px #e3e3e3; }
.l-tile { background: #111; color: #fff; box-shadow: 0 8px 16px -10px rgba(0,0,0,.4); }
@keyframes l-hot { 0%,60%,100% { transform: none; background: #111; } 66%,80% { transform: scale(.96); background: #f7861e; box-shadow: 0 0 0 4px rgba(247,134,30,.25); } }
.n-card h4 { color: #111; } .n-card small { color: #8a8a8a; }
.o-pn { background: #fff; } .o-pn + .o-pn { border-top: 1px solid #ececec; }
.o-h { color: #111; } .o-back { color: #111; border-color: #cfcfcf; }
.o-t.h { color: #111; } .o-t.d { color: #3a3a3a; } .o-line { background: #ececec; } .o-bar { background: #ececec; }
.g-rail { background: #f4f4f4; } .g-rail div { color: #3a3a3a; } .g-rail div b { border-color: #6b6b6b; }
.g-rail div.on { background: #f7861e; color: #fff; } .g-rail div.on b { border-color: #fff; }
.g-ln.del { background: #fde8dc; } .g-ln.add { background: #fff1e2; }

/* ---------- the cursor using the app ---------- */
.lap-cur { position: absolute; z-index: 7; left: 60%; top: 70%; width: 18px; height: 18px; pointer-events: none; filter: drop-shadow(0 2px 2px rgba(0,0,0,.35)); }
.lap-cur svg { display: block; width: 100%; height: 100%; }
.lap-cur::after { content: ""; position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%; border: 2px solid #f7861e; opacity: 0; }
.lap-cur.clk::after { animation: lap-clk .55s ease-out; }
@keyframes lap-clk { from { opacity: .9; transform: scale(.3); } to { opacity: 0; transform: scale(1.7); } }
.ui .u-press { outline: 2px solid rgba(247,134,30,.75); outline-offset: 2px; border-radius: 6px; transition: outline-color .2s; }
@media (prefers-reduced-motion: reduce) { .lap-cur { display: none; } }
.o-pn + .o-pn { border-top: 1px solid #ececec; }
.o-pn .o-line { background: #ececec; }

.lap-cur.touch { display: none; }

/* ================= product blocks: balanced and responsive ================= */
.pd, .pd.r { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(36px, 5vw, 84px); align-items: center; padding-block: clamp(48px, 6vw, 88px); margin-top: 0; }
.pd.r { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); }
/* header row: icon + outline number side by side, no tall empty gap */
.pd-copy { display: flex; flex-direction: column; align-items: flex-start; }
.pd-copy .pd-n { position: static; order: 0; margin: 0 0 -6px; font-size: clamp(48px, 4vw, 64px) !important; line-height: 1; }
.pd-copy .pd-ic { margin-top: 0; order: 1; position: absolute; left: clamp(80px, 7vw, 110px); top: 4px; width: 48px; height: 48px; border-radius: 15px; }
.pd-copy > *:not(.pd-n):not(.pd-ic) { order: 2; }
.pd h2 { margin-top: 16px; max-width: 560px; }
.pd-lead { margin-top: 10px; font-size: 17px; line-height: 1.45; max-width: 560px; }
.pd-p { margin-top: 12px; max-width: 560px; }
.pd-ul { margin-top: 18px; gap: 9px; max-width: 560px; }
.pd-ul li { line-height: 1.5; }
.pd-more { margin-top: 20px; }
/* screen: full column width, caption close */
.pd-fig { width: 100%; max-width: 760px; justify-self: center; }
.pd .lap-cap { margin-top: 16px; }
.pd .dev-sh { display: none; }
.pd-fig:hover .lap { transform: none; }
@media (max-width: 1100px) { .pd-ul li { font-size: 15px; } }
@media (max-width: 900px) {
  .pd, .pd.r { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .pd .pd-fig, .pd.r .pd-fig { order: -1; max-width: 680px; justify-self: stretch; margin: 0 auto; }
  .pd .pd-copy, .pd.r .pd-copy { order: 0; }
  .pd-copy .pd-ic { left: 76px; }
}
@media (max-width: 560px) {
  .pd, .pd.r { padding-block: 40px; gap: 22px; }
  .pd-copy .pd-n { font-size: 44px !important; } .pd-copy .pd-ic { left: 64px; top: 0; width: 42px; height: 42px; }
  .pd h2 { font-size: 27px; } .pd-lead { font-size: 15.5px; }
  .lap-lid { border-radius: 10px; }
}
.pd-copy { align-items: stretch; min-width: 0; }
.pd-copy > .pd-n, .pd-copy > .pd-more { align-self: flex-start; }
.pd-copy > * { max-width: 100%; }