@import url("tokens.css");

/* Hallmark · mobile adaptation: one clear story, one product, optional chapters.
 * Pre-emit critique: purpose 5 · hierarchy 5 · emotion 4 · simplicity 5 ·
 * responsiveness 5 · visual craft 5. Genre: personal AI learning journal.
 */

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

html {
  overflow-x: clip;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
  background: var(--color-paper);
}

body {
  min-width: 20rem;
  margin: 0;
  overflow-x: clip;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}

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

button,
input,
textarea,
select {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

a {
  color: inherit;
}

h1,
h2,
h3,
h4,
p,
figure,
ol,
ul,
dl,
dd {
  margin: 0;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  min-width: 0;
  overflow-wrap: anywhere;
}

h1,
h2 {
  font-style: normal;
  font-weight: 700;
  letter-spacing: -0.045em;
}

h3,
h4 {
  font-weight: 600;
}

.skip-link {
  position: fixed;
  inset-block-start: var(--space-sm);
  inset-inline-start: var(--space-sm);
  z-index: var(--z-tooltip);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-ink);
  color: var(--color-paper);
  text-decoration: none;
  transform: translateY(-180%);
}

.skip-link:focus {
  transform: translateY(0);
}

:focus-visible {
  outline: var(--space-2xs) solid var(--color-focus);
  outline-offset: var(--space-2xs);
}

.signal-field {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  opacity: 0.92;
  pointer-events: none;
}

.signal-field[data-motion="active"] {
  will-change: contents;
}

.site-head,
main,
.site-footer,
.legal-shell {
  position: relative;
  z-index: var(--z-base);
}

.site-head {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-sticky);
  transition: transform var(--dur-short) var(--ease-out);
}

.site-head[data-nav-state="away"] {
  transform: translateY(calc(-1 * var(--banner-height, 2.75rem)));
}

.status-banner {
  position: relative;
  display: flex;
  justify-content: center;
  min-height: 2.75rem;
  padding-inline: calc(var(--page-gutter) + 2.5rem);
  border-block-end: var(--space-3xs) solid var(--color-ink);
  background: var(--color-accent);
  color: var(--color-accent-ink);
  transition: transform var(--dur-short) var(--ease-in);
}

.status-banner[data-hidden="true"] {
  position: absolute;
  inset: 0 0 auto;
  pointer-events: none;
  transform: translateY(-100%);
}

.status-message {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  min-width: 0;
  min-height: 2.75rem;
  font-size: var(--text-sm);
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}

.status-copy--long {
  display: none;
}

.status-dot {
  flex: 0 0 auto;
  width: 0.55rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--color-ink);
}

.status-close {
  position: absolute;
  inset-block: 0;
  inset-inline-end: max(var(--space-xs), calc(var(--page-gutter) - var(--space-xs)));
  display: grid;
  place-items: center;
  width: 2.75rem;
  min-height: 2.75rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-ink);
  cursor: pointer;
}

.status-close svg,
.menu-button svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 2;
}

.site-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  width: 100%;
  min-height: 4.5rem;
  padding-inline: var(--page-gutter);
  border-block-end: var(--space-3xs) solid var(--color-ink);
  background: var(--color-paper);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: 2.75rem;
  text-decoration: none;
  white-space: nowrap;
}

.wordmark__mark {
  display: block;
  flex: 0 0 auto;
  width: 2.5rem;
  height: 2.5rem;
  object-fit: contain;
}

.wordmark__logo {
  display: block;
  width: clamp(8.6rem, 15vw, 11.75rem);
  height: auto;
}

.nav-links {
  display: none;
  align-items: center;
  gap: var(--space-xl);
}

.nav-links a,
.nav-links .nav-current,
.nav-menu a,
.nav-menu .nav-current,
.footer-links a {
  font-weight: 700;
  text-decoration-thickness: var(--space-3xs);
  text-decoration-color: transparent;
  text-underline-offset: var(--space-xs);
  white-space: nowrap;
  transition: text-decoration-color var(--dur-short) var(--ease-out);
}

.menu-button {
  display: grid;
  place-items: center;
  width: 2.75rem;
  min-height: 2.75rem;
  padding: 0;
  border: var(--space-3xs) solid var(--color-ink);
  border-radius: 50%;
  background: var(--color-paper);
  color: var(--color-ink);
  cursor: pointer;
}

.nav-menu {
  position: absolute;
  inset: auto 0 auto;
  z-index: var(--z-dropdown);
  display: grid;
  padding: var(--space-sm) var(--page-gutter) var(--space-lg);
  border-block-end: var(--space-3xs) solid var(--color-ink);
  background: var(--color-paper);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-0.5rem);
  transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out);
}

.nav-menu[data-open="true"] {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.nav-menu a,
.nav-menu .nav-current {
  display: flex;
  align-items: center;
  min-height: 3.25rem;
  border-block-end: var(--space-3xs) solid var(--color-rule);
  text-decoration: none;
}

.nav-current {
  color: var(--color-muted);
}

.hero,
.section,
.site-footer,
.legal-shell {
  width: min(100%, var(--page-max));
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}

.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: var(--space-xl);
  min-height: 0;
  overflow: visible;
  padding-block-start: var(--space-xl);
  padding-block-end: var(--space-2xl);
  border-block-end: 0;
}

.hero::before {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 50%;
  z-index: -2;
  width: 100vw;
  border-block-end: var(--space-3xs) solid var(--color-ink);
  background: var(--color-paper);
  content: "";
  transform: translateX(-50%);
}

.hero > :not(.hero-aurora) {
  position: relative;
  z-index: 2;
}

.hero-aurora {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 50%;
  z-index: 0;
  width: 100vw;
  overflow: hidden;
  pointer-events: none;
  transform: translateX(-50%);
}

.aurora-band,
.aurora-orbit,
.aurora-comet,
.aurora-core {
  position: absolute;
  display: block;
  will-change: transform, opacity;
}

.aurora-band {
  inset-inline-start: -22%;
  width: 144%;
  height: clamp(8rem, 18vw, 18rem);
  border-radius: 50%;
  filter: blur(clamp(1rem, 3vw, 3rem));
  mix-blend-mode: multiply;
  opacity: 0.62;
  transform-origin: center;
}

.aurora-band--mango {
  inset-block-start: -2%;
  background: var(--color-accent);
  animation: aurora-sweep-one 5.6s var(--ease-in-out) infinite alternate;
}

.aurora-band--green {
  inset-block-start: 42%;
  background: oklch(78% 0.15 145);
  opacity: 0.48;
  animation: aurora-sweep-two 7s var(--ease-in-out) infinite alternate;
}

.aurora-band--violet {
  inset-block-start: 70%;
  background: oklch(76% 0.12 310);
  opacity: 0.4;
  animation: aurora-sweep-three 6.2s var(--ease-in-out) infinite alternate;
}

.aurora-orbit {
  inset-inline-end: -12%;
  inset-block-start: 9%;
  aspect-ratio: 1;
  border: 0.22rem solid color-mix(in oklch, var(--color-ink) 46%, transparent);
  border-radius: 44% 56% 52% 48%;
  opacity: 0.56;
}

.aurora-orbit--wide {
  width: clamp(20rem, 48vw, 45rem);
  animation: aurora-orbit 13s linear infinite;
}

.aurora-orbit--tight {
  inset-inline-end: 1%;
  inset-block-start: 23%;
  width: clamp(12rem, 29vw, 27rem);
  border-color: color-mix(in oklch, var(--color-signal) 70%, transparent);
  animation: aurora-orbit-reverse 8s linear infinite;
}

.aurora-core {
  inset-inline-end: clamp(2rem, 13vw, 13rem);
  inset-block-start: 38%;
  width: clamp(1.4rem, 3vw, 2.8rem);
  aspect-ratio: 1;
  border: 0.2rem solid var(--color-ink);
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 0 0.8rem color-mix(in oklch, var(--color-accent) 38%, transparent);
  animation: aurora-core-pulse 2.2s var(--ease-in-out) infinite alternate;
}

.aurora-comet {
  inset-inline-start: -18rem;
  z-index: 1;
  width: 18rem;
  height: 0.3rem;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, transparent 0%, var(--color-accent) 74%, var(--color-ink) 100%);
  filter: drop-shadow(0 0 0.8rem color-mix(in oklch, var(--color-accent) 85%, transparent));
  opacity: 0.9;
}

.aurora-comet::after {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: -0.45rem;
  width: 0.9rem;
  aspect-ratio: 1;
  border: 0.16rem solid var(--color-ink);
  border-radius: 50%;
  background: var(--color-accent);
  content: "";
  transform: translateY(-50%);
}

.aurora-comet--one {
  inset-block-start: 23%;
  animation: aurora-comet-flight 5.8s linear infinite;
}

.aurora-comet--two {
  inset-block-start: 77%;
  animation: aurora-comet-flight 7.4s 1.8s linear infinite;
}

@keyframes aurora-sweep-one {
  from { transform: translate3d(-11%, -18%, 0) rotate(-9deg) scaleX(0.92); }
  to { transform: translate3d(20%, 54%, 0) rotate(7deg) scaleX(1.08); }
}

@keyframes aurora-sweep-two {
  from { transform: translate3d(19%, -30%, 0) rotate(8deg) scaleX(1.08); }
  to { transform: translate3d(-15%, 34%, 0) rotate(-11deg) scaleX(0.88); }
}

@keyframes aurora-sweep-three {
  from { transform: translate3d(-8%, 18%, 0) rotate(-5deg); }
  to { transform: translate3d(22%, -40%, 0) rotate(10deg); }
}

@keyframes aurora-orbit {
  to { transform: rotate(360deg) scale(1.08); }
}

@keyframes aurora-orbit-reverse {
  to { transform: rotate(-360deg) scale(0.9); }
}

@keyframes aurora-core-pulse {
  from { opacity: 0.68; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1.16); }
}

@keyframes aurora-comet-flight {
  0% { opacity: 0; transform: translate3d(-8vw, -2rem, 0) rotate(-5deg); }
  8% { opacity: 0.9; }
  78% { opacity: 0.9; }
  100% { opacity: 0; transform: translate3d(calc(100vw + 26rem), 6rem, 0) rotate(4deg); }
}

.hero__copy {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: var(--space-lg);
  min-width: 0;
}

.challenge-tag {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding-inline: var(--space-md);
  border: var(--space-3xs) solid var(--color-ink);
  border-radius: var(--radius-pill);
  background: var(--color-paper);
  font-weight: 700;
}

.hero h1 {
  max-width: 12ch;
  font-size: var(--text-display);
  line-height: 1.02;
}

.hero__lede {
  max-width: 55ch;
  color: var(--color-ink-2);
  font-size: clamp(var(--text-base), 1.4vw, var(--text-md));
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-lg);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding-inline: var(--space-lg);
  border: var(--space-3xs) solid var(--color-ink);
  border-radius: var(--radius-pill);
  background: var(--color-paper);
  color: var(--color-ink);
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}

.button--primary {
  background: var(--color-accent);
  color: var(--color-accent-ink);
}

.button:active,
.menu-button:active,
.status-close:active {
  transform: translateY(1px);
}

.text-link:active,
.nav-links a:active,
.nav-menu a:active,
.footer-links a:active {
  color: var(--color-signal);
}

button:disabled,
.button[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
}

.text-link {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-weight: 700;
  text-decoration-thickness: var(--space-3xs);
  text-underline-offset: var(--space-xs);
  white-space: nowrap;
}

.hero-proof {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 6rem;
  gap: var(--space-xs);
  align-items: end;
  min-width: 0;
  padding: var(--space-sm);
  border: var(--space-3xs) solid var(--color-ink);
  background: color-mix(in oklch, var(--color-paper-2) 86%, transparent);
}

.hero-proof__label {
  align-self: start;
  display: grid;
  gap: var(--space-2xs);
  padding-block-end: var(--space-lg);
}

.hero-proof__label span {
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.hero-proof__label strong {
  font-family: var(--font-display);
  font-size: var(--text-xl);
}

.hero-proof__clock {
  align-self: center;
  display: grid;
  gap: var(--space-2xs);
  padding-block: var(--space-sm);
  border-block: var(--space-3xs) solid var(--color-rule-strong);
  text-decoration: none;
}

.hero-proof__clock > span,
.hero-proof__clock small {
  color: var(--color-muted);
  font-size: var(--text-xs);
  font-weight: 700;
}

.hero-proof__clock > strong {
  font-family: var(--font-display);
  font-size: clamp(var(--text-lg), 3vw, var(--text-2xl));
  line-height: 1;
}

.hero-proof__clock:hover small {
  color: var(--color-ink);
  text-decoration: underline;
  text-underline-offset: var(--space-2xs);
}

.hero-screen {
  grid-column: 2;
  grid-row: 1 / span 3;
  justify-self: end;
  width: 6rem;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border: var(--space-3xs) solid var(--color-ink);
  border-radius: var(--radius-lg);
  background: var(--color-paper);
  transform: rotate(1.25deg);
}

.hero-screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-loop {
  align-self: end;
  display: grid;
  gap: var(--space-xs);
  padding: 0;
  list-style: none;
}

.hero-loop li {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
  min-width: 6.5rem;
  color: var(--color-ink-2);
  font-size: var(--text-sm);
  font-weight: 700;
}

.hero-loop span,
.stage-number,
.screen-tab span {
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.hero-enter {
  opacity: 0;
  transform: translateY(0.5rem);
  animation: hero-enter var(--dur-long) var(--ease-out) forwards;
  animation-delay: calc(var(--enter-order) * 90ms);
}

@keyframes hero-enter {
  to { opacity: 1; transform: translateY(0); }
}

html[data-motion="on"].reveal-ready main h2[data-reveal="pending"] {
  opacity: 0.08;
  filter: blur(0.22rem);
  transform: translate3d(0, 1rem, 0);
}

html[data-motion="on"].reveal-ready main :is(.section-kicker, .project-label)[data-reveal="pending"] {
  opacity: 0.2;
  transform: translate3d(-0.55rem, 0, 0);
}

main h2[data-reveal],
main :is(.section-kicker, .project-label)[data-reveal] {
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out), filter 700ms var(--ease-out);
}

main :is(.section-kicker, .project-label)[data-reveal] {
  transition-duration: 520ms;
}

main h2[data-reveal="active"],
main :is(.section-kicker, .project-label)[data-reveal="active"] {
  opacity: 1;
  filter: none;
  transform: translate3d(0, 0, 0);
}

.section {
  border-block-end: var(--space-3xs) solid var(--color-ink);
}

.build-clock {
  display: grid;
  gap: var(--space-2xl);
  padding-block: var(--space-3xl);
  background: color-mix(in oklch, var(--color-accent-quiet) 86%, transparent);
  color: var(--color-ink);
}

.build-clock__intro {
  display: grid;
  gap: var(--space-md);
  max-width: 57rem;
}

.build-clock__intro h2 {
  max-width: 18ch;
  font-size: clamp(var(--text-2xl), 5vw, 4.6rem);
  line-height: 1.03;
}

.build-clock__intro > p:last-child,
.build-clock__note {
  color: var(--color-muted);
}

.build-clock .section-kicker {
  color: var(--color-accent);
}

.build-clock__display {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-block: var(--space-3xs) solid var(--color-rule-strong);
}

.build-clock__display > div {
  display: grid;
  gap: var(--space-xs);
  min-width: 0;
  padding: var(--space-lg) var(--space-sm);
  border-inline-end: var(--space-3xs) solid var(--color-rule);
}

.build-clock__display > div:last-child {
  border-inline-end: 0;
}

.build-clock__display .build-clock__total {
  grid-column: 1 / -1;
  padding: var(--space-xl) var(--space-sm);
  border-block-end: var(--space-3xs) solid var(--color-rule);
  border-inline-end: 0;
}

.build-clock__display strong {
  overflow: hidden;
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 8vw, 5rem);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: -0.07em;
  line-height: 0.9;
}

.build-clock__display .build-clock__total strong {
  font-size: clamp(4.25rem, 18vw, 8rem);
  line-height: 0.82;
}

.build-clock__display span {
  color: var(--color-muted);
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.build-ledger {
  display: grid;
  gap: var(--space-lg);
}

.build-ledger__intro {
  display: grid;
  gap: var(--space-xs);
}

.build-ledger__intro h3 {
  font-size: var(--text-xl);
}

.build-ledger__intro p {
  color: var(--color-muted);
}

.build-ledger dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-block-start: var(--space-3xs) solid var(--color-rule-strong);
}

.build-ledger dl > div {
  display: grid;
  align-content: start;
  gap: var(--space-xs);
  min-width: 0;
  padding: var(--space-lg) var(--space-sm);
  border-block-end: var(--space-3xs) solid var(--color-rule);
}

.build-ledger dt {
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  line-height: 1;
}

.build-ledger dd {
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.build-clock__tools {
  display: grid;
  gap: 0;
  border-block-start: var(--space-3xs) solid var(--color-rule-strong);
}

.build-clock__tools > div {
  display: grid;
  gap: var(--space-xs);
  padding-block: var(--space-md);
  border-block-end: var(--space-3xs) solid var(--color-rule);
}

.build-clock__tools dt {
  font-family: var(--font-display);
  font-weight: 600;
}

.build-clock__tools dd {
  color: var(--color-muted);
}

.build-clock__note {
  max-width: 52ch;
  font-size: var(--text-sm);
}

.why {
  display: grid;
  gap: var(--space-3xl);
  padding-block: var(--space-3xl) var(--space-4xl);
  background: color-mix(in oklch, var(--color-paper-2) 84%, transparent);
}

.why__statement {
  display: grid;
  gap: var(--space-lg);
}

.why__statement > p {
  max-width: 24ch;
  font-family: var(--font-display);
  font-size: clamp(var(--text-xl), 4vw, var(--text-3xl));
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.035em;
}

.why__detail {
  display: grid;
  gap: var(--space-2xl);
  align-content: start;
}

.connecting-dots {
  max-width: 62ch;
  padding-block: var(--space-lg);
  border-block: var(--space-3xs) solid var(--color-rule-strong);
  color: var(--color-ink-2);
}

.connecting-dots strong {
  color: var(--color-ink);
}

.why__trail {
  display: grid;
  border-block-start: var(--space-3xs) solid var(--color-ink);
}

.why__trail > div {
  display: grid;
  gap: var(--space-xs);
  padding-block: var(--space-md);
  border-block-end: var(--space-3xs) solid var(--color-rule-strong);
}

.why__trail dt {
  font-weight: 700;
}

.why__trail dd {
  color: var(--color-ink-2);
}

.section-kicker {
  color: var(--color-signal);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.brand-origin {
  display: grid;
  gap: var(--space-3xl);
  padding-block: var(--space-3xl);
  background: color-mix(in oklch, var(--color-paper) 82%, transparent);
}

.brand-origin__mark {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  gap: var(--space-lg);
  align-self: start;
  min-height: 22rem;
  overflow: hidden;
  padding: var(--space-xl);
  border: var(--space-3xs) solid var(--color-ink);
  background: color-mix(in oklch, var(--color-accent-quiet) 78%, transparent);
}

.brand-origin__mark::before {
  position: absolute;
  inset: -25% -55%;
  z-index: 0;
  background: linear-gradient(115deg, transparent 18%, color-mix(in oklch, var(--color-accent) 76%, transparent) 34%, color-mix(in oklch, oklch(78% 0.15 145) 68%, transparent) 49%, color-mix(in oklch, oklch(76% 0.12 310) 62%, transparent) 62%, transparent 80%);
  content: "";
  filter: blur(1.4rem);
  opacity: 0.7;
  transform: translate3d(-24%, 10%, 0) rotate(-12deg);
  animation: origin-aurora-sweep 5.8s var(--ease-in-out) infinite alternate;
}

.brand-origin__mark::after {
  position: absolute;
  inset: 8% -24%;
  z-index: 0;
  border: 0.16rem solid color-mix(in oklch, var(--color-signal) 52%, transparent);
  border-radius: 46% 54% 58% 42%;
  content: "";
  opacity: 0.46;
  transform: rotate(-12deg);
  animation: origin-aurora-orbit 8s linear infinite;
}

.brand-origin__mark img {
  position: relative;
  z-index: 1;
  width: min(72%, 18rem);
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  filter: drop-shadow(0 1rem 1.4rem color-mix(in oklch, var(--color-signal) 26%, transparent));
  animation: origin-mango-float 3.4s var(--ease-in-out) infinite alternate;
}

.brand-origin__mark p {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-display);
  font-size: var(--text-lg);
}

.brand-origin__mark span {
  color: var(--color-signal);
}

.finland-flag {
  position: relative;
  display: inline-grid;
  width: 2.6rem;
  aspect-ratio: 3 / 2;
  margin-inline-start: var(--space-2xs);
  transform-origin: 8% 50%;
  animation: finland-flag-wave 2.8s var(--ease-in-out) infinite alternate;
}

.finland-flag svg {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: var(--space-3xs) solid var(--color-ink);
  border-radius: 0.2rem;
  filter: drop-shadow(0 0.3rem 0.45rem color-mix(in oklch, var(--color-signal) 24%, transparent));
}

.finland-flag::after {
  position: absolute;
  inset-block-start: -0.35rem;
  inset-inline-end: -0.3rem;
  width: 0.45rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 0 0.24rem color-mix(in oklch, var(--color-accent) 35%, transparent);
  content: "";
  animation: finland-aurora-spark 1.6s var(--ease-in-out) infinite alternate;
}

@keyframes origin-aurora-sweep {
  to { transform: translate3d(25%, -8%, 0) rotate(10deg); }
}

@keyframes origin-aurora-orbit {
  to { transform: rotate(348deg); }
}

@keyframes origin-mango-float {
  to { transform: translate3d(0, -0.9rem, 0) rotate(2.4deg) scale(1.025); }
}

@keyframes finland-flag-wave {
  from { transform: translate3d(0, 0.12rem, 0) rotate(-3deg) skewY(-1deg); }
  to { transform: translate3d(0, -0.2rem, 0) rotate(4deg) skewY(3deg); }
}

@keyframes finland-aurora-spark {
  from { opacity: 0.35; transform: scale(0.65); }
  to { opacity: 1; transform: scale(1.18); }
}

.brand-origin__story {
  display: grid;
  align-content: center;
  gap: var(--space-lg);
}

.brand-origin__story p:not(.section-kicker) {
  max-width: 60ch;
  color: var(--color-ink-2);
  font-size: var(--text-md);
}

.challenge {
  display: grid;
  gap: var(--space-3xl);
  padding-block: var(--space-4xl) var(--space-3xl);
  background: color-mix(in oklch, var(--color-paper) 82%, transparent);
}

.challenge__claim {
  display: grid;
  gap: var(--space-lg);
  max-width: 54rem;
}

.why h2,
.brand-origin h2,
.challenge h2,
.starter-kit h2,
.workbench h2,
.build-loop h2,
.toolkit h2,
.site-story h2,
.field-notes h2,
.matcha-note h2,
.faq h2,
.ideas-catalogue h2,
.research-caveat h2 {
  font-size: clamp(var(--text-2xl), 5vw, 4.25rem);
  line-height: 1.04;
}

.challenge__claim p,
.starter-kit__head p,
.why__detail > p,
.workbench__purpose p,
.build-loop__head p,
.toolkit__head p,
.site-story__head p,
.field-notes__head p,
.faq__head > p,
.ideas-hero > p,
.research-caveat > p {
  max-width: 62ch;
  color: var(--color-ink-2);
  font-size: var(--text-md);
}

.challenge__split {
  display: grid;
  border-block-start: var(--space-3xs) solid var(--color-ink);
}

.challenge__split article {
  display: grid;
  gap: var(--space-lg);
  padding-block: var(--space-xl);
  border-block-end: var(--space-3xs) solid var(--color-rule-strong);
}

.challenge__split h3 {
  font-size: var(--text-lg);
}

.challenge__split ul {
  display: grid;
  gap: var(--space-sm);
  padding: 0;
  color: var(--color-ink-2);
  list-style: none;
}

.challenge__split li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-sm);
}

.challenge__split li::before {
  content: "→";
  color: var(--color-signal);
  font-weight: 700;
}

.starter-kit {
  display: grid;
  gap: var(--space-3xl);
  padding-block: var(--space-3xl) var(--space-4xl);
  background: color-mix(in oklch, var(--color-accent-quiet) 78%, transparent);
}

.starter-kit__head {
  display: grid;
  gap: var(--space-lg);
  max-width: 58rem;
}

.starter-kit__layout {
  display: grid;
  gap: var(--space-3xl);
  align-items: start;
}

.starter-prompt {
  display: grid;
  gap: var(--space-lg);
  padding: var(--space-lg);
  border: var(--space-3xs) solid var(--color-ink);
  background: var(--color-paper);
}

.starter-prompt > div:first-child,
.starter-guide {
  display: grid;
  gap: var(--space-xs);
}

.starter-prompt h3,
.starter-guide h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
}

.starter-prompt > div:first-child p,
.starter-guide p {
  color: var(--color-ink-2);
}

.starter-prompt blockquote {
  margin: 0;
  padding-block: var(--space-lg);
  border-block: var(--space-3xs) solid var(--color-rule-strong);
  color: var(--color-ink-2);
  font-size: var(--text-md);
  line-height: 1.6;
}

.starter-prompt__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.starter-action-status {
  min-height: 1.5em;
  color: var(--color-signal);
  font-weight: 700;
}

.starter-guide ol {
  display: grid;
  margin: var(--space-lg) 0 0;
  padding: 0;
  border-block-start: var(--space-3xs) solid var(--color-ink);
  list-style: none;
}

.starter-guide li {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: var(--space-md);
  padding-block: var(--space-lg);
  border-block-end: var(--space-3xs) solid var(--color-rule-strong);
}

.starter-guide li > span {
  display: grid;
  place-items: center;
  width: 2rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-accent-ink);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.starter-guide li > div {
  display: grid;
  gap: var(--space-xs);
}

.beginner-words {
  width: 100%;
  border-block: var(--space-3xs) solid var(--color-ink);
}

.beginner-words summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  min-height: 4.75rem;
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.beginner-words summary::-webkit-details-marker {
  display: none;
}

.beginner-words summary::after {
  content: "+";
  color: var(--color-signal);
  font-family: var(--font-body);
  font-size: var(--text-xl);
  font-weight: 400;
  transition: transform var(--dur-short) var(--ease-out);
}

.beginner-words[open] summary::after {
  transform: rotate(45deg);
}

.beginner-words dl {
  display: grid;
  padding-block-end: var(--space-xl);
  animation: starter-words-enter var(--dur-short) var(--ease-out);
}

.beginner-words dl > div {
  display: grid;
  grid-template-columns: minmax(5rem, 0.28fr) minmax(0, 1fr);
  gap: var(--space-md);
  padding-block: var(--space-md);
  border-block-start: var(--space-3xs) solid var(--color-rule);
}

.beginner-words dt {
  font-family: var(--font-display);
  font-weight: 600;
}

.beginner-words dd {
  color: var(--color-ink-2);
}

@keyframes starter-words-enter {
  from { opacity: 0; transform: translate3d(0, -0.4rem, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

.workbench {
  padding-block: var(--space-3xl) var(--space-4xl);
  background: color-mix(in oklch, var(--color-paper-2) 84%, transparent);
}

.workbench__intro {
  display: grid;
  gap: var(--space-xl);
  padding-block-end: var(--space-3xl);
}

.workbench__intro > div {
  display: grid;
  gap: var(--space-sm);
}

.workbench__intro > .workbench__purpose {
  gap: var(--space-md);
}

.project-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-weight: 700;
}

.project-label img {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-sm);
}

.workbench__layout {
  display: grid;
  gap: var(--space-3xl);
  align-items: start;
}

.screen-inspector {
  position: relative;
  display: grid;
  min-width: 0;
  padding: var(--space-lg);
  border: var(--space-3xs) solid var(--color-ink);
  background: var(--color-paper);
}

.screen-stage {
  position: relative;
  width: min(100%, 20rem);
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border: var(--space-3xs) solid var(--color-ink);
  border-radius: var(--radius-lg);
  background: var(--color-paper-3);
}

.screen-stage img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
  transform: translateY(0.4rem);
  transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out);
}

.screen-stage img[data-active="true"] {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.screen-note {
  display: none;
  align-items: start;
  gap: var(--space-sm);
  margin-block-start: var(--space-lg);
  padding-block-start: var(--space-lg);
  border-block-start: var(--space-3xs) solid var(--color-rule);
  opacity: 0;
  transform: translateY(0.35rem);
  transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out);
}

.screen-note[data-active="true"] {
  display: flex;
  opacity: 1;
  transform: translateY(0);
}

.screen-note > span {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 2rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-accent-ink);
  font-weight: 700;
}

.screen-note p {
  display: grid;
  color: var(--color-ink-2);
}

.screen-note strong {
  color: var(--color-ink);
}

.workbench__controls {
  display: grid;
  justify-items: start;
  gap: var(--space-2xl);
}

.screen-tabs {
  display: grid;
  width: 100%;
  border-block-start: var(--space-3xs) solid var(--color-ink);
}

.screen-tab {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  align-items: center;
  min-height: 4.5rem;
  padding: var(--space-md) 0;
  border: 0;
  border-block-end: var(--space-3xs) solid var(--color-rule-strong);
  background: transparent;
  color: var(--color-ink);
  text-align: start;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-short) var(--ease-out);
}

.screen-tab[aria-pressed="true"] {
  background: var(--color-accent-quiet);
}

.project-status {
  display: grid;
  width: 100%;
  border-block-start: var(--space-3xs) solid var(--color-ink);
}

.project-status > div {
  display: grid;
  grid-template-columns: minmax(5rem, 0.35fr) minmax(0, 1fr);
  gap: var(--space-lg);
  padding-block: var(--space-md);
  border-block-end: var(--space-3xs) solid var(--color-rule);
}

.project-status dt {
  color: var(--color-muted);
}

.project-status dd {
  font-weight: 700;
}

.build-loop {
  display: grid;
  gap: var(--space-3xl);
  padding-block: var(--space-4xl);
  background: color-mix(in oklch, var(--color-paper) 82%, transparent);
}

.build-loop__head,
.toolkit__head,
.site-story__head,
.field-notes__head {
  display: grid;
  gap: var(--space-lg);
  max-width: 52rem;
}

.site-story__body {
  display: grid;
  gap: var(--space-xl);
}

.pipeline {
  display: grid;
  padding: 0;
  border-block-start: var(--space-3xs) solid var(--color-ink);
  list-style: none;
}

.pipeline__stage {
  position: relative;
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  gap: var(--space-md);
  padding-block: var(--space-xl);
  border-block-end: var(--space-3xs) solid var(--color-rule-strong);
}

.pipeline__stage::after {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 0;
  width: 0.5rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--color-accent);
  content: "";
  opacity: 0;
  transform: translate(-150%, -50%);
  transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out);
}

.pipeline__stage[data-active="true"]::after {
  opacity: 1;
  transform: translate(0, -50%);
}

.pipeline__stage > div {
  display: grid;
  gap: var(--space-xs);
}

.pipeline__stage h3 {
  font-size: var(--text-lg);
}

.pipeline__stage p {
  color: var(--color-ink-2);
}

.toolkit {
  display: grid;
  gap: var(--space-3xl);
  padding-block: var(--space-3xl);
  background: color-mix(in oklch, var(--color-accent-quiet) 86%, transparent);
}

.tool-bench {
  display: grid;
  border-block-start: var(--space-3xs) solid var(--color-ink);
}

.tool-bench > div {
  display: grid;
  gap: var(--space-xs);
  padding-block: var(--space-lg);
  border-block-end: var(--space-3xs) solid var(--color-rule-strong);
}

.tool-bench dt {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 600;
}

.tool-bench dd {
  max-width: 62ch;
  color: var(--color-ink-2);
}

.site-story {
  display: grid;
  gap: var(--space-3xl);
  padding-block: var(--space-3xl);
  background: color-mix(in oklch, var(--color-paper) 82%, transparent);
}

.site-recipe {
  display: grid;
  padding: 0;
  border-block-start: var(--space-3xs) solid var(--color-ink);
  list-style: none;
}

.site-recipe li {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: var(--space-md);
  padding-block: var(--space-lg);
  border-block-end: var(--space-3xs) solid var(--color-rule-strong);
}

.site-recipe li > span {
  color: var(--color-signal);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
}

.site-recipe li > div {
  display: grid;
  gap: var(--space-xs);
}

.site-recipe h3 {
  font-size: var(--text-md);
}

.site-recipe p {
  max-width: 58ch;
  color: var(--color-ink-2);
}

.site-story__invite {
  max-width: 58ch;
  padding: var(--space-lg);
  background: var(--color-accent-quiet);
  color: var(--color-ink-2);
}

.site-story__invite strong {
  display: block;
  margin-block-end: var(--space-xs);
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: var(--text-md);
}

.field-notes {
  display: grid;
  gap: var(--space-3xl);
  padding-block: var(--space-3xl) var(--space-4xl);
  background: color-mix(in oklch, var(--color-paper-2) 84%, transparent);
}

.notes-log {
  display: grid;
  gap: 0;
  border-block-start: var(--space-3xs) solid var(--color-ink);
}

.note-group {
  border-block-end: var(--space-3xs) solid var(--color-rule-strong);
}

.note-group > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 2rem;
  gap: var(--space-xs) var(--space-md);
  align-items: center;
  min-height: 5.5rem;
  padding-block: var(--space-lg);
  color: var(--color-ink);
  cursor: pointer;
  list-style: none;
}

.note-group > summary::-webkit-details-marker {
  display: none;
}

.note-group > summary span {
  grid-column: 1;
  grid-row: 1;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 6vw, var(--text-xl));
  font-weight: 700;
  line-height: 1.15;
}

.note-group > summary small {
  grid-column: 1;
  grid-row: 2;
  color: var(--color-muted);
  font-size: var(--text-sm);
  font-weight: 650;
}

.note-group > summary::after {
  content: "+";
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: var(--space-3xs) solid currentColor;
  border-radius: 50%;
  font-family: var(--font-body);
  font-size: var(--text-lg);
  grid-column: 2;
  grid-row: 1 / span 2;
  line-height: 1;
}

.note-group[open] > summary::after {
  content: "−";
}

.note-group > summary:hover span,
.note-group > summary:focus-visible span {
  color: var(--color-signal);
}

.note-group__items {
  display: grid;
  margin: 0 0 var(--space-xl);
  padding: 0;
  border-block-start: var(--space-3xs) solid var(--color-rule-strong);
  list-style: none;
}

.note-group__items li {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: var(--space-sm) var(--space-md);
  padding-block: var(--space-lg);
  border-block-end: var(--space-3xs) solid var(--color-rule-strong);
}

.note-group__items li > div {
  display: grid;
  gap: var(--space-xs);
}

.note-number {
  color: var(--color-muted);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.note-group__items h4 {
  font-size: var(--text-md);
  line-height: 1.25;
}

.note-group__items p {
  color: var(--color-ink-2);
}

.note-group__items p::before,
.note-group__items strong::before {
  display: block;
  margin-block-end: var(--space-3xs);
  color: var(--color-muted);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 750;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.note-group__items p::before {
  content: "What happened";
}

.note-group__items strong {
  grid-column: 2;
  color: var(--color-signal);
  line-height: 1.45;
}

.note-group__items strong::before {
  content: "What I learned";
}

.matcha-note {
  display: grid;
  gap: var(--space-xl);
  padding-block: var(--space-3xl);
  border-block-start: var(--space-xs) solid var(--color-accent);
  background: color-mix(in oklch, var(--color-paper-2) 84%, transparent);
  color: var(--color-ink);
}

.matcha-note h2 {
  max-width: 15ch;
}

.matcha-note p {
  max-width: 60ch;
  font-size: var(--text-md);
}

.faq {
  display: grid;
  gap: var(--space-3xl);
  justify-items: start;
  padding-block: var(--space-3xl) var(--space-4xl);
  background: color-mix(in oklch, var(--color-paper) 82%, transparent);
}

.faq__head {
  display: grid;
  gap: var(--space-lg);
  max-width: 54rem;
}

.faq-list {
  display: grid;
  width: 100%;
  border-block-start: var(--space-3xs) solid var(--color-ink);
}

.faq-list details {
  border-block-end: var(--space-3xs) solid var(--color-rule-strong);
}

.faq-list summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-lg);
  align-items: center;
  min-height: 4.75rem;
  padding-block: var(--space-lg);
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 600;
  line-height: 1.25;
  cursor: pointer;
  list-style: none;
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq-list summary::after {
  content: "+";
  color: var(--color-signal);
  font-family: var(--font-body);
  font-size: var(--text-xl);
  font-weight: 400;
  transition: transform var(--dur-short) var(--ease-out);
}

.faq-list details[open] summary::after {
  transform: rotate(45deg);
}

.faq-list details p {
  max-width: 66ch;
  padding-block: 0 var(--space-lg);
  color: var(--color-ink-2);
  font-size: var(--text-md);
}

.ideas-hero,
.ideas-catalogue,
.research-caveat {
  width: min(100%, var(--page-max));
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}

.ideas-hero {
  display: grid;
  justify-items: start;
  gap: var(--space-lg);
  min-height: 33rem;
  padding-block: var(--space-3xl) var(--space-4xl);
  border-block-end: var(--space-3xs) solid var(--color-ink);
}

.ideas-hero h1 {
  max-width: 12ch;
  font-size: var(--text-display);
  line-height: 1.02;
}

.vote-guide {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-block-start: var(--space-lg);
}

.vote-guide span {
  padding: var(--space-sm) var(--space-md);
  border: var(--space-3xs) solid var(--color-ink);
  border-radius: var(--radius-pill);
  background: var(--color-paper);
  font-size: var(--text-sm);
  font-weight: 700;
}

.ideas-catalogue {
  display: grid;
  gap: var(--space-3xl);
  padding-block: var(--space-3xl) var(--space-4xl);
  background: var(--color-paper-2);
}

.month-tabs {
  display: flex;
  gap: var(--space-xl);
  overflow-x: auto;
  border-block-end: var(--space-3xs) solid var(--color-rule-strong);
}

.month-tabs button {
  position: relative;
  min-height: 3.5rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-muted);
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 700;
  cursor: pointer;
}

.month-tabs button::after {
  position: absolute;
  inset: auto 0 -0.125rem;
  height: 0.25rem;
  background: var(--color-accent);
  content: "";
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-short) var(--ease-out);
}

.month-tabs button[aria-selected="true"] {
  color: var(--color-ink);
}

.month-tabs button[aria-selected="true"]::after {
  transform: scaleX(1);
}

.month-panel {
  display: grid;
  gap: var(--space-3xl);
}

.month-panel[hidden] {
  display: none;
}

.month-panel--empty {
  min-height: 18rem;
  align-content: center;
  max-width: 42rem;
}

.month-panel--empty h2 {
  font-size: var(--text-xl);
}

.month-panel--empty p {
  max-width: 48ch;
  color: var(--color-ink-2);
  font-size: var(--text-md);
}

.catalogue-head {
  display: grid;
  gap: var(--space-xl);
}

.catalogue-head > div {
  display: grid;
  gap: var(--space-sm);
}

.vote-status {
  max-width: 42ch;
  align-self: end;
  padding-inline-start: var(--space-md);
  border-inline-start: var(--space-3xs) solid var(--color-accent);
  color: var(--color-ink-2);
}

.vote-status[data-state="offline"] {
  border-color: var(--color-rule-strong);
}

.idea-list {
  display: grid;
  border-block-start: var(--space-3xs) solid var(--color-ink);
}

.idea-card {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  gap: var(--space-lg);
  padding-block: var(--space-xl);
  border-block-end: var(--space-3xs) solid var(--color-rule-strong);
}

.idea-card__number {
  color: var(--color-muted);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.idea-card__copy {
  display: grid;
  gap: var(--space-sm);
}

.idea-card__type {
  color: var(--color-signal);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.idea-card h3 {
  font-size: var(--text-xl);
  line-height: 1.15;
}

.idea-card__copy > p:not(.idea-card__type):not(.research-note) {
  max-width: 54ch;
  color: var(--color-ink-2);
  font-size: var(--text-md);
}

.idea-card dl {
  margin-block-start: var(--space-sm);
  padding-block-start: var(--space-sm);
  border-block-start: var(--space-3xs) solid var(--color-rule);
}

.idea-card dl div {
  display: grid;
  gap: var(--space-2xs);
}

.idea-card dt,
.research-note,
.research-link {
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.idea-card dd {
  font-weight: 700;
}

.research-link {
  justify-self: start;
  padding-block: var(--space-sm);
  font-weight: 700;
  white-space: nowrap;
  text-decoration-color: var(--color-rule-strong);
  text-underline-offset: var(--space-2xs);
}

.idea-card__vote {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm) var(--space-md);
  margin-block-start: var(--space-sm);
}

.idea-card__vote > span {
  color: var(--color-muted);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

.idea-card__vote button {
  min-height: 2.75rem;
  padding-inline: var(--space-md);
  border: var(--space-3xs) solid var(--color-ink);
  border-radius: var(--radius-pill);
  background: var(--color-paper);
  color: var(--color-ink);
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.idea-card__vote button:active {
  background: var(--color-accent);
}

.idea-card__vote button[data-selected="true"] {
  background: var(--color-accent);
}

.research-caveat {
  display: grid;
  justify-items: start;
  gap: var(--space-lg);
  padding-block: var(--space-3xl);
  background: color-mix(in oklch, var(--color-paper) 94%, transparent);
}

.site-footer {
  padding-block: var(--space-4xl) max(var(--space-xl), env(safe-area-inset-bottom));
}

.footer-statement {
  max-width: 18ch;
  padding-block-end: var(--space-3xl);
  font-family: var(--font-display);
  font-size: clamp(var(--text-2xl), 6vw, 5rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.045em;
}

.footer-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  padding-block-start: var(--space-lg);
  border-block-start: var(--space-3xs) solid var(--color-ink);
  color: var(--color-muted);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-lg);
}

/* Shared support and privacy pages */
.legal-shell {
  max-width: 54rem;
  padding-block: var(--space-3xl) var(--space-4xl);
}

.product-kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  min-height: 2.75rem;
  color: var(--color-ink);
  font-weight: 700;
  text-decoration: none;
}

.product-kicker img {
  width: 2.5rem;
  height: 2.5rem;
  object-fit: contain;
}

.legal-shell h1 {
  margin-block: var(--space-xl) var(--space-sm);
  font-size: clamp(var(--text-3xl), 8vw, 4.75rem);
  line-height: 1.02;
}

.legal-shell h2 {
  margin-block: var(--space-2xl) var(--space-sm);
  font-size: var(--text-lg);
  line-height: 1.2;
}

.legal-shell p,
.legal-shell li {
  color: var(--color-ink-2);
}

.legal-shell a:not(.button):not(.product-kicker) {
  font-weight: 700;
  text-decoration-color: var(--color-rule-strong);
  text-decoration-thickness: var(--space-3xs);
  text-underline-offset: var(--space-2xs);
}

.legal-summary {
  margin-block: var(--space-xl);
  padding: var(--space-lg);
  border-block: var(--space-3xs) solid var(--color-rule-strong);
  background: var(--color-paper-2);
}

.support-grid {
  display: grid;
  gap: var(--space-xl);
  margin-block: var(--space-2xl);
}

.support-card {
  padding-block: var(--space-lg);
  border-block-end: var(--space-3xs) solid var(--color-rule);
}

.support-card:first-child {
  border-block-start: var(--space-3xs) solid var(--color-rule);
}

.support-card h2 {
  margin: 0 0 var(--space-xs);
}

.contact-panel {
  display: grid;
  gap: var(--space-xl);
  margin-block: var(--space-2xl);
  padding: clamp(var(--space-lg), 4vw, var(--space-2xl));
  border: var(--space-3xs) solid var(--color-rule-strong);
  border-radius: var(--radius-lg);
  background: var(--color-paper-2);
}

.contact-panel h2 {
  margin-block-start: var(--space-xs);
  font-size: clamp(var(--text-xl), 4vw, var(--text-2xl));
}

.contact-form,
.contact-form label {
  display: grid;
  gap: var(--space-xs);
}

.contact-form {
  gap: var(--space-md);
}

.contact-form label {
  color: var(--color-ink);
  font-weight: 700;
}

.contact-form label span {
  color: var(--color-muted);
  font-size: var(--text-xs);
  font-weight: 500;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  border: var(--space-3xs) solid var(--color-rule-strong);
  border-radius: var(--radius-md);
  background: var(--color-paper);
  color: var(--color-ink);
  font: inherit;
  font-weight: 500;
}

.contact-form textarea {
  resize: vertical;
}

.contact-form :is(input, select, textarea):focus-visible {
  outline: 0.2rem solid var(--color-accent);
  outline-offset: 0.12rem;
}

.contact-form__row {
  display: grid;
  gap: var(--space-md);
}

.contact-form__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
}

.contact-status {
  margin: 0;
  font-size: var(--text-sm);
}

.contact-status[data-state="success"] {
  color: #166534;
  font-weight: 700;
}

.contact-status[data-state="error"] {
  color: #b42318;
  font-weight: 700;
}

.contact-trap {
  position: absolute !important;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.legal-footer {
  margin-block-start: var(--space-3xl);
  padding-block-start: var(--space-lg);
  border-block-start: var(--space-3xs) solid var(--color-rule);
  color: var(--color-muted);
}

@media (hover: hover) and (pointer: fine) {
  .nav-links a:hover,
  .nav-menu a:hover,
  .footer-links a:hover {
    text-decoration-color: var(--color-accent);
  }

  .button:hover {
    transform: translateY(-0.1rem);
  }

  .screen-tab:hover {
    background: var(--color-paper-3);
  }

  .idea-card__vote button:hover {
    background: var(--color-accent-quiet);
  }

}

@media (max-width: 24rem) {
  .hero {
    gap: var(--space-lg);
    padding-block-start: var(--space-lg);
    padding-block-end: var(--space-xl);
  }

  .hero__copy {
    gap: var(--space-md);
  }

  .hero h1 {
    font-size: clamp(2.35rem, 13vw, 2.85rem);
  }

  .hero-proof {
    grid-template-columns: minmax(0, 1fr) 5rem;
    min-height: 10.5rem;
    padding: var(--space-xs);
  }

  .hero-screen {
    width: 5rem;
  }

  .hero-loop {
    grid-template-columns: repeat(2, auto);
  }
}

@media (min-width: 40rem) {
  .note-group > summary {
    grid-template-columns: minmax(0, 1fr) auto 2rem;
    gap: var(--space-md);
  }

  .note-group > summary span,
  .note-group > summary small,
  .note-group > summary::after {
    grid-row: 1;
  }

  .note-group > summary small {
    grid-column: 2;
  }

  .note-group > summary::after {
    grid-column: 3;
  }

  .starter-kit__layout {
    grid-template-columns: minmax(0, 1.1fr) minmax(16rem, 0.9fr);
  }

  .beginner-words dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-xl);
  }

  .status-copy--short {
    display: none;
  }

  .status-copy--long {
    display: inline;
  }

  .hero {
    grid-template-columns: minmax(0, 1.05fr) minmax(19rem, 0.95fr);
    align-items: center;
    gap: var(--space-3xl);
    min-height: clamp(40rem, 78dvh, 54rem);
    padding-block-start: var(--space-3xl);
    padding-block-end: var(--space-4xl);
  }

  .hero-proof {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0;
    padding: var(--space-lg);
  }

  .hero-screen {
    width: clamp(9.5rem, 33vw, 15.5rem);
  }

  .build-clock__display {
    grid-template-columns: minmax(0, 2.2fr) repeat(3, minmax(0, 1fr));
  }

  .build-clock__display > div:nth-child(n) {
    border-block-end: 0;
    border-inline-end: var(--space-3xs) solid var(--color-rule);
  }

  .build-clock__display .build-clock__total {
    grid-column: auto;
    border-block-end: 0;
    border-inline-end: var(--space-3xs) solid var(--color-rule-strong);
  }

  .build-clock__display > div:last-child {
    border-inline-end: 0;
  }

  .build-clock__tools > div {
    grid-template-columns: minmax(10rem, 0.45fr) minmax(0, 1.55fr);
    align-items: baseline;
    gap: var(--space-xl);
  }

  .build-ledger {
    grid-template-columns: minmax(12rem, 0.55fr) minmax(0, 1.45fr);
    align-items: start;
  }

  .build-ledger dl {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .why {
    grid-template-columns: minmax(0, 1.1fr) minmax(18rem, 0.9fr);
    align-items: start;
  }

  .brand-origin {
    grid-template-columns: minmax(18rem, 0.8fr) minmax(0, 1.2fr);
    align-items: center;
  }

  .why__trail > div {
    grid-template-columns: minmax(9rem, 0.65fr) minmax(0, 1.35fr);
    gap: var(--space-xl);
  }

  .challenge__split {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  }

  .challenge__split article {
    padding: var(--space-xl);
  }

  .challenge__split article:first-child {
    padding-inline-start: 0;
    border-inline-end: var(--space-3xs) solid var(--color-rule-strong);
  }

  .workbench__intro {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    align-items: end;
  }

  .workbench__layout {
    grid-template-columns: minmax(23rem, 1.2fr) minmax(16rem, 0.8fr);
  }

  .tool-bench > div {
    grid-template-columns: minmax(12rem, 0.7fr) minmax(0, 1.3fr);
    gap: var(--space-xl);
    align-items: baseline;
  }

  .site-story {
    grid-template-columns: minmax(18rem, 0.8fr) minmax(0, 1.2fr);
    align-items: start;
  }

  .site-story__head {
    position: sticky;
    inset-block-start: 7rem;
  }

  .screen-inspector {
    grid-template-columns: minmax(12rem, 20rem) minmax(10rem, 1fr);
    gap: var(--space-xl);
    align-items: center;
  }

  .screen-note {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    padding: 0;
    border: 0;
  }

  .screen-stage {
    grid-column: 1;
    grid-row: 1;
  }

  .pipeline {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .pipeline__stage {
    grid-template-columns: 1fr;
    padding: var(--space-xl) var(--space-lg);
    border-inline-end: var(--space-3xs) solid var(--color-rule-strong);
  }

  .pipeline__stage:first-child {
    padding-inline-start: 0;
  }

  .pipeline__stage:last-child {
    padding-inline-end: 0;
    border-inline-end: 0;
  }

  .pipeline__stage::after {
    inset-block-start: 0;
    inset-inline-start: 50%;
    transform: translate(-50%, -150%);
  }

  .pipeline__stage[data-active="true"]::after {
    transform: translate(-50%, -50%);
  }

  .note-group__items li {
    grid-template-columns: 3rem minmax(14rem, 0.9fr) minmax(15rem, 1.1fr);
    gap: var(--space-xl);
    align-items: baseline;
  }

  .note-group__items strong {
    grid-column: auto;
  }

  .idea-card {
    grid-template-columns: 3rem minmax(0, 1fr) minmax(10rem, auto);
    align-items: center;
    gap: var(--space-xl);
  }

  .idea-card__vote {
    grid-column: 3;
    grid-row: 1;
    display: grid;
    justify-items: end;
    margin: 0;
  }

  .support-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .contact-form__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 60rem) {
  .site-nav {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  }

  .wordmark {
    grid-column: 1;
    justify-self: start;
  }

  .nav-links {
    grid-column: 2;
    display: flex;
    justify-self: center;
  }

  .menu-button,
  .nav-menu {
    display: none;
  }

  .hero-proof {
    grid-template-columns: minmax(8rem, 0.7fr) minmax(14rem, 1fr);
    padding: var(--space-xl);
  }

  .hero-screen {
    width: min(100%, 16.5rem);
  }

  .screen-note {
    position: relative;
  }

  .screen-note::before {
    position: absolute;
    inset-block-start: 1rem;
    inset-inline-end: calc(100% + var(--space-sm));
    width: var(--space-xl);
    border-block-start: var(--space-3xs) solid var(--color-rule-strong);
    content: "";
  }
}

html[data-motion="off"] {
  scroll-behavior: auto;
}

html[data-motion="off"] *,
html[data-motion="off"] *::before,
html[data-motion="off"] *::after {
  animation-duration: 150ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 150ms !important;
}

html[data-motion="off"] .hero-enter {
  opacity: 1;
  transform: none;
  animation: none;
}

html[data-motion="off"] main [data-reveal] {
  opacity: 1;
  filter: none;
  transform: none;
}

html[data-motion="off"] .signal-field {
  opacity: 0.38;
}

html[data-motion="off"] .aurora-band,
html[data-motion="off"] .aurora-orbit,
html[data-motion="off"] .aurora-comet,
html[data-motion="off"] .aurora-core {
  animation: none;
  will-change: auto;
}

html[data-motion="off"] .aurora-band--mango { transform: translate3d(8%, 20%, 0) rotate(-4deg); }
html[data-motion="off"] .aurora-band--green { transform: translate3d(-8%, 4%, 0) rotate(5deg); }
html[data-motion="off"] .aurora-band--violet { transform: translate3d(10%, -8%, 0) rotate(-3deg); }
html[data-motion="off"] .aurora-comet { opacity: 0; }
html[data-motion="off"] .finland-flag,
html[data-motion="off"] .finland-flag::after { animation: none; transform: none; }

html[data-motion="off"] .button:hover,
html[data-motion="off"] .button:active,
html[data-motion="off"] .menu-button:active,
html[data-motion="off"] .status-close:active,
html[data-motion="off"] .screen-stage img,
html[data-motion="off"] .screen-note,
html[data-motion="off"] .pipeline__stage::after,
html[data-motion="off"] .site-head {
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  html:not([data-motion="on"]) *,
  html:not([data-motion="on"]) *::before,
  html:not([data-motion="on"]) *::after {
    animation-duration: 150ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 150ms !important;
  }

  html:not([data-motion="on"]) .hero-enter {
    opacity: 1;
    transform: none;
    animation: none;
  }

  html:not([data-motion="on"]) main [data-reveal] {
    opacity: 1;
    filter: none;
    transform: none;
  }

  html:not([data-motion="on"]) .signal-field {
    opacity: 0.55;
  }

  html:not([data-motion="on"]) .aurora-band,
  html:not([data-motion="on"]) .aurora-orbit,
  html:not([data-motion="on"]) .aurora-comet,
  html:not([data-motion="on"]) .aurora-core {
    animation: none;
    will-change: auto;
  }

  html:not([data-motion="on"]) .aurora-band--mango { transform: translate3d(8%, 20%, 0) rotate(-4deg); }
  html:not([data-motion="on"]) .aurora-band--green { transform: translate3d(-8%, 4%, 0) rotate(5deg); }
  html:not([data-motion="on"]) .aurora-band--violet { transform: translate3d(10%, -8%, 0) rotate(-3deg); }
  html:not([data-motion="on"]) .aurora-comet { opacity: 0; }

  html:not([data-motion="on"]) .button:hover,
  html:not([data-motion="on"]) .button:active,
  html:not([data-motion="on"]) .menu-button:active,
  html:not([data-motion="on"]) .status-close:active,
  html:not([data-motion="on"]) .screen-stage img,
  html:not([data-motion="on"]) .screen-note,
  html:not([data-motion="on"]) .pipeline__stage::after,
  html:not([data-motion="on"]) .site-head {
    transform: none;
  }
}

/* Mobile home: a short, touch-first route through the same story. */
.home-page main > .hero,
.home-page main > .section {
  display: none;
}

.mobile-home {
  position: relative;
  z-index: var(--z-base);
  width: min(100%, 48rem);
  margin-inline: auto;
  padding: var(--space-lg) var(--page-gutter) var(--space-2xl);
}

.mobile-home__hero {
  display: grid;
  gap: var(--space-md);
  padding-block: var(--space-lg) var(--space-xl);
}

.mobile-home__hello {
  width: fit-content;
  padding: var(--space-xs) var(--space-sm);
  border: var(--space-3xs) solid var(--color-ink);
  border-radius: var(--radius-pill);
  background: var(--color-paper);
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1.3;
}

.mobile-home h1 {
  max-width: 12ch;
  font-size: clamp(2.65rem, 13vw, 4.6rem);
  line-height: 0.98;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.mobile-home__hero > p:not(.mobile-home__hello) {
  max-width: 34rem;
  color: var(--color-ink-2);
  font-size: clamp(1.05rem, 4.8vw, 1.3rem);
  line-height: 1.5;
}

.mobile-home__hero .button {
  justify-self: start;
  min-height: 3.25rem;
}

.mobile-product {
  position: relative;
  display: grid;
  gap: var(--space-xl);
  overflow: hidden;
  padding: var(--space-lg);
  border: var(--space-3xs) solid var(--color-ink);
  border-radius: var(--radius-lg);
  background: var(--color-accent-quiet);
}

.mobile-product__copy {
  display: grid;
  gap: var(--space-md);
}

.mobile-product__name {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
}

.mobile-product__name img {
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-sm);
  object-fit: contain;
}

.mobile-product h2,
.mobile-explore h2 {
  font-size: clamp(2rem, 9vw, 3.25rem);
  line-height: 1.05;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.mobile-product__copy > p:not(.mobile-product__name) {
  color: var(--color-ink-2);
}

.mobile-product ul {
  display: grid;
  gap: var(--space-xs);
  padding-inline-start: var(--space-lg);
}

.mobile-product .text-link {
  width: fit-content;
  min-height: 2.75rem;
  padding-block: var(--space-xs);
}

.mobile-product__visual {
  position: relative;
  display: grid;
  justify-items: center;
  min-height: 24rem;
  padding-block-start: var(--space-lg);
}

.mobile-product__visual > img {
  position: relative;
  z-index: 2;
  width: min(68%, 13.5rem);
  height: auto;
  border: var(--space-3xs) solid var(--color-ink);
  border-radius: var(--radius-lg);
  box-shadow: 0 var(--space-sm) var(--space-xl) color-mix(in oklch, var(--color-ink) 18%, transparent);
}

.mobile-product__visual > p {
  position: absolute;
  inset: auto 0 var(--space-lg) auto;
  z-index: 3;
  display: grid;
  max-width: 9.5rem;
  padding: var(--space-sm);
  border: var(--space-3xs) solid var(--color-ink);
  border-radius: var(--radius-md);
  background: var(--color-paper);
  line-height: 1.2;
}

.mobile-product__visual > p strong {
  font-family: var(--font-display);
  font-size: var(--text-md);
}

.mobile-product__visual > p span:last-child {
  margin-block-start: var(--space-2xs);
  color: var(--color-muted);
  font-size: var(--text-xs);
}

.mobile-ai-signal {
  position: absolute;
  inset: 12% -30% auto;
  height: 8rem;
  border: var(--space-3xs) solid var(--color-rule-strong);
  border-radius: 50%;
  transform: rotate(-8deg);
}

.mobile-ai-signal::before,
.mobile-ai-signal::after {
  position: absolute;
  inset: 24% -8% auto;
  height: 5rem;
  border: var(--space-3xs) solid var(--color-rule);
  border-radius: 50%;
  content: "";
}

.mobile-ai-signal::after {
  inset-block-start: 58%;
}

.mobile-ai-signal span {
  position: absolute;
  inset-block-start: 48%;
  inset-inline-start: 6%;
  width: 0.8rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 var(--space-lg) var(--color-accent);
  animation: mobile-signal-travel 4.8s var(--ease-in-out) infinite alternate;
}

@keyframes mobile-signal-travel {
  from { transform: translate3d(0, -0.5rem, 0) scale(0.8); }
  48% { transform: translate3d(39vw, 1.1rem, 0) scale(1.25); }
  to { transform: translate3d(72vw, -0.35rem, 0) scale(0.9); }
}

.mobile-explore {
  padding-block: var(--space-2xl) var(--space-xl);
}

.mobile-explore__head {
  display: grid;
  gap: var(--space-sm);
  margin-block-end: var(--space-lg);
}

.mobile-explore__head p {
  color: var(--color-muted);
}

.mobile-chapters {
  border-block-start: var(--space-3xs) solid var(--color-ink);
}

.mobile-chapters details {
  border-block-end: var(--space-3xs) solid var(--color-rule-strong);
}

.mobile-chapters summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  min-height: 5.5rem;
  padding-block: var(--space-md);
  cursor: pointer;
  list-style: none;
}

.mobile-chapters summary::-webkit-details-marker {
  display: none;
}

.mobile-chapters summary span {
  display: grid;
  gap: var(--space-3xs);
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 700;
  line-height: 1.25;
}

.mobile-chapters summary small {
  color: var(--color-muted);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
}

.mobile-chapters summary svg {
  flex: 0 0 auto;
  width: 1.5rem;
  height: 1.5rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  transition: transform var(--dur-short) var(--ease-out);
}

.mobile-chapters details[open] summary svg {
  transform: rotate(180deg);
}

.mobile-chapter__body {
  display: grid;
  gap: var(--space-md);
  padding-block: 0 var(--space-lg);
  color: var(--color-ink-2);
}

.mobile-steps,
.mobile-lessons {
  display: grid;
  gap: var(--space-md);
  padding-inline-start: var(--space-lg);
}

.mobile-steps li {
  padding-inline-start: var(--space-xs);
}

.mobile-steps strong,
.mobile-steps span {
  display: block;
}

.mobile-steps strong {
  color: var(--color-ink);
}

.mobile-prompt {
  padding: var(--space-md);
  border-radius: var(--radius-md);
  background: var(--color-paper-2);
  color: var(--color-ink);
}

.mobile-next {
  display: grid;
  border-block-start: var(--space-3xs) solid var(--color-ink);
}

.mobile-next a {
  display: grid;
  gap: var(--space-3xs);
  min-height: 5.5rem;
  padding-block: var(--space-md);
  border-block-end: var(--space-3xs) solid var(--color-rule-strong);
  text-decoration: none;
}

.mobile-next span {
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.mobile-next strong {
  font-family: var(--font-display);
  font-size: var(--text-md);
}

.mobile-home h2[data-reveal] {
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
}

@media (max-width: 59.99rem) {
  .home-page .site-footer {
    padding-block: var(--space-2xl) max(var(--space-xl), env(safe-area-inset-bottom));
  }

  .home-page .footer-statement {
    padding-block-end: var(--space-xl);
    font-size: clamp(var(--text-xl), 9vw, var(--text-2xl));
  }
}

@media (min-width: 40rem) and (max-width: 59.99rem) {
  .mobile-product {
    grid-template-columns: minmax(0, 1fr) minmax(15rem, 0.8fr);
    align-items: center;
  }

  .mobile-product__visual {
    min-height: 29rem;
  }

  .mobile-next {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-xl);
  }
}

@media (min-width: 60rem) {
  .home-page main > .hero,
  .home-page main > .section {
    display: grid;
  }

  .home-page main > .faq,
  .home-page main > .matcha-note {
    display: block;
  }

  .mobile-home {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-ai-signal span {
    animation: none;
    transform: translate3d(36vw, 0, 0);
  }
}