/* Utopian Labs. Values transcribed from the Claude Design export
   (design/Utopian Labs - Live.dc.html, design/Product Stage.dc.html). */

/* ---------- base (design <helmet>) */
html, body { margin: 0; font-family: 'Inter Tight', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
a:hover { color: #FD5A00; }
img { display: block; }
.hs { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.hs::-webkit-scrollbar { display: none; }
.hs > * { scroll-snap-align: start; flex: none; }
.o { color: #FD5A00; }

/* ---------- variant frame: one page, two layouts */
html[data-variant="bands"] { --frame-bg: #0A0807; --frame-fg: #F0ECE4; }
html[data-variant="horizontal"] { --frame-bg: #F0ECE4; --frame-fg: #0A0807; }
html[data-variant="bands"] .v-horizontal,
html[data-variant="horizontal"] .v-bands,
html[data-variant="bands"] .mark-light,
html[data-variant="horizontal"] .mark-dark { display: none; }
body { background: var(--frame-bg); color: var(--frame-fg); }
.frame { background: var(--frame-bg); color: var(--frame-fg); min-height: 100vh; overflow-x: clip; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* ---------- nav */
.nav { display: flex; justify-content: space-between; align-items: center; padding: 24px clamp(20px,4vw,56px); font: 500 12px/1 'IBM Plex Mono', monospace; letter-spacing: .14em; text-transform: uppercase; }
.lockup { display: flex; align-items: center; gap: 12px; cursor: default; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.mark { height: 26px; width: auto; }
.lockup-name { font: 700 15px 'Inter Tight', sans-serif; letter-spacing: 0; text-transform: none; }
.nav-links { display: flex; gap: 32px; opacity: .65; }
@media (max-width: 560px) {
  .nav { flex-wrap: wrap; row-gap: 18px; }
  .nav-links { gap: 20px; }
}

/* ---------- shared product pieces */
.cta, .cta:hover { background: var(--accent); color: var(--on); border-radius: 999px; padding: 13px 22px; font: 700 14px var(--font); }
.cta-static { cursor: default; }
.p-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .5; }
.p-name { display: flex; align-items: center; gap: 12px; font: var(--name-font); }
.p-icon { width: 40px; height: 40px; border-radius: 10px; }
.kicker-o { font: 500 11px/1 'IBM Plex Mono', monospace; letter-spacing: .16em; color: #FD5A00; }

/* ---------- Product Stage */
.stage { position: relative; padding: 0 0 48px clamp(56px,17%,180px); box-sizing: border-box; width: 100%; }
.st-browser { border-radius: 12px; overflow: hidden; background: var(--chrome-bar); box-shadow: 0 40px 90px rgba(0,0,0,.35), 0 0 0 1px rgba(0,0,0,.12); }
.st-bar { height: 34px; display: flex; align-items: center; gap: 7px; padding: 0 14px; }
.st-dot { width: 11px; height: 11px; border-radius: 50%; }
.st-urlwrap { flex: 1; display: flex; justify-content: center; min-width: 0; }
.st-url { min-width: 0; max-width: 320px; padding: 0 12px; box-sizing: border-box; text-overflow: ellipsis; height: 20px; border-radius: 6px; background: var(--chrome-url); color: var(--chrome-text); font: 500 11px/20px 'IBM Plex Mono', monospace; text-align: center; overflow: hidden; white-space: nowrap; }
.st-sp { width: 47px; }
.st-desk { display: block; width: 100%; height: auto; }
.st-panel { display: block; width: 100%; height: auto; border-radius: 30px; box-shadow: 0 40px 90px rgba(0,0,0,.25), 0 0 0 1px rgba(0,0,0,.08); }
.st-over { position: absolute; left: 0; bottom: 0; width: var(--over-w); }
.st-phone { position: relative; padding: 4.4%; background: #111113; border-radius: 17% / 7.9%; box-shadow: inset 0 0 0 2px #3b3b40, inset 0 0 0 4px #1d1d20, 0 40px 80px rgba(0,0,0,.5); }
.st-phone img { display: block; width: 100%; height: auto; border-radius: 13% / 6%; }
.st-notch { position: absolute; left: 50%; top: 3%; transform: translateX(-50%); width: 29%; height: 3.9%; border-radius: 999px; background: #000; }
.st-popup { display: block; width: 100%; height: auto; border-radius: 14px; box-shadow: 0 30px 70px rgba(0,0,0,.35), 0 0 0 1px rgba(0,0,0,.1); }

/* ================================================== 01 BANDS */
.b-hero { padding: clamp(64px,10vw,140px) clamp(20px,4vw,56px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,360px), 1fr)); gap: 48px; align-items: end; }
.b-hero h1 { margin: 0; font: 600 clamp(48px,6.4vw,96px)/.98 'Inter Tight', sans-serif; letter-spacing: -.04em; text-wrap: pretty; }
.b-lede { font: 400 18px/1.55 'Inter Tight', sans-serif; opacity: .72; max-width: 440px; text-wrap: pretty; }
.b-lede-kicker { margin-top: 24px; font: 500 11px/1 'IBM Plex Mono', monospace; letter-spacing: .14em; color: #FD5A00; }

.band { position: relative; overflow: hidden; background-color: var(--bg); color: var(--fg); font-family: var(--font); background-image: var(--texture); background-size: var(--texture-size); }
.band-in { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,360px), 1fr)); gap: 48px; align-items: center; padding: clamp(56px,7vw,96px) clamp(20px,4vw,56px); box-sizing: border-box; }
.band-text { display: flex; flex-direction: column; }
.band-kicker { margin-top: 36px; font: 600 11px/1 'IBM Plex Mono', monospace; letter-spacing: .16em; color: var(--accent); }
.band h2 { margin: 16px 0 0; font: var(--h2-font); letter-spacing: -.03em; text-wrap: pretty; }
.band-text p { margin: 22px 0 0; font-size: 18px; line-height: 1.55; color: var(--muted); max-width: 460px; text-wrap: pretty; }
.band-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; align-items: center; }
.platforms { border: 1px solid var(--muted); border-radius: 999px; padding: 12px 18px; font: 600 11px 'IBM Plex Mono', monospace; color: var(--muted); letter-spacing: .1em; }
.band-stage { position: relative; }
.mascot { position: absolute; right: -24px; top: -110px; width: 190px; height: auto; pointer-events: none; }
@media (max-width: 560px) { .mascot { width: 130px; top: -72px; right: -12px; } }

.b-klaw { background: #0a0d0b; color: #e8ede8; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,320px), 1fr)); gap: 40px; padding: clamp(48px,6vw,72px) clamp(20px,4vw,56px); }
.b-klaw-head { display: flex; align-items: center; gap: 12px; }
.b-klaw-head span { font: 600 12px/1.4 'IBM Plex Mono', monospace; letter-spacing: .2em; color: #c8ff2e; }
.b-klaw-icon { width: 40px; height: 40px; border-radius: 10px; flex: none; }
.b-klaw h3 { margin: 28px 0 0; font: italic 400 clamp(30px,3vw,40px)/1.15 Georgia, 'Times New Roman', serif; text-wrap: pretty; }
.b-klaw p { margin: 18px 0 0; font-size: 16px; line-height: 1.55; color: #8a948b; max-width: 440px; text-wrap: pretty; }
.b-klaw-stat { margin-top: 22px; font: 500 12px/1.6 'IBM Plex Mono', monospace; letter-spacing: .14em; color: #5a645b; }
.b-klaw-shot { width: 100%; height: auto; border-radius: 12px; box-shadow: 0 0 0 1px #222b24; }

.b-founder { background: #F0ECE4; color: #0A0807; padding: clamp(56px,7vw,96px) clamp(20px,4vw,56px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,320px), 1fr)); gap: 56px; }
.b-rules { margin-top: 24px; border-top: 1px solid #0A0807; }
.b-rules > div { padding: 20px 0; border-bottom: 1px solid rgba(10,8,7,.2); font: 500 21px/1.3 'Inter Tight', sans-serif; letter-spacing: -.01em; text-wrap: pretty; }
.b-person { display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start; }
.b-portrait { width: 180px; height: auto; aspect-ratio: 4/5; object-fit: cover; flex: none; }
.b-person-text { flex: 1; min-width: 240px; }
.b-person-name { margin-top: 14px; font: 600 28px/1.1 'Inter Tight', sans-serif; letter-spacing: -.02em; }
.b-person-role { font-size: 14px; opacity: .6; margin-top: 6px; }
.b-person-text p { margin: 16px 0 0; font-size: 15px; line-height: 1.55; opacity: .85; text-wrap: pretty; }
.b-person-links { margin-top: 18px; display: flex; gap: 20px; font: 500 12px/1 'IBM Plex Mono', monospace; letter-spacing: .1em; }
.b-mail { border-bottom: 1px solid #FD5A00; padding-bottom: 3px; }

.b-foot { background: #0A0807; color: rgba(240,236,228,.55); padding: 26px clamp(20px,4vw,56px); display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; font: 400 12px/1 'IBM Plex Mono', monospace; letter-spacing: .1em; }

/* ================================================== 11 ALL HORIZONTAL */
.hz-track { gap: 20px; padding: 8px 0 28px; scroll-padding-inline: clamp(20px,4vw,56px); height: calc(100vh - 74px); min-height: 640px; box-sizing: border-box; }
.hz-spacer { width: clamp(20px,4vw,56px); margin-right: -20px; }
.hz-spacer-end { margin-right: 0; margin-left: -20px; }
.hz-panel, .hz-product { height: 100%; border-radius: 48px; box-sizing: border-box; }
.hz-panel { padding: 48px; }

.hz-intro { width: min(86vw,760px); background: #0A0807; color: #F0ECE4; display: flex; flex-direction: column; justify-content: space-between; }
.hz-intro-kicker { font: 500 11px 'IBM Plex Mono', monospace; letter-spacing: .16em; color: #FD5A00; }
.hz-intro h1 { margin: 0; font: 600 clamp(44px,5vw,78px)/.98 'Inter Tight', sans-serif; letter-spacing: -.04em; text-wrap: pretty; }
.hz-intro p { margin: 24px 0 0; font-size: 17px; line-height: 1.55; color: rgba(240,236,228,.7); max-width: 480px; text-wrap: pretty; }
.hz-intro-foot { display: flex; justify-content: space-between; gap: 16px; font: 500 12px 'IBM Plex Mono', monospace; letter-spacing: .14em; }
.hz-intro-foot span:first-child { color: rgba(240,236,228,.5); }

.hz-product { width: min(90vw,1240px); position: relative; overflow: hidden; background-color: var(--bg); color: var(--fg); font-family: var(--font); background-image: var(--texture); background-size: var(--texture-size); }
.hz-in { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.3fr); gap: 40px; padding: 48px; box-sizing: border-box; align-items: center; }
.hz-left { display: flex; flex-direction: column; justify-content: space-between; height: 100%; }
.hz-top { display: flex; justify-content: space-between; align-items: center; }
.hz-left .p-icon, .hz-klaw-head .p-icon { width: 44px; height: 44px; border-radius: 11px; }
.hz-count { font: 600 12px 'IBM Plex Mono', monospace; letter-spacing: .14em; color: var(--accent); }
.hz-kicker { font: 600 11px/1.4 'IBM Plex Mono', monospace; letter-spacing: .16em; color: var(--accent); }
.hz-product h2 { margin: 16px 0 0; font: var(--h2-font); font-size: clamp(34px,3.6vw,56px); letter-spacing: -.03em; text-wrap: pretty; }
.hz-product p { margin: 16px 0 0; font-size: 16px; line-height: 1.55; color: var(--muted); max-width: 400px; text-wrap: pretty; }
.hz-product .cta { align-self: flex-start; font: 700 14px var(--font); }

.hz-klaw { width: min(90vw,1100px); background: #0a0d0b; color: #e8ede8; display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.3fr); gap: 40px; align-items: center; }
.hz-klaw-head { display: flex; align-items: center; gap: 12px; }
.hz-klaw-head span { font: 600 12px 'IBM Plex Mono', monospace; letter-spacing: .2em; color: #c8ff2e; }
.hz-klaw-kicker { font: 600 11px 'IBM Plex Mono', monospace; letter-spacing: .16em; color: #c8ff2e; }
.hz-klaw h2 { margin: 16px 0 0; font: italic 400 clamp(32px,3.2vw,46px)/1.12 Georgia, serif; text-wrap: pretty; }
.hz-klaw p { margin: 16px 0 0; font-size: 16px; line-height: 1.55; color: #8a948b; text-wrap: pretty; }
.hz-klaw-stat { font: 500 12px 'IBM Plex Mono', monospace; letter-spacing: .14em; color: #5a645b; }
.hz-klaw-shot { width: 100%; height: auto; border-radius: 12px; box-shadow: 0 0 0 1px #222b24, 0 30px 80px rgba(0,0,0,.5); }

.hz-rules { width: min(86vw,620px); background: #F0ECE4; color: #0A0807; display: flex; flex-direction: column; justify-content: space-between; box-shadow: inset 0 0 0 1px rgba(10,8,7,.12); }
.hz-rules .kicker-o { line-height: normal; }
.hz-rules-list { border-top: 1px solid #0A0807; }
.hz-rules-list > div { padding: 22px 0; border-bottom: 1px solid rgba(10,8,7,.2); font: 500 24px/1.3 'Inter Tight', sans-serif; letter-spacing: -.01em; text-wrap: pretty; }

.hz-founder { width: min(90vw,900px); background: #FD5A00; color: #0A0807; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.1fr); gap: 40px; }
.hz-portrait { width: 100%; height: 100%; object-fit: cover; border-radius: 28px; }
.hz-founder-text { display: flex; flex-direction: column; justify-content: space-between; }
.hz-founder-kicker { font: 600 11px 'IBM Plex Mono', monospace; letter-spacing: .16em; }
.hz-founder h2 { margin: 0; font: 600 clamp(34px,3.4vw,50px)/1 'Inter Tight', sans-serif; letter-spacing: -.03em; }
.hz-founder-role { margin-top: 10px; font-size: 15px; }
.hz-founder p { margin: 20px 0 0; font-size: 16px; line-height: 1.55; text-wrap: pretty; }
.hz-founder-links { display: grid; gap: 12px; font: 600 13px 'IBM Plex Mono', monospace; letter-spacing: .1em; }
.hz-founder-links a, .hz-founder-links a:hover { color: #0A0807; }
.hz-founder-links a:hover { text-decoration: underline; text-underline-offset: 3px; }
.hz-founder-links span { opacity: .6; font-weight: 500; }

/* Horizontal on narrow screens: panels stack text above stage, height follows content. */
@media (max-width: 759px) {
  .hz-track { height: auto; min-height: 0; padding-bottom: 24px; gap: 14px; }
  .hz-spacer { margin-right: -14px; }
  .hz-spacer-end { margin-right: 0; margin-left: -14px; }
  .hz-panel, .hz-product { height: auto; border-radius: 32px; }
  .hz-panel { padding: 28px; }
  .hz-intro { gap: 40px; }
  .hz-intro h1 { font-size: 40px; }
  .hz-intro-foot { flex-wrap: wrap; font-size: 11px; }
  .hz-in { position: relative; inset: auto; grid-template-columns: minmax(0,1fr); gap: 36px; padding: 28px; align-items: start; }
  .hz-left { height: auto; gap: 28px; }
  .hz-klaw, .hz-founder { grid-template-columns: minmax(0,1fr); gap: 28px; align-items: start; align-content: start; }
  .hz-klaw .hz-left { gap: 24px; }
  .hz-portrait { height: auto; aspect-ratio: 4/5; }
  .hz-founder-text { gap: 28px; }
  .hz-rules { gap: 40px; justify-content: flex-start; }
  .hz-rules-list > div { font-size: 20px; }
}
@media (max-width: 759px) { .hz-track { align-items: stretch; } }
@media (max-width: 560px) { .band-kicker { line-height: 1.4; } }