/* ==========================================================================
   Homepage sections (index.html only)

   From Nick's homepage concept v8, renamed to the site's BEM + ITCSS convention and made
   mobile-first. Tokens and the shared shell (header, footer, buttons, overline, reassure ticks)
   are in css/site.css.

   Nesting note: modifiers are written as top-level rules (`.m-stats__value--mark`), never as
   `&--mark` inside the block. Native CSS nesting has no Sass-style suffix join, so a nested
   `&--x` is an invalid selector and the browser drops the whole rule without a word.
   ========================================================================== */

/* ===== Page base ===== */
/* Phones: keep keyboard focus and anchor jumps clear of the fixed bottom CTA bar (~70px) */
:root {
  @media (width < 768px) {
    scroll-padding-bottom: 5rem;
  }
}

.m-homePage {
  background: var(--bg);
  color: var(--ink);
  font: 400 16px/1.6 var(--fontBody);
  font-variant-numeric: tabular-nums;
  overflow-x: clip;
  padding-top: var(--headerHeight);

  ::selection {
    background: var(--lime);
    color: var(--ink);
  }
}

/* ===== Type ===== */
.e-h1 {
  font: 900 clamp(2.4rem, 1rem + 3.8vw, 4.8rem)/0.95 var(--fontDisplay);
  letter-spacing: -0.06em;
  text-wrap: balance;
}

.e-h2 {
  font: 900 clamp(1.9rem, 1rem + 2.2vw, 3rem)/1 var(--fontDisplay);
  letter-spacing: -0.05em;
  text-wrap: balance;
}

.e-lede {
  max-width: 36em;
  font-size: clamp(1.02rem, 1rem + 0.3vw, 1.15rem);
  color: var(--muted);
}

.e-lede--onDark {
  color: var(--line3);
}

.e-accent {
  color: var(--lime);
}

/* Lime marker highlight: sweeps in from the left when it scrolls into view (js/home.js) */
/* The band is sized to the glyphs, not the inline box: on tight display line-heights (0.95)
   a full-height box paints over the descenders of the line above. */
.e-mark {
  --markHeight: 0.84em;
  padding-inline: 0.08em;
  color: var(--ink);
  background: linear-gradient(var(--lime), var(--lime)) 0 78% / 100% var(--markHeight) no-repeat;
}

.e-nowrap {
  white-space: nowrap;
}

/* ===== Corner brackets: the original Beacon motif, tightening on hover ===== */
.e-brackets {
  position: relative;

  &::before,
  &::after {
    content: "";
    position: absolute;
    z-index: 4;
    width: 16px;
    height: 16px;
    border: 2px solid var(--ink);
    pointer-events: none;
    transition: transform 0.5s var(--easeOut);
  }

  &::before {
    top: -8px;
    left: -8px;
    border-right: 0;
    border-bottom: 0;
  }

  &::after {
    right: -8px;
    bottom: -8px;
    border-left: 0;
    border-top: 0;
  }

  &:focus-within::before {
    transform: translate(3px, 3px);
  }

  &:focus-within::after {
    transform: translate(-3px, -3px);
  }

  @media (hover: hover) {
    &:hover::before {
      transform: translate(3px, 3px);
    }

    &:hover::after {
      transform: translate(-3px, -3px);
    }
  }
}

/* ===== Sections ===== */
.m-section {
  position: relative;
  padding-block: var(--sectionSpace);
}

.m-section--white {
  background: var(--white);
}

.m-section--dark {
  background: var(--ink);
  color: var(--paper);
}

.m-section--compact {
  padding-block: clamp(3rem, 6vw, 5rem);
}

.m-sectionHead {
  display: grid;
  gap: 20px;
  margin-bottom: clamp(2.25rem, 4vw, 3.5rem);
}

.m-sectionHead--centre {
  max-width: 800px;
  margin-inline: auto;
  text-align: center;
  justify-items: center;
}

.m-sectionHead--wide {
  max-width: 1000px;
}

/* ===== Ledger dividers: numbered rule between sections ===== */
.m-ledger {
  position: relative;

  &::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 1px;
    background: var(--line);
    transform-origin: left;
  }
}

.m-ledger__inner {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-block: 14px;
}

.m-ledger__text {
  font: 700 11px/1.5 var(--fontMono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted2);
}

.m-ledger__index {
  color: var(--ink);
}

.m-ledger__link {
  text-decoration: none;
  color: var(--ink);

  &:focus-visible {
    outline: 3px solid var(--ink);
    outline-offset: 3px;
  }
}

/* ===== Hero ===== */
.m-hero {
  position: relative;
  padding-block: clamp(3.5rem, 7vw, 6.5rem) clamp(2.5rem, 5vw, 4rem);
  background: var(--paper);
}

.m-hero__inner {
  position: relative;
  z-index: 1;
}

.m-hero__copy {
  max-width: min(46rem, 100%);
}

.m-hero__title {
  max-width: 15ch;
  margin-top: 26px;
}

.m-hero__sub {
  max-width: 24ch;
  margin: 26px 0 14px;
  font: 900 clamp(1.3rem, 1rem + 0.9vw, 1.7rem)/1.15 var(--fontDisplay);
  letter-spacing: -0.03em;
}

.m-hero__lede {
  max-width: 34em;

  & + & {
    margin-top: 12px;
  }
}

/* Buttons and ticks as one block, sized to the buttons, with the ticks centred under them */
.m-hero__actions {
  width: 100%;
  margin-top: 32px;

  @media (width >= 576px) {
    width: fit-content;
    max-width: 100%;
  }
}

.m-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.m-hero__cta {
  flex: 1 1 100%;

  @media (width >= 576px) {
    flex: 0 1 auto;
  }
}

.m-hero__status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: clamp(2.25rem, 4vw, 3.5rem);
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font: 700 11px/1.5 var(--fontMono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted2);
}

.m-hero__statusDot {
  display: flex;
  align-items: center;
  gap: 8px;

  &::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--lime);
    outline: 1px solid var(--ink);
  }
}

/* Below 1200px the 3D monitor + phone render into this slot, under the copy. From 1200px they
   draw behind the copy on the right. Nick's concept switched at 760px, but from there to about
   1200px the model sat over the lede and made it unreadable (measured at 768px and 1024px).
   Keep in step with NARROW in js/home_motion.js. */
.m-hero__slot {
  position: relative;
  width: 100%;
  max-width: 640px;
  aspect-ratio: 10 / 7.8;
  margin-top: 20px;

  @media (width >= 1200px) {
    max-width: none;
    position: absolute;
    inset: 0 0 0 auto;
    width: 56%;
    aspect-ratio: auto;
    margin: 0;
    pointer-events: none;
  }
}

/* Static stand-in for the 3D model: shown without JS, under reduced motion, or without WebGL.
   js/home_motion.js hides it once the model has drawn its first frame. */
.m-hero__still {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 4%;

  @media (width >= 1200px) {
    place-items: center end;
    padding-right: var(--gutter);
  }

  &.is-replaced {
    display: none;
  }
}

.m-hero__stillImage {
  width: 100%;
  max-width: 560px;
  height: auto;
}

/* ===== Short version ===== */
.m-short__grid {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;

  @media (width >= 900px) {
    grid-template-columns: 1.25fr 1fr;
  }
}

.m-short__title {
  margin-top: 20px;
  font-size: clamp(1.7rem, 1rem + 1.9vw, 2.6rem);
  line-height: 1.08;
}

.m-short__lede {
  margin-top: 20px;
}

.m-short__more {
  display: inline-flex;
  gap: 10px;
  margin-top: 28px;
  padding: 10px 0 8px;
  font: 700 11px/1 var(--fontMono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  background:
    linear-gradient(var(--ink), var(--ink)) 100% 100% / 0 2px no-repeat,
    linear-gradient(var(--lime), var(--lime)) 0 100% / 100% 2px no-repeat;
  transition: background-size 0.55s var(--easeOut);

  &:focus-visible {
    outline: 3px solid var(--ink);
    outline-offset: 3px;
  }

  @media (hover: hover) {
    &:hover {
      background-size: 100% 2px, 100% 2px;
      background-position: 0 100%, 0 100%;
    }
  }
}

.m-short__moreArrow {
  display: inline-block;
  transition: transform 0.45s var(--easeOut);

  @media (hover: hover) {
    .m-short__more:hover & {
      transform: translateY(3px);
    }
  }
}

.m-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--white);
  box-shadow: var(--shadowPanel);
}

.m-stats__item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 22px 20px;
  border-left: 1px solid var(--line);
  border-top: 1px solid var(--line);

  &:nth-child(odd) {
    border-left: 0;
  }

  &:nth-child(-n + 2) {
    border-top: 0;
  }
}

.m-stats__item--wide {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  gap: 16px;
}

.m-stats__value {
  font: 900 2.4rem/1 var(--fontDisplay);
  letter-spacing: -0.05em;
}

.m-stats__value--mark {
  align-self: flex-start;
}

.m-stats__label {
  font: 700 11px/1.4 var(--fontMono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted2);
}

.m-stats__avatar {
  flex: none;
  width: 52px;
  height: 52px;
  object-fit: cover;
  outline: 2px solid var(--lime);
  outline-offset: 2px;
}

.m-stats__note {
  font-size: 14px;
  color: var(--muted);
}

.m-stats__noteLead {
  display: block;
  font: 900 1rem/1.3 var(--fontDisplay);
  color: var(--ink);
}

/* ===== Free preview: the "try it" console ===== */
.m-console {
  display: grid;
  max-width: 1060px;
  margin-inline: auto;
  background: var(--ink);
  color: var(--paper);
  box-shadow: var(--shadowFloat);

  @media (width >= 860px) {
    grid-template-columns: 1fr 1.1fr;
  }
}

.m-console__input {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: clamp(22px, 3vw, 34px);
  border-bottom: 1px solid rgb(255 255 255 / 0.1);

  @media (width >= 860px) {
    border-bottom: 0;
    border-right: 1px solid rgb(255 255 255 / 0.1);
  }
}

.m-console__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font: 700 11px/1 var(--fontMono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stone);
}

.m-console__live {
  display: flex;
  gap: 7px;
  align-items: center;
  color: var(--lime);

  &::before {
    content: "";
    width: 7px;
    height: 7px;
    background: var(--lime);
    animation: consoleBlink 1.2s steps(1) infinite;
  }
}

.m-console__prompt {
  font: 500 15px/1.5 var(--fontMono);
  color: var(--line3);

  .m-console__input:focus-within &::after {
    content: "_";
    color: var(--lime);
    animation: consoleBlink 1s steps(1) infinite;
  }
}

.m-console__promptMark {
  font-weight: 700;
  color: var(--lime);
}

.m-console__field {
  display: grid;
  gap: 7px;
  min-width: 0;
  border: 0;
}

.m-console__label {
  padding: 0;
  font: 700 11px/1.3 var(--fontMono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stone);
}

.m-console__legend {
  margin-bottom: 7px;
}

.m-console__text {
  height: 48px;
  padding: 0 14px;
  border: 1px solid rgb(255 255 255 / 0.16);
  background: var(--ink2);
  color: var(--paper);
  font: 500 16px/1 var(--fontMono);
  transition: border-color 0.3s var(--easeOut), box-shadow 0.3s var(--easeOut);

  /* Stone, not the concept's #8a867f: that measured 4.19:1 on ink2, under the 4.5:1 text floor */
  &::placeholder {
    color: var(--stone);
  }

  &:hover {
    border-color: rgb(255 255 255 / 0.3);
  }

  /* Transparent rather than none: forced-colours mode drops the box-shadow but paints the outline */
  &:focus {
    outline: 3px solid transparent;
    border-color: var(--lime);
    box-shadow: 0 0 0 1px var(--lime);
  }
}

.m-console__swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.m-console__swatch {
  position: relative;
  cursor: pointer;
}

.m-console__radio {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.m-console__swatchLabel {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 12px 0 9px;
  border: 1px solid rgb(255 255 255 / 0.16);
  font: 700 11px/1 var(--fontMono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stone);
  transition: border-color 0.3s var(--easeOut), color 0.3s var(--easeOut), background-color 0.3s var(--easeSoft);

  &::before {
    content: "";
    width: 16px;
    height: 16px;
    background: var(--swatchColour);
    outline: 1px solid rgb(255 255 255 / 0.35);
    transition: transform 0.45s var(--easeOut);
  }

  .m-console__radio:checked + & {
    border-color: var(--lime);
    color: var(--paper);
    background: var(--ink2);
  }

  .m-console__radio:checked + &::before {
    transform: rotate(90deg);
  }

  .m-console__radio:focus-visible + & {
    outline: 3px solid var(--lime);
    outline-offset: 2px;
  }

  @media (hover: hover) {
    .m-console__swatch:hover & {
      border-color: rgb(255 255 255 / 0.45);
      color: var(--paper);
    }
  }
}

.m-console__swatchLabel--ink {
  --swatchColour: var(--ink);
}

.m-console__swatchLabel--lime {
  --swatchColour: var(--lime);
}

.m-console__swatchLabel--stone {
  --swatchColour: var(--bg);
}

.m-console__submit {
  width: 100%;
  margin-top: auto;
}

.m-console__small {
  font: 600 11px/1.5 var(--fontMono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--stone);
  text-align: center;
}

.m-console__output {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  padding: clamp(18px, 3vw, 30px);
  background: var(--ink2);
}

.m-console__meta {
  display: flex;
  justify-content: space-between;
  font: 700 10px/1.5 var(--fontMono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stone);
}

.m-console__state {
  display: inline-block;
  color: var(--lime);
  transition: color 0.3s var(--easeSoft);

  &.is-waiting {
    color: var(--stone);
  }

  &.is-bumped {
    animation: consoleBump 0.5s var(--easeOut);
  }
}

.m-console__site {
  background: var(--white);
  color: var(--ink);
}

/* Loops only run while the console is on screen */
.m-console:not(.is-visible) .m-console__live::before,
.m-console:not(.is-visible) .m-console__prompt::after {
  animation-play-state: paused;
}

@keyframes consoleBlink {
  50% { opacity: 0; }
}

@keyframes consoleBump {
  0% { transform: scale(0.7); }
  60% { transform: scale(1.12); }
  100% { transform: none; }
}

/* ===== Mini site inside the console ===== */
.m-miniSite {
  position: relative;
  font-family: var(--fontBody);
}

.m-miniSite__bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 9px;
  background: var(--bg);
  border-bottom: 1px solid var(--line2);

  &::after {
    content: "";
    position: absolute;
    inset: auto 0 -1px;
    height: 2px;
    background: var(--lime);
    transform: scaleX(0);
    transform-origin: left;
    opacity: 0;
  }

  .m-miniSite.is-building &::after {
    animation: miniSiteLoad 0.85s var(--easeInOut) forwards;
  }
}

.m-miniSite__dot {
  width: 7px;
  height: 7px;
  background: var(--line3);
}

.m-miniSite__url {
  min-width: 0;
  margin-left: 6px;
  overflow: hidden;
  font: 600 10px/1 var(--fontMono);
  color: var(--muted2);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.m-miniSite__tag {
  flex: none;
  margin-left: auto;
  padding: 3px 5px;
  border: 1px solid var(--line3);
  font: 700 9px/1 var(--fontMono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted2);
}

.m-miniSite__nav {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px;
  font: 900 11px/1 var(--fontDisplay);
}

.m-miniSite__navLines {
  display: flex;
  gap: 6px;
  align-items: center;
}

.m-miniSite__navLine {
  width: 16px;
  height: 3px;
  background: var(--line3);
}

.m-miniSite__hero {
  margin: 0 8px;
  padding: 16px 14px;
  background: var(--ink);
  color: var(--paper);
  transition: background-color 0.55s var(--easeSoft), color 0.55s var(--easeSoft), box-shadow 0.55s var(--easeSoft);

  [data-look="lime"] > & {
    background: var(--lime);
    color: var(--ink);
  }

  [data-look="stone"] > & {
    background: var(--bg);
    color: var(--ink);
    box-shadow: inset 0 0 0 1px var(--line2);
  }
}

.m-miniSite__heroTitle {
  max-width: 85%;
  font: 900 clamp(16px, 1.7vw, 22px)/1.05 var(--fontDisplay);
  letter-spacing: -0.03em;
}

.m-miniSite__heroSub {
  margin: 7px 0 10px;
  font: 600 9px/1.3 var(--fontMono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--stone);
  transition: color 0.55s var(--easeSoft);

  [data-look="lime"] & {
    color: var(--ink3);
  }

  [data-look="stone"] & {
    color: var(--muted2);
  }
}

.m-miniSite__buttons {
  display: flex;
  gap: 5px;
}

.m-miniSite__button {
  padding: 7px 8px;
  background: var(--lime);
  color: var(--ink);
  font: 900 8px/1 var(--fontDisplay);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: background-color 0.55s var(--easeSoft), color 0.55s var(--easeSoft), outline-color 0.55s;

  [data-look="lime"] & {
    background: var(--ink);
    color: var(--lime);
  }
}

.m-miniSite__button--ghost {
  background: transparent;
  color: var(--paper);
  outline: 1px solid rgb(255 255 255 / 0.35);

  [data-look="lime"] & {
    background: transparent;
    color: var(--ink);
    outline-color: rgb(17 17 16 / 0.4);
  }

  [data-look="stone"] & {
    color: var(--ink);
    outline-color: rgb(17 17 16 / 0.3);
  }
}

.m-miniSite__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 8px;
}

.m-miniSite__card {
  display: flex;
  align-items: flex-end;
  height: 34px;
  padding: 5px 6px;
  overflow: hidden;
  background: var(--bg);
  box-shadow: inset 0 0 0 1px var(--line2);
  font: 700 7px/1.1 var(--fontMono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted2);
}

/* Rebuild: the loading bar runs, content fades back, then restacks */
.m-miniSite__name,
.m-miniSite__hero > *,
.m-miniSite__card {
  transition: opacity 0.3s var(--easeSoft), background-color 0.55s var(--easeSoft), color 0.55s var(--easeSoft);

  .m-miniSite.is-building & {
    opacity: 0.12;
  }
}

.m-miniSite.is-fresh .m-miniSite__hero > *,
.m-miniSite.is-fresh .m-miniSite__card {
  animation: miniSiteRise 0.6s var(--easeOut) both;
}

.m-miniSite.is-fresh .m-miniSite__hero > :nth-child(2) { animation-delay: 0.06s; }
.m-miniSite.is-fresh .m-miniSite__hero > :nth-child(3) { animation-delay: 0.12s; }
.m-miniSite.is-fresh .m-miniSite__card:nth-child(1) { animation-delay: 0.16s; }
.m-miniSite.is-fresh .m-miniSite__card:nth-child(2) { animation-delay: 0.21s; }
.m-miniSite.is-fresh .m-miniSite__card:nth-child(3) { animation-delay: 0.26s; }

/* Characters boil over the mini site while it "builds" (canvas added by js/home.js) */
.m-miniSite__ascii {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: block;
  pointer-events: none;
}

@keyframes miniSiteLoad {
  0% { transform: scaleX(0); opacity: 1; }
  78% { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(1); opacity: 0; }
}

@keyframes miniSiteRise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

/* ===== Free preview: three short answers ===== */
.m-facts {
  display: grid;
  max-width: 1060px;
  margin: 16px auto 0;
  background: var(--white);
  box-shadow: var(--shadowPanel);

  @media (width >= 860px) {
    grid-template-columns: repeat(3, 1fr);
  }
}

.m-facts__item {
  padding: 22px 24px;
  border-top: 1px solid var(--line);

  &:first-child {
    border-top: 0;
  }

  @media (width >= 860px) {
    border-top: 0;
    border-left: 1px solid var(--line);

    &:first-child {
      border-left: 0;
    }
  }
}

.m-facts__label {
  display: flex;
  gap: 8px;
  align-items: center;
  font: 700 11px/1.5 var(--fontMono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted2);

  &::before {
    content: "";
    width: 8px;
    height: 8px;
    background: var(--lime);
    outline: 1px solid var(--ink);
  }
}

.m-facts__title {
  display: block;
  margin: 10px 0 6px;
  font: 900 1.05rem/1.25 var(--fontDisplay);
  letter-spacing: -0.01em;
}

.m-facts__text {
  font-size: 14px;
  color: var(--muted);
}

/* ===== Free preview: the usual way vs. with me ===== */
.m-compare {
  display: grid;
  max-width: 1060px;
  margin: 16px auto 0;
  background: var(--white);
  box-shadow: var(--shadowPanel);

  @media (width >= 860px) {
    grid-template-columns: 1fr 1fr;
  }
}

.m-compare__col {
  padding: 24px;
}

.m-compare__col--beacon {
  background: var(--ink);
  color: var(--paper);
}

.m-compare__title {
  margin-bottom: 14px;
  font: 700 11px/1.5 var(--fontMono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted2);

  .m-compare__col--beacon & {
    color: var(--lime);
  }
}

.m-compare__list {
  display: grid;
  gap: 10px;
}

.m-compare__item {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 10px;
  font-size: 15px;
  color: var(--muted);

  &::before {
    content: "";
    width: 8px;
    height: 8px;
    margin-top: 0.55em;
    background: var(--line3);
  }

  .m-compare__col--beacon & {
    color: var(--line3);
  }

  .m-compare__col--beacon &::before {
    background: var(--lime);
  }
}

/* ===== Examples: six previews for made-up businesses =====
   Each card is one link that opens the page in a new tab. The panel, dividers and arrow square
   follow .m-posts on purpose; keep the two in step. Unlike .m-posts__go, the lime fill here is
   hover only and keyboard focus gets just the ink outline (the brand-lime rule). */
.m-examples {
  display: grid;
  background: var(--white);
  box-shadow: var(--shadowPanel);

  /* minmax(0, ...): a plain 1fr track can't shrink below the nowrap address in the browser bar,
     which pushed the grid 70px past an 860px viewport */
  @media (width >= 860px) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.m-examples__item {
  display: flex;
  border-top: 1px solid var(--line);

  &:first-child {
    border-top: 0;
  }

  /* Three per row: a divider between columns, and a rule above every row after the first */
  @media (width >= 860px) {
    border-top: 0;
    border-left: 1px solid var(--line);

    &:nth-child(3n + 1) {
      border-left: 0;
    }

    &:nth-child(n + 4) {
      border-top: 1px solid var(--line);
    }
  }
}

.m-examples__link {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  padding: clamp(20px, 2.4vw, 28px);
  text-decoration: none;
  transition: background-color 0.4s var(--easeSoft);

  &:focus-visible {
    outline: 3px solid var(--ink);
    outline-offset: -3px;
  }

  @media (hover: hover) {
    &:hover {
      background: var(--paper);
    }
  }

  /* Tablets: picture left, words right, so three stacked cards don't run to three screens */
  @media (600px <= width < 860px) {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    grid-template-rows: auto auto auto auto 1fr;
    column-gap: 24px;
    row-gap: 12px;
  }
}

.m-examples__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.m-examples__index {
  font: 700 11px/1.5 var(--fontMono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted2);
}

.m-examples__tag {
  padding: 5px 7px;
  background: var(--line2);
  font: 700 10px/1 var(--fontMono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* A browser window around the screenshot, like the mini site in the free preview console */
.m-examples__frame {
  display: block;
  background: var(--bg);
  box-shadow: inset 0 0 0 1px var(--line2);

  @media (600px <= width < 860px) {
    grid-column: 1;
    grid-row: 1 / -1;
    align-self: start;
  }
}

.m-examples__picture {
  display: block;
  overflow: hidden;
}

.m-examples__bar {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 9px;
  border-bottom: 1px solid var(--line2);
}

.m-examples__dot {
  flex: none;
  width: 7px;
  height: 7px;
  background: var(--line3);
}

.m-examples__url {
  min-width: 0;
  margin-left: 6px;
  overflow: hidden;
  font: 600 10px/1 var(--fontMono);
  color: var(--muted2);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.m-examples__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top;
  transition: transform 0.7s var(--easeOut);

  @media (hover: hover) {
    .m-examples__link:hover & {
      transform: scale(1.03);
    }
  }
}

.m-examples__title {
  margin-top: 4px;
  font: 900 1.25rem/1.2 var(--fontDisplay);
  letter-spacing: -0.02em;
}

.m-examples__meta {
  margin-top: -6px;
  font: 700 11px/1.5 var(--fontMono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted2);
}

.m-examples__text {
  font-size: 14px;
  color: var(--muted);
}

.m-examples__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px 12px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px dashed var(--line3);

  @media (600px <= width < 860px) {
    align-self: end;
  }
}

.m-examples__note {
  font: 700 10px/1.4 var(--fontMono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--muted2);
}

/* Drops to its own line, still on the right, when the card is too narrow for both */
.m-examples__open {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.m-examples__go {
  position: relative;
  isolation: isolate;
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  overflow: hidden;
  border: 2px solid var(--ink);

  &::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--lime);
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform 0.45s var(--easeOut);
  }

  @media (hover: hover) {
    .m-examples__link:hover &::before {
      transform: scaleY(1);
    }
  }
}

.m-examples__goIcon {
  width: 12px;
  height: 12px;
  transition: transform 0.45s var(--easeOut);

  @media (hover: hover) {
    .m-examples__link:hover & {
      transform: translate(2px, -2px);
    }
  }
}

/* Phones: js/home.js adds .is-collapsed to the list and unhides the button; desktop always shows
   all six. Without JS neither happens. */
.m-examples.is-collapsed .m-examples__item:nth-child(n + 4) {
  @media (width < 860px) {
    display: none;
  }
}

.m-examples__more {
  display: flex;
  justify-content: center;
  margin-top: 24px;

  &[hidden] {
    display: none;
  }

  @media (width >= 860px) {
    display: none;
  }
}

.m-examples__after {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  max-width: 44em;
  margin: 16px auto 0;
  font-size: 14px;
  color: var(--muted2);
  text-align: center;

  &::before {
    content: "";
    flex: none;
    width: 8px;
    height: 8px;
    background: var(--lime);
    outline: 1px solid var(--ink);
  }
}

/* ===== Example preview dialog (js/home.js) =====
   Full screen on phones, so the preview gets the whole screen at its real phone layout; from
   768px a large window, so it shows the desktop layout. No padding on the dialog itself: the bar
   and the frame fill it, so a click whose target is the dialog element is on the backdrop. Focus
   rings are lime here because an ink ring disappears on the ink bar (as in the console). */
.c-previewDialog {
  width: 100%;
  max-width: none;
  height: 100vh;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--ink);
  color: var(--paper);

  &[open] {
    display: flex;
    flex-direction: column;
  }

  &::backdrop {
    background: rgb(17 17 16 / 0.72);
  }

  @media (width >= 768px) {
    width: min(1280px, 100% - 48px);
    height: calc(100vh - 48px);
    height: calc(100dvh - 48px);
    margin: auto;
    box-shadow: 0 40px 80px -30px rgb(0 0 0 / 0.6);
  }
}

.c-previewDialog__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: max(6px, env(safe-area-inset-top)) 8px 6px 16px;
  border-bottom: 1px solid rgb(255 255 255 / 0.12);
}

.c-previewDialog__heading {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font: 900 15px/1.2 var(--fontDisplay);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.c-previewDialog__tag {
  margin-right: 4px;
  font: 700 10px/1 var(--fontMono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lime);
}

.c-previewDialog__newTab,
.c-previewDialog__close {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  font: 700 11px/1 var(--fontMono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper);
  transition: color 0.3s var(--easeOut), background-color 0.3s var(--easeSoft), border-color 0.3s var(--easeOut);

  &:focus-visible {
    outline: 3px solid var(--lime);
    outline-offset: 2px;
  }
}

.c-previewDialog__newTab {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;

  @media (hover: hover) {
    &:hover {
      color: var(--lime);
    }
  }
}

.c-previewDialog__close {
  border: 2px solid rgb(255 255 255 / 0.4);
  background: transparent;
  cursor: pointer;

  @media (hover: hover) {
    &:hover {
      border-color: var(--lime);
      background: var(--lime);
      color: var(--ink);
    }
  }
}

.c-previewDialog__frame {
  flex: 1;
  display: block;
  width: 100%;
  border: 0;
  background: var(--white);
}

/* ===== How it works: three steps ===== */
.m-steps {
  display: grid;
  background: var(--white);
  box-shadow: var(--shadowPanel);

  @media (width >= 900px) {
    grid-template-columns: repeat(3, 1fr);
  }
}

.m-steps__item {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(22px, 2.6vw, 32px);
  border-top: 1px solid var(--line);
  transition: background-color 0.4s var(--easeSoft);

  &:first-child {
    border-top: 0;
  }

  @media (width >= 900px) {
    border-top: 0;
    border-left: 1px solid var(--line);

    &:first-child {
      border-left: 0;
    }
  }

  @media (hover: hover) {
    &:hover {
      background: var(--paper);
    }
  }
}

.m-steps__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.m-steps__index {
  font: 700 11px/1.5 var(--fontMono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted2);
}

.m-steps__who {
  padding: 5px 7px;
  background: var(--line2);
  font: 700 10px/1 var(--fontMono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.m-steps__who--me {
  background: var(--ink);
  color: var(--lime);
}

.m-steps__title {
  font: 900 1.25rem/1.2 var(--fontDisplay);
  letter-spacing: -0.02em;
}

.m-steps__text {
  font-size: 15px;
  color: var(--muted);
}

.m-steps__meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px dashed var(--line3);
}

.m-steps__metaLabel {
  font: 700 10px/1.3 var(--fontMono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted2);
}

.m-steps__metaValue {
  margin-top: 3px;
  font: 900 1.15rem/1.2 var(--fontDisplay);
  letter-spacing: -0.02em;
}

.m-steps__after {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 28px;
}

/* ===== Diagrams: faint objects, dashed placeholders, one lime focal node =====
   The SVG internals keep short single-purpose classes (o, b, f...) scoped under the diagram;
   they are drawing primitives, not components, so they are the one place descendant selectors
   are used here. Hover/focus (or scrolling into view on touch) adds .is-playing to the host. */
.e-diagram {
  position: relative;
  overflow: hidden;
  background: var(--paper) radial-gradient(rgb(17 17 16 / 0.13) 0.8px, transparent 1.2px) 6px 6px / 12px 12px;
  box-shadow: inset 0 0 0 1px var(--line2);
}

.e-diagram--onDark {
  background: var(--ink2) radial-gradient(rgb(255 255 255 / 0.09) 0.8px, transparent 1.2px) 6px 6px / 12px 12px;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1);
}

.e-diagram__svg {
  --diagramRgb: 17 17 16;
  --diagramObject: #fff;
  --diagramPort: var(--ink);
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;

  .e-diagram--onDark & {
    --diagramRgb: 255 255 255;
    --diagramObject: #262624;
    --diagramPort: rgb(255 255 255 / 0.75);
  }

  .o { fill: var(--diagramObject); stroke: rgb(var(--diagramRgb) / 0.24); stroke-width: 1; }
  .hl { stroke: rgb(var(--diagramRgb) / 0.2); stroke-width: 1; }
  .b { fill: rgb(var(--diagramRgb) / 0.11); }
  .bk { fill: rgb(var(--diagramRgb) / 0.78); }
  .d { fill: none; stroke: rgb(var(--diagramRgb) / 0.34); stroke-width: 1; stroke-dasharray: 4 4; }
  .slot { fill: rgb(200 255 106 / 0.28); stroke: rgb(var(--diagramRgb) / 0.4); stroke-width: 1; stroke-dasharray: 4 3; }
  .f { fill: var(--lime); stroke: var(--ink); stroke-width: 1.5; }
  .lm { fill: var(--lime); }
  .p { fill: var(--diagramObject); stroke: var(--diagramPort); stroke-width: 1.2; }
  .l { fill: none; stroke: rgb(var(--diagramRgb) / 0.62); stroke-width: 1.2; }
  .ld { fill: none; stroke: rgb(var(--diagramRgb) / 0.32); stroke-width: 1.2; stroke-dasharray: 4 4; }
  .dr { fill: none; stroke: rgb(var(--diagramRgb) / 0.62); stroke-width: 1.2; stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset 0.9s var(--easeInOut); }
  .g { fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-linecap: square; }
  .gf { fill: var(--ink); }
  .gs { fill: none; stroke: rgb(var(--diagramRgb) / 0.4); stroke-width: 1.2; }
  .t { font: 700 8px/1 var(--fontMono); letter-spacing: 0.08em; fill: rgb(var(--diagramRgb) / 0.55); }
  .t2 { font: 700 10px/1 var(--fontMono); letter-spacing: 0.08em; fill: rgb(var(--diagramRgb) / 0.8); }
  .ft { font: 900 14px/1 var(--fontDisplay); letter-spacing: -0.03em; fill: var(--ink); }
  .fm { font: 700 8px/1 var(--fontMono); letter-spacing: 0.1em; fill: var(--ink); }
  .sel { fill: none; stroke: rgb(var(--diagramRgb) / 0.55); stroke-width: 1; stroke-dasharray: 3 2; }
  .mv { transform-box: fill-box; transform-origin: center; transition: transform 0.9s var(--easeOut), opacity 0.5s var(--easeSoft), fill 0.35s var(--easeSoft); }
  .tl { transform-origin: 0 0; }

  .e-diagram--onDark & .bk { fill: rgb(255 255 255 / 0.16); }
  .e-diagram--onDark & .slot { fill: rgb(200 255 106 / 0.08); stroke: rgb(200 255 106 / 0.55); }
  .e-diagram--onDark & .l { stroke: rgb(200 255 106 / 0.8); }
  .e-diagram--onDark & .dr { stroke: rgb(200 255 106 / 0.85); }

  /* step 1: the preview gets built */
  .s1-win,
  .s1-c > * { opacity: 0; }
  .s1-c > * { transform: translateY(6px); }
  /* step 2: logo and photo drop into their slots */
  .s2-ph { transform: rotate(4deg); }
  /* step 3: a line of the site gets swapped */
  .s3-new { transform: translateY(7px); opacity: 0; }
  .s3-ok { transform: scale(0); }
  /* promises */
  .p1-bar { transform-origin: 0 50%; transform: scaleX(0.3); transition: transform 1.2s var(--easeInOut); }
  .p1-c { opacity: 0.25; }
  .p2-ping { opacity: 0; }
  .p3-ring { transition: transform 1.2s steps(3, end); }

  [data-diagram].is-playing & {
    .dr { stroke-dashoffset: 0; }
    .s1-win { opacity: 1; transition-delay: 0.45s; }
    .s1-c > * { opacity: 1; transform: none; }
    .s1-c > :nth-child(1) { transition-delay: 0.55s; }
    .s1-c > :nth-child(2) { transition-delay: 0.62s; }
    .s1-c > :nth-child(3) { transition-delay: 0.69s; }
    .s1-c > :nth-child(4) { transition-delay: 0.76s; }
    .s1-c > :nth-child(5) { transition-delay: 0.83s; }
    .s1-c > :nth-child(6) { transition-delay: 0.9s; }
    .s1-c > :nth-child(7) { transition-delay: 0.97s; }
    .s1-c > :nth-child(8) { transition-delay: 1.04s; }
    .s2-lb,
    .s2-ln { opacity: 0; }
    .s2-logo { transform: translate(134px, 8px) scale(0.5); }
    .s2-ph { transform: translate(130px, -16px); transition-delay: 0.12s; }
    .s3-old { transform: translateY(-7px); opacity: 0; }
    .s3-new { transform: none; opacity: 1; transition-delay: 0.2s; }
    .s3-ok { transform: none; transition-delay: 0.6s; }
    .p1-bar { transform: none; }
    .p1-c { opacity: 1; transition-delay: 0.9s; }
    .p2-ping { animation: diagramPing 1.8s var(--easeOut) infinite; }
    .p2-ping + .p2-ping { animation-delay: 0.5s; }
    .p3-ring { transform: translateY(48px); }
    .p3-key { animation: diagramPress 0.4s 3; }
    .p4-site { transform: translateX(136px); }
    .p4-ln { opacity: 0.15; }
  }
}

@keyframes diagramPing {
  0% { transform: scale(1); opacity: 0.9; }
  80%, 100% { transform: scale(1.45, 1.9); opacity: 0; }
}

@keyframes diagramPress {
  50% { transform: translateY(2px); }
}

/* ===== Spec card: label/value cells ===== */
.e-spec {
  background: var(--white);
  box-shadow: var(--shadowPanel);
  font-family: var(--fontBody);
  text-align: left;
}

.e-spec--inset {
  box-shadow: inset 0 0 0 1px var(--line2);
}

.e-spec__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;

  @media (width >= 560px) {
    grid-template-columns: repeat(3, 1fr);
  }
}

.e-spec__cell {
  padding: 12px 16px;
  border-top: 1px solid var(--line2);

  &:nth-child(even) {
    border-left: 1px solid var(--line2);
  }

  &:nth-child(-n + 2) {
    border-top: 0;
  }

  @media (width >= 560px) {
    border-left: 1px solid var(--line2);

    &:nth-child(3n + 1) {
      border-left: 0;
    }

    &:nth-child(3) {
      border-top: 0;
    }
  }
}

.e-spec__label {
  font: 600 10px/1.4 var(--fontMono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted2);
}

.e-spec__value {
  margin-top: 3px;
  font: 600 14px/1.4 var(--fontBody);
}

.e-spec__value--mark {
  display: inline-block;
  padding: 0 5px;
  background: var(--lime);
  color: var(--ink);
}

.e-spec__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 4px 12px;
  padding: 11px 16px;
  border-top: 1px solid var(--line2);
  background: var(--paper);
  font: 700 10px/1.4 var(--fontMono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted2);
}

.e-spec__footValue {
  color: var(--ink);
}

/* Rows variant: label left, value right */
.e-spec__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;

  & + & {
    border-top: 1px solid var(--line2);
  }
}

.e-spec__row .e-spec__label {
  white-space: nowrap;
}

.e-spec__row .e-spec__value {
  margin-top: 0;
  text-align: right;
}

/* ===== About ===== */
.m-about {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;

  @media (width >= 860px) {
    grid-template-columns: 0.8fr 1.2fr;
  }
}

.m-about__photo {
  position: relative;
  max-width: 380px;
  background: var(--line2);
  box-shadow: var(--shadowPanel);

  @media (width >= 860px) {
    max-width: none;
  }
}

.m-about__clip {
  overflow: hidden;
}

.m-about__image {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 4.4;
  object-fit: cover;
}

.m-about__badge {
  position: absolute;
  right: -12px;
  bottom: 58px;
  z-index: 5;
  padding: 12px 16px;
  background: var(--lime);
  border: 2px solid var(--ink);
}

.m-about__badgeValue {
  display: block;
  font: 900 2.6rem/1 var(--fontDisplay);
  letter-spacing: -0.05em;
}

.m-about__badgeLabel {
  font: 700 10px/1.3 var(--fontMono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.m-about__caption {
  display: flex;
  justify-content: space-between;
  padding: 12px 14px;
  background: var(--white);
  border-top: 1px solid var(--line);
  font: 700 11px/1.3 var(--fontMono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted2);
}

.m-about__captionName {
  color: var(--ink);
}

.m-about__text {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.m-about__para {
  max-width: 40em;
  font-size: 16px;
  color: var(--muted);
}

.m-about__spec {
  margin-top: 10px;
}

/* ===== Every site I build is ===== */
.m-features {
  display: grid;
  border-block: 1px solid rgb(255 255 255 / 0.14);

  @media (width >= 560px) {
    grid-template-columns: 1fr 1fr;
  }

  @media (width >= 960px) {
    grid-template-columns: repeat(4, 1fr);
  }
}

.m-features__item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(22px, 2.4vw, 30px) clamp(18px, 2vw, 26px);
  border-top: 1px solid rgb(255 255 255 / 0.14);

  &:first-child {
    border-top: 0;
  }

  &::before {
    content: "";
    position: absolute;
    inset: -1px 0 auto;
    height: 2px;
    background: var(--lime);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.6s var(--easeOut);
  }

  @media (width >= 560px) {
    &:nth-child(2) {
      border-top: 0;
    }

    &:nth-child(even) {
      border-left: 1px solid rgb(255 255 255 / 0.14);
    }
  }

  @media (width >= 960px) {
    border-top: 0;
    border-left: 1px solid rgb(255 255 255 / 0.14);

    &:first-child {
      border-left: 0;
    }
  }

  @media (hover: hover) {
    &:hover::before {
      transform: scaleX(1);
      transform-origin: left;
    }
  }
}

.m-features__plus {
  font: 700 12px/1 var(--fontMono);
  letter-spacing: 0.3em;
  color: var(--lime);
  transition: letter-spacing 0.6s var(--easeOut);

  @media (hover: hover) {
    .m-features__item:hover & {
      letter-spacing: 0.55em;
    }
  }
}

.m-features__plusIndex {
  margin-left: 6px;
  letter-spacing: 0.1em;
  color: var(--stone);
}

.m-features__diagram {
  margin: 2px 0 6px;
}

.m-features__title {
  font: 900 1.7rem/1 var(--fontDisplay);
  letter-spacing: -0.04em;
}

.m-features__outcome {
  font: 600 15px/1.35 var(--fontBody);
  color: var(--paper);
}

.m-features__text {
  font-size: 14px;
  color: var(--line3);
}

.m-features__meta {
  margin-top: auto;
  font: 700 11px/1.5 var(--fontMono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stone);
}

/* Live measurement of this page, in the visitor's browser */
.m-probe {
  display: grid;
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12);

  @media (width >= 960px) {
    grid-template-columns: auto 1fr;
  }
}

.m-probe__intro {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 18px 22px;
  border-bottom: 1px solid rgb(255 255 255 / 0.12);

  @media (width >= 960px) {
    max-width: 300px;
    border-bottom: 0;
    border-right: 1px solid rgb(255 255 255 / 0.12);
  }
}

.m-probe__label {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 700 11px/1.5 var(--fontMono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lime);

  &::before {
    content: "";
    width: 7px;
    height: 7px;
    background: var(--lime);
    animation: consoleBlink 1.2s steps(1) infinite;
  }

  .m-probe:not(.is-visible) &::before {
    animation-play-state: paused;
  }
}

.m-probe__text {
  font-size: 14px;
  color: var(--stone);
}

.m-probe__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;

  @media (width >= 520px) {
    grid-template-columns: repeat(3, 1fr);
  }

  @media (width >= 960px) {
    grid-template-columns: repeat(5, 1fr);
  }
}

.m-probe__cell {
  padding: 16px 18px;
  border-top: 1px solid rgb(255 255 255 / 0.12);

  &:nth-child(-n + 2) {
    border-top: 0;
  }

  &:nth-child(even) {
    border-left: 1px solid rgb(255 255 255 / 0.12);
  }

  @media (width >= 520px) {
    border-left: 1px solid rgb(255 255 255 / 0.12);

    &:nth-child(3n + 1) {
      border-left: 0;
    }

    &:nth-child(3) {
      border-top: 0;
    }
  }

  @media (width >= 960px) {
    border-top: 0;

    &:nth-child(3n + 1) {
      border-left: 1px solid rgb(255 255 255 / 0.12);
    }

    &:first-child {
      border-left: 0;
    }
  }
}

.m-probe__name {
  font: 600 10px/1.4 var(--fontMono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stone);
}

.m-probe__value {
  margin-top: 6px;
  font: 900 1.5rem/1.1 var(--fontDisplay);
  letter-spacing: -0.03em;
  color: var(--paper);
}

.m-probe__unit {
  margin-left: 3px;
  font: 700 11px/1 var(--fontMono);
  letter-spacing: 0.04em;
  color: var(--stone);
}

/* ===== Pricing ===== */
.m-pricing {
  display: grid;
  background: var(--white);
  box-shadow: var(--shadowPanel);

  @media (width >= 900px) {
    grid-template-columns: 1fr 1fr;
  }
}

.m-pricing__main {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: clamp(28px, 4vw, 48px);
  border-bottom: 1px solid var(--line);

  @media (width >= 900px) {
    border-bottom: 0;
    border-right: 1px solid var(--line);
  }
}

.m-pricing__title {
  font: 900 clamp(2.4rem, 1rem + 3vw, 3.8rem)/0.95 var(--fontDisplay);
  letter-spacing: -0.055em;
}

.m-pricing__text {
  color: var(--muted);
}

.m-pricing__spec {
  margin-block: 6px;
}

.m-pricing__cta {
  align-self: stretch;
}

.m-pricing__list {
  display: flex;
  flex-direction: column;
}

.m-pricing__item {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 4px 12px;
  padding: 22px clamp(22px, 3vw, 32px);
  border-top: 1px solid var(--line);
  transition: background-color 0.4s var(--easeSoft);

  &:first-child {
    border-top: 0;
  }

  @media (hover: hover) {
    &:not(.m-pricing__item--own):hover {
      background: var(--paper);
    }
  }
}

.m-pricing__item--own {
  margin-top: auto;
  background: var(--ink);
  color: var(--paper);
}

.m-pricing__index {
  grid-row: span 2;
  padding-top: 3px;
  font: 700 11px/1.5 var(--fontMono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted2);
  transition: color 0.3s var(--easeOut);

  @media (hover: hover) {
    .m-pricing__item:hover & {
      color: var(--ink);
    }
  }

  .m-pricing__item--own & {
    color: var(--lime);
  }
}

.m-pricing__itemTitle {
  font: 900 1.05rem/1.3 var(--fontDisplay);
  letter-spacing: -0.01em;
}

.m-pricing__itemText {
  font-size: 14px;
  color: var(--muted);

  .m-pricing__item--own & {
    color: var(--line3);
  }
}

.m-pricing__reassure {
  margin-top: 0;
}

.m-pricing__note {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  font-size: 14px;
  color: var(--muted2);
  text-align: center;

  &::before {
    content: "";
    flex: none;
    width: 8px;
    height: 8px;
    background: var(--lime);
    outline: 1px solid var(--ink);
  }
}

/* ===== Questions ===== */
.m-faq {
  display: grid;
  gap: clamp(1.5rem, 5vw, 4.5rem);
  align-items: start;

  @media (width >= 860px) {
    grid-template-columns: 0.7fr 1.3fr;
  }
}

.m-faq__side {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;

  @media (width >= 860px) {
    position: sticky;
    top: 100px;
  }
}

.m-faq__lede {
  font-size: 16px;
}

.m-faq__list {
  border-top: 2px solid var(--ink);
}

.m-faq__item {
  border-bottom: 1px solid var(--line3);
}

.m-faq__summary {
  display: grid;
  grid-template-columns: 44px 1fr 28px;
  align-items: center;
  gap: 12px;
  padding: 20px 0;
  list-style: none;
  cursor: pointer;
  font: 800 clamp(1.02rem, 0.95rem + 0.4vw, 1.2rem)/1.3 var(--fontDisplay);
  letter-spacing: -0.015em;
  transition: color 0.3s var(--easeOut);

  &::-webkit-details-marker {
    display: none;
  }

  /* Plus that turns to minus */
  &::after {
    content: "";
    width: 28px;
    height: 28px;
    border: 2px solid var(--ink);
    background:
      linear-gradient(var(--ink), var(--ink)) center / 10px 2px no-repeat,
      linear-gradient(var(--ink), var(--ink)) center / 2px 10px no-repeat,
      var(--white);
    transition: background-size 0.4s var(--easeOut), background-color 0.3s var(--easeSoft), transform 0.5s var(--easeOut);
  }

  .m-faq__item[open]:not(.is-closing) > &::after {
    background-size: 10px 2px, 2px 0, auto;
    background-color: var(--lime);
    transform: rotate(180deg);
  }

  &:focus-visible {
    outline: 3px solid var(--ink);
    outline-offset: 3px;
  }

  @media (hover: hover) {
    &:hover::after {
      background-color: var(--lime);
    }
  }
}

.m-faq__index {
  font: 700 11px/1.5 var(--fontMono);
  letter-spacing: 0.08em;
  color: var(--muted2);
  transition: color 0.3s var(--easeOut), transform 0.45s var(--easeOut);

  @media (hover: hover) {
    .m-faq__summary:hover & {
      color: var(--ink);
      transform: translateX(4px);
    }
  }
}

.m-faq__answer {
  overflow: hidden;
}

.m-faq__answerText {
  padding: 0 0 20px 56px;
  font-size: 15px;
  color: var(--muted);

  @media (width >= 860px) {
    padding-right: 40px;
    padding-bottom: 22px;
  }
}

.m-faq__link {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--lime);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;

  &:focus-visible {
    outline: 3px solid var(--ink);
    outline-offset: 2px;
  }
}

/* ===== Writing ===== */
.m-posts__heading {
  font-size: clamp(1.6rem, 1rem + 1.4vw, 2.2rem);
}

.m-posts {
  display: grid;
  background: var(--white);
  box-shadow: var(--shadowPanel);

  @media (width >= 860px) {
    grid-template-columns: repeat(3, 1fr);
  }
}

.m-posts__item {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  border-top: 1px solid var(--line);
  text-decoration: none;
  transition: background-color 0.4s var(--easeSoft);

  &:first-child {
    border-top: 0;
  }

  &:focus-visible {
    outline: 3px solid var(--ink);
    outline-offset: -3px;
  }

  @media (width >= 860px) {
    border-top: 0;
    border-left: 1px solid var(--line);

    &:first-child {
      border-left: 0;
    }
  }

  @media (hover: hover) {
    &:hover {
      background: var(--paper);
    }
  }
}

.m-posts__meta {
  display: flex;
  justify-content: space-between;
  font: 700 11px/1.5 var(--fontMono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted2);
}

.m-posts__title {
  font: 900 1.1rem/1.25 var(--fontDisplay);
  letter-spacing: -0.02em;
}

.m-posts__titleLine {
  background: linear-gradient(currentColor, currentColor) 100% 100% / 0 2px no-repeat;
  transition: background-size 0.5s var(--easeOut);

  @media (hover: hover) {
    .m-posts__item:hover & {
      background-size: 100% 2px;
      background-position: 0 100%;
    }
  }
}

.m-posts__summary {
  font-size: 14px;
  color: var(--muted);
}

.m-posts__go {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-top: auto;
  overflow: hidden;
  border: 2px solid var(--ink);
  font: 700 14px/1 var(--fontMono);

  &::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--lime);
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform 0.45s var(--easeOut);
  }

  .m-posts__item:focus-visible &::before {
    transform: scaleY(1);
  }

  @media (hover: hover) {
    .m-posts__item:hover &::before {
      transform: scaleY(1);
    }
  }
}

.m-posts__goArrow {
  transition: transform 0.45s var(--easeOut);

  @media (hover: hover) {
    .m-posts__item:hover & {
      transform: translateX(3px);
    }
  }
}

/* ===== Contact ===== */
.m-contact {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;

  @media (width >= 900px) {
    grid-template-columns: 1fr 1fr;
  }
}

.m-contact__title {
  margin-top: 20px;
  font-size: clamp(2.2rem, 1rem + 3vw, 3.6rem);
  line-height: 0.98;
}

.m-contact__lede {
  margin: 22px 0 12px;
}

.m-contact__note {
  margin-bottom: 22px;
  font-size: 14px;
  color: var(--muted2);
}

.m-contact__spec {
  max-width: 440px;
}

.m-contactForm {
  position: relative;
  padding: clamp(22px, 3vw, 34px);
  background: var(--white);
  box-shadow: var(--shadowFloat);
}

.m-contactForm__fields {
  transition: opacity 0.3s var(--easeSoft);

  .m-contactForm.is-sent & {
    opacity: 0;
  }
}

.m-contactForm__required {
  margin-bottom: 18px;
  font-size: 13px;
  color: var(--muted2);
}

.m-contactForm__field {
  display: grid;
  gap: 7px;
  margin-bottom: 16px;
}

.m-contactForm__label {
  font: 700 11px/1.3 var(--fontMono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink3);
}

.m-contactForm__input {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid #8a867f;
  background: var(--paper);
  color: var(--ink);
  font: 400 16px/1.4 var(--fontBody);
  resize: vertical;
  transition: border-color 0.25s var(--easeOut), box-shadow 0.3s var(--easeOut), background-color 0.25s var(--easeSoft);

  &:hover {
    border-color: var(--muted2);
  }

  &:focus {
    outline: 3px solid transparent;
    background: var(--white);
    border-color: var(--ink);
    box-shadow: inset 0 0 0 1px var(--ink), 0 0 0 3px var(--lime);
  }

  &[aria-invalid="true"] {
    border-color: var(--err);
    box-shadow: inset 0 0 0 1px var(--err);
  }
}

.m-contactForm__error {
  display: flex;
  gap: 7px;
  align-items: center;
  font: 600 13px/1.4 var(--fontBody);
  color: var(--err);

  &::before {
    content: "!";
    flex: none;
    display: grid;
    place-items: center;
    width: 16px;
    height: 16px;
    background: var(--err);
    color: var(--white);
    font: 700 11px/1 var(--fontMono);
  }

  &[hidden] {
    display: none;
  }
}

.m-contactForm__submit {
  width: 100%;
}

.m-contactForm__status {
  margin-top: 12px;
  font-size: 14px;

  &:empty {
    display: none;
  }

  &.is-error {
    color: var(--err);
  }
}

.m-contactForm__legal {
  margin-top: 12px;
  font-size: 13px;
  color: var(--muted2);
  text-align: center;
}

.m-contactForm__legalLink {
  color: var(--ink);
}

/* Confirmation panel: replaces the fields in place once Formspree accepts the message */
.m-contactForm__sent {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 14px;
  padding: clamp(22px, 3vw, 40px);
  visibility: hidden;

  .m-contactForm.is-sent & {
    visibility: visible;
  }
}

.m-contactForm__sentPart {
  opacity: 0;
  transform: translateY(14px);

  .m-contactForm.is-sent & {
    opacity: 1;
    transform: none;
    transition: opacity 0.5s var(--easeSoft) calc(0.2s + var(--partIndex) * 0.08s), transform 0.8s var(--easeOut) calc(0.2s + var(--partIndex) * 0.08s);
  }

  &:nth-child(1) { --partIndex: 0; }
  &:nth-child(2) { --partIndex: 1; }
  &:nth-child(3) { --partIndex: 2; }
  &:nth-child(4) { --partIndex: 3; }
}

.m-contactForm__tick {
  width: 56px;
  height: 56px;

  rect {
    fill: var(--lime);
    stroke: var(--ink);
    stroke-width: 2;
  }

  path {
    fill: none;
    stroke: var(--ink);
    stroke-width: 2.5;
    stroke-dasharray: 38;
    stroke-dashoffset: 38;

    .m-contactForm.is-sent & {
      stroke-dashoffset: 0;
      transition: stroke-dashoffset 0.6s var(--easeOut) 0.55s;
    }
  }
}

.m-contactForm__sentTitle {
  font: 900 clamp(1.6rem, 1rem + 1.2vw, 2.2rem)/1.02 var(--fontDisplay);
  letter-spacing: -0.045em;

  &:focus {
    outline: 0;
  }
}

.m-contactForm__sentText {
  max-width: 30em;
  color: var(--muted);
}

/* ===== Floating UI: mobile CTA bar, back to top, toast ===== */
.c-mobileCta {
  position: fixed;
  inset: auto 0 0;
  z-index: 60;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: var(--ink);
  transform: translateY(110%);
  /* visibility, not just the transform, so the hidden bar's link leaves the tab order and the
     accessibility tree; it flips after the slide-out finishes */
  visibility: hidden;
  transition: transform 0.4s var(--easeIn), visibility 0s linear 0.4s;

  &.is-shown {
    transform: none;
    visibility: visible;
    transition: transform 0.6s var(--easeOut), visibility 0s;
  }

  .is-scrollLocked & {
    transform: translateY(110%);
    visibility: hidden;
  }

  @media (width >= 768px) {
    display: none;
  }
}

.c-mobileCta__button {
  width: 100%;
  min-height: 50px;
}

.c-backToTop {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 70;
  display: none;
  place-items: center;
  width: 46px;
  height: 46px;
  overflow: hidden;
  background: var(--paper);
  border: 2px solid var(--ink);
  box-shadow: 0 12px 30px -14px rgb(17 17 16 / 0.45);
  cursor: pointer;
  opacity: 0;
  transform: translateY(14px);
  visibility: hidden;
  transition: opacity 0.3s var(--easeSoft), transform 0.4s var(--easeIn), visibility 0s linear 0.4s;

  &.is-shown {
    opacity: 1;
    transform: none;
    visibility: visible;
    transition: opacity 0.45s var(--easeSoft), transform 0.6s var(--easeOut), visibility 0s;
  }

  /* Two-tone ring: it floats over both the paper sections and the near-black footer, and a
     single ink outline vanishes on the footer (about 1.1:1) */
  &:focus-visible {
    outline: 3px solid var(--lime);
    outline-offset: 3px;
    box-shadow: 0 0 0 6px var(--ink);
  }

  @media (width >= 768px) {
    display: grid;
  }
}

/* Fills from the bottom as the page scrolls: js/home.js sets --scrollProgress (0-1) */
.c-backToTop__progress {
  position: absolute;
  inset: 0;
  background: var(--ink);
  transform: scaleY(var(--scrollProgress, 0));
  transform-origin: bottom;
}

.c-backToTop__icon {
  position: relative;
  width: 14px;
  height: 14px;
  color: #fff;
  mix-blend-mode: difference;
  transition: transform 0.45s var(--easeOut);

  @media (hover: hover) {
    .c-backToTop:hover & {
      transform: translateY(-3px);
    }
  }
}

.c-toast {
  position: fixed;
  left: 50%;
  bottom: 84px;
  z-index: 90;
  display: flex;
  gap: 12px;
  align-items: center;
  max-width: calc(100% - 32px);
  padding: 13px 18px 13px 14px;
  background: var(--ink);
  color: var(--paper);
  font: 500 14px/1.4 var(--fontBody);
  box-shadow: 0 18px 40px -16px rgb(17 17 16 / 0.55);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 16px);
  transition: opacity 0.25s var(--easeSoft), transform 0.35s var(--easeIn), visibility 0s linear 0.35s;

  &::before {
    content: "";
    flex: none;
    width: 8px;
    height: 8px;
    background: var(--lime);
  }

  &.is-shown {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
    transition: opacity 0.4s var(--easeSoft), transform 0.6s var(--easeOut), visibility 0s;
  }

  @media (width >= 768px) {
    bottom: 76px;
  }
}

/* ==========================================================================
   Scroll reveals. Hidden start states only apply under html.is-motion, which the inline
   script in index.html sets before first paint (not with ?static or reduced motion) and
   removes again after 3s if js/home.js never starts, so a script failure cannot leave
   content invisible. js/home.js sets .is-entered as each element arrives, then removes
   data-enter once it has settled so hover states take back over.
   u = fade up · l = masked lines · s = stagger children · b = brackets only
   ld = ledger rule · clip = image wipe · wm = wordmark letters
   ========================================================================== */
.e-line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.1em;
  margin-bottom: -0.1em;
}

.e-line__inner {
  display: block;
}

@media (prefers-reduced-motion: no-preference) {
  .is-motion [data-enter="u"] {
    opacity: 0;
    transform: translateY(20px);

    &.is-entered {
      opacity: 1;
      transform: none;
      transition: opacity 0.7s var(--easeSoft) var(--enterDelay, 0ms), transform 0.95s var(--easeOut) var(--enterDelay, 0ms);
    }
  }

  .is-motion [data-enter="l"] {
    opacity: 0;

    &.is-split {
      opacity: 1;
    }

    .e-line__inner {
      transform: translateY(108%);
    }

    &.is-entered .e-line__inner {
      transform: none;
      transition: transform 1s var(--easeOut) calc(var(--enterDelay, 0ms) + var(--lineIndex, 0) * 85ms);
    }
  }

  .is-motion [data-enter="s"] > * {
    opacity: 0;
    transform: translateY(22px);
  }

  .is-motion [data-enter="s"].is-entered > * {
    opacity: 1;
    transform: none;
    transition: opacity 0.6s var(--easeSoft) calc(var(--enterDelay, 0ms) + var(--childIndex, 0) * 65ms), transform 0.9s var(--easeOut) calc(var(--enterDelay, 0ms) + var(--childIndex, 0) * 65ms);
  }

  .is-motion [data-enter].e-brackets {
    &::before {
      opacity: 0;
      transform: translate(-12px, -12px);
    }

    &::after {
      opacity: 0;
      transform: translate(12px, 12px);
    }

    &.is-entered::before,
    &.is-entered::after {
      opacity: 1;
      transform: none;
      transition: opacity 0.3s var(--easeSoft) calc(var(--enterDelay, 0ms) + 260ms), transform 0.85s var(--easeOut) calc(var(--enterDelay, 0ms) + 260ms);
    }
  }

  .is-motion [data-enter="ld"] {
    &::before {
      transform: scaleX(0);
    }

    .m-ledger__text {
      opacity: 0;
      transform: translateY(6px);
    }

    &.is-entered::before {
      transform: none;
      transition: transform 1.1s var(--easeInOut) var(--enterDelay, 0ms);
    }

    &.is-entered .m-ledger__text {
      opacity: 1;
      transform: none;
      transition: opacity 0.5s var(--easeSoft) calc(var(--enterDelay, 0ms) + 300ms), transform 0.7s var(--easeOut) calc(var(--enterDelay, 0ms) + 300ms);
    }

    &.is-entered .m-ledger__text + .m-ledger__text {
      transition-delay: calc(var(--enterDelay, 0ms) + 440ms);
    }
  }

  .is-motion [data-enter="clip"] {
    opacity: 0;

    .m-about__clip {
      clip-path: inset(100% 0 0 0);
    }

    .m-about__image {
      transform: scale(1.18);
    }

    .m-about__badge,
    .m-about__caption {
      opacity: 0;
      transform: translateY(12px);
    }

    &.is-entered {
      opacity: 1;
      transition: opacity 0.4s var(--easeSoft) var(--enterDelay, 0ms);
    }

    &.is-entered .m-about__clip {
      clip-path: inset(0);
      transition: clip-path 1.2s var(--easeInOut) var(--enterDelay, 0ms);
    }

    &.is-entered .m-about__image {
      transform: none;
      transition: transform 1.7s var(--easeOut) var(--enterDelay, 0ms);
    }

    &.is-entered .m-about__caption {
      opacity: 1;
      transform: none;
      transition: opacity 0.5s var(--easeSoft) calc(var(--enterDelay, 0ms) + 600ms), transform 0.8s var(--easeOut) calc(var(--enterDelay, 0ms) + 600ms);
    }

    &.is-entered .m-about__badge {
      opacity: 1;
      transform: none;
      transition: opacity 0.4s var(--easeSoft) calc(var(--enterDelay, 0ms) + 850ms), transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--enterDelay, 0ms) + 850ms);
    }
  }

  .is-motion [data-enter="wm"] .c-siteFooter__wordmarkChar {
    transform: translateY(105%);
  }

  .is-motion [data-enter="wm"].is-entered .c-siteFooter__wordmarkChar {
    transform: none;
    transition: transform 1.1s var(--easeOut) calc(var(--enterDelay, 0ms) + var(--childIndex, 0) * 60ms);
  }

  .is-motion [data-enter] .m-miniSite > * {
    opacity: 0;
    transform: translateY(8px);
  }

  .is-motion [data-enter].is-entered .m-miniSite > * {
    opacity: 1;
    transform: none;
    transition: opacity 0.5s var(--easeSoft) calc(var(--enterDelay, 0ms) + 450ms), transform 0.7s var(--easeOut) calc(var(--enterDelay, 0ms) + 450ms);
  }

  .is-motion .e-mark {
    transition: background-size 0.9s var(--easeInOut);

    &:not(.is-marked) {
      background-size: 0 var(--markHeight);
    }
  }
}

/* ==========================================================================
   Motion layer (js/home_motion.js): character fields, the 3D hero model, the editing cursor
   ========================================================================== */
.c-asciiField {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s var(--easeSoft);

  &.is-on {
    opacity: 1;
  }
}

.c-asciiField__canvas {
  position: absolute;
  inset: 0;
  display: block;
}

/* Footer: the beam drops in from the top, so the field fades toward the bottom */
.c-asciiField--footer {
  inset-inline: auto;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);

  .c-asciiField__canvas {
    mask-image: linear-gradient(to top, #000 50%, rgb(0 0 0 / 0.75) 100%);

    @media (width >= 768px) {
      mask-image: linear-gradient(to bottom, #000 40%, rgb(0 0 0 / 0.5) 100%);
    }
  }
}

.c-heroModel {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.9s var(--easeSoft);

  &.is-on {
    opacity: 1;
  }
}

.c-heroModel__canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

/* Invisible targets so the editing cursor can point at each device */
.c-heroModel__hit {
  position: absolute;
  z-index: 0;
  pointer-events: none;
}

/* The editing cursor: a scripted collaborator, with a label saying what it's doing */
.c-cursor {
  position: absolute;
  inset: 0 auto auto 0;
  z-index: 31;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s var(--easeSoft);
  will-change: transform;

  &.is-on {
    opacity: 1;
  }
}

.c-cursor__arrow {
  position: absolute;
  left: -3px;
  top: -2.5px;
  width: 22px;
  height: 22px;
  max-width: none;
  overflow: visible;
  transform-origin: 3px 2.5px;
  filter: drop-shadow(0 1px 1.5px rgb(17 17 16 / 0.25));

  path {
    fill: var(--lime);
    stroke: var(--ink);
    stroke-width: 1.3;
    stroke-linejoin: round;
  }
}

.c-cursor__bubble {
  position: absolute;
  inset: 0 auto auto 0;
  padding: 6px 10px 6px 9px;
  border: 1px solid var(--ink);
  background: var(--lime);
  font: 500 12px/1 var(--fontBody);
  letter-spacing: -0.005em;
  white-space: nowrap;
  box-shadow: 0 8px 18px -10px rgb(17 17 16 / 0.45);

  @media (width >= 768px) {
    padding: 7px 12px 7px 11px;
    font-size: 13px;
  }
}

.c-cursor__label {
  display: inline-block;
  color: transparent;
  background: linear-gradient(90deg, var(--ink) 0 38%, #5c6b45 50%, var(--ink) 62% 100%) 0 0 / 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: cursorShimmer 2.4s linear infinite;
}

@keyframes cursorShimmer {
  from { background-position: 100% 0; }
  to { background-position: -150% 0; }
}

.c-cursor__caret {
  display: inline-block;
  width: 2px;
  height: 0.95em;
  margin-left: 2px;
  vertical-align: -0.1em;
  background: currentColor;
  animation: consoleBlink 0.9s steps(1) infinite;
}

/* Selection box: dashed frame, square handles, a faint lime wash */
.c-cursorBox {
  position: absolute;
  z-index: 30;
  pointer-events: none;
  border: 2px dashed rgb(17 17 16 / 0.42);
  background: rgb(200 255 106 / 0.11);
  box-shadow: 0 14px 30px -18px rgb(17 17 16 / 0.35);
  opacity: 0;
  transition: opacity 0.3s var(--easeSoft);

  &.is-on {
    opacity: 1;
  }
}

.c-cursorBox--dark {
  border-color: rgb(200 255 106 / 0.7);
  background: rgb(200 255 106 / 0.08);
}

.c-cursorBox__handle {
  position: absolute;
  width: 7px;
  height: 7px;
  background: var(--ink);

  .c-cursorBox--dark & {
    background: var(--lime);
  }

  &:nth-child(1) { left: -4.5px; top: -4.5px; }
  &:nth-child(2) { right: -4.5px; top: -4.5px; }
  &:nth-child(3) { left: -4.5px; bottom: -4.5px; }
  &:nth-child(4) { right: -4.5px; bottom: -4.5px; }
}

.is-lifted {
  box-shadow: 0 26px 44px -22px rgb(17 17 16 / 0.42), inset 0 0 0 1px rgb(17 17 16 / 0.1);
}

/* Pause control for the continuous motion (WCAG 2.2.2 Pause, Stop, Hide) */
.c-motionToggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--line3);
  background: var(--white);
  color: var(--ink);
  font: 700 11px/1 var(--fontMono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;

  &[hidden] {
    display: none;
  }

  &:focus-visible {
    outline: 3px solid var(--ink);
    outline-offset: 3px;
  }

  @media (hover: hover) {
    &:hover {
      border-color: var(--ink);
    }
  }
}

.c-motionToggle__icon {
  display: inline-flex;
  gap: 3px;

  &::before,
  &::after {
    content: "";
    width: 3px;
    height: 10px;
    background: currentColor;
  }

  .c-motionToggle.is-paused > & {
    gap: 0;
    width: 10px;
    height: 10px;
    background: currentColor;
    clip-path: polygon(0 0, 100% 50%, 0 100%);

    &::before,
    &::after {
      display: none;
    }
  }
}

/* The pause control also freezes the looping CSS animations (live dots, blinking cursors, the
   diagram pings). Only the infinite ones: freezing a one-shot like miniSiteRise would hold the
   demo's content at its opacity-0 start frame. Kept last so it wins over the components'
   animation shorthands, which reset animation-play-state to running at equal specificity. */
.is-motionPaused :is(.e-liveDot, .m-console__live, .m-probe__label)::before,
.is-motionPaused .e-liveDot::after,
.is-motionPaused .m-console__prompt::after,
.is-motionPaused :is(.c-cursor__label, .c-cursor__caret, .e-button__dot),
.is-motionPaused [data-diagram].is-playing .e-diagram__svg :is(.p2-ping, .p3-key) {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .c-cursor,
  .c-cursorBox {
    display: none;
  }

  .e-brackets::before,
  .e-brackets::after,
  .m-short__more,
  .m-short__moreArrow,
  .m-console__text,
  .m-console__swatchLabel,
  .m-console__swatchLabel::before,
  .m-miniSite__hero,
  .m-miniSite__heroSub,
  .m-miniSite__button,
  .m-examples__link,
  .m-examples__image,
  .m-examples__go::before,
  .m-examples__goIcon,
  .c-previewDialog__newTab,
  .c-previewDialog__close,
  .m-steps__item,
  .m-features__item::before,
  .m-features__plus,
  .m-pricing__item,
  .m-pricing__index,
  .m-faq__summary,
  .m-faq__summary::after,
  .m-faq__index,
  .m-posts__item,
  .m-posts__titleLine,
  .m-posts__go::before,
  .m-posts__goArrow,
  .m-contactForm__input,
  .m-contactForm__fields,
  .m-contactForm__sentPart,
  .c-mobileCta,
  .c-backToTop,
  .c-backToTop__icon,
  .c-toast {
    transition: none;
  }

  .m-console__live::before,
  .m-console__prompt::after,
  .m-probe__label::before,
  .c-cursor__caret {
    animation: none;
  }

  /* Diagrams still change state on hover, as a cut rather than a move. Specificity matches the
     rules it overrides: (0,2,0) for the base primitives, (0,4,0) for the playing state. */
  .e-diagram__svg :is(.mv, .dr, .p1-bar, .p3-ring),
  [data-diagram].is-playing .e-diagram__svg :is(.mv, .dr, .p1-bar, .p3-ring, .p2-ping, .p3-key) {
    transition: none;
    animation: none;
  }

  .m-contactForm__tick path {
    stroke-dashoffset: 0;
  }
}