/* Ruty 2026 visual refresh — wide editorial product system. */
body.ruty-gemini-page {
  --ruty-page-edge: clamp(16px, 1.25vw, 24px);
  --ruty-wide: 1472px;
  --ruty-content: 1280px;
  --ruty-white: #fff;
  --ruty-broken-white: #e9e9e9;
  --ruty-soft: #eef1f3;
  --ruty-ink: #101112;
  --ruty-navy: #102a43;
  --ruty-blue: #6f9dca;
  --ruty-line: rgba(16, 17, 18, .14);
  /* Wide letterbox hero: the frame stays full-bleed and gets shorter,
     so the stage reads as an elongated band instead of a tall panel. */
  --ruty-hero-height: min(calc(100svh - 140px), clamp(450px, 42vw, 700px));
  /* The hero frame hugs the viewport tighter than the rest of the page, so it
     gets its own inset instead of riding on --ruty-page-edge (which also sets
     the header padding and the section measure). */
  --ruty-hero-edge: clamp(10px, .75vw, 14px);
  /* Header height lives in a variable: the nav geometry below needs high
     specificity to beat shared-resizable-navbar.css, so breakpoints retune
     the token instead of fighting the selector again. */
  --ruty-nav-h: 72px;
  overflow-x: clip;
  background: var(--ruty-white) !important;
  color: var(--ruty-ink) !important;
}

/* The shared Scale header is fixed. Keep its space in document flow even when
   the announcement is dismissed, so the hero never jumps underneath it. */
body.ruty-gemini-page::before {
  content: "";
  display: block;
  width: 100%;
  height: var(--home-nav-height, 72px);
}

body.ruty-gemini-page .ruty-liquid-page-bg { display: none !important; }

/* Announcement and a proper full-width product header. */
body.ruty-gemini-page .announcement {
  position: relative !important;
  z-index: 250 !important;
  width: 100% !important;
  min-height: 36px !important;
  padding: 8px 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  border: 0 !important;
  background: #050505 !important;
  color: #fff !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
}

body.ruty-gemini-page .announcement strong { font-weight: 600 !important; }
body.ruty-gemini-page .announcement a { color: #fff !important; font-weight: 600 !important; text-underline-offset: 3px; }
body.ruty-gemini-page .announcement button {
  position: absolute !important;
  right: 18px !important;
  top: 50% !important;
  width: 28px !important;
  height: 28px !important;
  padding: 0 !important;
  translate: 0 -50% !important;
  border: 0 !important;
  background: transparent !important;
  color: rgba(255,255,255,.72) !important;
  font-size: 18px !important;
}

/* Only the expanded (top of page) state is re-laid-out as a full-width bar. The
   compact state centres itself with left:50% + translateX(-50%), so killing the
   transform there would pin the pill to the right edge. :not(compact) rather
   than [expanded] so it still holds before the nav script sets the attribute. */
html body.ruty-gemini-page nav.cnw-global-nav.cnw-nav-resizable:not([data-nav-state="compact"]) {
  position: sticky !important;
  inset: auto !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  height: var(--ruty-nav-h) !important;
  /* shared-resizable-navbar pins min-height:88px; without this the height above
     is a no-op and the bar keeps the taller default. */
  min-height: var(--ruty-nav-h) !important;
  margin: 0 !important;
  padding: 0 var(--ruty-page-edge) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  grid-template-columns: none !important;
  gap: clamp(26px, 2.6vw, 44px) !important;
  transform: none !important;
  translate: none !important;
  scale: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: rgba(255,255,255,.96) !important;
  color: var(--ruty-ink) !important;
  box-shadow: none !important;
  backdrop-filter: blur(16px) !important;
}

html body.ruty-gemini-page nav.cnw-global-nav.cnw-nav-resizable .cnw-global-brand {
  min-width: auto !important;
  height: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 9px !important;
  justify-content: flex-start !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--ruty-ink) !important;
}

html body.ruty-gemini-page nav.cnw-global-nav.cnw-nav-resizable .cnw-global-brand img {
  width: 25px !important;
  height: 25px !important;
  filter: none !important;
}

html body.ruty-gemini-page nav.cnw-global-nav.cnw-nav-resizable .cnw-global-brand > span {
  display: inline !important;
  color: var(--ruty-ink) !important;
  font-size: 14px !important;
  letter-spacing: -.02em !important;
}

html body.ruty-gemini-page nav.cnw-global-nav.cnw-nav-resizable .cnw-global-primary {
  position: static !important;
  display: flex !important;
  transform: none !important;
  gap: clamp(24px, 2.5vw, 42px) !important;
}

html body.ruty-gemini-page nav.cnw-global-nav.cnw-nav-resizable :is(.cnw-global-primary > a, .cnw-products-toggle, .cnw-research-toggle) {
  color: var(--ruty-ink) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}

html body.ruty-gemini-page nav.cnw-global-nav.cnw-nav-resizable .cnw-global-actions { margin-left: auto !important; }
html body.ruty-gemini-page nav.cnw-global-nav.cnw-nav-resizable .cnw-global-access {
  min-height: 42px !important;
  padding: 0 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  border-radius: 9px !important;
  background: #0b0b0c !important;
  color: #fff !important;
  font-size: 14px !important;
}

/* Hero: one large framed visual with the proposition integrated into it. */
/* The sticky nav sits in flow, so the global fixed-nav offset on <main> only
   opens a dead white band between header and hero. */
body.ruty-gemini-page main#top {
  padding-top: 0 !important;
  background: var(--ruty-white) !important;
}

body.ruty-gemini-page .hero {
  min-height: 0 !important;
  /* The section itself carries a 1320px measure from ruty-standard; the frame
     has to span the viewport, so widen the section instead of breaking the
     child out of it with viewport units. */
  width: auto !important;
  max-width: none !important;
  margin-inline: 0 !important;
  padding: 8px var(--ruty-hero-edge) clamp(88px, 8vw, 132px) !important;
  background: var(--ruty-white) !important;
}

body.ruty-gemini-page .hero > .container {
  position: relative !important;
  left: auto !important;
  /* 100% of the already-padded .hero, not 100vw: vw units include the
     scrollbar, which made the real gutter half the token on scrolling pages. */
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  transform: none !important;
  display: grid !important;
  grid-template: "hero" var(--ruty-hero-height) / 1fr !important;
  gap: 0 !important;
}

body.ruty-gemini-page .hero-stage {
  position: relative !important;
  inset: auto !important;
  grid-area: hero !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
  height: 100% !important;
  margin: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(16,17,18,.11) !important;
  border-radius: 26px !important;
  background: #f2eee6 !important;
  box-shadow: none !important;
  isolation: isolate !important;
}

body.ruty-gemini-page .hero-stage.ruty-scroll-screen,
body.ruty-gemini-page .hero-stage.ruty-scroll-screen.is-visible {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

body.ruty-gemini-page .hero-stage::before {
  content: "" !important;
  position: absolute !important;
  z-index: 2 !important;
  inset: 0 !important;
  display: block !important;
  pointer-events: none !important;
  /* Scrim is a bottom-left spotlight, not a full-width curtain. The copy only
     occupies that corner, and a heavy vertical ramp was blacking out the whole
     lower half of the product shot in this shorter frame. */
  background:
    radial-gradient(105% 128% at 1% 106%,
      rgba(4,8,13,.93) 0%,
      rgba(4,8,13,.78) 24%,
      rgba(4,8,13,.42) 45%,
      rgba(4,8,13,.12) 63%,
      transparent 76%),
    linear-gradient(180deg, transparent 52%, rgba(4,8,13,.10) 76%, rgba(4,8,13,.26) 100%) !important;
}

body.ruty-gemini-page .hero-stage video {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: 50% 32% !important;
  transform: none !important;
  border-radius: 0 !important;
  background: #f2eee6 !important;
}

body.ruty-gemini-page .hero-copy {
  position: absolute !important;
  z-index: 4 !important;
  inset: auto auto 0 0 !important;
  width: min(100%, 760px) !important;
  max-width: none !important;
  margin: 0 !important;
  padding: clamp(30px, 3.8vw, 60px) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0 !important;
  pointer-events: none !important;
  text-align: left !important;
}

body.ruty-gemini-page .hero h1 {
  width: auto !important;
  max-width: 20ch !important;
  margin: 0 !important;
  justify-self: start !important;
  color: #fff !important;
  /* Sentence case, regular weight, open tracking — the reference header sets
     the title as running text, not as a condensed all-caps lockup. */
  font: 400 clamp(38px, 3.3vw, 60px)/1.06 "Inter Tight", Arial, sans-serif !important;
  letter-spacing: -.028em !important;
  text-transform: none !important;
  text-align: left !important;
  text-wrap: balance !important;
}

body.ruty-gemini-page .hero-copy > p {
  width: auto !important;
  max-width: 620px !important;
  margin: 18px 0 0 !important;
  justify-self: start !important;
  color: rgba(255,255,255,.9) !important;
  font: 400 clamp(16px, 1.15vw, 20px)/1.45 "Inter Tight", Arial, sans-serif !important;
  letter-spacing: -.011em !important;
  text-transform: none !important;
  text-align: left !important;
  text-align-last: left !important;
}

body.ruty-gemini-page .hero-actions {
  width: auto !important;
  margin: 24px 0 0 !important;
  display: flex !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  pointer-events: auto !important;
}

body.ruty-gemini-page .hero .btn {
  min-height: 40px !important;
  padding: 0 14px !important;
  border: 1px solid #fff !important;
  border-radius: 9px !important;
  background: #fff !important;
  color: var(--ruty-ink) !important;
  font-size: 13px !important;
}

body.ruty-gemini-page .hero .btn.secondary {
  border-color: rgba(255,255,255,.34) !important;
  background: rgba(255,255,255,.08) !important;
  color: #fff !important;
  backdrop-filter: blur(10px) !important;
}

body.ruty-gemini-page .play-control { z-index: 5 !important; }

/* CTA wipe, as in the reference header: a translucent veil in the button's own
   text colour grows in from the left on hover and retreats out to the right on
   exit. The transform-origin flip is what makes the exit asymmetric — a plain
   transition would just rewind to the left. z-index:-1 plus isolation keeps the
   veil above the button fill but underneath the label, so the text stays crisp. */
body.ruty-gemini-page :is(.hero, .section, .product-explainer, .final-cta) .btn {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
}

body.ruty-gemini-page :is(.hero, .section, .product-explainer, .final-cta) .btn::before {
  content: "" !important;
  position: absolute !important;
  z-index: -1 !important;
  inset: 0 !important;
  border-radius: inherit !important;
  background: currentColor !important;
  opacity: .35 !important;
  transform: scaleX(0) !important;
  transform-origin: right center !important;
  transition: transform .55s cubic-bezier(.22, 1, .36, 1) !important;
  pointer-events: none !important;
}

body.ruty-gemini-page :is(.hero, .section, .product-explainer, .final-cta) .btn:is(:hover, :focus-visible)::before {
  transform: scaleX(1) !important;
  transform-origin: left center !important;
}

/* Shared wide rhythm. */
body.ruty-gemini-page :is(.product-explainer__inner, .section > .container) {
  width: min(var(--ruty-wide), calc(100% - (var(--ruty-page-edge) * 2))) !important;
  max-width: none !important;
  margin-inline: auto !important;
}

body.ruty-gemini-page :is(.product-explainer__inner, .section > .container) > * { max-width: none; }
body.ruty-gemini-page :is(.product-explainer__inner, .section) {
  padding-top: clamp(92px, 9vw, 150px) !important;
  padding-bottom: clamp(92px, 9vw, 150px) !important;
}

/* Scroll-driven expansion. modelos.js only writes --ruty-explainer-progress
   (0 = collapsed, 1 = expanded); the geometry stays here so the expanded state
   lands on exactly the same gutter as the hero frame. Defaults to 1 so the
   block is already expanded if the script has not run yet. */
body.ruty-gemini-page .product-explainer {
  --ruty-explainer-progress: 1;
  --ruty-explainer-start: 64px;
  --ruty-explainer-scale: calc(.98 + (.02 * var(--ruty-explainer-progress)));
  --ruty-explainer-inset: calc(
    var(--ruty-explainer-start) -
    ((var(--ruty-explainer-start) - var(--ruty-hero-edge)) * var(--ruty-explainer-progress))
  );
  position: relative !important;
  z-index: 1;
  width: calc(100% - (var(--ruty-explainer-inset) * 2)) !important;
  margin-inline: auto !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 20px !important;
  background: #89a3b9 !important;
  color: #fff !important;
  transform: translateZ(0) scale(var(--ruty-explainer-scale)) !important;
  transform-origin: 50% 50% !important;
  backface-visibility: hidden;
  will-change: transform;
}

body.ruty-gemini-page .product-explainer__intro {
  display: grid !important;
  grid-template-columns: minmax(0, .9fr) minmax(360px, .72fr) !important;
  gap: clamp(70px, 10vw, 180px) !important;
  align-items: end !important;
}

body.ruty-gemini-page .product-explainer__intro h2 {
  max-width: 11ch !important;
  font-size: clamp(50px, 5.5vw, 84px) !important;
  font-weight: 500 !important;
  line-height: .95 !important;
  color: #fff !important;
}

body.ruty-gemini-page .product-explainer__copy {
  max-width: 620px !important;
  color: #fff !important;
  font-family: "Inter Tight", Arial, sans-serif !important;
  font-size: clamp(25px, 2.15vw, 35px) !important;
  line-height: 1.18 !important;
  letter-spacing: -.04em !important;
}

/* Alternating clean white / broken white surfaces. The decision section used to
   share this rounded-panel treatment; it is a full-bleed black band now. */
body.ruty-gemini-page #plugins {
  width: calc(100% - (var(--ruty-hero-edge) * 2)) !important;
  /* Without this the 1320px measure from ruty-standard clamps the width back. */
  max-width: none !important;
  margin-inline: auto !important;
  overflow: hidden !important;
  border-radius: 28px !important;
  background: var(--ruty-broken-white) !important;
}

body.ruty-gemini-page #use-cases,
body.ruty-gemini-page #pricing { background: var(--ruty-white) !important; }

body.ruty-gemini-page :is(.ruty-decision-heading, .center) {
  max-width: 1080px !important;
  margin-inline: auto !important;
  text-align: center !important;
}

body.ruty-gemini-page :is(.ruty-decision-heading h2, .section-title) {
  color: var(--ruty-ink) !important;
  font-size: clamp(54px, 6vw, 92px) !important;
  font-weight: 500 !important;
  line-height: .93 !important;
  letter-spacing: -.065em !important;
  text-transform: none !important;
}

body.ruty-gemini-page .section-lead {
  max-width: 760px !important;
  margin-top: 28px !important;
  color: rgba(16,17,18,.68) !important;
  font-size: clamp(18px, 1.35vw, 22px) !important;
  line-height: 1.45 !important;
}

body.ruty-gemini-page .eyebrow {
  margin-bottom: 20px !important;
  color: rgba(16,17,18,.52) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

/* ---------------------------------------------------------------------------
   Decision section on black. Palette flip only: the diagram markup, the
   pointer-tracked rainbow border on .ruty-decision-module::before and the
   assemble animation all stay — this retunes their tokens for a dark surface.
   --------------------------------------------------------------------------- */
body.ruty-gemini-page .ruty-decision-section {
  --decision-ink: #111416;
  --decision-blue: #4f7fac;
  --decision-pale: #e8edf0;
  --decision-line: rgba(17, 20, 22, .14);
  --decision-card: #fff;
  --decision-muted: #5e676d;
  /* Full-bleed band, not an inset rounded panel: the black runs edge to edge
     and only the cards inside sit on the page gutter. */
  width: 100% !important;
  max-width: none !important;
  margin: 0 0 clamp(52px, 5.2vw, 96px) !important;
  border-radius: 0 !important;
  background: #f3f1ec !important;
}

/* The band is full-bleed but the cards are not: they sit on a narrower measure
   with generous side margins, which also keeps them from stretching too wide. */
body.ruty-gemini-page .ruty-decision-section > .container {
  width: min(var(--ruty-content), calc(100% - 48px)) !important;
  max-width: none !important;
  margin-inline: auto !important;
}

/* Heading as in the reference: left aligned, sentence case, regular weight and
   about half the size of the page's other section titles. */
/* ruty-gemini-scroll.css pins this header to a shared centred editorial axis
   from `body.ruty-gemini-page main#top …` — an ID selector, plus it makes the
   header a centred flex column and caps the h2 at 1040px with auto margins.
   Undoing it takes the same ID in the selector and all four properties. */
html body.ruty-gemini-page main#top .ruty-decision-section .ruty-decision-heading {
  width: 100% !important;
  max-width: none !important;
  margin: 0 0 clamp(34px, 3.4vw, 54px) !important;
  align-items: flex-start !important;
  text-align: left !important;
  /* .reveal leaves a translateX on this header and ruty-capabilities.css kills
     its transition, so the offset stays stuck and knocks the title 7px out of
     line with the cards. */
  transform: none !important;
}

html body.ruty-gemini-page main#top .ruty-decision-section .ruty-decision-heading h2 {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  color: var(--decision-ink) !important;
  font: 400 clamp(30px, 3vw, 46px)/1.05 "Inter Tight", Arial, sans-serif !important;
  letter-spacing: -.042em !important;
  text-align: left !important;
  text-transform: none !important;
}

/* 12-column bed: three cards across the top, two wide ones underneath. */
body.ruty-gemini-page .ruty-decision-grid {
  grid-template-columns: repeat(12, 1fr) !important;
  grid-template-rows: auto auto !important;
  gap: 12px !important;
  color: var(--decision-ink) !important;
}

body.ruty-gemini-page :is(.ruty-state-module, .ruty-policy-module, .ruty-sizing-module) {
  grid-column: span 4 !important;
  grid-row: 1 !important;
  min-height: 306px !important;
}

body.ruty-gemini-page :is(.ruty-weight-module, .ruty-risk-module) {
  grid-column: span 6 !important;
  grid-row: 2 !important;
  min-height: 246px !important;
}

body.ruty-gemini-page .ruty-decision-module {
  border: 1px solid rgba(17, 20, 22, .16) !important;
  border-radius: 18px !important;
  background: var(--decision-card) !important;
  box-shadow: none !important;
}

/* Card anatomy from the reference: a chip + mono tag row pinned to the top, and
   everything else pushed to the bottom. margin-top:auto lives on the h3 so the
   whole tail (title, copy, diagram) travels down as one block — putting it on
   the diagram too would split the free space between two auto margins. */
body.ruty-gemini-page .ruty-module-head {
  display: flex !important;
  align-items: center !important;
  gap: 11px !important;
}

body.ruty-gemini-page .ruty-module-icon {
  width: 34px !important;
  height: 34px !important;
  display: grid !important;
  place-items: center !important;
  flex: 0 0 auto !important;
  border-radius: 10px !important;
  background: #e8eef3 !important;
}

body.ruty-gemini-page .ruty-module-icon svg {
  width: 19px !important;
  height: 19px !important;
  stroke: #406b91 !important;
  stroke-width: 1.6 !important;
}

body.ruty-gemini-page .ruty-module-tag {
  color: var(--decision-muted) !important;
  font: 11px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace !important;
  letter-spacing: .02em !important;
  text-transform: uppercase !important;
}

body.ruty-gemini-page .ruty-decision-module h3 {
  margin-top: auto !important;
  padding-top: 24px !important;
  color: var(--decision-ink) !important;
  font: 500 clamp(19px, 1.45vw, 23px)/1.14 "Inter Tight", Arial, sans-serif !important;
  letter-spacing: -.024em !important;
}

body.ruty-gemini-page .ruty-decision-module p {
  margin-top: 6px !important;
  color: var(--decision-muted) !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
}

body.ruty-gemini-page .ruty-weight-output { font-size: 26px !important; }
body.ruty-gemini-page .ruty-weight-output small { font-size: 9px !important; }
body.ruty-gemini-page .ruty-risk-rails b { width: 118px; font-size: 11px; }
body.ruty-gemini-page .ruty-state-chart text { font-size: 10px !important; }

/* The glow ring reads as a highlight on black, so the lit state only needs to
   lift the card surface — the white inset rim from the light theme would bloom. */
body.ruty-gemini-page .ruty-decision-module.is-glow-active {
  border-color: rgba(79, 127, 172, .7) !important;
  box-shadow: 0 18px 42px rgba(31, 49, 62, .12) !important;
}

/* Diagram internals that were hardcoded for the pale-blue theme. */
body.ruty-gemini-page :is(.ruty-chart-guide, .ruty-range-label-line) { stroke: rgba(17,20,22,.16) !important; }
body.ruty-gemini-page .ruty-state-chart text { fill: var(--decision-muted) !important; }
body.ruty-gemini-page :is(.ruty-current-point, .ruty-policy-start) { fill: #101012 !important; }
body.ruty-gemini-page #rutyPolicyDots circle { fill: rgba(17,20,22,.18) !important; }
body.ruty-gemini-page .ruty-policy-pending { stroke: rgba(17,20,22,.2) !important; }
body.ruty-gemini-page .ruty-sizing-bars { border-bottom-color: rgba(17,20,22,.16) !important; }
body.ruty-gemini-page .ruty-sizing-bars i.is-active { background: #3c5f96 !important; }
body.ruty-gemini-page .ruty-sizing-bars i.is-current::before { background: #101012 !important; }
body.ruty-gemini-page :is(.ruty-policy-target-outer, .ruty-policy-target-mid) { stroke: rgba(17,20,22,.28) !important; }
body.ruty-gemini-page .ruty-weight-output { color: var(--decision-ink) !important; }
body.ruty-gemini-page .ruty-weight-output small { color: var(--decision-muted) !important; }
body.ruty-gemini-page .ruty-slider-labels { color: var(--decision-muted) !important; }
body.ruty-gemini-page .ruty-slider-marks i { background: rgba(17,20,22,.25) !important; }
body.ruty-gemini-page .ruty-slider-shell input::-webkit-slider-runnable-track {
  background: linear-gradient(90deg, var(--decision-blue) 0 var(--selected-weight), rgba(17,20,22,.16) var(--selected-weight) 100%) !important;
}
body.ruty-gemini-page .ruty-slider-shell input::-moz-range-track { background: rgba(17,20,22,.16) !important; }
body.ruty-gemini-page .ruty-slider-shell input::-webkit-slider-thumb { background: #fff !important; border-color: var(--decision-blue) !important; }
body.ruty-gemini-page .ruty-slider-shell input::-moz-range-thumb { background: #fff !important; border-color: var(--decision-blue) !important; }

/* Every visual was absolutely pinned to the bottom of a fixed-height card, so
   in these shorter cards they overlapped the copy. Flow them instead and let
   margin-top:auto hold them at the bottom — now they also contribute height,
   so a card can never be shorter than the diagram it contains. */
body.ruty-gemini-page .ruty-decision-module {
  display: flex !important;
  flex-direction: column !important;
}

body.ruty-gemini-page :is(
  .ruty-state-chart,
  .ruty-policy-chart,
  .ruty-sizing-bars,
  .ruty-slider-shell,
  .ruty-risk-rails
) {
  position: static !important;
  width: 100% !important;
  margin-top: 16px !important;
}

body.ruty-gemini-page .ruty-state-chart { height: auto !important; }
body.ruty-gemini-page .ruty-policy-chart { height: 150px !important; }
body.ruty-gemini-page .ruty-sizing-bars { margin-bottom: 6px !important; }

/* Wide card: one-line heading and a value that clears the slider rail. */
body.ruty-gemini-page .ruty-weight-module h3 { max-width: none !important; }
body.ruty-gemini-page .ruty-weight-output {
  margin: 14px 0 0 !important;
  text-align: left !important;
}

/* Fifth card: risk rails. */
body.ruty-gemini-page .ruty-risk-rails {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-bottom: 4px;
}

body.ruty-gemini-page .ruty-risk-rails span {
  display: flex;
  align-items: center;
  gap: 14px;
}

body.ruty-gemini-page .ruty-risk-rails b {
  flex: 0 0 auto;
  width: 132px;
  color: var(--decision-muted);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .01em;
}

body.ruty-gemini-page .ruty-risk-rails i {
  position: relative;
  flex: 1 1 auto;
  height: 4px;
  border-radius: 4px;
  background: rgba(17, 20, 22, .12);
}

body.ruty-gemini-page .ruty-risk-rails em {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--rail);
  border-radius: inherit;
  background: var(--decision-blue);
}

/* The full decision system assembles when the grid enters the viewport. */
body.ruty-gemini-page .ruty-decision-grid.is-assembling .ruty-decision-module {
  --enter-delay: 0s;
  opacity: 0 !important;
  transform: translate3d(var(--from-x, 0px), var(--from-y, 80px), 0) scale(.94) !important;
  filter: brightness(.58) !important;
  transition:
    opacity .72s ease var(--enter-delay),
    transform 1.08s cubic-bezier(.22, 1, .36, 1) var(--enter-delay),
    filter .96s ease var(--enter-delay) !important;
  will-change: transform, opacity, filter;
}

/* Entry offsets only — the stagger itself is timed in modelos.js, per card, so
   a card never starts its run while it is still below the fold. */
body.ruty-gemini-page .ruty-decision-grid.is-assembling .ruty-state-module { --from-x: -110px; --from-y: 24px; --enter-delay: .04s; }
body.ruty-gemini-page .ruty-decision-grid.is-assembling .ruty-policy-module { --from-x: 0px; --from-y: 100px; --enter-delay: .20s; }
body.ruty-gemini-page .ruty-decision-grid.is-assembling .ruty-sizing-module { --from-x: 110px; --from-y: 24px; --enter-delay: .36s; }
body.ruty-gemini-page .ruty-decision-grid.is-assembling .ruty-weight-module { --from-x: -140px; --from-y: 36px; --enter-delay: .52s; }
body.ruty-gemini-page .ruty-decision-grid.is-assembling .ruty-risk-module { --from-x: 140px; --from-y: 36px; --enter-delay: .68s; }

/* Reduced motion: the grid gets .is-assembled instead of a scroll listener. */
body.ruty-gemini-page .ruty-decision-grid.is-assembling.is-assembled .ruty-decision-module {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) scale(1) !important;
  filter: brightness(1) !important;
}

body.ruty-gemini-page .ruty-decision-grid.is-assembling :is(.ruty-history-line, .ruty-range-line, .ruty-range-center) {
  stroke-dasharray: 520;
  stroke-dashoffset: 520;
}

body.ruty-gemini-page .ruty-decision-grid.is-assembling .ruty-range-area {
  opacity: 0;
  transform: scaleX(.04);
  transform-box: fill-box;
  transform-origin: left center;
}

body.ruty-gemini-page .ruty-decision-grid.is-assembling .ruty-policy-progress {
  stroke-dashoffset: 100 !important;
  transition: stroke-dashoffset 1.05s cubic-bezier(.22, 1, .36, 1) .58s !important;
}

body.ruty-gemini-page .ruty-decision-grid.is-assembling :is(.ruty-sizing-bars i, .ruty-risk-rails em) {
  opacity: .18;
  transform: scaleY(.08);
  transform-origin: center bottom;
}

body.ruty-gemini-page .ruty-decision-grid.is-assembling .ruty-risk-rails em {
  transform: scaleX(0);
  transform-origin: left center;
}

body.ruty-gemini-page .ruty-decision-grid.is-assembling.is-assembled :is(.ruty-history-line, .ruty-range-line, .ruty-range-center) {
  animation: ruty-decision-draw 1.05s cubic-bezier(.22, 1, .36, 1) .42s forwards;
}

body.ruty-gemini-page .ruty-decision-grid.is-assembling.is-assembled .ruty-range-area {
  animation: ruty-decision-area .82s cubic-bezier(.22, 1, .36, 1) .72s forwards;
}

body.ruty-gemini-page .ruty-decision-grid.is-assembling.is-assembled .ruty-policy-progress {
  stroke-dashoffset: 0 !important;
}

body.ruty-gemini-page .ruty-decision-grid.is-assembling.is-assembled .ruty-sizing-bars i {
  animation: ruty-decision-rise .72s cubic-bezier(.22, 1, .36, 1) forwards;
}

body.ruty-gemini-page .ruty-decision-grid.is-assembling.is-assembled .ruty-sizing-bars i:nth-child(1) { animation-delay: .42s; }
body.ruty-gemini-page .ruty-decision-grid.is-assembling.is-assembled .ruty-sizing-bars i:nth-child(2) { animation-delay: .48s; }
body.ruty-gemini-page .ruty-decision-grid.is-assembling.is-assembled .ruty-sizing-bars i:nth-child(3) { animation-delay: .54s; }
body.ruty-gemini-page .ruty-decision-grid.is-assembling.is-assembled .ruty-sizing-bars i:nth-child(4) { animation-delay: .60s; }
body.ruty-gemini-page .ruty-decision-grid.is-assembling.is-assembled .ruty-sizing-bars i:nth-child(5) { animation-delay: .66s; }
body.ruty-gemini-page .ruty-decision-grid.is-assembling.is-assembled .ruty-sizing-bars i:nth-child(6) { animation-delay: .72s; }
body.ruty-gemini-page .ruty-decision-grid.is-assembling.is-assembled .ruty-sizing-bars i:nth-child(7) { animation-delay: .78s; }
body.ruty-gemini-page .ruty-decision-grid.is-assembling.is-assembled .ruty-sizing-bars i:nth-child(8) { animation-delay: .84s; }

body.ruty-gemini-page .ruty-decision-grid.is-assembling.is-assembled .ruty-risk-rails em {
  animation: ruty-decision-rail .82s cubic-bezier(.22, 1, .36, 1) forwards;
}

body.ruty-gemini-page .ruty-decision-grid.is-assembling.is-assembled .ruty-risk-rails span:nth-child(1) em { animation-delay: .62s; }
body.ruty-gemini-page .ruty-decision-grid.is-assembling.is-assembled .ruty-risk-rails span:nth-child(2) em { animation-delay: .72s; }
body.ruty-gemini-page .ruty-decision-grid.is-assembling.is-assembled .ruty-risk-rails span:nth-child(3) em { animation-delay: .82s; }

@keyframes ruty-decision-draw {
  to { stroke-dashoffset: 0; }
}

@keyframes ruty-decision-area {
  to { opacity: 1; transform: scaleX(1); }
}

@keyframes ruty-decision-rise {
  to { opacity: 1; transform: scaleY(1); }
}

@keyframes ruty-decision-rail {
  to { opacity: 1; transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
  body.ruty-gemini-page .ruty-decision-grid.is-assembling .ruty-decision-module {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }

  body.ruty-gemini-page .ruty-decision-grid.is-assembling :is(
    .ruty-history-line,
    .ruty-range-line,
    .ruty-range-center,
    .ruty-range-area,
    .ruty-sizing-bars i,
    .ruty-risk-rails em
  ) {
    opacity: 1 !important;
    stroke-dashoffset: 0 !important;
    transform: none !important;
    animation: none !important;
  }

  body.ruty-gemini-page .ruty-decision-grid.is-assembling .ruty-policy-progress {
    stroke-dashoffset: 0 !important;
    transition: none !important;
  }
}

body.ruty-gemini-page .ruty-template-version-grid {
  grid-template-columns: repeat(2, minmax(0, 520px)) !important;
  gap: 18px !important;
  margin-top: 72px !important;
}

body.ruty-gemini-page .ruty-template-version-card {
  overflow: hidden !important;
  border: 1px solid rgba(16,17,18,.1) !important;
  border-radius: 20px !important;
  box-shadow: none !important;
}

body.ruty-gemini-page .plugin-carousel { margin-top: 72px !important; }
body.ruty-gemini-page .plugin-card {
  overflow: hidden !important;
  border: 1px solid rgba(16,17,18,.1) !important;
  border-radius: 18px !important;
  background: #fff !important;
  box-shadow: none !important;
}

body.ruty-gemini-page .plugin-art.has-specific-art { border-radius: 0 !important; }
body.ruty-gemini-page .round-btn {
  border-color: rgba(16,17,18,.12) !important;
  background: #fff !important;
  color: var(--ruty-ink) !important;
}

body.ruty-gemini-page .pricing-switch {
  margin-top: 54px !important;
  border-radius: 10px !important;
  background: var(--ruty-soft) !important;
}

body.ruty-gemini-page .pricing-grid { gap: 12px !important; }
body.ruty-gemini-page .price-card {
  border: 1px solid rgba(16,17,18,.1) !important;
  border-radius: 18px !important;
  background: var(--ruty-soft) !important;
  box-shadow: none !important;
}

body.ruty-gemini-page .price-card.featured {
  border-color: var(--ruty-navy) !important;
  background: var(--ruty-navy) !important;
  color: #fff !important;
}

body.ruty-gemini-page .price-card.featured :is(.plan-copy, li) { color: rgba(255,255,255,.72) !important; }

body.ruty-gemini-page .final-cta {
  --ruty-final-progress: 1;
  --ruty-final-start: 64px;
  --ruty-final-scale: calc(.98 + (.02 * var(--ruty-final-progress)));
  --ruty-final-inset: calc(
    var(--ruty-final-start) -
    ((var(--ruty-final-start) - var(--ruty-hero-edge)) * var(--ruty-final-progress))
  );
  width: calc(100% - (var(--ruty-final-inset) * 2)) !important;
  max-width: none !important;
  margin: 0 auto var(--ruty-hero-edge) !important;
  padding: clamp(90px, 9vw, 150px) 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 28px !important;
  background: var(--ruty-navy) !important;
  transform: translateZ(0) scale(var(--ruty-final-scale)) !important;
  transform-origin: 50% 50% !important;
  backface-visibility: hidden;
  will-change: transform;
}

body.ruty-gemini-page .final-cta > .container {
  width: min(var(--ruty-content), calc(100% - 48px)) !important;
  max-width: none !important;
}

body.ruty-gemini-page .final-cta h2 {
  max-width: 12ch !important;
  color: #fff !important;
  font-size: clamp(56px, 6.2vw, 96px) !important;
  font-weight: 500 !important;
  line-height: .93 !important;
  letter-spacing: -.065em !important;
}

body.ruty-gemini-page .cnw-global-footer { background: #050505 !important; }
body.ruty-gemini-page .cnw-global-footer-inner {
  width: min(var(--ruty-wide), calc(100% - 48px)) !important;
  max-width: none !important;
}

@media (max-width: 980px) {
  body.ruty-gemini-page .announcement { padding-inline: 44px !important; text-align: center !important; }
  body.ruty-gemini-page { --ruty-nav-h: 62px; }
  html body.ruty-gemini-page nav.cnw-global-nav.cnw-nav-resizable .cnw-global-primary { display: none !important; }
  html body.ruty-gemini-page nav.cnw-global-nav.cnw-nav-resizable .cnw-menu-toggle { display: flex !important; }
  html body.ruty-gemini-page nav.cnw-global-nav.cnw-nav-resizable .cnw-menu-toggle span { background: var(--ruty-ink) !important; }
  body.ruty-gemini-page { --ruty-hero-height: min(calc(100svh - 122px), clamp(430px, 55vw, 600px)); }
  body.ruty-gemini-page .product-explainer__intro { grid-template-columns: 1fr !important; gap: 42px !important; }
  /* Single column, as in the reference: the 12-col placements above are more
     specific than the stacking rules in ruty-capabilities.css. */
  body.ruty-gemini-page .ruty-decision-grid { grid-template-columns: 1fr !important; grid-template-rows: none !important; }
  body.ruty-gemini-page .ruty-decision-module,
  body.ruty-gemini-page :is(.ruty-state-module, .ruty-policy-module, .ruty-sizing-module),
  body.ruty-gemini-page :is(.ruty-weight-module, .ruty-risk-module) {
    grid-column: auto !important;
    grid-row: auto !important;
    min-height: 300px !important;
  }
}

@media (max-width: 720px) {
  body.ruty-gemini-page {
    --ruty-page-edge: 12px;
    --ruty-hero-height: min(calc(100svh - 116px), 500px);
  }
  body.ruty-gemini-page .announcement { min-height: 42px !important; font-size: 11px !important; }
  body.ruty-gemini-page .announcement a { display: none !important; }
  html body.ruty-gemini-page nav.cnw-global-nav.cnw-nav-resizable .cnw-global-access { display: none !important; }
  body.ruty-gemini-page .hero { padding-top: 12px !important; }
  body.ruty-gemini-page .hero-stage { min-height: 0 !important; border-radius: 20px !important; }
  body.ruty-gemini-page .hero-stage video { object-position: 58% 38% !important; }
  body.ruty-gemini-page .hero-stage::before {
    background: linear-gradient(180deg, rgba(4,8,13,.14) 0%, rgba(4,8,13,.44) 26%, rgba(4,8,13,.72) 52%, rgba(4,8,13,.94) 100%) !important;
  }
  body.ruty-gemini-page .hero-copy { padding: 28px 24px !important; }
  body.ruty-gemini-page .hero h1 { max-width: 15ch !important; font-size: clamp(33px, 9.8vw, 48px) !important; }
  body.ruty-gemini-page .hero-copy > p { margin-top: 14px !important; font-size: 16px !important; }
  body.ruty-gemini-page .hero-actions { flex-wrap: wrap !important; }
  body.ruty-gemini-page :is(.product-explainer__inner, .section) { padding-top: 76px !important; padding-bottom: 76px !important; }
  body.ruty-gemini-page :is(#plugins, .final-cta) { border-radius: 20px !important; }
  body.ruty-gemini-page .ruty-template-version-grid { grid-template-columns: 1fr !important; }
  body.ruty-gemini-page .final-cta h2 { font-size: clamp(48px, 14vw, 70px) !important; }
}

@media (prefers-reduced-motion: reduce) {
  body.ruty-gemini-page .product-explainer {
    --ruty-explainer-progress: 1 !important;
    transform: none !important;
  }

  body.ruty-gemini-page .final-cta {
    --ruty-final-progress: 1 !important;
    transform: none !important;
  }

  body.ruty-gemini-page *,
  body.ruty-gemini-page *::before,
  body.ruty-gemini-page *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}