/* ── Welcome page (how it works) ─────────────────────────────────────────────
   Same approach as the ContentForge landing page: a dark top section with the
   product in motion, then quiet light sections, one typeface, rectangular
   buttons, and orange only for the main action. Scoped to .wl so none of it
   touches the rest of the site. styles.css is still loaded for the cookie
   banner and review popup only. */

body.wl-body {
  margin: 0;
  background: #f3f2f7;
}
body.wl-body::before,
body.wl-body::after {
  display: none;
}

.wl {
  --wl-ink: #17161f;
  --wl-mute: #5e5c6e;
  --wl-paper: #f3f2f7;
  --wl-card: #ffffff;
  --wl-line: #dddbe6;
  --wl-night: #121119;
  --wl-night-line: #2a2836;
  --wl-night-text: #f2f1f7;
  --wl-night-mute: #a3a0b5;
  --wl-orange: #f97316;
  --wl-frame: #1c1b26;

  background: var(--wl-paper);
  color: var(--wl-ink);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 17px;
  line-height: 1.55;
}
.wl *,
.wl *::before,
.wl *::after {
  box-sizing: border-box;
}
.wl h1,
.wl h2,
.wl h3 {
  text-transform: none;
  margin-top: 0;
}
.wl p {
  text-transform: none;
}
.wl a {
  color: inherit;
}
.wl *:focus-visible {
  outline: 2px solid var(--wl-orange);
  outline-offset: 3px;
  box-shadow: none;
}

/* Buttons: rectangular, not pills */
.wl .wlGo,
.wl .wlQuiet {
  display: inline-block;
  border-radius: 10px;
  padding: 10px 16px;
  font: inherit;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
}
.wl .wlGo {
  background: var(--wl-orange);
  border: 1px solid var(--wl-orange);
  color: #1a0f05;
}
.wl .wlGo:hover {
  background: #ea6a10;
  border-color: #ea6a10;
}
.wl .wlLarge {
  padding: 14px 22px;
  font-size: 16px;
}
.wl .wlQuiet {
  background: transparent;
  border: 1px solid var(--wl-night-line);
  color: var(--wl-night-text);
}
.wl .wlQuiet:hover {
  background: rgba(255, 255, 255, 0.06);
}
.wl .wlQuietLight {
  border-color: var(--wl-line);
  color: var(--wl-ink);
}
.wl .wlQuietLight:hover {
  background: rgba(23, 22, 31, 0.05);
}

/* The cookie banner and review popup come from styles.css; keep them in the
   same square-cornered style as the rest of this page. */
body.wl-body .cookie-consent-banner,
body.wl-body .review-prompt-banner {
  border-radius: 12px;
}
body.wl-body .cookie-consent-banner .button,
body.wl-body .review-prompt-banner .button {
  border-radius: 10px;
}

/* Top bar */
.wlBar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px clamp(16px, 4vw, 48px);
  background: var(--wl-night);
  border-bottom: 1px solid var(--wl-night-line);
  color: var(--wl-night-text);
}
.wlBrand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
}
.wlBrand img {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  object-fit: cover;
}
.wlNav {
  display: flex;
  align-items: center;
  gap: 10px;
}
.wl .wlLink {
  color: var(--wl-night-mute);
  text-decoration: none;
  font-size: 15px;
  padding: 8px 10px;
}
.wl .wlLink:hover {
  color: var(--wl-night-text);
}

/* Hero */
.wlHero {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  padding: clamp(40px, 7vw, 96px) clamp(16px, 4vw, 48px) clamp(48px, 7vw, 104px);
  background: var(--wl-night);
  color: var(--wl-night-text);
}
.wl .wlHero h1 {
  margin: 0;
  max-width: 14ch;
  font-size: clamp(36px, 4.6vw, 60px);
  line-height: 1.04;
  letter-spacing: -0.032em;
  font-weight: 700;
  color: var(--wl-night-text);
}
.wlLede {
  margin: 22px 0 0;
  max-width: 46ch;
  color: var(--wl-night-mute);
  font-size: 18px;
}
.wlActions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}
.wlActionsCenter {
  justify-content: center;
}
.wlSmall {
  margin: 14px 0 0;
  font-size: 14px;
  color: var(--wl-night-mute);
}
@media (min-width: 861px) {
  .wlHero {
    min-height: calc(100vh - 69px);
    min-height: calc(100svh - 69px);
  }
}

/* Video frames */
.wlStage {
  margin: 0;
}
.wlFrame {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 14px;
  background: var(--wl-frame);
  border: 1px solid var(--wl-night-line);
}
.wlStage .wlFrame {
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}
.wlFrame .wlPlaceholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: clamp(40px, 7vw, 72px);
  font-weight: 700;
  letter-spacing: -0.04em;
  color: rgba(242, 241, 247, 0.09);
}
.wlFrame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--wl-frame);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.wlFrame.is-ready video {
  opacity: 1;
}

/* The four steps, as a quiet row under the hero video */
.wlSteps {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: wlstep;
}
.wlSteps li {
  counter-increment: wlstep;
  padding-top: 10px;
  border-top: 1px solid var(--wl-night-line);
  font-size: 13px;
  color: var(--wl-night-mute);
}
.wlSteps li::before {
  content: counter(wlstep) '  ';
  color: var(--wl-orange);
  font-weight: 700;
}
.wlSteps li:first-child {
  border-top-color: var(--wl-orange);
  color: var(--wl-night-text);
}

/* Feature rows: video and words side by side, alternating */
.wlFeatures {
  max-width: 1160px;
  margin: 0 auto;
  padding: clamp(56px, 8vw, 112px) clamp(16px, 4vw, 48px) 0;
  display: grid;
  gap: clamp(56px, 8vw, 104px);
  scroll-margin-top: 64px;
}
.wlFeature {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}
.wlFlip {
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}
.wlFlip .wlMedia {
  order: 2;
}
.wlMedia .wlFrame {
  border-color: var(--wl-line);
  border-radius: 12px;
}
.wlStep {
  display: block;
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 700;
  color: var(--wl-orange);
  letter-spacing: 0.02em;
}
.wl .wlText h2 {
  margin: 0;
  max-width: 18ch;
  font-size: clamp(26px, 2.6vw, 34px);
  line-height: 1.12;
  letter-spacing: -0.022em;
  font-weight: 700;
  color: var(--wl-ink);
}
.wlText p {
  margin: 16px 0 0;
  max-width: 44ch;
  color: var(--wl-mute);
}
.wlText ul {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}
.wlText li {
  padding: 9px 0;
  border-top: 1px solid var(--wl-line);
  font-size: 15px;
}
.wlText li:last-child {
  border-bottom: 1px solid var(--wl-line);
}
.wlText .wlActions {
  margin-top: 22px;
}

/* Also on the site */
.wlAlso {
  max-width: 1160px;
  margin: 0 auto;
  padding: clamp(64px, 9vw, 120px) clamp(16px, 4vw, 48px) 0;
}
.wl .wlAlso h2,
.wl .wlPlans h2,
.wl .wlClose h2 {
  margin: 0;
  font-size: clamp(26px, 2.6vw, 34px);
  line-height: 1.12;
  letter-spacing: -0.022em;
  font-weight: 700;
  color: var(--wl-ink);
}
.wlAlso dl {
  margin: 28px 0 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(20px, 3vw, 40px);
}
.wlAlso dl > div {
  border-top: 1px solid var(--wl-line);
  padding: 16px 0 22px;
}
.wlAlso dt {
  font-weight: 600;
}
.wlAlso dt a {
  text-decoration: none;
}
.wlAlso dt a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.wlAlso dd {
  margin: 4px 0 0;
  color: var(--wl-mute);
  font-size: 15px;
}

/* Plans */
.wlPlans {
  max-width: 880px;
  margin: 0 auto;
  padding: clamp(64px, 9vw, 120px) clamp(16px, 4vw, 48px) clamp(16px, 3vw, 40px);
  text-align: center;
}
.wlPlansLede {
  margin: 14px auto 0;
  max-width: 52ch;
  color: var(--wl-mute);
}
.wlTableWrap {
  margin-top: 32px;
  overflow-x: auto;
  text-align: left;
}
.wlTable {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--wl-card);
  border: 1px solid var(--wl-line);
  border-radius: 14px;
  font-size: 15px;
}
.wlTable th,
.wlTable td {
  padding: 14px 18px;
  border-top: 1px solid var(--wl-line);
  vertical-align: top;
}
.wlTable thead th {
  border-top: 0;
  padding-top: 20px;
  font-size: 13px;
  font-weight: 600;
  color: var(--wl-mute);
}
.wlTable tbody th {
  font-weight: 700;
  color: var(--wl-ink);
  width: 24%;
}
.wlTable td {
  color: var(--wl-mute);
}
.wlTable td:nth-child(2) {
  width: 26%;
  color: var(--wl-ink);
  font-weight: 600;
}
.wlPlansNote {
  margin: 14px 0 0;
  font-size: 14px;
  color: var(--wl-mute);
}
.wlPlansNote a {
  color: var(--wl-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Closing call to action, back on the dark background */
.wlClose {
  background: var(--wl-night);
  color: var(--wl-night-text);
  text-align: center;
  padding: clamp(56px, 8vw, 96px) clamp(16px, 4vw, 48px);
}
.wl .wlClose h2 {
  max-width: 20ch;
  margin: 0 auto;
  color: var(--wl-night-text);
}
.wlClose p {
  margin: 14px auto 0;
  max-width: 50ch;
  color: var(--wl-night-mute);
}

/* Footer */
.wlFoot {
  border-top: 1px solid var(--wl-line);
  padding: 28px clamp(16px, 4vw, 48px) 40px;
  font-size: 14px;
  color: var(--wl-mute);
}
.wlFoot p {
  margin: 0 0 8px;
  max-width: 1160px;
}
.wlFoot p:last-child {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
}
.wlFoot a {
  color: var(--wl-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Tablets and phones */
@media (max-width: 860px) {
  .wlHero,
  .wlFeature,
  .wlFlip {
    grid-template-columns: 1fr;
  }
  .wlFlip .wlMedia {
    order: 0;
  }
  .wlAlso dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .wl {
    font-size: 16px;
  }
  .wl .wlLink,
  .wlBrand span {
    display: none;
  }
  .wlBar {
    padding: 10px 16px;
  }
  .wl .wlGo,
  .wl .wlQuiet {
    padding: 9px 13px;
    font-size: 14px;
  }
  .wl .wlLarge {
    padding: 13px 18px;
    font-size: 16px;
  }
  .wlLede {
    font-size: 17px;
  }
  .wlSteps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .wlAlso dl {
    grid-template-columns: 1fr;
  }
  .wlTable th,
  .wlTable td {
    padding: 12px 10px;
    font-size: 14px;
  }
}

/* ── Websites page (reuses the rows above) ───────────────────────────────── */
.wlSitesIntro {
  background: var(--wl-night);
  color: var(--wl-night-text);
  padding: clamp(40px, 6vw, 80px) clamp(16px, 4vw, 48px) clamp(48px, 7vw, 88px);
}
.wlSitesIntroInner {
  max-width: 1160px;
  margin: 0 auto;
}
.wl .wlSitesIntro h1 {
  margin: 0;
  max-width: 26ch;
  font-size: clamp(34px, 4.6vw, 56px);
  line-height: 1.06;
  letter-spacing: -0.03em;
  font-weight: 700;
  text-transform: none;
  color: var(--wl-night-text);
}
.wlSitesIntro p {
  margin: 18px 0 0;
  max-width: 54ch;
  color: var(--wl-night-mute);
}
.wlFrame .wlPlaceholderName {
  font-size: clamp(18px, 2.4vw, 28px);
  font-weight: 700;
  letter-spacing: -0.01em;
  text-align: center;
  padding: 0 16px;
}
.wlAlsoLead {
  margin: 16px 0 0;
  max-width: 56ch;
  color: var(--wl-mute);
}
.wlAlso .wlActions {
  margin-top: 22px;
}
.wl .wlActions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.wlClose .wlActions {
  justify-content: center;
  margin-top: 24px;
}
.wlAlso {
  padding-bottom: clamp(56px, 8vw, 104px);
}
.wlFrame .wlPlaceholderName {
  color: rgba(242, 241, 247, 0.4);
}

/* Projects page: a logo in the frame instead of a video */
.wlFrame.wlFrameLogo {
  display: grid;
  place-items: center;
}
.wlFrame .wlLogo {
  max-width: 62%;
  max-height: 62%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.wlFeaturesLast {
  padding-bottom: clamp(56px, 8vw, 104px);
}
.wlText li strong {
  font-weight: 600;
}

/* Service pages: three ruled columns, a short note, a closing call to action */
.wlServices {
  max-width: 1160px;
  margin: 0 auto;
  padding: clamp(48px, 7vw, 88px) clamp(16px, 4vw, 48px) 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 48px);
}
.wlService {
  border-top: 2px solid var(--wl-ink);
  padding-top: 18px;
}
.wl .wlService h3 {
  margin: 0;
  font-size: 21px;
  line-height: 1.2;
  letter-spacing: -0.015em;
  font-weight: 700;
  color: var(--wl-ink);
  text-transform: none;
}
.wlService p {
  margin: 12px 0 0;
  color: var(--wl-mute);
}
.wlNote {
  max-width: 1160px;
  margin: 0 auto;
  padding: clamp(56px, 8vw, 96px) clamp(16px, 4vw, 48px) clamp(56px, 8vw, 104px);
}
.wl .wlNote h2 {
  margin: 0;
  font-size: clamp(24px, 2.4vw, 30px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--wl-ink);
}
.wlNote p {
  margin: 14px 0 0;
  max-width: 62ch;
  color: var(--wl-mute);
}
.wlClose .wlActions {
  margin-top: 0;
}
@media (max-width: 860px) {
  .wlServices {
    grid-template-columns: 1fr;
  }
}

/* Line the intro text up with the content below it */
.wlSitesIntro {
  padding-left: 0;
  padding-right: 0;
}
.wlSitesIntroInner {
  padding: 0 clamp(16px, 4vw, 48px);
}
.wlNote ~ .wlClose {
  padding-top: clamp(36px, 5vw, 56px);
  padding-bottom: clamp(36px, 5vw, 56px);
}

/* ── Case studies ────────────────────────────────────────────────────────── */
.wlCases {
  max-width: 1160px;
  margin: 0 auto;
  padding: clamp(48px, 7vw, 88px) clamp(16px, 4vw, 48px) clamp(56px, 8vw, 104px);
}
.wlCase {
  border-top: 2px solid var(--wl-ink);
  padding-top: 24px;
  max-width: 760px;
}
.wl .wlCase h2 {
  margin: 0;
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  font-weight: 700;
  color: var(--wl-ink);
}
.wlCase h2 a {
  text-decoration: none;
}
.wlCase h2 a:hover {
  color: var(--wl-orange);
}
.wlCase p {
  margin: 16px 0 0;
  color: var(--wl-mute);
}
.wlCase .wlCaseTags {
  font-size: 14px;
  font-weight: 600;
  color: var(--wl-ink);
}
.wlCase .wlActions {
  margin-top: 22px;
}

.wlBack {
  display: inline-block;
  margin-bottom: 22px;
  font-size: 14px;
  font-weight: 600;
  color: var(--wl-night-mute);
  text-decoration: none;
}
.wlBack:hover {
  color: var(--wl-night-text);
}
.wlSitesIntro .wlDate {
  margin-top: 20px;
  font-size: 14px;
  color: var(--wl-night-mute);
}

.wlArticle {
  max-width: 820px;
  margin: 0 auto;
  padding: clamp(40px, 6vw, 72px) clamp(16px, 4vw, 48px) clamp(56px, 8vw, 104px);
}
.wlFacts {
  margin: 0 0 clamp(40px, 6vw, 64px);
  border-top: 2px solid var(--wl-ink);
}
.wlFacts > div {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 24px;
  padding: 14px 0;
  border-bottom: 1px solid var(--wl-line);
}
.wlFacts dt {
  font-size: 14px;
  font-weight: 700;
  color: var(--wl-orange);
}
.wlFacts dd {
  margin: 0;
  font-size: 16px;
}
.wlFacts dd a,
.wlArticle p a {
  color: var(--wl-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.wlFacts dd a:hover,
.wlArticle p a:hover {
  color: var(--wl-orange);
}
.wlSection {
  margin-top: clamp(40px, 6vw, 64px);
}
.wl .wlSection h2 {
  margin: 0;
  font-size: clamp(26px, 2.6vw, 34px);
  line-height: 1.12;
  letter-spacing: -0.022em;
  font-weight: 700;
  color: var(--wl-ink);
}
.wlSection p {
  margin: 16px 0 0;
  max-width: 66ch;
  color: var(--wl-mute);
}
.wlSection strong {
  color: var(--wl-ink);
}
.wlList {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}
.wlList li {
  padding: 10px 0;
  border-top: 1px solid var(--wl-line);
  font-size: 16px;
}
.wlList li:last-child {
  border-bottom: 1px solid var(--wl-line);
}
.wlProblem {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--wl-line);
}
.wl .wlProblem h3 {
  margin: 0;
  font-size: 19px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  font-weight: 700;
  color: var(--wl-ink);
  text-transform: none;
}
.wlProblem p {
  margin-top: 8px;
}
@media (max-width: 640px) {
  .wlFacts > div {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}
.wlIntroNarrow .wlSitesIntroInner {
  max-width: 820px;
}

/* ── Help page ───────────────────────────────────────────────────────────── */
.wlHelp {
  max-width: 1160px;
  margin: 0 auto;
  padding: clamp(40px, 6vw, 72px) clamp(16px, 4vw, 48px) clamp(56px, 8vw, 104px);
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: clamp(32px, 6vw, 80px);
  align-items: start;
}
.wlHelpNav {
  position: sticky;
  top: 24px;
  display: flex;
  flex-direction: column;
  border-top: 2px solid var(--wl-ink);
}
.wlHelpNav span {
  padding: 12px 0 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--wl-orange);
}
.wlHelpNav a {
  padding: 8px 0;
  border-top: 1px solid var(--wl-line);
  font-size: 15px;
  text-decoration: none;
}
.wlHelpNav a:hover {
  color: var(--wl-orange);
}
.wlHelpBody {
  max-width: 760px;
}
.wlHelpSection {
  padding-top: 28px;
  margin-bottom: clamp(36px, 5vw, 56px);
  border-top: 1px solid var(--wl-line);
  scroll-margin-top: 24px;
}
.wlHelpSection:first-child {
  padding-top: 0;
  border-top: 0;
}
.wl .wlHelpSection h2 {
  margin: 0;
  font-size: clamp(24px, 2.4vw, 30px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--wl-ink);
}
.wlHelpSection p {
  margin: 14px 0 0;
  max-width: 66ch;
  color: var(--wl-mute);
}
.wlHelpSection p a {
  color: var(--wl-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.wlHelpSection p a:hover {
  color: var(--wl-orange);
}
.wlHelpSection p strong {
  color: var(--wl-ink);
}
.wlHelpList {
  margin: 22px 0 0;
}
.wlHelpList > div {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 24px;
  padding: 14px 0;
  border-top: 1px solid var(--wl-line);
}
.wlHelpList > div:last-child {
  border-bottom: 1px solid var(--wl-line);
}
.wlHelpList dt {
  font-weight: 700;
  color: var(--wl-ink);
}
.wlHelpList dd {
  margin: 0;
  color: var(--wl-mute);
  font-size: 16px;
}
@media (max-width: 860px) {
  .wlHelp {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .wlHelpNav {
    position: static;
  }
}
@media (max-width: 560px) {
  .wlHelpList > div {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

/* About: short prose sections */
.wlProse {
  max-width: 1160px;
  margin: 0 auto;
  padding: clamp(40px, 6vw, 72px) clamp(16px, 4vw, 48px) clamp(56px, 8vw, 104px);
}
.wlProse .wlHelpSection {
  max-width: 760px;
}

/* Ecosystem: a screenshot or cover in the frame */
.wlFrame.wlFrameShot {
  display: grid;
  place-items: center;
}
.wlFrame .wlShot {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Solutions: linked service columns, then numbered steps */
.wlServiceLink {
  display: block;
  text-decoration: none;
  color: inherit;
}
.wlServiceLink:hover h3 {
  color: var(--wl-orange);
}
.wlServices.wlSteps3 {
  padding-bottom: clamp(56px, 8vw, 104px);
}
.wlSteps3 .wlService {
  border-top-width: 1px;
  border-top-color: var(--wl-line);
}
.wlServices + .wlServices {
  padding-top: clamp(40px, 5vw, 64px);
}
.wlSteps3 .wlStep {
  margin-bottom: 8px;
}
.wlCloseSpaced {
  padding-top: clamp(40px, 6vw, 64px);
  padding-bottom: clamp(40px, 6vw, 64px);
}
.wl #how-it-works::before,
.wl #how-it-works::after {
  display: none;
}
.wl #how-it-works {
  background: none;
  border: 0;
  box-shadow: none;
  margin-top: 0;
}

/* About: portrait beside the "Who's behind it" text */
.wlProse .wlWho {
  max-width: 920px;
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
}
.wlPortrait {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  background: var(--wl-frame);
}
.wlWhoText {
  min-width: 0;
  max-width: 660px;
}
@media (max-width: 700px) {
  .wlProse .wlWho {
    grid-template-columns: 1fr;
  }
  .wlPortrait {
    width: 150px;
    height: 150px;
  }
}

/* ── Contact ─────────────────────────────────────────────────────────────── */
.wlContact {
  max-width: 1160px;
  margin: 0 auto;
  padding: clamp(40px, 6vw, 72px) clamp(16px, 4vw, 48px) clamp(56px, 8vw, 104px);
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: clamp(32px, 6vw, 80px);
  align-items: start;
}
.wlContactSide {
  border-top: 2px solid var(--wl-ink);
}
.wlContactItem {
  padding: 18px 0;
  border-bottom: 1px solid var(--wl-line);
}
.wl .wlContactItem h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--wl-orange);
  letter-spacing: 0.01em;
}
.wlContactItem p {
  margin: 8px 0 0;
  color: var(--wl-mute);
  font-size: 16px;
}
.wlContactItem a {
  color: var(--wl-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}
.wlContactItem a:hover {
  color: var(--wl-orange);
}
.wlContactForm {
  max-width: 720px;
  background: var(--wl-card);
  border: 1px solid var(--wl-line);
  border-radius: 12px;
  padding: clamp(20px, 3.5vw, 36px);
}
.wlForm {
  display: grid;
  gap: 20px;
}
.wlFormGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.wlForm label {
  display: grid;
  gap: 8px;
}
.wlForm label > span {
  font-size: 14px;
  font-weight: 600;
  color: var(--wl-ink);
}
.wlForm input,
.wlForm select,
.wlForm textarea {
  width: 100%;
  min-height: 46px;
  padding: 11px 14px;
  font: inherit;
  font-size: 16px;
  color: var(--wl-ink);
  background: #fff;
  border: 1px solid #c9c7d6;
  border-radius: 10px;
  box-shadow: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.wlForm textarea {
  min-height: 180px;
  resize: vertical;
  line-height: 1.5;
}
.wlForm input::placeholder,
.wlForm textarea::placeholder {
  color: #8a889a;
}
.wlForm input:hover,
.wlForm select:hover,
.wlForm textarea:hover {
  border-color: #9d9bb0;
}
.wlForm input:focus,
.wlForm select:focus,
.wlForm textarea:focus {
  outline: none;
  border-color: var(--wl-orange);
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.22);
}
.wlFormActions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
}
.wlFormActions .wlGo {
  cursor: pointer;
}
.wlFormActions .wlGo:disabled {
  opacity: 0.6;
  cursor: progress;
}
.wlTextBtn {
  padding: 4px 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 600;
  font-size: 15px;
  color: var(--wl-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.wlTextBtn:hover {
  color: var(--wl-orange);
}
.wlFormStatus {
  margin: 0;
  padding-top: 16px;
  border-top: 1px solid var(--wl-line);
  font-size: 15px;
  color: var(--wl-mute);
}
@media (max-width: 860px) {
  .wlContact {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}
@media (max-width: 560px) {
  .wlFormGrid {
    grid-template-columns: 1fr;
  }
}

/* ── Prices ──────────────────────────────────────────────────────────────── */
.wlIntroActions {
  margin-top: 28px;
}
.wlPriceNotes {
  max-width: 1160px;
  margin: 0 auto;
  padding: clamp(36px, 5vw, 56px) clamp(16px, 4vw, 48px) 0;
}
.wlPriceNotes p {
  margin: 0;
  max-width: 70ch;
  color: var(--wl-mute);
}
.wlPriceNotes p + p {
  margin-top: 10px;
}
.wlPriceNotes a {
  color: var(--wl-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.wlPriceNotes a:hover {
  color: var(--wl-orange);
}
.wlPlans2 {
  max-width: 1160px;
  margin: 0 auto;
  padding: clamp(32px, 5vw, 56px) clamp(16px, 4vw, 48px) 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 32px);
  align-items: stretch;
}
.wlPlan {
  display: flex;
  flex-direction: column;
  border-top: 2px solid var(--wl-ink);
  padding-top: 16px;
}
.wlPlanHi {
  border-top-color: var(--wl-orange);
  border-top-width: 4px;
  margin-top: -2px;
}
.wl .wlPlan h3 {
  margin: 0;
  font-size: 24px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--wl-ink);
  text-transform: none;
}
.wlPlan .wlStep {
  min-height: 1.3em;
  font-size: 13px;
}
.wlPlanDesc {
  margin: 10px 0 0;
  color: var(--wl-mute);
  font-size: 15px;
  min-height: 4.6em;
}
.wlPrice {
  margin: 18px 0 18px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.wlPrice strong {
  font-size: 40px;
  line-height: 1;
  letter-spacing: -0.03em;
  font-weight: 700;
  color: var(--wl-ink);
}
.wlPlanHi .wlPrice strong {
  color: var(--wl-orange);
}
.wlPrice span {
  font-size: 14px;
  color: var(--wl-mute);
}
.wl .wlWide {
  display: block;
  width: 100%;
  text-align: center;
  white-space: normal;
}
.wlPlan ul {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}
.wlPlan li {
  padding: 9px 0;
  border-top: 1px solid var(--wl-line);
  font-size: 14.5px;
}
.wlPlan li:last-child {
  border-bottom: 1px solid var(--wl-line);
}

.wlCompare {
  max-width: 1160px;
  margin: 0 auto;
  padding: clamp(56px, 8vw, 96px) clamp(16px, 4vw, 48px) 0;
}
.wl .wlCompare h2,
.wl .wlHow h2 {
  margin: 0;
  font-size: clamp(26px, 2.6vw, 34px);
  line-height: 1.12;
  letter-spacing: -0.022em;
  font-weight: 700;
  color: var(--wl-ink);
}
.wlTableWrap {
  margin-top: 22px;
  overflow-x: auto;
}
.wlCmp {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  border-top: 2px solid var(--wl-ink);
  font-size: 16px;
}
.wlCmp th,
.wlCmp td {
  padding: 13px 12px 13px 0;
  border-bottom: 1px solid var(--wl-line);
  text-align: left;
  vertical-align: top;
}
.wlCmp thead th {
  font-size: 14px;
  font-weight: 700;
  color: var(--wl-orange);
}
.wlCmp tbody th {
  font-weight: 500;
  color: var(--wl-ink);
}
.wlCmp td {
  color: var(--wl-mute);
}
.wlCmp td.yes {
  color: var(--wl-ink);
  font-weight: 700;
}
.wlCmp td.no {
  color: #a5a3b3;
}

.wlHow {
  max-width: 1160px;
  margin: 0 auto;
  padding: clamp(56px, 8vw, 96px) clamp(16px, 4vw, 48px) clamp(56px, 8vw, 104px);
}
.wlHow > p {
  margin: 14px 0 0;
  max-width: 62ch;
  color: var(--wl-mute);
}
.wlHow .wlStep {
  margin-bottom: 10px;
}
.wlServices.wlHowCols {
  padding: 28px 0 0;
}
@media (max-width: 1020px) {
  .wlPlans2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .wlPlanDesc {
    min-height: 0;
  }
}
@media (max-width: 600px) {
  .wlPlans2 {
    grid-template-columns: 1fr;
  }
}

/* Prices: the plans slide in, one after another, as they scroll into view.
   The hidden state only exists once the script has added .is-anim, so
   without JavaScript (or with reduced motion) everything just shows. */
.wlPlans2 {
  overflow-x: clip;
}
.wlPlans2.is-anim .wlPlan {
  opacity: 0;
  transform: translateX(56px);
  transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.22, 0.8, 0.3, 1);
  transition-delay: calc(var(--i, 0) * 110ms);
}
.wlPlans2.is-anim.is-in .wlPlan {
  opacity: 1;
  transform: none;
}
@media (max-width: 1020px) {
  .wlPlans2.is-anim .wlPlan {
    transform: translateY(32px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .wlPlans2.is-anim .wlPlan {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ── Legal pages (privacy, terms, cookies) ───────────────────────────────── */
.wlLegalHead .wlSitesIntroInner,
.wlLegal {
  max-width: 880px;
}
.wlLegalBrand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 26px;
  font-size: 15px;
  font-weight: 600;
  color: var(--wl-night-text);
  text-decoration: none;
}
.wlLegalBrand img {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  display: block;
}
.wlLegal {
  margin: 0 auto;
  padding: clamp(40px, 6vw, 72px) clamp(16px, 4vw, 48px) clamp(56px, 8vw, 96px);
}
.wl .wlLegal h2 {
  margin: clamp(36px, 5vw, 52px) 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--wl-line);
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.18;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--wl-ink);
}
.wl .wlLegal h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.wl .wlLegal h3 {
  margin: 26px 0 0;
  font-size: 17px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--wl-ink);
  text-transform: none;
}
.wlLegal p {
  margin: 12px 0 0;
  max-width: 70ch;
  color: var(--wl-mute);
}
.wlLegal ul {
  margin: 12px 0 0;
  padding-left: 22px;
  max-width: 70ch;
  color: var(--wl-mute);
}
.wlLegal li {
  margin: 4px 0;
  padding-left: 4px;
}
.wlLegal li::marker {
  color: var(--wl-orange);
}
.wlLegal strong {
  color: var(--wl-ink);
}
.wlLegal a {
  color: var(--wl-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.wlLegalFoot {
  padding: 28px 16px 36px;
  background: var(--wl-night);
  border-top: 1px solid var(--wl-night-line);
  text-align: center;
  font-size: 14px;
  color: var(--wl-night-mute);
}

/* ── Community (socials list) ────────────────────────────────────────────── */
.wlSocials {
  max-width: 1160px;
  margin: 0 auto;
  padding: clamp(16px, 3vw, 40px) clamp(16px, 4vw, 48px) clamp(48px, 7vw, 88px);
}
.wlSocial {
  display: grid;
  grid-template-columns: 48px 200px minmax(0, 1fr) 24px;
  gap: 8px 24px;
  align-items: center;
  padding: 22px 0;
  border-top: 1px solid var(--wl-line);
  color: var(--wl-ink);
  text-decoration: none;
}
.wlSocial:last-child {
  border-bottom: 1px solid var(--wl-line);
}
.wlSocialIcon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--wl-night);
}
.wlSocialName {
  display: grid;
  gap: 2px;
}
.wlSocialName strong {
  font-size: 19px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-weight: 700;
}
.wlSocialName em {
  font-style: normal;
  font-size: 14px;
  font-weight: 600;
  color: var(--wl-mute);
}
.wlSocialDesc {
  color: var(--wl-mute);
}
.wlSocialGo {
  font-size: 20px;
  color: var(--wl-ink);
  transition: transform 0.15s ease, color 0.15s ease;
}
.wlSocial:hover .wlSocialName strong,
.wlSocial:hover .wlSocialGo {
  color: var(--wl-orange);
}
.wlSocial:hover .wlSocialGo {
  transform: translateX(4px);
}
@media (max-width: 760px) {
  .wlSocial {
    grid-template-columns: 48px minmax(0, 1fr) 20px;
  }
  .wlSocialDesc {
    grid-column: 2 / 3;
    grid-row: 2;
  }
  .wlSocialGo {
    grid-column: 3;
    grid-row: 1;
  }
}

/* ── Log in / sign up ───────────────────────────────────────────────────── */
.wlAuth {
  display: flex;
  justify-content: center;
  padding: clamp(40px, 6vw, 80px) clamp(16px, 4vw, 48px) clamp(56px, 8vw, 104px);
}
.wl .wlAuthCard {
  width: 100%;
  max-width: 520px;
  padding: clamp(24px, 4vw, 40px);
  background: var(--wl-card);
  border: 1px solid var(--wl-line);
  border-radius: 12px;
  box-shadow: none;
  backdrop-filter: none;
}
.wl .wlAuthCard.auth-card-wide {
  max-width: 720px;
}
.wl .wlAuthCard h1 {
  margin: 0;
  font-size: clamp(28px, 3.2vw, 38px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  font-weight: 700;
  color: var(--wl-ink);
  text-transform: none;
}
.wl .wlAuthCard p,
.wl .wlAuthCard .auth-panel p {
  margin: 12px 0 0;
  color: var(--wl-mute);
  line-height: 1.55;
}
.wl .wlAuthCard #signedOutIntroText {
  margin: 12px 0 24px;
}
.wl .wlAuthCard .status-text {
  min-height: 0;
  padding: 0;
  background: none;
  border: 0;
  font-size: 15px;
  color: var(--wl-mute);
}
.wl .wlAuthCard #authStatus {
  margin: 0 0 20px;
}
.wl .wlGoogle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 12px 16px;
  font: inherit;
  font-weight: 600;
  font-size: 15px;
  color: var(--wl-ink);
  background: #fff;
  border: 1px solid #c9c7d6;
  border-radius: 10px;
  cursor: pointer;
}
.wl .wlGoogle:hover {
  background: var(--wl-paper);
  border-color: #9d9bb0;
}
.wl .wlGoogle:disabled {
  opacity: 0.6;
  cursor: progress;
}
.wl .wlAuthCard .auth-divider {
  margin: 22px 0;
  color: var(--wl-mute);
  font-size: 14px;
}
.wl .wlAuthCard .auth-divider::before,
.wl .wlAuthCard .auth-divider::after {
  background: var(--wl-line);
}
.wl .wlAuthCard .auth-tabs {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}
.wl .wlAuthCard .auth-tabs-sep {
  color: var(--wl-mute);
}
.wl .wlAuthCard .auth-tab {
  padding: 4px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--wl-mute);
  text-decoration-color: transparent;
}
.wl .wlAuthCard .auth-tab:hover {
  color: var(--wl-ink);
}
.wl .wlAuthCard .auth-tab.active {
  color: var(--wl-ink);
  text-decoration-color: var(--wl-orange);
  text-decoration-thickness: 2px;
}
.wl .wlAuthCard .wlForm {
  margin-top: 4px;
}
.wl .wlAuthCard .wlWide {
  width: 100%;
  text-align: center;
}
.wl .wlAuthActions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

/* ── Dashboard and documents ────────────────────────────────────────────── */
.wlIntroActions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}
.wl .wlSitesIntro .status-text {
  min-height: 0;
  margin: 18px 0 0;
  padding: 0;
  background: none;
  border: 0;
  font-size: 15px;
  color: var(--wl-night-mute);
}
.wlDash {
  max-width: 1160px;
  margin: 0 auto;
  padding: clamp(32px, 5vw, 56px) clamp(16px, 4vw, 48px) clamp(56px, 8vw, 104px);
}
.wlDashShell {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}
.wl .app-sidebar {
  position: sticky;
  top: 24px;
  display: flex;
  flex-direction: column;
  border-top: 2px solid var(--wl-ink);
}
.wl .app-nav-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 0;
  border: 0;
  border-top: 1px solid var(--wl-line);
  border-radius: 0;
  background: none;
  color: var(--wl-ink);
  font: inherit;
  font-weight: 600;
  font-size: 15px;
  text-align: left;
  cursor: pointer;
}
.wl .app-nav-item:first-child {
  border-top: 0;
}
.wl .app-nav-item:hover,
.wl .app-nav-item.active {
  color: var(--wl-orange);
}
.wl .app-nav-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 24px;
  padding: 0 7px;
  border-radius: 6px;
  background: #e7e5ef;
  color: var(--wl-ink);
  font-size: 13px;
  font-weight: 700;
}
.wl .app-nav-item.active .app-nav-count {
  background: var(--wl-orange);
  color: #1a0f05;
}
.wl .app-content {
  min-width: 0;
}
.wl .app-view {
  display: none;
}
.wl .app-view.active {
  display: block;
}
.wl .app-view-heading,
.wl .wlDocsHeading {
  margin: 0;
  font-size: clamp(24px, 2.4vw, 30px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--wl-ink);
  text-transform: none;
}
.wl .app-view-status,
.wl .wlDocsStatus {
  margin: 8px 0 0;
  color: var(--wl-mute);
}

/* Lists: ruled rows instead of cards */
.wl .build-list,
.wl .idea-list,
.wl .proposal-list,
.wl .document-list,
.wl .file-list {
  display: grid;
  gap: 0;
  margin-top: 24px;
  border-top: 1px solid var(--wl-line);
}
.wl .build-item,
.wl .idea-item,
.wl .proposal-item,
.wl .document-item,
.wl .file-item {
  padding: 22px 0;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--wl-line);
  border-radius: 0;
}
.wl .proposal-item,
.wl .document-item,
.wl .file-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
}
.wl .build-item h3,
.wl .idea-item h3,
.wl .proposal-item h3,
.wl .document-item h3,
.wl .file-item h3 {
  margin: 0 0 8px;
  font-size: 19px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  font-weight: 700;
  color: var(--wl-ink);
  text-transform: none;
}
.wl .build-meta,
.wl .idea-meta,
.wl .proposal-meta,
.wl .document-meta,
.wl .file-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  color: var(--wl-mute);
  font-size: 15px;
}
.wl .status-pill,
.wl .amount-pill {
  display: inline-flex;
  padding: 3px 9px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid;
}
.wl .status-pill {
  background: #fff3e8;
  border-color: #f4c9a0;
  color: #9a4a08;
}
.wl .amount-pill {
  background: #e8f6ee;
  border-color: #a9d9bd;
  color: #17663a;
}
.wl .build-note {
  margin: 12px 0 0;
  max-width: 66ch;
  color: var(--wl-mute);
}
.wl .build-actions,
.wl .idea-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}
.wl .idea-full {
  display: none;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--wl-line);
  white-space: pre-wrap;
  color: var(--wl-mute);
  font-size: 15px;
  line-height: 1.6;
}
.wl .idea-full.open {
  display: block;
}
.wl .empty-state {
  margin-top: 24px;
  padding: 20px 22px;
  background: #fff;
  border: 1px dashed #c9c7d6;
  border-radius: 10px;
  color: var(--wl-mute);
  line-height: 1.6;
}

/* Buttons the dashboard scripts create */
.wl .button {
  display: inline-block;
  min-height: 0;
  padding: 10px 16px;
  border: 1px solid #c9c7d6;
  border-radius: 10px;
  background: #fff;
  color: var(--wl-ink);
  font: inherit;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  text-transform: none;
  letter-spacing: 0;
  box-shadow: none;
  cursor: pointer;
  transform: none;
}
.wl .button:hover {
  background: rgba(23, 22, 31, 0.05);
  transform: none;
}
.wl .button.primary {
  background: var(--wl-orange);
  border-color: var(--wl-orange);
  color: #1a0f05;
}
.wl .button.primary:hover {
  background: #ea6a10;
  border-color: #ea6a10;
}
.wl .button.secondary,
.wl .button.ghost,
.wl .button.tertiary {
  background: transparent;
  border-color: #c9c7d6;
  color: var(--wl-ink);
}
.wl .button.danger {
  background: transparent;
  border-color: #e3b1ab;
  color: #b42318;
}
.wl .button.danger:hover {
  background: #fdf0ee;
}
.wl span.button.ghost {
  opacity: 0.6;
  cursor: default;
}
.wl span.button.ghost:hover {
  background: transparent;
}
.wl .button:disabled {
  opacity: 0.6;
  cursor: progress;
}

/* Messages */
.wl .messages-thread {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 440px;
  overflow-y: auto;
  margin: 24px 0;
  padding: 2px;
}
.wl .message-bubble {
  display: flex;
  flex-direction: column;
  max-width: 78%;
  padding: 12px 14px;
  border-radius: 10px;
  line-height: 1.5;
  font-size: 15px;
  white-space: pre-wrap;
}
.wl .message-bubble.client {
  align-self: flex-end;
  background: #fff3e8;
  border: 1px solid #f4c9a0;
}
.wl .message-bubble.admin {
  align-self: flex-start;
  background: #fff;
  border: 1px solid var(--wl-line);
}
.wl .message-sender {
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--wl-mute);
}
.wl .message-time {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--wl-mute);
}
.wl .message-form {
  display: flex;
  gap: 10px;
  align-items: flex-end;
}
.wl .message-form textarea {
  flex: 1;
  min-height: 46px;
  padding: 11px 14px;
  font: inherit;
  font-size: 16px;
  color: var(--wl-ink);
  background: #fff;
  border: 1px solid #c9c7d6;
  border-radius: 10px;
  box-shadow: none;
  resize: vertical;
}
.wl .message-form textarea:focus {
  outline: none;
  border-color: var(--wl-orange);
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.22);
}
.wl .upload-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--wl-line);
  border-radius: 10px;
}
.wl .upload-form input[type="file"] {
  flex: 1;
  min-width: 200px;
  font-size: 14px;
  color: var(--wl-mute);
}

/* Live preview of a build */
.wl .build-viewport {
  display: none;
  margin-top: 20px;
  overflow: hidden;
  border: 1px solid var(--wl-night-line);
  border-radius: 10px;
  background: #000;
}
.wl .build-viewport.open {
  display: block;
}
.wl .build-viewport-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  background: var(--wl-night);
  border-bottom: 1px solid var(--wl-night-line);
}
.wl .build-viewport-bar span {
  font-size: 14px;
  color: var(--wl-night-mute);
}
.wl .build-viewport-bar .button {
  padding: 6px 12px;
  background: transparent;
  border-color: var(--wl-night-line);
  color: var(--wl-night-text);
}
.wl .build-viewport-bar .button:hover {
  background: rgba(255, 255, 255, 0.06);
}
.wl .build-viewport iframe {
  display: block;
  width: 100%;
  height: 560px;
  border: 0;
}
.wl .build-viewport.fullscreen {
  position: fixed;
  inset: 16px;
  z-index: 999;
  border-radius: 12px;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6);
}
.wl .build-viewport.fullscreen iframe {
  height: calc(100vh - 32px - 45px);
}

@media (max-width: 860px) {
  .wlDashShell {
    grid-template-columns: 1fr;
  }
  .wl .app-sidebar {
    position: static;
    flex-direction: row;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    border-top: 0;
  }
  .wl .app-nav-item,
  .wl .app-nav-item:first-child {
    flex: 0 0 auto;
    gap: 12px;
    padding: 10px 14px;
    border: 1px solid var(--wl-line);
    border-radius: 8px;
    background: #fff;
    white-space: nowrap;
  }
  .wl .app-nav-item.active {
    border-color: var(--wl-orange);
  }
}
@media (max-width: 640px) {
  .wl .proposal-item,
  .wl .document-item,
  .wl .file-item {
    grid-template-columns: 1fr;
  }
  .wl .proposal-item .button,
  .wl .document-item .button,
  .wl .file-item .button {
    width: 100%;
  }
  .wl .build-viewport.fullscreen {
    inset: 0;
    border-radius: 0;
  }
  .wl .message-bubble {
    max-width: 92%;
  }
}
.wlSocialIcon {
  color: #fff;
}

/* Community: partner badges sitting between rows */
.wlBadges {
  padding: 36px 0 32px;
  text-align: center;
}
.wlBadgesLabel {
  margin: 0 0 16px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wl-mute, #6b6880);
}
.wlBadgeRow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 20px 28px;
}
.wlBadgeRow a {
  display: block;
  line-height: 0;
}
.wlBadgeRow img {
  display: block;
  height: 54px;
  width: auto;
  max-width: 100%;
}