/* ==========================================================================
   Website design & hosting service page
   Page-scoped styles, loaded only by /web-design.php via $page_styles in
   includes/header.php. Everything is prefixed .wd- so it can never leak into
   the rest of the site.

   THIS FILE ADDS. IT DOES NOT RE-IMPLEMENT.
   The first draft of this page defined .wd-section, .wd-kicker and .wd-lead --
   parallel copies of .section, .eyebrow and .section-intro. That was wrong,
   and it broke in a way worth recording: style.css owns the vertical rhythm
   through

       section.section+section.section:not(.muted){padding-top:0}

   which exists precisely because two stacked sections double their padding.
   Sections declared as .wd-section are not section.section, so that rule never
   matched them, and a plain band following the dark one opened with 70px of
   its own padding under the dark band's 70px -- a 140px void above the pricing
   heading. Re-deriving the spacing system is how you lose the fix that was
   already made.

   So the page uses the site's own classes for every generic thing:
     .section / .section.muted / .dark.product-section   section wrappers
     .container / .narrow                                width
     .eyebrow / .eyebrow.light                           kicker line
     .section h2                                         section heading
     .section-intro / .light-copy                        lead paragraph
     .cards / .cards-three / .card / .product-card       card grids
     .check-list                                         ticked lists
     .button / .button.secondary / .button-row           calls to action
     .callout / .fine-print / .status                    the rest
   Breakpoints match style.css too -- 850, 760, 520 -- so this page reflows on
   the same beats as every other page rather than on three of its own.

   What is genuinely new, and therefore lives here: the dark gradient hero, the
   drawn browser-and-phone mockup, the framed live previews, the pricing tier
   cards, the two audience panels, the numbered process row, the FAQ and the
   closing band. Those have no equivalent in style.css.

   PALETTE. Two extra accents (--wd-violet, --wd-cyan) exist only to build
   gradients that read as "design work" rather than "RF tool". The navy and the
   blue are still the site's. Do not spread these two into the rest of the site.

   MOTION. Everything animated is gated behind prefers-reduced-motion at the
   bottom. Scroll reveals use animation-timeline: view() inside @supports, so a
   browser without it simply shows the content. There is no JavaScript on this
   page -- header.php has no $page_scripts hook and this did not justify adding
   one.
   ========================================================================== */

.wd-page {
  --wd-accent: #4ba9e8;
  --wd-accent-soft: #8ed0ff;
  --wd-violet: #a78bfa;
  --wd-cyan: #22d3ee;
  --wd-good: #1d7a44;
  --wd-good-soft: #6ee2a8;
  --wd-deep: #0b1725;
  --wd-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

/* Typographic polish only -- no sizes, no spacing. Both degrade silently. */
.wd-page h1,
.wd-page h2 { text-wrap: balance; }
.wd-page .section-intro,
.wd-page .wd-cta p { text-wrap: pretty; }

/* NO CENTRING HELPER, ON PURPOSE. The first draft centred every section
   header. Nothing else on this site does: software.php, services.php and every
   page under services/ open each band with a left-aligned .eyebrow, h2 and
   .section-intro, and a centred page in the middle of that set reads as
   somebody else's work. Left alignment is the house style; the flash on this
   page comes from the mockup, the live frames and the tier cards, not from
   moving the type to the middle. */

/* The one gradient-text treatment on the page. -webkit- prefixes are required:
   background-clip:text is still prefixed in Safari and in Chrome's own
   implementation. The fallback colour is set FIRST so a browser supporting
   neither shows readable text rather than transparent glyphs. */
.wd-page .wd-grad {
  color: var(--wd-accent-soft);
  background: linear-gradient(96deg, var(--wd-cyan) 0%, var(--wd-accent) 42%, var(--wd-violet) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-style: normal;
}

/* --- hero ------------------------------------------------------------------ */
/* A MODIFIER ON .page-hero, not a replacement for it. Every page on this site
   opens with <section class="page-hero">, and this one does too -- it inherits
   that section's padding, its h1 clamp and its bottom border from style.css,
   and only repaints the band and adds the mockup column. Written as a bespoke
   .wd-hero section instead, it drifted away from the rest of the site on all
   three of those at once. */

.page-hero.wd-hero {
  position: relative;
  overflow: hidden;
  background: radial-gradient(1100px 520px at 78% 8%, rgba(124, 92, 255, .22), transparent 62%),
              radial-gradient(760px 420px at 6% 92%, rgba(34, 211, 238, .16), transparent 60%),
              linear-gradient(158deg, #0a1420 0%, var(--navy) 46%, #16324c 100%);
  color: #fff;
  border-bottom: 3px solid var(--blue);
  /* No padding override. .page-hero is 36px top and bottom on every other page
     and this one is not special enough to differ -- the mockup column sets the
     band's height on its own. */
}
.page-hero.wd-hero h1 { color: #fff; }
.page-hero.wd-hero p { color: #cfdce8; }

/* Faint engineering grid behind the hero. Pointer-events off so it can never
   intercept a click on the buttons above it. */
.page-hero.wd-hero:before {
  content: '';
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 62px 62px;
  mask-image: radial-gradient(760px 440px at 30% 30%, #000 0%, transparent 78%);
  -webkit-mask-image: radial-gradient(760px 440px at 30% 30%, #000 0%, transparent 78%);
  pointer-events: none;
}
.page-hero.wd-hero > .container { position: relative; z-index: 1; }

/* The hero column pair. Mirrors .hero-grid in style.css (1.5fr / .8fr) rather
   than inventing a ratio -- widened slightly only because the right column
   here is a fixed-shape mockup, not a text panel. */
.wd-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, .9fr);
  gap: 48px;
  align-items: center;
}
/* h1 size, line-height and margin all come from .page-hero h1 in style.css.
   Only the measure is set here, and only because this h1 shares its row. */
.page-hero.wd-hero h1 { max-width: 16ch; letter-spacing: -.015em; }

/* A MODIFIER on .eyebrow.light -- the exact class every other page opens its
   hero with. The first draft used a bespoke pill here, which is the one place
   on the page a visitor compares against the rest of the site fastest. All
   this adds is the live dot in front of the text. */
.eyebrow.wd-live { display: inline-flex; align-items: center; gap: 9px; }
.eyebrow.wd-live:before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: var(--wd-good-soft);
  animation: wd-blink 2.4s ease-in-out infinite;
}
@keyframes wd-blink { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

/* The price line. The reason somebody clicked. */
.wd-hero-price {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px;
  margin: 0; padding: 16px 20px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.14);
  border-left: 3px solid var(--wd-accent);
  border-radius: 5px;
}
.wd-hero-price .wd-hp-num { font-size: 34px; font-weight: 700; color: #fff; line-height: 1; }
.wd-hero-price .wd-hp-lab { font-size: 15px; color: #9fb5ca; }
.wd-hero-price .wd-hp-inc {
  flex-basis: 100%; font-size: 14px; color: var(--wd-good-soft); font-weight: 700;
}

.wd-ghost { background: transparent; border-color: rgba(255,255,255,.42); color: #fff; }
.wd-ghost:hover { background: rgba(255,255,255,.1); border-color: #fff; color: #fff; }

/* --- the drawn browser + phone mockup -------------------------------------- */
/* A miniature station site, built from divs. No images, no iframe, nothing to
   load. It is the first thing a visitor sees on a page selling web design, so
   it has to look like a real screen rather than a wireframe.

   ORDER MATTERS INSIDE .wd-screen: nav, player, hero, cards. The player sits
   directly under the nav -- which is how a real station site is built, and
   RICHEY fm is exactly that -- but the reason it is there rather than below
   the hero copy is the phone. The phone overlaps the browser's lower right,
   and in the first draft it covered the player's VU meter and the tail of the
   now-playing line: the one animated element on the page, hidden behind a
   static prop. Everything the phone covers now is filler bars. */

.wd-mockup { position: relative; padding-bottom: 30px; padding-right: 22px; }

.wd-browser {
  background: #0d1a29;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 8px;
  box-shadow: 0 30px 70px rgba(0,0,0,.45);
  overflow: hidden;
  transform: perspective(1400px) rotateY(-7deg) rotateX(2.5deg);
}
.wd-browser-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 13px;
  background: rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.wd-dots { display: flex; gap: 5px; }
.wd-dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.2); }
.wd-dots i:first-child { background: #ff6058; }
.wd-dots i:nth-child(2) { background: #ffbd2e; }
.wd-dots i:nth-child(3) { background: #28c93f; }
.wd-url {
  flex: 1; margin-left: 6px; padding: 4px 11px;
  background: rgba(0,0,0,.3); border-radius: 999px;
  font-family: var(--wd-mono); font-size: 10.5px; color: #8ba1b7;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wd-url b { color: var(--wd-good-soft); font-weight: 700; }

.wd-screen { background: linear-gradient(180deg, #12263c 0%, #0d1a29 100%); }

.wd-m-nav {
  display: flex; align-items: center; gap: 7px;
  padding: 11px 14px; border-bottom: 1px solid rgba(255,255,255,.09);
}
.wd-m-logo { font-size: 12px; font-weight: 700; color: #fff; letter-spacing: .02em; margin-right: auto; }
.wd-m-logo span { color: var(--wd-accent-soft); }
.wd-m-nav u { height: 6px; width: 26px; border-radius: 3px; background: rgba(255,255,255,.16); text-decoration: none; }
.wd-m-nav u.wd-on { background: var(--wd-accent); width: 20px; }

.wd-m-hero { padding: 14px 14px 12px; }
.wd-m-eyebrow {
  font-family: var(--wd-mono); font-size: 8.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--wd-accent-soft); margin-bottom: 7px;
}
.wd-m-head { font-size: 17px; font-weight: 700; color: #fff; line-height: 1.16; margin-bottom: 9px; }
.wd-m-line { height: 5px; border-radius: 3px; background: rgba(255,255,255,.12); margin-bottom: 6px; }
.wd-m-line.wd-w70 { width: 70%; }
.wd-m-line.wd-w45 { width: 45%; }

.wd-m-player {
  display: flex; align-items: center; gap: 10px;
  margin: 12px 14px 0;
  padding: 10px 12px;
  background: linear-gradient(100deg, rgba(75,169,232,.18), rgba(124,92,255,.14));
  border: 1px solid rgba(142,208,255,.3);
  border-radius: 6px;
}
.wd-m-play {
  flex: 0 0 auto;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--wd-accent); color: #06131f;
  display: grid; place-items: center;
  font-size: 9px; line-height: 1;
  animation: wd-pulse 3s ease-out infinite;
}
@keyframes wd-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(75,169,232,.5); }
  70%  { box-shadow: 0 0 0 12px rgba(75,169,232,0); }
  100% { box-shadow: 0 0 0 0 rgba(75,169,232,0); }
}
.wd-m-track { flex: 1; min-width: 0; position: relative; height: 26px; }
/* Two titles cross-fading, so the mockup is never static. Absolute so they
   share one line instead of reflowing the strip.

   'both' fill mode is LOAD-BEARING, twice over. Without it the delayed second
   title renders at its normal opacity -- 1 -- for the whole 4.5s before its
   animation starts, stacking both titles on top of each other from the moment
   the page loads. And the two visible windows are set to overlap rather than
   abut: 0-54% against 50-100% shifted by half the cycle, so one is always
   fully or partly opaque. Abutting windows left a ~1s dead gap every cycle in
   which the strip looked broken. */
.wd-m-track span {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: center;
  font-size: 10.5px; color: #fff; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  animation: wd-swap 9s ease-in-out infinite both;
}
.wd-m-track span + span { animation-delay: 4.5s; }
.wd-m-track small { display: block; font-weight: 400; font-size: 9px; color: #9fb5ca; margin-top: 1px; }
@keyframes wd-swap {
  0%       { opacity: 0; transform: translateY(4px); }
  4%, 50%  { opacity: 1; transform: translateY(0); }
  54%,100% { opacity: 0; transform: translateY(-4px); }
}
.wd-m-vu { display: flex; align-items: flex-end; gap: 2px; height: 18px; flex: 0 0 auto; }
.wd-m-vu i { width: 3px; border-radius: 1px; background: var(--wd-good-soft); animation: wd-vu 1.05s ease-in-out infinite alternate; }
.wd-m-vu i:nth-child(1) { height: 40%; animation-duration: .78s; }
.wd-m-vu i:nth-child(2) { height: 80%; animation-duration: 1.12s; }
.wd-m-vu i:nth-child(3) { height: 55%; animation-duration: .64s; }
.wd-m-vu i:nth-child(4) { height: 95%; animation-duration: .93s; }
.wd-m-vu i:nth-child(5) { height: 30%; animation-duration: 1.31s; }
@keyframes wd-vu { from { height: 22%; opacity: .65; } to { height: 100%; opacity: 1; } }

.wd-m-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; padding: 2px 14px 16px; }
.wd-m-card { padding: 9px 8px; border-radius: 4px; background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.09); }
.wd-m-card b { display: block; font-size: 8.5px; color: #fff; margin-bottom: 5px; }
.wd-m-card u { display: block; height: 4px; border-radius: 2px; background: rgba(255,255,255,.14); text-decoration: none; margin-bottom: 3px; }
.wd-m-card u:last-child { width: 60%; margin-bottom: 0; }

/* The phone, overlapping the browser's lower-right corner. Same site, narrow --
   the point being made is "one build, both screens". */
.wd-phone {
  position: absolute; right: 0; bottom: 0;
  width: 118px;
  background: #0a1420;
  border: 5px solid #1b2b3d;
  border-radius: 16px;
  box-shadow: 0 22px 44px rgba(0,0,0,.5);
  overflow: hidden;
}
.wd-phone:before { content: ''; display: block; height: 12px; background: #1b2b3d; }
.wd-phone-screen { background: linear-gradient(180deg, #12263c 0%, #0d1a29 100%); padding-bottom: 9px; }
.wd-phone .wd-m-nav { padding: 7px 8px; gap: 4px; }
.wd-phone .wd-m-logo { font-size: 8px; }
.wd-phone .wd-m-nav u { width: 9px; height: 4px; }
.wd-phone .wd-m-nav u.wd-on { width: 7px; }
.wd-phone .wd-m-hero { padding: 7px 8px 6px; }
.wd-phone .wd-m-eyebrow { font-size: 6px; margin-bottom: 4px; }
.wd-phone .wd-m-head { font-size: 10px; margin-bottom: 6px; }
.wd-phone .wd-m-line { height: 3px; margin-bottom: 4px; }
.wd-phone .wd-m-player { margin: 6px 8px 0; padding: 6px 7px; gap: 6px; }
.wd-phone .wd-m-play { width: 16px; height: 16px; font-size: 6px; }
.wd-phone .wd-m-track { height: 16px; }
.wd-phone .wd-m-track span { font-size: 7px; }
.wd-phone .wd-m-track small { font-size: 6px; }
.wd-phone .wd-m-vu { height: 10px; }
.wd-phone .wd-m-vu i { width: 2px; }
.wd-phone .wd-m-grid { grid-template-columns: 1fr 1fr; gap: 4px; padding: 6px 8px 0; }
.wd-phone .wd-m-card { padding: 5px; }
.wd-phone .wd-m-card b { font-size: 6px; margin-bottom: 3px; }
.wd-phone .wd-m-card u { height: 2.5px; }

/* --- trust strip ----------------------------------------------------------- */

.wd-strip {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: 6px; overflow: hidden;
}
.wd-strip div { background: #fff; padding: 22px 18px; text-align: center; }
.wd-strip b { display: block; font-size: 30px; font-weight: 700; color: var(--navy); line-height: 1.1; }
.wd-strip span { display: block; margin-top: 5px; font-size: 14px; color: var(--muted); }

/* --- portfolio -------------------------------------------------------------- */
/* Real sites, framed live rather than screenshotted. A screenshot goes stale
   the first time one of these sites is edited and nobody remembers to retake
   it; a frame cannot. See the header comment in web-design.php for why the
   frames are safe to embed. */

.wd-work { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 30px; }

.wd-item {
  position: relative;
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(16,28,43,.06);
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.wd-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 48px rgba(16,28,43,.18);
  border-color: var(--wd-accent);
}
.wd-item.wd-wide { grid-column: 1 / -1; }

.wd-chrome {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px;
  background: var(--navy);
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.wd-chrome .wd-url { font-size: 10px; }

/* The frame.
   The site inside is laid out at a MULTIPLE of the frame's width and then
   scaled back down by the reciprocal, so it fills the card exactly while
   rendering at a desktop viewport. Width and scale must always stay reciprocal
   (280% <-> 1/2.8) or the frame stops filling its card.

   The multiple is chosen by CONTAINER QUERY, on .wd-shot's own width -- not by
   media query. That is the whole trick, and it took two wrong turns to get to:

     1. One fixed multiple everywhere. The full-width KTYT card is twice the
        width of the two-up cards, so a multiple tuned for the small ones put
        the big one at a 3,675px viewport. A real site in a viewport that wide
        is nearly all margin; it reads as a broken preview, not a flattering
        one.
     2. A second multiple for .wd-wide plus a media-query override. That fixed
        the desktop case and broke the tablet one: below 850px the grid drops
        to one column, so EVERY card becomes as wide as the page, and the
        multiple meant for a 340px phone card put an 819px tablet card at
        2,610px.

   The card's width is what matters, and only the card knows it. A container
   query reads it directly, so the wide card, the two-up cards and the
   one-column cards are all handled by the same five rules with no breakpoints
   to keep in sync and no .wd-wide special case at all. Effective viewport
   stays between roughly 1,100px and 1,550px at every width.

   The declarations OUTSIDE the @container blocks are the fallback for a
   browser without container query support: 280% is correct for the two-up
   desktop card, which is the common case. */
.wd-shot {
  container-type: inline-size;
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: linear-gradient(150deg, #12263c, var(--wd-deep));
}
.wd-item.wd-wide .wd-shot { aspect-ratio: 21 / 9; }
.wd-shot iframe {
  position: absolute; top: 0; left: 0;
  width: 280%; height: 280%;
  border: 0;
  transform: scale(.3571428);
  transform-origin: 0 0;
  pointer-events: none;
}
@container (max-width: 400px)                          { .wd-shot iframe { width: 360%; height: 360%; transform: scale(.2777778); } }
@container (min-width: 400px) and (max-width: 560px)   { .wd-shot iframe { width: 280%; height: 280%; transform: scale(.3571428); } }
@container (min-width: 560px) and (max-width: 760px)   { .wd-shot iframe { width: 200%; height: 200%; transform: scale(.5);       } }
@container (min-width: 760px) and (max-width: 960px)   { .wd-shot iframe { width: 160%; height: 160%; transform: scale(.625);     } }
@container (min-width: 960px)                          { .wd-shot iframe { width: 140%; height: 140%; transform: scale(.7142857); } }

/* Sits above the frame so the whole preview is one link and the frame can
   never swallow a tap. */
.wd-shot .wd-open {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: flex-end;
  padding: 16px;
  background: linear-gradient(to top, rgba(11,23,37,.82) 0%, rgba(11,23,37,0) 42%);
  opacity: 0; transition: opacity .28s ease;
  text-decoration: none;
}
.wd-item:hover .wd-shot .wd-open,
.wd-shot .wd-open:focus-visible { opacity: 1; }
.wd-shot .wd-open span {
  padding: 9px 18px; border-radius: 999px;
  background: var(--wd-accent); color: #06131f;
  font-size: 13px; font-weight: 700;
}

.wd-item-body { padding: 20px 22px 22px; }
.wd-item-body h3 { margin: 0 0 4px; font-size: 20px; color: var(--navy); }
.wd-item-body h3 a { color: inherit; text-decoration: none; }
.wd-item-body h3 a:hover { color: var(--blue); }
.wd-item-kind {
  font-family: var(--wd-mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--blue);
  margin: 0 0 9px;
}
.wd-item-body p { margin: 0 0 13px; font-size: 15px; color: var(--muted); }
.wd-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.wd-tags li {
  padding: 4px 10px; border-radius: 999px;
  background: var(--soft); border: 1px solid var(--line);
  font-size: 12px; color: #43596e;
}

/* --- baseline cards --------------------------------------------------------- */
/* Uses .cards.cards-three + .product-card from style.css. Only the accent rule
   above each card is added here. */

.wd-page .product-card.wd-inc { border-top: 3px solid var(--wd-accent); }
.wd-page .product-card.wd-inc h3 { font-size: 18px; margin: 0 0 7px; }
.wd-page .product-card.wd-inc p { margin: 0; font-size: 15px; color: #b6c7d8; }

/* --- pricing ---------------------------------------------------------------- */

.wd-tiers {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px; margin-top: 40px; align-items: stretch;
}
.wd-tier {
  position: relative;
  display: flex; flex-direction: column;
  padding: 32px 28px 30px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(16,28,43,.05);
  transition: transform .28s ease, box-shadow .28s ease;
}
.wd-tier:hover { transform: translateY(-4px); box-shadow: 0 20px 44px rgba(16,28,43,.14); }
.wd-tier h3 { font-size: 20px; margin: 0 0 4px; color: var(--navy); }
.wd-tier .wd-for { margin: 0 0 20px; font-size: 14.5px; color: var(--muted); min-height: 2.9em; }
.wd-tier .wd-amount { font-size: 46px; font-weight: 700; color: var(--navy); line-height: 1; letter-spacing: -.02em; }
.wd-tier .wd-amount sup { font-size: 22px; top: -.5em; font-weight: 700; }
.wd-tier .wd-from {
  display: block; font-size: 12px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .1em; margin-bottom: 4px;
}
.wd-tier .wd-per { margin: 8px 0 0; font-size: 14px; color: var(--muted); }
.wd-tier .wd-host {
  margin: 14px 0 4px; padding: 9px 12px;
  background: #eef8f1; border: 1px solid #c5e3d0; border-radius: 4px;
  font-size: 13.5px; font-weight: 700; color: var(--wd-good);
}
/* .check-list comes from style.css; only the colour and the bottom spacing
   before the button are page business. */
.wd-tier .check-list { margin: 16px 0 26px; }
.wd-tier .check-list li { font-size: 15px; }
.wd-tier .check-list li:before { color: var(--wd-good); }
.wd-tier .check-list li.wd-more { color: var(--muted); font-style: italic; }
.wd-tier .check-list li.wd-more:before { content: '+'; color: var(--blue); }
.wd-tier .button { margin-top: auto; text-align: center; }

.wd-tier.wd-pick {
  background: linear-gradient(168deg, #13405f 0%, var(--navy) 62%, #0d2540 100%);
  border-color: var(--wd-accent);
  border-top: 4px solid var(--wd-accent);
  box-shadow: 0 26px 56px rgba(16,28,43,.28);
  transform: translateY(-12px);
}
.wd-tier.wd-pick:hover { transform: translateY(-17px); }
.wd-tier.wd-pick h3,
.wd-tier.wd-pick .wd-amount { color: #fff; }
.wd-tier.wd-pick .wd-for,
.wd-tier.wd-pick .wd-per,
.wd-tier.wd-pick .wd-from { color: #9fb5ca; }
.wd-tier.wd-pick .check-list li { color: #d6e2ee; }
.wd-tier.wd-pick .check-list li:before { color: var(--wd-good-soft); }
.wd-tier.wd-pick .check-list li.wd-more { color: #9fb5ca; }
.wd-tier.wd-pick .check-list li.wd-more:before { color: var(--wd-accent-soft); }
.wd-tier.wd-pick .wd-host {
  background: rgba(110,226,168,.13); border-color: rgba(110,226,168,.4); color: var(--wd-good-soft);
}
.wd-badge {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  padding: 6px 16px; border-radius: 999px; white-space: nowrap;
  background: linear-gradient(96deg, var(--wd-cyan), var(--wd-accent) 55%, var(--wd-violet));
  color: #06131f; font-size: 11px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
}

/* --- audience panels -------------------------------------------------------- */
/* Not .split-section: that is 1.3fr/0.7fr for a body-plus-sidebar. These two
   are peers and must be equal width, or the page implies one audience matters
   more than the other. */

.wd-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 30px; }
.wd-panel {
  padding: 30px 32px;
  border-radius: 8px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.16);
}
.wd-panel.wd-lit {
  background: linear-gradient(165deg, rgba(75,169,232,.16), rgba(124,92,255,.1));
  border-color: rgba(142,208,255,.4);
}
.wd-panel h3 { font-size: 23px; margin: 0 0 6px; color: #fff; }
.wd-panel > p { color: #b6c7d8; font-size: 16px; margin: 0 0 18px; }
.wd-feat { list-style: none; margin: 0; padding: 0; }
.wd-feat li {
  display: grid; grid-template-columns: 20px 1fr; gap: 11px;
  padding: 9px 0; border-bottom: 1px dashed rgba(255,255,255,.11);
  font-size: 15px; color: #d6e2ee;
}
.wd-feat li:last-child { border-bottom: 0; }
.wd-feat li:before { content: '→'; color: var(--wd-accent-soft); font-weight: 700; }
.wd-feat li small { display: block; margin-top: 2px; color: #8ba1b7; font-size: 12.5px; }
.wd-panel .wd-proof {
  margin: 18px 0 0; padding: 12px 15px;
  background: rgba(0,0,0,.24); border-left: 3px solid var(--wd-accent);
  border-radius: 3px; font-size: 14px; color: #9fb5ca;
}
.wd-panel .wd-proof a { color: var(--wd-accent-soft); }

/* --- process ---------------------------------------------------------------- */
/* style.css has .steps, but that is an ordered list with plain markers. These
   need the numbered disc and the timing line, so they are their own grid. */

.wd-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 42px; counter-reset: wd-step; }
.wd-step { position: relative; padding-top: 26px; border-top: 3px solid var(--line); }
.wd-step:before {
  counter-increment: wd-step;
  content: counter(wd-step);
  position: absolute; top: -19px; left: 0;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--blue); color: #fff;
  display: grid; place-items: center;
  font-size: 15px; font-weight: 700;
}
.wd-step h3 { font-size: 18px; margin: 0 0 7px; color: var(--navy); }
.wd-step p { margin: 0; font-size: 15px; color: var(--muted); }
.wd-step .wd-when {
  display: block; margin-top: 9px;
  font-family: var(--wd-mono); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--blue); font-weight: 700;
}

/* --- the renewal note ------------------------------------------------------- */
/* .callout from style.css, with the accent moved to the left edge so it reads
   as a footnote to the tiers rather than a fourth card. */

.wd-page .callout.wd-after {
  max-width: 780px; margin: 36px auto 0;
  background: #fff; border-top: 1px solid var(--line); border-left: 4px solid var(--blue);
}
.wd-page .callout.wd-after p { margin: 0; font-size: 15.5px; color: var(--muted); }
.wd-page .callout.wd-after p + p { margin-top: 9px; }
.wd-page .callout.wd-after strong { color: var(--navy); }

/* --- faq -------------------------------------------------------------------- */

.wd-faq { max-width: 830px; margin: 28px auto 0; }
.wd-faq details {
  border: 1px solid var(--line); border-radius: 5px; background: #fff;
  margin-bottom: 12px; padding: 0 22px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.wd-faq details[open] { border-color: var(--blue); box-shadow: 0 8px 22px rgba(16,28,43,.07); }
.wd-faq summary {
  cursor: pointer; padding: 18px 0; font-weight: 700; color: var(--navy);
  font-size: 17px; list-style: none;
}
.wd-faq summary::-webkit-details-marker { display: none; }
.wd-faq summary:before { content: '+ '; color: var(--blue); font-weight: 700; }
.wd-faq details[open] summary:before { content: '− '; }
.wd-faq details p { margin: 0 0 18px; color: var(--muted); }
.wd-faq details p:last-child { margin-bottom: 20px; }

/* --- final cta -------------------------------------------------------------- */
/* A MODIFIER on .dark.product-section -- the same band index.php uses for its
   station-operations section. Left-aligned like that one, and like every other
   section on the site; only the gradient paint is added here. The first draft
   centred it, which nothing else on the site does. */

.dark.product-section.wd-cta {
  position: relative; overflow: hidden;
  background: radial-gradient(820px 400px at 20% 0%, rgba(124,92,255,.22), transparent 64%),
              linear-gradient(160deg, #0a1420 0%, var(--navy) 58%, #16324c 100%);
}
.wd-cta > .container { position: relative; z-index: 1; }
.wd-cta h2 { max-width: 22ch; }
.wd-cta .fine-print { color: #8ba1b7; margin-top: 24px; }

/* --- scroll reveal ---------------------------------------------------------- */
/* Progressive enhancement only. Without animation-timeline support nothing is
   hidden and nothing animates -- the opacity:0 start state lives INSIDE the
   @supports block for exactly that reason. Never move it out. */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .wd-page .wd-reveal {
      opacity: 0;
      animation: wd-rise linear both;
      animation-timeline: view();
      animation-range: entry 5% cover 26%;
    }
    @keyframes wd-rise {
      from { opacity: 0; transform: translateY(26px); }
      to   { opacity: 1; transform: translateY(0); }
    }
  }
}

/* --- responsive ------------------------------------------------------------- */
/* Breakpoints match style.css -- 850, 760, 520 -- so this page reflows on the
   same beats as the rest of the site. .cards-three, .product-grid and the
   section paddings are already handled upstream; only what is new here needs
   a rule. */

@media (max-width: 850px) {
  .wd-hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .page-hero.wd-hero h1 { max-width: 20ch; }
  .wd-browser { transform: none; }
  .wd-mockup { max-width: 560px; }
  .wd-work { grid-template-columns: 1fr; }
  .wd-item.wd-wide .wd-shot { aspect-ratio: 16 / 10; }
  /* No iframe multiple here on purpose -- the container queries above key off
     the card's own width and have already handled this. */
  .wd-split { grid-template-columns: 1fr; }
  .wd-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wd-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 24px; }
  .wd-tiers { grid-template-columns: 1fr; max-width: 480px; margin-left: auto; margin-right: auto; }
  .wd-tier.wd-pick { transform: none; }
  .wd-tier.wd-pick:hover { transform: translateY(-4px); }
  .wd-badge { left: auto; right: 22px; transform: none; }
}

@media (max-width: 760px) {
  .wd-steps { grid-template-columns: 1fr; }
  .wd-panel { padding: 24px 22px; }
  .wd-tier { padding: 28px 22px 26px; }
  .wd-tier .wd-for { min-height: 0; }
  .wd-cta { padding: 54px 0; }
  /* style.css already turns .button-row into a full-width grid at this width. */
}

@media (max-width: 520px) {
  /* The phone would cover most of the browser at this width, and the point it
     makes is already being made by the page itself being on a phone. */
  .wd-phone { display: none; }
  .wd-mockup { padding-right: 0; padding-bottom: 0; }
  .wd-hero-price .wd-hp-num { font-size: 30px; }
}

/* --- motion off ------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .wd-page *,
  .wd-page *:before,
  .wd-page *:after { animation: none !important; transition: none !important; }
  .wd-page .wd-item:hover,
  .wd-page .wd-tier:hover { transform: none; }
  .wd-page .wd-tier.wd-pick { transform: translateY(-12px); }
  /* The cross-fading titles are stacked, so with the animation off both would
     render at once. Show the first only. */
  .wd-page .wd-m-track span { opacity: 0; }
  .wd-page .wd-m-track span:first-child { opacity: 1; }
}