/* The glad page: the decision graph pinned while it assembles and dives, then three sections and the close. */
:root { --ground: #0A0A0A; --cream: #F4F1E8; --muted: rgb(244 241 232 / 0.6); }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--ground); color: var(--cream); font-family: "Alliance No.1", ui-sans-serif, system-ui, sans-serif; }
/* the first section: pinned while the graph assembles, then dives */
#hero { height: 520vh; position: relative; }
.stage { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.stage svg { position: absolute; left: 0; right: 0; top: 64px; bottom: 0; width: 100%; height: calc(100% - 64px); }
#intro { position: absolute; left: clamp(24px, 6vw, 96px); top: calc(64px + 12vh); z-index: 2; }
#intro h1 { margin: 0; max-width: 15ch; font-family: "Alliance No.2", sans-serif; font-weight: 500; font-size: clamp(2.8rem, 6vw, 5.4rem); line-height: 1; letter-spacing: -0.045em; }
#intro p { margin: 22px 0 0; max-width: 40ch; color: var(--muted); font-size: 1.2rem; line-height: 1.4; }
#intro .cue { margin-top: 40px; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: rgb(244 241 232 / 0.45); }
#lines { position: absolute; left: clamp(24px, 6vw, 96px); top: calc(64px + 6vh); width: min(40ch, 40vw); height: 160px; z-index: 2; }
#lines p { position: absolute; inset: 0; margin: 0; font-family: "Alliance No.2", sans-serif; font-weight: 500; font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1.08; letter-spacing: -0.035em; opacity: 0; transform: translateY(12px); transition: opacity 0.4s, transform 0.4s; }
#lines p.on { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { #lines p { transition: none; } }
@media (max-width: 760px) { #lines { width: auto; right: 24px; } }
#people { position: absolute; right: clamp(24px, 4vw, 64px); top: calc(64px + 6vh); z-index: 2; display: grid; gap: 10px; font-size: 14px; color: rgb(244 241 232 / 0.75); opacity: 0; transition: opacity 0.4s; }
#people span { display: flex; align-items: center; gap: 10px; }
#people i { width: 14px; height: 2px; border-radius: 1px; display: inline-block; }
.s2 { max-width: 1320px; margin: 0 auto; padding: 160px clamp(24px, 4vw, 56px) 120px; }
.s2 h2 { margin: 0; max-width: 30ch; font-family: "Alliance No.2", sans-serif; font-weight: 500; font-size: clamp(2rem, 3.6vw, 3.2rem); line-height: 1.08; letter-spacing: -0.035em; }
.s2 h2 span { color: rgb(244 241 232 / 0.45); }
.set { margin-top: 110px; }
.figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fig { padding: 0 32px; border-left: 1px solid rgb(244 241 232 / 0.1); min-width: 0; }
.fig:first-child { padding-left: 0; border-left: 0; }
.fig small { font-family: ui-monospace, Menlo, monospace; font-size: 11px; letter-spacing: 0.08em; color: rgb(244 241 232 / 0.35); }
.fig canvas { display: block; width: 100%; height: 300px; object-fit: cover; margin: 18px 0 26px; }
.fig h3 { margin: 0; font-size: 1.05rem; font-weight: 500; }
.fig p { margin: 8px 0 0; color: rgb(244 241 232 / 0.55); line-height: 1.45; max-width: 34ch; }
@media (max-width: 860px) { .figs { grid-template-columns: minmax(0, 1fr); } .fig { padding: 0 0 40px; border-left: 0; } }
/* Misha's name spells itself out as the section arrives */
.spell { margin: 0 0 40px; font-family: "Alliance No.2", sans-serif; font-weight: 500; font-size: clamp(1.4rem, 2.4vw, 2rem); letter-spacing: -0.02em; display: flex; flex-wrap: wrap; gap: 0 0.35em; }
.spell span { display: inline-flex; white-space: nowrap; }
.spell b { font-weight: 500; color: var(--cream); }
.spell i { font-style: normal; color: rgb(244 241 232 / 0.4); display: inline-block; max-width: 0; overflow: hidden; vertical-align: bottom; transition: max-width 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); }
.spell.in i { max-width: 9em; }
.spell.in span:nth-child(2) i { transition-delay: 0.12s; } .spell.in span:nth-child(3) i { transition-delay: 0.24s; } .spell.in span:nth-child(4) i { transition-delay: 0.36s; } .spell.in span:nth-child(5) i { transition-delay: 0.48s; }
@media (prefers-reduced-motion: reduce) { .spell i { max-width: 9em; transition: none; } }
.mflow { width: 100%; height: auto; display: block; overflow: visible; font-family: "Alliance No.1", sans-serif; }
.mflow rect { fill: #0d0d0d; stroke: rgb(244 241 232 / 0.22); }
.mflow .k { font: 11px ui-monospace, Menlo, monospace; fill: rgb(244 241 232 / 0.45); letter-spacing: 0.04em; }
.mflow .t { font-size: 17px; fill: #F4F1E8; }
.mflow .old { font-size: 14px; fill: rgb(244 241 232 / 0.4); }
.mflow .new { font-size: 14px; fill: #F4F1E8; opacity: 0; transition: opacity 0.5s 0.5s; }
.mflow .strike { stroke: rgb(244 241 232 / 0.6); stroke-dasharray: 53; stroke-dashoffset: 53; transition: stroke-dashoffset 0.4s 0.2s; }
.mflow .f { font: 13px ui-monospace, Menlo, monospace; fill: #F4F1E8; }
.mflow .d { font-size: 13px; fill: rgb(244 241 232 / 0.55); }
.mflow .pr { font: 12px ui-monospace, Menlo, monospace; fill: rgb(244 241 232 / 0.55); text-anchor: end; }
.mflow .held rect { stroke: rgb(232 197 71 / 0.6); } .mflow .held .pr { fill: #E8C547; }
.mflow .ln { fill: none; stroke: rgb(244 241 232 / 0.35); stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 0.6s ease; }
.mflow .ln.hold { stroke: rgb(232 197 71 / 0.5); stroke-dasharray: 0.02 0.025; stroke-dashoffset: 0; opacity: 0; transition: opacity 0.5s ease; }
.mflow.in .ln.hold { opacity: 1; }
.mflow .card { opacity: 0; transition: opacity 0.5s ease; }
.mflow.in .strike { stroke-dashoffset: 0; } .mflow.in .new { opacity: 1; }
.mflow.in .ln { stroke-dashoffset: 0; transition-delay: 1s; } .mflow.in .ln:nth-child(2) { transition-delay: 1.15s; } .mflow.in .ln:nth-child(3) { transition-delay: 1.3s; } .mflow.in .ln:nth-child(4) { transition-delay: 1.45s; }
.mflow.in .card { opacity: 1; } .mflow.in .c1 { transition-delay: 1.5s; } .mflow.in .c2 { transition-delay: 1.7s; } .mflow.in .c3 { transition-delay: 1.9s; } .mflow.in .c4 { transition-delay: 2.3s; }
@media (prefers-reduced-motion: reduce) { .mflow * { transition: none !important; } .mflow .card, .mflow .new { opacity: 1; } .mflow .ln, .mflow .strike { stroke-dashoffset: 0; } }
.s3 { max-width: 1320px; margin: 0 auto; padding: 120px clamp(24px, 4vw, 56px) 140px; }
.s3 h2, .s3 h3 { margin: 0; font-family: "Alliance No.2", sans-serif; font-weight: 500; letter-spacing: -0.035em; }
.s3 h2 { font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.05; }
.s3 h3 { font-size: 1.6rem; line-height: 1.1; }
.s3 .why { margin: 16px 0 0; color: rgb(244 241 232 / 0.6); font-size: 1.05rem; line-height: 1.55; max-width: 46ch; }
.spell.small { font-size: 0.95rem; letter-spacing: 0; margin: 0 0 12px; color: rgb(244 241 232 / 0.4); }
.l2h { margin-bottom: 40px !important; }
.l2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid rgb(244 241 232 / 0.1); }
.pane { padding: 36px 36px 0 0; min-width: 0; } .pane + .pane { padding: 36px 0 0 36px; border-left: 1px solid rgb(244 241 232 / 0.1); }
.pane .vis { min-height: 300px; display: grid; align-items: center; margin-bottom: 28px; }
.dots { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; max-width: 460px; }
.dots i { aspect-ratio: 1; border-radius: 50%; background: rgb(244 241 232 / 0.16); transform: scale(0.4); opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease, background 0.6s ease; }
.dots.in i { transform: none; opacity: 1; }
.dots.in i:nth-child(odd) { transition-delay: 0.1s; } .dots.in i:nth-child(3n) { transition-delay: 0.2s; }
.dots.in i.s { background: rgb(244 241 232 / 0.75); transition-delay: 0.9s; }
.dots.in i.p { background: #E8C547; transition-delay: 1.4s; box-shadow: 0 0 0 5px rgb(232 197 71 / 0.15); }
.key { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 22px; font-size: 13px; color: rgb(244 241 232 / 0.55); }
.key span { display: flex; align-items: center; gap: 8px; } .key i { width: 9px; height: 9px; border-radius: 50%; }
.key .q { background: rgb(244 241 232 / 0.16); } .key .s { background: rgb(244 241 232 / 0.75); } .key .p { background: #E8C547; }
@media (prefers-reduced-motion: reduce) { .dots i { transform: none; opacity: 1; transition: none; } }
@media (max-width: 860px) { .l2 { grid-template-columns: minmax(0, 1fr); } .pane + .pane { border-left: 0; padding-left: 0; } }
.l2 { grid-template-rows: auto 424px auto auto; }
.pane { display: grid; grid-row: span 4; grid-template-rows: subgrid; align-content: start; }
.pane > .spell.small { margin: 0; align-self: end; }
.pane .vis { min-height: 0; margin: 24px 0 32px; align-items: center; }
.pane h3 { align-self: start; }
.pane .vis { height: 100%; box-sizing: border-box; margin: 0 !important; padding: 24px 0 72px; } .pane .vis .mflow { height: 100%; width: 100%; }
.pane .why { margin-top: 14px; }
/* section four: what a team gets */
.s4 { max-width: 1320px; margin: 0 auto; padding: 80px clamp(24px, 4vw, 56px) 0; }
.s4 h2 { margin: 0 0 64px; max-width: 24ch; font-family: "Alliance No.2", sans-serif; font-weight: 500; font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.05; letter-spacing: -0.035em; }
.gets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid rgb(244 241 232 / 0.1); }
.get { padding: 28px 28px 0; border-left: 1px solid rgb(244 241 232 / 0.1); min-width: 0; opacity: 0; transform: translateY(14px); transition: opacity 0.7s, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); }
.get:first-child { padding-left: 0; border-left: 0; }
.gets.in .get { opacity: 1; transform: none; }
.gets.in .get:nth-child(2) { transition-delay: 0.12s; } .gets.in .get:nth-child(3) { transition-delay: 0.24s; } .gets.in .get:nth-child(4) { transition-delay: 0.36s; }
.get h3 { margin: 0; font-family: "Alliance No.2", sans-serif; font-weight: 500; font-size: 1.3rem; letter-spacing: -0.025em; line-height: 1.15; }
.get p { margin: 12px 0 0; color: rgb(244 241 232 / 0.58); line-height: 1.5; max-width: 30ch; }
.close { position: relative; margin: 160px calc(50% - 50vw) 0; text-align: center; overflow: hidden; }
.close h2 { max-width: none; }
body { overflow-x: clip; }
.close canvas { display: block; width: 100%; height: 480px; margin-top: 8px; }
.close::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 480px; background: linear-gradient(transparent 70%, var(--ground)); pointer-events: none; }
.close div { position: relative; z-index: 1; }
.close h2 { margin: 0; font-family: "Alliance No.2", sans-serif; font-weight: 500; font-size: clamp(2.2rem, 4.4vw, 4rem); line-height: 1; letter-spacing: -0.045em; }
.close p { margin: 18px auto 0; color: rgb(244 241 232 / 0.6); font-size: 1.1rem; }
.close nav { display: flex; gap: 14px; justify-content: center; margin-top: 32px; }
.close a { font-weight: 500; padding: 11px 20px; text-decoration: none; border: 1px solid var(--cream); color: var(--cream); }
.close a:first-child { background: var(--cream); color: var(--ground); }
@media (max-width: 960px) { .gets { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; } .get:nth-child(3) { padding-left: 0; border-left: 0; } }
@media (max-width: 560px) { .gets { grid-template-columns: minmax(0, 1fr); } .get { padding: 0; border-left: 0; } .close canvas, .close::after { height: 320px; } }
#people .p0 { background: #E5534B; } #people .p1 { background: #6FD3A2; } #people .p2 { background: #E8C547; } #people .p3 { background: #8FA8F0; }
/* Arriving from the product page's slide, on the same grey: the hero comes in by fading, never by a jump. */
.stage { opacity: 0; transition: opacity 500ms ease; } .stage.ready { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .stage { transition: none; } }
.home-nav a[aria-current="page"] { opacity: 1; text-decoration: underline; text-underline-offset: 4px; } /* as on the product page, so the bar holds still across the slide */
/* A phone: the key sits under the graph, the sections close up, Misha's stacked flow reads at phone size, and every button is a full thumb high. */
@media (max-width: 760px) {
  #intro, #lines { left: 20px; } #lines { right: 20px; }
  #people { top: auto; right: auto; left: 20px; bottom: 28px; display: flex; flex-wrap: wrap; gap: 8px 18px; }
  .s2 { padding: 96px 20px 40px; }
  .set { margin-top: 56px; }
  .s3 { padding: 64px 20px 64px; }
  .l2 { grid-template-rows: none; }
  .pane, .pane + .pane { display: block; padding: 32px 0 40px; }
  .pane > .spell.small { margin: 0 0 12px; flex-wrap: nowrap; gap: 0 0.25em; letter-spacing: -0.015em; font-size: min(0.95rem, calc((100vw - 40px) / 25.2)); }
  .pane > .eyebrow-space { display: none; }
  .pane .vis { height: auto; padding: 8px 0 32px; }
  .mflow .k { font-size: 13px; } .mflow .f { font-size: 14px; } .mflow .d { font-size: 15px; } .mflow .pr { font-size: 13px; } .mflow .t { font-size: 19px; } .mflow .old, .mflow .new { font-size: 16px; }
  .s4 { padding: 40px 20px 0; }
  .close div { padding: 0 20px; } .close h2 { font-size: clamp(2rem, 9vw, 2.6rem); }
  .s4 h2 { margin-bottom: 40px; }
  .close { margin-top: 144px; }
  .close a, .close-ide .soon { padding: 13px 22px; }
}