/* ── DETAIL PAGES ─────────────────────────────
   Tech (tap-through story), Logo (vertical reels + brand kit), Speakers (white bento).
   All three open as a circle from the tapped item, like the reels feed. */
.detail {
  --ox: 50%; --oy: 100%;
  --blue-bg:
    radial-gradient(90% 55% at 100% 0%, rgba(255, 255, 255, .26), transparent 62%),
    radial-gradient(80% 50% at 0% 100%, rgba(0, 110, 175, .45), transparent 70%),
    var(--blue);
  --top-pad: calc(16px + env(safe-area-inset-top));
  position: absolute; inset: 0; z-index: 20;
  overflow: hidden; isolation: isolate;
  animation: detail-in .62s var(--ease) both;
}
.detail[hidden] { display: none; }
.detail.is-closing { animation: detail-out .38s cubic-bezier(.7, 0, .84, 0) both; }
@keyframes detail-in { from { clip-path: circle(0 at var(--ox) var(--oy)); } to { clip-path: circle(150% at var(--ox) var(--oy)); } }
@keyframes detail-out { from { clip-path: circle(150% at var(--ox) var(--oy)); } to { clip-path: circle(0 at var(--ox) var(--oy)); } }

.detail-top {
  position: absolute; inset: 0 0 auto; z-index: 6;
  display: flex; align-items: center; gap: 14px;
  padding: calc(var(--top-pad) + 8px) 20px 0;
  pointer-events: none;
}
.detail-back {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; font-size: 22px;
  background: rgba(255, 255, 255, .2); color: var(--white);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  pointer-events: auto;
  transition: background .25s, color .25s, transform .2s var(--ease);
}
.detail-back:hover { background: var(--white); color: var(--blue); }
.detail-back:active { transform: scale(.9); }

.detail-toast {
  position: absolute; left: 50%; top: calc(var(--top-pad) + 70px); z-index: 12;
  padding: 8px 16px; border-radius: 999px;
  background: var(--white); color: var(--blue);
  font-size: 13px; font-weight: 800; pointer-events: none;
  transform: translateX(-50%); opacity: 0; transition: opacity .3s;
  box-shadow: 0 10px 24px -12px var(--shadow-blue);
}
.detail-toast.is-on { opacity: 1; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── TECH: story screens ───────────────────── */
.story { background: var(--white); color: var(--navy); }
.story[data-tone="white"] .detail-back { background: var(--dock-pill); color: var(--navy); }
.story[data-tone="white"] .detail-back:hover { background: var(--blue); color: var(--white); }

.st-stage { position: absolute; inset: 0; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.st-screen {
  position: absolute; inset: 0; overflow: hidden; isolation: isolate;
  opacity: 0; visibility: hidden; transform: translateX(32px);
  transition: opacity .4s var(--ease), transform .6s var(--ease), visibility 0s .6s;
}
.st-screen.is-before { transform: translateX(-32px); }
.st-screen.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .4s var(--ease), transform .6s var(--ease); }
.st-blue { background: var(--blue-bg); color: var(--white); }

.st-seg { position: absolute; z-index: 7; top: calc(var(--top-pad) - 6px); left: 20px; right: 20px; display: flex; gap: 4px; }
.st-seg i { position: relative; flex: 1; height: 3px; border-radius: 2px; overflow: hidden; background: rgba(255, 255, 255, .35); }
.st-seg i::before {
  content: ""; position: absolute; inset: 0; background: var(--white);
  transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease);
}
.st-seg i.is-on::before { transform: none; }
.story[data-tone="white"] .st-seg i { background: #d6e4ea; }
.story[data-tone="white"] .st-seg i::before { background: var(--blue); }

.st-step {
  margin-left: auto; padding: 6px 12px; border-radius: 999px;
  border: 1.5px solid rgba(255, 255, 255, .6); color: var(--white);
  font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
}
.story[data-tone="white"] .st-step { border-color: transparent; background: var(--blue); }

.st-chip {
  display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 999px;
  background: var(--white); color: var(--blue);
  font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
}
.st-chip.is-line { background: transparent; border: 1.5px solid rgba(255, 255, 255, .6); color: var(--white); }
.st-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.st-label { display: block; margin-bottom: 10px; font-size: 11.5px; font-weight: 800; letter-spacing: .16em; color: var(--blue-deep); }
.st-blue .st-label { color: var(--soft); }

/* 1 · cover: blue hero with the same curved corner as the panel */
.st-hero {
  position: relative; height: 60%; overflow: hidden;
  padding: calc(var(--top-pad) + 86px) 28px 0;
  border-radius: 0 0 0 var(--curve);
  background: var(--blue-bg); color: var(--white);
}
.st-title { margin: 16px 0; max-width: 11ch; font-size: clamp(32px, 9.5vw, 40px); font-weight: 800; line-height: 1.04; letter-spacing: -.025em; }
.st-ghost {
  position: absolute; right: 20px; bottom: -.14em;
  font-size: 128px; font-weight: 800; line-height: 1; letter-spacing: -.04em;
  color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, .45);
  pointer-events: none;
}
.st-body { padding: 30px 28px 0; }
.st-lead { max-width: 30ch; font-size: 17px; font-weight: 600; line-height: 1.5; color: #3d5f6d; }

/* 2 / 4 · story and impact: big outlined number, sharp headline */
.st-pad { position: absolute; inset: 0; display: flex; flex-direction: column; padding: calc(var(--top-pad) + 92px) 28px 120px; overflow-y: auto; scrollbar-width: none; }
.st-num { font-size: 96px; font-weight: 800; line-height: .85; letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, .6); }
.st-h { margin: 22px 0 14px; max-width: 13ch; font-size: clamp(27px, 8vw, 33px); font-weight: 800; line-height: 1.1; letter-spacing: -.02em; }
.st-h--sm { margin: 0 0 18px; font-size: 26px; max-width: none; }
.st-text { max-width: 32ch; font-size: 16px; font-weight: 500; line-height: 1.6; color: rgba(255, 255, 255, .92); }
.st-pad .st-ghost { right: 16px; bottom: 96px; z-index: -1; -webkit-text-stroke-color: rgba(255, 255, 255, .22); }
.st-impact { display: grid; gap: 10px; margin-top: 8px; }
.st-impact li { padding: 16px 18px; border-radius: 22px; background: var(--white); color: var(--navy); box-shadow: 0 18px 30px -18px var(--shadow-blue); }
.st-impact strong { display: block; font-size: 46px; font-weight: 800; line-height: 1; letter-spacing: -.04em; color: var(--blue); }
.st-impact span { display: block; margin-top: 6px; font-size: 13.5px; font-weight: 700; }

/* 3 · what was built: the product on a phone over a blue blob */
.st-blob {
  position: relative; height: 56%;
  display: grid; place-items: center; padding-top: calc(var(--top-pad) + 40px);
  border-radius: 0 0 0 var(--curve); background: var(--blue-bg);
}
.st-device {
  width: 150px; aspect-ratio: 9 / 18; padding: 7px; border-radius: 30px;
  background: var(--white); transform: rotate(-5deg);
  box-shadow: 0 30px 40px -20px rgba(0, 60, 100, .6);
}
.st-browser {
  width: calc(100% - 40px); max-width: 340px; overflow: hidden;
  border-radius: 16px; background: var(--white); transform: rotate(-3deg);
  box-shadow: 0 30px 40px -20px rgba(0, 60, 100, .6);
}
.st-browser-bar { display: flex; gap: 5px; padding: 9px 12px; }
.st-browser-bar i { width: 8px; height: 8px; border-radius: 50%; background: #d6e4ea; }
.st-browser-bar i:first-child { background: var(--blue); }
.st-browser img { display: block; width: 100%; height: auto; }
.st-device-screen { height: 100%; border-radius: 24px; overflow: hidden; background: var(--dock-pill); }
.st-device-mark { height: 100%; display: flex; flex-direction: column; gap: 8px; padding: 18px 14px; }
.st-device-icon { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font-size: 20px; background: var(--blue); color: var(--white); }
.st-device-mark b { margin-top: 6px; font-size: 26px; font-weight: 800; letter-spacing: -.03em; color: var(--blue); }
.st-device-mark i { display: block; height: 8px; border-radius: 4px; background: #dbe7ed; }
.st-device-mark i:nth-of-type(2) { width: 70%; }
.st-device-mark i.is-cta { height: 22px; margin-top: auto; border-radius: 999px; background: var(--blue); }
.st-built-list { display: flex; flex-wrap: wrap; gap: 8px; }
.st-built-list li { padding: 10px 15px; border-radius: 999px; background: var(--dock-pill); font-size: 14px; font-weight: 700; }
.st-built-list li:first-child { background: var(--blue); color: var(--white); }

/* 5 · detail: spec rows and links */
.st-detail { background: var(--white); }
.st-spec { display: grid; grid-template-columns: 38% 1fr; margin-bottom: 20px; }
.st-spec dt, .st-spec dd { padding: 11px 0; border-bottom: 1.5px solid #e3ecf0; font-size: 14px; font-weight: 700; }
.st-spec dt { color: #5c7885; }
.st-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.st-btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 20px;
  border-radius: 999px; background: var(--blue); color: var(--white);
  font-size: 14px; font-weight: 800;
  transition: transform .3s var(--ease);
}
.st-btn:hover { transform: translateY(-2px); }
.st-btn .i { font-size: 17px; }
.st-btn--line { background: transparent; color: var(--blue); border: 1.5px solid var(--blue); }

/* bottom nav: back, position / hint, forward */
.st-nav {
  position: absolute; z-index: 6; left: 20px; right: 20px; bottom: calc(22px + env(safe-area-inset-bottom));
  display: flex; align-items: center; justify-content: space-between; pointer-events: none;
}
.st-arrow {
  width: 48px; height: 48px; border-radius: 50%; pointer-events: auto;
  display: grid; place-items: center; font-size: 22px;
  background: rgba(255, 255, 255, .22); color: var(--white);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: opacity .25s, background .25s, transform .2s var(--ease);
}
.st-arrow:disabled { opacity: 0; pointer-events: none; }
.st-arrow[hidden] { display: grid; visibility: hidden; } /* keeps its slot, leaves the tab order */
.st-arrow--next { background: var(--white); color: var(--blue); box-shadow: 0 12px 22px -12px var(--shadow-blue); animation: nudge 1.8s var(--ease) infinite; }
/* data-base: colour under the bottom nav (the cover and build screens end in white) */
.story[data-base="white"] .st-arrow { background: var(--dock-pill); color: var(--navy); }
.story[data-base="white"] .st-arrow--next { background: var(--blue); color: var(--white); }
.st-hint { font-size: 11.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--soft); }
.story[data-base="white"] .st-hint { color: #5c7885; }

/* the active screen's content rises in, a beat apart */
.story .st-screen.is-on :is(.st-chip, .st-title, .st-chips, .st-lead, .st-h, .st-text, .st-num, .st-impact li, .st-built-list li, .st-device, .st-spec, .st-actions, .st-label) {
  animation: st-rise .6s var(--ease) both;
}
.story .st-screen.is-on :is(.st-title, .st-h) { animation-delay: .06s; }
.story .st-screen.is-on :is(.st-chips, .st-text, .st-built-list li, .st-spec) { animation-delay: .12s; }
.story .st-screen.is-on :is(.st-lead, .st-impact li, .st-actions) { animation-delay: .18s; }
@keyframes st-rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes st-device { from { opacity: 0; transform: rotate(4deg) translateY(30px); } }

/* after landing, the product keeps breathing: a slow float, the screenshot drifts inside its window */
.story .st-screen.is-on .st-device { animation: st-device .6s var(--ease) both, st-float-phone 6s ease-in-out .6s infinite; }
.story .st-screen.is-on .st-browser { animation: st-device .6s var(--ease) both, st-float-web 6s ease-in-out .6s infinite; }
.story .st-screen.is-on .st-browser img { animation: st-pan 14s ease-in-out infinite alternate; }
.story .st-screen.is-on .st-ghost { animation: st-ghost 1.1s var(--ease) .1s both; }
.story .st-screen.is-on .st-num { animation: st-num .9s var(--ease) both; }
@keyframes st-float-phone { 0%, 100% { transform: rotate(-5deg) translateY(0); } 50% { transform: rotate(-3deg) translateY(-8px); } }
@keyframes st-float-web { 0%, 100% { transform: rotate(-3deg) translateY(0); } 50% { transform: rotate(-1.5deg) translateY(-7px); } }
@keyframes st-pan { from { transform: scale(1); } to { transform: scale(1.08) translateY(-2%); } }
@keyframes st-ghost { from { opacity: 0; transform: translateX(40%); } }
@keyframes st-num { from { opacity: 0; transform: translateY(30px) scale(.9); } }
.st-browser { position: relative; }
.st-browser img { transform-origin: 50% 0; }

/* ── LOGO: one logo per screen, brand kit on the fan button ── */
.logos { background: var(--blue-deep); color: var(--white); }
.lg-scroll {
  position: absolute; inset: 0;
  overflow-y: auto; overscroll-behavior: contain;
  scroll-snap-type: y mandatory; scrollbar-width: none; outline: none;
}
.lg-scroll::-webkit-scrollbar { display: none; }
.lg-item {
  position: relative; height: 100%; overflow: hidden; isolation: isolate;
  scroll-snap-align: start; scroll-snap-stop: always;
  background: var(--blue-bg);
}
.lg-stage { position: absolute; inset: 0; display: grid; place-items: center; }
.lg-stage video { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: contain; }
.lg-ring {
  position: absolute; top: 40%; left: 50%; width: 330px; height: 330px; margin: -165px 0 0 -165px;
  border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .2); pointer-events: none;
}
.lg-ring--dash { width: 220px; height: 220px; margin: -110px 0 0 -110px; border-style: dashed; border-color: rgba(255, 255, 255, .26); }
.lg-item.is-active .lg-ring--dash { animation: spin 30s linear infinite; }
.lg-item.is-active .lg-ring:not(.lg-ring--dash) { animation: lg-pulse 4s ease-in-out infinite; }
@keyframes lg-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.06); opacity: .55; } }

/* wordmark stand-in until the real logo file or motion arrives; 4 treatments like the hub's logo wall */
.lg-mark { --size: clamp(40px, 12.5vw, 54px); display: block; max-width: 9ch; text-align: center; font-size: calc(var(--size) * var(--fit, 1)); font-weight: 800; line-height: 1; letter-spacing: -.03em; }
.lg-stage .lg-mark { position: relative; margin-top: -20%; text-shadow: 0 18px 40px rgba(0, 80, 130, .35); }
.lg-mark--0 { --size: clamp(30px, 9vw, 40px); text-transform: uppercase; letter-spacing: .1em; max-width: none; }
.lg-mark--1 { font-style: italic; letter-spacing: -.04em; }
.lg-mark--2 { font-weight: 600; text-transform: lowercase; }
.lg-mark--3 { letter-spacing: .03em; }
.lg-item.is-active .lg-stage .lg-mark { animation: lg-mark-in .9s var(--ease) both, lg-float 7s ease-in-out .9s infinite; }
.lg-item.is-active .lg-info > * { animation: st-rise .6s var(--ease) both; }
.lg-item.is-active .lg-info > :nth-child(2) { animation-delay: .08s; }
.lg-item.is-active .lg-info > :nth-child(3) { animation-delay: .16s; }
.lg-item.is-active .lg-rail { animation: st-rise .6s var(--ease) .2s both; }
@keyframes lg-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes lg-mark-in { from { opacity: 0; transform: translateY(24px) scale(.94); } }

.lg-shade { position: absolute; inset: 46% 0 0; z-index: 2; pointer-events: none; background: linear-gradient(to top, rgba(0, 110, 175, .92), transparent); }
.lg-info { position: absolute; z-index: 4; left: 22px; right: 92px; bottom: calc(112px + env(safe-area-inset-bottom)); display: grid; gap: 8px; justify-items: start; }
.lg-chips { display: flex; align-items: center; gap: 6px; }
.lg-chip { padding: 5px 11px; border-radius: 999px; background: var(--white); color: var(--blue); font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.lg-chip--line { background: transparent; border: 1.5px solid rgba(255, 255, 255, .6); color: var(--white); }
.lg-dots { display: inline-flex; }
.lg-dots b { width: 14px; height: 14px; margin-left: -5px; border-radius: 50%; border: 2px solid var(--white); }
.lg-dots b:first-child { margin-left: 0; }
.lg-name { font-size: 30px; font-weight: 800; line-height: 1.05; letter-spacing: -.03em; }
.lg-desc { max-width: 30ch; font-size: 14px; font-weight: 500; line-height: 1.5; color: rgba(255, 255, 255, .92); }
.lg-rail { position: absolute; z-index: 4; right: 14px; bottom: calc(112px + env(safe-area-inset-bottom)); display: grid; gap: 16px; justify-items: center; }

/* Brand button: three swatch cards that fan open, like a colour book */
.lg-fan { position: relative; display: block; width: 46px; height: 46px; }
.lg-fan b {
  position: absolute; left: 13px; bottom: 2px; width: 20px; height: 38px;
  border-radius: 7px; border: 2px solid var(--white);
  transform-origin: 50% 100%;
  box-shadow: 0 6px 12px -6px rgba(0, 60, 100, .5);
  transition: transform .5s var(--ease);
}
.lg-fan b:nth-child(1) { background: var(--c3); --r: -28deg; }
.lg-fan b:nth-child(2) { background: var(--c2); --r: 0deg; }
.lg-fan b:nth-child(3) { background: var(--c1); --r: 28deg; }
.lg-item.is-active .lg-fan b { animation: fan 3.4s var(--ease) 1s infinite; }
.lg-brand:hover .lg-fan b, .lg-brand:focus-visible .lg-fan b { animation: none; transform: rotate(var(--r)); }
.lg-brand:active .lg-fan { transform: scale(.9); }
@keyframes fan { 0%, 12% { transform: none; } 38%, 72% { transform: rotate(var(--r)); } 100% { transform: none; } }

.lg-head { margin-left: auto; text-align: right; }
.lg-kicker { display: block; margin-bottom: 6px; font-size: 11.5px; font-weight: 800; letter-spacing: .16em; color: var(--soft); }
.lg-meter { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; }
.lg-meter i { position: relative; width: 70px; height: 2px; border-radius: 2px; overflow: hidden; background: rgba(255, 255, 255, .35); }
.lg-meter i::before { content: ""; position: absolute; inset: 0; background: var(--white); transform-origin: left; transform: scaleX(var(--lp, .125)); transition: transform .5s var(--ease); }

/* jump strip: one monogram per logo */
.lg-film {
  position: absolute; z-index: 5; left: 0; right: 0; bottom: calc(28px + env(safe-area-inset-bottom));
  display: flex; gap: 6px; padding: 6px 22px; overflow-x: auto; scrollbar-width: none;
}
.lg-film::-webkit-scrollbar { display: none; }
.lg-film button {
  flex: none; width: 46px; height: 52px; border-radius: 12px;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .16); color: var(--white);
  font-size: 12px; font-weight: 800; letter-spacing: .02em;
  transition: background .3s var(--ease), color .3s, transform .35s var(--ease);
}
.lg-film button:hover { background: rgba(255, 255, 255, .3); }
.lg-film button[aria-current="true"] { background: var(--white); color: var(--blue); transform: translateY(-4px); box-shadow: 0 10px 18px -10px rgba(0, 60, 100, .6); }

/* brand kit sheet */
.lg-scrim { position: absolute; inset: 0; z-index: 8; background: rgba(0, 110, 175, .4); opacity: 0; transition: opacity .4s; }
.lg-sheet {
  position: absolute; z-index: 9; left: 0; right: 0; bottom: 0; max-height: 84%;
  display: flex; flex-direction: column;
  background: var(--white); color: var(--navy);
  border-radius: 32px 32px 0 0; overflow: hidden; outline: none;
  transform: translateY(102%); transition: transform .45s var(--ease);
  box-shadow: 0 -24px 40px -20px rgba(0, 60, 100, .5);
}
.lg-sheet[hidden], .lg-scrim[hidden] { display: none; } /* closed sheet is out of the tab order */
.logos.is-sheet .lg-scrim { opacity: 1; }
.logos.is-sheet .lg-sheet { transform: none; }
.lg-grab { position: absolute; z-index: 2; top: 9px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: rgba(255, 255, 255, .75); }
.lg-sheet-inner { flex: 1; overflow-y: auto; scrollbar-width: none; }
.lg-stripes { display: flex; height: 150px; }
.lg-stripes div {
  position: relative; flex: 1; display: flex; align-items: flex-end; padding: 10px 8px; color: var(--white);
  transform-origin: top; transform: scaleY(0);
}
.lg-stripes div:first-child { flex: 2.2; padding: 10px 14px; }
.lg-stripes strong { position: absolute; left: 14px; top: 26px; font-size: 11.5px; font-weight: 800; letter-spacing: .16em; }
.lg-stripes span { font-size: 9px; font-weight: 800; letter-spacing: .1em; writing-mode: vertical-rl; transform: rotate(180deg); mix-blend-mode: difference; }
.lg-stripes div:first-child span { writing-mode: horizontal-tb; transform: none; font-size: 10px; mix-blend-mode: normal; }
.logos.is-sheet .lg-stripes div { animation: drop .8s var(--ease) both; }
.logos.is-sheet .lg-stripes div:nth-child(2) { animation-delay: .07s; }
.logos.is-sheet .lg-stripes div:nth-child(3) { animation-delay: .14s; }
.logos.is-sheet .lg-stripes div:nth-child(4) { animation-delay: .21s; }
@keyframes drop { from { transform: scaleY(0); } to { transform: none; } }
.lg-sheet-cover { position: relative; display: grid; place-items: center; height: 150px; background: var(--blue-bg); color: var(--white); overflow: hidden; }
.lg-sheet-cover strong { position: absolute; left: 20px; top: 26px; font-size: 11.5px; font-weight: 800; letter-spacing: .16em; color: var(--soft); }
.lg-sheet-cover .lg-mark { --size: 34px; margin-top: 10px; }
.logos.is-sheet .lg-sheet-cover .lg-mark { animation: lg-mark-in .8s var(--ease) .1s both; }
.lg-sheet-body { padding: 18px 22px 8px; }
.lg-k { display: block; margin: 16px 0 8px; font-size: 11.5px; font-weight: 800; letter-spacing: .16em; color: var(--blue-deep); }
.lg-k:first-child { margin-top: 0; }
.lg-sheet-name { font-size: 24px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.lg-sheet-desc { margin-top: 6px; font-size: 14px; font-weight: 500; line-height: 1.55; color: #5c7885; }
.lg-lock { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lg-lock div { display: grid; place-items: center; min-height: 86px; padding: 10px; border-radius: 18px; overflow: hidden; }
.lg-lock .lg-mark { --size: 19px; max-width: 100%; }
.lg-lock-light { border: 1.5px solid #e3ecf0; }
.lg-lock-dark { color: var(--white); }
.lg-sheet-foot { display: flex; gap: 8px; padding: 12px 18px calc(16px + env(safe-area-inset-bottom)); }
.lg-sheet-btn {
  flex: .6; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; border-radius: 999px; background: var(--dock-pill); color: var(--navy);
  font-size: 14px; font-weight: 800; transition: transform .2s var(--ease);
}
.lg-sheet-btn--main { flex: 1; background: var(--blue); color: var(--white); }
.lg-sheet-btn:active { transform: scale(.97); }

/* ── SPEAKERS: white bento ───────────────────── */
.talks { background: var(--white); color: var(--navy); }
.talks .detail-back { background: var(--dock-pill); color: var(--navy); }
.talks .detail-back:hover { background: var(--blue); color: var(--white); }
.talks .detail-top { padding-bottom: 14px; background: linear-gradient(var(--white) 70%, rgba(255, 255, 255, 0)); }
.tk-meter { display: flex; align-items: center; gap: 10px; margin-left: auto; font-size: 12px; font-weight: 800; }
.tk-meter i { position: relative; width: 80px; height: 2px; border-radius: 2px; overflow: hidden; background: #d6e4ea; }
.tk-meter i::before { content: ""; position: absolute; inset: 0; background: var(--blue); transform-origin: left; transform: scaleX(var(--tp, .125)); transition: transform .5s var(--ease); }

.tk-scroll { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; padding: calc(var(--top-pad) + 74px) 16px calc(116px + env(safe-area-inset-bottom)); }
.tk-scroll::-webkit-scrollbar { display: none; }
.tk-bento { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tk-card {
  position: relative; overflow: hidden; padding: 16px; border-radius: 24px;
  animation: tk-in .6s var(--ease) both; animation-delay: calc(var(--n, 0) * 55ms);
}
@keyframes tk-in { from { opacity: 0; transform: translateY(18px) scale(.98); } }
.tk-wide { grid-column: span 2; }
.tk-card:not(.tk-hero) { transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.tk-card:not(.tk-hero):hover { transform: translateY(-3px); box-shadow: 0 16px 28px -18px var(--shadow-blue); }
.tk-k { display: block; font-size: 11.5px; font-weight: 800; letter-spacing: .16em; color: #5c7885; }

.tk-hero { min-height: 260px; padding: 0; color: var(--white); background: var(--blue-bg); display: flex; }
.tk-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 110, 175, .92), rgba(0, 110, 175, .3) 48%, transparent 72%); pointer-events: none; }
.tk-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tk-mark {
  position: absolute; top: 18px; left: 18px; right: 18px;
  font-size: clamp(54px, 17vw, 76px); font-weight: 800; line-height: .95; letter-spacing: -.04em;
  color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, .7); overflow-wrap: anywhere;
}
.tk-hero .tk-mark { animation: tk-drift 9s ease-in-out .6s infinite alternate; }
.tk-hero .tk-photo { animation: st-pan 16s ease-in-out infinite alternate; }
@keyframes tk-drift { from { transform: translateX(0); } to { transform: translateX(-14px); } }
.tk-cap { position: relative; z-index: 2; align-self: flex-end; padding: 18px; }
.tk-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tk-chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: 999px; background: var(--white); color: var(--blue); font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.tk-chip--line { background: transparent; border: 1.5px solid rgba(255, 255, 255, .6); color: var(--white); }
.tk-title { margin-top: 10px; font-size: 23px; font-weight: 800; line-height: 1.12; letter-spacing: -.02em; }
.tk-host { margin-top: 4px; font-size: 13px; font-weight: 700; color: rgba(255, 255, 255, .85); }

.tk-num { min-height: 108px; background: var(--blue); color: var(--white); }
.tk-num strong { display: block; font-size: 40px; font-weight: 800; line-height: 1; letter-spacing: -.04em; }
.tk-num > span:not(.tk-ghost) { display: flex; align-items: center; gap: 5px; margin-top: 6px; font-size: 12px; font-weight: 700; }
.tk-ghost { position: absolute; right: -6px; bottom: -18px; font-size: 80px; font-weight: 800; letter-spacing: -.05em; line-height: 1; color: transparent; -webkit-text-stroke: 1.2px rgba(255, 255, 255, .25); }
.tk-photo2 { min-height: 108px; padding: 0; background: var(--dock-pill); }
.tk-fact { background: var(--dock-pill); }
.tk-fact b { display: block; margin-top: 3px; font-size: 15px; font-weight: 800; line-height: 1.25; }
.tk-ic { width: 32px; height: 32px; margin-bottom: 10px; border-radius: 10px; display: grid; place-items: center; font-size: 17px; background: var(--white); color: var(--blue); }
/* a fact card left alone on its row lies flat: icon beside the text */
.tk-fact.tk-wide { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; }
.tk-fact.tk-wide .tk-ic { grid-row: span 2; margin: 0; }
.tk-desc { border: 1.5px solid #e3ecf0; }
.tk-desc p { margin-top: 8px; font-size: 14.5px; font-weight: 500; line-height: 1.6; color: #5c7885; }
.tk-mat { background: linear-gradient(135deg, #e5f5fd, #f2fafe); }
.tk-mat ol { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.tk-mat li { display: flex; align-items: center; gap: 6px; padding: 5px 12px 5px 5px; border-radius: 999px; background: var(--white); font-size: 13px; font-weight: 800; }
.tk-mat li b { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--blue); color: var(--white); font-size: 11px; }

.tk-cta { position: absolute; z-index: 5; left: 0; right: 0; bottom: 0; padding: 30px 16px calc(16px + env(safe-area-inset-bottom)); background: linear-gradient(to top, var(--white) 60%, rgba(255, 255, 255, 0)); }
.tk-collab {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: space-between;
  height: 60px; padding: 0 7px 0 24px; border-radius: 999px;
  background: var(--blue); color: var(--white);
  font-size: 14px; font-weight: 800; letter-spacing: .16em;
  box-shadow: 0 16px 28px -14px rgba(0, 120, 180, .75);
  transition: transform .3s var(--ease);
}
.tk-collab::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%); transform: translateX(-100%); animation: shine 3.6s ease-in-out infinite; }
.tk-collab:hover { transform: translateY(-2px); }
.tk-collab-go { position: relative; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--white); color: var(--blue); font-size: 20px; transition: transform .3s var(--ease); }
.tk-collab:hover .tk-collab-go { transform: translateX(3px); }
@keyframes shine { 0%, 55% { transform: translateX(-100%); } 85%, 100% { transform: translateX(100%); } }

.detail :focus-visible { outline-color: var(--blue); }
.detail.logos :focus-visible, .story[data-tone="blue"] .detail-top :focus-visible { outline-color: var(--white); }

@media (max-height: 640px) {
  .st-hero { height: 64%; padding-top: calc(var(--top-pad) + 70px); }
  .st-ghost { font-size: 96px; }
  .lg-info, .lg-rail { bottom: calc(96px + env(safe-area-inset-bottom)); }
  .lg-film button { height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .detail, .detail.is-closing { animation: none; }
  .detail *, .detail *::before { animation: none !important; transition-duration: 0s !important; }
  .lg-stripes div { transform: none; }
}