/* DockNest website
   Palette: frost background, ink text, folder colours only inside illustrations.
   Type: the Mac's own system face — the product is a Mac utility. */

:root {
  --frost: #E9EEF6;
  --paper: #F7F9FC;
  --ink: #172033;
  --ink-2: #4A5468;
  --ink-3: #6B7487;
  --line: #D3DAE6;
  --blue: #3D6BFF;
  --blue-deep: #2A55E6;
  --coral: #FF6B5A;
  --green: #26B573;
  --amber: #F2A33A;
  --violet: #8E6CFF;

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
  --measure: 34rem;
  --ease: cubic-bezier(.2, .8, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--frost);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }

a { color: var(--blue-deep); }

:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
  border-radius: 6px;
}

.skip {
  position: absolute;
  left: 1rem;
  top: -3rem;
  padding: .5rem .9rem;
  background: var(--ink);
  color: #fff;
  border-radius: 8px;
  z-index: 10;
}
.skip:focus { top: 1rem; }

/* ---------- Buttons & links ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.9rem;
  padding: 0 1.4rem;
  border-radius: 12px;
  background: var(--blue);
  color: #fff;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 6px 16px -8px rgba(42, 85, 230, .8);
  transition: background-color .15s;
}
.btn:hover { background: var(--blue-deep); }
.btn-small { min-height: 2.25rem; padding: 0 1rem; font-size: .9rem; border-radius: 10px; }
.btn-large { min-height: 3.3rem; padding: 0 2rem; font-size: 1.1rem; }

.text-link {
  color: var(--ink);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  text-decoration-color: var(--line);
}
.text-link:hover { text-decoration-color: var(--ink); }

/* ---------- Top bar ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: .75rem clamp(1rem, 4vw, 3rem);
  background: rgba(233, 238, 246, .82);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid rgba(211, 218, 230, .7);
}
.brand {
  display: flex;
  align-items: center;
  gap: .55rem;
  color: var(--ink);
  font-weight: 700;
  font-size: 1.1rem;
  text-decoration: none;
  letter-spacing: -.01em;
}
.topbar nav { display: flex; gap: 1.5rem; margin-left: auto; }
.topbar nav a { color: var(--ink-2); text-decoration: none; font-size: .95rem; }
.topbar nav a:hover { color: var(--ink); }

/* ---------- Hero ---------- */

.hero {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  padding: clamp(3rem, 8vw, 6rem) clamp(1rem, 4vw, 3rem) clamp(3rem, 6vw, 5rem);
  max-width: 76rem;
  margin: 0 auto;
}
.hero-copy { max-width: var(--measure); }

h1 {
  margin: 0;
  font-size: clamp(2.75rem, 7.2vw, 5.4rem);
  line-height: .98;
  font-weight: 750;
  letter-spacing: -.045em;
}
.lede {
  margin: 1.25rem 0 0;
  font-size: clamp(1.1rem, 1.6vw, 1.3rem);
  line-height: 1.5;
  color: var(--ink-2);
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
  margin-top: 2rem;
}
.fineprint { margin: 1rem 0 0; font-size: .875rem; color: var(--ink-3); }

/* ---------- The desktop stage ---------- */

.stage { margin: 0; }

.desk {
  position: relative;
  aspect-ratio: 16 / 9.4;
  overflow: hidden;
  border-radius: clamp(12px, 1.6vw, 22px);
  background: linear-gradient(180deg, #DCE6F6 0%, #E7EDF8 55%, #D6E1F3 100%);
  box-shadow:
    0 0 0 1px rgba(23, 32, 51, .08),
    0 30px 60px -30px rgba(23, 32, 51, .45);
  container-type: inline-size;
  --s: 5.4cqw;          /* app icon size in the Dock */
}

.menubar {
  position: absolute;
  inset: 0 0 auto 0;
  height: 3.1cqw;
  display: flex;
  align-items: center;
  gap: 1.8cqw;
  padding: 0 1.8cqw;
  background: rgba(255, 255, 255, .55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 1.15cqw;
  color: #26304A;
}
.mb-dot { width: 1.3cqw; height: 1.3cqw; border-radius: 50%; background: #26304A; }
.mb-item:nth-child(2) { font-weight: 700; }
.mb-spacer { flex: 1; }
.mb-grid {
  width: 1.5cqw; height: 1.5cqw; border-radius: .3cqw;
  background:
    linear-gradient(#26304A, #26304A) 0 0 / 45% 45% no-repeat,
    linear-gradient(#26304A, #26304A) 100% 0 / 45% 45% no-repeat,
    linear-gradient(#26304A, #26304A) 0 100% / 45% 45% no-repeat,
    linear-gradient(#26304A, #26304A) 100% 100% / 45% 45% no-repeat;
}
.hills { position: absolute; inset: auto 0 0 0; height: 78%; }
.hills svg { width: 100%; height: 100%; }

/* Dock */
.dock { position: absolute; inset: 0; pointer-events: none; }
.dock-shelf {
  position: absolute;
  left: 50%;
  bottom: 1.3cqw;
  height: calc(var(--s) + 2cqw);
  width: calc(var(--w, 80) * 1cqw);
  transform: translateX(-50%);
  border-radius: 2.2cqw;
  background: rgba(255, 255, 255, .42);
  border: 1px solid rgba(255, 255, 255, .7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 1cqw 3cqw -1cqw rgba(23, 32, 51, .35);
  transition: width .8s var(--ease) .35s;
}
.dock .d {
  position: absolute;
  left: 50%;
  bottom: 2.3cqw;
  width: var(--s);
  height: var(--s);
  transform: translateX(calc(var(--x, 0) * 1cqw - 50%)) scale(var(--k, 1));
  opacity: var(--o, 1);
  transition:
    transform .75s var(--ease) var(--delay, 0s),
    opacity .45s ease var(--delay, 0s);
}
.dock .folder.d { --k: .4; --o: 0; }
.desk[data-stage="1"] .dock .folder.d,
.desk[data-stage="2"] .dock .folder.d { --k: 1; --o: 1; }
.desk[data-stage="2"] .dock .folder.d[data-folder="0"] { animation: press .35s ease .05s; }

@keyframes press { 50% { transform: translateX(calc(var(--x, 0) * 1cqw - 50%)) scale(.9); } }

/* Popup above the first folder */
.popup {
  position: absolute;
  left: 50%;
  bottom: calc(var(--s) + 5.2cqw);
  width: 25cqw;
  padding: 1.4cqw;
  border-radius: 2cqw;
  background: rgba(250, 251, 254, .9);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 0 0 1px rgba(23, 32, 51, .08), 0 2cqw 4cqw -1.5cqw rgba(23, 32, 51, .45);
  transform-origin: 50% 100%;
  transform: translateX(calc(var(--px, 0) * 1cqw - 50%)) scale(.6);
  opacity: 0;
  transition: transform .45s var(--ease), opacity .3s ease;
}
.desk[data-stage="2"] .popup { transform: translateX(calc(var(--px, 0) * 1cqw - 50%)) scale(1); opacity: 1; transition-delay: .25s; }
.popup-head { display: flex; justify-content: space-between; align-items: center; font-size: 1.5cqw; font-weight: 700; }
.popup-plus {
  width: 1.7cqw; height: 1.7cqw; border-radius: 50%;
  border: .2cqw solid var(--blue);
  background:
    linear-gradient(var(--blue), var(--blue)) center / 50% .2cqw no-repeat,
    linear-gradient(var(--blue), var(--blue)) center / .2cqw 50% no-repeat;
}
.popup-search {
  display: flex; align-items: center; gap: .7cqw;
  margin: 1cqw 0 1.2cqw;
  padding: .55cqw .8cqw;
  border-radius: .8cqw;
  background: rgba(23, 32, 51, .06);
  font-size: 1.1cqw;
  color: var(--ink-3);
}
.glass {
  width: 1.1cqw; height: 1.1cqw; flex: none;
  border: .18cqw solid currentColor; border-radius: 50%;
  position: relative;
}
.glass::after {
  content: ""; position: absolute; right: -.45cqw; bottom: -.4cqw;
  width: .5cqw; height: .18cqw; background: currentColor; transform: rotate(45deg);
}
.popup-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2cqw; justify-items: center; }
.popup .pg { position: relative; display: block; }
.pg .app { width: 5cqw; height: 5cqw; }
.pg b {
  position: absolute; left: -.6cqw; top: -.6cqw;
  width: 1.6cqw; height: 1.6cqw; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(23, 32, 51, .6); color: #fff;
  font-size: .95cqw; font-weight: 700;
}

.stage figcaption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: .9rem;
  color: var(--ink-3);
  font-size: .9rem;
}
.replay {
  font: inherit;
  font-weight: 600;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .35rem .9rem;
  cursor: pointer;
}
.replay:hover { border-color: var(--ink-3); }

/* ---------- App icons (original, generic illustrations) ---------- */

.app, .folder, .mini, .mp {
  display: block;
  position: relative;
  border-radius: 22.5%;
}
.app {
  box-shadow: 0 .08em .2em rgba(23, 32, 51, .25), inset 0 0 0 1px rgba(255, 255, 255, .18);
  overflow: hidden;
}
.app::before, .app::after { content: ""; position: absolute; }

/* Glyph scale: 1em = a quarter of the icon, set per place the icons appear. */
.desk .app { font-size: calc(var(--s) / 4); }
.pg .app { font-size: 1.25cqw; }
.mini-dock > .app, .s-flyer { font-size: .85rem; }
.launch-grid > .app { font-size: .8rem; }
.mp.app { font-size: .75rem; }

.a-finder { background: linear-gradient(90deg, #5CB2FF 50%, #E8F2FF 50%); }
.app.a-finder::before { left: 30%; top: 30%; width: 10%; height: 14%; background: #23324F; border-radius: 40%; box-shadow: 1.25em 0 0 #23324F; }
.app.a-finder::after { left: 25%; top: 60%; width: 50%; height: 12%; border-bottom: .15em solid #23324F; border-radius: 0 0 50% 50%; }

.a-browser { background: linear-gradient(160deg, #6FD3FF, #2E7BFF); }
.app.a-browser::before { inset: 18%; border-radius: 50%; border: .12em solid rgba(255, 255, 255, .9); }
.app.a-browser::after { left: 48%; top: 22%; width: 6%; height: 56%; background: #FF5A4E; transform: rotate(40deg); border-radius: 2px; }

.a-mail { background: linear-gradient(180deg, #5AB0FF, #2F6FF0); }
.app.a-mail::before { left: 18%; top: 30%; width: 64%; height: 42%; background: #fff; border-radius: 8%; }
.app.a-mail::after { left: 26%; top: 18%; width: 48%; height: 48%; border-right: .1em solid #8DB5F5; border-bottom: .1em solid #8DB5F5; transform: rotate(45deg); }

.a-cal { background: #fff; }
.app.a-cal::before { left: 0; right: 0; top: 0; height: 28%; background: #FF5A4E; }
.app.a-cal::after { left: 30%; top: 40%; width: 40%; height: 40%; border-radius: 10%; background: repeating-linear-gradient(90deg, #26304A 0 18%, transparent 18% 41%); opacity: .8; }

.a-notes { background: linear-gradient(180deg, #FFD95A 0 26%, #FFFBEA 26%); }
.app.a-notes::before { left: 20%; right: 20%; top: 42%; height: 40%; background: repeating-linear-gradient(180deg, #D8CFAE 0 8%, transparent 8% 26%); }

.a-chat { background: linear-gradient(180deg, #5BE07A, #22B24C); }
.app.a-chat::before { left: 20%; top: 24%; width: 60%; height: 44%; background: #fff; border-radius: 50%; }
.app.a-chat::after { left: 26%; top: 56%; width: 16%; height: 18%; background: #fff; transform: skewX(-30deg); }

.a-pen { background: linear-gradient(150deg, #FF9A6B, #FF5A7A); }
.app.a-pen::before { left: 44%; top: 16%; width: 12%; height: 56%; background: #fff; border-radius: 2px; transform: rotate(35deg); }
.app.a-pen::after { left: 28%; bottom: 18%; width: 20%; height: 8%; background: #fff; border-radius: 50%; }

.a-photo { background: #fff; }
.app.a-photo::before { inset: 20%; border-radius: 50%; background: conic-gradient(#FFB02E 0 60deg, #FF5A4E 0 120deg, #C34BFF 0 180deg, #4B7BFF 0 240deg, #2EC2E0 0 300deg, #5BD45F 0); }
.app.a-photo::after { inset: 38%; border-radius: 50%; background: #fff; }

.a-shape { background: linear-gradient(160deg, #2D2F45, #151726); }
.app.a-shape::before { left: 22%; top: 24%; width: 30%; height: 30%; border-radius: 50%; background: #FF6B5A; }
.app.a-shape::after { right: 20%; bottom: 22%; width: 34%; height: 34%; border-radius: 12%; background: #4F7CFF; }

.a-music { background: linear-gradient(160deg, #FF6A88, #FF2D55); }
.app.a-music::before { left: 34%; top: 22%; width: 10%; height: 44%; background: #fff; box-shadow: .9em -.15em 0 #fff; border-radius: 2px; }
.app.a-music::after { left: 24%; top: 58%; width: 22%; height: 18%; background: #fff; border-radius: 50%; box-shadow: .9em -.15em 0 #fff; }

.a-video { background: linear-gradient(160deg, #2D2F45, #0F1220); }
.app.a-video::before { left: 40%; top: 30%; border-left: .7em solid #fff; border-top: .45em solid transparent; border-bottom: .45em solid transparent; }

.a-pod { background: linear-gradient(160deg, #C86BFF, #8A2BE2); }
.app.a-pod::before { inset: 26%; border-radius: 50%; border: .12em solid #fff; }
.app.a-pod::after { left: 44%; top: 40%; width: 12%; height: 20%; background: #fff; border-radius: 40%; }

.a-game { background: linear-gradient(160deg, #3BE0C5, #12A5A0); }
.app.a-game::before { left: 18%; top: 34%; width: 64%; height: 34%; background: #fff; border-radius: 1em; }
.app.a-game::after { left: 30%; top: 46%; width: 10%; height: 10%; background: #12A5A0; border-radius: 50%; box-shadow: 1.2em 0 0 #12A5A0; }

.a-term { background: linear-gradient(160deg, #3A3F55, #1C1F2E); }
.app.a-term::before { left: 22%; top: 30%; width: 22%; height: 22%; border-right: .12em solid #5BE07A; border-bottom: .12em solid #5BE07A; transform: rotate(-45deg); }
.app.a-term::after { left: 46%; top: 62%; width: 26%; height: 8%; background: #fff; }

.a-docs { background: linear-gradient(160deg, #6E8BFF, #3D5BE0); }
.app.a-docs::before { left: 26%; top: 18%; width: 48%; height: 64%; background: #fff; border-radius: 6%; }
.app.a-docs::after { left: 34%; top: 32%; width: 32%; height: 36%; background: repeating-linear-gradient(180deg, #BFCBF5 0 12%, transparent 12% 30%); }

.a-sheet { background: linear-gradient(160deg, #4CD964, #1F9E4A); }
.app.a-sheet::before { inset: 22%; background: #fff; border-radius: 6%; }
.app.a-sheet::after { inset: 22%; background: linear-gradient(90deg, transparent 32%, #A9DDB8 32% 36%, transparent 36% 64%, #A9DDB8 64% 68%, transparent 68%), linear-gradient(180deg, transparent 30%, #A9DDB8 30% 35%, transparent 35% 63%, #A9DDB8 63% 68%, transparent 68%); }

/* Folders: a coloured squircle with a grid of mini app squares (like DockNest draws them). */
.folder {
  display: grid;
  grid-template-columns: repeat(2, 30%);
  justify-content: center;
  align-content: center;
  gap: 9%;
  padding: 0;
  box-shadow: 0 .08em .2em rgba(23, 32, 51, .25), inset 0 1px 0 rgba(255, 255, 255, .3);
}
.folder .mini { border-radius: 26%; aspect-ratio: 1; width: 100%; }
/* Hero folders carry their name at the bottom, so the apps sit higher. */
.dock .folder { align-content: start; padding-top: calc(var(--s) * .14); gap: calc(var(--s) * .07); }
.folder em {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 26%;
  display: grid; place-items: center;
  background: rgba(0, 0, 0, .2);
  color: #fff;
  font-style: normal;
  font-weight: 700;
  font-size: 1.15cqw;
  border-radius: 0 0 22% 22% / 0 0 80% 80%;
}
.f-blue { background: linear-gradient(180deg, #7B9DFF, #3D6BFF); }
.f-coral { background: linear-gradient(180deg, #FF9A8C, #FF6B5A); }
.f-green { background: linear-gradient(180deg, #5BD69A, #26B573); }
.f-amber { background: linear-gradient(180deg, #FFC772, #F2A33A); }
.f-violet { background: linear-gradient(180deg, #B39BFF, #8E6CFF); }

/* ---------- Sections ---------- */

h2 {
  margin: 0 0 2rem;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.05;
  letter-spacing: -.035em;
  font-weight: 750;
}
h3 { margin: 0 0 .5rem; font-size: 1.35rem; letter-spacing: -.02em; line-height: 1.2; }

.features, .steps, .faq {
  max-width: 76rem;
  margin: 0 auto;
  padding: clamp(3rem, 7vw, 6rem) clamp(1rem, 4vw, 3rem);
}

.feature {
  display: grid;
  gap: 1.5rem 3rem;
  align-items: center;
  padding: 2.5rem 0;
  border-top: 1px solid var(--line);
}
.feature-text p { margin: 0; color: var(--ink-2); max-width: var(--measure); }

.scene {
  position: relative;
  height: 15rem;
  border-radius: 20px;
  background: linear-gradient(180deg, #DCE6F6, #CFDCF1);
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(23, 32, 51, .06);
}

.mini-dock {
  position: absolute;
  left: 50%;
  bottom: 1.1rem;
  transform: translateX(-50%);
  display: flex;
  gap: .7rem;
  padding: .55rem .7rem;
  border-radius: 1.1rem;
  background: rgba(255, 255, 255, .5);
  border: 1px solid rgba(255, 255, 255, .8);
}
.mini-dock > * { width: 3.4rem; height: 3.4rem; }

/* Scene: drop an app on a folder */
.scene .s-flyer {
  position: absolute;
  left: calc(50% - 1.7rem);
  bottom: 1.65rem;
  width: 3.4rem;
  height: 3.4rem;
  transform: translate(-8.5rem, -8rem);
}
.scene-drop.play .s-flyer { animation: fly 1.5s var(--ease) .3s both; }
.scene-drop.play .s-target { animation: bump .4s ease 1.55s; }
@keyframes fly {
  0% { transform: translate(-8.5rem, -8rem) rotate(-6deg); }
  20% { transform: translate(-8rem, -8.6rem) rotate(-8deg) scale(1.05); }
  70% { transform: translate(-1.5rem, -3.5rem) rotate(4deg) scale(1); opacity: 1; }
  100% { transform: translate(0, 0) scale(.35); opacity: 0; }
}
@keyframes bump { 50% { transform: scale(1.15); } }
.toast {
  position: absolute;
  left: 50%;
  top: 1.2rem;
  transform: translate(-50%, -.5rem);
  padding: .45rem .9rem .45rem 2rem;
  border-radius: 999px;
  background: rgba(23, 32, 51, .82);
  color: #fff;
  font-size: .85rem;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
}
.toast::before {
  content: "";
  position: absolute;
  left: .75rem; top: 50%;
  width: .7rem; height: .7rem;
  margin-top: -.35rem;
  border-radius: 50%;
  background: var(--green);
}
.scene-drop.play .toast { animation: toast .45s var(--ease) 1.9s both; }
@keyframes toast { to { opacity: 1; transform: translate(-50%, 0); } }

/* Scene: type to find */
.mini-popup {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 15rem;
  padding: .9rem;
  border-radius: 1.1rem;
  background: rgba(250, 251, 254, .92);
  box-shadow: 0 0 0 1px rgba(23, 32, 51, .08), 0 18px 40px -20px rgba(23, 32, 51, .45);
}
.mp-search {
  display: flex; align-items: center; gap: .45rem;
  padding: .35rem .55rem;
  border-radius: .6rem;
  background: rgba(23, 32, 51, .06);
  color: var(--ink-3);
  font-size: .85rem;
  height: 1.9rem;
}
.mp-search .glass { width: .75rem; height: .75rem; border-width: 2px; }
.mp-search .glass::after { width: .35rem; height: 2px; right: -.3rem; bottom: -.25rem; }
.mp-q {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  width: 0;
  color: var(--ink);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
.mp-q::before { content: "pho"; }
.caret { width: 1.5px; height: 1rem; background: var(--blue); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.scene-type.play .mp-q { animation: typing .9s steps(3) .4s both; }
@keyframes typing { to { width: 3ch; } }
.mp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; margin-top: .8rem; justify-items: center; }
.mp { width: 3rem; height: 3rem; box-shadow: 0 2px 4px rgba(23, 32, 51, .2); transition: opacity .3s, transform .3s, box-shadow .3s; }
.scene-type.play .mp:not(.s-hit) { opacity: .2; transition-delay: 1.4s; }
.scene-type.play .s-hit { transform: scale(1.12); box-shadow: 0 0 0 3px var(--blue), 0 4px 10px rgba(23, 32, 51, .25); transition-delay: 1.4s; }

/* Scene: launcher */
.keys { position: absolute; left: 1.2rem; top: 1.2rem; display: flex; gap: .35rem; }
kbd {
  display: grid; place-items: center;
  min-width: 2.2rem; height: 2.2rem; padding: 0 .4rem;
  border-radius: .5rem;
  background: var(--paper);
  box-shadow: 0 3px 0 #B7C2D6, 0 0 0 1px #C9D2E2;
  font: 600 .95rem var(--font);
  color: var(--ink);
}
.scene-launch.play kbd { animation: keypress .25s ease both; }
.scene-launch.play kbd:nth-child(2) { animation-delay: .1s; }
.scene-launch.play kbd:nth-child(3) { animation-delay: .2s; }
@keyframes keypress { 50% { transform: translateY(3px); box-shadow: 0 0 0 #B7C2D6, 0 0 0 1px #C9D2E2; } }
.launch-grid {
  position: absolute;
  right: 1.2rem; left: 8.5rem; top: 1.2rem; bottom: 1.2rem;
  display: grid;
  grid-template-columns: repeat(4, 3.2rem);
  grid-auto-rows: 3.2rem;
  gap: 1rem 1.2rem;
  align-content: center;
  justify-content: center;
  padding: 1rem;
  border-radius: 1rem;
  background: rgba(23, 32, 51, .78);
}
.launch-grid > * { opacity: 1; }
.scene-launch.play .launch-grid { animation: launch .4s var(--ease) .45s both; }
@keyframes launch { from { opacity: 0; transform: scale(1.06); } }

/* Scene: Launchpad import */
.lp {
  position: absolute;
  left: 1.2rem; top: 50%;
  transform: translateY(-50%);
  display: grid;
  grid-template-columns: repeat(3, 2.8rem);
  gap: .6rem;
  padding: .8rem;
  border-radius: 1rem;
  background: rgba(23, 32, 51, .78);
}
.lp > * { width: 2.8rem; height: 2.8rem; }
.scene-import .arrow {
  position: absolute;
  left: 50%; top: 50%;
  width: 4rem;
  transform: translate(-50%, -50%);
  color: var(--ink-3);
}
.scene-import .arrow path { stroke-dasharray: 100; stroke-dashoffset: 0; }
.scene-import.play .arrow path { animation: draw .6s ease .3s both; }
@keyframes draw { from { stroke-dashoffset: 100; } }
.lp-dock { left: auto; right: 1.2rem; transform: none; bottom: 50%; margin-bottom: -2.3rem; }
.lp-dock > * { width: 3rem; height: 3rem; }
.scene-import.play .lp-dock > * { animation: pop .4s var(--ease) both; }
.scene-import.play .lp-dock > *:nth-child(1) { animation-delay: .8s; }
.scene-import.play .lp-dock > *:nth-child(2) { animation-delay: .95s; }
.scene-import.play .lp-dock > *:nth-child(3) { animation-delay: 1.1s; }
@keyframes pop { from { opacity: 0; transform: scale(.5); } }

.also {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 2.5rem 0 0;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 1.5rem 3rem;
}
.also li { color: var(--ink-2); max-width: var(--measure); }
.also strong { color: var(--ink); }

/* ---------- Steps (a real sequence, so it is numbered) ---------- */

.steps ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2rem;
  counter-reset: step;
}
.steps li { counter-increment: step; position: relative; padding-left: 3.25rem; }
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0; top: -.1rem;
  width: 2.25rem; height: 2.25rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-weight: 700;
}
.steps p { margin: 0; color: var(--ink-2); max-width: 26rem; }

/* ---------- Pricing ---------- */

.pricing {
  padding: clamp(3rem, 7vw, 6rem) clamp(1rem, 4vw, 3rem);
  background: var(--ink);
  color: #fff;
}
.price-block { max-width: 40rem; margin: 0 auto; text-align: center; }
.pricing h2 { margin-bottom: 1.25rem; }
.price { margin: 0 0 1.5rem; display: flex; align-items: baseline; justify-content: center; gap: .75rem; flex-wrap: wrap; }
.amount { font-size: clamp(3.5rem, 8vw, 5.5rem); font-weight: 750; letter-spacing: -.05em; line-height: 1; }
.per { color: #AEB8CC; }
.included {
  list-style: none;
  padding: 0;
  margin: 0 auto 2.25rem;
  width: max-content;
  max-width: 100%;
  display: grid;
  gap: .55rem;
  text-align: left;
  color: #DCE3F0;
}
.included li { position: relative; padding-left: 1.75rem; }
.included li::before {
  content: "";
  position: absolute;
  left: 0; top: .35rem;
  width: .9rem; height: .5rem;
  border-left: 2.5px solid #7BE0A6;
  border-bottom: 2.5px solid #7BE0A6;
  transform: rotate(-45deg);
}
.pricing .fineprint { color: #AEB8CC; }

/* ---------- FAQ ---------- */

.faq details {
  max-width: 46rem;
  border-top: 1px solid var(--line);
}
.faq details:last-of-type { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 1.15rem 2.5rem 1.15rem 0;
  position: relative;
  font-weight: 600;
  font-size: 1.1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute;
  right: .4rem; top: 50%;
  width: .6rem; height: .6rem;
  margin-top: -.45rem;
  border-right: 2px solid var(--ink-3);
  border-bottom: 2px solid var(--ink-3);
  transform: rotate(45deg);
  transition: transform .2s;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -.1rem; }
.faq details p { margin: 0 0 1.25rem; color: var(--ink-2); max-width: var(--measure); }

/* ---------- Footer ---------- */

.footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  max-width: 76rem;
  margin: 0 auto;
  padding: 2rem clamp(1rem, 4vw, 3rem) 3rem;
  color: var(--ink-3);
  font-size: .9rem;
}
.footer p { margin: 0; }
.footer nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.footer a { color: var(--ink-2); text-decoration: none; }
.footer a:hover { color: var(--ink); text-decoration: underline; }

/* ---------- Legal pages ---------- */

.legal {
  max-width: 44rem;
  margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1rem, 4vw, 2rem);
}
.legal h1 { font-size: clamp(2.2rem, 5vw, 3rem); margin-bottom: 1.5rem; }
.legal h2 { font-size: 1.35rem; margin: 2rem 0 .5rem; letter-spacing: -.01em; }
.legal p, .legal li { color: var(--ink-2); }
.legal .todo { background: #FFF2C2; color: var(--ink); padding: 0 .25rem; border-radius: 4px; }

/* ---------- Layout breakpoints ---------- */

@media (min-width: 900px) {
  .hero { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; }
  .feature { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .feature:nth-of-type(even) .feature-text { order: 2; }
  .also { grid-template-columns: 1fr 1fr; }
  .steps ol { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 640px) {
  .topbar { gap: 1rem; }
  .topbar nav { display: none; }
  .topbar .btn-small { margin-left: auto; }
  .scene { height: 13.5rem; }
  .launch-grid > .app { font-size: .65rem; }
  .launch-grid { left: 1rem; top: 4.2rem; grid-template-columns: repeat(4, 2.6rem); grid-auto-rows: 2.6rem; gap: .7rem; }
  .lp { grid-template-columns: repeat(3, 2.2rem); left: .8rem; }
  .lp > * { width: 2.2rem; height: 2.2rem; }
  .lp-dock { right: .8rem; }
  .lp-dock > * { width: 2.4rem; height: 2.4rem; }
  .scene-import .arrow { width: 2.6rem; }
}

/* Motion: people who ask for less get the final state, no movement. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-delay: 0s !important;
    transition-duration: .001ms !important;
    transition-delay: 0s !important;
  }
}

.legal h3 { font-size: 1.05rem; margin: 1.25rem 0 .35rem; }
.legal ol { padding-left: 1.25rem; }