/* start-here card images (EXPERIENCE lane) */
.arm-card img { width: 100%; border-radius: 6px; display: block; background: #101014; }
.arm-card p code { font-size: .78rem; }

/* hero interaction hint */
.arm-hero { position: relative; }
.arm-hint { position: absolute; right: .8rem; bottom: .6rem; color: #8a8a93;
  font-family: var(--arm-mono, monospace); font-size: .65rem; letter-spacing: .06em;
  pointer-events: none; }

/* the claim is the page h1; keep its display styling */
h1.arm-claim { font-size: 1.15rem; font-weight: 500; margin: .4rem 0 .8rem; color: inherit; }

/* assembly how-to: each step's photo sits beside its words, under them on a phone */
.md-typeset .arm-howto ol > li { display: grid; grid-template-columns: 1fr 11rem; gap: .4rem 1.2rem; align-items: start; margin-bottom: 1.1rem; }
.md-typeset .arm-howto ol > li > p { margin: 0; }
.md-typeset .arm-howto ol > li > p:first-child { grid-column: 1; }
.md-typeset .arm-howto ol > li > p:not(:first-child) { grid-column: 2; grid-row: 1 / span 3; display: grid; gap: .4rem; }
.md-typeset .arm-howto ol > li img { width: 100%; border-radius: 6px; display: block; background: #101014; }
@media (max-width: 720px) { .md-typeset .arm-howto ol > li { grid-template-columns: 1fr; }
  .md-typeset .arm-howto ol > li > p:not(:first-child) { grid-column: 1; grid-row: auto; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); } }

/* the no-hardware invitation */
.arm-try { text-align: center; color: #9a9aa2; font-size: .85rem; margin: .8rem 0 0; }
.arm-try a { color: #ffb000; }

/* keep the mobile claim size (h1 specificity) */
@media (max-width: 44rem) { h1.arm-claim { font-size: 1rem; } }