/* Multi's public layout: working surfaces, square edges, and a visible site index. */
html[data-multi-layout] {
  --multi-paper: #f2f3eb;
  --multi-ink: #141d2b;
  --multi-night: #141f32;
  --multi-lime: #dcfa76;
  --page-background: var(--multi-paper);
  --card-background: #fafbf5;
  --white: #fafbf5;
  --ink: var(--multi-ink);
  --gray: #505d65;
  --blue: #234aa4;
  --line: #cbd1c9;
  --content-max: 74rem;
  --content-measure: 74rem;
  font-family: Geist, Inter, "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
}

html[data-multi-layout][data-topbar-presentation="bar"] .mdc-capsule {
  background: var(--multi-night);
  color: #fff;
  border-bottom-color: #ffffff30;
}

html[data-multi-layout] .mdc-primary > a {
  font-weight: 650;
}

html[data-multi-layout][data-topbar-presentation="bar"] .mdc-primary > a {
  color: #e9eee9;
}

html[data-multi-layout][data-topbar-presentation="bar"] .mdc-capsule .mdc-brand img {
  filter: brightness(0) invert(1);
}

html[data-multi-layout][data-topbar-presentation="bar"] .mdc-capsule.over-dark {
  color: #fff;
}

/* Keep the same flex row in both shapes. Transform the controls instead of
   switching to grid at the start of the width transition. */
html:root[data-multi-layout][data-topbar-presentation="bar"][data-capsule-layout="full"]
:is(.mdc-capsule, .mdc-capsule.is-expanded) .mdc-primary {
  transform: translateX(calc(-1 * var(--top-row-spread)));
}

html[data-multi-layout][data-topbar-presentation="bar"] .mdc-capsule.over-dark
:is(.mdc-panel p, .mdc-panel small, .mdc-ask-note, .mdc-search-empty) {
  color: #d1dbdf !important;
}

html[data-multi-layout][data-topbar-presentation="bar"] .mdc-capsule.over-dark .mdc-search-input::placeholder {
  color: #d1dbdf;
}

html[data-multi-layout] .mdc-primary > a::before,
html[data-multi-layout] .mdc-icon,
html[data-multi-layout] .mdc-panel a::before,
html[data-multi-layout] .mdc-search-result {
  border-radius: 4px;
}

html[data-multi-layout] .mdc-primary > a[aria-current="page"]::after,
html[data-multi-layout] .mdc-primary > a[data-current-section]::after {
  background: var(--multi-lime);
  opacity: 1;
  height: 2px;
}

html[data-multi-layout] .mdc-capsule.over-dark .mdc-primary > a[aria-current="page"]::after,
html[data-multi-layout] .mdc-capsule.over-dark .mdc-primary > a[data-current-section]::after {
  background: var(--blue);
}

html[data-multi-layout][data-topbar-presentation="bar"] .mdc-primary > a[aria-current="page"]::after,
html[data-multi-layout][data-topbar-presentation="bar"] .mdc-primary > a[data-current-section]::after {
  background: var(--multi-lime);
}

html[data-multi-layout] body .site-footer {
  background: #e7ebdf;
  border-top: 1px solid var(--line);
}

html[data-multi-layout] body[data-page="index"] { background: var(--multi-paper); }

html[data-multi-layout] main :is(.button, .app-lineup-card, .home-card, .section-card, .event-invitation-card) {
  border-radius: 4px;
}

html[data-multi-layout] main .button {
  font-weight: 650;
}

.multi-width {
  width: min(74rem, calc(100% - 2 * clamp(20px, 5vw, 64px)));
  margin-inline: auto;
}

.multi-home-hero {
  color: #f7faec;
  background: var(--multi-night);
}

.multi-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr);
  align-items: stretch;
  border-inline: 1px solid #ffffff26;
}

.multi-hero-copy {
  padding: clamp(36px, 6vw, 88px) clamp(20px, 4vw, 52px);
}

.multi-hero-copy .multi-hero-name {
  color: var(--multi-lime);
  font-size: 15px;
  font-weight: 700;
}

.multi-hero-copy h1 {
  margin-block: 26px 20px;
  color: inherit;
  font-size: clamp(44px, 7.1vw, 100px);
  line-height: 1;
  letter-spacing: -.065em;
  font-weight: 740;
}

.multi-hero-copy h1 + p {
  max-width: 36ch;
  color: #d0dce9;
  font-size: clamp(16px, 1.8vw, 19px);
  line-height: 1.6;
}

.multi-action {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  gap: 1.25rem;
  margin-top: 30px;
  padding: 10px 16px;
  background: var(--multi-lime);
  color: var(--multi-ink);
  font-size: 14px;
  font-weight: 750;
}

.multi-action:hover { background: #edfbb7; }
.multi-action:focus-visible { outline-color: var(--multi-lime); }

.multi-hero-art {
  display: grid;
  place-items: center;
  min-width: 0;
  padding: 12px;
  border-inline-start: 1px solid #ffffff26;
  background:
    linear-gradient(#ffffff14 1px, transparent 1px),
    linear-gradient(90deg, #ffffff14 1px, transparent 1px);
  background-size: 36px 36px;
}

.multi-hero-art .brand-drawing { width: 100%; margin: 0; }
.multi-hero-art svg { display: block; width: 100%; height: auto; }
.multi-hero-art .mark-scaffold { fill: #dcfa7630; }
.multi-hero-art .mark-trace { stroke: var(--multi-lime); }

.multi-work {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(24px, 5vw, 72px);
  align-items: center;
  padding-block: clamp(38px, 5vw, 70px);
}

.multi-work-heading h2 {
  font-size: clamp(30px, 4vw, 53px);
  font-weight: 720;
  line-height: 1.15;
}

.multi-work-heading figure { width: min(100%, 200px); margin: 8px 0 0; }
.multi-work-heading figure svg { display: block; width: 100%; height: auto; }
.multi-work-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.multi-work-list li { border-bottom: 1px solid var(--line); }

.multi-work-list a {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px 10px;
}

.multi-work-list a:hover { background: #e6ebd9; }
.multi-work-list strong { display: block; font-size: 20px; line-height: 1.3; }
.multi-work-list small { display: block; margin-top: 3px; color: var(--gray); font-size: 14px; }
.multi-work-icon { display: grid; width: 42px; height: 42px; place-items: center; background: #e7ebdf; }
.multi-work-icon img { width: 24px; height: 24px; object-fit: contain; }
.multi-link-arrow { color: var(--blue); font-size: 22px; }

.multi-plan-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 24px;
  margin-bottom: var(--space-section, 44px);
  padding: 18px 22px;
  border-inline-start: 4px solid var(--multi-lime);
  background: #e3e8d7;
}

.multi-plan-strip strong { display: block; font-size: 17px; }
.multi-plan-strip p { color: var(--gray); font-size: 14px; }
.multi-plan-strip a { display: inline-flex; align-items: center; min-height: 44px; gap: 8px; color: var(--blue); font-weight: 700; }
.multi-plan-strip a:hover { text-decoration: underline; }

.multi-home-directory {
  border-top: 1px solid var(--line);
}

.multi-home-directory .multi-width {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 24px;
}

.multi-home-directory a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-block: 24px;
  font-weight: 650;
}

.multi-home-directory a:hover { color: var(--blue); text-decoration: underline; }

.multi-section-index {
  display: flex;
  flex-wrap: wrap;
  gap: 0 22px;
  margin-top: 22px;
  border-block: 1px solid var(--line);
}

.multi-section-index a {
  display: inline-flex;
  align-items: center;
  min-height: 52px;
  padding-inline: 6px;
  color: var(--blue);
  font-weight: 650;
}

.multi-section-index a:hover { text-decoration: underline; }

html[data-multi-layout] .intelligence-header {
  min-height: 0;
  padding-block: clamp(32px, 6vw, 70px);
  text-align: start;
}

html[data-multi-layout] .intelligence-header h1 { font-size: clamp(36px, 6vw, 72px); font-weight: 740; }

html[data-multi-layout] .app-lineup-grid {
  gap: 0;
  border: 1px solid var(--line);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

html[data-multi-layout] .app-lineup-card { background: transparent; padding: 20px; }
html[data-multi-layout] .app-lineup-card + .app-lineup-card { border-inline-start: 1px solid var(--line); }

html[data-multi-layout] .reading-scene .reading-stage {
  min-height: 0;
  padding-block: clamp(34px, 6vw, 78px);
}

html[data-multi-layout] .reading-scene + .reading-scene { border-top: 1px solid var(--line); }

html[data-multi-layout]:not(.event-export) .event-invitation-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  align-content: center;
  gap: 14px 24px;
  min-height: 0;
  padding: clamp(24px, 5vw, 60px);
  text-align: start;
  background: var(--multi-night);
}

html[data-multi-layout]:not(.event-export) .event-invitation-heading h1 { font-size: clamp(34px, 5vw, 62px); }
html[data-multi-layout]:not(.event-export) .event-invitation-heading { grid-column: 1; grid-row: 1; }
html[data-multi-layout]:not(.event-export) .event-invitation-card .event-hero-art {
  grid-column: 2;
  grid-row: 1 / 4;
  width: min(100%, 400px);
  margin: 0;
  justify-self: center;
}
html[data-multi-layout]:not(.event-export) .event-invitation-card .event-hero-tagline { grid-column: 1; grid-row: 2; }
html[data-multi-layout]:not(.event-export) .event-star-controls { grid-column: 1; grid-row: 3; justify-self: start; }
html[data-multi-layout] .event-home-action { justify-content: flex-start; }
html[data-multi-layout] .event-hero .event-invitation-details { text-align: start; }

html[data-multi-layout] .multi-company-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  align-items: center;
  gap: 22px 48px;
  padding-block: clamp(32px, 5vw, 60px);
  border-top: 1px solid var(--line);
}

html[data-multi-layout] .multi-company-intro :is(h1, h2) {
  font-size: clamp(29px, 4vw, 50px);
}

.multi-company-intro p { color: var(--gray); margin-top: 12px; }
.multi-company-intro ul { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.multi-company-intro li { border-bottom: 1px solid var(--line); }
.multi-company-intro a { display: flex; align-items: center; justify-content: space-between; min-height: 48px; color: var(--blue); }
.multi-company-intro a:hover { text-decoration: underline; }

@media (max-width: 700px) {
  .multi-hero-grid, .multi-work { grid-template-columns: minmax(0, 1fr); }
  .multi-hero-copy h1 { font-size: clamp(43px, 11vw, 65px); }
  .multi-hero-art { border-inline-start: 0; border-top: 1px solid #ffffff26; padding: 0; }
  .multi-hero-art .brand-drawing { width: min(100%, 320px); }
  .multi-work-heading figure { display: none; }
  .multi-home-directory .multi-width,
  html[data-multi-layout] .multi-company-intro { grid-template-columns: minmax(0, 1fr); }
  .multi-home-directory a + a { border-top: 1px solid var(--line); }
  .multi-home-directory a { padding-block: 15px; }
  html[data-multi-layout] .app-lineup-grid { grid-template-columns: minmax(0, 1fr); }
  html[data-multi-layout] .app-lineup-card + .app-lineup-card {
    border-inline-start: 0;
    border-top: 1px solid var(--line);
  }
  html[data-multi-layout]:not(.event-export) .event-invitation-card { grid-template-columns: minmax(0, 1fr); }
  html[data-multi-layout]:not(.event-export) .event-invitation-card .event-hero-art {
    grid-column: 1;
    grid-row: 3;
    width: min(100%, 250px);
  }
  html[data-multi-layout]:not(.event-export) .event-star-controls { grid-row: 4; }
}