/* =============================================================================================
   Products page in the language of "Tropfen 3" (2026-10-23; before: draft "Zettel", 2026-10-15):
   the studio's own apps and trading tools in the room of the home page (shared/site-room.css: dust
   in its depths, the tint of the group in view) and as drops of light (shared/site-drop.css). No
   cards and no frames: every product is a drop with its words beside it. The row of product
   pictures stands on an arc in the room; every drop faces the reader, so it stays round, and
   breathes on its own beat (Maurice, 2026-10-23: keep the row, round and in the room). Tokens
   and the guided build-up: shared/site-theme.css. Motion: transform/opacity only; still under
   reduced motion.
   ============================================================================================= */

.products-page {
    /* Side padding of FULL-WIDTH sections only: 100% resolves where var(--edge) is used, i.e.
       against the containing block. Inside a box that is already capped and centred (max-width +
       margin: auto) use --gutter: there --edge centres a second time and eats the content once
       the window is wider than --page-max + 2 * --gutter. */
    --edge: max(var(--gutter), calc((100% - var(--page-max)) / 2));

    overflow-x: clip;
}

.btn--small {
    min-height: 44px;
    padding: 0 1.15em;
    font-size: 0.9rem;
}

/* Sections clip sideways (clip, not hidden): the arc in the room never widens the page. */
.pp-hero,
.pp-group,
.pp-support,
.pp-company {
    overflow-x: clip;
}

/* --- Opening: the words and the row of pictures on its arc ---------------------------------- */

.pp-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: clamp(24px, 4vw, 72px);
    align-items: center;
    min-height: min(90svh, 920px);
    padding: calc(var(--site-header-h, 76px) + clamp(24px, 5vh, 64px)) var(--edge) clamp(48px, 8vh, 96px);
}

.pp-title {
    margin-bottom: 24px;
}

.pp-jump {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 34px;
}

.pp-jump a {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    min-height: 44px;
    padding: 0 18px 0 15px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: rgba(7, 9, 13, 0.42);
    color: var(--fg-2);
    font-size: 0.92rem;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.25s ease, border-color 0.25s ease, transform 0.35s var(--ease-out);
}

.pp-jump .sdot {
    width: 9px;
    height: 9px;
}

@media (hover: hover) {
    .pp-jump a:hover {
        border-color: var(--fg);
        color: var(--fg);
        transform: translateY(-2px);
    }
}

/* The row of pictures: drops on the front of a cylinder in the room. Each one is turned to its
   place and back again (rotateY there and back), so it faces the reader and stays round; the
   depth of its place makes the outer ones smaller. */
.pp-showcase {
    /* Six drops 16 degrees apart on a radius of 5.4 drops: a flat arc, so even the outer pair
       stands apart (a deeper curve crowds the outer ones behind their neighbours). */
    --drop: clamp(80px, 6.25vw, 120px);
    --radius: calc(var(--drop) * 5.4);
    --arc-step: 16deg;

    position: relative;
    display: grid;
    place-items: center;
    height: calc(var(--drop) * 2.3);
    perspective: 1300px;
    perspective-origin: 50% 32%;
}

/* The row breathes only while it can be seen (products.js sets .is-live; without script it breathes). */
html.js .pp-arc:not(.is-live) .sdrop--float {
    animation-play-state: paused;
}

.pp-arc {
    position: relative;
    width: var(--drop);
    height: var(--drop);
    transform: translateZ(calc(var(--radius) * -1)) rotateX(-7deg);
    transform-style: preserve-3d;
}

.pp-arc-item {
    --a: calc((var(--i) - 2.5) * var(--arc-step, 24deg));

    position: absolute;
    inset: 0;
    transform: rotateY(var(--a)) translateZ(var(--radius)) rotateY(calc(var(--a) * -1)) rotateX(7deg);
}

/* A pool of light under the row. */
.pp-showcase::after {
    content: "";
    position: absolute;
    bottom: 2%;
    left: 50%;
    width: calc(var(--drop) * 5.2);
    height: calc(var(--drop) * 0.55);
    border-radius: 50%;
    background: radial-gradient(closest-side, color-mix(in oklab, var(--w-pearl) 14%, transparent), transparent);
    translate: -50% 0;
    pointer-events: none;
}

/* --- The groups: apps and trading tools ----------------------------------------------------- */

.pp-group {
    max-width: calc(var(--page-max) + 2 * var(--gutter));
    margin: 0 auto;
    padding: clamp(64px, 9vw, 140px) var(--gutter); /* capped + centred: --gutter, not --edge */
}

#apps,
.pp-jump a[href="#apps"] {
    --c: var(--w-apps);
}

#trading,
.pp-jump a[href="#trading"] {
    --c: var(--w-trading);
}

.pp-group-head {
    max-width: 46rem;
    margin-bottom: clamp(36px, 5vw, 72px);
    scroll-margin-top: calc(var(--site-header-h, 76px) + 24px);
}

.pp-group-title {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    margin-bottom: 14px;
    font-family: var(--font-display);
    font-size: clamp(2rem, 1.2rem + 2.1vw, 3.3rem);
    font-weight: 400;
    line-height: 1.05;
}

/* The dot stands at the first line, also where the title takes two. */
.pp-group-title .sdot {
    width: 14px;
    height: 14px;
    margin-top: 0.42em;
}

.pp-apps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(44px, 5vw, 80px) clamp(28px, 4vw, 72px);
}

.pp-trading {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(36px, 4vw, 60px) clamp(18px, 2vw, 32px);
}

/* A product: its drop and its words beside it, no card around them. */
.product {
    --media: clamp(112px, 10vw, 156px);

    display: grid;
    grid-template-columns: var(--media) minmax(0, 1fr);
    gap: clamp(20px, 2.4vw, 36px);
    align-items: center;
    scroll-margin-top: calc(var(--site-header-h, 76px) + 24px);
}

.product--feature {
    --media: clamp(220px, 27vw, 400px);

    grid-column: 1 / -1;
    gap: clamp(28px, 4vw, 72px);
}

.pp-trading .product {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.product-media {
    width: var(--media);
    max-width: 100%;
}

.pp-trading .product-media {
    width: min(100%, 150px);
}

.product-drop {
    transition: transform 0.7s var(--ease-out);
}

/* The drop rises a little towards the reader while its product is pointed at or in use. */
.product:is(:hover, :focus-within) .product-drop {
    transform: translateY(-5px) scale(1.025);
}

.product:is(:hover, :focus-within) .sdrop-aura {
    opacity: 1;
}

.product:is(:hover, :focus-within) .sdrop-skin {
    opacity: 0.95;
}

.product-platform {
    margin-bottom: 8px;
    color: color-mix(in oklab, var(--c, var(--w-pearl)) 72%, white);
    font-family: var(--font-data);
    font-size: 0.74rem;
    letter-spacing: 0.06em;
}

.product--dev .product-platform {
    color: var(--fg-3);
}

.product-name {
    margin-bottom: 10px;
    font-family: var(--font-display);
    font-size: var(--step-2);
    font-weight: 400;
    line-height: 1.1;
}

.product--feature .product-name {
    font-size: var(--step-3);
}

.pp-trading .product-name {
    font-size: var(--step-1);
}

.product-text {
    max-width: 34rem;
    color: var(--fg-2);
    font-size: 0.95rem;
    line-height: 1.6;
}

.product--feature .product-text {
    font-size: 1.04rem;
}

.product-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    align-items: center;
    margin-top: 16px;
}

.product-store {
    color: color-mix(in oklab, var(--c, var(--cyan)) 78%, white);
}

.product-note {
    color: var(--fg-3);
    font-size: 0.86rem;
}

.pp-note {
    max-width: 52rem;
    margin-top: clamp(40px, 5vw, 64px);
    color: var(--fg-3);
    font-size: 0.86rem;
}

/* --- Help and the way to company projects ---------------------------------------------------- */

.pp-support,
.pp-company {
    display: grid;
    justify-items: center;
    max-width: 52rem;
    margin: 0 auto;
    padding: clamp(56px, 8vw, 120px) var(--gutter); /* capped: see --edge */
    text-align: center;
    scroll-margin-top: calc(var(--site-header-h, 76px) + 24px);
}

.pp-support-drop {
    width: clamp(84px, 8vw, 116px);
    margin-bottom: 30px;
}

.pp-support .t-h3,
.pp-company .t-h3 {
    margin-bottom: 12px;
}

.pp-support .t-body,
.pp-company .t-body {
    margin: 0 auto;
}

.pp-support-actions,
.pp-company-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 26px;
    align-items: center;
    justify-content: center;
    margin-top: 28px;
}

.pp-mail {
    color: var(--fg-3);
    font-size: 0.94rem;
}

.pp-mail a {
    color: var(--fg);
    font-family: var(--font-data);
    font-size: 0.9rem;
}

.pp-company {
    padding-bottom: clamp(80px, 10vw, 140px);
}

/* --- Responsive and preferences ------------------------------------------------------------ */

@media (max-width: 75em) {
    .pp-trading {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 64em) {
    .pp-hero {
        grid-template-columns: minmax(0, 1fr);
        min-height: 0;
    }

    .pp-showcase {
        --drop: clamp(70px, 11vw, 112px);

        height: calc(var(--drop) * 2.1);
        margin-top: 8px;
    }
}

@media (max-width: 48em) {
    .pp-apps {
        grid-template-columns: minmax(0, 1fr);
    }

    .product--feature {
        --media: min(64vw, 260px);

        grid-template-columns: minmax(0, 1fr);
        justify-items: start;
    }

    .pp-trading {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 40em) {
    /* On a phone the row is flat, gently curved like a smile: in 3D the outer drops of six crowd
       behind their neighbours on a narrow screen. */
    .pp-showcase {
        --drop: min(54px, 12.4vw);

        height: calc(var(--drop) * 2.2);
        perspective: none;
    }

    .pp-arc {
        display: flex;
        gap: min(12px, 2.6vw);
        width: auto;
        height: auto;
        transform: none;
    }

    .pp-arc-item {
        position: relative;
        inset: auto;
        width: var(--drop);
        transform: translateY(var(--lift, 0));
    }

    .pp-arc-item:is(:first-child, :last-child) {
        --lift: -14px;
    }

    .pp-arc-item:is(:nth-child(2), :nth-child(5)) {
        --lift: -4px;
    }

    .product {
        --media: 92px;

        gap: 18px;
        align-items: start;
    }

    .product-media {
        margin-top: 4px;
    }

    .product--feature {
        --media: min(64vw, 240px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .product-drop,
    .pp-jump a {
        transition: none;
    }
}

@media print {
    .pp-showcase {
        display: none;
    }
}

.product-rating {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin-block: 10px 12px;
    color: var(--fg-2);
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
}