/* Website development service page.
   The page shell, sub-nav, structure tabs, diagram frame and pricing blocks
   live in service-page.css under the .sv- prefix and are shared with the other
   service pages. What is left here is only what this page alone uses. */

/* ---------- Feature groups ---------- */

.wd-fgroup { margin-bottom: 56px; }
.wd-fgroup:last-of-type { margin-bottom: 40px; }

.wd-fgroup-head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  align-items: baseline;
  margin-bottom: 22px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.wd-fgroup-head h3 {
  margin: 0;
  font-size: 1.35rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.wd-fgroup-head p { margin: 0; color: var(--text-muted); font-size: 0.88rem; }

/* Flex rather than grid: two of the four groups hold four cards, which in a
   three-column grid leaves one card orphaned against the left edge. Wrapping
   flex centres the final row. */
.wd-fgrid { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }
.wd-fgrid > .wd-fcard { flex: 1 1 330px; max-width: 400px; }

.wd-fcard {
  padding: 24px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  transition: border-color 0.3s ease;
}
.wd-fcard:hover { border-color: var(--accent-1); }
.wd-fcard > i { color: var(--accent-1); font-size: 1.25rem; }

.wd-fcard h4 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 16px 0 12px;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 400;
  letter-spacing: 0.02em;
}

.wd-fnote {
  padding: 3px 8px;
  border: 1px solid var(--accent-2);
  color: var(--accent-2);
  font-family: var(--font-nav);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.wd-fwhat { margin: 0 0 12px; color: var(--text); font-size: 0.88rem; line-height: 1.6; }
.wd-fwhy {
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.85rem;
  line-height: 1.7;
}

.wd-fpointer {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  padding: 28px 32px;
  background: var(--bg-card);
  border: 1px dashed var(--border);
}
.wd-fpointer > i { color: var(--accent-1); font-size: 1.6rem; }
.wd-fpointer > div { flex: 1; min-width: 240px; }
.wd-fpointer h3 { margin: 0 0 6px; font-size: 1.25rem; }
.wd-fpointer p { margin: 0; color: var(--text-muted); font-size: 0.88rem; line-height: 1.6; }

.dg-cms { fill: rgba(255, 111, 60, 0.1); stroke: var(--accent-2); stroke-width: 1.2; }
.dg-cms-label {
  fill: var(--accent-2);
  font-family: var(--font-nav);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.dg-cms-sub { fill: var(--text-muted); font-family: var(--font-body); font-size: 9.5px; }

/* ---------- Customer journey ---------- */

.wd-journey-wrap {
  margin-bottom: 44px;
  padding: 32px 24px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  overflow-x: auto;
}

.wd-journey { display: block; width: 100%; min-width: 720px; height: auto; }

.jn-box { fill: #161616; stroke: #333; stroke-width: 1.2; }
.jn-primary { fill: #1F1420; stroke: var(--accent-1); stroke-width: 1.6; }

/* Connectors are solid: a horizontal line has no height for an
   objectBoundingBox gradient to resolve against, so it would not paint. */
.jn-path { fill: none; stroke: url(#jgrad); stroke-width: 1.6; }
.jn-return { stroke-dasharray: 6 5; opacity: 0.8; }

/* Small drawn glyphs, matching the anatomy diagrams rather than using
   text characters that render differently per platform. */
.jn-gl { fill: #262626; stroke: #444; stroke-width: 1.1; }
.jn-gl-on { fill: rgba(238, 62, 201, 0.18); stroke: var(--accent-1); }
.jn-gl-ln { fill: none; stroke: #666; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.jn-gl-ln-on { stroke: var(--accent-1); }
.jn-dot { fill: var(--accent-1); }

.jn-title {
  fill: var(--text);
  font-family: var(--font-nav);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.03em;
}
.jn-title-on { fill: var(--text); font-size: 14px; }
.jn-sub { fill: var(--text-muted); font-family: var(--font-body); font-size: 10.5px; }

.jn-return-label {
  fill: var(--text-muted);
  font-family: var(--font-nav);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.jn-return-sub { fill: #5E5E5E; font-family: var(--font-body); font-size: 10.5px; }

/* ---------- Two-column comparison ---------- */

.wd-split { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }

.wd-split-card { padding: 32px; background: var(--bg-card); border: 1px solid var(--border); }
.wd-split-card.is-primary { border-color: var(--accent-1); }
.wd-split-card h3 { margin: 0 0 14px; font-size: 1.3rem; }
.wd-split-card p { margin: 0; color: var(--text-muted); font-size: 0.92rem; line-height: 1.8; }

/* ---------- Real screenshots in a browser frame ---------- */


/* ---------- UX tabs ---------- */

.wd-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }

.wd-tab {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 18px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-family: var(--font-nav);
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: all 0.25s ease;
}
.wd-tab:hover { color: var(--text); border-color: #444; }
.wd-tab.is-active { color: var(--text); border-color: var(--accent-1); background: #1F1420; }
.wd-tab.is-active i { color: var(--accent-1); }

.wd-tabpanel { display: none; }
.wd-tabpanel.is-active { display: block; }
.wd-tabpanel ul { margin: 0; padding: 0; list-style: none; }
.wd-tabpanel li {
  padding: 18px 0 18px 24px;
  border-bottom: 1px solid var(--border);
  position: relative;
  color: var(--text-muted);
  line-height: 1.7;
}
.wd-tabpanel li::before {
  content: "";
  position: absolute;
  top: 28px;
  left: 0;
  width: 8px;
  height: 8px;
  background: var(--accent-gradient);
}
.wd-tabpanel li strong { color: var(--text); }

/* ---------- Included ---------- */

.wd-included { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }

.wd-inc-card { padding: 32px; background: var(--bg-card); border: 1px solid var(--border); }
.wd-inc-card > i { color: var(--accent-1); font-size: 1.6rem; }
.wd-inc-card h3 { margin: 18px 0 12px; font-size: 1.25rem; }
.wd-inc-card p { margin: 0; color: var(--text-muted); font-size: 0.9rem; line-height: 1.75; }

.wd-inc-caveat {
  margin-top: 16px !important;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: 0.82rem !important;
}
.wd-inc-caveat i { margin-right: 6px; color: var(--accent-2); }

/* ---------- Case studies ---------- */

.wd-cases { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }

.wd-case {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg-card);
  border: 1px solid var(--border);
  transition: border-color 0.3s ease;
}
.wd-case:hover { border-color: var(--accent-1); }

/* current_shot is a full-page screenshot, not a logo. Crop to the top of the
   page rather than shrinking the whole thing into a letterbox — overflow is
   hidden because an uncropped screenshot spills over the card body. */
.wd-case-shot {
  height: 240px;
  overflow: hidden;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.wd-case-shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.wd-case-body { padding: 28px; }
.wd-case-meta {
  margin: 0 0 10px;
  color: var(--text-muted);
  font-family: var(--font-nav);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.wd-case-body h3 { margin: 0 0 12px; font-size: 1.5rem; }
.wd-case-body p { margin: 0 0 18px; color: var(--text-muted); font-size: 0.9rem; line-height: 1.7; }
.wd-case-link {
  color: var(--accent-1);
  font-family: var(--font-nav);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-decoration: none;
  text-transform: uppercase;
}
.wd-case-link:hover { color: var(--accent-2); }

/* ---------- Process ---------- */

.wd-steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.wd-step { position: relative; padding: 0 20px 0 0; }
.wd-step::before {
  content: "";
  position: absolute;
  top: 13px;
  right: 0;
  left: 34px;
  height: 1px;
  background: var(--border);
}
.wd-step:last-child::before { display: none; }

.wd-step-n {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-bottom: 18px;
  background: var(--bg);
  border: 1px solid var(--accent-1);
  color: var(--accent-1);
  font-family: var(--font-nav);
  font-size: 0.85rem;
  font-weight: 700;
  position: relative;
  z-index: 1;
}

.wd-step h3 { margin: 0 0 10px; font-size: 1.1rem; }
.wd-step p { margin: 0; color: var(--text-muted); font-size: 0.85rem; line-height: 1.65; }

.wd-step-you {
  display: inline-block;
  margin-top: 12px;
  padding: 4px 10px;
  border: 1px solid var(--accent-2);
  color: var(--accent-2);
  font-family: var(--font-nav);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ---------- Responsive ---------- */

@media (max-width: 1024px) {
  .wd-split { grid-template-columns: 1fr; }
  .wd-steps { grid-template-columns: repeat(2, 1fr); gap: 32px 20px; }
  .wd-step::before { display: none; }
}

@media (max-width: 768px) {
  .wd-cases { grid-template-columns: 1fr; }
  .wd-steps { grid-template-columns: 1fr; }
}


/* ---------- "Shipped with every site" illustrations ---------- */

/* The three cards each open with a drawing, so they stretch to a common
   height and the SSL card no longer sits noticeably shorter. */
.wd-included { align-items: stretch; }
.wd-inc-card { display: flex; flex-direction: column; padding: 24px; }

.wd-inc-art {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 24px;
  background: var(--bg);
  border: 1px solid var(--border);
}

/* Shared illustration primitives */
.ia-line { fill: #2E2E2E; }
.ia-line-on { fill: rgba(238, 62, 201, 0.55); }
.ia-rule { stroke: var(--border); stroke-width: 1; }
.ia-dim { opacity: 0.4; }

.ia-caption {
  fill: #6A6A6A;
  font-family: var(--font-nav);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Mobile */
.ia-ghost { fill: none; stroke: #232323; stroke-width: 1; stroke-dasharray: 4 4; }
.ia-ghost-ln { stroke: #232323; stroke-width: 1; }
.ia-phone { fill: #1C1C1C; stroke: #3E3E3E; stroke-width: 1.4; }
.ia-screen { fill: #101010; }
.ia-notch { fill: #3E3E3E; }
.ia-navbar { fill: #1A1A1A; }
.ia-dot-on { fill: var(--accent-1); }
.ia-hero { fill: rgba(238, 62, 201, 0.16); }
.ia-card { fill: #1E1E1E; }
.ia-btn { fill: var(--accent-1); opacity: 0.8; }

/* Search listing */
.ia-field { fill: #161616; stroke: #333; stroke-width: 1.1; }
.ia-mag { fill: none; stroke: #666; stroke-width: 1.6; }
.ia-mag-ln { stroke: #666; stroke-width: 1.6; stroke-linecap: round; }
.ia-fav { fill: #2A2A2A; stroke: #3E3E3E; stroke-width: 1; }
.ia-url { fill: var(--text-muted); font-family: var(--font-body); font-size: 12.5px; }
.ia-title { fill: var(--accent-1); font-family: var(--font-body); font-size: 16px; font-weight: 600; }

/* Address bars */
.ia-tag {
  fill: var(--text-muted);
  font-family: var(--font-nav);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.ia-tag-on { fill: var(--accent-1); }

.ia-bar { fill: #161616; stroke: #333; stroke-width: 1.1; }
.ia-bar-on { stroke: var(--accent-1); }

.ia-lock-on { fill: none; stroke: var(--accent-1); stroke-width: 1.8; }
.ia-lock-body { fill: var(--accent-1); }
.ia-warn { fill: none; stroke: var(--accent-2); stroke-width: 1.5; stroke-linejoin: round; }
.ia-warn-ln { stroke: var(--accent-2); stroke-width: 1.5; stroke-linecap: round; }
.ia-warn-dot { fill: var(--accent-2); }

.ia-addr { fill: var(--text); font-family: var(--font-body); font-size: 13.5px; }
.ia-addr-off { fill: var(--text-muted); }
.ia-scheme-on { fill: var(--accent-1); }
.ia-scheme-off { fill: var(--accent-2); }

.ia-note { fill: var(--text-muted); font-family: var(--font-body); font-size: 12px; }
.ia-note-dim { fill: #5E5E5E; }

/* ---------- Feature illustrations ---------- */

.wd-fart {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 18px;
  background: var(--bg);
  border: 1px solid var(--border);
}

/* The icon moves inline with the title now that the drawing leads the card. */
.wd-fcard h4 > i { margin-right: 2px; color: var(--accent-1); font-size: 0.9rem; }

/* Shared furniture: grey shapes, one accent element per drawing. */
.fa-panel { fill: #141414; stroke: #2E2E2E; stroke-width: 1; }
.fa-fld   { fill: #191919; stroke: #313131; stroke-width: 1; }
.fa-bar   { fill: #232323; }
.fa-ln    { fill: #2E2E2E; }
.fa-ln-on { fill: rgba(238, 62, 201, 0.6); }
.fa-thumb { fill: #202020; stroke: #2E2E2E; stroke-width: 0.8; }
.fa-thumb-on { fill: rgba(238, 62, 201, 0.22); stroke: var(--accent-1); stroke-width: 1; }
.fa-cell  { fill: #242424; }
.fa-cell-on { fill: var(--accent-1); }
.fa-chip  { fill: #1E1E1E; stroke: #313131; stroke-width: 1; }
.fa-chip-on { fill: rgba(238, 62, 201, 0.2); stroke: var(--accent-1); stroke-width: 1; }
.fa-bub   { fill: #1C1C1C; stroke: #303030; stroke-width: 1; }
.fa-bub-on { fill: rgba(238, 62, 201, 0.14); stroke: var(--accent-1); stroke-width: 1; }
.fa-btn   { fill: var(--accent-1); opacity: 0.85; }
.fa-send  { fill: #0A0A0A; }
.fa-dot   { fill: #303030; }
.fa-dot-on { fill: var(--accent-1); }
.fa-phone { fill: #0A0A0A; }
.fa-arrow { fill: none; stroke: var(--accent-1); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.fa-fold  { fill: none; stroke: #3A3A3A; stroke-width: 1.2; }
.fa-lock  { fill: none; stroke: var(--accent-1); stroke-width: 2; }
.fa-lock-body { fill: var(--accent-1); }
.fa-star  { fill: var(--accent-1); }
.fa-star-off { fill: #2A2A2A; }
.fa-spark { fill: var(--accent-2); }
.fa-mag   { fill: none; stroke: #666; stroke-width: 1.6; }
.fa-mag-ln { stroke: #666; stroke-width: 1.6; stroke-linecap: round; }
.fa-screen { fill: #0E0E0E; stroke: #2A2A2A; stroke-width: 1; }
.fa-key   { fill: #232323; }
.fa-key-on { fill: var(--accent-1); }
.fa-axis  { stroke: #2E2E2E; stroke-width: 1; }
.fa-bar-v { fill: #262626; }
.fa-bar-on { fill: rgba(238, 62, 201, 0.55); }
.fa-trend { fill: none; stroke: var(--accent-2); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.fa-txt   { fill: var(--text-muted); font-family: var(--font-nav); font-size: 10px; font-weight: 600; }
.fa-txt-on { fill: var(--accent-1); font-family: var(--font-nav); font-size: 10px; font-weight: 600; }

/* ---------- What we need from you ---------- */

.wd-needgroup { margin-bottom: 56px; }

.wd-needgroup-head {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 24px;
  align-items: baseline;
  margin-bottom: 8px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.wd-needgroup-head h3 {
  margin: 0;
  font-size: 1.3rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.wd-needgroup-head p { margin: 0; color: var(--text-muted); font-size: 0.88rem; }

/* Each need is its own row: prose on the left, its drawing on the right, so a
   tall illustration never leaves a gap beside a short one. */
.wd-needrow {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 40px;
  align-items: center;
  padding: 32px 0;
  border-bottom: 1px solid var(--border);
}
.wd-needrow:last-child { border-bottom: 0; }

.wd-needrow-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.wd-needrow-head i {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--accent-1);
  font-size: 1rem;
}
.wd-needrow-head h4 { margin: 0; font-size: 1.25rem; }

.wd-need-what { margin: 0 0 12px; color: var(--text); font-size: 0.95rem; line-height: 1.65; }
.wd-need-why { margin: 0; color: var(--text-muted); font-size: 0.88rem; line-height: 1.8; }

.wd-needrow-art .wd-nart { margin-top: 0; }

/* Hosting's comparison spans the row rather than sitting in one half. */
.wd-needrow > .wd-hcompare { grid-column: 1 / -1; margin-top: 8px; }

@media (max-width: 900px) {
  .wd-needrow { grid-template-columns: 1fr; gap: 22px; }
}

/* The AI offer. Accent-bordered because it is the answer to the section's
   biggest objection, but it carries its condition in the same panel. */
.wd-ai {
  padding: 34px;
  background: var(--bg-card);
  border: 1px solid var(--accent-1);
}

.wd-ai-head { display: flex; gap: 20px; margin-bottom: 28px; }
.wd-ai-head > i { flex-shrink: 0; color: var(--accent-1); font-size: 1.7rem; }
.wd-ai-head h3 { margin: 0 0 10px; font-size: 1.45rem; }
.wd-ai-head p { margin: 0; color: var(--text-muted); font-size: 0.92rem; line-height: 1.8; }

.wd-ai-split { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 26px; }

.wd-ai-label {
  margin: 0 0 12px;
  color: var(--accent-1);
  font-family: var(--font-nav);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.wd-ai-label-warn { color: var(--accent-2); }

.wd-ai-split ul { margin: 0; padding: 0; list-style: none; }
.wd-ai-split li {
  position: relative;
  padding: 8px 0 8px 20px;
  color: var(--text-muted);
  font-size: 0.87rem;
  line-height: 1.55;
}
.wd-ai-can li::before {
  content: "";
  position: absolute;
  top: 16px;
  left: 0;
  width: 8px;
  height: 8px;
  background: var(--accent-1);
}
.wd-ai-cannot li::before {
  content: "";
  position: absolute;
  top: 16px;
  left: 0;
  width: 8px;
  height: 2px;
  background: var(--accent-2);
}

.wd-ai-note {
  margin: 0;
  padding: 20px 22px;
  background: var(--bg);
  border-left: 2px solid var(--accent-2);
  color: var(--text-muted);
  font-size: 0.89rem;
  line-height: 1.8;
}
.wd-ai-note i { margin-right: 8px; color: var(--accent-2); }
.wd-ai-note strong { color: var(--text); }

@media (max-width: 900px) {
  .wd-needs { grid-template-columns: 1fr; gap: 34px; }
  .wd-ai-split { grid-template-columns: 1fr; gap: 18px; }
  .wd-ai { padding: 24px; }
}

/* ---------- UX: advice beside a sketch of the page ---------- */

.wd-ux-split { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 40px; align-items: start; }

.wd-ux-points { margin: 0; padding: 0; list-style: none; counter-reset: none; }
.wd-ux-points li {
  display: flex;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
  line-height: 1.75;
}
.wd-ux-points li:last-child { border-bottom: 0; }
.wd-ux-points strong { color: var(--text); }

.wd-ux-n {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  margin-top: 2px;
  background: var(--accent-gradient);
  color: #0A0A0A;
  font-family: var(--font-nav);
  font-size: 0.78rem;
  font-weight: 700;
}

.wd-ux-wire { padding: 14px; background: var(--bg); border: 1px solid var(--border); }
.wd-wire { display: block; width: 100%; height: auto; }

.wf-frame { fill: #131313; stroke: #303030; stroke-width: 1.1; }
.wf-bar { fill: #202020; }
.wf-dot { fill: #454545; }
.wf-block { fill: #1D1D1D; }
.wf-ln { fill: #2E2E2E; }
.wf-img { fill: #1A1A1A; stroke: #2C2C2C; stroke-width: 1; }
.wf-img-ic { fill: #333; }
.wf-cell { fill: #1E1E1E; stroke: #2C2C2C; stroke-width: 0.8; }
.wf-chip { fill: #1E1E1E; stroke: #313131; stroke-width: 1; }
.wf-chip-on { fill: rgba(238, 62, 201, 0.2); stroke: var(--accent-1); stroke-width: 1; }
.wf-accent { fill: rgba(238, 62, 201, 0.13); stroke: var(--accent-1); stroke-width: 1; }
.wf-accent-ln { fill: rgba(238, 62, 201, 0.6); }

.wf-num-bg { fill: var(--accent-1); }
.wf-num { fill: #0A0A0A; font-family: var(--font-nav); font-size: 10px; font-weight: 700; }
.wf-num-ln { stroke: var(--accent-1); stroke-width: 1; stroke-dasharray: 2 2; }

.wf-label {
  fill: #6A6A6A;
  font-family: var(--font-nav);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.wf-caption {
  fill: #5A5A5A;
  font-family: var(--font-nav);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

@media (max-width: 1024px) {
  .wd-ux-split { grid-template-columns: 1fr; gap: 28px; }
  .wd-ux-wire { max-width: 420px; }
}

/* ---------- Illustrations inside "what we need from you" ---------- */

.wd-nart {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 16px;
  padding: 14px;
  background: var(--bg);
  border: 1px solid var(--border);
}
.wd-ai-art { margin-bottom: 24px; }
.wd-ai-art .wd-nart { margin-top: 0; background: var(--bg); }

/* Domain anatomy */
.nd-bar { fill: #161616; stroke: #333; stroke-width: 1.1; }
.nd-lock { fill: none; stroke: var(--accent-1); stroke-width: 2; }
.nd-lock-b { fill: var(--accent-1); }
.nd-url { font-family: var(--font-body); font-size: 17px; }
.nd-scheme { fill: #5E5E5E; }
.nd-name { fill: var(--accent-1); font-weight: 700; }
.nd-tld { fill: var(--accent-2); font-weight: 700; }
.nd-lead { fill: none; stroke: #3E3E3E; stroke-width: 1; stroke-dasharray: 3 3; }
.nd-label {
  fill: var(--accent-1);
  font-family: var(--font-nav);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.nd-label-2 { fill: var(--accent-2); }
.nd-note { fill: #6A6A6A; font-family: var(--font-body); font-size: 9.5px; }

/* Shared vs VPS */
.nh-title {
  fill: var(--text-muted);
  font-family: var(--font-nav);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.nh-title-on { fill: var(--accent-1); }
.nh-box { fill: #141414; stroke: #2E2E2E; stroke-width: 1.1; }
.nh-box-on { stroke: var(--accent-1); }
.nh-site { fill: #232323; }
.nh-site-on { fill: rgba(238, 62, 201, 0.25); stroke: var(--accent-1); stroke-width: 1; }
.nh-cap { fill: #6A6A6A; font-family: var(--font-body); font-size: 9.5px; }
.nh-price { fill: var(--text); font-family: var(--font-body); font-size: 11px; font-weight: 600; }
.nh-price-on { fill: var(--accent-1); }
.nh-for { fill: #6A6A6A; font-family: var(--font-body); font-size: 9.5px; }

/* Brief in, site out */
.nb-title {
  fill: var(--text-muted);
  font-family: var(--font-nav);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.nb-title-on { fill: var(--accent-1); }
.nb-brief { fill: #141414; stroke: #2E2E2E; stroke-width: 1; }
.nb-brief-on { stroke: var(--accent-1); }
.nb-ln { fill: #2C2C2C; }
.nb-ln-on { fill: rgba(238, 62, 201, 0.55); }
.nb-arrow { fill: none; stroke: #4A4A4A; stroke-width: 1.6; }
.nb-arrow-on { stroke: var(--accent-1); }
.nb-out { fill: #161616; stroke: #2E2E2E; stroke-width: 1; }
.nb-out-on { stroke: var(--accent-1); }
.nb-out-ln { fill: #2A2A2A; }
.nb-out-hero { fill: rgba(238, 62, 201, 0.2); }
.nb-out-btn { fill: var(--accent-1); }
.nb-rule { stroke: var(--border); stroke-width: 1; }
.nb-verdict {
  fill: #6A6A6A;
  font-family: var(--font-nav);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.nb-verdict-on { fill: var(--accent-1); }

/* Purpose: one goal, chosen */
.np-ring { fill: none; stroke: #2E2E2E; stroke-width: 1.2; }
.np-bull { fill: rgba(238, 62, 201, 0.3); stroke: var(--accent-1); stroke-width: 1.4; }
.np-arrow { fill: none; stroke: var(--accent-1); stroke-width: 1.8; }
.np-goal { fill: #161616; stroke: #2E2E2E; stroke-width: 1; }
.np-goal-on { fill: rgba(238, 62, 201, 0.12); stroke: var(--accent-1); stroke-width: 1.2; }
.np-dot { fill: #2E2E2E; }
.np-dot-on { fill: var(--accent-1); }
.np-txt { fill: var(--text-muted); font-family: var(--font-body); font-size: 10.5px; }
.np-txt-on { fill: var(--text); font-family: var(--font-body); font-size: 10.5px; font-weight: 600; }
.np-cap { fill: #6A6A6A; font-family: var(--font-body); font-size: 9.5px; }

/* Notes in, copy out */
.nt-src { fill: #161616; stroke: #2E2E2E; stroke-width: 1; }
.nt-play { fill: var(--accent-1); }
.nt-wave { fill: #4A4A4A; }
.nt-scribble { fill: none; stroke: #3A3A3A; stroke-width: 1.6; stroke-linecap: round; }
.nt-arrow { fill: none; stroke: var(--accent-1); stroke-width: 1.8; }
.nt-out { fill: #141414; stroke: var(--accent-1); stroke-width: 1.1; }
.nt-h { fill: rgba(238, 62, 201, 0.5); }
.nt-ln { fill: #2C2C2C; }
.nt-btn { fill: var(--accent-1); }
.nt-cap {
  fill: #6A6A6A;
  font-family: var(--font-nav);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.nt-cap-on { fill: var(--accent-1); }

/* Real work vs stock */
.nf-title {
  fill: var(--text-muted);
  font-family: var(--font-nav);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.nf-title-on { fill: var(--accent-1); }
.nf-shot { fill: #1A1A1A; stroke: #2A2A2A; stroke-width: 1; }
.nf-shot-on { fill: #1C1420; stroke: var(--accent-1); stroke-width: 1.2; }
.nf-sun { fill: var(--accent-2); }
.nf-hill { fill: rgba(238, 62, 201, 0.45); }
.nf-person { fill: #333; }
.nf-body { fill: #2C2C2C; }
.nf-div { stroke: var(--border); stroke-width: 1; }
.nf-verdict { fill: #6A6A6A; font-family: var(--font-body); font-size: 10px; }
.nf-verdict-on { fill: var(--text); font-weight: 600; }
.nf-cap { fill: #6A6A6A; font-family: var(--font-body); font-size: 9.5px; }
.nf-cap-dim { fill: #565656; }

/* Brand assets */
.nl-file { fill: #161616; stroke: #2E2E2E; stroke-width: 1; }
.nl-fold { fill: none; stroke: #3A3A3A; stroke-width: 1.2; }
.nl-ext { fill: var(--accent-1); font-family: var(--font-nav); font-size: 12px; font-weight: 700; }
.nl-lab { fill: #6A6A6A; font-family: var(--font-body); font-size: 9.5px; }
.nl-sw-1 { fill: var(--accent-1); }
.nl-sw-2 { fill: var(--accent-2); }
.nl-sw-3 { fill: #3A3A3A; }
.nl-sw-4 { fill: #F5F5F5; }
.nl-old { fill: #1C1C1C; stroke: #2E2E2E; stroke-width: 1; }

/* ---------- After launch ---------- */

.wd-after { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 32px 0 28px; }

.wd-after-card { padding: 32px; background: var(--bg-card); border: 1px solid var(--border); }
.wd-after-card.is-primary { border-color: var(--accent-1); }
.wd-after-card h3 { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; font-size: 1.35rem; }
.wd-after-card h3 i { color: var(--accent-1); font-size: 1.1rem; }
.wd-after-card > p { margin: 0 0 20px; color: var(--text-muted); font-size: 0.92rem; line-height: 1.8; }
.wd-after-card ul { margin: 0; padding: 0; list-style: none; }
.wd-after-card li {
  position: relative;
  padding: 10px 0 10px 20px;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.88rem;
  line-height: 1.6;
}
.wd-after-card li::before {
  content: "";
  position: absolute;
  top: 19px;
  left: 0;
  width: 7px;
  height: 7px;
  background: var(--accent-gradient);
}

.wd-after-note {
  margin: 0;
  padding: 20px 24px;
  background: var(--bg-card);
  border-left: 2px solid var(--accent-2);
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.8;
}
.wd-after-note i { margin-right: 8px; color: var(--accent-2); }
.wd-after-note strong { color: var(--text); }

/* Handover drawing */
.ah-pack { fill: var(--bg-card); stroke: var(--accent-1); stroke-width: 1.2; }
.ah-pack-t {
  fill: var(--text);
  font-family: var(--font-nav);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.ah-tick { fill: var(--accent-1); }
.ah-item { fill: var(--text-muted); font-family: var(--font-body); font-size: 10px; }
.ah-arm { fill: none; stroke: #3E3E3E; stroke-width: 1.4; }
.ah-arm-on { stroke: var(--accent-1); }
.ah-opt { fill: #161616; stroke: #2E2E2E; stroke-width: 1.1; }
.ah-opt-on { stroke: var(--accent-1); }
.ah-opt-t { fill: var(--text); font-family: var(--font-nav); font-size: 11px; font-weight: 600; }
.ah-opt-t-on { fill: var(--accent-1); }
.ah-opt-s { fill: #6A6A6A; font-family: var(--font-body); font-size: 9.5px; }
.ah-note {
  fill: #5E5E5E;
  font-family: var(--font-nav);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ---------- Email ---------- */

.wd-mail { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 32px; }

.wd-mail-card { padding: 32px; background: var(--bg-card); border: 1px solid var(--border); }
.wd-mail-card.is-primary { border-color: var(--accent-1); }
.wd-mail-card h3 { margin: 0 0 14px; font-size: 1.3rem; }
.wd-mail-card p { margin: 0 0 16px; color: var(--text-muted); font-size: 0.9rem; line-height: 1.8; }

.wd-mail-opts { margin: 0 0 16px; padding: 0; list-style: none; }
.wd-mail-opts li {
  padding: 10px 0;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.88rem;
  line-height: 1.6;
}
.wd-mail-opts strong { color: var(--text); }

.wd-mail-verdict {
  margin: 0 !important;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  color: var(--text) !important;
  font-size: 0.88rem !important;
}
.wd-mail-verdict-on { color: var(--accent-1) !important; }

/* Inbox drawing */
.em-title {
  fill: var(--text-muted);
  font-family: var(--font-nav);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.em-title-on { fill: var(--accent-1); }
.em-box { fill: #141414; stroke: #2E2E2E; stroke-width: 1.1; }
.em-box-on { stroke: var(--accent-1); }
.em-bar { fill: #1E1E1E; }
.em-bar-on { fill: rgba(238, 62, 201, 0.14); }
.em-folder { font-family: var(--font-nav); font-size: 9.5px; font-weight: 700; letter-spacing: 0.12em; }
.em-folder-warn { fill: var(--accent-2); }
.em-folder-on { fill: var(--accent-1); }
.em-msg { fill: #1C1C1C; }
.em-msg-on { fill: rgba(238, 62, 201, 0.1); }
.em-ln { fill: #2E2E2E; }
.em-ln-on { fill: rgba(238, 62, 201, 0.5); }
.em-warn { fill: var(--accent-2); }
.em-why { fill: var(--text-muted); font-family: var(--font-body); font-size: 9.5px; }
.em-why-dim { fill: #565656; }
.em-cap { fill: #6A6A6A; font-family: var(--font-body); font-size: 9.5px; }

@media (max-width: 900px) {
  .wd-after, .wd-mail { grid-template-columns: 1fr; }
}

/* ---------- Shared vs VPS, pros and cons ---------- */

.wd-hcompare { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 16px; }

.wd-hcol { padding: 20px; background: var(--bg); border: 1px solid var(--border); }
.wd-hcol.is-primary { border-color: var(--accent-1); }
.wd-hcol h5 {
  margin: 0 0 14px;
  font-family: var(--font-nav);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text);
}
.wd-hcol.is-primary h5 { color: var(--accent-1); }

.wd-hpros, .wd-hcons { margin: 0 0 12px; padding: 0; list-style: none; }
.wd-hpros li, .wd-hcons li {
  position: relative;
  padding: 7px 0 7px 20px;
  color: var(--text-muted);
  font-size: 0.83rem;
  line-height: 1.55;
}
.wd-hpros li::before {
  content: "+";
  position: absolute;
  left: 0;
  color: var(--accent-1);
  font-weight: 700;
}
.wd-hcons li::before {
  content: "\2212";
  position: absolute;
  left: 0;
  color: var(--accent-2);
  font-weight: 700;
}

.wd-hverdict {
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  color: var(--text);
  font-size: 0.84rem;
  line-height: 1.6;
}

@media (max-width: 900px) { .wd-hcompare { grid-template-columns: 1fr; } }