/* Fusion overrides.
   Loaded after both template stylesheets. Everything here exists to make the
   imported Scalora modules sit correctly inside the Mono page; nothing here
   restyles Mono itself. */

/* The imported architecture band ships two <h1> elements. A second and third
   h1 on a page that already has one is an accessibility defect, so the markup
   uses <h2> and the h1 type scale is restored here. Same pixels, correct
   document outline. */
.sc-scope .hero-title-block h2,
.sc-scope .hero-title-inner-block h2 {
  font-size: var(--_typography---heading-h1--h1-font-size);
  line-height: var(--_typography---heading-h1--h1-line-height);
  letter-spacing: var(--_typography---heading-h1--h1-letter-spacing);
  font-weight: var(--_typography---font-weight--font-weight-mediem);
  margin: 0;
}

/* Mono hides the pointer globally (body { cursor: none }) and draws its own
   crosshair. Inside an imported block the crosshair still tracks, but the
   Scalora modules have their own hit targets, so restore a real pointer on
   anything clickable there. */
.sc-scope a,
.sc-scope button,
.sc-scope [role="button"] {
  cursor: pointer;
}

/* Mono sections are full-bleed; the imported ones bring their own container
   padding.

   Note what is NOT here: `overflow-x: clip`. Setting one axis to clip while
   the other stays `visible` makes the visible axis compute to `auto`, so the
   card stack — which is designed to overhang its section — was cropped at the
   section edge and grew a scrollbar. If horizontal bleed ever appears, fix it
   on the offending child, not by clipping the band. */
.sc-scope {
  display: block;
  width: 100%;
}

/* ======================================================================
   Owner review, 2026-09-03: four homepage fixes. All CSS; no markup or
   interaction data changed.
   ====================================================================== */

/* 1. The testimonial cards fly upward and out of their sticky band on
      scroll. In the Mono template the next section (.section.drk) sits at
      z-index 11 and covers them as they leave; the Scalora providers band
      that now follows the testimonials was static, so the departing cards
      stayed visible on top of it. Same stacking as the template's own
      successor. */
.sc-scope.integration {
  position: relative;
  z-index: 11;
}

/* 2. Quote block centred inside every testimonial card. The template card is
      space-between (header at top, quote at bottom); with the short STARGO
      quotations the bottom-anchored block reads as misplaced. Auto margins
      centre it in the space below the header without touching the header. */
.testimonials-card .card-testi {
  margin-top: auto;
  margin-bottom: auto;
}

/* 3. Architecture band (card stack) fills the viewport exactly on desktop.
      The template is content-height — 1188px at 1440×900, taller than most
      laptop screens. Height is pinned to the viewport; the text block keeps
      its template size (378px) and the 3D card stack is zoomed to whatever
      is left. Measured: the rotated stack paints 1.086× its 500px box, so
      zoom = (viewport − 474px) / 543px, stepped every ~60px of height.
      `zoom`, not `transform`, so the interaction runtime's own transforms on
      the stack are untouched. */
@media (min-width: 992px) {
  .sc-scope.sc-hero {
    height: 100vh;
    min-height: 640px;
    box-sizing: border-box;
  }
  .sc-scope.sc-hero .hero-inner { height: 100%; }
  .sc-scope.sc-hero .hero-contant-wrapper {
    height: 100%;
    box-sizing: border-box;
    padding-top: 48px;
    padding-bottom: 0;
    row-gap: 24px;
    justify-content: flex-start;
  }
  .sc-scope.sc-hero .hero-cards-wrapper { flex: 0 0 auto; zoom: 1; }
}
@media (min-width: 992px) and (max-height: 1029px) { .sc-scope.sc-hero .hero-cards-wrapper { zoom: .78; } }
@media (min-width: 992px) and (max-height: 897px)  { .sc-scope.sc-hero .hero-cards-wrapper { zoom: .66; } }
@media (min-width: 992px) and (max-height: 831px)  { .sc-scope.sc-hero .hero-cards-wrapper { zoom: .58; } }
@media (min-width: 992px) and (max-height: 788px)  { .sc-scope.sc-hero .hero-cards-wrapper { zoom: .5; } }
@media (min-width: 992px) and (max-height: 744px)  { .sc-scope.sc-hero .hero-cards-wrapper { zoom: .42; } }
@media (min-width: 992px) and (max-height: 701px)  { .sc-scope.sc-hero .hero-cards-wrapper { zoom: .34; } }
@media (min-width: 992px) and (max-height: 658px)  { .sc-scope.sc-hero .hero-cards-wrapper { zoom: .28; } }

/* 4. Sticky product switcher: the pinned panel fills the viewport while
      pinned. The template pins a 666px panel with 100px of air above and
      below; here the pinned block is one screen tall and the panel grows
      into it. The dashboard image keeps its natural size (a 700px raster
      upscaled would blur) and is centred in the taller panel. */
@media (min-width: 992px) {
  .sc-scope.products .product-sticky-inner-block {
    height: 100vh;
    box-sizing: border-box;
    display: flex;
    align-items: center;
  }
  .sc-scope.products .product-sticky-inner-block > * { width: 100%; }
  .sc-scope.products .products-cards-wrapper { height: calc(100vh - 96px); }
  .sc-scope.products .products-cards-dashboard-block {
    height: 100%;
    box-sizing: border-box;
    justify-content: center;
  }
  .sc-scope.products .products-cards-dashboard-block img {
    max-width: 100%;
    max-height: calc(100vh - 96px - 94px - 200px);
    width: auto;
  }
}

/* ======================================================================
   Brand wordmark, language switch, and the two foreign page bodies
   (lifelogx pages, Scalora pricing) inside the Mono shell.
   ====================================================================== */
.stargo-wordmark { display: block; width: auto; height: 20px; }
.stargo-wordmark.in-nav { height: 22px; }
.stargo-wordmark.in-footer { height: 26px; }
.stargo-wordmark.in-pill { height: 16px; }
.stargo-wordmark.in-card { height: 18px; }

/* lifelogx body: dark, its own tokens; pointer restored (Mono hides the cursor). */
.lx-scope { display: block; width: 100%; background: #000002; }
.lx-scope a, .lx-scope button, .lx-scope [role="button"] { cursor: pointer; }
.lx-scope .lx-hero-text { word-break: keep-all; }

/* Scalora pricing body: the module stylesheet sets the page ground on .sc-scope;
   give the page block the same ground so the Mono white never shows between
   sections, and keep the pricing tabs usable without the Webflow tabs module. */
.sc-scope.sc-page { display: block; width: 100%; background-color: var(--beckground-color--bg-color-02, #161616); padding-top: 24px; }
.sc-scope.sc-page a, .sc-scope.sc-page [role="button"] { cursor: pointer; }
.sc-scope.sc-page .w-tab-pane { display: none; }
.sc-scope.sc-page .w-tab-pane.w--tab-active { display: block; }
.sc-scope.sc-page .pricing-card-price-block.year { display: none; }

/* Pages whose body is the dark lifelogx template: Mono's nav is drawn in
   black for its white pages, so it is turned white here (the hamburger is a
   white Lottie that Mono inverts; un-invert it). */
body.lx-page { background: #000002; }
body.lx-page .navigation-top .navigation-text-main { color: #fff; }
body.lx-page .navigation-top .line-divider-menu { background-color: #fff; }
body.lx-page .navigation-top .lottie-white { filter: none; }

/* Data tables (loop, capability map, integration): the template's award
   list has three equal columns for one-word cells. These hold sentences, so
   the middle column gets the room and the last is left-aligned. */
#loop .award-wrapper, #loop .grdi-3-columns.mk3,
#atlas .award-wrapper, #atlas .grdi-3-columns.mk3,
#table .award-wrapper, #table .grdi-3-columns.mk3 {
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.7fr) minmax(0, 1fr);
}
#loop .award-text, #atlas .award-text, #table .award-text { text-align: left; justify-content: flex-start; }

/* Stat numbers in the studio layout: "288" must stay on one line in its .4fr column. */
.stats-grid .h2._01 { font-size: clamp(56px, 5vw, 72px); white-space: nowrap; line-height: 1; }

/* ======================================================================
   Product refactor, 2026-09-05. Narrative, imagery and production fixes;
   no interaction data changed.
   ====================================================================== */

/* 1. The loop hero (imported Scalora band) fills the viewport width on
      every screen instead of sitting in a 1600px rounded card. */
.sc-scope.sc-hero { padding-top: 0; padding-right: 0; padding-left: 0; }
.sc-scope.sc-hero .sc-container { max-width: none; }
.sc-scope.sc-hero .hero-inner { border-radius: 0; }
@media (min-width: 992px) { .sc-scope.sc-hero .hero-contant-wrapper { padding-top: 72px; } }

/* 2. Quote block centred in the image+quote card. The flex item is the
      wrapper <div>, not .card-testi, so the auto margins go on it. */
.testi-grid .card-color { justify-content: flex-start; }
.testi-grid .card-color > div:last-child { margin-top: auto; margin-bottom: auto; }

/* 3. Still images inside the template's background-video boxes (the OS
      theatre, the sticky card, the contact quote card). */
.w-background-video > img.stargo-still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* The restored film inherits the template grid/zoom; these rules only handle
   its media box and an accessible pause control outside the transformed grid. */
[data-stargo-video] { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 767px) {
  /* The supplied film's sculpture is left of centre: retain it in portrait crops. */
  [data-stargo-video] { object-position: 28% center; }
}
.stargo-media-toggle {
  position: absolute; z-index: 30; right: max(24px, env(safe-area-inset-right));
  bottom: max(24px, env(safe-area-inset-bottom)); min-height: 44px;
  padding: 10px 18px; border: 1px solid #ffffff70; border-radius: 999px;
  background: #101010e6; color: #fff; font: inherit; font-size: 13px; cursor: pointer;
}
.stargo-media-toggle:disabled { opacity: .65; }

/* Keep the existing switcher's palette and crossfade, with exclusive panels. */
.stargo-switcher .products-card-name-wrapper [role="tab"] { cursor: pointer; }
.stargo-switcher .products-card-name-wrapper [role="tab"] .products-card-name-inner-block {
  color: #b2b0ae; background-color: #1b191a !important;
  transition: color .35s ease, background-color .35s ease;
}
.stargo-switcher .products-card-name-wrapper [aria-selected="true"] .products-card-name-inner-block {
  color: #fff; background-color: #282522 !important;
}
.stargo-switcher .products-cards-right-inner-block > [role="tabpanel"] {
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .35s ease, visibility 0s linear .35s;
}
.stargo-switcher .products-cards-right-inner-block > [role="tabpanel"].is-active {
  opacity: 1; visibility: visible; pointer-events: auto;
  transition: opacity .35s ease, visibility 0s;
}
@media (min-width: 992px) {
  .sc-scope.products .product-sticky-inner-block > .section-contant-padding { padding-block: 48px; }
  .stargo-switcher .products-cards-right-inner-block { height: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .stargo-switcher [role="tabpanel"], .stargo-switcher .products-card-name-inner-block { transition: none !important; }
}

/* 4. Template stock photography that is set in CSS → STARGO imagery (enterprise
      page hero backgrounds and the homepage vision band). The homepage contact
      band keeps the template's group photograph behind its glass form. */
.image-about, .image-about._01 { background-image: url("../assets/stargo-editorial/os-cockpit.webp"); }
.image-about._02 { background-image: url("../assets/stargo-editorial/os-agent-center.webp"); }
.image-about._03 { background-image: url("../assets/stargo-editorial/os-login.webp"); }
.image-about._04 { background-image: url("../assets/stargo-editorial/os-trade-execution.webp"); }
.absolute-photo { background-image: url("../assets/stargo-editorial/os-cockpit.webp"); }
.team-small-card { background-image: url("../assets/stargo-editorial/avatar-01.png"); }
.team-small-card._02 { background-image: url("../assets/stargo-editorial/avatar-04.png"); }
.team-small-card._03 { background-image: url("../assets/stargo-editorial/avatar-06.png"); }
.team-small-card._04 { background-image: url("../assets/stargo-editorial/avatar-09.png"); }

/* 5. lifelogx pages (Intelligence, AI Workforce, About, Blog, articles) keep the
      template's own palette, gradients and imagery (owner decision, 2026-09-06).
      The template's navigation is in normal flow and 80px tall (72px on
      phones); Mono's floats over the page, so the page bodies start that far
      down to reproduce the template's composition exactly. */
body.lx-page .lx-scope { padding-top: 80px; }
@media (max-width: 767px) { body.lx-page .lx-scope { padding-top: 72px; } }

/* 6. The core-system switcher's four names are buttons as well as scroll stops. */
.sc-scope.products .products-card-name-block { cursor: pointer; }
.sc-scope.products .products-card-name-block:focus-visible { outline: 2px solid #e8823a; outline-offset: -2px; border-radius: 8px; }

/* 7. Forms: honeypot off-screen; the status line under a form. */
.stargo-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.stargo-form-note { margin-top: 12px; font-size: 14px; line-height: 1.5; }
.stargo-form-note a { text-decoration: underline; color: inherit; }
form[data-stargo-busy] input[type="submit"] { opacity: .6; pointer-events: none; }

/* 8. Legal pages: readable rich text on the post layout. */
.w-richtext h4 { margin: 32px 0 10px; font-size: 20px; }
.w-richtext p, .w-richtext li { line-height: 1.7; }
.w-richtext ul { padding-left: 20px; }

/* 9. The scenario cards keep the template's portraits (CSS backgrounds). The
      pricing-ladder flip cards quote a plan, not a person: no portrait there. */
.card-author.third .author-circle { display: none; }

/* 10. lifelogx hero: the giant word is absolutely positioned against the page
       container in the template, and stays so — the offset above puts that
       container exactly where the template's in-flow nav left it. */

/* 11. Floating pill: English labels are longer than the template's; give the
       pill room instead of clipping "Capabilities" / "AI Workforce". */
html[lang="en"] .menu-bottom { max-width: 720px; }
.menu-bottom .navigation-text-main { white-space: nowrap; }

/* 12. Keyboard users get a visible focus ring (the template hides the cursor
       and relies on hover states only). */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid #e8823a; outline-offset: 3px; }

/* 13. Mobile navigation: 44px tap targets and no page scroll while the
       Webflow nav overlay is open. */
@media (max-width: 991px) {
  .w-nav-overlay .nav-menu .button-link { min-height: 44px; padding-top: 8px; padding-bottom: 8px; align-items: center; }
  body:has(.w-nav-button.w--open) { overflow: hidden; }
}

/* Audit fixes: retain each template's motion, make content legible at rest. */
body.stargo-dark-page { background: #1b1a19; }
body.stargo-dark-page .navigation-top .navigation-text-main { color: #fff; }
body.stargo-dark-page .navigation-top .line-divider-menu { background-color: #fff; }
@media (max-width: 991px) {
  body .navigation-top .menu-button,
  body .navigation-top .menu-button.w--open { background: #f4f4f4; min-width: 44px; min-height: 44px; }
  body .navigation-top .menu-button .lottie-white { filter: invert(1); }
  /* Webflow moves the links into its light overlay on mobile. */
  body .navigation-top .w-nav-overlay .navigation-text-main { color: #111; }
}
/* The template sets "Lifelogx" at 16rem (20rem from 1440px). Its Latin glyphs
   end at the baseline, so the animated phone rising into the word only meets the
   descender of the g. CJK glyphs fill the whole em box: at 0.9× the Latin size
   their visible bottom lands where the Latin baseline was, and the three- or
   four-character words stay narrower than the container at every width. From
   1440px the template's phone rests 318px from the top whatever the width, so
   the CJK word is capped at 226px: the ink height of "Lifelogx" at 20rem. English
   words here are longer than "Lifelogx" and are sized by viewport instead. */
.lx-scope .lx-hero-text { font-size: clamp(56px, 18vw, 226px); letter-spacing: -.045em; white-space: nowrap; }
html[lang="en"] .lx-scope .lx-hero-text { font-size: clamp(40px, 14.2vw, 210px); letter-spacing: -.03em; }
#lx-ontology, #lx-teams, #lx-more, #lx-evolution { scroll-margin-top: 100px; }
.stargo-contact-page .grid-form { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.stargo-contact-page .grid-form > div { min-width: 0; }
.stargo-contact-page .text-field-2 { width: 100%; min-height: 48px; }
.stargo-contact-page textarea.text-field-2 { min-height: 140px; resize: vertical; }
@media (max-width: 991px) {
  .stargo-contact-page .grid-form { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .stargo-contact-page .text-field-2 { font-size: 16px; }
  .stargo-contact-page .form-amin { padding-inline: 16px; }
}
/* Contact band: the template's glass card over its photograph. 16px inputs stop
   iOS zooming the form; nothing else about the card changes. */
.section.ctc .contact-card .text-field { font-size: 16px; }
.section.ctc .contact-card .text-field::placeholder { font-size: 16px; }
.stargo-form-consent { margin: 16px 0; font-size: 13px; line-height: 1.6; }
.stargo-form-consent a { color: inherit; text-decoration: underline; }
.sc-scope .pricing-tab-link.w--current { color: #17110c; }
.top-text.big.gray.sm { color: #999; opacity: 1; }
button.toggle-header { width: 100%; border: 0; border-radius: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
/* Cloned template grid nodes need unique IDs, but keep the donor placement. */
[data-stargo-grid="w-node-f4f6d413-6968-d40f-07ed-7736cdf55b9b-cdf55b9b"],
[data-stargo-grid="w-node-f4f6d413-6968-d40f-07ed-7736cdf55b9c-cdf55b9b"] { grid-area: 1 / 1 / 2 / 5; }
[data-stargo-grid="w-node-f4f6d413-6968-d40f-07ed-7736cdf55b9f-cdf55b9b"] { grid-area: 1 / 4 / 2 / 5; }
[data-stargo-grid="w-node-_8fd1d186-4590-97f8-ca96-eaab35b924c9-993a4d49"],
[data-stargo-grid="w-node-_8fd1d186-4590-97f8-ca96-eaab35b924cb-993a4d49"] { justify-self: start; }
[data-stargo-grid="w-node-_8fd1d186-4590-97f8-ca96-eaab35b924cd-993a4d49"] { justify-self: end; }
[data-stargo-grid="w-node-_8a43d27d-b7fc-1aa9-5720-a9b126877931-993a4d49"] { grid-area: 1 / 2 / 2 / 4; }
[data-stargo-grid="w-node-_8fd1d186-4590-97f8-ca96-eaab35b924c2-993a4d49"] { justify-self: center; }
[data-stargo-grid="w-node-_8fd1d186-4590-97f8-ca96-eaab35b924c4-993a4d49"] { grid-area: 1 / 3 / 2 / 4; justify-self: end; }
@media (max-width: 991px) { [data-stargo-grid="w-node-_8fd1d186-4590-97f8-ca96-eaab35b924c2-993a4d49"] { justify-self: end; } }
@media (max-width: 479px) {
  [data-stargo-grid="w-node-_8fd1d186-4590-97f8-ca96-eaab35b924c0-993a4d49"] { justify-self: start; }
  [data-stargo-grid="w-node-_8fd1d186-4590-97f8-ca96-eaab35b924c2-993a4d49"] { justify-self: center; }
}
@media (max-width: 767px) {
  /* The donor had four categories; STARGO has two. Don't retain empty tracks. */
  .sc-scope .pricing-tabs-menu { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sc-scope .pricing-tab-link { display: flex; align-items: center; justify-content: center; min-height: 52px; }
}
@media (min-width: 768px) and (max-width: 991px) {
  /* Match the three columns of the animated phone below. The donor's 1:2.5:1
     intro grid squeezed copy; a full-width row would intersect the phone's
     retained upward entrance. Equal columns preserve its clear centre lane. */
  .lx-scope .lx-hero-home-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lx-scope .lx-hero-home-mobile { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* The retained entrance scales the holder to 1.5. Size its content for that
     largest state; do not override the animation's transform or timing. */
  .lx-scope .lx-home-hero-mobile-wrapper .lx-integrations_06-app { width: calc(100% / 1.5); }
  .lx-scope .lx-hero-desc { width: 100%; font-size: 24px; }
}

/* ======================================================================
   Template restore, 2026-09-06: original imagery and composition back,
   STARGO copy adapted to the containers. No interaction data changed.
   ====================================================================== */

/* Pricing-ladder title: the orb sits inline before the first character (build
   moves it inside the heading), so it travels with the centred first line in
   both languages instead of being pinned 50px from the block's left edge. */
.h2.for-stats { text-indent: 0; }
.h2.for-stats .video-logo.for-sct.stargo-inline-orb { position: static; display: inline-flex; vertical-align: -0.14em; margin: 0 .18em 0 0; inset: auto; }

/* The template's client marks on the scenario and ladder cards → the STARGO wordmark. */
.logo-testi-1.stargo-card-mark { width: auto; height: 16px; }
.card-stats-side .logo-testi-1.stargo-card-mark { height: 12px; }

/* Blog and article pages (lifelogx design) */
.lx-scope .lx-post-meta { margin: 1rem 0 0; color: var(--_primitives---primary--text-grey, #989898); font-size: .95rem; }
.lx-scope .lx-post-meta a { color: inherit; text-decoration: underline; }
.lx-scope .lx-post-date { display: block; margin-top: .4rem; font-size: .85rem; color: var(--_primitives---primary--text-dark-grey, #717171); }
.lx-scope a.lx-related-item { color: inherit; text-decoration: none; transition: opacity .3s; }
.lx-scope a.lx-related-item:hover { opacity: .75; }
.lx-scope .lx-text-rich-text h3 { margin-top: 2.5rem; }
.lx-scope .lx-text-rich-text a { color: var(--_semantics---primary, #e393bd); }
.lx-scope .lx-blog-details-image-holder .lx-blog-image.lx-details { width: 100%; }
@media (max-width: 991px) {
  .lx-scope .lx-blog-details-grid { grid-template-columns: 1fr; }
  .lx-scope .lx-blog-list { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
  .lx-scope .lx-blog-list { grid-template-columns: 1fr; }
}
/* About: the four hero circles are AI-employee roles, not people. */
.lx-scope .lx-about-name { white-space: nowrap; }

/* Mono's element-level typography (p/li at .7 opacity, -.5px tracking, 500
   weight, its own sizes; h4 tracking; blockquote colour) reaches into the
   lifelogx scope because both stylesheets share the page. The lifelogx layer
   scopes its own element rules with :where(), so this reset carries the same
   specificity, loads last, and still loses to every lifelogx class rule. */
:where(.lx-scope) :is(p, li) { opacity: 1; font-size: inherit; line-height: inherit; font-weight: inherit; letter-spacing: normal; }
:where(.lx-scope) :is(h1, h2, h3, h4, h5, h6) { letter-spacing: normal; }
:where(.lx-scope) blockquote { color: inherit; font-weight: inherit; }

/* Navigation labels. Mono's .button-link is a wrapping flex row (moon icon + label,
   slid 16px left so the icon hides until hover) and its labels were short.
   STARGO's English labels are longer, so at 992-1279px the label wrapped under
   the icon and the slide clipped its first letters; in the closed overlay menu
   the wider English items reached past the viewport and the page could be
   scrolled sideways at 1024-1100px. Keep icon and label on one line, give the
   English row a slightly smaller size where the template's 49% column cannot
   hold it, and size the overlay labels to the viewport in that range. */
.button-link { flex-wrap: nowrap; }                 /* top nav, pill and footer grid: icon and label on one line */
.navigation-text-main { white-space: nowrap; }
@media (min-width: 992px) {
  .navigation-top .nav-menu.first .button-link { flex-shrink: 0; }
}
@media (min-width: 992px) and (max-width: 1439px) {
  html[lang="en"] .navigation-top .nav-menu.first { grid-column-gap: 10px; }
  html[lang="en"] .navigation-top .navigation-text-main { font-size: 15px; }
  /* Overlay menu (desktop drawer): the template's 48px labels in a ~22vw column.
     "AI Workforce" and the legal row are wider than "Home"/"Work (4)" were. */
  html[lang="en"] .menu-wrapper .menu-item .button-with-line { font-size: min(var(--font--h2), 3.1vw); }
  html[lang="en"] .menu-wrapper .menu-item .button-text { white-space: nowrap; }
  html[lang="en"] .menu-wrapper .flex-bottom { flex-wrap: wrap; }
}
@media (min-width: 992px) and (max-width: 1279px) {
  html[lang="en"] .navigation-top .nav-menu.first { grid-column-gap: 8px; }
  html[lang="en"] .navigation-top .navigation-text-main { font-size: 14px; }
}

/* "No writing" words: CJK text may break between any two characters, so the
   template's 1fr / 2.5fr / 1fr grid gave "等提示" a column narrower than the word
   and wrapped it into two lines. Keep each word on one line, as the template's
   Latin words are, and let the column size itself to the word. */
.lx-scope .lx-big-gradient-text { white-space: nowrap; }

/* Feature cards. The template's fixed-height cards (24rem / 21.5rem) sit in
   three 224px columns at tablet width, where four lines of 2rem no longer fit
   (the template's own English copy is clipped there as well): 1.5rem holds the
   four lines. Between 992 and 1279px the English titles need 1.8rem to stay on
   one line beside their icon; at 2rem "Works anywhere" wrapped and pushed the
   copy out through the top of the card. */
@media (min-width: 768px) and (max-width: 991px) {
  .lx-scope .lx-expandable-text { font-size: 1.5rem; }
}
@media (min-width: 992px) and (max-width: 1279px) {
  html[lang="en"] .lx-scope .lx-expandable-icon-text .lx-expandable-text { font-size: 1.6rem; }
}

/* Footer grids. The template's "Pages" grid has four equal columns for five
   one-word links; STARGO's has three columns of longer labels, so it gets three.
   The contact grid keeps the template's own two-column spans (e-mail + WhatsApp,
   website), but a footer link hides its icon by sliding 16px left inside an
   overflow-hidden box, so a label must be 17px narrower than its column: below
   1280px the footer links are set at 15px and the WhatsApp label drops its
   prefix. */
.footer .footer-small-grid:not(.sec):has(> .flex-item > a.button-link) { grid-template-columns: repeat(3, 1fr); }
/* .navigation-text-main is a flex container, so the prefix span is a flex item
   and the space after "WhatsApp" is trimmed: put that gap back as a margin. */
.footer .stargo-wa { margin-right: .3em; }
@media (max-width: 1279px) {
  .footer .navigation-text-main { font-size: 15px; }
  .footer .stargo-wa { display: none; }
}
@media (max-width: 479px) {
  .footer .footer-small-grid:not(.sec):has(> .flex-item > a.button-link) { grid-template-columns: 1fr 1fr; }
}