/* HATCH! website. Colours and shapes come from the plugin: sky, meadow, low-poly hills,
   the blue casing and the three hardware buttons (FX yellow, EVOLVE coral, MIX mint). */
@font-face {
  font-family: "Familjen Grotesk";
  src: url("fonts/familjen-grotesk.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

:root {
  --ink: #17202b;
  --muted: #5b6472;
  --paper: #f6f8fb;       /* off-white with a hint of the casing blue, not pure white */
  --casing: #6289b5;      /* the blue of the HATCH! casing */
  --casing-pale: #eef3f9;
  --action: #33598a;      /* casing blue, darkened for text and buttons (7.1:1 on white) */
  --action-deep: #244876;
  --fx: #e8c97f;          /* the three hardware buttons */
  --evolve: #df8a7d;
  --mix: #8fcdb8;
  --sky: #cfe3f6;
  --meadow: #eaf3e6;
  --meadow-deep: #c9dfc4;
  --night: #18222f;
  --night-soft: #c3cedb;
  --gold: #f2cf5b;
  --rule: #d9e1ea;
  --ph: #fff1a8;
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Familjen Grotesk", system-ui, sans-serif;
  font-size: 1.125rem;
  line-height: 1.55;
}

img, video { display: block; max-width: 100%; height: auto; }

a {
  color: var(--action);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
  text-decoration-color: color-mix(in srgb, var(--casing) 70%, transparent);
}
a:hover { color: var(--action-deep); text-decoration-color: currentColor; }

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

h1, h2, h3 { line-height: 1.02; letter-spacing: -0.02em; margin: 0; }
h1 { font-size: clamp(2.7rem, 6.4vw, 5rem); font-weight: 700; }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); font-weight: 700; }
h3 { font-size: 1.25rem; font-weight: 650; letter-spacing: -0.01em; }
p { margin: 0 0 1em; }

.wrap { width: min(1120px, 100% - 40px); margin-inline: auto; }

/* placeholders: things the developer still has to fill in */
.ph { background: var(--ph); color: var(--ink); padding: 0 0.2em; border-radius: 3px; }

/* low-poly edges between bands, like the hills and mountains in the plugin */
.edge { display: block; width: 100%; height: clamp(46px, 7vw, 110px); }

/* speech bubbles, the way the Hatchies talk */
.bubble {
  position: relative; display: inline-block;
  background: #fff; color: var(--ink);
  border: 2px solid var(--ink); border-radius: 10px;
  box-shadow: 3px 3px 0 var(--ink);
  padding: 0.55em 0.85em; font-weight: 600; font-size: 1rem; line-height: 1.25;
}
.bubble::after {
  content: ""; position: absolute; width: 14px; height: 14px;
  background: #fff; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink);
}
.bubble.tail-right::after { right: -9px; top: 50%; transform: translateY(-50%) rotate(-45deg); }
.bubble.tail-down::after { left: 26px; bottom: -9px; transform: rotate(45deg); }

/* ---------- header + hero: the sky ---------- */
.sky { background: linear-gradient(180deg, var(--sky) 0%, #e4effa 45%, var(--meadow) 100%); }
.top { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 22px 0; }
.wordmark { font-weight: 700; font-size: 1.45rem; letter-spacing: -0.03em; color: var(--ink); text-decoration: none; }
.top nav { display: flex; gap: 1.4rem; font-size: 1rem; }
.top nav a { color: var(--ink); text-decoration: none; }
.top nav a:hover { text-decoration: underline; }
.top nav .dl { color: var(--action); font-weight: 650; text-decoration: underline; }

.btn {
  display: inline-flex; align-items: center; gap: 0.6em;
  background: var(--action); color: #fff;
  font: inherit; font-weight: 650; font-size: 1.15rem;
  padding: 0.85em 1.35em; min-height: 52px;
  border-radius: 8px; text-decoration: none;
  box-shadow: 0 3px 0 var(--action-deep);
  transition: background-color .15s, transform .15s, box-shadow .15s;
}
.btn:hover { background: var(--action-deep); color: #fff; transform: translateY(1px); box-shadow: 0 2px 0 #1a3558; }
.btn svg { width: 1.1em; height: 1.1em; flex: none; }
.btn.light { background: #fff; color: var(--action-deep); box-shadow: 0 3px 0 #1d3a5f; }
.btn.light:hover { background: #eef3f9; color: var(--action-deep); }
.small { font-size: 0.95rem; color: var(--muted); }
.phone-note { display: none; }
@media (hover: none) and (pointer: coarse) {
  .phone-note { display: block; }
}

.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 3rem; align-items: center; padding: 24px 0 0; }
.hero h1 { margin: 0 0 1.4rem; }
.hero .lead { font-size: 1.3rem; max-width: 30rem; margin-bottom: 2rem; }
.hero .small { margin-top: 1.1rem; max-width: 26rem; }
.free-tag {
  display: inline-block; margin-left: 0.9rem; vertical-align: middle;
  font-weight: 650; font-size: 1rem; color: var(--ink);
  background: var(--fx); border-radius: 999px; padding: 0.15em 0.75em;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.12);
  transform: rotate(-4deg);
}
.hero-pic { position: relative; margin: 0 -40px -60px 0; }
.hero-pic::before { /* the sun behind the device */
  content: ""; position: absolute; inset: 6% 2% 18% 10%;
  background: radial-gradient(closest-side, rgba(255, 236, 170, .9), rgba(255, 236, 170, 0));
  z-index: 0;
}
.hero-pic img { position: relative; z-index: 1; filter: drop-shadow(0 26px 36px rgba(30, 50, 80, .25)); transform: rotate(2deg); }
.hero-pic .bubble { position: absolute; left: -150px; top: 30%; z-index: 2; max-width: 170px; transform: rotate(-3deg); }

/* ---------- press it again: the meadow ---------- */
.meadow { background: linear-gradient(180deg, var(--meadow) 0%, #f3f8f0 100%); }
.again { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); gap: 4.5rem; align-items: center; padding: 70px 0 110px; }
.again figure { margin: 0; position: relative; }
.again video { mix-blend-mode: multiply; } /* the recording has a white background */
.again h2 { margin-bottom: 1.2rem; }
.again .txt { max-width: 29rem; }
.pause {
  position: absolute; right: 22px; bottom: 30px;
  font: inherit; font-size: 0.85rem; font-weight: 600;
  background: #fff; color: var(--ink);
  border: 2px solid var(--ink); border-radius: 999px; padding: 0.3em 0.9em; min-height: 32px; cursor: pointer;
  box-shadow: 2px 2px 0 var(--ink);
}
.keys { display: grid; grid-template-columns: auto 1fr; gap: 0.5rem 1rem; margin: 1.6rem 0 0; }
.keys dt { font-weight: 650; }
.keys dd { margin: 0; color: var(--muted); }
.keys dt::before { content: ""; display: inline-block; width: 0.7em; height: 0.7em; border-radius: 50%; background: var(--evolve); margin-right: 0.5em; vertical-align: 0.05em; }

/* ---------- listen: soft light in the casing blue ---------- */
.glow {
  background:
    radial-gradient(45% 70% at 12% 35%, rgba(98, 137, 181, .30), rgba(98, 137, 181, 0) 70%),
    radial-gradient(40% 60% at 92% 75%, rgba(143, 205, 184, .30), rgba(143, 205, 184, 0) 70%),
    linear-gradient(180deg, #f3f7fb 0%, #f7fafc 100%);
}
.listen { padding: 90px 0 100px; display: grid; grid-template-columns: 1fr 1.6fr; gap: 3rem; align-items: center; }
.listen h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); margin-bottom: 0.8rem; }
.card { background: #fff; border: 1px solid var(--rule); border-radius: 14px; padding: 6px 24px; box-shadow: 0 12px 30px rgba(30, 50, 80, .08); }
.tracks { list-style: none; margin: 0; padding: 0; }
.tracks li { display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 1rem; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.tracks li:last-child { border-bottom: 0; }
.play {
  width: 46px; height: 46px; border-radius: 50%;
  border: 0; cursor: pointer; display: grid; place-items: center; padding: 0;
  background: var(--evolve); box-shadow: inset 0 -3px 0 rgba(0,0,0,.18);
}
.play.fx { background: var(--fx); }
.play.mix { background: var(--mix); }
.play svg { width: 16px; height: 16px; color: var(--ink); }
.play .ic-pause { display: none; }
.play[aria-pressed="true"] .ic-play { display: none; }
.play[aria-pressed="true"] .ic-pause { display: block; }
.play:hover { filter: brightness(1.05); }
.tracks b { display: block; font-weight: 650; }
.tracks .meta, .tracks .len { color: var(--muted); font-size: 0.95rem; font-variant-numeric: tabular-nums; }

/* ---------- how it works ---------- */
.how { padding: 100px 0 110px; }
.how h2 { margin-bottom: 2.6rem; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 2.2rem; align-items: start; }
.steps li:nth-child(2) { margin-top: 70px; }
.steps li:nth-child(3) { margin-top: 20px; }
.steps img { border-radius: 16px; box-shadow: 0 14px 30px rgba(30, 50, 80, .16); }
.steps li:nth-child(1) img { transform: rotate(-1.5deg); }
.steps li:nth-child(3) img { transform: rotate(1deg); }
.steps h3 { margin: 1.4rem 0 0.4rem; display: flex; align-items: baseline; gap: 0.55rem; }
.steps .n { font-size: 2.4rem; font-weight: 700; line-height: 1; color: var(--fx); -webkit-text-stroke: 1px #b0923f; }
.steps li:nth-child(2) .n { color: var(--evolve); -webkit-text-stroke-color: #a4574c; }
.steps li:nth-child(3) .n { color: var(--mix); -webkit-text-stroke-color: #4f9580; }
.steps p { color: var(--muted); max-width: 22rem; }

/* ---------- collect: blue with a gold glow for the rare one ---------- */
.collect {
  background:
    radial-gradient(38% 50% at 78% 72%, rgba(242, 207, 91, .45), rgba(242, 207, 91, 0)),
    linear-gradient(160deg, #e3edf8 0%, var(--casing-pale) 60%, #f7f1e1 100%);
  padding: 100px 0;
}
.collect .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4rem; align-items: center; }
.collect .txt { max-width: 30rem; }
.collect h2 { margin-bottom: 1.3rem; }
.collect .pics { position: relative; margin: 0; }
.collect .pics .dev { width: 82%; filter: drop-shadow(0 22px 30px rgba(30, 50, 80, .2)); }
.collect .pics .rare { position: absolute; width: 46%; right: 0; bottom: -40px; border-radius: 14px; border: 6px solid #fff; box-shadow: 0 0 0 2px var(--gold), 0 16px 34px rgba(150, 110, 20, .35); transform: rotate(3deg); }
.collect .pics figcaption { position: absolute; right: 2%; bottom: -84px; font-size: 0.95rem; color: var(--muted); }

/* ---------- multilevel: mint, with a keyboard where every key is different ---------- */
.mint { background: linear-gradient(180deg, #e2f3ec 0%, #f2faf6 100%); }
.multi { padding: 100px 0 40px; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 4rem; align-items: center; }
.multi h2 { font-size: clamp(2.2rem, 4.6vw, 3.8rem); margin-bottom: 1.2rem; }
.multi p { font-size: 1.25rem; max-width: 30rem; }
.multi .shot { position: relative; margin: 0; }
.multi .frame { position: relative; transform: rotate(1.5deg); }
.multi .shot img { border-radius: 16px; box-shadow: 0 18px 36px rgba(30, 50, 80, .18); }
.multi .ring { /* marks the MULTILEVEL switch in the screenshot */
  position: absolute; left: 28.6%; top: 86.2%; width: 9%; aspect-ratio: 1;
  translate: -50% -50%;
  border: 3px solid var(--evolve); border-radius: 50%;
  box-shadow: 0 0 0 5px rgba(223, 138, 125, .28);
}
.multi .shot figcaption { margin-top: 1rem; font-size: 0.95rem; color: var(--muted); }
.multi .shot figcaption::before { content: ""; display: inline-block; width: 0.7em; height: 0.7em; border-radius: 50%; border: 2px solid var(--evolve); margin-right: 0.5em; vertical-align: -0.05em; }
.piano { position: relative; display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; height: 170px; max-width: 520px; margin-top: 2.2rem; padding: 12px; background: #26313f; border-radius: 14px; box-shadow: 0 0 0 4px #4f6f96, 0 18px 30px rgba(30,50,80,.22); }
.ml-demos { padding: 30px 0 100px; }
.ml-demos .card { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 2rem; padding: 18px 24px; }
.ml-demos .tracks { display: contents; }
.ml-demos .tracks li { border: 0; padding: 8px 0; }
.ml-demos h3 { font-size: 1.1rem; margin-bottom: 0.9rem; }
.piano i { display: block; border-radius: 0 0 7px 7px; background: linear-gradient(180deg, #fff 0%, #fff 48%, var(--k) 100%); box-shadow: inset 0 -5px 0 rgba(0,0,0,.12); }
.piano i:nth-child(1) { --k: var(--fx); }
.piano i:nth-child(2) { --k: var(--evolve); }
.piano i:nth-child(3) { --k: var(--mix); }
.piano i:nth-child(4) { --k: #9fc0e6; }
.piano i:nth-child(5) { --k: var(--gold); }
.piano i:nth-child(6) { --k: #b9d9a6; }
.piano i:nth-child(7) { --k: #e9a7c3; }
.piano i:nth-child(8) { --k: #a9dde3; }
.piano b { position: absolute; top: 12px; width: 7%; height: 54%; background: linear-gradient(180deg, #3a4656, #1b232e); border-radius: 0 0 5px 5px; }
.piano b:nth-of-type(1) { left: 14.5%; } .piano b:nth-of-type(2) { left: 26.5%; }
.piano b:nth-of-type(3) { left: 50.5%; } .piano b:nth-of-type(4) { left: 62.5%; } .piano b:nth-of-type(5) { left: 74.5%; }
.piano-cap { margin: 0.9rem 0 0; font-size: 0.95rem; color: var(--muted); }

/* ---------- the rest of the features ---------- */
.more { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 4rem; padding: 100px 0 110px; align-items: start; }
.more h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); margin-bottom: 1.4rem; }
.feat { margin: 0; }
.feat div { display: grid; grid-template-columns: 11rem 1fr; gap: 1rem; padding: 16px 0; border-top: 1px solid var(--rule); }
.feat div:last-child { border-bottom: 1px solid var(--rule); }
.feat dt { font-weight: 650; }
.feat dd { margin: 0; color: var(--muted); }
.shots { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0; }
.shots img { border-radius: 14px; box-shadow: 0 10px 24px rgba(30, 50, 80, .14); }
.shots img:last-of-type { margin-top: 48px; }
.shots figcaption { grid-column: 1 / -1; font-size: 0.95rem; color: var(--muted); }

/* ---------- note from the developer: warm ---------- */
.warm { background: linear-gradient(180deg, #fdf6e6 0%, #fbeee9 100%); }
.note { padding: 90px 0; }
.note blockquote { margin: 0; max-width: 40rem; font-size: 1.35rem; line-height: 1.5; }
.note blockquote { border-left: 4px solid var(--evolve); padding-left: 1.4rem; }
.note cite { display: block; margin-top: 1rem; font-style: normal; font-size: 1rem; color: var(--muted); }

/* ---------- install ---------- */
.install { padding: 100px 0 100px; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr); gap: 4rem; }
.install h2 { margin-bottom: 1.4rem; }
.install h3 { margin-bottom: 0.8rem; }
.req { list-style: none; margin: 0 0 1rem; padding: 0; }
.req li { padding: 8px 0; border-bottom: 1px solid var(--rule); }
.req .sub { color: var(--muted); display: block; font-size: 0.95rem; }
.inst { margin: 0; padding-left: 1.3rem; }
.inst li { padding-left: 0.4rem; margin-bottom: 1.1rem; }
.inst li::marker { font-weight: 700; color: var(--action); }
.warn { margin-top: 0.7rem; background: var(--casing-pale); border-radius: 10px; padding: 14px 16px; font-size: 1rem; }
.warn b { display: block; }
code { font-size: 0.92em; background: var(--casing-pale); padding: 0.1em 0.35em; border-radius: 4px; display: inline-block; margin-top: 0.3rem; white-space: nowrap; }

/* ---------- newsletter, not active yet ---------- */
.news { padding: 0 0 110px; }
.news .box { border: 2px dashed #b8c4d3; border-radius: 14px; padding: 32px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 2.5rem; background: linear-gradient(135deg, #f7fafd, #fff); }
.news h2 { font-size: 1.7rem; margin-bottom: 0.6rem; }
.news fieldset { border: 0; margin: 0; padding: 0; opacity: .55; }
.news label { display: block; font-size: 1rem; }
.news input[type="email"] { width: 100%; font: inherit; font-size: 1rem; padding: 12px 14px; border: 1px solid #b8c4d3; border-radius: 8px; margin: 6px 0 14px; background: #fff; }
.news .check { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; font-size: 0.95rem; color: var(--muted); margin-bottom: 16px; }
.news .check input { width: 20px; height: 20px; margin-top: 2px; }
.news button { font: inherit; font-weight: 650; padding: 12px 20px; border-radius: 8px; border: 0; background: #9aa6b4; color: #fff; }
.soon { display: inline-block; font-size: 0.9rem; font-weight: 650; color: var(--ink); background: var(--mix); border-radius: 999px; padding: 0.1em 0.7em; margin-bottom: 0.8rem; }

/* ---------- last call: the casing ---------- */
.casing { background: linear-gradient(180deg, #4a72a2 0%, #33598a 70%, #2d5486 100%); color: #fff; }
.casing .small { color: #e3ecf6; }
.last { padding: 50px 0 100px; display: grid; grid-template-columns: auto 1fr; gap: 3.5rem; align-items: center; }
.last .pic { position: relative; }
.last img { width: 220px; transform: rotate(-4deg); filter: drop-shadow(0 18px 26px rgba(5, 20, 45, .4)); }
.last .bubble { position: absolute; right: -60px; top: 6px; transform: rotate(4deg); }
.last h2 { margin-bottom: 1.5rem; font-size: clamp(2.2rem, 4.4vw, 3.6rem); }
.last .small { margin-top: 1.1rem; }

/* ---------- footer ---------- */
.foot { background: var(--night); color: var(--night-soft); padding: 34px 0 50px; font-size: 0.95rem; }
.foot .wrap { display: flex; flex-wrap: wrap; gap: 0.6rem 2rem; justify-content: space-between; }
.foot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 1.6rem; }
.foot a { color: var(--night-soft); text-decoration-color: rgba(195, 206, 219, .5); }
.foot a:hover { color: #fff; }

/* plain text pages (legal notice, privacy) */
.plain { max-width: 44rem; padding: 40px 0 100px; }
.plain h1 { font-size: clamp(2.2rem, 5vw, 3.2rem); margin-bottom: 1.6rem; }
.plain h2 { font-size: 1.4rem; margin: 2rem 0 0.6rem; }
.plain hr { border: 0; border-top: 1px solid rgba(0, 0, 0, .15); margin: 3rem 0 1rem; }
/* long legal text (privacy policy) */
.legal { overflow-wrap: anywhere; }
.legal h3 { font-size: 1.1rem; margin: 1.5rem 0 0.4rem; }
.legal ul { padding-left: 1.2rem; }
.legal li { margin: 0.35rem 0; }
.legal .lang-switch { margin: -0.8rem 0 1.6rem; }
.legal .lang-note { background: var(--ph); padding: 0.7rem 0.9rem; border-radius: 6px; }
.legal .lang-title { font-size: clamp(1.8rem, 4vw, 2.4rem); margin-top: 1.4rem; }
.legal hr { border: 0; border-top: 1px solid rgba(0, 0, 0, .15); margin: 4rem 0 2rem; }
.legal .glossary li, .legal .m-elements li { font-size: 0.97rem; }

/* tablet and phone */
@media (max-width: 900px) {
  .hero, .again, .listen, .collect .wrap, .multi, .more, .install, .news .box { grid-template-columns: 1fr; }
  .hero { gap: 2rem; }
  .hero-pic { margin: 0 auto -30px; max-width: 440px; }
  .hero-pic .bubble { left: -6px; top: 4%; }
  .again { padding: 50px 0 70px; gap: 2rem; }
  .again figure { max-width: 420px; }
  .listen { padding: 70px 0; gap: 2rem; }
  .how { padding: 70px 0 80px; }
  .steps { grid-template-columns: 1fr; gap: 3rem; }
  .steps li:nth-child(n) { margin-top: 0; }
  .steps li { max-width: 440px; }
  .collect { padding: 70px 0; }
  .collect .pics { margin-bottom: 70px; max-width: 460px; }
  .multi { padding: 70px 0; gap: 2.5rem; }
  .piano { height: 150px; }
  .multi .shot { max-width: 420px; }
  .ml-demos { padding: 10px 0 70px; }
  .ml-demos .card { grid-template-columns: 1fr; }
  .more { gap: 2.5rem; padding: 70px 0 80px; }
  .note { padding: 70px 0; }
  .install { gap: 2.5rem; padding: 70px 0; }
  .last { grid-template-columns: 1fr; gap: 2rem; padding-bottom: 80px; }
  .last img { width: 160px; }
  .last .pic { justify-self: start; }
  .last .bubble { right: -110px; }
}
@media (max-width: 560px) {
  body { font-size: 1.0625rem; }
  .top nav a:not(.dl) { display: none; }
  .hero .lead { font-size: 1.15rem; }
  .hero-pic .bubble { display: none; }
  .btn { width: 100%; justify-content: center; }
  .feat div { grid-template-columns: 1fr; gap: 0.2rem; }
  .news .box { padding: 22px; }
  .tracks li { grid-template-columns: 52px 1fr; }
  .card { padding: 4px 16px; }
  .tracks .len { display: none; }
  .piano { height: 130px; padding: 8px; gap: 3px; }
  .piano b { top: 8px; }
  code { white-space: normal; overflow-wrap: anywhere; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* =========================================================
   Brand: Unemployed Sounds (header on every page)
   ========================================================= */
.brand { display: inline-flex; align-items: center; gap: 0.55rem; font-weight: 700; font-size: 1.15rem; letter-spacing: -0.02em; color: var(--ink); text-decoration: none; }
.brand img { width: 22px; height: auto; }
.crumb { display: flex; align-items: center; gap: 0.7rem; }
.crumb > span[aria-hidden] { color: #9aa6b4; }
.crumb .wordmark { font-size: 1.15rem; }

/* =========================================================
   Start page (index.html)
   ========================================================= */
.home-top { background:
    radial-gradient(50% 90% at 85% 0%, rgba(98, 137, 181, .22), rgba(98, 137, 181, 0) 70%),
    radial-gradient(40% 70% at 0% 30%, rgba(143, 205, 184, .18), rgba(143, 205, 184, 0) 70%); }
.intro { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 3rem; align-items: end; padding: 70px 0 60px; }
.intro h1 { font-size: clamp(2.8rem, 6.8vw, 5.6rem); }
.intro p { font-size: 1.25rem; max-width: 26rem; margin: 0; }

/* flagship card: HATCH! in its own world */
.flag {
  position: relative; overflow: hidden;
  border-radius: 28px;
  background: linear-gradient(180deg, var(--sky) 0%, #e4effa 50%, var(--meadow) 100%);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: 2rem; align-items: center;
  padding: 56px 56px 0;
  box-shadow: 0 30px 60px rgba(30, 50, 80, .10);
}
.flag .txt { padding-bottom: 70px; position: relative; z-index: 2; }
.flag .label { display: inline-block; font-weight: 650; font-size: 0.95rem; background: var(--fx); border-radius: 999px; padding: 0.15em 0.75em; margin-bottom: 1.2rem; transform: rotate(-3deg); }
.flag h2 { font-size: clamp(3rem, 7vw, 5.4rem); margin-bottom: 1rem; }
.flag p { font-size: 1.2rem; max-width: 26rem; }
.flag .row { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; margin-top: 1.8rem; }
.flag .pic { position: relative; z-index: 1; align-self: end; margin-bottom: -60px; }
.flag .pic img { transform: rotate(3deg); filter: drop-shadow(0 26px 36px rgba(30, 50, 80, .25)); }
.flag .edge { position: absolute; left: 0; right: 0; bottom: 0; z-index: 0; }

/* section heads */
.home-sec { padding: 110px 0 0; }
.home-sec .head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.8rem; flex-wrap: wrap; }
.home-sec .head p { margin: 0; color: var(--muted); }

/* product tiles */
.tiles { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 22px; }
.tile { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); gap: 1.5rem; align-items: center; background: #fff; border: 1px solid var(--rule); border-radius: 20px; padding: 22px; color: var(--ink); text-decoration: none; transition: box-shadow .15s, transform .15s; }
a.tile:hover { box-shadow: 0 16px 34px rgba(30, 50, 80, .12); transform: translateY(-2px); color: var(--ink); }
.tile img { border-radius: 12px; width: 100%; aspect-ratio: 5 / 4; object-fit: cover; object-position: 50% 62%; }
.tile h3 { font-size: 1.6rem; margin-bottom: 0.4rem; }
.tile p { color: var(--muted); margin-bottom: 0.8rem; }
.tile .more-link { color: var(--action); font-weight: 650; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.18em; }
.tile.soon { display: flex; flex-direction: column; justify-content: center; background: transparent; border: 2px dashed #c3cedb; }
.tile.soon h3 { color: var(--muted); }

/* sound kits, coming later */
.kits { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.kit { aspect-ratio: 1; border-radius: 16px; position: relative; overflow: hidden; display: flex; align-items: flex-end; padding: 16px; font-weight: 650; color: var(--ink); }
.kit::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, rgba(255,255,255,.0) 0 14px, rgba(255,255,255,.22) 14px 15px); }
.kit span { position: relative; z-index: 1; background: rgba(255,255,255,.85); border-radius: 999px; padding: 0.15em 0.7em; font-size: 0.9rem; }
.kit.a { background: linear-gradient(150deg, #f6dfa6, var(--fx)); }
.kit.b { background: linear-gradient(150deg, #f4c3ba, var(--evolve)); }
.kit.c { background: linear-gradient(150deg, #c9eadf, var(--mix)); }
.kit.d { background: linear-gradient(150deg, #cfe0f3, var(--casing)); }

/* about */
.about { margin-top: 110px; }
.about .wrap { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3.5rem; align-items: center; padding: 90px 0; }
.about .mark { width: 120px; }
.about h2 { margin-bottom: 1rem; }
.about p { font-size: 1.2rem; max-width: 38rem; }

.home-news { padding: 100px 0 110px; }

@media (max-width: 900px) {
  .intro { grid-template-columns: 1fr; gap: 1.4rem; padding: 40px 0 36px; }
  .flag { grid-template-columns: 1fr; padding: 34px 26px 0; border-radius: 22px; }
  .flag .txt { padding-bottom: 0; }
  .flag .pic { max-width: 340px; margin: 0 auto -40px; }
  .home-sec { padding-top: 80px; }
  .tiles { grid-template-columns: 1fr; }
  .kits { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .about { margin-top: 80px; }
  .about .wrap { grid-template-columns: 1fr; gap: 1.6rem; padding: 70px 0; }
  .about .mark { width: 80px; }
  .home-news { padding: 70px 0 80px; }
}
@media (max-width: 560px) {
  .tile { grid-template-columns: 1fr; }
  .flag .row .btn { width: 100%; justify-content: center; }
}

@media (max-width: 560px) {
  .crumb .brand { font-size: 0; gap: 0; }        /* only the U on phones, the name would wrap next to HATCH! */
  .crumb .brand img { width: 20px; }
}

/* =========================================================
   Product page order (21.10.2026): strongest feature first
   ========================================================= */
.nr { font-size: 0.95rem; font-weight: 700; color: var(--action); letter-spacing: 0.04em; margin: 0 0 0.5rem; font-variant-numeric: tabular-nums; }
.feat-intro { padding: 30px 0 50px; }
.feat-intro h2 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); margin-bottom: 0.5rem; }
.feat-intro p { color: var(--muted); margin: 0; }
.multi .nr { margin-bottom: 0.7rem; }

/* 03 + 04 side by side */
.pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4rem; padding: 100px 0; }
.pair h2 { font-size: clamp(1.7rem, 2.8vw, 2.3rem); margin-bottom: 1rem; }
.pair p { color: var(--muted); max-width: 28rem; }
.chips { list-style: none; margin: 1.4rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.chips li { font-weight: 650; font-size: 0.95rem; letter-spacing: 0.03em; padding: 0.4em 0.9em; border-radius: 8px; background: var(--chip, var(--casing-pale)); color: var(--ink); }
.chips .c-tex { --chip: #e3e4ea; } .chips .c-amb { --chip: #d6ecf5; } .chips .c-gli { --chip: #d9defa; }
.chips .c-bod { --chip: #f6dccf; } .chips .c-wei { --chip: #dcefc8; }
.mini { margin: 0; }
.mini div { display: grid; grid-template-columns: 8rem 1fr; gap: 1rem; padding: 12px 0; border-top: 1px solid var(--rule); }
.mini div:last-child { border-bottom: 1px solid var(--rule); }
.mini dt { font-weight: 650; }
.mini dd { margin: 0; color: var(--muted); }

/* 05 FX and MIX */
.fxmix { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem 3rem; padding: 90px 0 100px; }
.fxmix .head { grid-column: 1 / -1; }
.fxmix h2 { font-size: clamp(1.7rem, 2.8vw, 2.3rem); }
.fxmix figure { margin: 0; }
.fxmix img { border-radius: 14px; box-shadow: 0 14px 30px rgba(30, 50, 80, .14); }
.fxmix figcaption { margin-top: 1.1rem; max-width: 30rem; color: var(--muted); }
.fxmix figcaption b { display: block; color: var(--ink); font-size: 1.15rem; margin-bottom: 0.2rem; }

/* 06 and 08: short rows */
.row { display: grid; grid-template-columns: 4rem minmax(0, 1fr); gap: 1rem; padding: 80px 0; align-items: baseline; }
.row h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); margin-bottom: 0.6rem; }
.row p:not(.nr) { color: var(--muted); max-width: 36rem; margin: 0; }
.collect .nr { margin-bottom: 0.7rem; }

/* FAQ: plain list, no accordion */
.faq { padding: 20px 0 100px; }
.faq h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); margin-bottom: 1.2rem; }
.faq dl { margin: 0; max-width: 46rem; }
.faq div { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1rem; padding: 14px 0; border-top: 1px solid var(--rule); }
.faq div:last-child { border-bottom: 1px solid var(--rule); }
.faq dt { font-weight: 650; }
.faq dd { margin: 0; color: var(--muted); }
.install + .faq { padding-top: 0; }

@media (max-width: 900px) {
  .pair, .fxmix { grid-template-columns: 1fr; gap: 2.5rem; padding: 70px 0; }
  .fxmix figure { max-width: 440px; }
  .row { grid-template-columns: 1fr; gap: 0; padding: 60px 0; }
  .faq div { grid-template-columns: 1fr; gap: 0.2rem; }
}

/* =========================================================
   Big section titles + The Workflow (21.10.2026)
   ========================================================= */
@font-face {
  font-family: "Unbounded";
  src: url("fonts/unbounded.woff2") format("woff2");
  font-weight: 200 900;
  font-display: swap;
}
.big-title {
  font-family: "Unbounded", "Familjen Grotesk", sans-serif;
  font-weight: 800; font-size: clamp(2.4rem, 6.2vw, 5rem);
  letter-spacing: -0.03em; line-height: 1; text-align: center;
  margin: 0 auto 0.9rem;
}
.big-sub { text-align: center; color: var(--muted); font-size: 1.15rem; margin: 0 auto 3.2rem; max-width: 34rem; }
.how .big-title { margin-top: 10px; }
.how > h2.big-title + .big-sub + .steps { margin-top: 0; }

/* video placeholder under the three steps */
.video-ph {
  margin: 4.5rem auto 0; max-width: 900px; aspect-ratio: 16 / 9;
  border-radius: 20px; border: 2px dashed #b8c4d3;
  background:
    radial-gradient(60% 80% at 30% 20%, rgba(98, 137, 181, .18), rgba(98, 137, 181, 0) 70%),
    radial-gradient(50% 70% at 80% 90%, rgba(143, 205, 184, .22), rgba(143, 205, 184, 0) 70%),
    #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; text-align: center;
}
.vp-play { width: 78px; height: 78px; border-radius: 50%; background: var(--evolve); color: var(--ink); display: grid; place-items: center; box-shadow: inset 0 -4px 0 rgba(0,0,0,.15); }
.vp-play svg { width: 30px; height: 30px; margin-left: 4px; }
.vp-txt b { display: block; font-size: 1.2rem; }
.vp-txt span { color: var(--muted); font-size: 0.95rem; }

/* ---------- the workflow ---------- */
.workflow {
  padding: 110px 0 120px;
  background: linear-gradient(180deg, var(--paper) 0%, #eaf2fb 12%, #e6f4ee 40%, #fbf1e4 66%, #f8f0d8 88%, var(--paper) 100%);
}
.flow { list-style: none; margin: 0; padding: 0; position: relative; --rail: #9fb6d1; }
.flow::before {   /* the line everything hangs on */
  content: ""; position: absolute; left: 50%; top: 10px; bottom: 30px; width: 0;
  border-left: 3px dashed var(--rail); translate: -1.5px 0;
}
.step { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 96px minmax(0, 1fr); align-items: center; padding: 30px 0 70px; }
.step .node { grid-column: 2; grid-row: 1; justify-self: center; align-self: start; margin-top: 4px; }
.step .txt { grid-column: 1; grid-row: 1; justify-self: end; max-width: 27rem; text-align: right; }
.step .media { grid-column: 3; grid-row: 1; margin: 0; max-width: 420px; }
.step:nth-child(even) .txt { grid-column: 3; justify-self: start; text-align: left; }
.step:nth-child(even) .media { grid-column: 1; justify-self: end; }
.step .txt h3 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1.05; letter-spacing: -0.02em; margin-bottom: 0.8rem; }
.step .txt p { color: var(--muted); }
.step .txt p b { color: var(--ink); }
.step .keys { justify-content: start; }
.step:not(:nth-child(even)) .keys { margin-left: auto; width: max-content; }

.node {
  position: relative; z-index: 1;
  display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%;
  font-family: "Unbounded", sans-serif; font-weight: 800; font-size: 1.35rem; color: var(--ink);
  background: var(--c, var(--fx)); box-shadow: 0 0 0 7px var(--paper), 0 0 0 9px var(--rail), inset 0 -4px 0 rgba(0,0,0,.14);
}
.node.c1 { --c: #cfe0f3; } .node.c2 { --c: var(--evolve); } .node.c3 { --c: var(--mix); }
.node.c4 { --c: var(--fx); } .node.c5 { --c: #e9c6dd; font-size: 1.05rem; } .node.c6 { --c: var(--gold); }
.optional .node { background: #fff; border: 3px dashed var(--mix); box-shadow: 0 0 0 7px var(--paper), inset 0 -3px 0 rgba(0,0,0,.06); }
.tag { display: inline-block; font-size: 0.85rem; font-weight: 650; background: #fff; border: 1px solid var(--mix); color: #2f6b58; border-radius: 999px; padding: 0.1em 0.7em; margin-bottom: 0.7rem; }

/* pictures in the flow */
.flow .frame { position: relative; }
.flow .frame img, .pair-shots img { border-radius: 16px; box-shadow: 0 16px 34px rgba(30, 50, 80, .16); }
.flow .ring {
  position: absolute; left: var(--x); top: var(--y); width: var(--d); aspect-ratio: 1; translate: -50% -50%;
  border: 3px solid var(--evolve); border-radius: 50%; box-shadow: 0 0 0 5px rgba(223, 138, 125, .28);
}
.flow figcaption { margin-top: 0.8rem; font-size: 0.95rem; color: var(--muted); }
.flow video { border-radius: 26px; mix-blend-mode: multiply; }
.flow .media .pause { right: 18px; bottom: 26px; }
.step .media { position: relative; }
.pair-shots { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 520px !important; }
.pair-shots img:last-child { margin-top: 40px; }
.step .piano { height: 120px; max-width: 360px; margin: 1.6rem 0 0 auto; }
.step .wide { grid-column: 1 / -1; grid-row: 2; margin-top: 2.6rem; position: relative; z-index: 1; }
.step .wide h4 { font-size: 1.05rem; margin: 0 0 0.8rem; text-align: center; }
.step .wide .card { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 2rem; padding: 18px 24px; max-width: 900px; margin: 0 auto; }
.step .wide .tracks { display: contents; }
.step .wide .tracks li { border: 0; padding: 8px 0; }
.step.last { padding-bottom: 20px; }
.step .pics { margin: 0; }

/* the fork: export OR preset */
.fork { position: relative; z-index: 1; padding: 0 0 10px; color: var(--rail); }
.fork .split, .fork .join { display: block; width: 50%; height: 70px; margin: 0 auto; }
.fork .or { text-align: center; margin: 0.4rem 0 1.4rem; font-family: "Unbounded", sans-serif; font-weight: 700; font-size: 0.95rem; color: var(--ink); background: var(--paper); width: max-content; margin-inline: auto; padding: 0.3em 1em; border-radius: 999px; border: 2px dashed var(--rail); }
.ways { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; color: var(--ink); }
.way { background: rgba(255,255,255,.75); border: 1px solid var(--rule); border-radius: 22px; padding: 26px 26px 30px; text-align: center; }
.way .node { margin: -58px auto 1rem; }
.way h3 { font-size: 1.5rem; letter-spacing: -0.02em; margin-bottom: 0.5rem; }
.way p { color: var(--muted); max-width: 24rem; margin: 0 auto 1.4rem; }
.way .frame { max-width: 320px; margin: 0 auto; }
.ways { padding-top: 34px; }
.fork + .step { padding-top: 20px; }

/* side note */
.anytime { margin: 3rem auto 0; max-width: 720px; background: #fff; border: 1px solid var(--rule); border-radius: 18px; padding: 24px 28px; }
.anytime h3 { font-size: 1.15rem; margin-bottom: 0.6rem; }

@media (max-width: 900px) {
  .workflow { padding: 80px 0; }
  .flow::before { left: 32px; }
  .step { grid-template-columns: 64px minmax(0, 1fr); gap: 0 18px; padding: 10px 0 50px; }
  .step .node { grid-column: 1; grid-row: 1; }
  .step .txt, .step:nth-child(even) .txt { grid-column: 2; grid-row: 1; justify-self: start; text-align: left; }
  .step .media, .step:nth-child(even) .media { grid-column: 2; grid-row: 2; justify-self: start; margin-top: 1.4rem; }
  .step:not(:nth-child(even)) .keys { margin-left: 0; }
  .step .piano { margin-left: 0; }
  .step .wide { grid-column: 2; grid-row: 3; }
  .step .wide h4 { text-align: left; }
  .step .wide .card { grid-template-columns: 1fr; }
  .fork .split, .fork .join { display: none; }
  .ways { grid-template-columns: 1fr; gap: 3.4rem; padding-left: 82px; }
  .fork .or { margin-left: 82px; }
  .way { text-align: left; padding: 22px; }
  .way .node { margin: -54px 0 0.8rem; }
  .way p { margin-left: 0; }
  .way .frame { margin: 0; }
  .video-ph { margin-top: 3rem; border-radius: 14px; }
  .vp-play { width: 60px; height: 60px; }
}
@media (max-width: 560px) {
  .ways { padding-left: 0; }
  .fork .or { margin-left: auto; }
  .pair-shots { gap: 10px; }
  .big-sub { margin-bottom: 2.2rem; }
}

/* the other section titles share the display face, just smaller */
#listen-h, #install-h, #faq-h, #last-h { font-family: "Unbounded", "Familjen Grotesk", sans-serif; font-weight: 800; letter-spacing: -0.03em; }
#last-h { font-size: clamp(1.9rem, 3.8vw, 3rem); }

/* sharper, bigger pictures in the workflow (21.10.2026, round 2) */
.step .media { max-width: 460px; }
.step .wide.pair-shots { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 920px !important; margin: 2.4rem auto 0; }
.step .wide.pair-shots figure { margin: 0; }
.step .wide.pair-shots img { margin-top: 0 !important; }
.step .wide.pair-shots figcaption { text-align: center; font-weight: 700; color: var(--ink); margin-top: 0.6rem; }
.way .frame { max-width: 380px; }

/* any time: four tiles with small drawings */
.anytime { max-width: 1040px; padding: 30px; }
.anytime > h3 { text-align: center; font-family: "Unbounded", sans-serif; font-weight: 800; font-size: 1.35rem; letter-spacing: -0.02em; margin-bottom: 1.4rem; }
.tiles4 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.tiles4 li { background: var(--paper); border-radius: 16px; padding: 18px 18px 20px; }
.tiles4 svg { display: block; width: 100%; height: auto; margin-bottom: 0.9rem; }
.tiles4 b { display: block; font-size: 1.1rem; margin-bottom: 0.25rem; }
.tiles4 span { color: var(--muted); font-size: 0.95rem; line-height: 1.45; display: block; }

@media (max-width: 900px) {
  .step .wide.pair-shots { grid-column: 2; grid-row: 3; gap: 12px; margin-top: 1.4rem; }
  .tiles4 { grid-template-columns: 1fr 1fr; }
  .anytime { padding: 22px; }
}
@media (max-width: 560px) {
  .step .wide.pair-shots { grid-template-columns: 1fr; }
  .tiles4 { grid-template-columns: 1fr; }
}

.ways { align-items: stretch; }
.way { display: flex; flex-direction: column; }
.way .frame { margin-top: auto; }
.way:first-child .frame { max-width: 100%; }
.step.last .media { max-width: 520px; }
.step.last .pics .dev { width: 78%; }
.step.last .pics .rare { width: 52%; }

.way .frame { margin-top: 0; }
.way:first-child { justify-content: center; }
@media (max-width: 560px) {
  .tiles4 li { display: grid; grid-template-columns: 42% 1fr; gap: 0 14px; align-items: center; padding: 14px; }
  .tiles4 svg { grid-row: span 2; margin: 0; }
  .tiles4 b { align-self: end; }
  .tiles4 span { align-self: start; }
}
.way:first-child { justify-content: flex-start; }
.way:first-child .frame { margin-block: auto; }

/* =========================================================
   Round 3 (21.10.2026)
   ========================================================= */
/* mid-page download call, right before the workflow */
.mid-cta {
  background:
    radial-gradient(50% 120% at 15% 50%, rgba(232, 201, 127, .35), rgba(232, 201, 127, 0) 70%),
    radial-gradient(45% 120% at 88% 40%, rgba(143, 205, 184, .35), rgba(143, 205, 184, 0) 70%),
    linear-gradient(180deg, #e9f1fa, #eef4fb);
  padding: 80px 0 86px; text-align: center;
}
.mid-cta h2 { font-family: "Unbounded", sans-serif; font-weight: 800; letter-spacing: -0.03em; font-size: clamp(1.8rem, 3.6vw, 2.8rem); line-height: 1.1; max-width: 22ch; margin: 0 auto 0.8rem; }
.mid-cta p { color: var(--muted); margin: 0 auto 1.6rem; }
.mid-cta .btn { font-size: 1.2rem; padding: 0.95em 1.6em; }
.mid-cta .small { margin: 1rem auto 0; }
.workflow { padding-top: 90px; }

/* no white boxes in the fork, same look as the rest of the workflow */
.way { background: none; border: 0; padding: 26px 0 0; }
.ways { gap: 4rem; }

/* play it like an instrument: own section, two big tiles */
.playable { padding: 100px 0 110px; background: linear-gradient(180deg, var(--paper), #eef4fb 50%, var(--paper)); }
.tiles2 { list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; max-width: 980px; }
.tiles2 li { text-align: center; }
.tiles2 svg { display: block; width: 100%; max-width: 420px; height: auto; margin: 0 auto 1.4rem; }
.tiles2 b { display: block; font-family: "Unbounded", sans-serif; font-weight: 800; font-size: 1.6rem; letter-spacing: -0.02em; margin-bottom: 0.5rem; }
.tiles2 span { display: block; color: var(--muted); max-width: 26rem; margin: 0 auto; }

/* last download comes right after the questions, newsletter after it */
.faq { padding-bottom: 60px; }
.news-after { padding: 90px 0 100px; }

@media (max-width: 900px) {
  .mid-cta { padding: 60px 0 66px; }
  .mid-cta .btn { width: auto; }
  .tiles2 { grid-template-columns: 1fr; gap: 3.5rem; }
  .tiles2 svg { max-width: 340px; }
  .ways { padding-left: 82px; }
}
@media (max-width: 560px) {
  .mid-cta .btn { width: 100%; justify-content: center; }
  .ways { padding-left: 0; }
}

/* =========================================================
   Round 4 (21.10.2026): bright device shots, last download band, download window
   ========================================================= */
button.btn { border: 0; cursor: pointer; }
.step .wide.pair-shots { max-width: 860px !important; }
.step .wide.pair-shots img { border-radius: 0; box-shadow: none; filter: drop-shadow(0 16px 26px rgba(30, 50, 80, .2)); }
.way .frame img { border-radius: 0; box-shadow: none; filter: drop-shadow(0 16px 26px rgba(30, 50, 80, .2)); }
.way .frame { max-width: 340px !important; }

/* last download: soft light band instead of the heavy blue, flows into the page */
.last-soft {
  background:
    radial-gradient(40% 90% at 20% 50%, rgba(98, 137, 181, .28), rgba(98, 137, 181, 0) 70%),
    radial-gradient(40% 90% at 85% 40%, rgba(232, 201, 127, .3), rgba(232, 201, 127, 0) 70%),
    linear-gradient(180deg, var(--paper) 0%, #e8f0f9 30%, #eaf2f8 70%, #fdf6e6 100%);
  padding: 90px 0 100px;
}
.last-soft .last { padding: 0; }
.last-soft h2 { color: var(--ink); }
.last-soft .small { color: var(--muted); }
.last-soft .bubble { right: -60px; }
.warm { background: linear-gradient(180deg, #fdf6e6 0%, #fbeee9 100%); }
.install { background: none; }
/* the bottom part keeps a light tint all the way down to the footer */
.install, .faq, .news-after { position: relative; }
body { background: linear-gradient(180deg, var(--paper) 0%, var(--paper) 80%, #eaf1f8 100%); }

/* download window */
.get {
  width: min(440px, calc(100% - 24px)); max-height: calc(100dvh - 24px);
  border: 0; border-radius: 22px; padding: 0; color: var(--ink);
  background: #fff; box-shadow: 0 30px 80px rgba(20, 35, 60, .35);
}
.get::backdrop { background: rgba(23, 32, 43, .45); backdrop-filter: blur(3px); }
.get-form, .get-done { position: relative; padding: 30px 28px 28px; }
.get h2 { font-family: "Unbounded", sans-serif; font-weight: 800; letter-spacing: -0.02em; font-size: 1.7rem; margin: 0 0 0.3rem; }
.get-lead { color: var(--muted); margin: 0 0 1.3rem; }
.get-form > label[for] { display: block; font-weight: 650; font-size: 0.95rem; margin-bottom: 0.35rem; }
.get input[type=email] { width: 100%; font: inherit; font-size: 1rem; padding: 13px 14px; border: 1.5px solid #c3cedb; border-radius: 10px; background: var(--paper); }
.get input[type=email]:focus { outline: none; border-color: var(--action); box-shadow: 0 0 0 3px rgba(51, 89, 138, .2); }
.get input[aria-invalid=true] { border-color: #c0483a; }
.get-err { color: #b03a2e; font-size: 0.9rem; margin: 0.4rem 0 0; }
.get-os { border: 0; padding: 0; margin: 1.2rem 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.get-os legend { font-weight: 650; font-size: 0.95rem; margin-bottom: 0.45rem; padding: 0; }
.get-os label { position: relative; }
.get-os input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.get-os span { display: flex; align-items: center; justify-content: center; min-height: 48px; border: 1.5px solid #c3cedb; border-radius: 10px; font-weight: 650; background: var(--paper); }
.get-os input:checked + span { border-color: var(--action); background: var(--casing-pale); color: var(--action-deep); box-shadow: inset 0 0 0 1px var(--action); }
.get-os input:focus-visible + span { outline: 3px solid var(--action); outline-offset: 2px; }
.get-mac { font-size: 0.9rem; color: var(--muted); background: var(--casing-pale); border-radius: 8px; padding: 8px 12px; margin: 0.7rem 0 0; }
.get-check { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; margin: 1.3rem 0 0.4rem; font-size: 0.95rem; cursor: pointer; }
.get-check input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--action); }
.get-small { font-size: 0.85rem; color: var(--muted); margin: 0 0 1.3rem 32px; }
.get-send { width: 100%; justify-content: center; }
.get-x { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--paper); font-size: 1.6rem; line-height: 1; color: var(--muted); cursor: pointer; }
.get-x:hover { color: var(--ink); }
.get-done { text-align: center; padding-top: 40px; }
.get-icon { width: 72px; height: 72px; margin: 0 auto 1rem; border-radius: 50%; display: grid; place-items: center; background: var(--mix); color: var(--ink); }
.get-icon svg { width: 38px; height: 38px; }
.get-done h2:focus { outline: none; }
.get-done p { color: var(--muted); margin: 0.4rem auto 0; max-width: 30ch; }
.get-done .get-small { margin: 0.8rem auto 1.4rem; }
.get-ok { min-width: 140px; justify-content: center; border: 1.5px solid #c3cedb; }
@media (max-width: 560px) {
  .get-form, .get-done { padding: 26px 20px 22px; }
  .get h2 { font-size: 1.45rem; }
  .last-soft .bubble { right: -90px; }
}
.get-ok { box-shadow: none; }
.get-ok:hover { transform: none; box-shadow: none; }

/* bonus pack signup: the blue band closes the page */
.bonus { padding: 70px 0 90px; }
.bonus-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 3rem; align-items: center; }
.bonus h2 { font-family: "Unbounded", sans-serif; font-weight: 800; letter-spacing: -0.03em; font-size: clamp(1.9rem, 3.6vw, 2.8rem); line-height: 1.05; margin-bottom: 0.9rem; color: #fff; }
.bonus p { color: #e3ecf6; max-width: 30rem; }
.bonus-form label { display: block; font-weight: 650; margin-bottom: 0.45rem; color: #fff; }
.bonus-row { display: flex; gap: 10px; }
.bonus-row input { flex: 1; min-width: 0; font: inherit; font-size: 1rem; padding: 14px 16px; border: 0; border-radius: 10px; background: #fff; color: var(--ink); }
.bonus-row input:focus { outline: 3px solid var(--fx); outline-offset: 2px; }
.bonus-row input[aria-invalid=true] { box-shadow: inset 0 0 0 2px #e08a7d; }
.bonus-row .btn { flex: none; }
.bonus-err { color: #ffd6cf !important; font-size: 0.9rem; margin: 0.5rem 0 0; }
.bonus-small { font-size: 0.88rem; margin: 0.8rem 0 0; }
.bonus-small a { color: #fff; }
.bonus-done { background: rgba(255,255,255,.14); border-radius: 10px; padding: 14px 16px; color: #fff !important; font-weight: 650; margin: 0; }
.bonus-done:focus { outline: none; }
.bonus + .foot, .casing.bonus { margin-top: 0; }
@media (max-width: 900px) {
  .bonus-in { grid-template-columns: 1fr; gap: 1.6rem; }
}
@media (max-width: 560px) {
  .bonus-row { flex-direction: column; }
  .bonus-row .btn { width: 100%; justify-content: center; }
}

[hidden] { display: none !important; }

/* =========================================================
   Round 6: every function screenshot is the same flat picture (976x1120, same frame)
   ========================================================= */
img.ui {
  display: block; width: 100%; height: auto; aspect-ratio: 976 / 1120;
  border-radius: 14px !important; border: 0 !important;
  box-shadow: 0 0 0 1px rgba(23, 32, 43, .14), 0 14px 30px rgba(30, 50, 80, .16) !important;
  filter: none !important; transform: none !important; margin-top: 0 !important;
}
.steps li img.ui, .steps li:nth-child(n) img.ui { transform: none !important; }
.step .media, .step:nth-child(even) .media { width: 100%; max-width: 400px; }
.step .wide.pair-shots { max-width: 820px !important; }
.way .frame { max-width: 360px !important; width: 100%; }
.step.last .media { max-width: 460px; }
.step .pics { position: relative; padding: 0 0 70px 0; }
.step .pics img.ui.dev { width: 78%; }
.step .pics img.ui.rare { position: absolute; width: 48%; right: 0; bottom: 30px; }
.step .pics figcaption { position: static; text-align: right; margin-top: 0.6rem; }

/* =========================================================
   Gentle scroll snapping (proximity, never mandatory).
   Only sections that fit on one screen get a snap point; workflow, install and FAQ have none.
   ========================================================= */
/* Measured 21.10.2026: on desktop, slow trackpad scrolling got pulled back to the snap point again and again,
   so snapping is on for touch screens only. Add ?snap to the URL to try it on desktop. */
@media (hover: none) and (pointer: coarse) { html { scroll-snap-type: y proximity; } }
html.snap-test { scroll-snap-type: y proximity; }
.sky, .meadow, .video-ph, .mid-cta, .playable, .last-soft { scroll-snap-stop: normal; }
.meadow { scroll-snap-align: center; }
.video-ph { scroll-snap-align: center; }
.mid-cta { scroll-snap-align: center; }
.playable { scroll-snap-align: center; }
.last-soft { scroll-snap-align: center; }
@media (prefers-reduced-motion: reduce) {
  html, html.snap-test { scroll-snap-type: none !important; }
}

/* on phones 'Play it like an instrument' is taller than the screen, so it gets no snap point there */
@media (max-width: 900px) { .playable { scroll-snap-align: none; } }

/* product renders from Blender (shadow is in the image itself, so no extra shadow or tilt) */
.hero-pic.produkt { margin: 0 -60px -40px -20px; }
.hero-pic.produkt::before { display: none; }
.hero-pic.produkt img { transform: none; filter: none; width: 100%; height: auto; }
.hero-pic.produkt .bubble { left: -40px; top: 26%; }
.last .pic.produkt img { width: 300px; transform: none; filter: none; }
.last .pic.produkt .bubble { right: -20px; top: 40px; }
@media (max-width: 900px) {
  .hero-pic.produkt { margin: 0 auto; max-width: 460px; }
  .last .pic.produkt img { width: 220px; }
}

/* =========================================================
   Round 7: video next to the download call; bar with the download button while scrolling
   ========================================================= */
.mid-cta { text-align: left; padding: 90px 0 100px; }
.mid-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 3.5rem; align-items: center; }
.mid-grid .video-ph { margin: 0; max-width: none; background: rgba(255,255,255,.75); }
.mid-txt h2 { margin: 0 0 0.8rem; max-width: 16ch; text-align: left; }
.mid-txt p { margin: 0 0 1.5rem; }
.mid-txt .small { margin: 1rem 0 0; }
.how { padding-bottom: 70px; }

.stickybar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: rgba(246, 248, 251, .92); backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--rule); box-shadow: 0 6px 20px rgba(30, 50, 80, .08);
  transform: translateY(-110%); transition: transform .25s ease;
}
.stickybar.an { transform: none; }
.sb-in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 64px; }
.sb-name { display: inline-flex; align-items: center; gap: 0.5rem; font-family: "Unbounded", sans-serif; font-weight: 800; font-size: 1.05rem; letter-spacing: -0.02em; }
.sb-name img { width: 18px; height: auto; }
.sb-sub { font-family: "Familjen Grotesk", sans-serif; font-weight: 500; font-size: 0.95rem; color: var(--muted); letter-spacing: 0; margin-left: 0.4rem; }
.sb-btn { font-size: 1rem; padding: 0.6em 1.1em; min-height: 44px; box-shadow: 0 2px 0 var(--action-deep); }
@media (prefers-reduced-motion: reduce) { .stickybar { transition: none; } }
/* the snapping and anchors must not hide headings under the bar */
html { scroll-padding-top: 76px; }

@media (max-width: 900px) {
  .mid-grid { grid-template-columns: 1fr; gap: 2rem; }
  .mid-txt h2 { max-width: none; }
}
@media (max-width: 560px) {
  .sb-sub { display: none; }
  .sb-in { min-height: 58px; }
  .sb-btn { width: auto !important; }
  .mid-txt .btn { width: 100%; justify-content: center; }
}

/* =========================================================
   Hero, round 2 (after the hero research): big product, one button, one grey line
   ========================================================= */
.hero2 {
  display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  grid-template-areas: "head pic" "act pic"; column-gap: 1rem; align-items: end;
  padding: 36px 0 10px;
}
.hero2 .hero-head { grid-area: head; align-self: end; }
.hero2 .hero-act { grid-area: act; align-self: start; }
.hero2 .hero-pic { grid-area: pic; align-self: center; position: relative; margin: 10px -160px -70px -40px; }
.hero2 .kicker { display: inline-block; font-weight: 650; font-size: 0.95rem; color: var(--action-deep); background: rgba(255,255,255,.7); border: 1px solid rgba(51, 89, 138, .2); border-radius: 999px; padding: 0.25em 0.85em; margin: 0 0 1.2rem; }
.hero2 .kicker span { color: #9aa6b4; margin: 0 0.2em; }
.hero2 h1 { font-family: "Unbounded", "Familjen Grotesk", sans-serif; font-weight: 800; letter-spacing: -0.035em; line-height: 1.02; font-size: clamp(2.5rem, 4.9vw, 4.4rem); margin: 0 0 1.4rem; }
.hero2 .lead { font-size: 1.25rem; max-width: 27rem; margin: 0 0 1.8rem; }
.hero2 .btn { font-size: 1.2rem; padding: 0.95em 1.6em; }
.hero2 .small { margin: 1rem 0 0; color: var(--muted); }
.hero2 .hero-pic img { width: 100%; height: auto; }
.hero2 .hero-pic .bubble { left: 20%; top: 9%; font-size: 0.95rem; padding: 0.4em 0.75em; transform: rotate(-4deg); }

@media (max-width: 900px) {
  .hero2 { grid-template-columns: 1fr; grid-template-areas: "head" "pic" "act"; padding-top: 20px; }
  .hero2 h1 { font-size: clamp(2.2rem, 9.6vw, 3rem); margin-bottom: 0.4rem; }
  .hero2 .kicker { margin-bottom: 0.9rem; }
  .hero2 .hero-pic { margin: 0 -8% -6% -4%; max-width: none; }
  .hero2 .hero-pic .bubble { left: 12%; top: 6%; }
  .hero2 .lead { font-size: 1.1rem; margin-bottom: 1.3rem; }
}
@media (min-width: 901px) {
  .hero2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 1fr auto auto 1fr; grid-template-areas: ". pic" "head pic" "act pic" ". pic"; min-height: 620px; }
  .hero2 h1 { font-size: clamp(2.6rem, 4.3vw, 3.9rem); max-width: 11ch; }
  .hero2 .hero-pic { grid-row: 1 / -1; margin: 0 -120px -60px -10px; }
}
.hero2 h1 span { display: block; }
@media (min-width: 901px) {
  .hero2 { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
  .hero2 h1 { max-width: none; font-size: clamp(2.4rem, 3.9vw, 3.5rem); }
  .hero2 .hero-pic { margin: -20px -170px -90px -30px; }
}
.sky { overflow-x: clip; }
.hero2 h1 span { white-space: nowrap; }
@media (min-width: 901px) {
  .hero2 h1 { font-size: clamp(2.2rem, 3.55vw, 3.2rem); margin-bottom: 1.1rem; }
}
@media (max-width: 420px) { .hero2 h1 span { white-space: normal; } }

/* =========================================================
   Round 8 (21.10.2026): before/after comparison, big video, last download with the note
   ========================================================= */
.compare { padding: 100px 0 110px; }
.cmp-head { display: grid; grid-template-columns: 1fr 64px 1fr; max-width: 1000px; margin: 0 auto 0.8rem; font-weight: 700; font-size: 0.95rem; letter-spacing: 0.02em; color: var(--muted); }
.cmp-head span:last-child { color: var(--ink); }
.cmp-list { list-style: none; margin: 0 auto; padding: 0; max-width: 1000px; display: grid; gap: 16px; }
.cmp-row { display: grid; grid-template-columns: 1fr 64px 1fr; align-items: center; }
.cmp-card {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 60px 1fr; align-items: center; gap: 1rem;
  min-height: 92px; padding: 16px 20px; border-radius: 16px;
  background: var(--card, #fff); border: 1px solid var(--rule);
  box-shadow: 0 10px 26px rgba(30, 50, 80, .08);
}
.cmp-card.hatch { border-color: rgba(143, 205, 184, .55); box-shadow: 0 0 0 1px rgba(143, 205, 184, .25), 0 12px 30px rgba(60, 140, 115, .14); }
.cmp-card .play { width: 56px; height: 56px; position: relative; z-index: 1; }
.cmp-card.roh .play { background: #c9d2dd; }
.cmp-card .play svg { width: 18px; height: 18px; }
.cmp-txt { position: relative; z-index: 1; }
.cmp-txt b { display: block; font-size: 1.1rem; }
.cmp-txt .meta { color: var(--muted); font-size: 0.92rem; }
.cmp-wave {   /* quiet waveform drawn behind the text */
  position: absolute; right: 14px; top: 50%; translate: 0 -50%; width: 46%; height: 46px; opacity: .22; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40'%3E%3Cpath d='M0 20h6M8 14v12M12 8v24M16 16v8M20 4v32M24 12v16M28 18v4M32 10v20M36 6v28M40 15v10M44 19v2M48 12v16M52 7v26M56 14v12M60 18v4M64 3v34M68 11v18M72 16v8M76 9v22M80 19v2M84 13v14M88 5v30M92 15v10M96 18v4M100 8v24M104 12v16M108 17v6M112 6v28M116 14v12M120 19v2M124 10v20M128 4v32M132 15v10M136 18v4M140 9v22M144 13v14M148 19v2M152 7v26M156 16v8M160 11v18M164 18v4M168 14v12M172 19v2M176 17v6M180 19v2M184 20h16' stroke='%2333598a' stroke-width='2.2' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.cmp-card.hatch .cmp-wave { opacity: .32; filter: hue-rotate(-60deg) saturate(1.6); }
.cmp-arrow { display: grid; place-items: center; color: var(--mix); }
.cmp-arrow svg { width: 36px; height: 18px; }

.big-video { padding: 90px 0 100px; text-align: center; }
.big-video .video-ph { max-width: none; width: 100%; margin: 0 0 2.6rem; aspect-ratio: 16 / 9; border-radius: 22px; }
.big-video .vp-play { width: 96px; height: 96px; }
.big-video .vp-play svg { width: 38px; height: 38px; }
.big-video .mid-txt { max-width: 640px; margin: 0 auto; }
.big-video .mid-txt h2 { max-width: none; text-align: center; margin: 0 auto 0.8rem; }
.big-video .mid-txt p { margin-left: auto; margin-right: auto; }

.last-note .last { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 3rem; }
.last-note .pic.produkt img { width: 100%; max-width: 480px; }
.note-q { margin: 0 0 2.2rem; font-size: 1.25rem; line-height: 1.5; border-left: 4px solid var(--evolve); padding-left: 1.3rem; }
.note-q cite { display: block; margin-top: 0.8rem; font-style: normal; font-size: 0.95rem; color: var(--muted); }
.last-note h2 { margin-bottom: 1.3rem; }

@media (max-width: 900px) {
  .compare { padding: 70px 0 80px; }
  .cmp-head { display: none; }
  .cmp-row { grid-template-columns: 1fr; gap: 6px; }
  .cmp-arrow { transform: rotate(90deg); height: 26px; }
  .cmp-card.roh::before { content: "Your one-shot"; }
  .cmp-card.hatch::before { content: "Through HATCH!"; }
  .cmp-card::before { position: absolute; top: 8px; right: 14px; font-size: 0.75rem; font-weight: 700; color: var(--muted); z-index: 1; }
  .big-video { padding: 60px 0 70px; }
  .big-video .video-ph { border-radius: 14px; margin-bottom: 2rem; }
  .last-note .last { grid-template-columns: 1fr; gap: 1.5rem; }
  .last-note .pic.produkt img { max-width: 320px; }
}

/* =========================================================
   Round 9: bonus card in the download window, last download as one glowing card
   ========================================================= */
.bonus-card {
  position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px;
  margin: 1.3rem 0 0.5rem; padding: 14px 16px; cursor: pointer;
  border-radius: 16px; border: 2px solid transparent;
  background:
    linear-gradient(135deg, #fff8e6, #eefaf5) padding-box,
    linear-gradient(135deg, #e8c97f, #8fcdb8, #9fc0e6) border-box;
  box-shadow: 0 8px 22px rgba(232, 201, 127, .25);
  transition: transform .15s, box-shadow .15s;
}
.bonus-card:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(232, 201, 127, .35); }
.bonus-card input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.bc-pics { display: flex; align-items: flex-end; }
.bc-pics img { height: 44px; width: auto; image-rendering: auto; filter: drop-shadow(0 3px 4px rgba(0,0,0,.18)); }
.bc-pics img:nth-child(2) { height: 52px; margin: 0 -6px; position: relative; z-index: 1; }
.bc-txt { display: block; line-height: 1.25; }
.bc-tag { display: inline-block; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; background: #e8c97f; color: #3b2d07; border-radius: 999px; padding: 0.15em 0.6em; margin-bottom: 0.3rem; }
.bc-txt b { display: block; font-family: "Unbounded", sans-serif; font-weight: 800; font-size: 1.15rem; letter-spacing: -0.02em; color: #17202b; }
.bc-sub { display: block; font-size: 0.85rem; color: #4a5462; margin-top: 0.2rem; }
.bc-box { width: 30px; height: 30px; border-radius: 9px; border: 2px solid #b8a36a; background: #fff; display: grid; place-items: center; color: transparent; transition: background .15s, color .15s, border-color .15s; }
.bc-box svg { width: 20px; height: 20px; }
.bonus-card:has(input:checked) { background: linear-gradient(135deg, #fff3cf, #dff5ec) padding-box, linear-gradient(135deg, #e8c97f, #4fae8e) border-box; box-shadow: 0 0 0 4px rgba(143, 205, 184, .35), 0 12px 28px rgba(79, 174, 142, .25); }
.bonus-card input:checked ~ .bc-box { background: #3c9479; border-color: #3c9479; color: #fff; }
.bonus-card:has(input:focus-visible) { outline: 3px solid var(--action); outline-offset: 3px; }
.get-small { margin-left: 0; }

/* last download card */
.last-note { padding: 110px 0 120px; }
.last-card {
  position: relative; display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: center; gap: 2rem;
  padding: 50px 56px; border-radius: 30px; overflow: visible;
  background:
    radial-gradient(55% 80% at 18% 55%, rgba(98, 137, 181, .35), rgba(98, 137, 181, 0) 70%),
    radial-gradient(45% 70% at 92% 10%, rgba(232, 201, 127, .22), rgba(232, 201, 127, 0) 70%),
    radial-gradient(40% 60% at 80% 100%, rgba(143, 205, 184, .22), rgba(143, 205, 184, 0) 70%),
    linear-gradient(160deg, #eaf2fb, #f6f2ea);
  border: 1px solid rgba(98, 137, 181, .25);
  box-shadow: 0 30px 70px rgba(30, 50, 80, .14);
}
.lc-pic { margin: -110px -10px -90px -30px; }
.lc-pic img { width: 100%; height: auto; }
.lc-txt h2 { font-family: "Unbounded", sans-serif; font-weight: 800; letter-spacing: -0.03em; font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.05; margin: 0 0 1.4rem; }
.last-card .note-q { margin: 0 0 1.8rem; padding: 18px 20px; border: 0; border-radius: 16px; background: rgba(255, 255, 255, .55); font-size: 1.1rem; }
.last-card .note-q p { margin: 0 0 0.9rem; }
.last-card .note-q cite { display: flex; align-items: center; gap: 0.7rem; margin: 0; line-height: 1.3; }
.note-av { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--evolve); color: #17202b; font-family: "Unbounded", sans-serif; font-weight: 800; font-size: 1rem; flex: none; }
.last-card .btn { font-size: 1.2rem; padding: 0.95em 1.7em; }
.lc-facts { list-style: none; margin: 1.1rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.lc-facts li { font-size: 0.85rem; font-weight: 600; padding: 0.3em 0.8em; border-radius: 999px; background: rgba(255, 255, 255, .6); color: var(--muted); }
@media (max-width: 900px) {
  .last-note { padding: 70px 0 80px; }
  .last-card { grid-template-columns: 1fr; padding: 30px 22px 28px; gap: 1rem; border-radius: 22px; }
  .lc-pic { margin: -70px auto -20px; max-width: 300px; }
  .last-card .btn { width: 100%; justify-content: center; }
}
@media (max-width: 420px) {
  .bonus-card { grid-template-columns: 1fr auto; }
  .bc-pics { display: none; }
}

/* =========================================================
   Round 10: headline + button right under the video, bigger note box, bonus art at the bottom
   ========================================================= */
.big-video .mid-row { max-width: none; display: flex; align-items: center; justify-content: space-between; gap: 2rem; text-align: left; }
.big-video .mid-row h2 { margin: 0; text-align: left; font-size: clamp(1.8rem, 3.4vw, 2.8rem); }
.big-video .mid-row .btn { flex: none; font-size: 1.2rem; padding: 0.95em 1.7em; }
.big-video .video-ph { margin-bottom: 1.8rem; }

.last-card { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); }
.note-big { display: grid; grid-template-columns: 96px 1fr; gap: 1.2rem; align-items: start; padding: 24px 26px !important; min-height: 230px; }
.note-foto { width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; text-align: center; font-size: 0.75rem; font-weight: 700; color: var(--muted); border: 2px dashed rgba(127, 140, 160, .5); background: rgba(255,255,255,.05); }
.note-big p { font-size: 1.15rem; line-height: 1.6; }
.note-big cite { display: block !important; font-style: normal; color: var(--muted); font-size: 0.95rem; }

.bonus-art { position: relative; }
.ba-pics { display: flex; align-items: flex-end; margin-bottom: 1rem; }
.ba-pics img { height: 74px; width: auto; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .3)); }
.ba-pics img:nth-child(2) { height: 92px; margin: 0 -10px; position: relative; z-index: 1; }
.bonus-art .bc-tag { font-size: 0.8rem; margin-bottom: 0.6rem; }
.bonus-art h2 { margin-bottom: 0.7rem; }
.bonus-in {
  padding: 34px 38px; border-radius: 26px; border: 2px solid transparent;
  background:
    linear-gradient(135deg, rgba(42, 38, 24, .85), rgba(24, 39, 42, .85)) padding-box,
    linear-gradient(135deg, #e8c97f, #8fcdb8, #9fc0e6) border-box;
  box-shadow: 0 0 40px rgba(232, 201, 127, .18), 0 24px 60px rgba(0, 0, 0, .35);
}
@media (max-width: 900px) {
  .big-video .mid-row { flex-direction: column; align-items: stretch; text-align: center; gap: 1.2rem; }
  .big-video .mid-row h2 { text-align: center; }
  .big-video .mid-row .btn { width: 100%; justify-content: center; }
  .note-big { grid-template-columns: 1fr; min-height: 0; }
  .note-foto { width: 80px; height: 80px; }
  .bonus-in { padding: 26px 20px; width: calc(100% - 24px); }
}
@media (max-width: 900px) { .last-card { grid-template-columns: 1fr; } .last-card .lc-pic { margin: -70px auto -10px; max-width: 280px; } .big-video .video-ph { aspect-ratio: 16 / 9; } }

/* =========================================================
   Round 11
   ========================================================= */
/* headline under the video centred, button below */
.big-video .mid-center { max-width: 820px; margin: 0 auto; text-align: center; }
.big-video .mid-center h2 { text-align: center; margin: 0 auto 1.4rem; font-size: clamp(2rem, 4vw, 3.2rem); }
.big-video .mid-center .btn { font-size: 1.2rem; padding: 0.95em 1.8em; }

/* bonus band at the bottom: no picture, on the real casing blue */
.bonus-in {
  background:
    radial-gradient(50% 120% at 15% 30%, rgba(156, 192, 240, .22), rgba(156, 192, 240, 0) 70%),
    linear-gradient(135deg, #3f6699, #2e5283) padding-box,
    linear-gradient(135deg, #e8c97f, #8fcdb8, #9fc0e6) border-box;
  box-shadow: 0 0 40px rgba(156, 192, 240, .18), 0 24px 60px rgba(0, 0, 0, .3);
}
.bonus-art p { color: #e3ecf6; }

/* new workflow step 1: two pictures */
.node.c0 { --c: #e9c6dd; }
.feed-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 520px !important; }
.feed-pair img.ui:last-of-type { margin-top: 36px !important; }
.feed-pair figcaption { grid-column: 1 / -1; }
.big-video .mid-center { max-width: 1120px; }
.step .media.feed-pair { max-width: 460px !important; width: 100%; justify-self: start; }
.feed-pair img.ui { min-width: 0; }


/* =========================================================
   Round 12 (kept): only a big "Get HATCH!" under the video.
   Workflow pictures reset to the round 11 layout on request (21.10.2026).
   ========================================================= */
.big-video .mid-center .btn { font-size: 1.5rem; padding: 1em 2.4em; border-radius: 12px; gap: 0.7em; }
.big-video .mid-center .btn svg { width: 1.2em; height: 1.2em; }
@media (max-width: 900px) { .big-video .mid-center .btn { font-size: 1.3rem; width: 100%; justify-content: center; } }

/* hero headline: three short lines, never runs into the device */
.hero2 h1 span { white-space: nowrap; }
@media (min-width: 901px) { .hero2 h1 { font-size: clamp(2rem, 3.1vw, 2.9rem); } }

/* =========================================================
   Layout scan (21.10.2026): one rhythm for the whole page
   ========================================================= */
/* sections: same space above and below */
.compare, .big-video, .workflow, .last-note { padding-top: 100px !important; padding-bottom: 100px !important; }
.install { padding-top: 100px; padding-bottom: 60px; }
.faq { padding-bottom: 100px; }
.bonus { padding-top: 90px; padding-bottom: 100px; }
/* big titles without a subline still need room before the content */
.big-title { margin-bottom: 3rem; }
.big-title + .big-sub { margin-top: -2rem; }
/* every heading in the workflow: same gap to its text */
.flow h3 { margin-bottom: 0.8rem !important; }
.flow .txt p, .way p { margin-top: 0; }

/* workflow: wider column so pictures can be bigger, but always symmetric around the dashed line */
.workflow > .wrap { width: min(1320px, 100% - 40px); }
@media (min-width: 901px) {
  .flow .step, .flow .step:nth-child(n) { grid-template-columns: minmax(0, 1fr) 96px minmax(0, 1fr) !important; align-items: start; }
  .flow .step > .node { align-self: start; margin-top: 0; }
  .flow .step > .txt { align-self: start; padding-top: 10px; }
  .flow .step > .media { align-self: start; }
  /* text and picture always sit the same distance from the line */
  .flow .step > .txt { max-width: 30rem; }
  .flow .step .media { max-width: 520px; }
  .flow .step.feed .media.feed-pair { max-width: 100% !important; width: 100%; gap: 16px; }
  .feed-pair img.ui:last-of-type { margin-top: 40px !important; }
}
/* the last workflow step shares the class name .last with the old download section; reset its gap */
@media (min-width: 901px) { .flow .step.last { gap: 0; padding-top: 30px; } }
/* step 7: the rare picture stays inside its column */
@media (min-width: 901px) {
  .flow .step.last .media { max-width: 520px; }
  .flow .step.last .pics { padding-bottom: 60px; }
  .flow .step.last .pics img.ui.dev { width: 74%; }
  .flow .step.last .pics img.ui.rare { width: 44%; right: 0; bottom: 40px; }
}
/* phone fixes from the layout scan */
@media (max-width: 900px) {
  .hero2 h1 span { white-space: normal; }
  .hero2 .hero-pic { margin: 0.5rem auto 0; max-width: 420px; width: 100%; }
  .flow .step .media.feed-pair { max-width: none !important; width: 100%; }
  .feed-pair img.ui:last-of-type { margin-top: 0 !important; }
  .flow .step.last .pics { padding-bottom: 50px; }
}
@media (max-width: 560px) {
  .feed-pair { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .fork .ways { padding-left: 82px !important; }
  .fork .or { margin-left: 82px !important; }
}

/* Kit: error line in the download window */
.get-fail { color: #b03a2e; font-size: 0.9rem; margin: 0 0 0.8rem; }
.get-send[aria-busy=true] { opacity: .7; cursor: progress; }