/* ================================================================
   DirectFXIT — home.css
   Homepage-only styles. Global tokens, nav, hero, video modal and
   footer live in main.css and are NOT repeated here.

   RESET 2026-10-21. The old 3,409-line file (all 8 homepage
   sections) is backed up at
     _archive/site-before-reset-2026-10-21/assets/css/home.css
   What survives below is SCAFFOLDING only, no design.

   Shared retro components (windows, buttons, terminals, the laser
   border) belong in assets/css/retro.css, NOT here. This file is
   only for layout that is unique to the homepage.
   ================================================================ */

.dfx-ed {
  position: relative;
  z-index: 2;
  color: var(--white);
  font-family: var(--fb);
}
.dfx-ed * { box-sizing: border-box; }

/* ---------- Section containers ---------- */
.dfx-ed-sec  { position: relative; padding: 96px 0; overflow: hidden; }
.dfx-ed-wrap { max-width: 1400px; margin: 0 auto; padding: 0 24px; }

@media (min-width: 1024px) {
  .dfx-ed-sec  { padding: 144px 0; }
  .dfx-ed-wrap { padding: 0 48px; }
}

/* ---------- Reveal on scroll ---------- */
/* Add `reveal` to any element. The IntersectionObserver in app.js
   adds `.in` when it enters view. */
.dfx-ed .reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 1.1s cubic-bezier(0.22,1,0.36,1),
              transform 1.1s cubic-bezier(0.22,1,0.36,1);
}
.dfx-ed .reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .dfx-ed .reveal { opacity: 1; transform: none; transition: none; }
}

/* ================================================================
   NEW HOMEPAGE SECTIONS GO BELOW THIS LINE, in page order.
   ================================================================ */


/* ---------- Section 2: the Windows 95 desktop ----------
   Only the desktop LAYOUT lives here. Explorer windows, dialogs,
   taskbar and Start menu are kit (retro.css).
   The desktop starts empty, so the stage has a fixed minimum
   height: an Explorer window opening into it does not shove the
   page down, and closing it does not pull the page up.
   A photo wallpaper was tried and removed 2026-10-21 (Joseph);
   its original is still in assets/images/_src/desk95-bg.png.
   Three-card version (2026-10-21) replaced the same day. */
.dfx-desk95 {
  position: relative;
  display: flex; flex-direction: column;
  background-color: var(--black);   /* same as the page (main.css) */
  border-top: 2px solid var(--rx-face);   /* thin 95-grey edge, matches the taskbar */
}
/* The wallpaper, so the empty desktop reads as a screen and not a
   gap: a faint grid with a soft blue glow from below (::before),
   and the logo very faint in the middle, like a 95 wallpaper set
   to "Center" (::after). Logo colours, no blur (design.md §8). */
.dfx-desk95::before,
.dfx-desk95::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.dfx-desk95::before {
  background:
    radial-gradient(ellipse 75% 70% at 50% 110%, rgba(43,127,255,.16), transparent 70%),
    repeating-linear-gradient(0deg,  rgba(168,220,255,.055) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, rgba(168,220,255,.055) 0 1px, transparent 1px 40px);
  -webkit-mask-image: radial-gradient(ellipse 80% 75% at 50% 50%, #000 35%, transparent 100%);
          mask-image: radial-gradient(ellipse 80% 75% at 50% 50%, #000 35%, transparent 100%);
}
.dfx-desk95::after {
  bottom: 48px;   /* centre on the desktop, not the taskbar */
  background: url('../images/logo.png') center / min(520px, 70%) auto no-repeat;
  opacity: .07;
}
/* Content above the wallpaper. The screen is also the box a dialog
   centres in, so a dialog never covers the taskbar. */
.dfx-desk95__screen { position: relative; z-index: 1; flex: 1; padding: 56px 0; }
.dfx-desk95__stage  { min-height: 430px; }
/* Wide screens: widen the wrap so a maximised window can use the
   space (same rule as design.md §5). */
@media (min-width: 1500px) {
  .dfx-desk95__stage { max-width: 1680px; }
}
@media (max-width: 700px) {
  .dfx-desk95__screen { padding: 32px 0; }
  .dfx-desk95__stage  { min-height: 320px; padding: 0 12px; }
}

/* ---------- Section 3: About the company ----------
   MODERN, not 95 (Joseph, 2026-10-21): rounded photo that pops
   off the page, hero-style headline, "old IBM" background.
   Body text uses the kit's UI font (Tahoma stack) at a large
   size with loose line height: Rajdhani read as hard on the eyes
   in long paragraphs. */
/* Background = the HERO's colours (Joseph, 2026-10-21): hero black,
   the hero's four faint particle glows (teal, blue, green, orange),
   the hero's scanlines (::after), plus SLIDING LINES: horizontal bars
   with gaps moving across, in the spirit of the striped 1970s IBM
   look, coloured hero steel and teal.
   ⚠️ Stripes only. Never the IBM letters or the logo itself: that
   is IBM's trademark.
   How the lines move without repainting every frame: each layer
   is 200% wide, its bar pattern repeats every 50% (mask-size), and
   it slides by exactly -50%, so the loop is seamless and the
   animation is a plain transform (composited, cheap on phones).
   Tried and replaced the same day: punch-card holes; Big Blue
   band with beige case trim. */
.dfx-about3 {
  --ab-steel: 122, 138, 170;     /* #7a8aaa, the bottom of the hero headline gradient */
  --ab-teal:  0, 183, 174;       /* the hero sub-line colour (main.css --cyan) */
  --ab-label: rgba(0, 183, 174, .7);
  isolation: isolate;
  background:
    radial-gradient(circle 420px at 18% 30%, rgba(0, 183, 174, .07), transparent 70%),
    radial-gradient(circle 460px at 82% 70%, rgba(0, 123, 255, .07), transparent 70%),
    radial-gradient(circle 360px at 35% 88%, rgba(79, 181, 40, .045), transparent 70%),
    radial-gradient(circle 380px at 62% 28%, rgba(255, 106, 0, .04), transparent 70%),
    var(--black);
}
/* The hero's scanlines, same values (main.css .dfx-hero-section::after),
   laid over the moving lines. */
.dfx-about3::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: repeating-linear-gradient(to bottom, transparent, transparent 3px, rgba(0,0,0,.07) 3px, rgba(0,0,0,.07) 4px);
}
/* SHARED: the sliding "IBM" lines. Used by section 3 (About) and
   section 6 (Reviews), Joseph 2026-10-21. The host section needs
   position: relative + isolation: isolate (dfx-ed-sec + its own rule). */
.dfx-lines {
  --ab-steel: 122, 138, 170;
  --ab-teal:  0, 183, 174;
  position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  /* strong on the photo side, almost gone under the text (bright streaks
     behind a line of text read as underlines) */
  -webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,.85) 38%, rgba(0,0,0,.2) 52%, rgba(0,0,0,.06) 62%, rgba(0,0,0,.06) 100%);
          mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,.85) 38%, rgba(0,0,0,.2) 52%, rgba(0,0,0,.06) 62%, rgba(0,0,0,.06) 100%);
}
.dfx-lines span {
  position: absolute; top: 0; bottom: 0; left: 0; width: 200%;
  -webkit-mask-size: 50% 100%; mask-size: 50% 100%;
  -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x;
  animation: ab-lines 60s linear infinite;
}
/* Layer 1: the main stripes, hero steel */
.dfx-lines span:nth-child(1) {
  background: repeating-linear-gradient(180deg, rgba(var(--ab-steel), .26) 0 6px, transparent 6px 22px);
  -webkit-mask-image: linear-gradient(90deg, #000 0 22%, transparent 22% 26%, #000 26% 41%, transparent 41% 44%, #000 44% 70%, transparent 70% 75%, #000 75% 92%, transparent 92% 100%);
          mask-image: linear-gradient(90deg, #000 0 22%, transparent 22% 26%, #000 26% 41%, transparent 41% 44%, #000 44% 70%, transparent 70% 75%, #000 75% 92%, transparent 92% 100%);
}
/* Layer 2: the rows in between, hero teal, slower, gaps elsewhere */
.dfx-lines span:nth-child(2) {
  top: 11px;
  background: repeating-linear-gradient(180deg, rgba(var(--ab-teal), .13) 0 4px, transparent 4px 22px);
  -webkit-mask-image: linear-gradient(90deg, #000 0 12%, transparent 12% 19%, #000 19% 55%, transparent 55% 58%, #000 58% 84%, transparent 84% 90%, #000 90% 100%);
          mask-image: linear-gradient(90deg, #000 0 12%, transparent 12% 19%, #000 19% 55%, transparent 55% 58%, #000 58% 84%, transparent 84% 90%, #000 90% 100%);
  animation-duration: 95s;
}
/* Layer 3: a few bright streaks, faster, so it reads as motion */
.dfx-lines span:nth-child(3) {
  top: 44px;
  background: repeating-linear-gradient(180deg, rgba(240, 244, 255, .45) 0 2px, transparent 2px 132px);
  -webkit-mask-image: linear-gradient(90deg, transparent 0 8%, #000 8% 14%, transparent 14% 52%, #000 52% 61%, transparent 61% 100%);
          mask-image: linear-gradient(90deg, transparent 0 8%, #000 8% 14%, transparent 14% 52%, #000 52% 61%, transparent 61% 100%);
  animation-duration: 22s;
}
@keyframes ab-lines { from { transform: translateX(-50%); } to { transform: translateX(0); } }   /* left to right */

/* Photo column wider than the text column, and the photo a little
   taller (5:4, cropped with object-fit) so it holds its own against
   the tall text block. Equal columns made it look small (Joseph).
   Gap shrank WITH the column change (design.md §5: they move together). */
.dfx-about3__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 64px;
  align-items: center;
}
@media (min-width: 1500px) {
  .dfx-about3__grid { max-width: 1680px; }   /* same wide-screen rule as section 2 */
}

/* The photo as a GLASS CARD: Joseph's .card-glass (Library
   effects/glass.md #1, from the Kingman Apostolic Church site):
   thin blue edge, a light line across the top, a deep navy glow.
   Two deliberate differences from the snippet:
   - the inset top line is drawn on ::after, ABOVE the photo; as an
     inset box-shadow on the card itself the <img> covers it.
   - no backdrop-filter: it only blurs what shows THROUGH an element,
     and the photo covers the whole card, so it would cost scrolling
     performance and change nothing (the Library notes say the same).
   A thick "liquid glass" bezel was tried first and replaced. */
.dfx-about3__photo { margin: 0; }
/* ⚠️ TUNED FOR A DARK PAGE. The church values (border rgba(100,140,255,.25),
   navy shadow) were made for a light grey wood background; on near-black
   they vanish (Joseph, 2026-10-21: "I don't see the glow"). So:
   - the rim is a light GRADIENT ring (::before, masked), brightest at the
     top-left and bottom-right corners like the church cards
   - the outer glow is a soft LIGHT halo, not a navy shadow
   - the top light line (::after) is stronger */
.dfx-about3__glass {
  position: relative; border-radius: 16px; overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(170, 195, 255, .16),
    0 0 32px rgba(140, 175, 255, .26),
    0 14px 40px rgba(0, 0, 0, .6);
  transition: box-shadow .3s ease, transform .3s ease;
}
.dfx-about3__glass::before {           /* the glass rim, above the photo */
  content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: linear-gradient(135deg,
    rgba(255, 255, 255, .75) 0%, rgba(200, 215, 255, .28) 22%,
    rgba(200, 215, 255, .14) 50%, rgba(200, 215, 255, .28) 78%,
    rgba(255, 255, 255, .65) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;          /* ⚠️ xor here, exclude below: lessons.md §2 */
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  transition: opacity .3s ease;
}
.dfx-about3__glass::after {            /* light line across the top edge */
  content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 0 18px rgba(200, 215, 255, .08);
  transition: box-shadow .3s ease;
}
.dfx-about3__frame picture { display: block; }
.dfx-about3__frame img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }   /* the arch photo's own shape: 5/4 cut off the left post */
@media (hover: hover) and (pointer: fine) {
  .dfx-about3__photo:hover .dfx-about3__glass {
    transform: translateY(-4px);
    box-shadow:
      0 0 0 1px rgba(170, 195, 255, .24),
      0 0 40px rgba(120, 160, 255, .32),
      0 18px 48px rgba(0, 0, 0, .65);
  }
  .dfx-about3__photo:hover .dfx-about3__glass::after { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), inset 0 0 22px rgba(200, 215, 255, .12); }
}
.dfx-about3__cap {
  margin: 22px 0 0 4px;
  font: 400 .78rem/1.3 var(--fm); letter-spacing: .16em; text-transform: uppercase;
  color: var(--ab-label);
}

/* Text. Headline = the hero's treatment (Orbitron 900, uppercase,
   white-to-steel gradient via .gradient-text from main.css). */
.dfx-about3__eyebrow {
  margin: 0 0 16px;
  font: 400 .85rem/1 var(--fm); letter-spacing: .3em; text-transform: uppercase;
  color: var(--ab-label);
}
.dfx-about3__h {
  margin: 0 0 28px;
  font-family: var(--fd); font-weight: 900;
  font-size: clamp(1.7rem, 3vw, 3.1rem); line-height: 1.12; letter-spacing: -.02em;
  text-transform: uppercase;
}
.dfx-about3__line { display: block; }
.dfx-about3__p {
  margin: 0 0 18px; max-width: 60ch;
  font: 400 1.12rem/1.75 var(--rx-ui);
  color: rgba(240, 244, 255, .86);
}
.dfx-about3__cta { margin: 34px 0 0; }

@media (max-width: 900px) {
  .dfx-about3__grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .dfx-about3__photo { max-width: 620px; }
  .dfx-lines {
    -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.7) 28%, rgba(0,0,0,.06) 40%, rgba(0,0,0,.06) 100%);
            mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.7) 28%, rgba(0,0,0,.06) 40%, rgba(0,0,0,.06) 100%);
  }
}
@media (min-width: 1024px) {
  .dfx-about3.dfx-ed-sec { padding: 128px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .dfx-about3__glass { transition: none; }
  .dfx-lines span { animation: none; }
}

/* ---------- Section 4: How it works ----------
   CALM band (section 3 is the busy one): hero black with a soft teal
   light behind the computer. Steps left, Joseph's computer right.
   All machine overlays are positioned in % of the IMAGE, measured
   on the 1536x1024 original (same % at any size):
     screen glass  x 236-842, y 106-526  -> 15.4% / 10.4% / 39.5% / 41%
     disk slot     y ~817, x ~1188-1400  -> slot line 79.8%, 77.4% / 13.8%
     drive light   x 1198-1205, y 892-899 -> 78% / 87.1%
   Text sizes on the screen use cqi (1% of the machine's width), so the
   type scales with the picture. */
.dfx-how {
  background:
    radial-gradient(circle 560px at 72% 52%, rgba(0, 183, 174, .08), transparent 70%),
    var(--black);
}
/* The computer gets most of the row: its screen is only 39.5% of the
   picture, and the type on it must be readable (Joseph: "font too
   small"). Step cards narrower to pay for it; gap shrank with it. */
.dfx-how__grid {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr);
  gap: 56px;
  align-items: center;
}
@media (min-width: 1500px) { .dfx-how__grid { max-width: 1680px; } }

/* Left: header + steps */
.dfx-how__eyebrow {
  margin: 0 0 16px;
  font: 400 .85rem/1 var(--fm); letter-spacing: .3em; text-transform: uppercase;
  color: rgba(0, 183, 174, .7);
}
.dfx-how__h {
  margin: 0 0 14px;
  font-family: var(--fd); font-weight: 900;
  font-size: clamp(1.7rem, 3vw, 3.1rem); line-height: 1.12; letter-spacing: -.02em;
  text-transform: uppercase;
}
.dfx-how__lead { margin: 0 0 30px; font: 400 1.05rem/1.6 var(--rx-ui); color: rgba(240, 244, 255, .7); }
.dfx-how__lead[hidden], .dfx-how__load[hidden] { display: none; }
.dfx-how__list { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 14px; }
.dfx-how__lead:not([hidden]) + .dfx-how__list { margin-top: 0; }
.dfx-how__step {
  border-radius: 14px; padding: 16px 18px;
  background: rgba(255, 255, 255, .025);
  box-shadow: 0 0 0 1px rgba(170, 195, 255, .14), 0 10px 30px rgba(0, 0, 0, .35);
  transition: box-shadow .3s ease, background .3s ease;
}
.dfx-how__step.is-active {
  background: rgba(0, 183, 174, .06);
  box-shadow: 0 0 0 1px rgba(0, 183, 174, .55), 0 0 28px rgba(0, 183, 174, .18), 0 10px 30px rgba(0, 0, 0, .35);
}
.dfx-how__row { display: flex; align-items: center; gap: 16px; }
.dfx-how__num { font: 400 .95rem/1 var(--fm); letter-spacing: .1em; color: rgba(0, 183, 174, .7); }
.dfx-how__step.is-active .dfx-how__num { color: #3dffb4; }
.dfx-how__title {
  flex: 1; min-width: 0; margin: 0;
  font: 700 clamp(.95rem, 1.3vw, 1.15rem)/1.2 var(--fd); letter-spacing: .02em; text-transform: uppercase;
  color: var(--white);
}
.dfx-how__load {
  appearance: none; flex-shrink: 0; cursor: pointer;
  padding: 10px 18px; border-radius: 4px;
  border: 1px solid rgba(0, 183, 174, .55); background: transparent;
  font: 400 .8rem/1 var(--fm); letter-spacing: .22em; text-transform: uppercase; color: #3dffb4;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
.dfx-how__load:hover, .dfx-how__load:focus-visible, .dfx-how__load[aria-pressed="true"] {
  background: #00b7ae; color: #04110f; outline: 0; box-shadow: 0 0 18px rgba(0, 183, 174, .45);
}
/* The step text: readable in the list WITHOUT JS (and for crawlers);
   once home.js runs it plays on the screen instead. */
.dfx-how__detail { margin: 10px 0 0 38px; padding: 0; list-style: none; font: 400 1rem/1.55 var(--rx-ui); color: rgba(240, 244, 255, .75); }
.dfx-how__detail li + li { margin-top: 4px; }
.dfx-how.is-enhanced .dfx-how__detail { display: none; }

/* Right: the computer. The screen is BEHIND the image (z 1 < 2). */
.dfx-how__machine { position: relative; container-type: inline-size; }
.dfx-how__img { position: relative; z-index: 2; }
.dfx-how__img picture { display: block; }
.dfx-how__img img { display: block; width: 100%; height: auto; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .55)); }

.dfx-how__screen {
  position: absolute; z-index: 1;
  left: 15.4%; top: 10.4%; width: 39.5%; height: 41%;
  display: flex; flex-direction: column; justify-content: flex-end;   /* newest line at the bottom, old ones scroll off the top */
  padding: 2.6cqi 3cqi 2.4cqi;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 45%, #0b1d12 0%, #030805 75%);
}
.dfx-how__screen::after {             /* scanlines + glass glow, over the text */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0, 0, 0, .28) 2px 3px),
    radial-gradient(ellipse at 50% 40%, rgba(61, 255, 122, .07), transparent 70%);
}
.dfx-how__out {
  font: 400 clamp(12px, 1.85cqi, 20px)/1.4 var(--fm); color: #3dff7a;   /* was 1.42cqi: too small */
  text-shadow: 0 0 .45cqi rgba(61, 255, 122, .65);
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.dfx-how__ln.is-dim  { opacity: .65; }
.dfx-how__ln.is-head { color: #b6ffcb; }
.dfx-how__ln.is-gap  { height: .7em; }
.dfx-how__cur {
  display: inline-block; width: .6em; height: 1.05em; margin-left: 1px; vertical-align: -.15em;
  background: currentColor; box-shadow: 0 0 6px rgba(61, 255, 122, .7);
  animation: dfx-how-blink 1s steps(1) infinite;
}
@keyframes dfx-how-blink { 50% { opacity: 0; } }

/* The disk. Its box sits ABOVE the slot and clips at the slot line,
   so sliding the disk down makes it vanish into the drive. */
.dfx-how__drive {
  position: absolute; z-index: 3; pointer-events: none; overflow: hidden;
  left: 77.6%; width: 13.2%; top: 58.6%; height: 21.2%;    /* bottom edge = slot line, 79.8% */
}
.dfx-how__disk {
  position: absolute; left: 0; right: 0; bottom: 0; aspect-ratio: 1;
  opacity: 0;
  border-radius: 3%;
  background: linear-gradient(135deg, #2b2b2f 0%, #121214 45%, #0b0b0d 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 6px 14px rgba(0, 0, 0, .6);
}
.dfx-how__disk::before {               /* the hub ring */
  content: ''; position: absolute; left: 36%; top: 40%; width: 28%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, #050506 0 36%, #6d6d70 37% 47%, #1b1b1e 48% 100%);
}
.dfx-how__disk::after {                /* the oval read window */
  content: ''; position: absolute; left: 45%; top: 74%; width: 10%; height: 21%; border-radius: 45%;
  background: #050506; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
}
.dfx-how__disk-label {                 /* paper label, logo-colour stripe on top */
  position: absolute; left: 10%; right: 10%; top: 6%; height: 27%; border-radius: 2px;
  display: flex; align-items: flex-end; justify-content: center; padding-bottom: 3%;
  background:
    linear-gradient(90deg, #2b7fff 0 33%, #ff1f3d 33% 66%, #ff7a18 66%) top / 100% 18% no-repeat,
    repeating-linear-gradient(to bottom, transparent 0 22%, rgba(43, 127, 255, .25) 22% 25%),
    #f2efe6;
  font: 400 1.25cqi/1 var(--fm); letter-spacing: .1em; color: #1b1b1e;
}
.dfx-how__drive.is-inserting .dfx-how__disk { animation: dfx-how-insert 1.1s cubic-bezier(.5, 0, .75, 0) forwards; }
@keyframes dfx-how-insert {
  0%   { opacity: 0; transform: translateY(-14%); }
  28%  { opacity: 1; transform: translateY(0); }
  48%  { opacity: 1; transform: translateY(0); }
  100% { opacity: 1; transform: translateY(102%); }
}

/* Drive light, on while the disk is read. */
.dfx-how__led {
  position: absolute; z-index: 3; left: 78%; top: 87.1%; width: .55%; aspect-ratio: 1; border-radius: 50%;
  transition: background .15s, box-shadow .15s;
}
.dfx-how.is-reading .dfx-how__led { background: #ff3b3b; box-shadow: 0 0 .5cqi .25cqi rgba(255, 50, 50, .85); }

/* Phone output panel: off on wide screens. */
.dfx-how__panel { display: none; }

@media (max-width: 900px) {
  /* Stacked order: heading, computer, output panel, steps. The steps
     column is unwrapped (display: contents) so its heading and its list
     can sit on either side of the computer. */
  .dfx-how__grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .dfx-how__steps { display: contents; }
  .dfx-how__machine { order: 1; margin-top: 4px; }
  .dfx-how__panel { order: 2; margin-top: 18px; }
  .dfx-how__list,
  .dfx-how__lead:not([hidden]) + .dfx-how__list { order: 3; margin-top: 26px; }   /* beat the desktop "0 after the lead" rule */
  .dfx-how.is-enhanced .dfx-how__panel {
    display: block; min-height: 9.5em; border-radius: 10px; padding: 14px 16px;
    background: radial-gradient(ellipse at 50% 40%, #0b1d12 0%, #030805 80%);
    box-shadow: 0 0 0 1px rgba(61, 255, 122, .22), 0 10px 30px rgba(0, 0, 0, .5);
  }
  .dfx-how__panel .dfx-how__out { font-size: .92rem; }
  .dfx-how__screen .dfx-how__out { visibility: hidden; }   /* too small to read; the panel shows it */
}
@media (prefers-reduced-motion: reduce) {
  .dfx-how__cur { animation: none; }
  .dfx-how__step, .dfx-how__load { transition: none; }
}

/* ---------- Section 5: Brands we work with ----------
   A short band. The track holds the list twice and slides 0 -> -50%,
   right to left, so the loop is seamless and it is a plain transform.
   Each copy is at least as wide as the screen (min-width: 100vw on
   the list), or a wide monitor would see the gap before the loop.
   (100vw is safe HERE: the viewport clips it. lessons.md §2 is about
   100vw on page-level blocks.) Hover pauses it. Reduced motion: a
   plain centred row, the copy hidden. */
.dfx-brands {
  position: relative; padding: 64px 0 72px;
  background: var(--black);
  border-top: 1px solid rgba(170, 195, 255, .08);
  border-bottom: 1px solid rgba(170, 195, 255, .08);
}
.dfx-brands__h {
  margin: 0 0 34px; text-align: center;
  font: 400 .85rem/1 var(--fm); letter-spacing: .3em; text-transform: uppercase;
  color: rgba(0, 183, 174, .7);
}
.dfx-brands__viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
}
.dfx-brands__track { display: flex; width: max-content; animation: dfx-brands-scroll 45s linear infinite; }
.dfx-brands__viewport:hover .dfx-brands__track { animation-play-state: paused; }
@keyframes dfx-brands-scroll { to { transform: translateX(-50%); } }
.dfx-brands__list {
  display: flex; align-items: center; justify-content: space-around; gap: 80px;
  min-width: 100vw; margin: 0; padding: 0 40px; list-style: none;
}
.dfx-brands__item { flex-shrink: 0; display: flex; align-items: center; height: 44px; }
.dfx-brands__item img { display: block; width: auto; opacity: .85; transition: opacity .25s ease; }
.dfx-brands__item img:hover { opacity: 1; }
/* ⚠️ PREVIEW ONLY: the temporary web logos are black/grey/coloured, so
   they are forced white to read on the dark page. Official files
   (white/reversed versions) replace them and this class goes away
   ('preview' => false in home-brands.php). */
.dfx-brands--preview .dfx-brands__item:not(.is-colour) img { filter: brightness(0) invert(1); }
.dfx-brands__name {               /* text stand-in until the official logo file is in */
  font: 700 clamp(1.1rem, 1.6vw, 1.45rem)/1 var(--fd); letter-spacing: .06em; text-transform: uppercase;
  color: rgba(240, 244, 255, .5);
  transition: color .25s ease;
}
.dfx-brands__item:hover .dfx-brands__name { color: rgba(240, 244, 255, .9); }

@media (max-width: 700px) {
  .dfx-brands { padding: 48px 0 52px; }
  .dfx-brands__list { gap: 52px; padding: 0 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .dfx-brands__track { animation: none; width: auto; justify-content: center; }
  .dfx-brands__list { min-width: 0; flex-wrap: wrap; justify-content: center; gap: 28px 48px; }
  .dfx-brands__list[aria-hidden="true"] { display: none; }
  .dfx-brands__viewport { -webkit-mask-image: none; mask-image: none; }
}

/* ---------- Section 6: Reviews ----------
   Hero palette: black, a soft teal light behind the stack, the hero
   scanlines. The cards use the same glass rim as the About photo
   (section 3), tuned for a dark page.
   The deck stacks every card in ONE grid cell, so it is as tall as
   the longest review with no JS measuring. home.js sets data-pos on
   each card: 0 front, 1 and 2 peeking behind, 3 hidden, out = the
   card just sent away. Without JS: a plain readable list. */
.dfx-rev {
  isolation: isolate;
  background:
    radial-gradient(circle 520px at 68% 50%, rgba(0, 183, 174, .08), transparent 70%),
    radial-gradient(circle 420px at 15% 80%, rgba(0, 123, 255, .06), transparent 70%),
    var(--black);
}
.dfx-rev::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: repeating-linear-gradient(to bottom, transparent, transparent 3px, rgba(0,0,0,.07) 3px, rgba(0,0,0,.07) 4px);
}
.dfx-rev__grid {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.3fr);
  gap: 72px;
  align-items: center;
}
@media (min-width: 1500px) { .dfx-rev__grid { max-width: 1680px; } }

.dfx-rev__eyebrow {
  margin: 0 0 16px;
  font: 400 .85rem/1 var(--fm); letter-spacing: .3em; text-transform: uppercase;
  color: rgba(0, 183, 174, .7);
}
.dfx-rev__h {
  margin: 0 0 18px;
  font-family: var(--fd); font-weight: 900;
  font-size: clamp(1.7rem, 3vw, 3.1rem); line-height: 1.12; letter-spacing: -.02em;
  text-transform: uppercase;
}
.dfx-rev__source { margin: 0; font: 400 1.05rem/1.6 var(--rx-ui); color: rgba(240, 244, 255, .7); }

.dfx-rev__controls { display: flex; align-items: center; gap: 18px; margin-top: 36px; }
.dfx-rev__controls[hidden] { display: none; }
.dfx-rev__btn {
  appearance: none; position: relative; width: 52px; height: 52px; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(0, 183, 174, .55); background: transparent;
  transition: background .2s ease, box-shadow .2s ease;
}
.dfx-rev__btn::before {               /* chevron, drawn */
  content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 12px;
  border: solid #3dffb4; border-width: 0 2px 2px 0;
}
.dfx-rev__btn--next::before { translate: -70% -50%; rotate: -45deg; }
.dfx-rev__btn--prev::before { translate: -30% -50%; rotate: 135deg; }
.dfx-rev__btn:hover, .dfx-rev__btn:focus-visible { background: #00b7ae; outline: 0; box-shadow: 0 0 18px rgba(0, 183, 174, .45); }
.dfx-rev__btn:hover::before, .dfx-rev__btn:focus-visible::before { border-color: #04110f; }
.dfx-rev__count { margin: 0; min-width: 5.5ch; text-align: center; font: 400 1rem/1 var(--fm); letter-spacing: .15em; color: rgba(240, 244, 255, .7); }
.dfx-rev__count span { color: #3dffb4; }

/* The card: glass rim + halo, translucent so the stack shows through */
.dfx-rev__card {
  position: relative; margin: 0; border-radius: 18px; padding: 44px 44px 34px;
  background: rgba(15, 17, 28, .82);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 0 0 1px rgba(170, 195, 255, .16), 0 0 32px rgba(140, 175, 255, .2), 0 18px 50px rgba(0, 0, 0, .6);
}
.dfx-rev__card::before {              /* the glass rim, brightest top-left and bottom-right */
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,.7) 0%, rgba(200,215,255,.22) 22%, rgba(200,215,255,.1) 50%, rgba(200,215,255,.22) 78%, rgba(255,255,255,.6) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;          /* ⚠️ xor here, exclude below: lessons.md §2 */
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
}
.dfx-rev__mark {
  position: absolute; top: 6px; left: 30px;
  font: 900 5.5rem/1 var(--fd); color: rgba(0, 183, 174, .35);
}
.dfx-rev__text { margin: 0; }
.dfx-rev__text p {
  position: relative; margin: 0;
  font: 400 clamp(1.05rem, 1.35vw, 1.25rem)/1.7 var(--rx-ui); color: rgba(240, 244, 255, .92);
}
.dfx-rev__by { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 26px; }
.dfx-rev__name { font: 700 1.05rem/1 var(--fd); letter-spacing: .04em; color: var(--white); }
.dfx-rev__where {
  padding: 6px 10px; border-radius: 999px;
  font: 400 .75rem/1 var(--fm); letter-spacing: .15em; text-transform: uppercase;
  color: rgba(240, 244, 255, .7); box-shadow: inset 0 0 0 1px rgba(170, 195, 255, .25);
}

/* The shared sliding lines, MIRRORED here: the text is on the LEFT in
   this section, so the lines are strong on the right (behind the
   cards) and almost gone under the heading. At full strength the
   bright streaks read as underlines through the text. */
.dfx-rev .dfx-lines {
  -webkit-mask-image: linear-gradient(270deg, #000 0%, rgba(0,0,0,.85) 30%, rgba(0,0,0,.25) 52%, rgba(0,0,0,.05) 64%, rgba(0,0,0,.05) 100%);
          mask-image: linear-gradient(270deg, #000 0%, rgba(0,0,0,.85) 30%, rgba(0,0,0,.25) 52%, rgba(0,0,0,.05) 64%, rgba(0,0,0,.05) 100%);
}
@media (max-width: 900px) {      /* stacked: text on top, cards below */
  .dfx-rev .dfx-lines {
    -webkit-mask-image: linear-gradient(0deg, #000 0%, rgba(0,0,0,.7) 40%, rgba(0,0,0,.05) 58%, rgba(0,0,0,.05) 100%);
            mask-image: linear-gradient(0deg, #000 0%, rgba(0,0,0,.7) 40%, rgba(0,0,0,.05) 58%, rgba(0,0,0,.05) 100%);
  }
}

/* No JS: a readable list */
.dfx-rev__deck { display: grid; gap: 22px; }

/* JS: the stack */
.dfx-rev.is-enhanced .dfx-rev__deck { gap: 0; padding: 0 48px 48px 0; touch-action: pan-y; }   /* room for the peeking cards (44px) */
.dfx-rev.is-enhanced .dfx-rev__card {
  grid-area: 1 / 1;
  transition: transform .55s cubic-bezier(.22, 1, .36, 1), opacity .55s ease, filter .55s ease;
}
.dfx-rev.is-enhanced .dfx-rev__card[data-pos="0"] { z-index: 4; transform: none; opacity: 1; }
.dfx-rev.is-enhanced .dfx-rev__card[data-pos="1"] { z-index: 3; transform: translate(22px, 22px) scale(.96); opacity: .7; filter: saturate(.6); }
.dfx-rev.is-enhanced .dfx-rev__card[data-pos="2"] { z-index: 2; transform: translate(44px, 44px) scale(.92); opacity: .4; filter: saturate(.4); }
.dfx-rev.is-enhanced .dfx-rev__card[data-pos="3"] { z-index: 1; transform: translate(40px, 40px) scale(.9); opacity: 0; pointer-events: none; }
.dfx-rev.is-enhanced .dfx-rev__card[data-pos="out"] { z-index: 5; transform: translateX(-60%) rotate(-5deg); opacity: 0; pointer-events: none; }
.dfx-rev.is-enhanced .dfx-rev__card:not([data-pos="0"]) { pointer-events: none; }

@media (max-width: 900px) {
  .dfx-rev__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .dfx-rev__card { padding: 38px 26px 28px; }
  .dfx-rev__mark { left: 18px; font-size: 4.5rem; }
  .dfx-rev.is-enhanced .dfx-rev__deck { padding: 0 22px 22px 0; }
  .dfx-rev.is-enhanced .dfx-rev__card[data-pos="1"] { transform: translate(11px, 11px) scale(.97); }
  .dfx-rev.is-enhanced .dfx-rev__card[data-pos="2"] { transform: translate(22px, 22px) scale(.94); }
  .dfx-rev.is-enhanced .dfx-rev__card[data-pos="3"] { transform: translate(22px, 22px) scale(.92); }
  .dfx-rev__controls { margin-top: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .dfx-rev.is-enhanced .dfx-rev__card { transition: opacity .2s linear; }
}

/* ---------- Section 7: Tip of the Week ----------
   Heading on top, Joseph's console TV photo big in the middle.
   80s ADVERT colours on purpose (the old site's Tip palette, design.md
   §3.4: pink #ff2d78, cyan #35e8ff): a neon-tube "TIP OF THE" over a
   chrome "WEEK". Chrome keeps the hard white horizon band at 49-52%
   (design.md §8: that band is what makes it read as chrome); glow is
   light (drop-shadow / text-shadow), never a hard offset (§8).
   Every overlay on the photo is % of the 1536x1024 image, measured:
     screen glass x 420-1053, y 328-790 -> 27.34 / 32.03 / 41.21 / 45.12
     VCR door     x 336-655, y 126-171  -> centre 32.26% / 14.5%, w 20.77%
     VCR display  x 672-840, y 124-175  -> 43.75 / 12.11 / 10.94 / 4.98
     tapes        see .dfx-tv2__tape--1..4 below
   Type on the photo uses cqi (1% of the TV's width) so it scales. */
.dfx-tip {
  isolation: isolate;
  background:
    radial-gradient(ellipse 50% 40% at 22% 30%, rgba(255, 45, 120, .10), transparent 70%),
    radial-gradient(ellipse 50% 40% at 80% 35%, rgba(53, 232, 255, .09), transparent 70%),
    radial-gradient(ellipse 60% 45% at 50% 75%, rgba(255, 122, 24, .07), transparent 70%),
    var(--black);
}
.dfx-tip::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: repeating-linear-gradient(to bottom, transparent, transparent 3px, rgba(0,0,0,.09) 3px, rgba(0,0,0,.09) 4px);
}
.dfx-tip__wrap { display: flex; flex-direction: column; align-items: center; }

/* Heading */
.dfx-tip__head { text-align: center; max-width: 900px; margin-bottom: 36px; }
.dfx-tip__h { margin: 0; line-height: 1; }
.dfx-tip__neon {
  display: block;
  font: 700 clamp(1rem, 2.3vw, 1.7rem)/1 var(--fd); letter-spacing: .5em; text-transform: uppercase;
  padding-left: .5em;                     /* balances the trailing letter-spacing */
  color: #ffe0ec;
  text-shadow: 0 0 2px #fff, 0 0 6px #ff2d78, 0 0 14px #ff2d78, 0 0 30px rgba(255, 45, 120, .85), 0 0 60px rgba(255, 45, 120, .5);
  animation: dfx-neon-flicker 7s steps(1) infinite;
}
@keyframes dfx-neon-flicker {           /* a tube that catches now and then */
  0%, 100% { opacity: 1; } 41% { opacity: .55; } 42% { opacity: 1; } 43.5% { opacity: .7; } 44% { opacity: 1; }
}
.dfx-tip__chrome {
  display: inline-block; margin-top: .12em; padding: 0 .08em .06em;
  font: 900 clamp(3.4rem, 10vw, 8rem)/1 var(--fd); letter-spacing: .02em; text-transform: uppercase;
  transform: skewX(-9deg);
  background: linear-gradient(180deg,
    #f4fbff 0%, #b9e4ff 22%, #4aa2ff 44%, #1b5fd0 48.5%,
    #ffffff 49%, #ffffff 52%,
    #2a1240 52.5%, #6a2a8a 62%, #ff2d78 80%, #ffc2d8 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 1px rgba(255, 255, 255, .7)) drop-shadow(0 0 16px rgba(53, 232, 255, .45)) drop-shadow(0 0 40px rgba(255, 45, 120, .3));
}
.dfx-tip__h::after {                    /* a cyan neon rule under the chrome */
  content: ''; display: block; width: min(420px, 60%); height: 3px; margin: 16px auto 0; border-radius: 3px;
  background: #b8f6ff; box-shadow: 0 0 6px #35e8ff, 0 0 16px #35e8ff, 0 0 34px rgba(53, 232, 255, .6);
}
.dfx-tip__intro, .dfx-tip__p { margin: 22px auto 0; max-width: 60ch; font: 400 1.12rem/1.7 var(--rx-ui); color: rgba(240, 244, 255, .82); }
.dfx-tip__info { margin-top: 22px; }
.dfx-tip__info .dfx-tip__p { margin-top: 10px; }
.dfx-tip__week { margin: 0 0 8px; font: 400 .85rem/1 var(--fm); letter-spacing: .3em; text-transform: uppercase; color: #35e8ff; }
.dfx-tip__title { margin: 0; font: 700 clamp(1.2rem, 2vw, 1.6rem)/1.25 var(--fd); color: var(--white); text-transform: uppercase; letter-spacing: .03em; }
.dfx-tip.is-enhanced .dfx-tip__info { display: none; }
.dfx-tip.is-enhanced .dfx-tip__info.is-shown { display: block; }
.dfx-tip__intro[hidden] { display: none; }

/* The TV */
.dfx-tv2 { position: relative; width: 100%; max-width: 1180px; container-type: inline-size; }
.dfx-tv2__img { position: relative; z-index: 1; }
.dfx-tv2__img picture { display: block; }
.dfx-tv2__img img { display: block; width: 100%; height: auto; filter: drop-shadow(0 40px 50px rgba(0, 0, 0, .6)); }

/* Over the glass. Transparent until a tape plays, so the photo's own
   colour bars are the "no signal" picture. */
.dfx-tv2__screen {
  position: absolute; z-index: 2; overflow: hidden;
  left: 27.34%; top: 32.03%; width: 41.21%; height: 45.12%;
  border-radius: 7% / 9.5%;
  background: transparent; transition: background .2s;
}
.dfx-tv2__screen.is-active { background: #000; }
.dfx-tv2__pic { position: absolute; inset: 0; }
.dfx-tv2__pic canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.dfx-tv2__pic iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.dfx-tv2__scan, .dfx-tv2__glare { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s; }
.dfx-tv2__screen.is-active .dfx-tv2__scan, .dfx-tv2__screen.is-active .dfx-tv2__glare { opacity: 1; }
.dfx-tv2__scan  { background: repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0, 0, 0, .22) 2px 3px); }
.dfx-tv2__glare { background: radial-gradient(ellipse 70% 45% at 30% 16%, rgba(255,255,255,.12), transparent 60%), radial-gradient(ellipse at 50% 50%, transparent 58%, rgba(0,0,0,.5) 100%); }

/* VCR blue screen (a tape with no video yet: local only) */
.dfx-tv2__blue { position: absolute; inset: 0; background: #1534d6; color: #fff; font: 400 2.1cqi/1.35 var(--fm); letter-spacing: .08em; text-shadow: 0 0 5px rgba(255, 255, 255, .55); }
.dfx-tv2__blue p { position: absolute; margin: 0; }
.dfx-tv2__osd-top { left: 7%; top: 8%; }
.dfx-tv2__osd-mid { left: 0; right: 0; top: 40%; text-align: center; font-size: 4.2cqi; }
.dfx-tv2__osd-bot { left: 7%; right: 7%; bottom: 9%; text-align: center; font-size: 1.6cqi; opacity: .85; }

/* VCR display: covers the photo's 12:00 while a tape plays */
.dfx-tv2__lcd {
  position: absolute; z-index: 2; display: none;
  left: 43.75%; top: 12.11%; width: 10.94%; height: 4.98%;
  align-items: center; justify-content: center; border-radius: 2px;
  background: #080a08; color: #6dff6d; font: 400 1.45cqi/1 var(--fm); letter-spacing: .1em;
  text-shadow: 0 0 5px rgba(109, 255, 109, .8);
}
.dfx-tv2__lcd.is-on { display: flex; }

/* The four tapes: clickable areas over the photo, label written on each.
   Positions = the tape bodies in the photo; labels = their paper labels. */
.dfx-tv2__tape {
  position: absolute; z-index: 3; display: block; padding: 0; border: 0; cursor: pointer;
  background: transparent; border-radius: 5px; text-decoration: none;
  transition: box-shadow .2s ease;
}
/* No lift on hover: moving the clickable area slid the written label
   off the tape in the photo (Joseph, 2026-10-21). Glow only. */
.dfx-tv2__tape:hover, .dfx-tv2__tape:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 2px rgba(255, 45, 120, .85), 0 0 18px rgba(255, 45, 120, .55);
}
.dfx-tv2__tape.is-playing { box-shadow: 0 0 0 2px rgba(53, 232, 255, .9), 0 0 18px rgba(53, 232, 255, .55); }
.dfx-tv2__label {
  position: absolute; display: flex; align-items: center; justify-content: center;
  translate: -50% -50%;
  /* Very thick, like a fat marker (Joseph: "easier to read"): Orbitron
     900 plus a hairline stroke in the same ink to fatten it further. */
  font: 900 1.4cqi/1 var(--fd); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
  color: #111;
  -webkit-text-stroke: .35px #111;
}
.dfx-tv2__tape--1 { left: 21.81%; top: .59%;  width: 20.83%; height: 5.47%; }
.dfx-tv2__tape--1 .dfx-tv2__label { left: 55%;   top: 67.9%; width: 52.5%; height: 50%; }
.dfx-tv2__tape--2 { left: 19.86%; top: 6.05%; width: 22.14%; height: 4.3%; }
.dfx-tv2__tape--2 .dfx-tv2__label { left: 50.6%; top: 47.7%; width: 45.9%; height: 68%; }
.dfx-tv2__tape--3 { left: 52.86%; top: 3.42%; width: 7.81%;  height: 19.24%; }
.dfx-tv2__tape--3 .dfx-tv2__label { left: 48.75%; top: 53.6%; width: 69%; height: 18.8%; rotate: -90deg; }
.dfx-tv2__tape--4 { left: 72.56%; top: 7.62%; width: 21.81%; height: 5.27%; rotate: 7deg; }
.dfx-tv2__tape--4 .dfx-tv2__label { left: 39.3%; top: 71%; width: 44.8%; height: 55.6%; }

/* The tape that flies into the VCR: parked centred on the VCR door */
.dfx-tv2__sprite {
  position: absolute; z-index: 4; pointer-events: none;
  left: 21.88%; top: 14.5%; width: 20.77%; height: auto; translate: 0 -50%;
}
.dfx-tv2__sprite[hidden] { display: none; }

/* Phone buttons */
.dfx-tip__chips { display: none; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 22px; }
.dfx-tip__chip {
  appearance: none; cursor: pointer; padding: 11px 16px; border-radius: 4px;
  border: 1px solid rgba(255, 45, 120, .6); background: transparent; color: #ffd1e2;
  font: 400 .85rem/1 var(--fm); letter-spacing: .18em; text-transform: uppercase;
}
.dfx-tip__chip[aria-pressed="true"], .dfx-tip__chip:hover { background: #ff2d78; color: #1a0610; }
.dfx-tip__chip--eject { border-color: rgba(53, 232, 255, .6); color: #b8f6ff; }
.dfx-tip__chip[hidden] { display: none; }
@media (max-width: 900px) {
  .dfx-tip__head { margin-bottom: 20px; }
  .dfx-tip.is-enhanced .dfx-tip__chips { display: flex; }
}
@media (min-width: 901px) {
  .dfx-tip.is-enhanced .dfx-tip__chips:has(.dfx-tip__chip--eject:not([hidden])) { display: flex; }
  .dfx-tip.is-enhanced .dfx-tip__chips .dfx-tip__chip:not(.dfx-tip__chip--eject) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .dfx-tip__neon { animation: none; }
  .dfx-tv2__tape { transition: none; }
}

/* ---------- Section 8: Contact ----------
   Calm closing band (section 7 is the loud one): hero black with soft
   logo-colour light behind the form. The form panel is THE LASER
   EFFECT: Library effects/laser-border.md section C, copied as-is with
   the class renamed (.laser-form -> .dfx-contact__panel). Its traps:
   - masked border, NOT a rotating square (rounded + wide panel)
   - -webkit-mask-composite is xor, mask-composite is exclude
   - the glow is a drop-shadow ON the ring, never a blurred layer at
     z-index:-1 (that painted over the see-through panel once)
   - @property is required or the angle snaps; Safari < 16.4 shows a
     still ring, which is fine. */
@property --dfx-ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

.dfx-contact {
  background:
    radial-gradient(circle 520px at 72% 55%, rgba(43, 127, 255, .09), transparent 70%),
    radial-gradient(circle 380px at 88% 85%, rgba(255, 31, 61, .06), transparent 70%),
    var(--black);
}
.dfx-contact__grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 72px;
  align-items: center;
}
@media (min-width: 1500px) { .dfx-contact__grid { max-width: 1500px; } }

.dfx-contact__eyebrow {
  margin: 0 0 16px;
  font: 400 .85rem/1 var(--fm); letter-spacing: .3em; text-transform: uppercase;
  color: rgba(0, 183, 174, .7);
}
.dfx-contact__h {
  margin: 0 0 22px;
  font-family: var(--fd); font-weight: 900;
  font-size: clamp(1.9rem, 3.4vw, 3.4rem); line-height: 1.1; letter-spacing: -.02em;
  text-transform: uppercase;
}
.dfx-contact__line { display: block; }
.dfx-contact__lead { margin: 0; max-width: 46ch; font: 400 1.15rem/1.7 var(--rx-ui); color: rgba(240, 244, 255, .82); }
.dfx-contact__call { margin: 30px 0 0; }
.dfx-contact__facts { margin: 34px 0 0; padding: 0; display: grid; gap: 18px; }
.dfx-contact__facts dt { margin: 0 0 6px; font: 400 .78rem/1 var(--fm); letter-spacing: .25em; text-transform: uppercase; color: rgba(0, 183, 174, .7); }
.dfx-contact__facts dd { margin: 0; font: 400 1.05rem/1.55 var(--rx-ui); color: rgba(240, 244, 255, .85); }
.dfx-contact__hrs { display: block; }   /* one line each: hours, "We come to you." */

/* The laser panel (recipe C) */
.dfx-contact__panel {
  position: relative;
  isolation: isolate;
  padding: 2rem 1.9rem;
  border-radius: 0.9rem;
  background: rgba(15, 15, 26, 0.55);
  border: 1px solid rgba(240, 244, 255, 0.1);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
}
.dfx-contact__panel::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  border-radius: inherit; padding: 2px;
  pointer-events: none;
  background: conic-gradient(from var(--dfx-ang),
    rgba(43,127,255,.12) 0deg,   #2b7fff 18deg,  #a8dcff 34deg,  rgba(43,127,255,.12) 58deg,
    rgba(255,31,61,.12) 120deg,  #ff1f3d 150deg, #ff7a18 168deg, rgba(255,122,24,.12) 196deg,
    rgba(43,127,255,.12) 250deg, #2b7fff 282deg, #a8dcff 296deg, rgba(43,127,255,.12) 324deg,
    rgba(255,31,61,.12) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  filter: drop-shadow(0 0 5px rgba(43,127,255,.75))
          drop-shadow(0 0 12px rgba(168,85,247,.45));
  animation: dfx-form-laser 6s linear infinite;
}
.dfx-contact__panel > * { position: relative; z-index: 1; }
@keyframes dfx-form-laser { to { --dfx-ang: 360deg; } }

/* Command-prompt title bar */
.dfx-contact__bar {
  display: flex; align-items: center; gap: 4px; margin: -.4rem 0 1.4rem; padding-bottom: .9rem;
  border-bottom: 1px solid rgba(240, 244, 255, .1);
  font: 400 .95rem/1 var(--fm); letter-spacing: .12em; color: #3dff7a; text-shadow: 0 0 6px rgba(61, 255, 122, .55);
}
.dfx-contact__cur { display: inline-block; width: .6em; height: 1.05em; background: currentColor; animation: dfx-how-blink 1s steps(1) infinite; }

/* Fields */
.dfx-contact__form { display: grid; gap: 18px; }
.dfx-contact__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.dfx-contact__field { display: grid; gap: 8px; align-content: start; }   /* start: a neighbour's error must not stretch this field */
.dfx-contact__field label { font: 400 .78rem/1 var(--fm); letter-spacing: .22em; text-transform: uppercase; color: rgba(240, 244, 255, .7); }
.dfx-contact__field input,
.dfx-contact__field select,
.dfx-contact__field textarea {
  width: 100%; margin: 0; padding: 13px 14px; border-radius: 8px;
  border: 1px solid rgba(170, 195, 255, .2); background: rgba(5, 6, 12, .7); color: var(--white);
  font: 400 1.05rem/1.4 var(--rx-ui);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.dfx-contact__field textarea { resize: vertical; min-height: 130px; }
.dfx-contact__field select { appearance: none; padding-right: 40px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, #3dffb4 50%), linear-gradient(135deg, #3dffb4 50%, transparent 50%);
  background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55%; background-size: 6px 6px; background-repeat: no-repeat; }
.dfx-contact__field select option { background: #0f0f1a; color: var(--white); }
.dfx-contact__field input:focus,
.dfx-contact__field select:focus,
.dfx-contact__field textarea:focus { outline: 0; border-color: rgba(0, 183, 174, .8); box-shadow: 0 0 0 3px rgba(0, 183, 174, .2), 0 0 18px rgba(0, 183, 174, .2); }
.dfx-contact__field.has-error input,
.dfx-contact__field.has-error textarea { border-color: rgba(255, 31, 61, .85); }
.dfx-contact__err { margin: 0; font: 400 .95rem/1.4 var(--rx-ui); color: #ff8a9a; }
.dfx-contact__hint { margin: -8px 0 0; font: 400 .9rem/1.4 var(--rx-ui); color: rgba(240, 244, 255, .55); }
.dfx-contact__alert { margin: 0 0 18px; padding: 12px 14px; border-radius: 8px; background: rgba(255, 31, 61, .1); border: 1px solid rgba(255, 31, 61, .45); font: 400 1rem/1.5 var(--rx-ui); color: #ffd0d6; }
.dfx-contact__alert a { color: #fff; font-weight: 700; }
.dfx-contact__send { margin: 6px 0 0; }
.dfx-contact__send .dfx-hbtn[disabled] { opacity: .6; cursor: progress; }
.dfx-contact__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }   /* honeypot: off-screen, not display:none */
.dfx-contact__done { padding: 26px 4px 10px; }
.dfx-contact__done-h { margin: 0 0 10px; font: 900 clamp(1.4rem, 2.4vw, 2rem)/1.2 var(--fd); text-transform: uppercase; color: #3dff7a; text-shadow: 0 0 10px rgba(61, 255, 122, .5); }
.dfx-contact__done p { font: 400 1.1rem/1.6 var(--rx-ui); color: rgba(240, 244, 255, .85); }

@media (max-width: 900px) {
  .dfx-contact__grid { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .dfx-contact__panel { padding: 1.6rem 1.2rem; }
}
@media (max-width: 560px) {
  .dfx-contact__row { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .dfx-contact__panel::before { animation: none; }
  .dfx-contact__cur { animation: none; }
}