:root {
  color-scheme: light;
  --fs-white: #fff;
  --fs-black: #070909;
  --fs-ease: cubic-bezier(.2,.72,.2,1);
}

/* Shared promoted-site media and empty state. Individual layouts only decide
   placement and size, while this layer keeps uploaded artwork predictable. */
.solution-media {
  position: relative;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 46px;
  aspect-ratio: 1;
  overflow: hidden;
  color: inherit;
  background: color-mix(in srgb,currentColor 9%,transparent);
  border: 1px solid color-mix(in srgb,currentColor 22%,transparent);
  border-radius: 13px;
}
.solution-media > * { grid-area:1 / 1; }
.solution-media__image { display:block; width:100%; height:100%; object-fit:cover; }
.solution-media__fallback { font-size:clamp(10px,1vw,15px); font-weight:800; letter-spacing:.04em; }
.solution-empty {
  grid-column: 1 / -1;
  align-self: stretch;
  display: grid;
  place-content: center;
  gap: 7px;
  width: 100%;
  min-height: 0;
  padding: clamp(14px,2.4vw,30px);
  overflow: hidden;
  text-align: center;
  border: 1px dashed color-mix(in srgb,currentColor 28%,transparent);
  border-radius: clamp(14px,2vw,24px);
}
.solution-empty strong,.solution-empty b { font-size:clamp(14px,1.6vw,22px); }
.solution-empty span { max-width:48ch; font-size:clamp(8px,.85vw,12px); opacity:.72; }
.solution-empty a { justify-self:center; padding:7px 12px; font-size:clamp(7px,.75vw,10px); font-weight:700; border:1px solid currentColor; border-radius:999px; }
[data-solution-controls] { scrollbar-width:thin; overscroll-behavior:contain; }
[data-solution-controls]::-webkit-scrollbar { width:5px; height:5px; }
[data-solution-controls]::-webkit-scrollbar-thumb { background:color-mix(in srgb,currentColor 28%,transparent); border-radius:99px; }

*, *::before, *::after { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
html { background: #070909; }
body { color: #fff; font-size: 16px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
body, button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.skip-link {
  position: fixed;
  z-index: 999;
  top: 10px;
  left: 10px;
  transform: translateY(-150%);
  padding: 10px 16px;
  color: #07111d;
  background: #fff;
  border-radius: 999px;
  box-shadow: 0 12px 40px rgba(0,0,0,.25);
}
.skip-link:focus { transform: translateY(0); }

.viewport-shell,
.viewport-layout {
  width: 100%;
  height: 100dvh;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
.viewport-layout { isolation: isolate; }
.viewport-layout * { min-width: 0; }
.viewport-layout button,
.viewport-layout a { outline: 0; }
.viewport-layout button:focus-visible,
.viewport-layout a:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 3px;
}

/* Promotion drawer: it floats above the one-screen experience and scrolls internally. */
.promotion-dialog,
.promo-dialog {
  width: min(880px, calc(100vw - 32px));
  max-height: min(82dvh, 760px);
  margin: auto;
  padding: 0;
  overflow: hidden;
  color: #101726;
  background: #f8fafc;
  border: 0;
  border-radius: 22px;
  box-shadow: 0 30px 100px rgba(0,0,0,.45);
}
.promotion-dialog::backdrop,
.promo-dialog::backdrop { background: rgba(4,8,16,.74); backdrop-filter: blur(9px); }
.promotion-dialog__head,
.promo-dialog__head,
.promo-dialog__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 68px;
  padding: 14px 18px 14px 22px;
  color: #fff;
  background: #0b1730;
}
.promotion-dialog__head p,
.promo-dialog__head p,
.promo-dialog__header p { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .16em; }
.promotion-dialog__head h2,
.promo-dialog__head h2,
.promo-dialog__header h2 { margin: 2px 0 0; font-size: clamp(20px,3vw,30px); line-height: 1.15; }
.promotion-dialog__head button,
.promo-dialog__head button,
.promo-dialog__header button {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  cursor: pointer;
  color: #fff;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 50%;
}
.promo-dialog__surface {
  display: grid;
  grid-template-rows: auto minmax(0,1fr) auto;
  max-height: min(82dvh,760px);
}
.promotion-dialog__body,
.promo-dialog__scroll { min-height: 0; overflow: auto; padding: 16px; }
.promotion-card,
.promo-dialog__item {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 18px;
  color: #101726;
  background: #fff;
  border: 1px solid #dbe2ec;
  border-radius: 16px;
}
.promotion-card + .promotion-card,
.promo-dialog__item + .promo-dialog__item { margin-top: 12px; }
.promotion-card h3,
.promo-dialog__item h3 { margin: 0 0 5px; font-size: 20px; line-height: 1.25; }
.promotion-card p,
.promo-dialog__item p { margin: 0; color: #566174; }
.promotion-card a,
.promo-dialog__item a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 8px 15px;
  font-weight: 700;
  white-space: nowrap;
  color: #fff;
  background: #0b1730;
  border-radius: 999px;
}
.promotion-card img,
.promo-dialog__item img { width: 100%; max-height: 220px; object-fit: cover; grid-column: 1 / -1; border-radius: 12px; }
.promo-dialog__media { min-height: 120px; overflow: hidden; border-radius: 12px; }
.promo-dialog__media img { width: 100%; height: 100%; max-height: 240px; object-fit: cover; border-radius: inherit; }
.promo-dialog__content { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-width: 0; }
.promo-dialog__content:first-child:last-child { grid-column: 1 / -1; }
.promo-dialog__content > span { margin-bottom: 6px; color: #4263eb; font-size: 9px; font-weight: 800; letter-spacing: .16em; }
.promo-dialog__content a { margin-top: 14px; }
.promo-dialog__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 54px;
  padding: 8px 16px;
  color: #334155;
  background: #fff;
  border-top: 1px solid #dbe2ec;
  font-size: 12px;
}
.promo-dialog__footer a { color: #334155; text-decoration: underline; text-underline-offset: 3px; }
.promo-dialog__footer button {
  min-height: 38px;
  padding: 7px 13px;
  cursor: pointer;
  color: #fff;
  background: #0b1730;
  border: 0;
  border-radius: 999px;
}

/* -------------------------------------------------------------------------- */
/* 01 — Trinity Gates                                                         */
/* -------------------------------------------------------------------------- */

.viewport-layout.layout-01 {
  --gate-bg: #070b0b;
  --gate-lime: #c6ff36;
  display: grid;
  grid-template-rows: clamp(54px,7.5dvh,70px) minmax(0,1fr) clamp(24px,3.5dvh,34px);
  color: #f8fff0;
  background:
    linear-gradient(rgba(198,255,54,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(198,255,54,.045) 1px,transparent 1px),
    var(--gate-bg);
  background-size: 42px 42px;
}
.gate-masthead,
.gate-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(12px,2vw,28px);
  padding-inline: max(clamp(16px,3vw,48px),env(safe-area-inset-left));
  border-color: rgba(198,255,54,.2);
}
.gate-masthead { border-bottom: 1px solid rgba(198,255,54,.2); }
.gate-status { border-top: 1px solid rgba(198,255,54,.2); font-size: 9px; letter-spacing: .16em; }
.gate-brand { display: inline-flex; align-items: center; gap: 10px; font-size: clamp(17px,1.5vw,23px); font-weight: 500; white-space: nowrap; }
.gate-brand b { color: var(--gate-lime); }
.gate-brand__mark { display: flex; align-items: end; gap: 2px; width: 25px; height: 24px; }
.gate-brand__mark i { width: 6px; background: var(--gate-lime); }
.gate-brand__mark i:nth-child(1) { height: 9px; }
.gate-brand__mark i:nth-child(2) { height: 16px; }
.gate-brand__mark i:nth-child(3) { height: 23px; }
.gate-masthead__line { margin: 0 auto; color: #849080; font-size: 10px; font-weight: 700; letter-spacing: .22em; }
.gate-promo {
  display: grid;
  grid-template-columns: auto minmax(0,150px) 24px;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 5px 8px 5px 12px;
  cursor: pointer;
  color: #eaf6df;
  background: rgba(198,255,54,.06);
  border: 1px solid rgba(198,255,54,.28);
}
.gate-promo span { color: var(--gate-lime); font-size: 9px; letter-spacing: .12em; }
.gate-promo strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.gate-promo b { display: grid; place-items: center; width: 24px; height: 24px; color: #07100a; background: var(--gate-lime); border-radius: 50%; }
.gate-canvas { min-height: 0; display: grid; grid-template-columns: minmax(230px,27%) minmax(0,1fr); }
.gate-intro {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 0;
  padding: clamp(20px,4vw,64px);
  border-right: 1px solid rgba(198,255,54,.2);
}
.gate-eyebrow { display: flex; align-items: center; gap: 8px; margin: 0 0 clamp(12px,3dvh,30px); color: #9ba995; font-size: 9px; font-weight: 700; letter-spacing: .18em; }
.gate-eyebrow span { width: 28px; height: 1px; background: var(--gate-lime); }
.gate-intro h1 { margin: 0; font-size: clamp(40px,5.2vw,82px); font-weight: 650; line-height: .9; letter-spacing: -.055em; }
.gate-intro h1 em { color: #07100a; background: var(--gate-lime); font-style: normal; padding-inline: .08em; }
.gate-intro > p:not(.gate-eyebrow) { max-width: 30ch; margin: clamp(14px,3dvh,30px) 0 0; color: #adb8aa; font-size: clamp(12px,1.2vw,16px); }
.gate-intro__hint { margin-top: auto; color: #879282; font-size: 10px; letter-spacing: .08em; }
.gate-intro__hint i { color: var(--gate-lime); font-style: normal; }
.gate-deck { min-height: 0; display: flex; }
.gate-panel { min-width: 0; flex: 1 1 0; overflow: hidden; border-right: 1px solid rgba(255,255,255,.13); transition: flex .42s var(--fs-ease),filter .3s ease; }
.gate-panel:last-child { border-right: 0; }
.gate-deck:has(.gate-panel:hover) .gate-panel { flex-grow: .82; filter: saturate(.65); }
.gate-deck:has(.gate-panel:hover) .gate-panel:hover,
.gate-panel.is-active { flex-grow: 1.35; filter: none; }
.gate-panel__link { position: relative; z-index: 0; display: grid; grid-template-rows: auto minmax(0,1fr); height: 100%; padding: clamp(14px,2vw,30px); overflow: hidden; }
.gate-panel__link::before { content: ""; position: absolute; z-index: -2; inset: 0; opacity: .88; transition: transform .45s var(--fs-ease),opacity .3s; }
.gate-panel:nth-child(1) .gate-panel__link::before { background: linear-gradient(160deg,#063557,#071827 55%,#061119); }
.gate-panel:nth-child(2) .gate-panel__link::before { background: linear-gradient(160deg,#8b321b,#31160e 55%,#140d09); }
.gate-panel:nth-child(3) .gate-panel__link::before { background: linear-gradient(160deg,#12654e,#0b2b23 55%,#071511); }
.gate-panel__link::after { content: ""; position: absolute; z-index: -1; width: 32vmin; height: 32vmin; top: 15%; right: -35%; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; box-shadow: 0 0 0 7vmin rgba(255,255,255,.02),0 0 0 14vmin rgba(255,255,255,.018); transition: transform .45s var(--fs-ease); }
.gate-panel:hover .gate-panel__link::after,
.gate-panel.is-active .gate-panel__link::after { transform: translateX(-12%) scale(1.07); }
.gate-panel__top { display: flex; justify-content: space-between; color: rgba(255,255,255,.65); font-size: 9px; font-weight: 700; letter-spacing: .18em; }
.gate-panel__monogram { align-self: center; font-size: clamp(56px,8vw,126px); font-weight: 750; line-height: 1; letter-spacing: -.08em; opacity: .15; }
.gate-panel__body { align-self: end; }
.gate-panel__brand { display: flex; flex-direction: column; margin-bottom: clamp(8px,1.8dvh,16px); }
.gate-panel__brand strong { font-size: clamp(20px,2vw,31px); line-height: 1; }
.gate-panel__brand small { margin-top: 5px; color: rgba(255,255,255,.62); font-size: 10px; }
.gate-panel__body h2 { margin: 0; font-size: clamp(15px,1.45vw,22px); line-height: 1.25; }
.gate-panel__body p { display: -webkit-box; max-width: 34ch; margin: 9px 0 0; overflow: hidden; color: rgba(255,255,255,.67); font-size: clamp(10px,.86vw,13px); -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.gate-panel__features { display: flex; flex-wrap: wrap; gap: 5px; margin-top: clamp(10px,2dvh,18px); }
.gate-panel__features span { padding: 4px 7px; font-size: 8px; font-weight: 700; letter-spacing: .08em; border: 1px solid rgba(255,255,255,.24); }
.gate-panel__cta { display: flex; align-items: center; justify-content: space-between; min-height: 44px; margin-top: clamp(10px,2dvh,20px); padding-top: 8px; font-size: 11px; font-weight: 700; border-top: 1px solid rgba(255,255,255,.26); }
.gate-panel__cta i { font-size: 18px; font-style: normal; }
.gate-status > div { display: flex; align-items: center; gap: 8px; }
.gate-status i { width: 3px; height: 3px; background: var(--gate-lime); border-radius: 50%; }
.gate-status a { color: var(--gate-lime); }

/* -------------------------------------------------------------------------- */
/* 02 — Orbit Nexus                                                           */
/* -------------------------------------------------------------------------- */

.viewport-layout.layout-02 {
  --orbit-cyan: #5af3ff;
  --orbit-violet: #7d6cff;
  display: grid;
  grid-template-rows: clamp(54px,7dvh,66px) minmax(0,1fr) clamp(25px,3.5dvh,34px);
  color: #e9fbff;
  background:
    radial-gradient(circle at 60% 48%,rgba(26,173,211,.2),transparent 30%),
    radial-gradient(circle at 62% 52%,rgba(125,108,255,.16),transparent 52%),
    #04111f;
}
.orbit-masthead,
.orbit-status { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-inline: max(clamp(16px,3vw,46px),env(safe-area-inset-left)); border-color: rgba(90,243,255,.18); }
.orbit-masthead { border-bottom: 1px solid rgba(90,243,255,.18); }
.orbit-status { border-top: 1px solid rgba(90,243,255,.18); color: #93b8c2; font-size: 9px; letter-spacing: .15em; }
.orbit-brand { display: flex; align-items: center; gap: 10px; font-size: clamp(17px,1.45vw,22px); }
.orbit-brand b { color: var(--orbit-cyan); }
.orbit-brand__signal { width: 25px; height: 25px; border: 1px solid var(--orbit-cyan); border-radius: 50%; box-shadow: inset 0 0 0 6px #04111f,inset 0 0 0 7px rgba(90,243,255,.5),0 0 15px rgba(90,243,255,.35); }
.orbit-masthead__legend { display: flex; gap: clamp(14px,3vw,40px); margin-left: auto; color: #8eabb4; font-size: 9px; font-weight: 700; letter-spacing: .15em; }
.orbit-promo { display: flex; align-items: center; gap: 8px; min-height: 38px; max-width: 260px; padding: 6px 12px; cursor: pointer; color: #c6f8ff; background: rgba(90,243,255,.06); border: 1px solid rgba(90,243,255,.2); border-radius: 999px; }
.orbit-promo__pulse { width: 7px; height: 7px; flex: 0 0 auto; background: var(--orbit-cyan); border-radius: 50%; box-shadow: 0 0 10px var(--orbit-cyan); }
.orbit-promo span { font-size: 9px; white-space: nowrap; }
.orbit-promo strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.orbit-canvas { position: relative; min-height: 0; display: grid; grid-template-columns: minmax(190px,24%) minmax(320px,48%) minmax(220px,28%); align-items: stretch; overflow: hidden; }
.orbit-canvas::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(90,243,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(90,243,255,.035) 1px,transparent 1px); background-size: 34px 34px; mask-image: linear-gradient(90deg,#000,transparent 75%); }
.orbit-intro { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; padding: clamp(20px,3.2vw,52px); border-right: 1px solid rgba(90,243,255,.12); }
.orbit-intro > p { margin: 0 0 clamp(12px,3dvh,28px); color: var(--orbit-cyan); font-size: 9px; font-weight: 700; letter-spacing: .16em; }
.orbit-intro h1 { margin: 0; font-size: clamp(36px,4.55vw,70px); font-weight: 600; line-height: .95; letter-spacing: -.05em; }
.orbit-intro h1 em { color: var(--orbit-cyan); font-style: normal; text-shadow: 0 0 24px rgba(90,243,255,.25); }
.orbit-intro > span { margin-top: auto; color: #799ca5; font-size: 10px; }
.orbit-map { position: relative; z-index: 1; align-self: center; justify-self: center; width: min(100%,min(68dvh,640px)); aspect-ratio: 1; }
.orbit-connectors { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; stroke: rgba(90,243,255,.2); stroke-width: 1; }
.orbit-connectors circle:first-child { stroke-dasharray: 5 10; }
.orbit-connectors circle:nth-child(2) { stroke: rgba(125,108,255,.22); }
.orbit-hub { position: absolute; left: 50%; top: 50%; width: clamp(112px,15vw,210px); aspect-ratio: 1; display: grid; place-content: center; text-align: center; transform: translate(-50%,-50%); border: 1px solid var(--orbit-cyan); border-radius: 50%; background: radial-gradient(circle,rgba(21,104,132,.88),rgba(4,17,31,.95) 68%); box-shadow: 0 0 0 12px rgba(90,243,255,.025),0 0 60px rgba(90,243,255,.22); }
.orbit-hub::before,.orbit-hub::after { content: ""; position: absolute; inset: -12%; border: 1px solid rgba(90,243,255,.12); border-radius: 50%; }
.orbit-hub::after { inset: -25%; border-style: dashed; animation: orbitSpin 28s linear infinite; }
.orbit-hub span,.orbit-hub small { color: #88bcc8; font-size: 8px; letter-spacing: .2em; }
.orbit-hub strong { color: var(--orbit-cyan); font-size: clamp(34px,4.5vw,60px); line-height: .85; }
.orbit-hub b { font-size: clamp(12px,1.3vw,18px); font-weight: 500; }
.orbit-nodes { position: absolute; inset: 0; }
.orbit-node { position: absolute; z-index: 3; width: clamp(116px,13vw,175px); min-height: 70px; padding: 10px 12px; cursor: pointer; text-align: left; color: #dbf8ff; background: rgba(6,29,48,.88); border: 1px solid rgba(90,243,255,.25); border-radius: 14px; box-shadow: 0 14px 40px rgba(0,0,0,.28); transition: border-color .25s,transform .3s var(--fs-ease),background .25s; }
.orbit-node:hover,.orbit-node.is-active { color: #04111f; background: var(--orbit-cyan); border-color: var(--orbit-cyan); box-shadow: 0 0 30px rgba(90,243,255,.3); }
.orbit-node--people { left: 5%; top: 8%; }
.orbit-node--food { right: 0; top: 11%; }
.orbit-node--commerce { left: 50%; bottom: 4%; transform: translateX(-50%); }
.orbit-node--commerce:hover,.orbit-node--commerce.is-active { transform: translateX(-50%) translateY(-4px); }
.orbit-node__index { position: absolute; right: 10px; top: 8px; font-size: 8px; opacity: .65; }
.orbit-node__monogram { float: left; display: grid; place-items: center; width: 34px; height: 34px; margin-right: 8px; color: var(--orbit-cyan); background: rgba(90,243,255,.1); border: 1px solid currentColor; border-radius: 50%; font-size: 9px; font-weight: 800; }
.orbit-node:hover .orbit-node__monogram,.orbit-node.is-active .orbit-node__monogram { color: #04111f; background: rgba(4,17,31,.1); }
.orbit-node strong,.orbit-node small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.orbit-node strong { padding-top: 2px; font-size: 12px; }
.orbit-node small { margin-top: 3px; font-size: 8px; opacity: .68; }
.orbit-readout { position: relative; z-index: 2; display: flex; align-items: center; min-height: 0; padding: clamp(16px,2.6vw,38px); border-left: 1px solid rgba(90,243,255,.12); }
.orbit-panel { width: 100%; }
.orbit-panel__heading { display: flex; align-items: center; gap: 9px; color: var(--orbit-cyan); font-size: 9px; letter-spacing: .12em; }
.orbit-panel__heading strong { color: #fff; font-size: clamp(18px,2vw,28px); letter-spacing: 0; }
.orbit-panel h2 { margin: clamp(12px,2.4dvh,22px) 0 0; font-size: clamp(22px,2.5vw,38px); line-height: 1.08; }
.orbit-panel p { display: -webkit-box; margin: 13px 0 0; overflow: hidden; color: #95b0b7; font-size: clamp(11px,1vw,14px); -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.orbit-panel__footer { margin-top: clamp(16px,3dvh,28px); }
.orbit-panel__footer > div { display: flex; flex-wrap: wrap; gap: 5px; }
.orbit-panel__footer span { padding: 4px 7px; color: #97c8d0; border: 1px solid rgba(90,243,255,.2); border-radius: 999px; font-size: 8px; }
.orbit-panel__footer a { display: flex; align-items: center; justify-content: space-between; min-height: 46px; margin-top: 12px; padding: 10px 14px; color: #04111f; background: var(--orbit-cyan); border-radius: 10px; font-size: 11px; font-weight: 800; }
.orbit-panel__footer i { font-size: 18px; font-style: normal; }
.orbit-status i { display: inline-block; width: 7px; height: 7px; margin-right: 7px; background: var(--orbit-cyan); border-radius: 50%; box-shadow: 0 0 10px var(--orbit-cyan); }
.orbit-status a { color: var(--orbit-cyan); }

@keyframes orbitSpin { to { transform: rotate(360deg); } }

/* -------------------------------------------------------------------------- */
/* 03 — Bento OS                                                              */
/* -------------------------------------------------------------------------- */

.viewport-layout.layout-03 {
  --bento-ink: #12182a;
  --bento-purple: #6654f5;
  display: grid;
  grid-template-rows: clamp(52px,6.5dvh,64px) minmax(0,1fr) clamp(24px,3.5dvh,34px);
  padding: 0 clamp(8px,1vw,14px);
  color: var(--bento-ink);
  background: #eaf0fa;
}
.bento-masthead,.bento-statusbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-inline: clamp(5px,1.5vw,20px); }
.bento-brand { display: flex; align-items: center; gap: 9px; font-size: clamp(17px,1.45vw,22px); }
.bento-brand b { color: var(--bento-purple); }
.bento-brand__tiles { display: grid; grid-template-columns: repeat(2,8px); gap: 2px; transform: rotate(45deg); }
.bento-brand__tiles i { width: 8px; height: 8px; background: var(--bento-purple); border-radius: 2px; }
.bento-brand__tiles i:nth-child(2),.bento-brand__tiles i:nth-child(3) { opacity: .35; }
.bento-masthead > p { margin: 0 auto; color: #596579; font-size: 9px; font-weight: 700; letter-spacing: .18em; }
.bento-clock { display: flex; align-items: center; gap: 7px; font-size: 9px; font-weight: 700; letter-spacing: .08em; }
.bento-clock i { width: 8px; height: 8px; background: #23b876; border-radius: 50%; box-shadow: 0 0 0 4px rgba(35,184,118,.12); }
.bento-board { min-height: 0; display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); grid-template-rows: repeat(6,minmax(0,1fr)); gap: clamp(6px,.8vw,12px); padding-bottom: clamp(6px,.8vw,12px); }
.bento-tile { position: relative; min-height: 0; overflow: hidden; border: 1px solid rgba(18,24,42,.1); border-radius: clamp(12px,1.4vw,22px); box-shadow: 0 8px 28px rgba(41,54,83,.08); }
.bento-label { color: currentColor; font-size: 8px; font-weight: 800; letter-spacing: .15em; opacity: .58; }
.bento-hero { grid-column: 1 / 6; grid-row: 1 / 5; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(16px,2.4vw,34px); color: #f9fbff; background: linear-gradient(150deg,#17233d,#11182a 68%); }
.bento-hero::before { content: ""; position: absolute; width: 36vmin; height: 36vmin; right: -17%; top: -25%; background: repeating-conic-gradient(from 0deg,var(--bento-purple) 0 4deg,transparent 4deg 18deg); border-radius: 50%; opacity: .17; }
.bento-hero > div { position: relative; z-index: 1; }
.bento-hero > div p { margin: 0 0 clamp(8px,2dvh,18px); color: #a7b1c7; font-size: 8px; letter-spacing: .15em; }
.bento-hero h1 { margin: 0; font-size: clamp(38px,5vw,76px); line-height: .87; letter-spacing: -.06em; }
.bento-hero h1 em { color: #d7ff5b; font-style: normal; }
.bento-hero__lead { position: relative; z-index: 1; max-width: 36ch; margin: 0; color: #aeb9cf; font-size: clamp(10px,.95vw,14px); }
.bento-product { color: #fff; transition: transform .25s var(--fs-ease),box-shadow .25s; }
.bento-product:hover,.bento-product.is-active { transform: translateY(-3px); box-shadow: 0 16px 38px rgba(35,43,72,.2); }
.bento-product--people { grid-column: 6 / 10; grid-row: 1 / 4; background: linear-gradient(145deg,#254fc7,#183174); }
.bento-product--food { grid-column: 10 / 13; grid-row: 1 / 5; color: #3b1b0e; background: linear-gradient(145deg,#ffbe3f,#ff8b2e); }
.bento-product--commerce { grid-column: 6 / 10; grid-row: 4 / 7; background: linear-gradient(145deg,#158063,#0d5040); }
.bento-product > a { display: flex; flex-direction: column; height: 100%; padding: clamp(12px,1.6vw,24px); }
.bento-product__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 8px; font-weight: 800; letter-spacing: .13em; }
.bento-product__top i { font-size: 16px; font-style: normal; }
.bento-product__glyph { position: absolute; right: 7%; top: 18%; font-size: clamp(54px,7vw,108px); font-weight: 800; line-height: 1; opacity: .12; }
.bento-product__copy { margin-top: auto; }
.bento-product__copy strong,.bento-product__copy small { display: block; }
.bento-product__copy strong { font-size: clamp(19px,2vw,30px); line-height: 1; }
.bento-product__copy small { margin-top: 4px; font-size: 9px; opacity: .7; }
.bento-product__copy h2 { margin: clamp(8px,1.5dvh,15px) 0 0; font-size: clamp(13px,1.15vw,18px); line-height: 1.2; }
.bento-product__copy p { display: -webkit-box; margin: 7px 0 0; overflow: hidden; font-size: clamp(9px,.74vw,11px); opacity: .75; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.bento-product__chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: clamp(8px,1.5dvh,14px); }
.bento-product__chips span { padding: 3px 6px; font-size: 7px; font-weight: 700; border: 1px solid currentColor; border-radius: 999px; opacity: .72; }
.bento-product--food .bento-product__copy small,
.bento-product--food .bento-product__copy p,
.bento-product--food .bento-product__chips span { opacity: 1; }
.bento-network { grid-column: 1 / 6; grid-row: 5 / 7; display: grid; grid-template-columns: 1.15fr 1fr; grid-template-rows: auto 1fr; gap: 4px 16px; padding: clamp(12px,1.5vw,22px); background: #fff; }
.bento-network__diagram { align-self: end; display: flex; align-items: center; gap: 5px; }
.bento-network__diagram i { font-size: 7px; font-style: normal; font-weight: 800; }
.bento-network__diagram span { width: min(3vw,32px); height: 1px; background: #aeb7c7; }
.bento-network strong { grid-column: 2; grid-row: 1 / 3; align-self: center; font-size: clamp(15px,1.55vw,24px); line-height: 1.15; }
.bento-update { grid-column: 10 / 13; grid-row: 5 / 7; color: #25213b; background: #d9d0ff; }
.bento-update button,.bento-update__empty { display: flex; flex-direction: column; justify-content: space-between; width: 100%; height: 100%; padding: clamp(12px,1.5vw,22px); text-align: left; background: transparent; border: 0; cursor: pointer; }
.bento-update strong { display: -webkit-box; overflow: hidden; font-size: clamp(14px,1.45vw,21px); line-height: 1.15; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.bento-update button > span:last-child { display: flex; justify-content: space-between; font-size: 9px; font-weight: 700; }
.bento-update i { font-style: normal; }
.bento-statusbar { color: #596579; font-size: 8px; letter-spacing: .13em; }
.bento-statusbar div { display: flex; gap: clamp(12px,3vw,36px); }
.bento-statusbar a { color: var(--bento-purple); font-weight: 800; }

/* -------------------------------------------------------------------------- */
/* 04 — Editorial Index                                                       */
/* -------------------------------------------------------------------------- */

.viewport-layout.layout-04 {
  --index-paper: #f1eadc;
  --index-ink: #18130e;
  --index-red: #c92b1c;
  display: grid;
  grid-template-rows: clamp(50px,6.5dvh,62px) minmax(0,1fr) clamp(24px,3.5dvh,34px);
  color: var(--index-ink);
  background: var(--index-paper);
}
.index-masthead,.index-footer { display: grid; grid-template-columns: minmax(160px,40%) 1fr auto; align-items: center; gap: 18px; padding-inline: clamp(14px,2.5vw,38px); border-color: rgba(24,19,14,.28); }
.index-masthead { border-bottom: 1px solid rgba(24,19,14,.28); }
.index-footer { border-top: 1px solid rgba(24,19,14,.28); font-size: 8px; font-weight: 700; letter-spacing: .15em; }
.index-brand { display: flex; align-items: baseline; gap: 3px; font-size: clamp(17px,1.6vw,24px); }
.index-brand b { color: var(--index-red); font-size: 1.25em; }
.index-masthead > p { margin: 0; font-size: 9px; font-weight: 800; letter-spacing: .18em; }
.index-edition { font-size: 8px; font-weight: 700; letter-spacing: .13em; }
.index-spread { min-height: 0; display: grid; grid-template-columns: minmax(270px,40%) minmax(0,1fr); }
.index-cover { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 0; padding: clamp(20px,4vw,64px); overflow: hidden; border-right: 1px solid rgba(24,19,14,.28); }
.index-cover::before { content: ""; position: absolute; left: -16%; bottom: -38%; width: 54vmin; height: 54vmin; border: clamp(16px,3vw,46px) solid var(--index-red); border-radius: 50%; opacity: .95; }
.index-cover__kicker { position: relative; z-index: 1; margin: 0 0 clamp(12px,2.5dvh,26px); font-size: 9px; font-weight: 800; letter-spacing: .16em; }
.index-cover h1 { position: relative; z-index: 1; margin: 0; font-size: clamp(44px,6vw,92px); font-weight: 700; line-height: .84; letter-spacing: -.07em; }
.index-cover h1 em { color: var(--index-red); font-style: normal; }
.index-cover__lead { position: relative; z-index: 1; max-width: 34ch; margin: clamp(15px,2.8dvh,26px) 0 0; font-size: clamp(11px,1vw,14px); }
.index-cover__folio { position: absolute; right: clamp(12px,2vw,30px); top: 50%; display: flex; flex-direction: column; align-items: center; gap: 7px; transform: translateY(-50%); font-size: 9px; font-weight: 800; }
.index-cover__folio i { width: 1px; height: clamp(55px,15dvh,120px); background: var(--index-ink); }
.index-promo { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; width: min(300px,86%); min-height: 54px; margin-top: auto; padding: 10px 13px; cursor: pointer; text-align: left; color: #fff; background: var(--index-ink); border: 0; }
.index-promo span { font-size: 7px; letter-spacing: .15em; }
.index-promo strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.index-promo i { grid-column: 2; grid-row: 1 / 3; align-self: center; font-size: 18px; font-style: normal; }
.index-bands { min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.index-band { min-height: 0; flex: 1 1 0; display: grid; grid-template-rows: auto minmax(0,1fr); overflow: hidden; border-bottom: 1px solid rgba(24,19,14,.28); transition: flex .35s var(--fs-ease),background .3s; }
.index-band:last-child { border-bottom: 0; }
.index-band.is-active { flex-grow: 1.85; color: #fff; background: var(--index-red); }
.index-band__selector { width: 100%; min-height: 54px; display: grid; grid-template-columns: clamp(42px,6vw,82px) 1fr auto; align-items: center; gap: clamp(8px,2vw,24px); padding: clamp(8px,1.2vw,16px) clamp(14px,2.5vw,38px); cursor: pointer; text-align: left; background: transparent; border: 0; }
.index-band__number { font-size: clamp(20px,2.5vw,38px); font-weight: 750; letter-spacing: -.05em; }
.index-band__identity { display: grid; grid-template-columns: minmax(70px,.55fr) minmax(100px,1fr) auto; align-items: baseline; gap: 12px; }
.index-band__identity b { font-size: 8px; letter-spacing: .14em; }
.index-band__identity strong { font-size: clamp(17px,1.8vw,27px); }
.index-band__identity small { font-size: 9px; opacity: .66; }
.index-band__toggle { position: relative; width: 34px; height: 34px; border: 1px solid currentColor; border-radius: 50%; }
.index-band__toggle i { position: absolute; left: 50%; top: 50%; width: 12px; height: 1px; background: currentColor; transform: translate(-50%,-50%); }
.index-band__toggle i:last-child { transform: translate(-50%,-50%) rotate(90deg); transition: transform .25s; }
.index-band.is-active .index-band__toggle i:last-child { transform: translate(-50%,-50%) rotate(0); }
.index-band__panel { display: grid; grid-template-columns: minmax(0,1fr) auto; grid-template-rows: 1fr auto; align-items: center; gap: 8px 22px; min-height: 0; padding: 0 clamp(14px,2.5vw,38px) clamp(12px,2dvh,22px) clamp(64px,8.5vw,120px); }
.index-band:not(.is-active) .index-band__panel { display: none; }
.index-band__copy h2 { margin: 0; font-size: clamp(18px,2.2vw,34px); line-height: 1.08; }
.index-band__copy p { display: -webkit-box; max-width: 58ch; margin: 7px 0 0; overflow: hidden; font-size: clamp(9px,.85vw,12px); opacity: .78; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.index-band__features { display: flex; flex-wrap: wrap; gap: 5px; }
.index-band__features span { padding: 4px 7px; font-size: 7px; font-weight: 800; border: 1px solid currentColor; }
.index-band__panel a { grid-column: 2; grid-row: 1 / 3; align-self: end; min-height: 44px; display: flex; align-items: center; gap: 18px; padding: 9px 13px; color: var(--index-ink); background: #fff; font-size: 10px; font-weight: 800; }
.index-band__panel i { font-size: 17px; font-style: normal; }
.index-footer p { margin: 0; text-align: center; }
.index-footer a { color: var(--index-red); }

/* -------------------------------------------------------------------------- */
/* 05 — Card Stage                                                            */
/* -------------------------------------------------------------------------- */

.viewport-layout.layout-05 {
  --stage-ink: #171222;
  --stage-gold: #ffd85b;
  --stage-lilac: #b8a7ff;
  display: grid;
  grid-template-rows: clamp(54px,7dvh,68px) minmax(0,1fr) clamp(28px,4dvh,40px);
  color: #fbf9ff;
  background: radial-gradient(circle at 54% 45%,#49396d 0,transparent 31%),linear-gradient(135deg,#171222,#251b36 55%,#151020);
}
.stage-masthead,.stage-footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-inline: max(clamp(16px,3vw,46px),env(safe-area-inset-left)); border-color: rgba(255,255,255,.14); }
.stage-masthead { border-bottom: 1px solid rgba(255,255,255,.14); }
.stage-footer { border-top: 1px solid rgba(255,255,255,.14); color: #ac9fbd; font-size: 8px; letter-spacing: .13em; }
.stage-brand { display: flex; align-items: center; gap: 8px; font-size: clamp(17px,1.5vw,22px); }
.stage-brand__mark { display: grid; place-items: center; width: 34px; height: 34px; color: var(--stage-ink); background: var(--stage-gold); border-radius: 10px; font-size: 11px; font-weight: 900; transform: rotate(-6deg); }
.stage-masthead > p { margin: 0 auto; color: #a99eb8; font-size: 9px; font-weight: 700; letter-spacing: .18em; }
.stage-promo { display: flex; align-items: center; gap: 7px; min-height: 38px; max-width: 220px; padding: 7px 11px; cursor: pointer; color: #fff; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); border-radius: 12px; }
.stage-promo i { width: 7px; height: 7px; flex: 0 0 auto; background: var(--stage-gold); border-radius: 50%; box-shadow: 0 0 10px var(--stage-gold); }
.stage-promo span { font-size: 9px; white-space: nowrap; }
.stage-promo strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.stage-scene { position: relative; min-height: 0; display: grid; grid-template-columns: minmax(50px,6%) minmax(210px,25%) minmax(340px,43%) minmax(220px,26%); align-items: stretch; overflow: hidden; }
.stage-scene::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(255,255,255,.11) 1px,transparent 1px); background-size: 25px 25px; mask-image: linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent); opacity: .35; }
.stage-rail { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; border-right: 1px solid rgba(255,255,255,.13); color: #9f92b1; font-size: 8px; }
.stage-rail > div { display: flex; flex-direction: column; gap: 8px; }
.stage-rail i { width: 4px; height: 4px; background: #776d84; border-radius: 50%; }
.layout-05[data-active="0"] .stage-rail i:nth-child(1),
.layout-05[data-active="1"] .stage-rail i:nth-child(2),
.layout-05[data-active="2"] .stage-rail i:nth-child(3) { height: 24px; background: var(--stage-gold); border-radius: 99px; }
.stage-intro { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; padding: clamp(18px,3vw,44px); }
.stage-intro > p { margin: 0 0 clamp(12px,2.5dvh,24px); color: var(--stage-gold); font-size: 9px; font-weight: 800; letter-spacing: .15em; }
.stage-intro h1 { margin: 0; font-size: clamp(38px,4.8vw,74px); line-height: .87; letter-spacing: -.06em; }
.stage-intro h1 em { color: var(--stage-gold); font-style: normal; }
.stage-intro > span { max-width: 24ch; margin-top: auto; color: #a99eb8; font-size: 10px; }
.stage-deck { position: relative; z-index: 2; min-height: 0; }
.stage-card { position: absolute; left: 50%; top: 50%; width: min(72%,340px); height: min(72%,430px); min-height: 250px; padding: clamp(15px,2vw,25px); cursor: pointer; text-align: left; color: #fff; border: 1px solid rgba(255,255,255,.25); border-radius: clamp(20px,2.6vw,34px); box-shadow: 0 30px 70px rgba(0,0,0,.35); transform-origin: 50% 110%; transition: transform .4s var(--fs-ease),filter .3s,opacity .3s; }
.stage-card:nth-child(1) { z-index: 3; transform: translate(-62%,-50%) rotate(-7deg); }
.stage-card:nth-child(2) { z-index: 2; transform: translate(-42%,-53%) rotate(6deg); }
.stage-card:nth-child(3) { z-index: 1; transform: translate(-50%,-43%) rotate(12deg); }
.stage-card.is-active { z-index: 5; transform: translate(-50%,-52%) rotate(0) scale(1.04); filter: saturate(1.1); }
.stage-card:not(.is-active) { filter: saturate(.55) brightness(.78); }
.stage-card--people { background: linear-gradient(145deg,#2961e4,#182f70); }
.stage-card--food { color: #2e170b; background: linear-gradient(145deg,#ffcf55,#ff8d39); }
.stage-card--commerce { background: linear-gradient(145deg,#1f725b,#104f3d); }
.stage-card::before { content: ""; position: absolute; width: 70%; aspect-ratio: 1; right: -20%; top: 18%; border: 1px solid currentColor; border-radius: 50%; opacity: .12; box-shadow: 0 0 0 22px rgba(255,255,255,.025),0 0 0 44px rgba(255,255,255,.018); }
.stage-card__top { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; font-size: 8px; letter-spacing: .13em; }
.stage-card__top i { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid currentColor; border-radius: 50%; font-style: normal; font-weight: 800; }
.stage-card__identity { position: absolute; z-index: 1; left: clamp(15px,2vw,25px); right: clamp(15px,2vw,25px); bottom: clamp(48px,7dvh,70px); }
.stage-card__identity small,.stage-card__identity strong,.stage-card__identity span { display: block; }
.stage-card__identity small { font-size: 8px; font-weight: 800; letter-spacing: .15em; opacity: .7; }
.stage-card__identity strong { margin-top: 6px; font-size: clamp(24px,3vw,43px); line-height: .95; }
.stage-card__identity span { margin-top: 6px; font-size: 9px; opacity: .7; }
.stage-card__hint { position: absolute; z-index: 1; left: clamp(15px,2vw,25px); right: clamp(15px,2vw,25px); bottom: 16px; display: flex; justify-content: space-between; padding-top: 10px; font-size: 8px; font-weight: 800; border-top: 1px solid currentColor; opacity: .7; }
.stage-card--food .stage-card__identity small,
.stage-card--food .stage-card__identity span,
.stage-card--food .stage-card__hint { opacity: 1; }
.stage-card__hint i { font-size: 15px; font-style: normal; }
.stage-copy { position: relative; z-index: 2; display: flex; align-items: center; min-height: 0; padding: clamp(18px,3vw,44px); border-left: 1px solid rgba(255,255,255,.13); }
.stage-panel { width: 100%; }
.stage-panel__tag { color: var(--stage-gold); font-size: 8px; font-weight: 800; letter-spacing: .15em; }
.stage-panel h2 { margin: clamp(10px,2dvh,18px) 0 0; font-size: clamp(22px,2.65vw,40px); line-height: 1.08; }
.stage-panel p { display: -webkit-box; margin: 12px 0 0; overflow: hidden; color: #b8adc6; font-size: clamp(10px,.9vw,13px); -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.stage-panel__features { display: flex; flex-wrap: wrap; gap: 5px; margin-top: clamp(12px,2.5dvh,22px); }
.stage-panel__features span { padding: 4px 7px; color: #d5cae4; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; font-size: 7px; }
.stage-panel a { display: flex; align-items: center; justify-content: space-between; min-height: 46px; margin-top: clamp(13px,2.6dvh,24px); padding: 10px 13px; color: var(--stage-ink); background: var(--stage-gold); border-radius: 12px; font-size: 10px; font-weight: 850; }
.stage-panel a i { font-size: 18px; font-style: normal; }
.stage-controls { position: absolute; z-index: 8; left: 31%; bottom: clamp(10px,2dvh,18px); width: 43%; display: flex; align-items: center; justify-content: center; gap: 12px; }
.stage-controls button { display: grid; place-items: center; width: 44px; height: 44px; cursor: pointer; color: #fff; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2); border-radius: 50%; }
.stage-controls > div { display: flex; gap: 5px; }
.stage-controls i { width: 5px; height: 5px; background: #756a84; border-radius: 50%; }
.layout-05[data-active="0"] .stage-controls i:nth-child(1),
.layout-05[data-active="1"] .stage-controls i:nth-child(2),
.layout-05[data-active="2"] .stage-controls i:nth-child(3) { width: 20px; background: var(--stage-gold); border-radius: 99px; }
.stage-footer > div { display: flex; gap: clamp(10px,2vw,24px); }
.stage-footer > a { color: var(--stage-gold); }

/* -------------------------------------------------------------------------- */
/* Responsive compositions                                                    */
/* -------------------------------------------------------------------------- */

@media (max-width: 820px) {
  .promotion-dialog,.promo-dialog { width: calc(100vw - 20px); border-radius: 17px; }
  .promotion-card,.promo-dialog__item { grid-template-columns: 1fr; padding: 14px; }
  .promo-dialog__media { min-height: 0; max-height: 150px; }
  .promo-dialog__content { grid-column: 1; }

  .viewport-layout.layout-01 { grid-template-rows: 48px minmax(0,1fr) 24px; }
  .gate-masthead,.gate-status { padding-inline: max(12px,env(safe-area-inset-left)); }
  .gate-masthead__line { display: none; }
  .gate-promo { grid-template-columns: auto 22px; margin-left: auto; padding-left: 9px; }
  .gate-promo strong { display: none; }
  .gate-canvas { grid-template-columns: 1fr; grid-template-rows: minmax(132px,30%) minmax(0,1fr); }
  .gate-intro { padding: clamp(13px,4vw,20px); border-right: 0; border-bottom: 1px solid rgba(198,255,54,.2); }
  .gate-eyebrow { margin-bottom: 7px; }
  .gate-intro h1 { font-size: clamp(31px,11.5vw,48px); line-height: .85; }
  .gate-intro h1 br:nth-of-type(1) { display: none; }
  .gate-intro > p:not(.gate-eyebrow) { display: -webkit-box; max-width: 54ch; margin-top: 9px; overflow: hidden; font-size: 10px; -webkit-box-orient: vertical; -webkit-line-clamp: 1; }
  .gate-intro__hint { display: none; }
  .gate-deck { flex-direction: column; }
  .gate-panel,.gate-deck:has(.gate-panel:hover) .gate-panel,.gate-deck:has(.gate-panel:hover) .gate-panel:hover,.gate-panel.is-active { flex: 1 1 0; filter: none; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.15); }
  .gate-panel:last-child { border-bottom: 0; }
  .gate-panel__link { display: grid; grid-template-columns: 38px minmax(0,1fr) auto; grid-template-rows: 1fr; align-items: center; gap: 11px; padding: 9px 14px; }
  .gate-panel__top { display: block; font-size: 8px; }
  .gate-panel__top span:last-child { display: none; }
  .gate-panel__monogram { display: none; }
  .gate-panel__body { align-self: center; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 8px; }
  .gate-panel__brand { margin: 0; }
  .gate-panel__brand strong { font-size: clamp(17px,5vw,22px); }
  .gate-panel__body h2,.gate-panel__body p,.gate-panel__features { display: none; }
  .gate-panel__cta { min-height: 44px; margin: 0; padding: 0; border: 0; font-size: 0; }
  .gate-panel__cta i { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; font-size: 18px; }
  .gate-status > span,.gate-status > div { display: none; }
  .gate-status a { margin-left: auto; }

  .viewport-layout.layout-02 { grid-template-rows: 48px minmax(0,1fr) 24px; }
  .orbit-masthead,.orbit-status { padding-inline: max(12px,env(safe-area-inset-left)); }
  .orbit-masthead__legend { display: none; }
  .orbit-promo { margin-left: auto; max-width: 110px; }
  .orbit-promo strong { display: none; }
  .orbit-canvas { grid-template-columns: 1fr; grid-template-rows: minmax(100px,22%) minmax(200px,47%) minmax(130px,31%); }
  .orbit-intro { justify-content: center; padding: 12px 16px; border-right: 0; border-bottom: 1px solid rgba(90,243,255,.12); }
  .orbit-intro > p { margin-bottom: 7px; }
  .orbit-intro h1 { font-size: clamp(28px,9.7vw,41px); line-height: .86; }
  .orbit-intro h1 br:first-of-type { display: none; }
  .orbit-intro > span { position: absolute; right: 16px; bottom: 13px; max-width: 13ch; text-align: right; }
  .orbit-map { width: min(100%,44dvh); }
  .orbit-hub { width: clamp(94px,27vw,126px); }
  .orbit-node { width: clamp(92px,27vw,116px); min-height: 52px; padding: 7px; border-radius: 10px; }
  .orbit-node--people { left: 1%; top: 6%; }
  .orbit-node--food { right: 1%; top: 7%; }
  .orbit-node--commerce { bottom: 1%; }
  .orbit-node__monogram { width: 26px; height: 26px; margin-right: 5px; }
  .orbit-node strong { font-size: 10px; }
  .orbit-node small,.orbit-node__index { display: none; }
  .orbit-readout { align-items: center; padding: 10px 14px; border-left: 0; border-top: 1px solid rgba(90,243,255,.12); }
  .orbit-panel { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 10px; }
  .orbit-panel__heading { grid-column: 1; }
  .orbit-panel h2 { grid-column: 1; margin: 5px 0 0; font-size: clamp(17px,5.2vw,23px); }
  .orbit-panel p { display: none; }
  .orbit-panel__footer { grid-column: 2; grid-row: 1 / 3; margin: 0; }
  .orbit-panel__footer > div { display: none; }
  .orbit-panel__footer a { width: 48px; height: 48px; min-height: 48px; margin: 0; padding: 0; justify-content: center; border-radius: 50%; font-size: 0; }
  .orbit-panel__footer i { font-size: 19px; }
  .orbit-status b { display: none; }

  .viewport-layout.layout-03 { grid-template-rows: 46px minmax(0,1fr) 22px; padding-inline: 6px; }
  .bento-masthead { padding-inline: 5px; }
  .bento-masthead > p { display: none; }
  .bento-clock { margin-left: auto; }
  .bento-board { grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-rows: 1.25fr .82fr .82fr .58fr; gap: 5px; padding-bottom: 5px; }
  .bento-tile { border-radius: 11px; }
  .bento-hero { grid-column: 1 / 3; grid-row: 1; padding: 12px 14px; }
  .bento-hero h1 { font-size: clamp(28px,9vw,40px); line-height: .84; }
  .bento-hero h1 br:first-of-type { display: none; }
  .bento-hero > div p { margin-bottom: 5px; }
  .bento-hero__lead { max-width: 52ch; font-size: 9px; }
  .bento-product--people { grid-column: 1; grid-row: 2; }
  .bento-product--food { grid-column: 2; grid-row: 2; }
  .bento-product--commerce { grid-column: 1 / 3; grid-row: 3; }
  .bento-product > a { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr; padding: 9px 10px; }
  .bento-product__top { grid-column: 1 / 3; }
  .bento-product__glyph { display: none; }
  .bento-product__copy { align-self: end; margin: 0; }
  .bento-product__copy strong { font-size: clamp(15px,4.7vw,20px); }
  .bento-product__copy h2,.bento-product__copy p,.bento-product__chips { display: none; }
  .bento-network { grid-column: 1; grid-row: 4; display: flex; flex-direction: column; justify-content: space-between; gap: 4px; padding: 9px; }
  .bento-network__diagram { display: none; }
  .bento-network strong { font-size: 11px; }
  .bento-update { grid-column: 2; grid-row: 4; }
  .bento-update button,.bento-update__empty { padding: 9px; }
  .bento-update strong { font-size: 11px; }
  .bento-update button > span:last-child { display: none; }
  .bento-statusbar { padding-inline: 5px; }
  .bento-statusbar > span,.bento-statusbar > div { display: none; }
  .bento-statusbar a { margin-left: auto; }

  .viewport-layout.layout-04 { grid-template-rows: 46px minmax(0,1fr) 22px; }
  .index-masthead,.index-footer { grid-template-columns: 1fr auto; padding-inline: 12px; }
  .index-masthead > p,.index-footer > span,.index-footer p { display: none; }
  .index-spread { grid-template-columns: 1fr; grid-template-rows: minmax(130px,27%) minmax(0,1fr); }
  .index-cover { padding: 12px 16px; border-right: 0; border-bottom: 1px solid rgba(24,19,14,.28); }
  .index-cover::before { width: 45vw; height: 45vw; right: -10%; left: auto; bottom: -50%; border-width: 16px; }
  .index-cover__kicker { margin-bottom: 6px; }
  .index-cover h1 { font-size: clamp(30px,10vw,42px); line-height: .82; }
  .index-cover h1 br:first-of-type { display: none; }
  .index-cover__lead { display: none; }
  .index-cover__folio { right: 16px; }
  .index-cover__folio i { height: 36px; }
  .index-promo { position: absolute; right: 54px; bottom: 10px; width: 128px; min-height: 40px; margin: 0; padding: 7px 9px; }
  .index-promo strong { display: none; }
  .index-band__selector { min-height: 48px; grid-template-columns: 35px 1fr 32px; padding: 7px 13px; }
  .index-band__identity { grid-template-columns: minmax(55px,.5fr) 1fr; gap: 7px; }
  .index-band__identity small { display: none; }
  .index-band__number { font-size: 20px; }
  .index-band__identity strong { font-size: 16px; }
  .index-band__toggle { width: 30px; height: 30px; }
  .index-band__panel { grid-template-columns: minmax(0,1fr) 46px; gap: 5px 8px; padding: 0 13px 8px 48px; }
  .index-band__copy h2 { font-size: clamp(15px,4.8vw,20px); }
  .index-band__copy p { -webkit-line-clamp: 1; font-size: 8px; }
  .index-band__features { display: none; }
  .index-band__panel a { width: 44px; height: 44px; min-height: 44px; padding: 0; justify-content: center; overflow: hidden; font-size: 0; }
  .index-band__panel a i { font-size: 17px; }
  .index-footer a { margin-left: auto; }

  .viewport-layout.layout-05 { grid-template-rows: 48px minmax(0,1fr) 24px; }
  .stage-masthead,.stage-footer { padding-inline: 12px; }
  .stage-masthead > p { display: none; }
  .stage-promo { margin-left: auto; max-width: 96px; }
  .stage-promo strong { display: none; }
  .stage-scene { grid-template-columns: 1fr; grid-template-rows: minmax(100px,21%) minmax(210px,47%) minmax(130px,32%); }
  .stage-rail { display: none; }
  .stage-intro { justify-content: center; padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,.11); }
  .stage-intro > p { margin-bottom: 6px; }
  .stage-intro h1 { font-size: clamp(29px,10vw,42px); line-height: .83; }
  .stage-intro h1 br:first-of-type { display: none; }
  .stage-intro > span { position: absolute; right: 16px; bottom: 13px; width: 15ch; text-align: right; }
  .stage-deck { grid-row: 2; }
  .stage-card { width: min(58vw,220px); height: min(88%,250px); min-height: 170px; padding: 12px; border-radius: 18px; }
  .stage-card:nth-child(1) { transform: translate(-68%,-50%) rotate(-8deg) scale(.88); }
  .stage-card:nth-child(2) { transform: translate(-32%,-52%) rotate(8deg) scale(.88); }
  .stage-card:nth-child(3) { transform: translate(-50%,-43%) rotate(11deg) scale(.88); }
  .stage-card.is-active { transform: translate(-50%,-51%) rotate(0) scale(1); }
  .stage-card__top i { width: 30px; height: 30px; }
  .stage-card__identity { left: 12px; right: 12px; bottom: 45px; }
  .stage-card__identity strong { font-size: 25px; }
  .stage-card__hint { left: 12px; right: 12px; bottom: 11px; }
  .stage-copy { grid-row: 3; align-items: center; padding: 9px 14px; border-left: 0; border-top: 1px solid rgba(255,255,255,.12); }
  .stage-panel { display: grid; grid-template-columns: minmax(0,1fr) 48px; gap: 3px 9px; align-items: center; }
  .stage-panel__tag { grid-column: 1; }
  .stage-panel h2 { grid-column: 1; margin: 2px 0 0; font-size: clamp(17px,5.4vw,23px); }
  .stage-panel p,.stage-panel__features { display: none; }
  .stage-panel a { grid-column: 2; grid-row: 1 / 3; width: 46px; height: 46px; min-height: 46px; margin: 0; padding: 0; justify-content: center; border-radius: 50%; overflow: hidden; font-size: 0; }
  .stage-panel a i { font-size: 18px; }
  .stage-controls { left: 0; bottom: calc(32% + 8px); width: 100%; justify-content: space-between; padding-inline: 12px; pointer-events: none; }
  .stage-controls button { pointer-events: auto; }
  .stage-controls > div { display: none; }
  .stage-footer > span,.stage-footer > div { display: none; }
  .stage-footer > a { margin-left: auto; }
}

@media (max-height: 680px) {
  .gate-eyebrow,.gate-intro__hint,.gate-panel__body p,.gate-panel__features,
  .orbit-intro > p,.orbit-intro > span,.orbit-panel p,.orbit-panel__footer > div,
  .bento-hero__lead,.bento-product__copy p,.bento-product__chips,
  .index-cover__kicker,.index-cover__lead,.index-band__copy p,.index-band__features,
  .stage-intro > p,.stage-intro > span,.stage-panel p,.stage-panel__features { display: none; }
  .gate-intro > p:not(.gate-eyebrow) { -webkit-line-clamp: 1; }
  .gate-panel__cta,.orbit-panel__footer a,.stage-panel a { margin-top: 8px; }
}

@media (max-width: 360px), (max-height: 580px) {
  .gate-brand,.orbit-brand,.bento-brand,.index-brand,.stage-brand { font-size: 16px; }
  .gate-canvas { grid-template-rows: minmax(104px,25%) minmax(0,1fr); }
  .gate-intro > p:not(.gate-eyebrow) { display: none; }
  .orbit-canvas { grid-template-rows: minmax(84px,19%) minmax(180px,50%) minmax(105px,31%); }
  .orbit-hub { width: 84px; }
  .orbit-node { width: 86px; min-height: 46px; }
  .bento-board { grid-template-rows: 1.05fr .8fr .8fr .48fr; }
  .bento-network strong,.bento-update strong { font-size: 9px; }
  .index-spread { grid-template-rows: minmax(105px,23%) minmax(0,1fr); }
  .index-cover h1 { font-size: 28px; }
  .index-promo {
    right: 52px;
    bottom: 8px;
    width: 44px;
    height: 44px;
    min-height: 44px;
    display: grid;
    place-items: center;
    margin: 0;
    padding: 0;
  }
  .index-promo span,.index-promo strong { display: none; }
  .index-promo i { font-size: 16px; }
  .stage-scene { grid-template-rows: minmax(82px,18%) minmax(180px,52%) minmax(100px,30%); }
  .stage-card { height: 88%; min-height: 150px; }
}

/* Short landscape phones have horizontal room but very little height. Restore
   side-by-side compositions so each active destination stays on-screen. */
@media (min-width: 500px) and (max-width: 767px) and (max-height: 430px) {
  .orbit-canvas {
    grid-template-columns: 140px minmax(0,1fr) 205px;
    grid-template-rows: minmax(0,1fr);
  }
  .orbit-intro {
    justify-content: center;
    padding: 12px 14px;
    border-right: 1px solid rgba(90,243,255,.12);
    border-bottom: 0;
  }
  .orbit-intro h1 { font-size: clamp(27px,4.6vw,34px); }
  .orbit-map { width: min(100%,72dvh); }
  .orbit-readout { padding: 12px; border-top: 0; border-left: 1px solid rgba(90,243,255,.12); }

  .index-spread {
    grid-template-columns: 180px minmax(0,1fr);
    grid-template-rows: minmax(0,1fr);
  }
  .index-cover {
    padding: 12px 14px;
    border-right: 1px solid rgba(24,19,14,.28);
    border-bottom: 0;
  }
  .index-cover h1 { font-size: 28px; }

  .stage-scene {
    grid-template-columns: 112px minmax(0,1fr) 205px;
    grid-template-rows: minmax(0,1fr);
  }
  .stage-intro {
    grid-column: 1;
    grid-row: 1;
    justify-content: center;
    padding: 12px 14px;
    border-right: 1px solid rgba(255,255,255,.11);
    border-bottom: 0;
  }
  .stage-intro h1 { font-size: clamp(27px,4.8vw,34px); }
  .stage-deck { grid-column: 2; grid-row: 1; }
  .stage-card { width: min(72%,225px); height: min(72%,220px); min-height: 0; }
  .stage-copy { grid-column: 3; grid-row: 1; padding: 12px; border-top: 0; border-left: 1px solid rgba(255,255,255,.12); }
  .stage-panel { display: block; }
  .stage-panel h2 { margin-top: 6px; font-size: clamp(18px,2.8vw,23px); }
  .stage-panel a { width: 100%; height: 44px; min-height: 44px; margin-top: 12px; padding: 8px 10px; border-radius: 10px; font-size: 9px; }
  .stage-controls { left: 112px; bottom: 8px; width: calc(100% - 317px); padding-inline: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* At extreme browser zoom the CSS viewport can be only ~200px tall. Permit
   reflow there so keyboard and low-vision users never lose the destinations. */
@media (max-width: 499px) and (max-height: 300px) {
  html, body { overflow-y: auto; }
  .viewport-shell,.viewport-layout { height: auto; min-height: 560px; overflow: visible; }
}