/* WelinkShop hard remediation v1: wide layout, seamless artwork, clean controls and stable docs. */

/* Business landing pages use the viewport instead of inheriting the theme's 1180/1240px ceiling. */
:root body.template-page .main-page > .container {
  width: min(calc(100% - clamp(32px, 5vw, 96px)), 1680px) !important;
  max-width: none !important;
  margin-inline: auto !important;
  padding-inline: 0 !important;
}

:root body.template-page .main-page .f-page-content,
:root body.template-page .main-page .ak-solution,
:root body.template-page .main-page .ws-cap-page,
:root body.template-page .main-page .ws-app-page,
:root body.template-page .main-page .ws-about-page {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
}

:root body.template-page .main-page .ak-solution,
:root body.template-page .main-page .ws-cap-page,
:root body.template-page .main-page .ws-app-page,
:root body.template-page .main-page .ws-about-page {
  padding-inline: 0 !important;
}

/* Every navigation landing hero remains full bleed; only its inner rhythm is constrained. */
:root body .ak-hero,
:root body .ws-cap-hero,
:root body .ws-app-hero,
:root body .ws-about-hero {
  width: 100vw !important;
  max-width: none !important;
  margin: 0 0 clamp(42px, 5vw, 72px) calc(50% - 50vw) !important;
  padding: clamp(54px, 5.2vw, 88px) max(32px, calc((100vw - 1680px) / 2)) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #f8fafd !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

/* Raster artwork fades well inside its canvas, so the original rectangular bitmap can never show. */
:root body .ws-page-hero-art {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  mix-blend-mode: multiply !important;
  -webkit-mask-image: radial-gradient(ellipse 62% 64% at 50% 50%, #000 0%, #000 40%, rgba(0,0,0,.9) 52%, rgba(0,0,0,.48) 64%, rgba(0,0,0,.12) 75%, transparent 86%) !important;
  mask-image: radial-gradient(ellipse 62% 64% at 50% 50%, #000 0%, #000 40%, rgba(0,0,0,.9) 52%, rgba(0,0,0,.48) 64%, rgba(0,0,0,.12) 75%, transparent 86%) !important;
}

:root body .ak-hero::after,
:root body .ws-cap-hero::after,
:root body .ws-app-hero::after,
:root body .ws-about-hero::after,
:root body.template-home .f-slider-video .f-slide::before {
  content: none !important;
  display: none !important;
}

:root body.template-home .f-slider-video .f-slide::after {
  border: 0 !important;
  box-shadow: none !important;
  mix-blend-mode: multiply !important;
  -webkit-mask-image: radial-gradient(ellipse 64% 66% at 50% 50%, #000 0%, #000 42%, rgba(0,0,0,.88) 54%, rgba(0,0,0,.4) 67%, rgba(0,0,0,.1) 78%, transparent 89%) !important;
  mask-image: radial-gradient(ellipse 64% 66% at 50% 50%, #000 0%, #000 42%, rgba(0,0,0,.88) 54%, rgba(0,0,0,.4) 67%, rgba(0,0,0,.1) 78%, transparent 89%) !important;
}

/* Image and copy are separate layers, never a single stuck-together block. */
:root body.template-home .f-services-style__wrapper > .f-services-style__image {
  margin-bottom: 0 !important;
  -webkit-mask-image: radial-gradient(ellipse 72% 72% at 50% 50%, #000 0%, #000 46%, rgba(0,0,0,.72) 63%, rgba(0,0,0,.2) 78%, transparent 92%) !important;
  mask-image: radial-gradient(ellipse 72% 72% at 50% 50%, #000 0%, #000 46%, rgba(0,0,0,.72) 63%, rgba(0,0,0,.2) 78%, transparent 92%) !important;
}

:root body.template-home .f-services-style__wrapper > .f-services-style__content {
  margin-top: 24px !important;
}

:root body.template-home .f-services-style__wrapper,
:root body.template-home .f-services-style__wrapper > .f-services-style__image,
:root body.template-home .f-services-style__wrapper > .f-services-style__content {
  background-color: transparent !important;
}

/* Interactive elements communicate through color and elevation, never underline-like pseudo elements. */
:root body .f-button::before,
:root body .f-button::after,
:root body .ak-btn::before,
:root body .ak-btn::after,
:root body .ws-app-page a::before,
:root body .ws-app-page a::after,
:root body .ws-cap-page a::before,
:root body .ws-cap-page a::after,
:root body .ws-about-page a::before,
:root body .ws-about-page a::after,
:root body .ak-solution a::before,
:root body .ak-solution a::after,
:root body .ws-docs-index a::before,
:root body .ws-docs-index a::after,
:root body .ws-docs-article a::before,
:root body .ws-docs-article a::after,
:root body .main-page .f-page-content a::before,
:root body .main-page .f-page-content a::after,
:root body header a::before,
:root body header a::after,
:root body footer a::before,
:root body footer a::after {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

:root body .ws-app-page a,
:root body .ws-app-page a:hover,
:root body .ws-app-page a:focus,
:root body .ws-app-page a:active,
:root body .ws-docs-index a,
:root body .ws-docs-article a,
:root body .main-page .f-page-content a,
:root body .f-button,
:root body .ak-btn {
  text-decoration: none !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

:root body .f-button,
:root body .ak-btn,
:root body .ws-app-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 46px !important;
  line-height: 1.2 !important;
  text-align: center !important;
}

/* Generated subbanners use native CSS shapes: no bitmap canvas and therefore no visible image edge. */
.ws-menu-subbanner {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background:
    radial-gradient(circle at 84% 28%, rgba(66,133,244,.15), transparent 24%),
    radial-gradient(circle at 72% 82%, rgba(52,168,83,.11), transparent 22%),
    linear-gradient(135deg, #f8fafd 0%, #fff 52%, #eef4ff 100%);
  border-bottom: 1px solid #e4e9f2;
  overflow: hidden;
}

.ws-menu-subbanner__inner {
  width: min(calc(100% - clamp(32px, 5vw, 96px)), 1680px);
  min-height: 290px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(360px, .88fr);
  align-items: center;
  gap: clamp(36px, 6vw, 96px);
  padding-block: clamp(50px, 5vw, 78px);
}

.ws-menu-subbanner__copy h1 {
  max-width: 820px;
  margin: 0;
  font-size: clamp(40px, 4.2vw, 64px);
  line-height: 1.1;
  letter-spacing: -.045em;
}

.ws-menu-subbanner__copy p {
  max-width: 720px;
  margin: 20px 0 0;
  color: #5f6368;
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.75;
}

.ws-menu-subbanner__art {
  position: relative;
  min-height: 180px;
}

.ws-menu-subbanner__art span {
  position: absolute;
  display: block;
  border: 1px solid rgba(26,115,232,.18);
  background: rgba(255,255,255,.88);
  box-shadow: 0 16px 46px rgba(32,33,36,.09);
}

.ws-menu-subbanner__art span:nth-child(1) { inset: 16px 10% 34px 18%; border-radius: 22px; }
.ws-menu-subbanner__art span:nth-child(2) { width: 42%; height: 46px; top: 0; left: 4%; border-radius: 14px; border-left: 5px solid #1a73e8; }
.ws-menu-subbanner__art span:nth-child(3) { width: 38%; height: 54px; right: 0; bottom: 2px; border-radius: 16px; border-left: 5px solid #34a853; }
.ws-menu-subbanner__art span:nth-child(4) { width: 46%; height: 10px; left: 31%; top: 70px; border: 0; border-radius: 8px; background: linear-gradient(90deg,#1a73e8 0 48%,#fbbc04 48% 68%,#ea4335 68%); box-shadow: none; }

/* The index and every article share one stable documentation shell. */
:root body .ws-docs-index,
:root body .ws-docs-article {
  padding-top: 0 !important;
  background: #fff !important;
}

:root body .ws-docs-index > .container-fluid,
:root body .ws-docs-article > .container-fluid {
  width: min(calc(100% - 64px), 1680px) !important;
  max-width: none !important;
  margin-inline: auto !important;
  padding-inline: 0 !important;
}

:root body .ws-docs-index > .f-page-header:not(:has(h1)),
:root body .ws-docs-index > .f-page-header.ws-subbanner-source,
:root body .ws-docs-article .f-article__header.ws-subbanner-source {
  display: none !important;
}

:root body .ws-docs-index .f-blog__wrapper {
  padding-top: 38px !important;
}

:root body .ws-docs-index .f-blog-sidebar,
:root body .ws-docs-article .f-blog-sidebar {
  width: 300px !important;
  flex: 0 0 300px !important;
  padding-right: 32px !important;
}

:root body .ws-docs-index .f-blog__wrapper,
:root body .ws-docs-article .f-article__wrapper {
  width: calc(100% - 300px) !important;
  padding-left: 44px !important;
}

:root body .ws-doc-nav__desktop .ws-doc-nav__groups,
:root body .ws-doc-nav__desktop .ws-doc-nav__links {
  display: grid !important;
}

:root body .ws-doc-nav__desktop .ws-doc-nav__groups { gap: 22px !important; }
:root body .ws-doc-nav__desktop .ws-doc-nav__links { gap: 5px !important; }

:root body .ws-doc-nav__desktop .ws-doc-nav__group,
:root body .ws-doc-nav__desktop .ws-doc-nav__item {
  margin: 0 !important;
}

:root body .ws-doc-nav__link {
  min-height: 36px !important;
  padding: 8px 10px !important;
  display: flex !important;
  align-items: center !important;
  line-height: 1.45 !important;
  box-sizing: border-box !important;
}

:root body .ws-doc-nav__group-title { margin: 0 0 8px !important; }
:root body .ws-docs-article .f-article__blog { display: none !important; }
:root body .ws-docs-article [class*="breadcrumb"] { display: none !important; }
:root body .ws-docs-article .f-article__header { margin-bottom: 42px !important; text-align: left !important; }
:root body .ws-docs-article .f-article__inner { width: 100% !important; max-width: 1120px !important; margin-left: 0 !important; }

@media screen and (max-width: 1023px) {
  :root body .ws-docs-index > .container-fluid,
  :root body .ws-docs-article > .container-fluid {
    width: min(calc(100% - 40px), 920px) !important;
  }

  :root body .ws-docs-index .f-blog__wrapper,
  :root body .ws-docs-article .f-article__wrapper {
    width: 100% !important;
    padding-left: 0 !important;
  }
}

@media screen and (max-width: 767px) {
  :root body.template-page .main-page > .container {
    width: calc(100% - 32px) !important;
  }

  :root body .ak-hero,
  :root body .ws-cap-hero,
  :root body .ws-app-hero,
  :root body .ws-about-hero {
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    padding: 42px 18px 48px !important;
  }

  :root body .ws-page-hero-art {
    margin-top: 30px !important;
    -webkit-mask-image: radial-gradient(ellipse 62% 62% at 50% 50%, #000 0%, #000 38%, rgba(0,0,0,.82) 50%, rgba(0,0,0,.35) 64%, rgba(0,0,0,.08) 76%, transparent 87%) !important;
    mask-image: radial-gradient(ellipse 62% 62% at 50% 50%, #000 0%, #000 38%, rgba(0,0,0,.82) 50%, rgba(0,0,0,.35) 64%, rgba(0,0,0,.08) 76%, transparent 87%) !important;
  }

  :root body.template-home .f-services-style__wrapper > .f-services-style__content { margin-top: 20px !important; }

  .ws-menu-subbanner__inner {
    width: calc(100% - 32px);
    min-height: 0;
    grid-template-columns: 1fr;
    gap: 26px;
    padding-block: 42px;
  }

  .ws-menu-subbanner__copy h1 { font-size: clamp(34px, 10vw, 44px); }
  .ws-menu-subbanner__copy p { margin-top: 14px; font-size: 16px; }
  .ws-menu-subbanner__art { min-height: 128px; }

  :root body .ws-docs-index > .container-fluid,
  :root body .ws-docs-article > .container-fluid {
    width: calc(100% - 32px) !important;
  }
}