.glass { font-size: clamp(11px, 2.15cqi, 15px); color: #1c1915; }
.frame.is-phone .glass { font-size: clamp(12px, 4.8cqi, 15px); background: #12110f; }
.demo {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  background: #fff;
}
.demo.is-on { opacity: 1; visibility: visible; }
.demo.is-leave { animation: demo-out 180ms ease forwards; }
@keyframes demo-out { to { opacity: 0; transform: scale(0.985); } }
.demo-note {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.nova { background: #f3efe6; color: #1c1915; display: flex; flex-direction: column; padding: 1.15em 1.35em 1.2em; }
.nv-bar, .mo-bar, .fl-bar, .ar-bar, .ux-pane header, .ph header {
  display: flex;
  align-items: center;
  gap: 1em;
}
.nv-bar { justify-content: space-between; font-size: 0.78em; letter-spacing: 0.14em; text-transform: uppercase; }
.nv-bar strong { font-family: "Hanken Grotesk", "Segoe UI", sans-serif; font-weight: 700; letter-spacing: 0.22em; }
.nv-bar span { color: #6d6458; }
.nv-hero { margin-top: 1.15em; max-width: 18em; }
.nv-hero h3 {
  margin: 0;
  font-family: "Hanken Grotesk", "Segoe UI", sans-serif;
  font-weight: 560;
  font-size: 1.85em;
  line-height: 1.02;
  letter-spacing: -0.035em;
}
.nv-hero p { margin: 0.7em 0 0.9em; max-width: 28em; color: #5e564c; font-size: 0.92em; line-height: 1.45; }
.nv-cta, .mo-cta, .ph-cta {
  display: inline-flex;
  align-items: center;
  padding: 0.55em 0.85em;
  background: #1f4a3a;
  color: #f3efe6;
  font-size: 0.78em;
  letter-spacing: 0.04em;
}
.nv-points {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1em;
  margin: auto 0 0;
  padding: 0.9em 0 0;
  border-top: 1px solid #ddd4c6;
}
.nv-points b { display: block; font-size: 0.82em; font-weight: 650; }
.nv-points span { display: block; margin-top: 0.25em; color: #6d6458; font-size: 0.75em; line-height: 1.35; }

.mora { background: #f6f3ee; color: #1a1a1a; }
.mo-bar {
  height: 2.6em;
  padding: 0 1.1em;
  border-bottom: 1px solid #e4ddd3;
  font-size: 0.78em;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.mo-bar strong { font-family: "Hanken Grotesk", "Segoe UI", sans-serif; font-weight: 500; letter-spacing: 0.28em; margin-right: auto; }
.mo-bar em { font-style: normal; color: #9a4b32; }
.mo-view { position: absolute; inset: 2.6em 0 0; padding: 0.9em 1.1em 1em; opacity: 0; visibility: hidden; }
.mora[data-view="0"] .mo-view[data-view="0"],
.mora[data-view="1"] .mo-view[data-view="1"],
.mora[data-view="2"] .mo-view[data-view="2"] { opacity: 1; visibility: visible; }
.mo-kicker { margin: 0 0 0.6em; font-size: 0.72em; letter-spacing: 0.14em; text-transform: uppercase; color: #8a8176; }
.mo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.55em; height: calc(100% - 1.5em); }
.mo-grid figure { margin: 0; display: flex; flex-direction: column; min-height: 0; }
.mo-grid picture { display: block; flex: 1; min-height: 0; }
.mo-grid img { width: 100%; height: 100%; object-fit: cover; object-position: center; background: #e6e0d6; display: block; }
.mo-grid figcaption { display: flex; flex-direction: column; gap: 0.1em; padding-top: 0.35em; font-size: 0.72em; letter-spacing: 0.02em; }
.mo-grid figcaption b { font-weight: 620; }
.mo-grid figcaption span { color: #6f675f; }
.mo-product { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 0.9em; height: 100%; min-height: 0; }
.mo-hero { display: block; min-height: 0; min-width: 0; height: 100%; }
.mo-hero img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; background: #e6e0d6; display: block; }
.mo-detail { display: block; width: 7.2em; height: 8.6em; margin: 0 0 0.65em; }
.mo-detail img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; background: #e6e0d6; }
.mo-product h3 { margin: 0.15em 0; font-family: "Hanken Grotesk", "Segoe UI", sans-serif; font-size: 1.7em; font-weight: 560; letter-spacing: -0.03em; }
.mo-product p { margin: 0 0 0.7em; color: #5f584f; font-size: 0.85em; line-height: 1.4; }
.sizes { display: flex; gap: 0.4em; margin-bottom: 0.7em; }
.sizes span { width: 1.8em; height: 1.8em; display: grid; place-items: center; border: 1px solid #d9d0c6; font-size: 0.75em; }
.sizes .on { border-color: #1a1a1a; }
.mo-product strong { display: block; margin-bottom: 0.7em; font-size: 0.85em; }
.mo-cta { background: #1a1a1a; color: #f6f3ee; }
.mo-check { max-width: 26em; }
.mo-check h3 { margin: 0 0 0.6em; font-family: "Hanken Grotesk", "Segoe UI", sans-serif; font-size: 1.5em; font-weight: 560; }
.mo-pay { margin-top: 0.9em; }
.mo-pay p { margin: 0 0 0.7em; max-width: 18em; color: #5f584f; font-size: 0.85em; line-height: 1.4; }
.mo-check ul { list-style: none; margin: 0 0 0.9em; padding: 0; }
.mo-check li { display: grid; grid-template-columns: 3.2em 1fr auto; gap: 0.6em; align-items: center; padding: 0.45em 0; border-top: 1px solid #e4ddd3; font-size: 0.85em; }
.mo-check picture { display: block; width: 3.2em; height: 4em; }
.mo-check li img { width: 100%; height: 100%; object-fit: cover; object-position: center; background: #e6e0d6; display: block; }
.mo-check .total { grid-template-columns: 1fr auto; }
.mo-check .total { font-weight: 650; }

.pulse { background: #12110f; color: #f3efe6; }
.island {
  position: absolute;
  top: 0.55em;
  left: 50%;
  width: 28%;
  height: 0.85em;
  transform: translateX(-50%);
  border-radius: 1em;
  background: #050504;
  z-index: 2;
}
.ph { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 1.7em 1em 1em; opacity: 0; visibility: hidden; }
.pulse[data-view="0"] .ph[data-view="0"],
.pulse[data-view="1"] .ph[data-view="1"],
.pulse[data-view="2"] .ph[data-view="2"] { opacity: 1; visibility: visible; }
.ph header { justify-content: space-between; font-size: 0.72em; letter-spacing: 0.16em; text-transform: uppercase; color: #b7b0a4; }
.ph header b { color: #f3efe6; font-family: "Hanken Grotesk", "Segoe UI", sans-serif; letter-spacing: 0.18em; }
.hello { margin: 0.9em 0 0.3em; font-family: "Hanken Grotesk", "Segoe UI", sans-serif; font-size: 1.35em; letter-spacing: -0.03em; }
.label { margin: 0; color: #9c958a; font-size: 0.72em; letter-spacing: 0.12em; text-transform: uppercase; }
.steps-count { margin: 0.15em 0 0.35em; font-family: "Hanken Grotesk", "Segoe UI", sans-serif; font-size: 2em; font-weight: 560; letter-spacing: -0.04em; line-height: 1; }
.steps-count small { font-size: 0.4em; letter-spacing: 0; color: #b7b0a4; font-weight: 500; }
.track { height: 0.28em; background: #2a2723; border-radius: 1em; margin-bottom: 0.9em; }
.track i { display: block; width: 64%; height: 100%; background: #ff6a3d; border-radius: inherit; }
.rec { margin-top: auto; margin-bottom: 0.8em; padding-top: 0.7em; border-top: 1px solid #2c2925; }
.rec span, .lifts span, .stats span { display: block; color: #9c958a; font-size: 0.72em; letter-spacing: 0.08em; text-transform: uppercase; }
.rec strong { display: block; margin: 0.2em 0; font-size: 1.05em; }
.rec em { font-style: normal; color: #ff6a3d; font-size: 0.8em; }
.ph-cta { align-self: stretch; justify-content: center; background: #ff6a3d; color: #1a100c; font-weight: 650; }
.timer { color: #ff6a3d; letter-spacing: 0.08em; }
.lifts { list-style: none; margin: 1em 0 auto; padding: 0; }
.lifts li { display: flex; gap: 0.7em; align-items: center; padding: 0.7em 0; border-top: 1px solid #2c2925; }
.lifts i { width: 0.7em; height: 0.7em; border: 1px solid #6d675f; border-radius: 50%; flex: none; }
.lifts i.done { background: #ff6a3d; border-color: #ff6a3d; }
.lifts i.now { border-color: #ff6a3d; box-shadow: inset 0 0 0 2px #12110f, inset 0 0 0 4px #ff6a3d; }
.lifts strong { font-size: 0.95em; font-weight: 600; }
.stats { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4em; margin: 1em 0 0.8em; padding: 0; }
.stats strong { font-family: "Hanken Grotesk", "Segoe UI", sans-serif; font-size: 1.35em; font-weight: 560; letter-spacing: -0.03em; }
.chart { display: flex; align-items: flex-end; gap: 0.35em; height: 4.2em; margin-top: auto; }
.chart i { flex: 1; background: #2a2723; display: block; }
.chart i:nth-child(1) { height: 40%; }
.chart i:nth-child(2) { height: 70%; }
.chart i:nth-child(3) { height: 48%; }
.chart i:nth-child(4) { height: 86%; background: #ff6a3d; }
.chart i:nth-child(5) { height: 62%; }
.chart i:nth-child(6) { height: 34%; }
.chart i:nth-child(7) { height: 55%; }
.consist { margin: 0.7em 0 0; font-size: 0.8em; color: #b7b0a4; }
.consist strong { color: #f3efe6; }

.north { display: grid; grid-template-columns: 4.6em 1fr 9.5em; background: #e7ebef; color: #1b2430; }
.rail, .profile { padding: 0.8em 0.55em; background: #f7f8f9; }
.rail { display: flex; flex-direction: column; gap: 0.7em; border-right: 1px solid #d5dbe1; font-size: 0.68em; letter-spacing: 0.08em; text-transform: uppercase; color: #66707c; }
.rail b { font-family: "Hanken Grotesk", "Segoe UI", sans-serif; color: #0f6e6b; letter-spacing: 0.14em; }
.rail span:first-of-type { color: #1b2430; }
.board { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.45em; padding: 0.65em; min-width: 0; }
.board section { min-width: 0; background: rgba(255, 255, 255, 0.46); padding: 0.45em; }
.board h3 { margin: 0 0 0.4em; font-size: 0.62em; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #66707c; }
.board article { background: #fff; padding: 0.5em; border-top: 2px solid #c5ced6; }
.board .picked { border-top-color: #0f6e6b; }
.board strong, .profile h3 { display: block; font-size: 0.75em; font-weight: 650; line-height: 1.25; }
.board span { display: block; margin-top: 0.3em; color: #66707c; font-size: 0.68em; }
.profile { border-left: 1px solid #d5dbe1; }
.profile p { margin: 0; font-size: 0.66em; letter-spacing: 0.12em; text-transform: uppercase; color: #0f6e6b; }
.profile h3 { margin: 0.35em 0 0.6em; font-size: 0.95em; }
.profile ul { list-style: none; margin: 0; padding: 0; }
.profile li { padding: 0.4em 0; border-top: 1px solid #e1e6eb; }
.profile b { display: block; font-size: 0.64em; letter-spacing: 0.08em; text-transform: uppercase; color: #66707c; }
.profile span { font-size: 0.75em; }

.flow { background: #f7f4ef; color: #231c16; display: flex; flex-direction: column; }
.fl-bar { justify-content: space-between; padding: 0.9em 1.1em 0; }
.fl-bar b { font-family: "Hanken Grotesk", "Segoe UI", sans-serif; letter-spacing: 0.16em; font-size: 0.85em; }
.fl-bar span { color: #8a7564; font-size: 0.75em; }
.flow-map { flex: 1; min-height: 0; display: flex; align-items: center; margin: 0.5em 1.15em 1.1em; }
.flow-track { position: relative; width: 100%; }
.nodes {
  list-style: none;
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.7em;
  margin: 0;
  padding: 0.85em 0 0;
}
.flow-track::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 2%;
  right: 2%;
  top: 0.85em;
  height: 2px;
  background: rgba(196, 107, 45, 0.45);
  transform: scaleX(0);
  transform-origin: left center;
}
.flow.is-on .flow-track::before { animation: draw 460ms cubic-bezier(0.65, 0.05, 0.2, 1) forwards; }
.nodes li {
  position: relative;
  background: #fff;
  border: 1px solid #eadfd4;
  padding: 0.85em 0.4em 0.75em;
  text-align: center;
  font-size: 0.86em;
  line-height: 1.25;
  color: #3a312a;
}
.nodes i {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 0;
  width: 0.7em;
  height: 0.7em;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 2px #e4d5c6;
  transform: translate(-50%, -50%);
}
.flow.is-on .nodes i { animation: lit 240ms forwards; }
.flow.is-on .nodes li:nth-child(2) i { animation-delay: 0.26s; }
.flow.is-on .nodes li:nth-child(3) i { animation-delay: 0.5s; }
.flow.is-on .nodes li:nth-child(4) i { animation-delay: 0.74s; }
.flow.is-on .nodes li:nth-child(5) i { animation-delay: 0.98s; }
.flow.is-on .nodes li:nth-child(6) i { animation-delay: 1.22s; }
.packet {
  position: absolute;
  z-index: 2;
  top: 0.58em;
  left: 4%;
  width: 0.55em;
  height: 0.55em;
  border-radius: 50%;
  background: #c46b2d;
  box-shadow: 0 0 0 0.28em rgba(196, 107, 45, 0.16);
  opacity: 0;
}
.flow.is-on .packet { animation: packet-x 1.55s cubic-bezier(0.45, 0.05, 0.2, 1) forwards; }
@keyframes draw { to { transform: scaleX(1); } }
@keyframes lit { to { background: #c46b2d; box-shadow: 0 0 0 2px #c46b2d; } }
@keyframes packet-x {
  0% { left: 5%; opacity: 0; }
  10% { opacity: 1; }
  100% { left: 91%; opacity: 1; }
}
@container (max-width: 680px) {
  .nodes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85em 0.6em; }
  .nodes li { font-size: 0.8em; text-align: left; padding: 0.55em 0.55em 0.55em 1.5em; }
  .nodes i { left: 0.7em; top: 50%; }
  .flow-track::before, .flow-track::after { display: none; }
  .packet { display: none; }
}

.aria { display: flex; flex-direction: column; background: #f8f4f2; color: #241820; }
.ar-bar { justify-content: space-between; padding: 0.75em 1em; border-bottom: 1px solid #eadfdc; }
.ar-bar b { font-family: "Hanken Grotesk", "Segoe UI", sans-serif; letter-spacing: 0.18em; font-weight: 650; }
.ar-bar span { color: #8d6d7c; font-size: 0.75em; }
.thread { padding: 0.9em 1.1em 0.2em; display: flex; flex-direction: column; align-items: flex-start; gap: 0.55em; }
.bubble { margin: 0; max-width: 18em; padding: 0.6em 0.7em; background: #fff; font-size: 0.86em; line-height: 1.35; }
.bubble span { display: block; margin-bottom: 0.2em; font-size: 0.68em; letter-spacing: 0.1em; text-transform: uppercase; color: #8d6d7c; }
.bubble.reply { margin-left: 2.4em; background: #5c2e4a; color: #f8f4f2; }
.bubble.reply span { color: #e7c9d8; }
.actions-col { margin-top: auto; padding: 0.7em 1.1em 1em; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5em; }
.act { padding: 0.55em 0.6em; background: #fff; border-left: 2px solid #5c2e4a; }
.act b { display: block; font-size: 0.78em; }
.act span { color: #6d5964; font-size: 0.72em; }
.aria.is-on .customer { animation: rise 340ms 40ms both; }
.aria.is-on .reply { animation: rise 340ms 380ms both; }
.aria.is-on .act:nth-child(1) { animation: rise 320ms 760ms both; }
.aria.is-on .act:nth-child(2) { animation: rise 320ms 1020ms both; }
.aria.is-on .act:nth-child(3) { animation: rise 320ms 1280ms both; }
@keyframes rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

.ux-pane { position: absolute; inset: 0; opacity: 0; visibility: hidden; }
.ux-pane.is-on { opacity: 1; visibility: visible; }
.atelier { background: #efe6d8; color: #2a241c; }
.atelier header, .vela header, .mono header {
  position: relative;
  z-index: 1;
  justify-content: space-between;
  padding: 0.8em 1em;
  font-size: 0.72em;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.atelier header strong { font-family: Georgia, "Iowan Old Style", "Palatino Linotype", serif; font-size: 1.15em; letter-spacing: 0.18em; font-weight: 500; text-transform: none; }
.at-body { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 1em; padding: 0.2em 1.1em 1em; align-items: end; height: calc(100% - 2.6em); }
.at-body h3 {
  margin: 0;
  font-family: Georgia, "Iowan Old Style", "Palatino Linotype", serif;
  font-weight: 500;
  font-size: 2em;
  line-height: 0.98;
  letter-spacing: -0.02em;
}
.at-body svg { width: 100%; height: auto; align-self: end; }
.vela { background: #0e1c2b; color: #f4f7fb; }
.sky {
  position: absolute;
  inset: 0 0 32% 0;
  background:
    linear-gradient(180deg, rgba(14, 28, 43, 0) 42%, #0e1c2b 100%),
    linear-gradient(180deg, #8ea4b8 0%, #1d4c6e 46%, #0e1c2b 100%);
}
.vela header { color: #d5dee8; }
.vela header strong { letter-spacing: 0.28em; font-weight: 500; }
.vela h3 {
  position: absolute;
  left: 1em;
  bottom: 0.7em;
  margin: 0;
  font-family: "Hanken Grotesk", "Segoe UI", sans-serif;
  font-weight: 520;
  font-size: 2.15em;
  line-height: 0.96;
  letter-spacing: -0.04em;
}
.mono {
  color: #111;
  background:
    repeating-linear-gradient(90deg, rgba(17, 17, 17, 0.06) 0 1px, transparent 1px 12.5%),
    #f4f4f2;
}
.mono header { border-bottom: 1px solid #111; font-family: "JetBrains Mono", ui-monospace, monospace; letter-spacing: 0; text-transform: none; }
.mn-body { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 1em; padding: 1em; align-items: center; height: calc(100% - 2.8em); }
.mn-body h3 {
  margin: 0;
  font-family: "Hanken Grotesk", "Segoe UI", sans-serif;
  font-weight: 600;
  font-size: 1.85em;
  line-height: 0.98;
  letter-spacing: -0.04em;
}
.mn-ui { background: #111; min-height: 6.5em; padding: 0.7em; display: grid; gap: 0.4em; align-content: start; }
.mn-ui i { height: 0.35em; width: 42%; background: #d6ff3f; }
.mn-ui b { display: block; height: 0.28em; background: #2a2a2a; }
.mn-ui b:nth-child(2) { width: 80%; }
.mn-ui b:nth-child(3) { width: 64%; }
.ux-pane.atelier.is-on { animation: mask-x 620ms cubic-bezier(0.65, 0.05, 0.2, 1); }
.ux-pane.vela.is-on { animation: mask-y 620ms cubic-bezier(0.65, 0.05, 0.2, 1); }
.ux-pane.mono.is-on { animation: mask-fade 620ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.ux-pane.is-on h3 { animation: ux-type 480ms cubic-bezier(0.22, 0.8, 0.2, 1); }
@keyframes ux-type {
  from { transform: translateY(0.35em); }
  to { transform: none; }
}
@keyframes mask-x { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@keyframes mask-y { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0); } }
@keyframes mask-fade { from { opacity: 0; } to { opacity: 1; } }

.mora.is-on .mo-grid figure { animation: rise 520ms both; }
.mora.is-on .mo-grid figure:nth-child(2) { animation-delay: 70ms; }
.mora.is-on .mo-grid figure:nth-child(3) { animation-delay: 140ms; }
.north.is-on .board section { animation: rise 480ms both; }
.north.is-on .board section:nth-child(2) { animation-delay: 60ms; }
.north.is-on .board section:nth-child(3) { animation-delay: 120ms; }
.north.is-on .board section:nth-child(4) { animation-delay: 180ms; }
.north.is-on .profile { animation: rise 520ms 160ms both; }

@media (prefers-reduced-motion: reduce) {
  .demo.is-leave,
  .aria.is-on .bubble,
  .aria.is-on .act,
  .mora.is-on .mo-grid figure,
  .north.is-on .board section,
  .north.is-on .profile,
  .flow.is-on .nodes i,
  .flow.is-on .packet,
  .flow.is-on .flow-track::before,
  .ux-pane.is-on,
  .ux-pane.is-on h3 { animation: none; }
  .aria .bubble, .aria .act { opacity: 1; transform: none; }
}