/* True Design Media showroom. A dark room where six live sites play at once on a curved wall,
   and the room takes on the light of whichever screen you point at. */

@property --room-glow { syntax: '<color>'; inherits: true; initial-value: #2b4bff; }

:root {
  --void: #000;
  --paper: #fff;
  --mist: #a3a3ab;
  --line: rgba(255, 255, 255, .14);
  --blue: #2b4bff;      /* true blue: our buttons and the "how it works" wall */
  --blue-hi: #4a65ff;
  --display: 'Anybody', 'Arial Black', sans-serif;
  --body: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --hdr: 84px;
  --pad: clamp(16px, 3vw, 48px);
  --t0: .15s;           /* when the screens switch on */
  color-scheme: dark;
}
html.boot { --t0: 1.25s; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--void); color: var(--paper); font: 400 16px/1.55 var(--body); -webkit-font-smoothing: antialiased; }
img, svg { display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2.5px solid var(--blue-hi); outline-offset: 3px; }
::selection { background: var(--blue); color: #fff; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 300; background: var(--blue); color: #fff; padding: 10px 14px; border-radius: 8px; }
.skip:focus { left: 8px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 20px; border: 0; border-radius: 999px;
  background: var(--blue); color: #fff; font: 650 14.5px/1 var(--body); text-decoration: none; white-space: nowrap;
  cursor: pointer; transition: background-color .2s, transform .2s;
}
.pill:hover { background: var(--blue-hi); }
.pill:active { transform: scale(.97); }
.pill-lg { height: 56px; padding: 0 28px; font-size: 16px; }

/* Header */
.hdr {
  position: fixed; inset: 0 0 auto; z-index: 50; height: var(--hdr);
  display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 var(--pad);
  transition: background-color .3s, backdrop-filter .3s, opacity .3s;
}
.zooming .hdr { opacity: 0; pointer-events: none; }
.hdr.scrolled { background: rgba(0, 0, 0, .72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
/* The header bar is see-through over the wall, so only its links take clicks. */
.hdr:not(.scrolled) { pointer-events: none; }
.hdr a { pointer-events: auto; }
.zooming .hdr a { pointer-events: none; }
.logo { display: block; color: #fff; }
.logo-svg { height: 52px; width: auto; }
.nav { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 32px); font-size: 14.5px; font-weight: 600; }
.nav a:not(.pill) { text-decoration: none; color: #d9d9de; }
.nav a:not(.pill):hover { color: #fff; }

/* The room */
.room {
  position: relative; isolation: isolate; overflow: hidden;
  height: 100vh; height: 100svh; min-height: 620px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas: "stage stage" "head side";
  column-gap: 40px; padding: var(--hdr) var(--pad) clamp(20px, 4vh, 44px);
}
.room::before {
  content: ""; position: absolute; inset: -10% -10% 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(42% 38% at 50% 40%, color-mix(in srgb, var(--room-glow) 30%, transparent), transparent 72%),
    radial-gradient(70% 30% at 50% 100%, color-mix(in srgb, var(--room-glow) 14%, transparent), transparent 80%);
  transition: --room-glow .9s ease;
}
.stage {
  grid-area: stage; position: relative; min-height: 0;
  perspective: 1400px; perspective-origin: 50% 50%;
  --k: 2.3;      /* the wall curves around a point this many screen widths in front of it */
  --rx: 3;       /* the wall leans back this many degrees */
  --gx: 28px;    /* gap between screens */
  --gy: 34px;    /* gap between the two rows */
  --ar: .625;    /* screen height / width; app.js sizes the screens to fit the room */
  --tw-max: 460px;
  --tw: clamp(200px, min(27vw, (100svh - 440px) * .8), 460px);
}
.wall { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, var(--tw)); justify-content: center; align-content: center; gap: var(--gy) var(--gx); height: 100%; }
/* app.js adds is-3d once it has placed the screens on the curve; until then it is a flat grid.
   The wall itself ignores the pointer so it never steals clicks from the screens on its plane. */
.wall.is-3d { display: block; position: relative; transform-style: preserve-3d; pointer-events: none; }

.tile { width: var(--tw); margin: 0; }
.is-3d .tile { position: absolute; left: 50%; top: 50%; transform-style: preserve-3d; pointer-events: auto; }
.is-3d.ready .tile { transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.is-3d .tile:hover, .is-3d .tile:has(.screen:focus-visible) { --lift: 70px; }
.screen {
  display: block; position: relative; width: 100%; margin: 0; padding: 0; border: 0; background: none;
  cursor: pointer; text-align: left; transform-style: preserve-3d; border-radius: 10px;
}
.screen:focus-visible { outline-offset: 6px; }

.browser {
  display: block; position: relative; overflow: hidden; border-radius: 10px; background: #111;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .13),
    0 26px 60px -24px color-mix(in srgb, var(--glow) 70%, transparent),
    0 0 70px -18px color-mix(in srgb, var(--glow) 55%, transparent);
  transition: filter .45s ease;
}
.bar {
  display: flex; align-items: center; gap: 7px; height: 22px; padding: 0 10px;
  background: #17171a; border-bottom: 1px solid rgba(255, 255, 255, .07);
  font: 600 10px/1 var(--body); color: #c9c9cf; white-space: nowrap; overflow: hidden;
}
.live { flex: none; width: 6px; height: 6px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 8px #3ddc84; }
.vp { display: block; position: relative; overflow: hidden; }
.browser .vp { height: calc(var(--tw) * .625 - 22px); --vp: calc(var(--tw) * .625 - 22px); }
.feed { width: 100%; height: auto; will-change: transform; animation: browse var(--d) cubic-bezier(.6, 0, .3, 1) var(--o) infinite; }

.phone {
  display: block; position: absolute; right: 5%; bottom: calc(var(--tw) * -.09);
  width: calc(var(--tw) * .26); height: calc(var(--tw) * .52); padding: calc(var(--tw) * .01);
  border-radius: calc(var(--tw) * .045); background: #0c0c0e;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .2),
    0 18px 40px -8px rgba(0, 0, 0, .85),
    0 0 40px -12px color-mix(in srgb, var(--glow) 80%, transparent);
  transform: translateZ(46px);
  transition: filter .45s ease;
}
.phone .vp { height: 100%; border-radius: calc(var(--tw) * .035); --vp: calc(var(--tw) * .5); }

/* Someone browsing: scroll, stop and read, scroll again, then back to the top. */
@keyframes browse {
  0%, 7% { transform: translateY(0); }
  15%, 22% { transform: translateY(calc((var(--vp) - 100%) * .17)); }
  30%, 37% { transform: translateY(calc((var(--vp) - 100%) * .38)); }
  45%, 52% { transform: translateY(calc((var(--vp) - 100%) * .6)); }
  60%, 67% { transform: translateY(calc((var(--vp) - 100%) * .8)); }
  75%, 82% { transform: translateY(calc(var(--vp) - 100%)); }
  94%, 100% { transform: translateY(0); }
}

/* Zooming into one screen dims the rest. */
.room.zooming .tile:not(.target) :is(.browser, .phone) { filter: brightness(.32) saturate(.5); }

/* The screens switch on like old TVs: a line of light that opens into the picture. */
.js :is(.browser, .phone) { animation: power .85s cubic-bezier(.2, .7, .2, 1) backwards; animation-delay: calc(var(--t0) + var(--n) * 95ms); }
.js .phone { animation-delay: calc(var(--t0) + var(--n) * 95ms + 160ms); }
@keyframes power {
  0% { clip-path: inset(50% 0 50% 0); filter: brightness(4); }
  30% { clip-path: inset(49.3% 0 49.3% 0); filter: brightness(4); }
  100% { clip-path: inset(0); filter: brightness(1); }
}

.cap { display: flex; flex-direction: column; gap: 1px; margin: 12px 0 0; max-width: 64%; font-size: 12.5px; line-height: 1.35; color: var(--mist); }
.cap b { font: 750 14px/1.15 var(--display); font-stretch: 112%; color: #fff; }
.cap .sn { display: none; }
.js .cap { animation: cap-in .7s ease backwards; animation-delay: calc(var(--t0) + var(--n) * 95ms + .35s); }
@keyframes cap-in { from { opacity: 0; transform: translateY(6px); } }

.wall.is-3d.flying { transition: transform 1s cubic-bezier(.75, 0, .2, 1); }
/* Off screen, mid-flight or behind the close-up, the screens stop playing. */
.room.paused .feed, .room.zooming .feed { animation-play-state: paused; }
.room.covered .stage { visibility: hidden; }

/* Headline and the line beside it */
.hero-h {
  grid-area: head; align-self: end; margin: 0;
  font: 850 clamp(44px, 5.2vw, 100px)/.88 var(--display); font-stretch: 125%; letter-spacing: -.025em;
  transition: opacity .35s, transform .5s;
}
.hero-h .w { display: inline-block; transform-origin: 0 85%; animation: stretch 1.1s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--t0) + .35s + var(--wi) * 70ms); }
.hero-h .ring {
  transform-origin: 40% 85%;
  animation: stretch 1.1s cubic-bezier(.2, .8, .2, 1) backwards, ring 7s ease-in-out infinite;
  animation-delay: calc(var(--t0) + .35s + var(--wi) * 70ms), calc(var(--t0) + 3s);
}
@keyframes stretch { from { opacity: 0; transform: translateY(35%) scaleX(.5); } }
@keyframes ring {
  0%, 86%, 100% { transform: none; }
  88% { transform: rotate(-7deg); }
  90% { transform: rotate(7deg); }
  92% { transform: rotate(-6deg); }
  94% { transform: rotate(5deg); }
  96% { transform: rotate(-2deg); }
}
.hero-side { grid-area: side; align-self: end; display: grid; justify-items: start; gap: 18px; max-width: 400px; padding-bottom: 6px; transition: opacity .35s; }
.hero-side p { margin: 0; color: #c4c4cb; font-size: 15.5px; }
[data-touch] { display: none; }
@media (hover: none), (pointer: coarse) { [data-fine] { display: none; } [data-touch] { display: inline; } }
.room.zooming .hero-h, .room.zooming .hero-side { opacity: 0; }
.room.zooming .hero-h { transform: translateY(20px); }

/* How it works */
.how { display: grid; gap: clamp(40px, 7vh, 80px); padding: clamp(72px, 10vw, 140px) var(--pad) clamp(72px, 10vw, 140px); }
.how-h, .ask-h { margin: 0; font: 850 clamp(40px, 6vw, 100px)/.9 var(--display); font-stretch: 125%; letter-spacing: -.025em; }

/* Step cards: each sticks near the top and the next slides over it (fx.js shrinks the one below). */
.cards { list-style: none; margin: 0; padding: 0; grid-column: 1 / -1; display: grid; gap: 4vh; }
.card {
  position: sticky; top: calc(var(--hdr) + 16px + var(--i) * 22px); min-height: min(64vh, 560px);
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: end; gap: 24px 48px;
  padding: clamp(28px, 4vw, 64px); border-radius: 28px; transform-origin: 50% 0;
  background: #0b0b0d; color: #fff; box-shadow: 0 -20px 60px -20px rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(255, 255, 255, .12);
}
.card:nth-child(1) { background: var(--blue); }
.card:nth-child(2) { background: #f1f1ee; color: #000; }
.card-n { align-self: stretch; display: flex; align-items: flex-end; font: 900 clamp(140px, 24vw, 380px)/.72 var(--display); font-stretch: 150%; letter-spacing: -.06em; }
.card:nth-child(3) .card-n { color: transparent; -webkit-text-stroke: 2px var(--blue-hi); }
.card-t h3 { margin: 0 0 14px; font: 850 clamp(30px, 3.6vw, 60px)/.95 var(--display); font-stretch: 120%; letter-spacing: -.02em; }
.card-t p { margin: 0; max-width: 40ch; font-size: clamp(16px, 1.3vw, 19px); opacity: .88; }

/* Ask for a preview */
.ask { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 48px clamp(32px, 6vw, 96px); padding: clamp(72px, 10vw, 150px) var(--pad); }
.ask-text p { max-width: 44ch; margin: 26px 0 0; color: #c4c4cb; font-size: 17px; }
.direct { display: flex; flex-wrap: wrap; gap: 8px 24px; font-weight: 650; }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-content: start; }
.form .full { grid-column: 1 / -1; }
.form label { display: grid; gap: 7px; font-size: 14px; font-weight: 600; color: #e4e4e8; }
.form small { font-weight: 400; color: var(--mist); }
.form input, .form textarea {
  width: 100%; min-height: 52px; padding: 12px 15px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 12px;
  background: #0e0e11; color: #fff; font: 400 16px/1.4 var(--body); transition: border-color .2s, box-shadow .2s;
}
.form textarea { min-height: 104px; resize: vertical; }
.form input::placeholder { color: #6e6e76; }
.form input:focus, .form textarea:focus { outline: none; border-color: var(--blue-hi); box-shadow: 0 0 0 3px rgba(43, 75, 255, .35); }
.form .hp { position: absolute; left: -9999px; }
.form .pill { justify-self: start; }
.form .pill[disabled] { opacity: .6; cursor: progress; }
.form-msg { grid-column: 1 / -1; margin: 0; min-height: 1.5em; font-weight: 600; }
.form-msg.err { color: #ffb0a6; }

/* Footer */
.ftr { padding: 0 var(--pad) 22px; border-top: 1px solid var(--line); overflow: hidden; }
.pit { position: relative; aspect-ratio: 1037 / 388; color: #fff; margin-top: clamp(40px, 8vw, 120px); }
.piece { position: absolute; overflow: visible; touch-action: manipulation; cursor: grab; will-change: transform; }
.piece.held { cursor: grabbing; filter: drop-shadow(0 0 30px rgba(74, 101, 255, .8)); }
.pit.loose .piece { color: #fff; }
.pit-hint { display: flex; align-items: center; gap: 14px; min-height: 40px; margin: 18px 0 0; font-size: 14px; color: var(--mist); }
.pit-reset { height: 36px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; background: none; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.pit-reset:hover { background: rgba(255, 255, 255, .08); }
.ftr-line { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin: clamp(20px, 3vw, 36px) 0 0; font-size: 13.5px; color: var(--mist); }
.ftr-line a { color: #fff; }

/* Step inside: one site up close */
.focus {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: rgba(0, 0, 0, .84); -webkit-backdrop-filter: blur(22px) saturate(1.2); backdrop-filter: blur(22px) saturate(1.2);
  color: #fff; overflow: hidden;
}
.focus[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); animation: f-in .45s ease both; }
.focus.out { animation: f-out .28s ease both; }
.focus::backdrop { background: transparent; }
@keyframes f-in { from { opacity: 0; } }
@keyframes f-out { to { opacity: 0; } }
.focus::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(50% 50% at 62% 55%, color-mix(in srgb, var(--glow, #2b4bff) 26%, transparent), transparent 75%);
}

.f-top {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--line);
  padding: 14px max(var(--pad), env(safe-area-inset-right)) 14px max(var(--pad), env(safe-area-inset-left));
}
.f-back {
  display: inline-flex; align-items: center; gap: 4px; height: 42px; padding: 0 18px 0 10px;
  border: 1px solid var(--line); border-radius: 999px; background: none; font-size: 14.5px; font-weight: 600; white-space: nowrap; cursor: pointer;
}
.f-back:hover, .f-arrow:hover { background: rgba(255, 255, 255, .08); }
.f-jump { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; }
.f-jump button { border: 0; border-radius: 999px; background: none; padding: 9px 13px; color: var(--mist); font-size: 13.5px; font-weight: 600; cursor: pointer; transition: color .2s, background-color .2s; }
.f-jump button:hover { color: #fff; }
.f-jump button[aria-current="true"] { background: var(--glow); color: #000; }
.f-step { display: flex; align-items: center; gap: 6px; }
.f-count { margin-right: 8px; font-size: 14px; color: var(--mist); white-space: nowrap; }
.f-count b { color: #fff; }
.f-arrow { display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: none; cursor: pointer; }

.f-body {
  display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr);
  gap: clamp(24px, 3.4vw, 56px); min-height: 0;
  padding: clamp(18px, 3vh, 36px) max(var(--pad), env(safe-area-inset-right)) clamp(18px, 3vh, 36px) max(var(--pad), env(safe-area-inset-left));
}
.f-body.swap { animation: swap .42s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes swap { from { opacity: 0; transform: translateX(var(--dir, 24px)); } }
/* On short screens the text scrolls on its own instead of pushing the button off the bottom. */
.f-info { align-self: center; align-self: safe center; max-height: 100%; overflow-y: auto; margin: -6px; padding: 6px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .28) transparent; }
.f-where { margin: 0 0 10px; color: var(--mist); font-size: 14.5px; }
.f-name { margin: 0; font: 850 clamp(32px, 3.3vw, 54px)/.95 var(--display); font-stretch: 116%; letter-spacing: -.02em; }
.f-about { margin: 18px 0 0; color: rgba(255, 255, 255, .84); }
.f-facts { list-style: none; margin: 18px 0 28px; padding: 0; display: grid; gap: 9px; font-size: 14.5px; }
.f-facts li { display: grid; grid-template-columns: 8px minmax(0, 1fr); gap: 12px; align-items: baseline; }
.f-facts li::before { content: ""; width: 8px; height: 8px; background: var(--glow); transform: translateY(-1px); }
.f-visit { background: #fff; color: #000; }
.f-visit:hover { background: #e6e6ea; }
.f-views { display: none; }

.f-devices { display: flex; align-items: center; justify-content: center; gap: clamp(20px, 2.4vw, 36px); min-height: 0; height: 100%; }
.f-browser {
  display: flex; flex-direction: column; flex: 1 1 auto; max-width: 1080px; height: 100%; min-height: 0; overflow: hidden;
  border-radius: 12px; background: #111;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 40px 120px -40px color-mix(in srgb, var(--glow) 80%, transparent);
}
.f-browser .bar { height: 30px; font-size: 12px; flex: none; }
.f-scroll { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .28) transparent; }
.f-browser .f-scroll { flex: 1; min-height: 0; }
.f-scroll:focus-visible { outline-offset: -3px; }
.f-scroll img { width: 100%; height: auto; background: #1a1a1d; }
.f-phone {
  --pw: clamp(210px, 17vw, 290px);
  display: flex; flex: none; width: var(--pw); height: min(100%, calc(var(--pw) * 2.05)); padding: 9px;
  border-radius: 38px; background: #0c0c0e;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .2), 0 30px 80px -20px color-mix(in srgb, var(--glow) 70%, transparent);
}
.f-phone .f-scroll { flex: 1; border-radius: 30px; }

/* Thanks page */
.thanks { min-height: 100svh; display: grid; align-content: center; justify-items: start; gap: 22px; padding: 10vh var(--pad); }
.thanks-logo { height: 64px; width: auto; color: #fff; margin-bottom: 20px; }
.thanks h1 { margin: 0; font: 850 clamp(40px, 6vw, 96px)/.9 var(--display); font-stretch: 125%; letter-spacing: -.025em; }
.thanks p { margin: 0; color: #c4c4cb; font-size: 17px; }

@media (max-width: 1400px) { .f-jump { display: none; } }

/* Smaller laptops and tablets */
@media (max-width: 1100px) {
  .room { grid-template-columns: minmax(0, 1fr); grid-template-areas: "stage" "head" "side"; row-gap: 16px; }
  .hero-side { max-width: 560px; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 24px; }
  .stage { --tw: clamp(180px, min(28vw, (100svh - 520px) * .8), 400px); }
  .f-body { grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); }
  .f-jump { display: none; }
  .cap { max-width: none; }
  .phone { bottom: calc(var(--tw) * -.03); }
}

/* Phones: the wall becomes six phone screens, and the close-up scrolls as one page. */
@media (max-width: 760px) {
  :root { --hdr: 64px; }
  .logo-svg { height: 42px; }
  .nav a:not(.pill) { display: none; }
  .nav .pill { height: 38px; padding: 0 15px; font-size: 13.5px; }
  .room { min-height: 560px; grid-template-areas: "head" "stage" "side"; grid-template-rows: auto minmax(0, 1fr) auto; row-gap: 16px; padding-top: calc(var(--hdr) + 6px); padding-bottom: max(16px, env(safe-area-inset-bottom)); }
  .hero-h { align-self: start; font-size: clamp(28px, 8.5vw, 46px); font-stretch: 112%; }
  .hero-side { grid-template-columns: minmax(0, 1fr); max-width: none; gap: 12px; }
  .hero-side p { font-size: 14px; }
  .hero-side .pill { width: 100%; height: 50px; }
  .stage { --k: 3.4; --gx: 10px; --gy: 14px; --rx: 2; --ar: 1.9; --tw-max: 150px; --tw: clamp(78px, min(28vw, (100svh - 330px) / 2 / 1.9 - 12px), 150px); perspective: 900px; }
  .browser { display: none; }
  .phone {
    position: relative; right: auto; bottom: auto; transform: none;
    width: var(--tw); height: calc(var(--tw) * 1.9); padding: calc(var(--tw) * .028); border-radius: calc(var(--tw) * .14);
  }
  .phone .vp { border-radius: calc(var(--tw) * .11); --vp: calc(var(--tw) * 1.844); }
  .is-3d .tile:hover, .is-3d .tile:has(.screen:focus-visible) { --lift: 30px; }
  .cap { max-width: none; margin-top: 7px; }
  .cap b { font-size: 10.5px; font-stretch: 90%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cap .nm, .cap .tg { display: none; }
  .cap .sn { display: inline; }

  .ask { grid-template-columns: minmax(0, 1fr); }
  .card { grid-template-columns: minmax(0, 1fr); min-height: 58vh; border-radius: 22px; padding: 26px 22px; }
  .card-n { font-size: clamp(120px, 42vw, 200px); }
  .form { grid-template-columns: minmax(0, 1fr); }
  .form .pill { width: 100%; }

}

/* Close-up on short laptop screens: tighter text so the button stays in view. */
@media (min-width: 761px) and (max-height: 760px) {
  .f-where { margin-bottom: 6px; font-size: 13.5px; }
  .f-name { font-size: clamp(28px, 2.6vw, 42px); }
  .f-about { margin-top: 12px; font-size: 14.5px; line-height: 1.5; }
  .f-facts { margin: 12px 0 18px; gap: 6px; font-size: 13.5px; }
}

/* Close-up on phones and short landscape screens: one column that scrolls as a page. */
@media (max-width: 760px), (max-height: 520px) {
  .f-top { padding: 10px max(12px, env(safe-area-inset-right)) 10px max(12px, env(safe-area-inset-left)); }
  .f-back span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .f-back { width: 42px; padding: 0; justify-content: center; }
  .f-x { display: none; }
  .f-body { display: block; overflow-y: auto; overscroll-behavior: contain; padding: 18px max(16px, env(safe-area-inset-right)) 32px max(16px, env(safe-area-inset-left)); }
  .f-info { max-height: none; overflow: visible; margin: 0; padding: 0; }
  .f-name { font-size: clamp(28px, 8.4vw, 40px); }
  .f-facts { margin-bottom: 22px; }
  .f-visit { width: 100%; }
  .f-views {
    display: flex; position: sticky; top: -18px; z-index: 2; margin: 26px -16px 16px; padding: 10px 16px;
    gap: 6px; background: rgba(0, 0, 0, .8); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  }
  .f-views button { flex: 1; height: 40px; border: 1px solid var(--line); border-radius: 999px; background: none; font-size: 14px; font-weight: 600; cursor: pointer; }
  .f-views button[aria-pressed="true"] { background: #fff; color: #000; border-color: #fff; }
  .f-devices { display: block; height: auto; }
  .f-devices[data-view-now="mobile"] .f-browser, .f-devices[data-view-now="desktop"] .f-phone { display: none; }
  .f-browser { height: auto; }
  .f-phone { width: min(100%, 440px); height: auto; margin-inline: auto; padding: 7px; border-radius: 30px; }
  .f-phone .f-scroll { border-radius: 24px; }
  .f-scroll { overflow: visible; }
}

@media (max-width: 760px) and (max-height: 700px) {
  .hero-side p { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .feed, .hero-h .w, .hero-h .ring, :is(.browser, .phone), .cap, .focus[open], .f-body.swap { animation: none !important; }
  .card { position: static; }
  .is-3d.ready .tile, .wall.is-3d.flying { transition: none; }
}

/* ---------- 3D wall (gl.js) ---------- */
html.gl-wait .wall { visibility: hidden; }
html.gl-on .wall { display: none; }
canvas.gl { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; touch-action: pan-y pinch-zoom; cursor: grab; }
.room.over-screen canvas.gl { cursor: pointer; }
.room.dragging canvas.gl { cursor: grabbing; }
.gl-on .hero-h, .gl-on .hero-side, .gl-on .stage { position: relative; z-index: 1; }
.gl-on .hero-h { pointer-events: none; }
.gl-on .stage { pointer-events: none; }
.gl-labels { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.gl-cap {
  position: absolute; left: 0; top: 0; display: flex; flex-direction: column; gap: 1px; padding: 6px 8px; margin: -6px 0 0 -8px;
  border: 0; border-radius: 8px; background: none; color: var(--mist); text-align: left; font-size: calc(12.5px * var(--cap-k, 1)); line-height: 1.35;
  pointer-events: auto; cursor: pointer; opacity: 0; transition: background-color .25s; will-change: transform;
}
.gl-cap b {
  font: 750 calc(14px * var(--cap-k, 1))/1.15 var(--display); font-stretch: 112%; color: #fff;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.gl-cap span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gl-labels.tight .gl-cap span, .gl-labels.tight .gl-cap b::before { display: none; }
.gl-cap b::before { content: ""; display: inline-block; width: 7px; height: 7px; margin: 0 8px 1px 0; background: var(--glow); }
.gl-cap:hover, .gl-cap:focus-visible { background: rgba(255, 255, 255, .07); }
.room.zooming .gl-labels { opacity: 0; transition: opacity .2s; }
@media (max-width: 760px) {
  .gl-cap { font-size: 0; padding: 4px 6px; margin: -4px 0 0 -6px; }
  .gl-cap span { display: none; }
  .gl-cap b { font-size: 10.5px; font-stretch: 90%; }
  .gl-cap b::before { width: 5px; height: 5px; margin-right: 5px; }
}

/* ---------- grain ---------- */
.grain {
  position: fixed; inset: -50%; z-index: 300; pointer-events: none; opacity: .05;
  background: url(grain.png); animation: grain 1s steps(6) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-6%, 4%); } 40% { transform: translate(5%, -7%); }
  60% { transform: translate(-3%, 8%); } 80% { transform: translate(7%, 2%); } 100% { transform: translate(-2%, -5%); }
}

/* ---------- trades banner ---------- */
.band { overflow: hidden; padding: clamp(18px, 3vw, 36px) 0; border-block: 1px solid var(--line); background: #050507; }
.band-run { display: flex; align-items: center; width: max-content; will-change: transform; }
.band-run span { padding: 0 clamp(18px, 2.4vw, 36px); font: 900 clamp(44px, 7.5vw, 128px)/1 var(--display); font-stretch: 150%; letter-spacing: -.03em; white-space: nowrap; }
.band-run span:nth-of-type(even) { color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, .75); }
.band-run i { flex: none; width: clamp(16px, 1.8vw, 28px); aspect-ratio: 1; background: var(--blue); border-radius: 3px; }

/* ---------- headings rise in ---------- */
.rise { opacity: 0; transform: translateY(60px) skewY(4deg); transition: opacity .9s ease, transform 1.1s cubic-bezier(.2, .8, .2, 1); }
.rise.in { opacity: 1; transform: none; }

/* ---------- magnetic buttons ---------- */
.pill { transition: background-color .2s, transform .35s cubic-bezier(.2, .8, .2, 1); }
.pill.pulled { transition: background-color .2s, transform .12s linear; }

@media (prefers-reduced-motion: reduce) {
  .grain { animation: none; }
  .rise { opacity: 1; transform: none; }
}