/* Website layout only. Every colour, radius, shadow, blur, size and font comes from Bridge UI Rules
   (assets/ui/tokens.css and bundle.css, copied from bridge-platform/kit/ui-rules). Nothing here adds a new one. */
body { margin: 0; }
a { color: inherit; text-decoration: none; }
.site-wall { min-height: 100vh; padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-4); font-family: var(--font-text); color: var(--ink); }
.site-bar { flex: none; position: sticky; top: var(--space-4); z-index: 5; }
.site { width: 100%; max-width: 1408px; margin: 0 auto; flex: 1; display: flex; flex-direction: column; gap: var(--space-4); }
.site-foot { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; padding: var(--space-2) var(--space-3) var(--space-1); }
.site-foot > .caption { flex: 1; }

/* Hero: straight on the wallpaper, like Games' hero */
.hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-2); padding: 72px var(--space-4) var(--space-5); }
.hero .g-title { max-width: 900px; }
.hero .g-actions { flex-wrap: wrap; justify-content: center; }
.lede { margin: var(--space-2) 0 var(--space-4); max-width: 640px; font-size: 16px; line-height: 24px; }
.hero-shot { padding: var(--space-3); }

/* Panels: the same insets as the app's pages */
.b-panel { padding: var(--space-4) var(--space-4) var(--space-5); gap: var(--space-4); }
.panel-head { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-2) var(--space-3) var(--space-1); }
.panel-head.row { flex-direction: row; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.panel-body, .panel-label { margin: 0 var(--space-3); }
.panel-label { display: block; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.grid2.split { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; }
.grid2.top { align-items: start; }
.b-panel > .grid2.split { margin: 0 var(--space-3); }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.b-panel > .grid3 { margin: 0 var(--space-3); }
.stack { display: flex; flex-direction: column; gap: var(--space-4); }
.phones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); align-items: start; }

/* Pictures */
.shot-frame { overflow: hidden; border: 1px solid var(--glass-edge); }
.shot { width: 100%; height: 100%; display: block; }
figure { margin: 0; display: flex; flex-direction: column; gap: 6px; }
figcaption { padding: 0 var(--space-1); }

/* Package icons: the app icon pictures, at the Store's icon sizes */
.pkg-img { flex: none; display: block; width: 48px; height: 48px; border-radius: 12px; }
.pkg-img.sm { width: 36px; height: 36px; border-radius: 10px; }
.pkg-img.xl { width: 72px; height: 72px; border-radius: var(--radius); }
.strip { display: flex; flex-wrap: wrap; gap: var(--space-2); flex: 1; align-content: flex-start; }

/* Store */
.b-store-card .open { display: flex; flex-direction: column; gap: var(--space-3); border-radius: var(--radius); margin: -4px; padding: 4px; }
.b-store-card.featured .open { flex-direction: row; align-items: center; gap: var(--space-5); flex: 1; min-width: 0; }
.b-store-card .open .head { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.b-store-card .open .txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.search { width: 260px; max-width: 100%; }
.b-btn.wide { min-width: 160px; }
.app-head { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.app-title { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 6px; }
.badges { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.desc-long { margin: 0; }
[hidden] { display: none !important; }

/* Rows that wrap to more than one line */
.b-item.tall { height: auto; min-height: 36px; padding: var(--space-2); align-items: flex-start; }
.b-item.tall b, .two-line b { font-weight: 600; }
.two-line { display: flex; flex-direction: column; gap: 2px; }
.b-perms .b-item { height: 36px; padding: 0 var(--space-2); }
.b-perms .b-item.tall { height: auto; padding: var(--space-2); }

/* Kit */
.code-box { border: 1px solid var(--glass-edge); }
.kit-code { margin: 0; padding: var(--space-4); white-space: pre; overflow-x: auto; font: 500 13px/20px var(--font-mono); color: var(--ink); }
.center-panel { padding: var(--space-5); align-items: center; text-align: center; }
.center-panel > .b-muted { max-width: 560px; }

/* Phone */
@media (max-width: 760px) {
  .grid2, .grid2.split, .grid3 { grid-template-columns: minmax(0, 1fr); }
  .b-store-card.featured, .b-store-card.featured .open { flex-direction: column; align-items: flex-start; }
  .b-store-card.featured > .b-btn { align-self: stretch; }
  .g-title { font-size: 40px; }
  .hero { padding-top: 40px; }
  .site-bar .b-logo span { display: none; }
  .search { width: 100%; }
}

/* The real site */
.site-wall { background: radial-gradient(70% 90% at 12% 18%, rgba(139, 109, 255, 0.50), transparent 65%), radial-gradient(60% 80% at 88% 82%, rgba(106, 69, 232, 0.70), transparent 65%), radial-gradient(35% 45% at 62% 22%, rgba(255, 160, 110, 0.26), transparent 70%), radial-gradient(50% 60% at 40% 95%, rgba(20, 90, 140, 0.45), transparent 70%), #0b0e16; background-attachment: fixed; }
h1.heading { margin: 0; }
.b-btn[aria-disabled="true"] { opacity: 0.55; cursor: default; pointer-events: none; }
.center-panel .g-actions { margin-top: var(--space-2); }

/* Fixes: the footer sits at the bottom on short pages; values in rows line up right; panels for pictures */
.site-foot { margin-top: auto; }
.b-item > .end { text-align: right; }
.phone-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--space-4); align-items: center; }
.phone-text { display: flex; flex-direction: column; gap: var(--space-4); align-items: flex-start; }
.phone-panel .phones { margin-right: var(--space-3); }
.phone-panel .phones { width: 100%; max-width: 520px; justify-self: end; }
@media (max-width: 760px) {
  .phone-panel { grid-template-columns: minmax(0, 1fr); }
  .phone-panel .phones { margin: 0 var(--space-3); }
  #download .panel-head.row > .b-btn { width: 100%; }
  .phone-panel .phones { max-width: none; justify-self: stretch; }
  .site-bar .bar-label { display: none; }
  .site-bar .right .b-btn { padding-left: var(--space-3); padding-right: var(--space-3); }
  .site-bar { padding: 0; }
  .site-bar .b-tabs { gap: 0; }
  .site-bar .b-tabs .b-tab { padding-left: var(--space-3); padding-right: var(--space-3); }
  .site-foot > .caption { flex-basis: 100%; }
}