/* ══════════════════════════════════════════════════════════════
   CONCEPT BUILDS — device trio, full-page scroll background

   One device per tier, in the same dark green-lit studio as the rest
   of the site: Launch (plumbing) on a phone, Growth (dental) on a
   tablet, Intelligent (CPA) on a laptop. Built from screenshots and
   CSS 3D transforms, no video.

   devices.js writes the camera onto .d-stage/.d-rig as custom
   properties (--x --y --k --rx --ry --cx --cy --cz, all numbers) and a
   --lit (0..1) onto each .d-dev. Everything is sized in --u so the
   whole rig scales with the viewport.
   ══════════════════════════════════════════════════════════════ */

.d-stage {
    --u: min(11vw, 24vh);
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    background:
        radial-gradient(ellipse 55% 48% at 70% 42%, rgba(16, 201, 138, 0.18), rgba(16, 201, 138, 0) 70%),
        radial-gradient(ellipse 80% 30% at 50% 100%, rgba(16, 201, 138, 0.07), rgba(16, 201, 138, 0) 70%),
        #0d110f;
    perspective: 1800px;
    perspective-origin: 50% 40%;
}

.d-rig {
    position: absolute;
    left: calc(var(--x, 50) * 1%);
    top: calc(var(--y, 55) * 1%);
    width: 0;
    height: 0;
    transform-style: preserve-3d;
    transform:
        scale3d(var(--k, 1), var(--k, 1), var(--k, 1))
        rotateX(calc(var(--rx, 0) * 1deg))
        rotateY(calc(var(--ry, 0) * 1deg))
        translate3d(calc(var(--cx, 0) * var(--u)), calc(var(--cy, 0) * var(--u)), calc(var(--cz, 0) * var(--u)));
}

/* a device stands on the floor (y = 0) at its own spot in the rig */
.d-dev {
    position: absolute;
    left: 0;
    top: 0;
    transform-style: preserve-3d;
    transform:
        translate3d(calc(var(--px) * var(--u)), 0, calc(var(--pz) * var(--u)))
        rotateY(calc(var(--pr) * 1deg));
}
.d-phone  { --px: -1.3;  --pz: 0.5;  --pr: 20; }
.d-tablet { --px: 0;     --pz: 0;    --pr: 0; }
.d-laptop { --px: 1.45;  --pz: -0.3; --pr: -20; }

/* floor glow under each device, brighter when it has the camera */
.d-glow {
    position: absolute;
    left: calc(var(--u) * -1.1);
    top: calc(var(--u) * -0.5);
    width: calc(var(--u) * 2.2);
    height: var(--u);
    transform: rotateX(90deg);
    background: radial-gradient(closest-side, rgba(16, 201, 138, 0.45), rgba(16, 201, 138, 0));
    opacity: calc(0.25 + var(--lit, 1) * 0.75);
}

/* ── screen bodies (phone, tablet, laptop lid) ── */
.d-body {
    position: absolute;
    transform-style: preserve-3d;
    width: var(--bw);
    height: var(--bh);
    left: calc(var(--bw) / -2);
    top: calc(var(--bh) * -1);
}
/* the back plate sits a few px behind the face: it shows as the
   device's thickness once the rig turns */
.d-body::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--br);
    background: #050807;
    border: 1px solid rgba(16, 201, 138, 0.18);
    transform: translateZ(calc(var(--u) * -0.035));
}
.d-face {
    position: absolute;
    inset: 0;
    border-radius: var(--br);
    background: #0a0e0c;
    border: 1px solid rgba(16, 201, 138, 0.32);
    padding: var(--bz);
    box-shadow:
        0 30px 70px -20px rgba(0, 0, 0, 0.85),
        0 0 50px -8px rgba(16, 201, 138, calc(0.4 * var(--lit, 1)));
}
.d-face img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    border-radius: calc(var(--br) - var(--bz));
}
/* out of focus = into the dark */
.d-face::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--br);
    background: #07100b;
    opacity: calc((1 - var(--lit, 1)) * 0.72);
}

.d-phone  .d-body { --bw: calc(var(--u) * 0.5);  --bh: calc(var(--u) * 1.04); --br: calc(var(--u) * 0.07); --bz: calc(var(--u) * 0.022); }
.d-tablet .d-body { --bw: calc(var(--u) * 0.84); --bh: calc(var(--u) * 1.18); --br: calc(var(--u) * 0.05); --bz: calc(var(--u) * 0.03); }
.d-laptop .d-body {
    --bw: calc(var(--u) * 1.5); --bh: calc(var(--u) * 0.97); --br: calc(var(--u) * 0.03); --bz: calc(var(--u) * 0.025);
    transform-origin: 50% 100%;
    transform: rotateX(10deg);          /* lid leans back from the hinge */
}
/* laptop base: lies flat in front of the hinge */
.d-deck {
    position: absolute;
    width: calc(var(--u) * 1.58);
    height: calc(var(--u) * 1.02);
    left: calc(var(--u) * -0.79);
    top: 0;
    transform-origin: 50% 0;
    transform: rotateX(90deg);
    border-radius: calc(var(--u) * 0.03);
    border: 1px solid rgba(16, 201, 138, 0.22);
    background:
        /* trackpad */
        linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05)) 50% 88% / 34% 26% no-repeat,
        /* key grid */
        repeating-linear-gradient(90deg, transparent 0 calc(var(--u) * 0.085), rgba(0, 0, 0, 0.55) calc(var(--u) * 0.085) calc(var(--u) * 0.1)) 50% 12% / 88% 48% no-repeat,
        repeating-linear-gradient(0deg, transparent 0 calc(var(--u) * 0.085), rgba(0, 0, 0, 0.55) calc(var(--u) * 0.085) calc(var(--u) * 0.1)) 50% 12% / 88% 48% no-repeat,
        linear-gradient(rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.035)) 50% 12% / 88% 48% no-repeat,
        #0b100d;
    box-shadow: 0 0 40px -6px rgba(16, 201, 138, calc(0.3 * var(--lit, 1)));
}

/* tier label on the floor in front of each device */
.d-tag {
    position: absolute;
    left: calc(var(--u) * -0.8);
    width: calc(var(--u) * 1.6);
    top: calc(var(--u) * 0.1);
    text-align: center;
    font: 700 calc(var(--u) * 0.07)/1 'Space Mono', monospace;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(16, 201, 138, calc(0.35 + 0.65 * var(--lit, 1)));
    white-space: nowrap;
}
/* the laptop's label stands just in front of its deck */
.d-laptop .d-tag { transform: translateZ(calc(var(--u) * 1.12)); }

.d-scrim {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(8, 11, 9, 0.7) 0%, rgba(8, 11, 9, 0.22) 44%, rgba(8, 11, 9, 0) 62%),
        radial-gradient(ellipse 80% 75% at 60% 45%, rgba(8, 11, 9, 0), rgba(8, 11, 9, 0.5) 100%);
}

/* ── PAGE CONTENT ON TOP ── */
body.devices .page-hero { background: transparent; }
body.devices main > section:not(.cta-band) { background: transparent; }
body.devices .case,
body.devices .prose.d-note {
    background: var(--glass-strong);
}
body.devices .prose.d-note { max-width: none; border: 1px solid var(--border); padding: 40px 40px 36px; }
body.devices .prose.d-note > * { max-width: 760px; }
body.devices .case-fact { background: rgba(255, 255, 255, 0.03); }

/* tier table: its inline styles use dark ink for labels, pin them light */
body.devices .tm-hint,
body.devices .tm-corner-label,
body.devices .tm-num { --tm-label: rgba(240, 240, 237, 0.62); }
body.devices .tm-price,
body.devices .tm-pop { --tm-accent-text: #3ee0a8; }
body.devices .tm-no  { color: rgba(240, 240, 237, 0.4); }
body.devices .tm-val { color: rgba(240, 240, 237, 0.75); }
body.devices .tm-foot { color: rgba(240, 240, 237, 0.62); }
body.devices .tm-foot a { color: #3ee0a8; }
body.devices .tm-table th,
body.devices .tm-table td { background: rgba(11, 15, 13, 0.9); }
body.devices .tm-table tbody tr:hover th,
body.devices .tm-table tbody tr:hover td { background: rgba(16, 30, 23, 0.95); }

/* Wide screens: copy in a left column, devices on the right.
   Matches wideMq in devices.js. The table keeps the full width. */
@media (min-width: 1000px) and (min-aspect-ratio: 13/10) {
    body.devices .case,
    body.devices .prose.d-note { max-width: min(600px, 44vw); }
    body.devices .prose.d-note .related-grid { grid-template-columns: 1fr; }
    body.devices .case-facts { grid-template-columns: 1fr; }
    body.devices .demo-actions .price-cta { white-space: nowrap; padding-left: 18px; padding-right: 18px; }
    body.devices .pc-band { justify-content: flex-start; padding-left: max(48px, calc((100vw - 1200px) / 2 + 48px)); }
}

@media (max-width: 700px) {
    .d-stage { --u: min(21vw, 22vh); }
    body.devices .prose.d-note { padding: 28px 22px; }
}