/* ===== /build/ landing (build_index.php) — LEGO Playground tokens copied from style.css, top bar/pills from build.css ===== */
:root {
    --red:    #E3000B;
    --red-side: #A30008;   /* the brick CTA's darker bottom edge */
    --red-text: #A30008;   /* red text on the yellow zone (4.5:1, even over a floating brick) */
    --blue:   #006CB7;
    --yellow: #FFD700;
    --green:  #00A651;
    --surface: #FFFFFF;
    --cream:   #FFF8F0;
    --line:    #F0EBE4;
    --text:    #1A1A1A;
    --text2:   #5A5A5A;
    --shadow:   0 2px 12px rgba(0,0,0,0.06);
    --shadow-3: 0 8px 24px rgba(0,0,0,0.12);
    --radius:    16px;
    --radius-xs: 8px;
    --ease:     cubic-bezier(0.22, 1, 0.36, 1);
    --back:     cubic-bezier(0.34, 1.56, 0.64, 1);   /* back-out: a small overshoot, like a brick snapping on */
    --dur-fast: 150ms;
    --font-heading: 'Caveat', 'Segoe UI', system-ui, sans-serif;
    --font-body:    'Quicksand', system-ui, -apple-system, sans-serif;
    --gutter: 24px;
    --top-h:  56px;
    --safe-t: env(safe-area-inset-top, 0px);
    --safe-r: env(safe-area-inset-right, 0px);
    --safe-l: env(safe-area-inset-left, 0px);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-padding-top: calc(var(--top-h) + 16px); }
body {
    margin: 0;
    font: 500 15px/1.5 var(--font-body);
    color: var(--text);
    background: var(--cream);
    -webkit-tap-highlight-color: transparent;
}
h1, h2, h3, p, ol { margin: 0; }
a { color: var(--blue); }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
button, select { font: inherit; color: inherit; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.bi { flex: none; width: 1.15em; height: 1em; fill: currentColor; vertical-align: -0.1em; }
.wrap {
    width: 100%; max-width: 1280px; margin: 0 auto;
    padding-left: calc(var(--gutter) + var(--safe-l)); padding-right: calc(var(--gutter) + var(--safe-r));
}

/* ===== Buttons and pills: lift on hover, press to 0.97 ===== */
.pill, .btn, .chip, .picker button {
    transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background var(--dur-fast), border-color var(--dur-fast);
}
@media (hover: hover) {
    .pill:hover, .btn:hover, .chip:hover { transform: translateY(-2px); box-shadow: var(--shadow-3); }
}
.pill:active, .btn:active, .picker button:active { transform: scale(0.97); transition-duration: 100ms; }
.chip:active { transform: scale(1.04, 0.88); transition-duration: 100ms; }   /* a tiny squish */
.pill {
    display: inline-flex; align-items: center; gap: 6px;
    min-height: 44px; padding: 0 14px;
    background: var(--surface); color: var(--text);
    border: 1px solid var(--line); border-radius: 999px; box-shadow: var(--shadow);
    font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap;
}

/* ===== Top bar (same look as the viewer's) ===== */
#topbar {
    position: sticky; top: 0; z-index: 10;
    height: calc(var(--top-h) + var(--safe-t));
    padding: var(--safe-t) calc(16px + var(--safe-r)) 0 calc(16px + var(--safe-l));
    display: flex; align-items: center; gap: 12px;
    background: rgba(255,255,255,0.85); border-bottom: 1px solid var(--line);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.back { color: var(--blue); }
.back-short { display: none; }
.top-nav { flex: 1; display: flex; gap: 4px; }
.top-nav a {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 999px;
    color: var(--text2); font-weight: 700; text-decoration: none;
}
.top-nav a:hover { color: var(--text); }
.top-nav a[aria-current] { color: var(--text); box-shadow: inset 0 -3px 0 var(--red); border-radius: 0; }
.top-tag { flex: none; padding: 3px 10px; border-radius: 999px; background: rgba(0,108,183,0.1); color: var(--blue); font-size: 12px; font-weight: 700; }

/* ===== Sunny zone: intro + showcase + numbers on a LEGO-box yellow field, bricks scattered in the margins ===== */
.sunny {
    position: relative; padding-bottom: 32px; border-radius: 0 0 48px 48px;
    background: radial-gradient(120% 90% at 50% 0%, #FFE9A8 0%, #FFF1CC 45%, var(--cream) 100%);
}
.sunny > :not(.floaters) { position: relative; }
.floaters { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.fb {   /* --py is the scroll offset (build-index.js), --k how far each brick drifts */
    position: absolute; height: auto; opacity: 0.15;
    transform: translateY(calc(var(--py, 0) * var(--k, 0.05) * 1px)) rotate(var(--r, 0deg));
}
/* left margin, then behind the headline (right of it), then the right margin; margins exist only ≥ 1360 px */
.f1  { left: calc(50% - 740px); top: 88px; width: 104px; --r: -12deg; --k: 0.08; opacity: 0.16; }
.f2  { left: calc(50% - 770px); top: 44%; width: 150px; --r: 78deg; --k: 0.05; }
.f3  { left: calc(50% - 700px); top: 76%; width: 52px; --k: 0.1; opacity: 0.18; }
.f4  { left: calc(50% - 730px); top: 360px; width: 64px; --r: 20deg; --k: 0.03; opacity: 0.13; }
.f5  { right: 16%; top: 22px; width: 76px; --r: 14deg; --k: 0.1; }
.f6  { right: 32%; top: 70px; width: 40px; --k: 0.06; opacity: 0.18; }
.f7  { right: calc(50% - 790px); top: 150px; width: 170px; --r: -70deg; --k: 0.06; opacity: 0.14; }
.f8  { right: calc(50% - 730px); top: 52%; width: 92px; --r: -10deg; --k: 0.08; }
.f9  { right: calc(50% - 700px); top: 80%; width: 48px; --k: 0.04; opacity: 0.18; }
.f10 { right: 9%; top: 6px; width: 110px; --r: 4deg; --k: 0.12; opacity: 0.12; }

/* ===== Stud-row divider (showcase → All builds) ===== */
.studs {
    height: 16px; margin-top: 28px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='16'%3E%3Ccircle cx='14' cy='8' r='7' fill='%23E8DCC8'/%3E%3Ccircle cx='13' cy='7' r='4.5' fill='%23F4ECDF'/%3E%3C/svg%3E") center / 28px 16px space no-repeat content-box;   /* space: whole studs only, no half studs at the ends */
}

/* ===== Intro ===== */
.intro { padding-top: 28px; padding-bottom: 16px; }
.eyebrow { color: var(--red-text); font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
h1 { font: 700 48px/1.05 var(--font-heading); }
.uline { position: relative; display: inline-block; white-space: nowrap; }
.ul { position: absolute; left: 2px; right: 2px; bottom: -8px; display: flex; gap: 3px; }   /* 5 bricks drop in as an underline, once */
.ul i { flex: 1; height: 7px; border-radius: 2px; background: var(--c); animation: drop 400ms var(--back) both; animation-delay: calc(250ms + var(--n) * 40ms); }
.ul i:nth-child(1) { --c: var(--red); --n: 0; }
.ul i:nth-child(2) { --c: var(--yellow); --n: 1; }
.ul i:nth-child(3) { --c: var(--blue); --n: 2; }
.ul i:nth-child(4) { --c: var(--green); --n: 3; }
.ul i:nth-child(5) { --c: var(--red); --n: 4; }
@keyframes drop { from { opacity: 0; transform: translateY(-18px); } }

/* ===== Showcase: stage + picker on the left, details on the right ===== */
.showcase { display: grid; grid-template-columns: minmax(0, 62fr) minmax(0, 38fr); gap: 16px 40px; align-items: end; }
.stage {
    position: relative; aspect-ratio: 16 / 10; overflow: hidden;
    border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
    background: radial-gradient(ellipse 80% 70% at 50% 45%, var(--cream) 0%, #FFFFFF 75%);
}
.stage-still, .stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.stage-still { object-fit: contain; background: var(--cream); transition: opacity 200ms var(--ease); }   /* renders are opaque cream: fill the stage with it so no bands show */
.stage-still[data-box] { background: #fff; }
.stage-still[data-box] { padding: 10%; }
.stage iframe { opacity: 0; pointer-events: none; transition: opacity 300ms var(--ease); }
.stage.live iframe { opacity: 1; }
.stage.live .stage-still, .stage.live::before, .stage.fading .stage-still { opacity: 0; }   /* the viewer brings its own baseplate floor */
.stage-loading {
    position: absolute; left: 12px; bottom: 12px; display: flex; align-items: flex-end; gap: 10px; padding: 10px 14px;
    background: rgba(255,255,255,0.9); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
    font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; opacity: 0; transition: opacity 200ms;
}
.stage.loading .stage-loading { opacity: 1; }
.bricks { position: relative; display: block; width: 24px; height: 36px; }
.bricks i {
    position: absolute; left: 0; width: 24px; height: 10px; border-radius: 2px;
    background: var(--red);
    animation: stack 1.6s var(--ease) infinite both;
}
.bricks i::before, .bricks i::after { content: ''; position: absolute; top: -3px; width: 6px; height: 3px; border-radius: 1px 1px 0 0; background: inherit; }
.bricks i::before { left: 4px; }
.bricks i::after { right: 4px; }
.bricks i:nth-child(1) { bottom: 0; }
.bricks i:nth-child(2) { bottom: 12px; background: var(--blue); animation-delay: 0.15s; }
.bricks i:nth-child(3) { bottom: 24px; background: var(--yellow); animation-delay: 0.3s; }
.stage:not(.loading) .bricks i { animation-play-state: paused; }   /* the loader only runs while it shows */
@keyframes stack {
    0%       { opacity: 0; transform: translateY(-14px); }
    20%, 70% { opacity: 1; transform: none; }
    90%, 100% { opacity: 0; transform: translateY(-14px); }
}

.picker { display: flex; gap: 8px; margin-top: 14px; }
.picker button {
    position: relative; display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 48px; padding: 4px 14px 4px 4px;
    background: var(--surface); border: 2px solid var(--line); border-radius: 999px; box-shadow: var(--shadow);
    font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.picker span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }   /* desktop: one row inside the stage column, long names shorten with … */
.picker img { flex: none; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: var(--cream); }
.picker img[data-box] { object-fit: contain; }
.picker img { transition: transform var(--dur-fast) var(--ease); }
.picker button[aria-pressed="true"] { border-color: var(--ring); box-shadow: 0 0 0 2px var(--ring), var(--shadow); animation: ring-in 300ms var(--back); }   /* ring in the model's main colour (build_index.php) */
@keyframes ring-in { from { box-shadow: 0 0 0 0 var(--ring), var(--shadow); } }
@media (hover: hover) {
    .picker button:hover { border-color: #E0D6CA; }
    .picker button[aria-pressed="true"]:hover { border-color: var(--ring); }
    .picker button:hover img { transform: translateY(-2px) rotate(-4deg); }
}

.feature { padding-bottom: 62px; transition: opacity 150ms var(--ease); }   /* bottom pad lines the buttons up with the picker row */
.feature.fading { opacity: 0; }
.feature-count { color: var(--text2); font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.feature h2 { margin: 4px 0 8px; font: 700 40px/1.05 var(--font-heading); }
.feature-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.theme { color: var(--text2); font-size: 13px; font-weight: 600; }
.feature-stats { margin-top: 6px; color: var(--text2); font-variant-numeric: tabular-nums; }
.feature-blurb { margin: 12px 0 20px; max-width: 36ch; }
.feature-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 48px; padding: 0 22px; border-radius: 999px;
    font-weight: 700; text-decoration: none; white-space: nowrap;
}

/* The brick CTA: red face, darker side, two studs; one pop + glow rings when the stage's build-up lands (build-index.js) */
.btn-brick {
    position: relative; margin-top: 6px; border-radius: 10px;
    background: var(--red); color: #fff; font-size: 16px;
    box-shadow: 0 4px 0 var(--red-side), 0 6px 16px rgba(227,0,11,0.22);
}
.btn-brick::before { content: ''; position: absolute; top: -6px; left: 18px; width: 16px; height: 7px; border-radius: 3px 3px 0 0; background: var(--red); box-shadow: 24px 0 0 var(--red); }
.btn-brick::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
.btn-brick:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; box-shadow: 0 4px 0 var(--red-side), 0 0 0 3px var(--text); }   /* dark gap keeps the yellow ring visible on the light zone */
@media (hover: hover) {
    .btn-brick:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--red-side), 0 8px 24px rgba(227,0,11,0.35); }
}
.btn-brick:active { transform: translateY(4px); box-shadow: 0 0 0 var(--red-side), 0 2px 8px rgba(227,0,11,0.25); transition-duration: 100ms; }
.btn-brick.pop { animation: pop 400ms var(--back); }
.btn-brick.rings::after { animation: rings 900ms ease-out; }
@keyframes pop { 45% { transform: scale(1.06); } }
@keyframes rings {   /* two rings, 600 ms each, 300 ms apart */
    0%   { box-shadow: 0 0 0 0 rgba(227,0,11,0.45), 0 0 0 0 rgba(227,0,11,0.45); }
    33%  { box-shadow: 0 0 0 7px rgba(227,0,11,0.22), 0 0 0 0 rgba(227,0,11,0.45); }
    67%  { box-shadow: 0 0 0 14px rgba(227,0,11,0), 0 0 0 7px rgba(227,0,11,0.22); }
    100% { box-shadow: 0 0 0 14px rgba(227,0,11,0), 0 0 0 14px rgba(227,0,11,0); }
}
.btn-line { background: var(--surface); color: var(--text); border: 1px solid var(--line); box-shadow: var(--shadow); }
.mb { color: var(--text2); font-size: 12px; font-weight: 600; }

.badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.badge-lego { background: #E5F0F8; color: var(--blue); }   /* solid tints so they keep 4.5:1 on the yellow zone and the blue band */
.badge-hotwheels { background: #FCE6E7; color: var(--red-text); }
.badge-hotwheels .bi { width: 1.5em; }

.numbers { padding-top: 24px; color: var(--text2); font-variant-numeric: tabular-nums; }
.num { white-space: nowrap; }
.num .bi { margin-right: 5px; }
.num b { display: inline-block; font-weight: 700; color: var(--text); text-align: right; }

/* ===== All builds ===== */
.all { padding-top: 28px; }
.all-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.all h2, .how h2 { font-size: 22px; font-weight: 700; }
.count { color: var(--text2); font-weight: 600; }
.sort { display: flex; align-items: center; gap: 8px; color: var(--text2); font-size: 13px; font-weight: 700; }
.sort select {
    min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px;
    background: var(--surface); box-shadow: var(--shadow); font-size: 14px; font-weight: 600; cursor: pointer;
}
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 24px; }
.chip {
    display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px;
    background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: 999px; box-shadow: var(--shadow);
    font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap;
}
.chip .n { color: var(--text2); font-size: 12px; font-variant-numeric: tabular-nums; }
.chip[aria-current] { background: var(--blue); border-color: var(--blue); color: #fff; }
.chip[aria-current] .n { color: rgba(255,255,255,0.9); }

.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.card {
    position: relative; display: flex; flex-direction: column;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
    transition: transform 200ms var(--ease), box-shadow 200ms var(--ease), opacity 300ms var(--ease);
}
.card.pending { opacity: 0; transform: translateY(12px); }
.card-img { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius) var(--radius) 0 0; background: var(--cream); perspective: 600px; }
.card-img img { display: block; width: 100%; height: 100%; object-fit: contain; transition: transform 300ms var(--ease); }
.card-img img[data-box] { padding: 8%; }
.card-img::after {   /* kind colour along the top edge: 4 px, 6 px on hover */
    content: ''; position: absolute; left: 0; right: 0; top: 0; height: 6px;
    background: var(--blue); transform: translateY(-2px); transition: transform 200ms var(--ease);
}
.card[data-kind="hotwheels"] .card-img::after { background: var(--red); }
.card-body { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 12px; }
.card h3 { font-size: 16px; font-weight: 700; line-height: 1.3; }
.card-link { color: var(--text); text-decoration: none; }
.card-link::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: var(--radius); }   /* the whole card opens the viewer */
.card-link::before { content: '▶'; float: right; margin-left: 8px; color: var(--red); font-size: 12px; line-height: 21px; opacity: 0; transition: opacity var(--dur-fast); }
.card-id { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--text2); font-size: 13px; }
.card-stats { color: var(--text2); font-size: 13px; font-variant-numeric: tabular-nums; }
.card-links { position: relative; z-index: 2; margin-top: 2px; color: var(--text2); font-size: 13px; }
.card-links a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; text-decoration: none; }
.card-links a:hover { text-decoration: underline; }
.card:has(.card-link:focus-visible) { outline: 3px solid var(--blue); outline-offset: 2px; }
.card-link:focus-visible { outline: none; }
@media (hover: hover) {
    .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-3); }
    .card:hover .card-img img { transform: rotateX(calc(var(--ty, 0) * -6deg)) rotateY(calc(var(--tx, 0) * 6deg)) scale(1.02); }   /* --tx/--ty: pointer position, -1…1 (build-index.js) */
    .card:hover .card-img::after { transform: none; }
    .card:hover .card-link::before { opacity: 1; }
}
.card:has(.card-link:focus-visible) .card-link::before { opacity: 1; }

.empty { padding: 40px 0; text-align: center; color: var(--text2); }
.empty p { margin-bottom: 12px; font-weight: 600; }

/* ===== How these are made: a LEGO-blue plate with a stud row on top, white step cards, number bricks that drop in once ===== */
.how { position: relative; margin-top: 72px; padding: 44px 0 48px; background: var(--blue); color: #fff; }
.how::before {
    content: ''; position: absolute; left: 0; right: 0; top: -8px; height: 8px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='8'%3E%3Crect x='8' width='16' height='9' rx='2.5' fill='%23006CB7'/%3E%3C/svg%3E") 0 0 / 32px 8px repeat-x;
}
.how ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 28px 0 24px; padding: 0; list-style: none; }
.how li { padding: 22px 20px 20px; border-radius: var(--radius); background: var(--surface); color: var(--text2); box-shadow: 0 4px 0 rgba(0,0,0,0.18); }
.how li strong { display: block; margin-bottom: 4px; color: var(--text); }
.nb {
    position: relative; display: grid; place-items: center; width: 48px; height: 38px; margin: 6px 0 12px;
    border-radius: 6px; background: var(--c); color: var(--text); font-size: 22px; font-weight: 700;
    box-shadow: inset 0 -4px 0 rgba(0,0,0,0.18);
    transition: transform 450ms var(--back), opacity 200ms var(--ease);
}
.nb::before { content: ''; position: absolute; top: -6px; left: 8px; width: 12px; height: 7px; border-radius: 3px 3px 0 0; background: var(--c); box-shadow: 20px 0 0 var(--c); }
.how li:nth-child(1) .nb { --c: var(--red); color: #fff; }
.how li:nth-child(2) .nb { --c: var(--yellow); transition-delay: 150ms; }
.how li:nth-child(3) .nb { --c: var(--green); transition-delay: 300ms; }
.how.pending .nb { opacity: 0; transform: translateY(-48px); }
.how-badges { font-size: 13px; line-height: 2; }
#legal { padding-top: 24px; padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); color: var(--text2); font-size: 12px; text-align: center; }
#legal a { color: inherit; }

/* ===== Tablet: stage full width, details under the picker, 3 columns ===== */
@media (max-width: 1023px) {
    .showcase { grid-template-columns: minmax(0, 1fr); }
    .feature { padding-bottom: 0; }
    .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .picker button { flex: none; }
    .picker, .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); padding: 4px var(--gutter) 6px; }
    .picker::-webkit-scrollbar, .chips::-webkit-scrollbar { display: none; }
    .picker, .chips {   /* the one sideways scroll each: fade the right edge */
        -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent);
        mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent);
    }
}

/* ===== Phones: 4:3 stage, round picker thumbs, full-width buttons, 2 columns ===== */
@media (max-width: 640px) {
    :root { --gutter: 16px; }
    .back-long, .top-tag { display: none; }
    .back-short { display: inline; }
    .intro { padding-top: 18px; }
    h1 { font-size: 32px; }
    .stage { aspect-ratio: 4 / 3; }
    .picker button { padding: 2px; border-radius: 50%; }
    .picker button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .picker img { width: 48px; height: 48px; }
    .feature h2 { font-size: 34px; }
    .feature-blurb { margin: 8px 0 14px; }
    .feature-actions .btn { flex: 1 1 100%; }
    .sunny { border-radius: 0 0 28px 28px; }
    .f1 { left: -34px; top: -26px; width: 84px; }   /* phone: 4 bricks at the top corners and behind the headline */
    .f5 { right: -12px; top: -8px; width: 60px; }
    .f6 { right: 22%; top: 22px; width: 34px; }
    .f7 { right: -60px; top: 20px; width: 120px; }
    .how { margin-top: 56px; padding: 36px 0 40px; }
    .all { padding-top: 36px; }
    .all-head { flex-wrap: wrap; }
    .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .card-body { padding: 10px 12px 8px; }
    .card h3 { font-size: 15px; }
    .how ol { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}
@media (max-width: 1359px) {   /* no side margins: keep only the bricks behind the headline */
    .f1, .f2, .f3, .f4, .f7, .f8, .f9 { display: none; }
}
@media (max-width: 640px) {
    .f1, .f7 { display: block; }
    .f10 { display: none; }
}
@media (max-width: 359px) {
    .grid { grid-template-columns: minmax(0, 1fr); }
}

/* ===== Less motion ===== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .card:hover, .card:hover .card-img img, .picker button:hover img { transform: none; }
    .btn-brick { box-shadow: 0 4px 0 var(--red-side), 0 0 0 4px rgba(227,0,11,0.18), 0 8px 26px rgba(227,0,11,0.45); }   /* no pop or rings: a stronger static glow instead */
}