/* Home: "Rather build it yourself?" section (#diy, 2026-10-16).
   The builder mock-up stays dark in both themes, like the other product mock-ups (.by-app on
   /build-it-yourself/). One motion: home-diy.js drags the Booking section up the list once when the
   mock scrolls into view. Without JS or under reduced motion the end state (DOM order) shows, static.
   Every moving part uses transform/opacity only, so the section height never changes. */

/* Same hairline + rhythm as the other big home sections (site.css "Home visual pass"). */
main.nx #diy { padding-top: 64px; }
main.nx #diy > .container::before { content: ""; display: block; height: 1px; margin: 0 0 56px; background: var(--border); }

.hd-grid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); grid-template-areas: "head vis" "list vis" "act vis" "up vis"; column-gap: 64px; align-items: start; }
.hd-grid > .nx-head { grid-area: head; }
.hd-vis { grid-area: vis; align-self: center; }
.hd-list { grid-area: list; }
.hd-act { grid-area: act; }
.hd-up { grid-area: up; }

.hd-list { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 10px; color: var(--nx-ink-2); font-size: .97rem; line-height: 1.5; }
.hd-list li { position: relative; padding-left: 26px; }
.hd-list li::before { content: ""; position: absolute; left: 4px; top: .45em; width: 9px; height: 5px; border-left: 2px solid var(--purple-light); border-bottom: 2px solid var(--purple-light); transform: rotate(-45deg); }

.hd-act { margin-top: 28px; display: flex; align-items: center; flex-wrap: wrap; gap: 14px 20px; }
.hd-free { margin: 0; color: var(--nx-ink-2); font-size: .95rem; }
.hd-free b { color: var(--text); font-weight: 700; }

.hd-up { margin-top: 28px; padding: 20px 22px; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--purple) 38%, transparent); background: color-mix(in srgb, var(--purple) 7%, transparent); }
.hd-up h3 { margin: 0; font-size: 1.05rem; line-height: 1.35; letter-spacing: -.01em; }
.hd-up p { margin: 8px 0 0; color: var(--nx-ink-2); font-size: .93rem; line-height: 1.6; }
.hd-up a { display: inline-flex; align-items: center; min-height: 44px; margin: 6px 0 -10px; color: var(--purple-light); font-weight: 700; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--purple-light) 40%, transparent); text-underline-offset: 4px; border-radius: 6px; }
.hd-up a:hover { text-decoration-color: currentColor; }
.hd-up a:focus-visible { outline: 2px solid var(--purple-light); outline-offset: 3px; }

/* ---- Builder mock-up ---- */
.hd-app { --row: 42px; --gap: 8px; position: relative; border-radius: 18px; background: #0b0d16; border: 1px solid rgba(255,255,255,.1); box-shadow: 0 40px 90px -40px rgba(130,87,255,.45); overflow: hidden; color: #e9ebf2; font-size: .82rem; user-select: none; }
.hd-bar { display: flex; align-items: center; gap: 8px; padding: 11px 14px; border-bottom: 1px solid rgba(255,255,255,.08); color: #9aa2b4; font-size: .78rem; white-space: nowrap; }
.hd-bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.14); flex: none; }
.hd-bar b { margin-left: 6px; color: #e9ebf2; font-weight: 600; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.hd-saved { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-style: normal; color: #9aa2b4; transition: opacity .4s ease; }
.hd-saved svg { width: 13px; height: 13px; fill: none; stroke: #a98dff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.hd-bar span { margin-left: 10px; padding: 4px 10px; border-radius: 7px; background: #8257ff; color: #fff; font-weight: 600; }
.hd-body { display: grid; grid-template-columns: minmax(0, 1fr) 208px; }
.hd-side { padding: 14px; border-right: 1px solid rgba(255,255,255,.08); }
.hd-side > p { margin: 0 0 10px; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: #8b93a6; }
.hd-rw { position: relative; }
.hd-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--gap); }
.hd-rows li { position: relative; z-index: 1; height: var(--row); display: flex; align-items: center; gap: 9px; padding: 0 10px; border-radius: 10px; border: 1px solid rgba(255,255,255,.09); background: #10131f; transition: transform .45s cubic-bezier(.3,.7,.2,1), box-shadow .3s ease, border-color .3s ease, background .3s ease; }
.hd-rows li .g { width: 10px; height: 16px; flex: none; opacity: .55; background: radial-gradient(circle, #c8cdda 1.2px, transparent 1.6px) 0 0 / 5px 5.4px; }
.hd-rows li .n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hd-rows li .a { display: flex; gap: 4px; opacity: .45; }
.hd-rows li .a svg { width: 14px; height: 14px; fill: none; stroke: #c8cdda; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hd-rows li.is-lift { z-index: 3; background: #171a2b; border-color: rgba(169,141,255,.75); box-shadow: 0 18px 34px -12px rgba(0,0,0,.7), 0 0 0 1px rgba(130,87,255,.35); }
.hd-rows li.is-lift .g { opacity: 1; }
.hd-rows li.is-set { border-color: rgba(169,141,255,.55); }
.hd-rows.no-tr li { transition: none; }
.hd-drop { position: absolute; left: 0; right: 0; top: 0; height: 2px; border-radius: 2px; background: #a98dff; box-shadow: 0 0 10px rgba(130,87,255,.8); opacity: 0; transform: scaleX(.6); transition: opacity .25s ease, transform .3s ease; pointer-events: none; z-index: 2; }
.hd-drop::before { content: ""; position: absolute; left: -3px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: #a98dff; }
.hd-drop.is-on { opacity: 1; transform: none; }

.hd-stage { display: grid; place-items: center; padding: 18px; background: radial-gradient(320px 220px at 70% 15%, rgba(130,87,255,.16), transparent 70%); }
.hd-phone { width: 168px; border-radius: 22px; padding: 7px; background: #050609; border: 1px solid rgba(255,255,255,.14); }
.hd-screen { border-radius: 15px; overflow: hidden; background: #0f2233; display: flex; flex-direction: column; gap: 6px; padding-bottom: 8px; }
.hd-b { position: relative; flex: none; margin: 0 7px; border-radius: 8px; background: rgba(255,255,255,.06); transition: box-shadow .5s ease; }
.hd-b.is-hl { box-shadow: 0 0 0 1.5px #a98dff, 0 0 18px rgba(130,87,255,.5); }
.hd-b-header { margin: 0; border-radius: 0; height: 70px; background: linear-gradient(135deg, #22a6d8, #0d2433); display: grid; align-content: end; gap: 5px; padding: 10px; }
.hd-b-header b { display: block; height: 8px; width: 72%; border-radius: 4px; background: rgba(255,255,255,.88); }
.hd-b-header b + b { height: 6px; width: 46%; background: rgba(255,255,255,.5); }
.hd-b-booking { height: 52px; padding: 8px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; align-content: center; }
.hd-b-booking s { height: 14px; border-radius: 5px; border: 1px solid rgba(34,166,216,.6); }
.hd-b-booking s:nth-child(2) { background: #22a6d8; border-color: #22a6d8; }
.hd-b-services { height: 44px; padding: 7px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; background: none; }
.hd-b-services s { border-radius: 6px; background: rgba(255,255,255,.08); }
.hd-b-reviews { height: 38px; padding: 8px; display: grid; gap: 6px; align-content: center; }
.hd-b-reviews em { display: flex; gap: 3px; }
.hd-b-reviews em i { width: 7px; height: 7px; border-radius: 2px; background: #22a6d8; transform: rotate(45deg); }
.hd-b-reviews s { display: block; height: 5px; width: 80%; border-radius: 3px; background: rgba(255,255,255,.26); }
.hd-b-contact { height: 26px; background: none; display: flex; align-items: center; }
.hd-b-contact s { width: 54%; height: 16px; border-radius: 8px; background: #22a6d8; }

.hd-cur { position: absolute; left: 0; top: 0; width: 22px; height: 22px; z-index: 5; opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.hd-cur svg { width: 22px; height: 22px; display: block; fill: #fff; stroke: #050609; stroke-width: 1.4; stroke-linejoin: round; filter: drop-shadow(0 3px 6px rgba(0,0,0,.6)); transition: transform .2s ease; transform-origin: 20% 15%; }
.hd-cur.is-grab svg { transform: scale(.86); }
.hd-cur.is-on { opacity: 1; }

.hd-cap { margin: 14px 2px 0; color: var(--muted); font-size: .86rem; line-height: 1.5; }

/* State set by home-diy.js before the play: Saved is hidden until the drop. */
.hd-app.is-start .hd-saved { opacity: 0; }

@media (max-width: 1020px) {
  .hd-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "vis" "list" "act" "up"; }
  .hd-vis { margin-top: 32px; max-width: 560px; }
}
@media (max-width: 720px) {
  main.nx #diy { padding-top: 40px; }
  main.nx #diy > .container::before { margin-bottom: 40px; }
}
@media (max-width: 600px) {
  .hd-app { --row: 36px; --gap: 6px; font-size: .78rem; }
  .hd-bar { padding: 10px 12px; gap: 6px; }
  .hd-bar i { width: 7px; height: 7px; }
  .hd-body { grid-template-columns: minmax(0, 1fr) 136px; }
  .hd-side { padding: 12px 10px; }
  .hd-rows li { gap: 7px; padding: 0 8px; }
  .hd-rows li .a svg { width: 12px; height: 12px; }
  .hd-stage { padding: 12px 10px; }
  .hd-phone { width: 116px; border-radius: 18px; padding: 5px; }
  .hd-screen { border-radius: 13px; gap: 5px; padding-bottom: 6px; }
  .hd-b { margin: 0 5px; }
  .hd-b-header { height: 50px; padding: 7px; }
  .hd-b-header b { height: 6px; }
  .hd-b-header b + b { height: 5px; }
  .hd-b-booking { height: 38px; padding: 6px; gap: 4px; }
  .hd-b-booking s { height: 10px; }
  .hd-b-services { height: 32px; padding: 5px; gap: 4px; }
  .hd-b-reviews { height: 28px; padding: 6px; gap: 4px; }
  .hd-b-reviews em i { width: 5px; height: 5px; }
  .hd-b-contact { height: 20px; }
  .hd-b-contact s { height: 12px; }
  .hd-act .button { width: 100%; justify-content: center; }
}
@media (max-width: 360px) { .hd-rows li .a { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .hd-rows li, .hd-drop, .hd-cur, .hd-cur svg, .hd-b, .hd-saved { transition: none; }
}