/* WordPress integration fixes */
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; }
body.admin-bar #alw-site-nav { top: 32px; }
@media (max-width: 782px) { body.admin-bar #alw-site-nav { top: 46px; } }
#wpadminbar { position: fixed; }
.alwayly-exact-theme img { max-width: 100%; height: auto; }
/* If any Framer Motion SSR hidden styles remain, make real page content visible. Keep class-based hover menus unaffected. */
.alwayly-exact-theme [style="opacity:0"],
.alwayly-exact-theme [style^="opacity:0;transform"] { opacity: 1 !important; transform: none !important; }
/* Mobile menu state */
#alw-mobile-panel.alw-open { display: block !important; }
.alw-mobile-group.alw-open { display: block !important; }
.alw-mobile-group-toggle.alw-open span:last-child { transform: rotate(180deg); }
/* Ensure embedded PHP exact templates are not constrained by WP block layout CSS. */
.entry-content, .wp-site-blocks { max-width: none !important; }

/* Strict logo sizing + WP media integration */
#alw-site-nav .alw-site-logo, footer .alw-site-logo { height: 32px !important; width: auto !important; max-width: 220px !important; display:block !important; }
#alw-site-nav img { max-height: 40px; }
.alwayly-exact-theme img.alw-site-logo { height: 32px !important; }

/* Exact CMS managed version fixes */
#alw-site-nav .alw-site-logo, footer .alw-site-logo { height: 32px !important; width:auto !important; max-width:220px !important; }
@media (min-width:1024px){
  #alw-site-nav .lg\:flex, #alw-site-nav .xl\:flex { display:flex !important; }
  #alw-site-nav .lg\:hidden, #alw-site-nav .xl\:hidden { display:none !important; }
}
#alw-case-results { transition: opacity .2s ease; }
.alw-pagination a, .alw-blog-pagination a { text-decoration: none; }
.line-clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.line-clamp-3{display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}


/* Faithful portfolio cards: preserve original card proportions when WordPress content is dynamic. */
#alw-case-grid article { min-height: 100%; }
#alw-case-grid img { display:block; }
#alw-case-results .font-mono { white-space: nowrap; }

/* Case detail reads the original Figma CaseDetailPage Tailwind DOM. */
.alw-figma-case-rich > :first-child{margin-top:0}.alw-figma-case-rich > :last-child{margin-bottom:0}.alw-figma-case-rich p{margin-bottom:1em}.alw-figma-case-rich ul,.alw-figma-case-rich ol{padding-left:1.5em;margin:0 0 1em}.alw-figma-case-rich a{text-decoration:underline}


/* Case detail: display every metric card configured in the plugin, with no cap. */
.alw-case-detail-metrics-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
  width: 100%;
  max-width: 72rem;
  margin-left: auto;
  margin-right: auto;
}
.alw-case-detail-metrics-grid--one { max-width: 22rem; }
.alw-case-detail-metrics-grid--two { max-width: 48rem; }
@media (min-width: 768px) {
  .alw-case-detail-metrics-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .alw-case-detail-metrics-grid--many { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}


/* v2.4 — unified clickable taxonomy / technology tags on case detail. */
.alw-case-stack-tag { text-decoration: none !important; white-space: nowrap; }
.alw-case-stack-tag:focus-visible { outline: 3px solid rgba(37,99,235,.45); outline-offset: 3px; }


/* v2.5 linked case badges: preserve Figma appearance while making taxonomy chips interactive. */
.alw-case-detail a.alw-case-stack-tag,
.alw-case-detail a[aria-label^="按行业领域查看案例"],
.alw-case-detail a[aria-label^="按技术平台查看案例"] { text-decoration: none !important; }
.alw-case-detail a[aria-label^="按行业领域查看案例"]:focus-visible,
.alw-case-detail a[aria-label^="按技术平台查看案例"]:focus-visible { outline: 3px solid rgba(96,165,250,.8); outline-offset: 3px; }

/* Portfolio v2.7: preserve the original Figma link chips without underlines. */
#alw-case-results a, .alw-portfolio-page a { text-decoration: none; }
#alw-case-results [data-alw-case-filter].text-blue-600 { color: rgb(37 99 235) !important; font-weight: 700 !important; }


/* v3.0: Hero background and taxonomy-to-filter synchronization. */
.alw-portfolio-hero { isolation: isolate; background-color: #0f172a; }
.alw-portfolio-hero-media { background-repeat: no-repeat; background-position: center center; background-size: cover; }

/* v3.10.24 — Portfolio Hero uses a real editable img element. Give its
   page-specific sizing higher specificity than the theme-wide responsive
   img { height:auto } rule so the media covers the full Hero at every height. */
.alwayly-exact-theme .alw-portfolio-hero > img.alw-portfolio-hero-media {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center center;
}

/* About hero: keep the desktop presentation at a deliberate hero height while
   retaining content-driven height on phones and short landscape screens. */
@media (min-width: 1024px) and (min-height: 640px) {
  .alwayly-exact-theme .alw-about-hero {
    display: flex;
    align-items: center;
    min-height: min(42rem, calc(100vh - 5.75rem));
    box-sizing: border-box;
  }
  .alwayly-exact-theme .alw-about-hero > .container {
    width: 100%;
  }
}

/* About credentials: Lucide marks keep a crisp white stroke on blue. Shopify
   swaps to a purpose-built white-bag/blue-S mark so the badge has the same
   blue contrast interaction without flattening the brand mark. */
.alwayly-exact-theme .group:hover .alw-about-shopify-credential-icon {
  background: #2563eb;
  box-shadow: none;
}
.alwayly-exact-theme .alw-about-shopify-credential-logo {
  filter: none;
  transform: scale(1);
}
.alwayly-exact-theme .alw-about-shopify-credential-logo--default {
  opacity: 1;
}
.alwayly-exact-theme .alw-about-shopify-credential-logo--hover {
  opacity: 0;
}
.alwayly-exact-theme .group:hover .alw-about-shopify-credential-logo--default {
  opacity: 0;
  transform: scale(0.9);
}
.alwayly-exact-theme .group:hover .alw-about-shopify-credential-logo--hover {
  opacity: 1;
  transform: scale(1.08);
}
#alw-case-results { scroll-margin-top: 96px; }
[data-alw-case-filter].alw-case-filter-active { color: rgb(37 99 235) !important; font-weight: 700 !important; }

/* v3.0.1 — taxonomy links retain the exact Figma chip colors; only their href behavior changed. */
.alw-case-stack-tag,
#alw-case-results a[title^="按"],
.alw-portfolio-page a[title^="按"],
.alw-case-detail a[title^="按"] { text-decoration: none !important; }

/* v3.0.2 — taxonomy labels are links, but must remain pixel-identical to the original Figma spans. */
.alw-case-taxonomy-link { text-decoration: none !important; }
.alw-case-service-link { color: inherit !important; text-decoration: none !important; }
.alw-case-taxonomy-link:hover,
.alw-case-taxonomy-link:visited { text-decoration: none !important; }
/* Only controls in the three-row filter panel may ever receive the selected blue state. */
[data-alw-case-filter-control="1"].alw-case-filter-active { color: rgb(37 99 235) !important; font-weight: 700 !important; }


/* v3.0.4 — Figma Make card-tag hover behavior and one-way +N technology expansion. */
.alw-case-tech-toggle {
  border: 0;
  line-height: 1.25;
  cursor: pointer;
  font-family: inherit;
}
.alw-case-tech-toggle:focus-visible {
  outline: 2px solid rgb(37 99 235);
  outline-offset: 2px;
}
[data-alw-tech-extra="1"][hidden] { display: none !important; }

/* v3.0.5 — extra technology tags are direct siblings of the first three.
   No alternate wrapper or alternate colors may be applied after expansion. */
.alw-case-tech-stack > .alw-case-taxonomy-link.alw-case-tech-extra {
  text-decoration: none !important;
}


/* v3.0.7 — Case detail taxonomy links mirror Portfolio card hover states. */
.alw-case-detail-taxonomy-link { text-decoration: none !important; }
.alw-case-detail-taxonomy-link:hover,
.alw-case-detail-taxonomy-link:focus-visible {
  text-decoration: none !important;
}
.alw-case-detail-taxonomy-link:focus-visible {
  outline: 3px solid rgba(96,165,250,.82);
  outline-offset: 3px;
}


/* v3.0.8 — technology stack tags are display-only in list and detail pages. */
.alw-case-tech-tag {
  cursor: default;
  text-decoration: none !important;
}
.alw-case-tech-stack > .alw-case-tech-extra[hidden] { display: none !important; }


/* v3.1.1 — WordPress global image rules must not override Figma case-media sizing.
   Source images remain 4:3; Figma displays them in fixed card frames via object-cover. */
.alw-portfolio-page .alw-case-card-media > a,
.alw-portfolio-page .alw-case-featured-media > a {
  display: block;
  width: 100%;
  height: 100%;
}
.alw-portfolio-page .alw-case-card-media .alw-case-media-image,
.alw-portfolio-page .alw-case-featured-media .alw-case-media-image {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none;
  object-fit: cover;
  object-position: center center;
}
/* At desktop width the featured image column must stretch to the full card height.
   This removes the white gap caused by WP's global img { height:auto } reset. */
@media (min-width: 1024px) {
  .alw-portfolio-page .alw-case-featured-media {
    min-height: 100%;
  }
}


/* v3.1.2 — exact featured-card image frame.
   The portfolio root class is present in the PHP template and these fallback selectors
   deliberately work even if a child template is rendered outside that root. */
.alw-case-card-media > a,
.alw-case-featured-media > a {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}
.alw-case-card-media .alw-case-media-image,
.alw-case-featured-media .alw-case-media-image {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center center !important;
}
@media (min-width: 1024px) {
  .alw-case-featured-media {
    align-self: stretch !important;
    height: auto !important;
    min-height: 0 !important;
  }
}


/* v3.1.3 — related-case cards use the same fixed Figma media frame as portfolio cards.
   WordPress global img { height:auto } must never leave a blank strip below 4:3 source images. */
.alw-related-case-media {
  display: block;
  width: 100%;
  min-height: 12rem;
}
.alw-related-case-media .alw-related-case-media-image {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center center !important;
}

/* v3.2 — dynamic native WordPress Blog, using the original Figma BlogPage/BlogDetailPage DOM. */
#alw-blog-results { scroll-margin-top: 108px; transition: opacity .2s ease; }
#alw-blog-results.alw-blog-loading { opacity: .48; pointer-events: none; }
.alw-blog-page a, .alw-blog-detail a { text-decoration: none; }
.alw-blog-card .contents { display: flex; flex-direction: column; height: 100%; color: inherit; }
.alw-blog-content > :first-child { margin-top: 0; }
.alw-blog-content > p:first-child { font-size: 1.25rem; line-height: 1.75; color: rgb(51 65 85); font-weight: 500; margin-bottom: 2rem; }
.alw-blog-content h2 { font-size: 1.875rem; line-height: 1.25; font-weight: 700; color: rgb(15 23 42); margin-top: 3rem; margin-bottom: 1.5rem; }
.alw-blog-content h3 { font-size: 1.5rem; line-height: 1.35; font-weight: 700; color: rgb(15 23 42); margin-top: 2.5rem; margin-bottom: 1rem; }
.alw-blog-content p { color: rgb(71 85 105); line-height: 1.8; margin: 0 0 1.25rem; }
.alw-blog-content ul, .alw-blog-content ol { color: rgb(71 85 105); line-height: 1.8; margin: 0 0 1.25rem; padding-left: 1.5rem; list-style-position: outside; }
.alw-blog-content ul { list-style-type: disc; }
.alw-blog-content ol { list-style-type: decimal; }
.alw-blog-content li { display: list-item; margin-bottom: .5rem; }
.alw-blog-content blockquote { border-left: 4px solid rgb(37 99 235); padding: 1rem 1rem 1rem 1.5rem; margin: 2rem 0; font-style: italic; color: rgb(51 65 85); background: rgb(248 250 252); border-radius: 0 .75rem .75rem 0; }
.alw-blog-content img { border-radius: 1rem; height: auto; max-width: 100%; margin: 2rem auto; }
.alw-blog-content a { color: rgb(37 99 235); text-decoration: underline; }
@media (max-width: 767px) { .alw-blog-content > p:first-child { font-size: 1.125rem; } .alw-blog-content h2 { font-size: 1.625rem; } }
/* Blog v3.2.1 — selected category must remain white-on-dark after AJAX replacement. */
#alw-blog-filter-controls a.is-active,
#alw-blog-filter-controls a.is-active:visited,
#alw-blog-filter-controls a.is-active:hover,
#alw-blog-filter-controls a.is-active:focus {
  color: #fff !important;
  background-color: #0f172a !important;
  border-color: #0f172a !important;
}
#alw-blog-filter-controls a.is-active svg { color: currentColor !important; }

/* Blog category state must remain white on dark selected pill. */
#alw-blog-filter-controls a.is-active,
#alw-blog-filter-controls a.is-active:visited,
#alw-blog-filter-controls a.is-active:hover { color: #fff !important; background-color: #0f172a !important; border-color: #0f172a !important; }


/* Blog v3.2.3 — search is an autocomplete suggestion list, not live list filtering. */
.alw-blog-search-wrap { z-index: 30; overflow: visible; }
#alw-blog-search-suggestions {
  position: absolute;
  top: calc(100% + .5rem);
  left: 0;
  right: 0;
  z-index: 60;
  margin-top: 0;
  overflow: hidden;
  border: 1px solid rgb(226 232 240);
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 18px 40px rgba(15, 23, 42, .14);
  text-align: left;
}
#alw-blog-search-suggestions.hidden { display: none; }
.alw-blog-search-suggestion { display:block; padding: .9rem 1rem; border-bottom:1px solid rgb(241 245 249); color: rgb(15 23 42); text-decoration:none; transition: background-color .18s ease; }
.alw-blog-search-suggestion:last-child { border-bottom:0; }
.alw-blog-search-suggestion:hover { background: rgb(248 250 252); }
.alw-blog-search-suggestion-meta { color: rgb(37 99 235); font-size:.7rem; font-weight:700; margin-bottom:.22rem; }
.alw-blog-search-suggestion-title { font-size:.95rem; font-weight:700; line-height:1.35; }
.alw-blog-search-suggestion-excerpt { color:rgb(100 116 139); font-size:.78rem; line-height:1.45; margin-top:.25rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.alw-blog-search-empty { padding:1rem; text-align:center; color:rgb(100 116 139); font-size:.9rem; }


/* Blog v3.2.4 — keep autocomplete directly below the input and native WordPress tag archive links styled as Figma pills. */
.alw-blog-search-wrap #alw-blog-search-suggestions { transform: none; }
.alw-blog-detail a[rel="tag"] { text-decoration: none; display: inline-flex; align-items: center; }
.alw-blog-detail a[rel="tag"]:focus-visible { outline: 2px solid rgb(59 130 246); outline-offset: 2px; }


/* Blog v3.2.6 — keep the fixed global header above the autocomplete stack.
   Previous v3.2.5 assigned the Blog hero the same z-index as the header (50),
   so the hero was painted after the header and covered it until scrolling. */
#alw-site-nav {
  z-index: 1000 !important;
  isolation: isolate;
}
.alw-blog-hero { overflow: visible !important; position: relative; z-index: 45 !important; }
.alw-blog-hero > .container { z-index: 46 !important; }
.alw-blog-search-wrap { z-index: 47 !important; }
#alw-blog-search-suggestions {
  top: calc(100% - 1px) !important;
  margin-top: 0 !important;
  z-index: 48 !important;
  border-radius: 0 0 1rem 1rem !important;
}


/* Alwayly Newsletter integration: retain the existing Figma Blog CTA layout. */
.alw-blog-page .alw-blog-subscribe-form { width:100%; }
.alw-blog-page .alw-blog-subscribe-form .alwayly-newsletter-form__row { display:contents; }
.alw-blog-page .alw-blog-subscribe-form .alwayly-newsletter-form__email { min-width:0; }
.alw-blog-page .alw-blog-subscribe-form .alwayly-newsletter-form__submit { border:0; }
.alw-blog-page .alw-blog-subscribe-response { min-height:1.35em; margin-top:.7rem; color:rgb(219 234 254); font-size:.8rem; line-height:1.35; }
.alw-blog-page .alw-blog-subscribe-response.is-success { color:rgb(220 252 231); }
.alw-blog-page .alw-blog-subscribe-response.is-error { color:rgb(254 226 226); }


/* Blog / Newsletter v3.2.9 — compact subscription notes and use the same form on article detail pages. */
.alw-blog-subscribe-section .alw-blog-subscribe-form { width: 100%; text-align: left; }
.alw-blog-subscribe-section .alw-blog-subscribe-form .alwayly-newsletter-form__row { display: contents; }
.alw-blog-subscribe-section .alw-blog-subscribe-row { align-items: stretch; }
.alw-blog-subscribe-section .alwayly-newsletter-form__email { min-width: 0; }
.alw-blog-subscribe-section .alwayly-newsletter-form__submit {
  border: 0;
  background: #fff;
  color: rgb(37 99 235);
  transition: background-color .3s ease, color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.alw-blog-subscribe-section .alwayly-newsletter-form__submit:hover:not(:disabled) {
  background: rgb(239 246 255);
  color: rgb(29 78 216);
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(15, 23, 42, .18);
}
.alw-blog-subscribe-section .alwayly-newsletter-form__submit:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}
.alw-blog-subscribe-section .alw-blog-subscribe-notes {
  width: 100%;
  box-sizing: border-box;
  padding-left: 1.5rem;
  margin-top: .5rem;
  text-align: left;
}
.alw-blog-subscribe-section .alw-blog-subscribe-response {
  min-height: 0;
  margin: 0;
  color: rgb(219 234 254);
  font-size: .8rem;
  line-height: 1.45;
}
.alw-blog-subscribe-section .alw-blog-subscribe-response:empty { display: none; }
.alw-blog-subscribe-section .alw-blog-subscribe-response.is-success { color: rgb(220 252 231); }
.alw-blog-subscribe-section .alw-blog-subscribe-response.is-error { color: rgb(254 226 226); }
.alw-blog-subscribe-section .alw-blog-subscribe-privacy {
  margin: .3rem 0 0;
  line-height: 1.45;
}
@media (max-width: 639px) {
  .alw-blog-subscribe-section .alw-blog-subscribe-notes { padding-left: 1rem; }
}

/* Newsletter public result page: equal vertical breathing room above and below the result card. */
.alwayly-newsletter-result-page {
  max-width: 760px !important;
  margin: 0 auto !important;
  padding: 56px 24px !important;
  box-sizing: border-box;
}
.alwayly-newsletter-result-page > div { margin: 0 !important; }
@media (max-width: 639px) {
  .alwayly-newsletter-result-page { padding: 32px 16px !important; }
}


/* v3.3.0 — newsletter result pages must account for the fixed 64px site header.
   The newsletter plugin writes an inline 80px margin. On a fixed header this
   is painted underneath the header, making the upper gap appear to be zero.
   Use equal visible spacing: 56px below the nav and 56px above the footer. */
.alwayly-newsletter-result-page {
  --alw-newsletter-visible-gap: 56px;
  --alw-fixed-nav-height: 64px;
  max-width: 760px !important;
  margin: 0 auto !important;
  padding: calc(var(--alw-fixed-nav-height) + var(--alw-newsletter-visible-gap)) 24px var(--alw-newsletter-visible-gap) !important;
  box-sizing: border-box !important;
}
.alwayly-newsletter-result-page > div { margin: 0 !important; }
@media (max-width: 639px) {
  .alwayly-newsletter-result-page {
    --alw-newsletter-visible-gap: 32px;
    padding: calc(var(--alw-fixed-nav-height) + var(--alw-newsletter-visible-gap)) 16px var(--alw-newsletter-visible-gap) !important;
  }
}

/* The article-detail newsletter is intentionally placed after the recommendation
   section and immediately before the global footer. Keep its outer spacing
   consistent with the Blog list CTA. */
.alw-blog-detail > .alw-blog-subscribe-section { margin-top: 0; }


/* v3.3.2 — newsletter confirmation / unsubscribe pages.
   The global navigation remains fixed exactly like every other page. Only the
   result main receives top padding for the fixed 64px header plus a visible
   56px gap, and equal 56px space is retained above the footer. */
html.alw-newsletter-public-result-html {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
body.alw-newsletter-public-result {
  margin: 0 !important;
  padding: 0 !important;
}
body.alw-newsletter-public-result #wpadminbar { display: none !important; }
body.alw-newsletter-public-result #alw-site-nav,
body.alw-newsletter-public-result.admin-bar #alw-site-nav {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1000 !important;
}
body.alw-newsletter-public-result .alwayly-newsletter-result-page {
  max-width: 760px !important;
  margin: 0 auto !important;
  padding: 120px 24px 56px !important;
  box-sizing: border-box !important;
}
body.alw-newsletter-public-result .alwayly-newsletter-result-page > div {
  margin: 0 !important;
}
@media (max-width: 639px) {
  body.alw-newsletter-public-result .alwayly-newsletter-result-page {
    padding: 96px 16px 32px !important;
  }
}

/* Blog detail: keep the subscription CTA close to the footer — half of the
   former 48px footer-side spacing, without changing the Blog list CTA. */
.alw-blog-detail > .alw-blog-subscribe-section {
  padding-bottom: 1.5rem !important;
}


/* v3.3.3 — Alwayly Consultation Form Manager bridge.
   Home uses compact and Contact uses detailed. The plugin owns submissions;
   the theme only removes its nested card so it retains the original Figma shell. */
html { scroll-behavior: smooth; }
.alw-home-consultation-trigger { text-decoration: none !important; }
.alw-cfm-plugin-missing {
  border: 1px solid rgb(254 205 211);
  border-radius: 1rem;
  padding: 1rem;
  color: rgb(190 24 93);
  background: rgb(255 241 242);
  font-size: .875rem;
}
.alw-cfm-embed .alwayly-cfm-form {
  padding: 0;
  color: rgb(15 23 42);
}
.alw-cfm-embed .alwayly-cfm-form__inner {
  max-width: none;
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.alw-cfm-embed .alwayly-cfm-form__header {
  margin: 0 0 2rem;
}
.alw-cfm-embed .alwayly-cfm-form__header h2,
.alw-cfm-embed .alwayly-cfm-form--compact .alwayly-cfm-form__header h2 {
  color: rgb(15 23 42);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0;
}
.alw-cfm-embed .alwayly-cfm-form__header p {
  margin: .5rem 0 0;
  color: rgb(100 116 139);
  font-size: .875rem;
  line-height: 1.5;
}
.alw-cfm-embed .alwayly-cfm-form__grid { gap: 1.5rem; }
.alw-cfm-embed .alwayly-cfm-form__field label {
  margin-bottom: .5rem;
  color: rgb(51 65 85);
  font-size: .875rem;
  font-weight: 700;
}
.alw-cfm-embed .alwayly-cfm-form__field input,
.alw-cfm-embed .alwayly-cfm-form__field select,
.alw-cfm-embed .alwayly-cfm-form__field textarea {
  border-color: rgb(226 232 240);
  border-radius: .75rem;
  background: rgb(248 250 252);
  color: rgb(15 23 42);
  font-size: 1rem;
}
.alw-cfm-embed .alwayly-cfm-form__field input,
.alw-cfm-embed .alwayly-cfm-form__field select {
  height: 3rem;
  padding: 0 1rem;
}
.alw-cfm-embed .alwayly-cfm-form__field textarea {
  min-height: 8.5rem;
  padding: .75rem 1rem;
  resize: none;
}
.alw-cfm-embed--home .alwayly-cfm-form__field textarea { min-height: 7.5rem; }
.alw-cfm-embed .alwayly-cfm-form__field input:focus,
.alw-cfm-embed .alwayly-cfm-form__field select:focus,
.alw-cfm-embed .alwayly-cfm-form__field textarea:focus {
  border-color: rgb(59 130 246);
  background: #fff;
  box-shadow: 0 0 0 2px rgba(59,130,246,.2);
}
.alw-cfm-embed .alwayly-cfm-form__upload {
  margin: .75rem 0 1.25rem;
  color: rgb(100 116 139);
}
.alw-cfm-embed .alwayly-cfm-form__upload label {
  color: inherit;
  font-size: .875rem;
  font-weight: 500;
}
.alw-cfm-embed .alwayly-cfm-form__upload label:hover { color: rgb(37 99 235); }
.alw-cfm-embed .alwayly-cfm-form__upload small { display: none; }
.alw-cfm-embed .alwayly-cfm-form__paperclip {
  width: 1rem;
  height: 1rem;
  font-size: 0;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23000' stroke-width='2'%3E%3Cpath d='M13.234 20.252 21 12.3'/%3E%3Cpath d='m16 6-8.414 8.586a2 2 0 0 0 0 2.828 2 2 0 0 0 2.828 0l8.414-8.586a4 4 0 0 0 0-5.656 4 4 0 0 0-5.656 0l-8.415 8.585a6 6 0 1 0 8.486 8.486'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23000' stroke-width='2'%3E%3Cpath d='M13.234 20.252 21 12.3'/%3E%3Cpath d='m16 6-8.414 8.586a2 2 0 0 0 0 2.828 2 2 0 0 0 2.828 0l8.414-8.586a4 4 0 0 0 0-5.656 4 4 0 0 0-5.656 0l-8.415 8.585a6 6 0 1 0 8.486 8.486'/%3E%3C/svg%3E") center/contain no-repeat;
}
.alw-cfm-embed .alwayly-cfm-form__submit {
  min-height: 0;
  padding: 1rem;
  border-radius: .75rem;
  background: rgb(37 99 235);
  font-size: 1.125rem;
  font-weight: 700;
  box-shadow: 0 10px 18px rgba(37,99,235,.25);
}
.alw-cfm-embed .alwayly-cfm-form__submit:hover {
  background: rgb(29 78 216);
  box-shadow: 0 14px 24px rgba(37,99,235,.3);
}
.alw-cfm-embed .alwayly-cfm-form__notice { margin: 0 0 1.25rem; }
@media (max-width: 720px) {
  .alw-cfm-embed .alwayly-cfm-form__header { margin-bottom: 1.5rem; }
  .alw-cfm-embed .alwayly-cfm-form__grid { gap: 1rem; }
  .alw-cfm-embed .alwayly-cfm-form__field textarea,
  .alw-cfm-embed--home .alwayly-cfm-form__field textarea { min-height: 8rem; }
}

/* v3.3.4 — Figma-native consultation forms.
   The form plugin owns submission/storage only; these classes intentionally
   preserve the original Figma field/card hierarchy without plugin CSS leaks. */
.alw-native-consultation { color: rgb(15 23 42); }
.alw-native-consultation__honeypot { position:absolute!important; left:-9999px!important; opacity:0!important; pointer-events:none!important; }
.alw-native-consultation textarea { display:block; }
.alw-native-consultation select { -webkit-appearance:none; -moz-appearance:none; }
.alw-native-consultation .hidden { display:none!important; }
.alw-native-consultation [data-alw-file-selected].inline-flex { display:inline-flex!important; }

/* v3.3.5 — AJAX consultation form behavior, preserving the Figma form layout. */
.alw-native-consultation [data-alw-form-notice][hidden] { display: none !important; }
.alw-native-consultation [data-alw-form-notice][data-state="success"] {
  border-color: rgb(167 243 208);
  background: rgb(236 253 245);
  color: rgb(21 128 61);
}
.alw-native-consultation [data-alw-form-notice][data-state="error"] {
  border-color: rgb(254 205 211);
  background: rgb(255 241 242);
  color: rgb(190 24 93);
}
.alw-native-consultation button[type="submit"] { cursor: pointer; }
.alw-native-consultation button[type="submit"]:disabled { cursor: wait; }
.alw-native-consultation [data-alw-file-list]:empty { display: none; }
.alw-native-consultation [data-alw-file-list] { display: grid; gap: .5rem; max-width: 100%; }
.alw-native-consultation__file-card {
  display: flex;
  align-items: center;
  gap: .65rem;
  width: min(100%, 28rem);
  padding: .45rem .55rem;
  border: 1px solid rgb(219 234 254);
  border-radius: .65rem;
  background: rgb(239 246 255);
}
.alw-native-consultation__file-preview {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  overflow: hidden;
  border-radius: .45rem;
  background: rgb(219 234 254);
  color: rgb(37 99 235);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .02em;
}
.alw-native-consultation__file-preview img { width: 100%; height: 100%; object-fit: cover; }
.alw-native-consultation__file-meta { min-width: 0; flex: 1 1 auto; }
.alw-native-consultation__file-meta strong {
  display: block;
  overflow: hidden;
  color: rgb(30 64 175);
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.alw-native-consultation__file-meta small { display: block; margin-top: .12rem; color: rgb(96 165 250); font-size: .75rem; }
.alw-native-consultation__file-remove {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 0;
  border-radius: .4rem;
  background: transparent;
  color: rgb(96 165 250);
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;
  transition: background-color .2s ease, color .2s ease;
}
.alw-native-consultation__file-remove:hover { background: rgb(219 234 254); color: rgb(29 78 216); }
.alw-native-consultation__file-remove:focus-visible { outline: 2px solid rgb(59 130 246); outline-offset: 2px; }

/* v3.3.6 — Consultation AJAX file strip: retain Figma layout, add files before the trigger. */
.alw-native-consultation__upload-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .65rem;
  min-height: 2.75rem;
}
.alw-native-consultation [data-alw-file-list],
.alw-native-consultation [data-alw-file-list]:empty {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  gap: .65rem;
  width: var(--alw-file-list-width, 0px);
  max-width: 100%;
  min-width: 0;
  height: 2.75rem;
  margin: 0;
  overflow: hidden;
  opacity: 1;
  transition: width .28s cubic-bezier(.22, 1, .36, 1);
}
.alw-native-consultation__file-card {
  position: relative;
  display: block;
  flex: 0 0 2.75rem;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: .55rem;
  background: transparent;
  box-shadow: none;
  animation: alw-consultation-file-in .2s ease both;
}
.alw-native-consultation__file-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 1px solid rgb(219 234 254);
  border-radius: .55rem;
  background: rgb(239 246 255);
  color: rgb(37 99 235);
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .02em;
  box-shadow: 0 1px 2px rgb(15 23 42 / .08);
}
.alw-native-consultation__file-preview img { display: block; width: 100%; height: 100%; object-fit: cover; }
.alw-native-consultation__file-remove {
  position: absolute;
  top: -.1rem;
  right: -.1rem;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15rem;
  height: 1.15rem;
  padding: 0;
  border: 1px solid rgb(191 219 254);
  border-radius: 9999px;
  background: #fff;
  color: rgb(37 99 235);
  cursor: pointer;
  font-size: .95rem;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 1px 2px rgb(15 23 42 / .12);
  transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
.alw-native-consultation__file-remove:hover { background: rgb(239 246 255); color: rgb(29 78 216); transform: scale(1.06); }
.alw-native-consultation__file-trigger { flex: 0 0 auto; white-space: nowrap; }
.alw-native-consultation__field-invalid {
  border-color: rgb(244 63 94) !important;
  box-shadow: 0 0 0 3px rgb(244 63 94 / .12) !important;
}
.alw-native-consultation__sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
@keyframes alw-consultation-file-in {
  from { opacity: 0; transform: translateX(-.35rem) scale(.94); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}
@media (max-width: 639px) {
  .alw-native-consultation__upload-row { gap: .55rem; }
  .alw-native-consultation [data-alw-file-list],
  .alw-native-consultation [data-alw-file-list]:empty { gap: .55rem; }
}


/* v3.3.7 — Persistent native upload control + v3.3.3 validation behaviour. */
.alw-native-consultation__file-trigger {
  display: inline-flex !important;
  visibility: visible !important;
  align-items: center;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgb(100 116 139);
  font: inherit;
  line-height: inherit;
  white-space: nowrap;
  cursor: pointer;
  opacity: 1 !important;
  pointer-events: auto !important;
}
.alw-native-consultation__file-trigger:hover { color: rgb(37 99 235); }
.alw-native-consultation__file-trigger:focus-visible {
  outline: 2px solid rgb(59 130 246 / .5);
  outline-offset: 3px;
  border-radius: .25rem;
}
.alw-native-consultation__upload-row {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}
.alw-native-consultation__upload-row::-webkit-scrollbar { display: none; }
.alw-native-consultation [data-alw-file-list],
.alw-native-consultation [data-alw-file-list]:empty {
  display: flex !important;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  width: var(--alw-file-list-width, 0px);
  min-width: 0;
  overflow: hidden;
  opacity: 1;
}
/* v3.3.3 used native required / email validation. Do not keep the later
   custom all-field red state if an old cached script leaves its class behind. */
.alw-native-consultation__field-invalid {
  border-color: rgb(226 232 240) !important;
  box-shadow: none !important;
}

/* v3.3.8 — Blog search state below the search field. */
.alw-blog-hot-searches,
.alw-blog-active-search { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.55rem; margin-top:.85rem; }
.alw-blog-hot-searches:empty { display:none; }
.alw-blog-hot-searches__label,.alw-blog-active-search__label { color:rgb(100 116 139); font-size:.8125rem; font-weight:600; }
.alw-blog-hot-searches__item { padding:.35rem .75rem; border:1px solid rgb(219 234 254); border-radius:999px; background:rgb(255 255 255 / .75); color:rgb(37 99 235); font-size:.8125rem; font-weight:700; cursor:pointer; transition:color .2s ease,border-color .2s ease,background-color .2s ease,transform .2s ease; }
.alw-blog-hot-searches__item:hover { border-color:rgb(96 165 250); background:rgb(239 246 255); color:rgb(29 78 216); transform:translateY(-1px); }
.alw-blog-active-search.hidden { display:none !important; }
.alw-blog-active-search__token { display:inline-flex; align-items:center; gap:.45rem; max-width:min(100%,28rem); padding:.4rem .75rem .4rem .85rem; border:1px solid rgb(191 219 254); border-radius:999px; background:rgb(239 246 255); color:rgb(29 78 216); font-size:.875rem; font-weight:700; line-height:1.2; text-decoration:none; }
.alw-blog-active-search__token > span:first-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.alw-blog-active-search__remove { display:inline-flex; align-items:center; justify-content:center; width:1.2rem; height:1.2rem; border-radius:999px; background:rgb(219 234 254); color:rgb(37 99 235); font-size:1rem; line-height:1; transition:background-color .2s ease,color .2s ease; }
.alw-blog-active-search__token:hover .alw-blog-active-search__remove { background:rgb(37 99 235); color:#fff; }


/* v3.3.9 — Blog search field / result-context alignment.
   Keep the icon and autocomplete anchored to the input field only. */
.alw-blog-search-wrap { position: relative; z-index: 47 !important; overflow: visible; }
.alw-blog-search-field { position: relative; z-index: 2; }
.alw-blog-search-field > .lucide-search { pointer-events: none; }
.alw-blog-search-field #alw-blog-search-suggestions {
  top: calc(100% - 1px) !important;
  left: 0 !important;
  right: auto !important;
  width: 100% !important;
  margin-top: 0 !important;
  z-index: 60 !important;
  text-align: left !important;
}
.alw-blog-hot-searches {
  justify-content: flex-start !important;
  margin-top: .9rem !important;
  text-align: left !important;
}
.alw-blog-hot-searches__label,
.alw-blog-hot-searches__item {
  font-weight: 500 !important;
}
.alw-blog-search-suggestion-meta,
.alw-blog-search-suggestion-title,
.alw-blog-search-suggestion-excerpt {
  font-weight: 400 !important;
}
.alw-blog-active-search {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: .55rem;
  min-height: 2rem;
  margin: 0 0 1.35rem;
  color: rgb(71 85 105);
  font-size: 1rem;
  line-height: 1.5;
  text-align: left;
}
.alw-blog-active-search.hidden { display: none !important; }
.alw-blog-active-search__message { font-weight: 500; }
.alw-blog-active-search__clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.55rem;
  height: 1.55rem;
  padding: 0;
  border: 1px solid rgb(191 219 254);
  border-radius: 999px;
  background: rgb(239 246 255);
  color: rgb(37 99 235);
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.alw-blog-active-search__clear:hover,
.alw-blog-active-search__clear:focus-visible {
  border-color: rgb(96 165 250);
  background: rgb(37 99 235);
  color: #fff;
  outline: none;
}
@media (max-width: 640px) {
  .alw-blog-active-search { margin-bottom: 1rem; font-size: .9375rem; }
}


/* v3.3.10 — Keep active search context directly below the category bar. */
#alw-blog-results.alw-blog-results--with-context {
  padding-top: 1.25rem !important;
}
@media (max-width: 640px) {
  #alw-blog-results.alw-blog-results--with-context { padding-top: 1rem !important; }
}


/* v3.3.11 — Blog result context and sticky category bar compatibility.
   AJAX/category links no longer carry an anchor, so they update in place.
   This larger scroll margin only protects old shared #alw-blog-results links. */
#alw-blog-results { scroll-margin-top: 13.75rem; }
@media (max-width: 767px) {
  #alw-blog-results { scroll-margin-top: 11.5rem; }
}


/* v3.3.12 — Compact Blog result context with only active terms emphasized. */
.alw-blog-active-search {
  font-size: .875rem !important;
  line-height: 1.45 !important;
}
.alw-blog-active-search__message { font-weight: 400 !important; }
.alw-blog-active-search__emphasis { font-weight: 700; color: rgb(30 41 59); }
@media (max-width: 640px) {
  .alw-blog-active-search { font-size: .8125rem !important; }
}

/* v3.3.14 — Home + mobile navigation restored from the Figma Make source.
   These are explicit source values to keep WordPress/plugin CSS from softening
   the two original hero light fields or changing the 4:3 desktop visual frame. */
#alw-mobile-toggle .alw-mobile-close-icon { display: none; }
#alw-mobile-toggle.alw-open .alw-mobile-menu-icon { display: none; }
#alw-mobile-toggle.alw-open .alw-mobile-close-icon { display: block; }
.alw-mobile-chevron { flex: 0 0 auto; transition: transform .3s cubic-bezier(.4,0,.2,1); }
.alw-mobile-group-toggle.alw-open .alw-mobile-chevron { transform: rotate(180deg); }

.alw-home-hero {
  isolation: isolate;
  background-color: rgb(248 250 252 / .5) !important;
}
.alw-home-hero__glow {
  display: block !important;
  position: absolute !important;
  z-index: 0;
  pointer-events: none !important;
  border-radius: 9999px !important;
  filter: blur(120px) !important;
}
.alw-home-hero__glow--right {
  top: 0 !important;
  right: 0 !important;
  width: 800px !important;
  height: 800px !important;
  transform: translate(25%, -25%) !important;
  background-color: #bedbff80 !important;
  opacity: .8 !important;
}
.alw-home-hero__glow--left {
  bottom: 0 !important;
  left: 0 !important;
  width: 600px !important;
  height: 600px !important;
  transform: translate(-25%, 25%) !important;
  background-color: #e0e7ff99 !important;
  opacity: .7 !important;
}
.alw-home-hero > .container { position: relative; z-index: 10; }
.alw-home-hero__media-column { min-width: 0; }
.alw-home-hero__media-frame { width: 100%; }
.alw-home-hero__media-frame > img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 1024px) {
  /* Figma's original `container mx-auto px-6` resolves to a 96rem maximum. */
  .alw-home-hero > .container { max-width: 96rem !important; }
  .alw-home-hero__media-frame { aspect-ratio: 4 / 3 !important; }
}

/* v3.3.15 — Match the current Figma Make hero composite exactly.
   Figma's preview uses an opaque slate base plus a broad blue field. The
   WordPress CSS had composited `bg-slate-50/50` over white, which washed the
   field out. These deterministic gradients keep the same visual result across
   cached theme CSS and plugin styles. */
.alw-home-hero {
  isolation: isolate;
  background-color: #f8fafc !important;
  background-image:
    radial-gradient(ellipse 750px 360px at 78.5% 21%, rgb(191 219 254 / .49) 0%, rgb(191 219 254 / .49) 35%, rgb(191 219 254 / .31) 58%, rgb(191 219 254 / .10) 82%, rgb(191 219 254 / 0) 100%),
    radial-gradient(ellipse 680px 620px at -10% 108%, rgb(199 239 253 / .40) 0%, rgb(210 239 253 / .23) 56%, rgb(224 231 255 / 0) 86%) !important;
}
/* The gradients above replace the same two Figma light fields without browser
   dependent double-alpha blur compositing. */
.alw-home-hero__glow { display: none !important; }

/* Dynamic language controls use the existing Figma button geometry. */
.alw-language-switcher { text-decoration: none; cursor: pointer; }
.alw-language-switcher--desktop:hover { text-decoration: none; }
.alw-language-switcher--mobile:hover { text-decoration: none; }
.alw-language-switcher--footer:hover { text-decoration: none; }


/* v3.3.16 — literal Home Hero + navigation values from the Figma Make source.
   Earlier v3.3.15 replaced the source blur layers with darker deterministic
   gradients. Restore the original two elements and their source alpha stack. */
.alw-home-hero {
  isolation: isolate;
  background-color: rgb(248 250 252) !important;
  background-image: none !important;
}
.alw-home-hero__glow {
  display: block !important;
  position: absolute !important;
  z-index: 0;
  pointer-events: none !important;
  border-radius: 9999px !important;
  filter: blur(120px) !important;
}
.alw-home-hero__glow--right {
  top: 0 !important;
  right: 0 !important;
  bottom: auto !important;
  left: auto !important;
  width: 800px !important;
  height: 800px !important;
  transform: translate(25%, -25%) !important;
  background-color: rgb(191 219 254 / .5) !important;
  opacity: .8 !important;
}
.alw-home-hero__glow--left {
  top: auto !important;
  right: auto !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 600px !important;
  height: 600px !important;
  transform: translate(-25%, 25%) !important;
  background-color: rgb(224 231 255 / .6) !important;
  opacity: .7 !important;
}
/* Root.tsx: `transition-all duration-300`, then `bg-white shadow-sm py-3`
   after scrollY > 50; top state remains `bg-white py-4` with no shadow. */
#alw-site-nav {
  background-color: #fff !important;
  transition-property: all !important;
  transition-duration: 300ms !important;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1) !important;
}
#alw-site-nav.alw-nav-scrolled {
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / .10), 0 1px 2px -1px rgb(0 0 0 / .10) !important;
}


/* v3.4.0 — direct Figma Make motion port.
   Elements are stamped server-side from the original TSX motion declarations.
   There are no generic reveal selectors and no late class scanning. */
html.alw-figma-motion-pending [data-alw-motion="load"],
html.alw-figma-motion-pending [data-alw-motion="view"] { visibility: hidden; }
[data-alw-motion] { will-change: auto; }
@media (prefers-reduced-motion: reduce) {
  html.alw-figma-motion-pending [data-alw-motion] { visibility: visible !important; }
  [data-alw-motion] { will-change: auto !important; }
}


/* v3.4.7 — Restore the Figma Make Blog sizing contract.
   The v3.4.1 mobile overflow patch accidentally applied max-width:100% to every
   Blog container at every breakpoint. That overrode Figma's max-w-3xl hero
   container and max-w-xl search form, which is why the search field expanded to
   the full viewport. Keep only the safe min-width protections; the original
   Tailwind classes again own all desktop and mobile widths. */
.alw-blog-page {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: clip;
}
.alw-blog-page .container,
.alw-blog-page .alw-blog-search-wrap,
.alw-blog-page .alw-blog-search-field,
.alw-blog-page #alw-blog-results,
.alw-blog-page #alw-blog-featured-wrap {
  min-width: 0;
}
/* These source utilities must remain authoritative:
   Hero: container max-w-3xl; search form: max-w-xl + mx-auto. */
.alw-blog-page .alw-blog-hero > .container {
  width: 100%;
  max-width: var(--container-3xl) !important;
}
.alw-blog-page .alw-blog-search-wrap {
  width: auto;
  max-width: var(--container-xl) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.alw-blog-page input,
.alw-blog-page .alw-blog-search-suggestion-title,
.alw-blog-page .alw-blog-search-suggestion-excerpt,
.alw-blog-page .alw-blog-active-search__message {
  min-width: 0;
  overflow-wrap: anywhere;
}
@media (max-width: 767px) {
  /* Figma's w-full uses the containing block, never 100vw. 100vw had been
     creating a horizontal strip equal to the browser scrollbar width. */
  .alw-blog-page { width: 100% !important; max-width: 100% !important; }
  .alw-blog-page .alw-blog-hero > .container { max-width: var(--container-3xl) !important; }
  .alw-blog-page .alw-blog-search-wrap { max-width: var(--container-xl) !important; }
}

/* Restore source FAQ transitions without applying styles to ordinary content cards. */
[data-alw-faq-ready] { cursor: pointer; }
.alw-faq-is-open > button { cursor: pointer; }

/* The generic theme image safeguard has higher specificity than Tailwind's h-6
   / h-full utilities. These normalizers are deliberately limited to the two
   affected source sections. */
.alw-migration-platform-icon,
.alw-migration-platform-mark {
  display: block !important;
  width: 1.75rem !important;
  height: 1.75rem !important;
  min-width: 1.75rem !important;
  max-width: 1.75rem !important;
  min-height: 1.75rem !important;
  max-height: 1.75rem !important;
  flex: 0 0 1.75rem !important;
  object-fit: contain !important;
}
.alw-performance-platform-icon {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
}

/* v3.4.4 — Restore Figma Make platform-logo geometry for local image files.
   The page markup keeps the source h-9 / h-10 / h-12 classes. WordPress has a
   general `.alwayly-exact-theme img { height:auto; }` safety rule, so it was
   overriding only these local logo files. Scope the correction strictly to the
   original strategic-platform card grid; no other image or layout is changed. */
.alwayly-exact-theme .alw-platforms-strategic-grid img.h-9,
.alwayly-exact-theme .alw-platforms-strategic-grid img.h-10,
.alwayly-exact-theme .alw-platforms-strategic-grid img.h-12 {
  display: block !important;
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
  object-fit: contain !important;
  flex: 0 0 auto !important;
}
.alwayly-exact-theme .alw-platforms-strategic-grid img.h-9 { height: 2.25rem !important; }
.alwayly-exact-theme .alw-platforms-strategic-grid img.h-10 { height: 2.5rem !important; }
.alwayly-exact-theme .alw-platforms-strategic-grid img.h-12 { height: 3rem !important; }

/* v3.10.6 — Use Shopify's 36px footprint as the shared visual box for the
   four strategic-platform marks. `object-fit: contain` keeps horizontal marks
   such as WooCommerce proportional, while the transparent SVG sources remove
   the baked Magento and BigCommerce image backgrounds. */
.alwayly-exact-theme .alw-platforms-strategic-grid img[class] {
  display: block !important;
  width: 2.25rem !important;
  height: 2.25rem !important;
  min-width: 2.25rem !important;
  max-width: 2.25rem !important;
  min-height: 2.25rem !important;
  max-height: 2.25rem !important;
  flex: 0 0 2.25rem !important;
  object-fit: contain !important;
  object-position: center !important;
  background: transparent !important;
}

/* v3.10.7 — Restore the two Platforms integration orbits. The platform cards
   travel around the ring while an equal counter-rotation keeps every logo and
   card upright. These animations are CSS-owned so they remain independent of
   the one-time Figma reveal runner. */
@keyframes alw-platforms-orbit-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes alw-platforms-orbit-counter-spin {
  from { transform: var(--alw-platforms-orbit-offset) rotate(0deg); }
  to { transform: var(--alw-platforms-orbit-offset) rotate(-360deg); }
}
.alwayly-exact-theme .alw-platforms-orbit {
  transform-origin: 50% 50%;
  animation: alw-platforms-orbit-spin 20s linear infinite;
  will-change: transform;
}
.alwayly-exact-theme .alw-platforms-orbit--outer {
  animation-duration: 30s;
}
.alwayly-exact-theme .alw-platforms-orbit--reverse {
  animation-direction: reverse;
}
.alwayly-exact-theme .alw-platforms-orbit-item {
  --alw-platforms-orbit-offset: translate(-50%, -50%);
  transform-origin: 50% 50%;
  animation: alw-platforms-orbit-counter-spin 20s linear infinite;
  will-change: transform;
}
.alwayly-exact-theme .alw-platforms-orbit--inner > .alw-platforms-orbit-item.bottom-0 {
  --alw-platforms-orbit-offset: translate(-50%, 50%);
}
.alwayly-exact-theme .alw-platforms-orbit--inner > .alw-platforms-orbit-item.right-0 {
  --alw-platforms-orbit-offset: translate(50%, -50%);
}
.alwayly-exact-theme .alw-platforms-orbit--outer > .alw-platforms-orbit-item {
  animation-duration: 30s;
  animation-direction: reverse;
}
.alwayly-exact-theme .alw-platforms-orbit--outer > .alw-platforms-orbit-item:last-child {
  --alw-platforms-orbit-offset: translate(50%, 50%);
}
.alwayly-exact-theme .alw-platforms-orbit-item img[class],
.alwayly-exact-theme img[src*="/alwayly-platform-odoo.svg"] {
  display: block !important;
  width: 2rem !important;
  height: 2rem !important;
  min-width: 2rem !important;
  max-width: 2rem !important;
  min-height: 2rem !important;
  max-height: 2rem !important;
  object-fit: contain !important;
  background: transparent !important;
}
@media (prefers-reduced-motion: reduce) {
  .alwayly-exact-theme .alw-platforms-orbit {
    animation: none !important;
    transform: none !important;
    will-change: auto !important;
  }
  .alwayly-exact-theme .alw-platforms-orbit-item {
    animation: none !important;
    transform: var(--alw-platforms-orbit-offset) !important;
    will-change: auto !important;
  }
}

/* v3.4.10 — Homepage brand-logo group contains only the six approved
   source nodes. No visual fallback hiding is used, so surplus logos are not
   rendered or requested by the browser. */

/* v3.10.4 — The Shopify source SVG already contains the official green fills.
   Its old inline colorization filter was applied a second time when this logo
   row left grayscale mode on hover, shifting the bag icon toward red. Keep the
   original row interaction and neutralize only the Shopify image filter. */
.alwayly-exact-theme .overflow-x-hidden
  .flex.flex-wrap.justify-center.gap-x-12.gap-y-10.items-center.grayscale
  > div:nth-child(2)
  > img {
  filter: none !important;
}

/* v3.10.8 — Restore the Magento Development hero ecosystem orbit. The outer
   label layer travels around Magento while the labels counter-rotate so their
   text remains upright and readable. */
@keyframes alw-magento-hero-orbit-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes alw-magento-hero-orbit-counter-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}
.alwayly-exact-theme .alw-magento-hero-orbit {
  transform-origin: 50% 50%;
  animation: alw-magento-hero-orbit-spin 48s linear infinite;
  will-change: transform;
}
.alwayly-exact-theme .alw-magento-hero-orbit > div > div {
  transform-origin: 50% 50%;
  animation: alw-magento-hero-orbit-counter-spin 48s linear infinite;
  will-change: transform;
}

/* Keep every restored showcase photograph inside its desktop and mobile
   frame; the theme's general image-height safeguard must not flatten it. */
.alwayly-exact-theme [data-alw-magento-showcase] img.w-full.h-full {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  min-height: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
}

@media (prefers-reduced-motion: reduce) {
  .alwayly-exact-theme .alw-magento-hero-orbit,
  .alwayly-exact-theme .alw-magento-hero-orbit > div > div {
    animation: none !important;
    transform: none !important;
    will-change: auto !important;
  }
}

/* Magento 1 → Magento 2 migration diagram. Use the verified transparent
   Magento artwork at 5em for M1 and 6em for M2. */
.alwayly-exact-theme .alw-magento-version-mark {
  position: relative;
  width: 5em;
  height: 5em;
  flex: 0 0 5em;
}
.alwayly-exact-theme img.alw-magento-version-icon {
  display: block;
  width: 5em;
  height: 5em;
  min-width: 5em;
  max-width: 5em;
  min-height: 5em;
  max-height: 5em;
  object-fit: contain;
  background: transparent;
  filter: brightness(0) invert(1);
}
.alwayly-exact-theme .alw-magento-version-mark--large {
  width: 6em;
  height: 6em;
  flex-basis: 6em;
}
.alwayly-exact-theme img.alw-magento-version-icon--large {
  width: 6em;
  height: 6em;
  min-width: 6em;
  max-width: 6em;
  min-height: 6em;
  max-height: 6em;
}
.alwayly-exact-theme img.alw-magento-version-icon--orange {
  filter: none;
}

/* The version disc is anchored to the card itself (not to the
   artwork inside it), placing its centre on the card's upper-right corner as
   in the supplied reference. Explicit properties avoid uncompiled utility
   classes dropping the black fill, sizing, or offset. */
.alwayly-exact-theme .alw-magento-version-card {
  position: relative;
  overflow: visible;
}
.alwayly-exact-theme .alw-magento-version-badge {
  position: absolute;
  top: -0.875rem;
  right: -0.875rem;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 0.225rem solid #f26322;
  border-radius: 9999px;
  background: #050505;
  color: #fff;
  box-shadow: 0 0.25rem 0.625rem rgba(15, 23, 42, 0.28);
  font-size: 0.875rem;
  font-weight: 800;
  line-height: 1;
  text-align: center;
}

/* Case detail gallery: preserve each uploaded screenshot's real aspect ratio,
   while retaining clickable dots and horizontal pointer/touch dragging. */
.alw-case-gallery-viewport {
  width: 100%;
  overflow: hidden;
  background: #0f172a;
}
.alw-case-gallery-track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 420ms cubic-bezier(.22,.61,.36,1);
  touch-action: pan-y;
  user-select: none;
  cursor: grab;
}
.alw-case-gallery-track.is-dragging {
  cursor: grabbing;
  transition: none;
}
.alw-case-gallery-slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  margin: 0;
  background: #0f172a;
}
/* The viewport follows the active attachment's real dimensions, so contain
   displays the complete image without either cropping or a fixed-frame gap. */
.alwayly-exact-theme .alw-case-gallery .alw-case-gallery-image {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  object-position: center center;
  pointer-events: none;
}
.alw-case-gallery-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  min-height: 1.25rem;
  margin-top: 0.875rem;
}
.alw-case-gallery-dot {
  display: block;
  width: 0.625rem;
  height: 0.625rem;
  padding: 0;
  border: 0;
  border-radius: 9999px;
  background: rgba(148,163,184,.55);
  cursor: pointer;
  transition: width 180ms ease, background-color 180ms ease, transform 180ms ease;
}
.alw-case-gallery-dot:hover,
.alw-case-gallery-dot:focus-visible {
  background: rgba(255,255,255,.85);
  transform: scale(1.1);
}
.alw-case-gallery-dot:focus-visible {
  outline: 2px solid #60a5fa;
  outline-offset: 3px;
}
.alw-case-gallery-dot.is-active {
  width: 1.5rem;
  background: #fff;
}
@media (prefers-reduced-motion: reduce) {
  .alw-case-gallery-track,
  .alw-case-gallery-dot { transition: none; }
}

/* v3.10.33 — Native WordPress page typography.
   Tailwind Preflight intentionally removes browser margins, heading sizes and
   list markers. Standard pages now have their own content wrapper so editor
   blocks keep readable spacing without changing Figma sections, cards, forms,
   navigation or footer components. */
.alw-standard-page {
  color: #0f172a;
}
.alw-standard-page__hero {
  position: relative;
  min-height: 25rem;
  padding: 10.5rem 0 4.75rem;
  overflow: hidden;
  border-bottom: 1px solid rgba(148, 163, 184, 0.7);
  background:
    radial-gradient(circle at 16% 88%, rgba(255, 226, 218, 0.72) 0, rgba(255, 240, 235, 0.4) 24%, transparent 48%),
    radial-gradient(circle at 88% 8%, rgba(186, 230, 253, 0.8) 0, rgba(224, 242, 254, 0.5) 34%, transparent 62%),
    linear-gradient(112deg, #ffffff 0%, #f8fbff 48%, #e7f6ff 100%);
}
.alw-standard-page__hero::after {
  position: absolute;
  right: -10rem;
  bottom: -14rem;
  width: 34rem;
  height: 34rem;
  border: 1px solid rgba(59, 130, 246, 0.08);
  border-radius: 9999px;
  content: "";
  pointer-events: none;
}
.alw-standard-page__hero-inner {
  position: relative;
  z-index: 1;
}
.alw-standard-page__breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1.25rem;
  color: #64748b;
  font-size: 1.125rem;
  line-height: 1.6;
}
.alw-standard-page__breadcrumb a {
  color: #475569;
  text-decoration: none;
  transition: color 160ms ease;
}
.alw-standard-page__breadcrumb a:hover {
  color: #2563eb;
}
.alw-standard-page__title {
  max-width: 62rem;
  margin: 0 0 1rem;
  color: #111827;
  font-size: clamp(3.25rem, 5vw, 4.5rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.08;
}
.alw-standard-page__updated {
  margin: 0;
  color: #475569;
  font-size: 1.25rem;
  line-height: 1.7;
}
.alw-standard-page__body {
  padding: 5.5rem 0 6.5rem;
  background: #ffffff;
}
.alw-page-content {
  color: #334155;
  font-size: 1.125rem;
  line-height: 1.8;
  overflow-wrap: anywhere;
}
.alw-page-content > :first-child {
  margin-top: 0;
}
.alw-page-content > :last-child {
  margin-bottom: 0;
}
.alw-page-content p {
  margin: 0 0 1.25rem;
}
.alw-page-content h1,
.alw-page-content h2,
.alw-page-content h3,
.alw-page-content h4,
.alw-page-content h5,
.alw-page-content h6 {
  color: #0f172a;
  font-weight: 700;
}
.alw-page-content h1 {
  margin: 2.75rem 0 1.25rem;
  font-size: 2.5rem;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.alw-page-content h2 {
  margin: 2.5rem 0 1rem;
  font-size: 2rem;
  letter-spacing: -0.015em;
  line-height: 1.3;
}
.alw-page-content h3 {
  margin: 2rem 0 0.875rem;
  font-size: 1.5rem;
  line-height: 1.4;
}
.alw-page-content h4 {
  margin: 1.75rem 0 0.75rem;
  font-size: 1.25rem;
  line-height: 1.45;
}
.alw-page-content h5,
.alw-page-content h6 {
  margin: 1.5rem 0 0.625rem;
  font-size: 1.125rem;
  line-height: 1.5;
}
.alw-page-content ul,
.alw-page-content ol {
  display: block;
  margin: 0 0 1.25rem;
  padding-left: 1.75rem;
  list-style-position: outside;
}
.alw-page-content ul {
  list-style-type: disc;
}
.alw-page-content ol {
  list-style-type: decimal;
}
.alw-page-content ul ul {
  list-style-type: circle;
}
.alw-page-content ol ol {
  list-style-type: lower-alpha;
}
.alw-page-content li {
  display: list-item;
  margin: 0 0 0.5rem;
  padding-left: 0.2rem;
}
.alw-page-content li > ul,
.alw-page-content li > ol {
  margin-top: 0.5rem;
  margin-bottom: 0;
}
.alw-page-content li > p {
  margin-bottom: 0.5rem;
}
.alw-page-content a {
  color: #2563eb;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
.alw-page-content a:hover {
  color: #1d4ed8;
}
.alw-page-content strong,
.alw-page-content b {
  color: #0f172a;
  font-weight: 700;
}
.alw-page-content blockquote {
  margin: 1.75rem 0;
  padding: 1rem 1.25rem;
  border-left: 0.25rem solid #2563eb;
  border-radius: 0 0.75rem 0.75rem 0;
  background: #f8fafc;
  color: #475569;
}
.alw-page-content blockquote > :last-child {
  margin-bottom: 0;
}
.alw-page-content hr {
  margin: 2.5rem 0;
  border: 0;
  border-top: 1px solid #e2e8f0;
}
.alw-page-content figure,
.alw-page-content .wp-block-image,
.alw-page-content .wp-block-table {
  margin: 1.75rem 0;
}
.alw-page-content img {
  max-width: 100%;
  height: auto;
}
.alw-page-content figcaption {
  margin-top: 0.625rem;
  color: #64748b;
  font-size: 0.875rem;
  line-height: 1.6;
  text-align: center;
}
.alw-page-content table {
  width: 100%;
  border-collapse: collapse;
  color: #334155;
  font-size: 1rem;
}
.alw-page-content th,
.alw-page-content td {
  padding: 0.75rem 1rem;
  border: 1px solid #e2e8f0;
  text-align: left;
  vertical-align: top;
}
.alw-page-content th {
  background: #f8fafc;
  color: #0f172a;
  font-weight: 700;
}
.alw-page-content pre {
  max-width: 100%;
  margin: 1.75rem 0;
  padding: 1.25rem;
  overflow-x: auto;
  border-radius: 0.75rem;
  background: #0f172a;
  color: #e2e8f0;
  font-size: 0.9375rem;
  line-height: 1.7;
}
.alw-page-content :not(pre) > code {
  padding: 0.15em 0.35em;
  border-radius: 0.3rem;
  background: #f1f5f9;
  color: #be123c;
  font-size: 0.9em;
}
.alw-page-content .wp-block-button {
  margin: 1.5rem 0;
}
.alw-page-content .wp-block-button__link {
  color: inherit;
  text-decoration: none;
}

@media (max-width: 767px) {
  .alw-standard-page__hero {
    min-height: 20rem;
    padding-top: 8rem;
    padding-bottom: 3.5rem;
  }
  .alw-standard-page__breadcrumb {
    margin-bottom: 1rem;
    font-size: 0.9375rem;
  }
  .alw-standard-page__title {
    margin-bottom: 0.75rem;
    font-size: 2.5rem;
    letter-spacing: -0.03em;
  }
  .alw-standard-page__updated {
    font-size: 1rem;
  }
  .alw-standard-page__body {
    padding-top: 3.5rem;
    padding-bottom: 4.5rem;
  }
  .alw-page-content {
    font-size: 1rem;
    line-height: 1.75;
  }
  .alw-page-content h1 {
    margin-top: 2.25rem;
    font-size: 2rem;
  }
  .alw-page-content h2 {
    margin-top: 2rem;
    font-size: 1.625rem;
  }
  .alw-page-content h3 {
    margin-top: 1.75rem;
    font-size: 1.375rem;
  }
  .alw-page-content th,
  .alw-page-content td {
    padding: 0.625rem 0.75rem;
  }
}

/* v3.10.35 — Keep a visible separator below the fixed global navigation on
   every page. The ID selector intentionally wins over the scroll utility that
   only adds Tailwind's very faint shadow after 50px. */
#alw-site-nav,
#alw-site-nav.alw-nav-scrolled {
  border-bottom: 1px solid rgba(148, 163, 184, 0.16);
  box-shadow: 0 0.1875rem 0.5rem -0.3125rem rgba(15, 23, 42, 0.24) !important;
}