/* Canonical Legacy inspiration feed, adapted only for the public landing shelf. */
/* The landing's liquid surface is painted by a child pseudo-element. The
   animated radius must inherit into that pseudo-element or the fill stays 0px. */
@property --fluid-radius { syntax: "<length>"; initial-value: 0px; inherits: true; }

:root {
  --ideas-blue: var(--accent, #065dfd);
  --ideas-blue-rgb: 6 93 253;
  --ideas-ease: cubic-bezier(.2, .86, .22, 1);
  --ideas-radius: 30px;
}

/* Never show the obsolete server-rendered cards or copy while the module boots. */
#inspiration:not([data-inspiration-ready="true"]) {
  min-height: 1240px;
  visibility: hidden;
}

.ticker.next-ticker-continuous { overflow: hidden; }
.ticker.next-ticker-continuous > div {
  display: flex !important;
  width: max-content !important;
  min-width: max-content;
  animation: next-ticker-loop 22s linear infinite !important;
  will-change: transform;
}
.ticker.next-ticker-continuous > div > div { display: contents; }
@keyframes next-ticker-loop { to { transform: translate3d(-50%, 0, 0); } }

.material-symbols-outlined {
  font-family: "Material Symbols Outlined";
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "liga";
}

/* Global landing liquid geometry guard.
   Pointer coordinates are measured from the border box, so the paint must use
   the same origin. While the wave is active (including its exit), the physical
   edge is painted with the fluid colour instead of exposing the base surface. */
.liquid-control {
  --liquid-edge-color: var(--control-fluid, var(--ideas-blue, #065dfd));
  background-clip: border-box !important;
}
.liquid-control.is-fluid-active,
.liquid-control.is-fluid-exiting { border-color: var(--liquid-edge-color) !important; }
.feed-liquid {
  background-origin: border-box !important;
  background-clip: border-box !important;
}

/* Feed controls paint their liquid directly as a background image. Prevent
   the landing's second pseudo-element painter from sitting behind them. */
.feed-liquid::before { display: none !important; }

/* Hero tabs follow the same selected/hover language as the rest of landing. */
.compareTab.is-active,
.compareTab.is-active:hover,
.compareTab.is-active:focus-visible,
.compareTab.is-active.is-fluid-active {
  --control-base: #151516;
  --control-fluid: #151516;
  border-color: #151516 !important;
  background-color: #151516 !important;
  color: #fff !important;
  box-shadow: none !important;
}
.compareTab.is-active::before { background-color: #151516 !important; }
.compareTab:not(.is-active):hover > span,
.compareTab:not(.is-active):focus-visible > span,
.compareTab:not(.is-active).is-fluid-active > span { color: #dce7ff !important; }

/* The supplied references replace only the centre visual of steps 01 and 03. */
.how .stepVisual.stepVisualReference {
  padding: 0 !important;
  overflow: hidden !important;
  background: #fff !important;
  isolation: isolate;
}
.how .stepVisualReference img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  object-position: center;
  transition: transform 420ms var(--ideas-ease), filter 240ms ease;
}
.how .step:hover .stepVisualReference img,
.how .step:focus-within .stepVisualReference img { transform: scale(1.035); }
.how .stepVisual4 .vitrinai-brand-star {
  font-family: Manrope, sans-serif !important;
  font-size: 30px !important;
  font-style: normal;
  font-weight: 900 !important;
  line-height: 1 !important;
}

/* 06, 08 and 09 use canonical transparent cutouts. Do not add a background tile,
   coloured halo or a second shadow; the landing's native card transition is
   the shared preview-collapse → result-reveal motion for every capability card. */
.createCard6 .createCardIcon,
.createCard8 .createCardIcon,
.createCard9 .createCardIcon {
  overflow: visible !important;
  border-radius: 0 !important;
}

/* Dragging the hero divider is direct manipulation. Both the clipping edge
   and its handle must use the same frame, otherwise the image visibly trails. */
.comparisonCard .comparisonBefore,
.comparisonCard .comparisonDivider { transition: none !important; }
.comparisonCard .comparisonBefore { will-change: clip-path; }
.comparisonCard .comparisonDivider { will-change: left; }

/* On the dark cards of the process section, supporting information remains
   legible throughout the blue liquid hover state. The blue final card keeps
   its existing treatment. */
.how .step .stepNumber,
.how .step > p { transition: color 180ms ease; }
.how .step:is(:hover, :focus-within, .is-fluid-active) .stepNumber,
.how .step:is(:hover, :focus-within, .is-fluid-active) > p { color: #fff !important; }

body.vitrinaCursorEnabled.cursor-on-dark #custom-cursor {
  width: 16px;
  height: 16px;
  border-color: #fff !important;
  background: #fff !important;
  mix-blend-mode: difference;
}

/* Dialog and status layers are below the custom cursor. This keeps the
   pointer and later notifications readable while a modal is open. */
#custom-cursor { z-index: 200100 !important; }
.inspiration-toast,
.toast,
#toast,
[data-toast] { z-index: 200080 !important; }

#inspiration .inspiration-heading-title { white-space: nowrap; }

#inspiration .inspiration-controls {
  min-width: 0;
  margin: 0 0 28px;
}

#inspiration .inspiration-filters {
  display: grid;
  grid-template-rows: repeat(2, 40px);
  grid-auto-columns: max-content;
  grid-auto-flow: column;
  min-width: 0;
  width: 100%;
  gap: 8px 7px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 1px 1px 6px;
  scrollbar-width: none;
}
#inspiration .inspiration-filters::-webkit-scrollbar { display: none; }

#inspiration .inspiration-filters button,
#inspiration .inspiration-feedback button,
#inspiration .inspiration-feed-action button,
.inspiration-dialog-card .feed-liquid {
  --control-base: rgb(255 255 255 / .76);
  --control-fluid: var(--ideas-blue);
  --fluid-radius: 0px;
  border: 1px solid rgb(23 23 26 / .1) !important;
  border-radius: 999px;
  background-color: var(--control-base) !important;
  background-image: radial-gradient(circle at var(--fluid-x, 50%) var(--fluid-y, 50%), var(--control-fluid) 0 var(--fluid-radius), transparent calc(var(--fluid-radius) + .75px)) !important;
  background-repeat: no-repeat !important;
  box-shadow: none !important;
  color: #3a3b40;
  transition: --fluid-radius 520ms cubic-bezier(.16,1,.3,1), color 180ms ease, background-color 180ms ease, border-color 180ms ease, transform 180ms ease !important;
}

#inspiration .inspiration-filters button {
  min-height: 40px;
  padding: 0 14px;
  overflow: hidden;
  background-clip: border-box !important;
  cursor: pointer;
  font: 800 11px/1 Manrope, sans-serif;
  white-space: nowrap;
}

#inspiration .inspiration-filters button.is-fluid-active:not(.is-active),
#inspiration .inspiration-filters button:not(.is-active):hover,
#inspiration .inspiration-filters button:not(.is-active):focus-visible,
#inspiration .inspiration-feedback button.is-fluid-active,
#inspiration .inspiration-feed-action button.is-fluid-active,
.inspiration-dialog-card .feed-liquid.is-fluid-active {
  --fluid-radius: var(--fluid-max);
  border-color: var(--control-fluid) !important;
  color: #fff !important;
  outline: 0;
}

#inspiration .inspiration-filters button.is-active,
#inspiration .inspiration-filters button.is-active:hover,
#inspiration .inspiration-filters button.is-active:focus-visible,
#inspiration .inspiration-filters button.is-active.is-fluid-active {
  --control-base: #151516;
  --control-fluid: #151516;
  --fluid-radius: var(--fluid-max, 0px);
  border-color: #151516 !important;
  background-color: #151516 !important;
  box-shadow: none !important;
  color: #fff !important;
}

#inspiration .inspiration-filters button[aria-disabled="true"] { cursor: wait; opacity: .58; }
#inspiration .feed-liquid:focus-visible,
.inspiration-dialog-card .feed-liquid:focus-visible { outline: 2px solid rgb(var(--ideas-blue-rgb) / .82) !important; outline-offset: 3px !important; }

#inspiration .feedGrid.inspiration-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-auto-rows: 8px !important;
  grid-auto-flow: row dense !important;
  min-height: 0;
  column-gap: 20px !important;
  row-gap: 20px !important;
  align-items: start;
}

#inspiration .feedGrid.inspiration-grid[aria-busy="true"] { min-height: 1220px; }

#inspiration .inspiration-card {
  display: block !important;
  min-width: 0;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform-origin: 50% 50%;
  transition: none !important;
}

#inspiration .inspiration-card:hover,
#inspiration .inspiration-card:focus-within { border: 0 !important; background: transparent !important; box-shadow: none !important; transform: none !important; }

#inspiration .inspiration-card-media {
  position: relative;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: var(--inspiration-ratio, 1) !important;
  overflow: hidden;
  border-radius: var(--ideas-radius);
  background: transparent !important;
  box-shadow: none !important;
  isolation: isolate;
  transition: transform 300ms var(--ideas-ease), box-shadow 300ms var(--ideas-ease) !important;
}

#inspiration .inspiration-card-media img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 420ms var(--ideas-ease), filter 220ms ease !important;
}

#inspiration .inspiration-card:hover .inspiration-card-media,
#inspiration .inspiration-card:focus-within .inspiration-card-media { transform: translateY(-3px); box-shadow: 0 14px 28px rgb(20 29 48 / .16) !important; }
#inspiration .inspiration-card:hover .inspiration-card-media img,
#inspiration .inspiration-card:focus-within .inspiration-card-media img { transform: scale(1.025); }
#inspiration .inspiration-card.is-focused .inspiration-card-media { transform: scale(1.025); box-shadow: 0 0 0 3px var(--ideas-blue), 0 15px 32px rgb(var(--ideas-blue-rgb) / .2) !important; }

#inspiration .inspiration-card-vignette {
  position: absolute;
  z-index: 2;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 44%, transparent 24%, rgb(5 9 17 / .05) 55%, rgb(5 8 14 / .44) 118%), linear-gradient(to bottom, rgb(5 8 14 / .3), transparent 38%, transparent 55%, rgb(5 8 14 / .3));
  transition: opacity 180ms ease;
}
#inspiration .inspiration-card:hover .inspiration-card-vignette,
#inspiration .inspiration-card:focus-within .inspiration-card-vignette { opacity: 1; }

#inspiration .inspiration-card-tag {
  position: absolute;
  z-index: 5;
  top: 14px;
  left: 14px;
  max-width: calc(100% - 82px);
  overflow: hidden;
  padding: 6px 8px;
  border: 1px solid rgb(255 255 255 / .6);
  border-radius: 999px;
  background: rgb(16 19 27 / .46);
  box-shadow: none;
  color: #fff;
  opacity: 0;
  font: 800 9px/1 Manrope, sans-serif;
  letter-spacing: .055em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
  transform: translateY(-5px);
  transition: opacity 180ms ease, transform 180ms ease;
}
#inspiration .inspiration-card:hover .inspiration-card-tag,
#inspiration .inspiration-card:focus-within .inspiration-card-tag { opacity: 1; transform: translateY(0); }

#inspiration .inspiration-card-select {
  position: absolute;
  z-index: 3;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
#inspiration .inspiration-card-select:focus-visible { outline: 3px solid rgb(var(--ideas-blue-rgb) / .92); outline-offset: -3px; }

#inspiration .inspiration-card-actions {
  position: absolute !important;
  z-index: 7;
  inset: 0 !important;
  display: block !important;
  pointer-events: none;
}

#inspiration .inspiration-card-favorite-actions { position: absolute; z-index: 7; bottom: 15px; left: 15px; }

#inspiration .inspiration-card-add,
#inspiration .inspiration-card-favorite,
#inspiration .inspiration-card-more {
  --control-base: rgb(20 23 32 / .76);
  --control-fluid: var(--ideas-blue);
  --fluid-radius: 0px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0 !important;
  border-radius: 50%;
  background-color: var(--control-base) !important;
  background-image: radial-gradient(circle at var(--fluid-x, 50%) var(--fluid-y, 50%), var(--control-fluid) 0 var(--fluid-radius), transparent calc(var(--fluid-radius) + .75px)) !important;
  background-repeat: no-repeat !important;
  box-shadow: none !important;
  color: #fff !important;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  transition: --fluid-radius 520ms cubic-bezier(.16,1,.3,1), opacity .19s ease, transform .25s cubic-bezier(.22,.9,.22,1), color .18s ease !important;
}

#inspiration .inspiration-card-add,
#inspiration .inspiration-card-favorite { width: 52px; height: 52px; }
#inspiration .inspiration-card-favorite { transform: translate(-8px, 8px) scale(.88); }
#inspiration .inspiration-card-actions .inspiration-card-add { position: absolute !important; right: 15px !important; bottom: 15px !important; transform: translate(8px, 8px) scale(.88); }
#inspiration .inspiration-card-more { position: absolute; z-index: 8; top: 14px; right: 14px; width: 46px; height: 46px; transform: translateY(-5px) scale(.9); }

#inspiration .inspiration-card:hover :is(.inspiration-card-add, .inspiration-card-favorite, .inspiration-card-more),
#inspiration .inspiration-card:focus-within :is(.inspiration-card-add, .inspiration-card-favorite, .inspiration-card-more),
#inspiration .inspiration-card-more[aria-expanded="true"] { opacity: 1; pointer-events: auto; transform: none; }

#inspiration :is(.inspiration-card-add, .inspiration-card-favorite, .inspiration-card-more).is-fluid-active,
#inspiration .inspiration-card-add.is-confirmed { --fluid-radius: var(--fluid-max); border-color: var(--control-fluid) !important; color: #fff !important; box-shadow: 0 12px 26px rgb(var(--ideas-blue-rgb) / .28) !important; }
#inspiration :is(.inspiration-card-add, .inspiration-card-favorite, .inspiration-card-more):active { transform: scale(.94); }

#inspiration .inspiration-card-favorite .material-symbols-outlined { font-size: 30px; }
#inspiration .inspiration-card-add .material-symbols-outlined { font-size: 24px; }
#inspiration .inspiration-card-more .material-symbols-outlined { font-size: 25px; }
#inspiration .inspiration-card-favorite.is-demo-active { color: var(--ideas-blue) !important; }
#inspiration .inspiration-card-favorite.is-demo-active .material-symbols-outlined { font-size: 35px; font-variation-settings: "FILL" 1, "wght" 700; }

#inspiration .inspiration-card-menu[hidden] { display: none !important; }
#inspiration .inspiration-card-menu {
  position: absolute;
  z-index: 12;
  top: 66px;
  right: 14px;
  display: grid;
  min-width: 178px;
  padding: 7px;
  border: 1px solid rgb(255 255 255 / .8);
  border-radius: 18px;
  background: rgb(255 255 255 / .88);
  box-shadow: 0 18px 42px rgb(26 39 69 / .22);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  animation: inspiration-menu-in 180ms var(--ideas-ease) both;
}
#inspiration .inspiration-card-menu button {
  --control-base: transparent;
  --control-fluid: var(--ideas-blue);
  --fluid-radius: 0px;
  display: flex;
  min-height: 40px;
  align-items: center;
  gap: 9px;
  padding: 0 10px;
  border: 0 !important;
  border-radius: 12px;
  background-color: transparent !important;
  background-image: radial-gradient(circle at var(--fluid-x, 50%) var(--fluid-y, 50%), var(--control-fluid) 0 var(--fluid-radius), transparent calc(var(--fluid-radius) + .75px)) !important;
  color: var(--ink, #151516);
  cursor: pointer;
  font: 700 13px/1 Manrope, sans-serif;
  text-align: left;
  transition: --fluid-radius 420ms cubic-bezier(.16,1,.3,1), color 180ms ease !important;
}
#inspiration .inspiration-card-menu button.is-fluid-active,
#inspiration .inspiration-card-menu button:hover,
#inspiration .inspiration-card-menu button:focus-visible { --fluid-radius: var(--fluid-max); color: #fff; outline: 0; }
#inspiration .inspiration-card-menu .material-symbols-outlined { font-size: 20px; }
@keyframes inspiration-menu-in { from { opacity: 0; transform: translateY(-5px) scale(.96); } }

#inspiration .inspiration-card-reward { position: absolute; z-index: 14; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
#inspiration .inspiration-card-reward::before {
  position: absolute;
  left: 50%;
  top: 50%;
  color: rgb(255 255 255 / .94);
  font-family: "Material Symbols Outlined";
  font-size: clamp(96px, 12vw, 180px);
  font-variation-settings: "FILL" 1, "wght" 700;
  opacity: 0;
  text-shadow: 0 0 28px rgb(var(--ideas-blue-rgb) / .52);
  transform: translate(-50%,-50%) scale(.3) rotate(-10deg);
}
#inspiration .inspiration-card-reward.is-heart::before { content: "favorite"; }
#inspiration .inspiration-card-reward.is-plus::before { content: "add"; }
#inspiration .inspiration-card-reward.is-visible::before { animation: inspiration-reward 760ms var(--ideas-ease) both; }
@keyframes inspiration-reward {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(.3) rotate(-14deg); }
  22% { opacity: .92; transform: translate(-50%,-50%) scale(1.08) rotate(0); }
  66% { opacity: .42; transform: translate(-50%,-50%) scale(1.34) rotate(5deg); }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(1.6) rotate(8deg); }
}

#inspiration .inspiration-loading-shelf { display: contents; }
#inspiration .inspiration-skeleton {
  position: relative;
  min-width: 0;
  aspect-ratio: var(--inspiration-ratio, 1);
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / .76);
  border-radius: var(--ideas-radius);
  background: linear-gradient(124deg, rgb(255 255 255 / .24), rgb(255 255 255 / .76), rgb(218 226 239 / .48));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .86);
  -webkit-backdrop-filter:blur(17px);backdrop-filter:blur(17px);
}
#inspiration .inspiration-skeleton::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 14%, rgb(255 255 255 / .82) 49%, transparent 74%); animation: inspiration-loader 1.35s ease-in-out infinite; transform: translateX(-120%); }
#inspiration .inspiration-loading-status,
#inspiration .inspiration-feedback { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; margin: 4px 0 8px; color: #737780; font: 800 11px/1.3 Manrope, sans-serif; text-align: center; }
#inspiration .inspiration-loader-stars { display: inline-flex; gap: 7px; color: var(--ideas-blue); font-size: 21px; line-height: .8; }
#inspiration .inspiration-loader-stars i { display: block; font-style: normal; animation: inspiration-star-pulse 1.05s cubic-bezier(.2,.86,.22,1) infinite; }
#inspiration .inspiration-loader-stars i:nth-child(2) { animation-delay: .15s; }
#inspiration .inspiration-loader-stars i:nth-child(3) { animation-delay: .3s; }
#inspiration .inspiration-feedback { min-height: 180px; font-size: 13px; }
#inspiration .inspiration-feedback button { min-height: 40px; padding: 0 15px; cursor: pointer; font: 800 11px/1 Manrope, sans-serif; }
@keyframes inspiration-loader { to { transform: translateX(120%); } }
@keyframes inspiration-star-pulse { 0%,100% { opacity: .28; transform: translateY(1px) scale(.82); } 42% { opacity: 1; transform: translateY(-3px) scale(1.08); } }

#inspiration .feedAction.inspiration-feed-action {
  display: flex !important;
  width: 100% !important;
  align-items: center;
  justify-content: center !important;
  margin-top: 42px;
}
#inspiration .feedAction.inspiration-feed-action[hidden] { display: none !important; }
#inspiration .inspiration-feed-action button {
  --control-base: #151516;
  min-width: 212px;
  min-height: 54px;
  justify-content: center;
  gap: 18px;
  overflow: hidden;
  background-clip: border-box !important;
  padding: 0 23px;
  color: #fff;
  cursor: pointer;
  font: 800 14px/1 Manrope, sans-serif;
}
#inspiration .inspiration-feed-action button .material-symbols-outlined { font-size: 19px; }
#inspiration .inspiration-feed-action button:disabled { cursor: wait; opacity: .55; }

.inspiration-toast {
  position: fixed;
  z-index: 200080;
  left: 50%;
  bottom: 24px;
  max-width: min(420px, calc(100vw - 32px));
  padding: 13px 18px;
  border: 1px solid rgb(255 255 255 / .22);
  border-radius: 999px;
  background: rgb(21 21 22 / .92);
  box-shadow: 0 16px 42px rgb(15 22 38 / .24);
  color: #fff;
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  font: 700 12px/1.35 Manrope, sans-serif;
  text-align: center;
  transform: translateX(-50%);
  animation: inspiration-toast-in 220ms var(--ideas-ease) both;
}
@keyframes inspiration-toast-in { from { opacity: 0; transform: translate(-50%, 10px) scale(.97); } }

body.inspiration-dialog-open { overflow: hidden; }
.inspiration-demo-dialog { position: fixed; z-index: 200020; inset: 0; display: grid; place-items: center; padding: 24px; }
.inspiration-dialog-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: rgb(12 16 25 / .66); -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px); cursor: pointer; }
.inspiration-dialog-card {
  position: relative;
  width: min(100%, 570px);
  padding: 42px;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / .8);
  border-radius: 30px;
  background: var(--paper, #f1f1ef);
  box-shadow: 0 28px 90px rgb(14 20 34 / .34), inset 0 1px #fff;
  animation: inspiration-dialog-in 300ms var(--ideas-ease) both;
}
.inspiration-dialog-card .kicker { color: var(--ideas-blue); }
.inspiration-dialog-card h3 { margin: 20px 0 18px; color: var(--ink, #151516); font: 400 clamp(38px, 6vw, 58px)/.9 Manrope, sans-serif; letter-spacing: -.065em; }
.inspiration-dialog-card h3 em { color: var(--ideas-blue); font-style: normal; font-weight: 800; }
.inspiration-dialog-card > p { max-width: 440px; margin: 0 0 28px; color: #55575f; font: 500 15px/1.5 Manrope, sans-serif; }
.inspiration-dialog-close {
  --control-base: #151516 !important;
  --control-fluid: #d83049 !important;
  position: absolute;
  top: 18px;
  right: 18px;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  padding: 0;
  border-color: #151516 !important;
  color: #fff !important;
  cursor: pointer;
}
.inspiration-dialog-close .material-symbols-outlined { color: inherit !important; font-size: 22px; }
.inspiration-dialog-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.inspiration-dialog-actions a { display: inline-flex; min-height: 50px; align-items: center; justify-content: center; gap: 18px; padding: 0 19px; font: 800 13px/1 Manrope, sans-serif; text-decoration: none; }
.inspiration-dialog-actions .is-primary { --control-base: #151516; color: #fff; border-color: #151516 !important; }
.inspiration-dialog-actions .is-secondary { --control-base: rgb(255 255 255 / .72); color: var(--ink, #151516); }
.inspiration-dialog-actions .material-symbols-outlined { font-size: 19px; }
@keyframes inspiration-dialog-in { from { opacity: 0; transform: translateY(14px) scale(.965); } }

body.vitrinaCursorEnabled.cursor-absorbed #custom-cursor { width: 14px; height: 14px; background: #fff; border-color: #fff; mix-blend-mode: difference; }

@media (max-width: 760px) {
  #inspiration:not([data-inspiration-ready="true"]) { min-height: 860px; }
  .ticker.next-ticker-continuous > div { animation-duration: 17s !important; }
  #inspiration .inspiration-heading-title { font-size: clamp(42px, 13vw, 54px) !important; letter-spacing: -.065em; }
  #inspiration .inspiration-controls { width: calc(100% + 16px); margin-bottom: 20px; }
  #inspiration .inspiration-filters {
    display: flex;
    grid-template: none;
    width: 100%;
    gap: 7px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-right: 16px;
    scroll-snap-type: x proximity;
  }
  #inspiration .inspiration-filters button { min-height: 36px; flex: 0 0 auto; padding-inline: 12px; font-size: 10px; scroll-snap-align: start; }
  #inspiration .feedGrid.inspiration-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-auto-rows: 7px !important; column-gap: 12px !important; row-gap: 16px !important; }
  #inspiration .feedGrid.inspiration-grid[aria-busy="true"] { min-height: 780px; }
  #inspiration .inspiration-card-media,
  #inspiration .inspiration-skeleton { border-radius: 24px; }
  #inspiration .inspiration-card-tag { top: 10px; left: 10px; max-width: calc(100% - 64px); padding: 6px 7px; font-size: 7px; opacity: 1; transform: none; }
  #inspiration .inspiration-card-favorite-actions { bottom: 10px; left: 10px; }
  #inspiration .inspiration-card-actions .inspiration-card-add { right: 10px !important; bottom: 10px !important; }
  #inspiration :is(.inspiration-card-favorite, .inspiration-card-add) { width: 42px; height: 42px; opacity: 1; pointer-events: auto; transform: none; }
  #inspiration .inspiration-card-favorite .material-symbols-outlined { font-size: 26px; }
  #inspiration .inspiration-card-add .material-symbols-outlined { font-size: 22px; }
  #inspiration .inspiration-card-more { top: 10px; right: 10px; width: 40px; height: 40px; opacity: 1; pointer-events: auto; transform: none; }
  #inspiration .inspiration-card-menu { top: 56px; right: 10px; min-width: 160px; }
  #inspiration .feedAction.inspiration-feed-action { margin-top: 30px; }
  .inspiration-demo-dialog { padding: 15px; }
  .inspiration-dialog-card { padding: 34px 21px 23px; border-radius: 24px; }
  .inspiration-dialog-card h3 { margin-top: 28px; }
  .inspiration-dialog-actions { display: grid; grid-template-columns: 1fr; }
  .inspiration-dialog-actions a { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .ticker.next-ticker-continuous > div,
  #inspiration .inspiration-card-media,
  #inspiration .inspiration-card-media img,
  #inspiration .inspiration-card-vignette,
  #inspiration .inspiration-card-tag,
  #inspiration .inspiration-card-add,
  #inspiration .inspiration-card-favorite,
  #inspiration .inspiration-card-more,
  .inspiration-dialog-card,
  .inspiration-toast { animation: none !important; transition-duration: .01ms !important; }
  #inspiration .inspiration-card-reward.is-visible::before,
  #inspiration .inspiration-skeleton::after { animation: none !important; }
}

/* Section 04: an editorial case study. All photographs retain their canonical source. */
/* Header and outer spacing use the shared .section / .sectionIntro contract. */
#demo .demoStages { position: relative; max-width: none; overflow: visible; border: 0; border-radius: 30px; background: #fff; box-shadow: none; padding: 12px 32px 0; }
#demo:not([data-project-demo-ready="true"]) .demoStages { min-height: 670px; }
#demo:not([data-project-demo-ready="true"]) .demoStages > * { visibility: hidden; }
#demo:not([data-project-demo-ready="true"]) .demoStages::before { content: ""; position: absolute; inset: 12px; border-radius: 24px; background: linear-gradient(105deg,#e6edff 20%,#fff 45%,#e6edff 75%); background-size: 200% 100%; animation: project-demo-skeleton 1.35s ease-in-out infinite; }
.project-demo-tabs { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 8px; padding: 10px 0 20px; border-bottom: 1px solid rgb(20 20 22 / .12); }
#demo .feed-liquid { --control-base: transparent; --control-fluid: #065dfd; --fluid-radius: 0px; background-color: var(--control-base); background-image: radial-gradient(circle at var(--fluid-x,50%) var(--fluid-y,50%),var(--control-fluid) 0,var(--control-fluid) var(--fluid-radius),transparent calc(var(--fluid-radius) + 1px)); transition: --fluid-radius 520ms cubic-bezier(.16,1,.3,1),color 180ms ease,transform 180ms ease; }
#demo .feed-liquid.is-fluid-active { --fluid-radius: var(--fluid-max, 300px); color: #fff; }
#demo .feed-liquid.is-fluid-exiting { --fluid-radius: 0px; }
#demo .project-demo-tabs button { display: flex; align-items: center; justify-content: center; gap: 12px; min-width: 0; min-height: 52px; padding: 10px; border: 1px solid transparent; border-radius: 999px; color: #66666b; font: 700 13px/1.2 Manrope,sans-serif; box-shadow: none; cursor: pointer; }
.project-demo-tabs b { font-size: 10px; font-weight: 600; }
#demo .project-demo-tabs button[aria-selected="true"] { --control-base: #151516; --control-fluid: #151516; color: #fff; }
#demo button:focus-visible, #demo .project-stage-panel:focus-visible { outline: 2px solid #065dfd; outline-offset: 4px; }
#demo button:active { transform: scale(.97); }
.project-stage-panel { display: grid; grid-template-columns: minmax(0,.78fr) minmax(0,1.22fr); gap: 44px; min-height: 550px; padding: 32px 0 12px; scroll-margin-top: 110px; }
.project-stage-panel > * { min-width: 0; animation: project-demo-stage-in 260ms cubic-bezier(.2,.86,.22,1) both; }
.project-demo-copy { display: flex; flex-direction: column; align-items: flex-start; padding: 22px 0 14px 8px; }
.project-demo-eyebrow { color: #065dfd; font: 800 10px/1.5 Manrope,sans-serif; letter-spacing: .11em; text-transform: uppercase; }
.project-demo-copy h3 { margin: 22px 0 20px; font: 500 clamp(31px,3.3vw,46px)/1.04 Manrope,sans-serif; letter-spacing: -.055em; }
.project-demo-description { max-width: 330px; margin: 0; color: #66666b; font: 400 15px/1.6 Manrope,sans-serif; }
.project-demo-visual { display: flex; min-height: 484px; align-items: center; }
.project-demo-media { position: relative; min-width: 0; overflow: hidden; border-radius: 22px; background: #f1f1ef; isolation: isolate; }
.project-demo-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.project-demo-media.is-loading::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg,transparent 20%,rgb(255 255 255 / .6) 45%,transparent 75%); background-size: 200% 100%; animation: project-demo-skeleton 1.35s ease-in-out infinite; }
.project-media-caption { display: block; margin-top: 12px; color: #66666b; font: 500 11px/1.5 Manrope,sans-serif; }
.project-key-visual { width: 100%; margin: 0; }
.project-key-visual .project-demo-media { width: 100%; aspect-ratio: 1.18; max-height: 520px; }
.project-key-visual img { object-fit: cover; object-position: 50% 62%; }
.project-source-reference { display: flex; align-items: center; gap: 20px; width: 100%; margin-top: auto; padding-top: 30px; }
.project-source-reference .project-demo-media { width: 116px; aspect-ratio: 4/5; flex: 0 0 116px; border-radius: 14px; }
.project-source-reference .project-demo-eyebrow { color: #66666b; font-size: 9px; }
.project-source-reference p { margin: 9px 0 0; color: #151516; font: 500 13px/1.5 Manrope,sans-serif; }
.project-source-stage { width: 100%; }
.project-source-stage .project-demo-media { width: min(100%,416px); aspect-ratio: 4/5; margin: 0 auto; }
.project-source-stage .project-media-caption { text-align: center; }
.project-key-visual figcaption, .project-series-item figcaption, .project-brandbook-grid figcaption { text-align: center; }
.project-demo-facts { width: 100%; max-width: 330px; margin: auto 0 0; padding-top: 32px; font: 500 12px/1.5 Manrope,sans-serif; }
.project-demo-facts > div { display: flex; justify-content: space-between; gap: 18px; padding: 12px 0; border-bottom: 1px solid rgb(20 20 22 / .12); }
.project-demo-facts dt { color: #66666b; }
.project-demo-facts dd { margin: 0; max-width: 190px; text-align: right; }
.project-direction-note { max-width: 320px; margin-top: auto; padding: 24px 0 0; }
.project-direction-note b { font: 700 15px/1.4 Manrope,sans-serif; }
.project-direction-note p { margin: 8px 0 0; color: #66666b; font: 400 13px/1.6 Manrope,sans-serif; }
.project-direction-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); align-items: start; gap: 12px; width: 100%; }
.project-direction-card { position: relative; min-width: 0; }
.project-direction-card:nth-child(2) { margin-top: 44px; }
.project-direction-card:nth-child(3) { margin-top: 88px; }
.project-direction-card .project-demo-media { aspect-ratio: 4/5; border-radius: 16px; }
.project-direction-card:has([aria-pressed="true"]) .project-demo-media { outline: 2px solid #065dfd; outline-offset: 4px; }
.project-direction-select { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; width: 100%; min-height: 52px; padding: 14px 0 8px; border: 0; border-radius: 6px; background: none; color: #66666b; font: 600 11px/1.4 Manrope,sans-serif; text-align: left; cursor: pointer; }
.project-direction-select::after { content: ""; position: absolute; inset: 0; }
.project-direction-card:has(.is-error) .project-direction-select::after { pointer-events: none; }
.project-direction-select[aria-pressed="true"] { color: #065dfd; }
.project-direction-marker { font-size: 11px; }
.project-demo-note { display: grid; gap: 7px; margin: auto 0 0; padding-top: 32px; }
.project-demo-note strong { font: 500 32px/1.1 Manrope,sans-serif; letter-spacing: -.045em; }
.project-demo-note span { color: #66666b; font: 400 12px/1.5 Manrope,sans-serif; }
.project-series-grid { display: grid; width: 100%; grid-template-columns: 1fr 1fr .85fr; gap: 16px; align-items: start; }
.project-series-item { min-width: 0; margin: 0; }
.project-series-item .project-demo-media { border-radius: 14px; }
.project-series-item--product .project-demo-media { aspect-ratio: 4/5; }
.project-series-item--social .project-demo-media { aspect-ratio: 1; }
.project-series-item--story { grid-column: 3; grid-row: 1/3; }
.project-series-item--story .project-demo-media { aspect-ratio: 9/16; }
.project-series-item--banner { grid-column: 1/3; }
.project-series-item--banner .project-demo-media { aspect-ratio: 3/2; }
.project-series-item figcaption, .project-brandbook-grid figcaption { margin-top: 9px; color: #66666b; font: 500 11px/1.4 Manrope,sans-serif; }
.project-brandbook-contents { display: grid; gap: 12px; margin: auto 0 0; padding: 32px 0 0; list-style: none; font: 500 13px/1.5 Manrope,sans-serif; }
.project-brandbook-contents li { padding-left: 16px; border-left: 2px solid #065dfd; }
.project-brandbook-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 16px; width: 100%; align-items: center; }
.project-brandbook-grid figure { min-width: 0; margin: 0; }
.project-brandbook-grid figure:first-child { margin-top: 84px; }
.project-brandbook-grid .project-demo-media { aspect-ratio: 1; border-radius: 18px; }
.project-demo-footer { display: flex; justify-content: flex-end; align-items: center; gap: 20px; min-height: 0; padding: 0 0 20px; border: 0; }
#demo .project-demo-next { display: flex; align-items: center; justify-content: center; gap: 20px; min-height: 46px; padding: 10px 20px; border: 1px solid rgb(20 20 22 / .12); border-radius: 999px; color: #151516; font: 700 12px/1.4 Manrope,sans-serif; cursor: pointer; }
.project-demo-next .material-symbols-outlined { font-size: 19px; }
.project-demo-media.is-error img { visibility: hidden; }
.project-demo-media-error { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px; padding: 12px; color: #66666b; font: 500 12px/1.5 Manrope,sans-serif; text-align: center; }
#demo .project-demo-media-error button { --control-base: #151516; min-height: 44px; max-width: 100%; padding: 8px 14px; border: 1px solid #151516; border-radius: 999px; color: #fff; cursor: pointer; font: 600 11px/1.3 Manrope,sans-serif; }
.project-source-reference .project-demo-media-error { font-size: 10px; gap: 4px; padding: 6px; }
@keyframes project-demo-skeleton { to { background-position: -200% 0; } }
@keyframes project-demo-stage-in { from { opacity: 0; transform: translateY(6px); } }
@media (min-width: 761px) and (max-width: 1100px) {
  #demo .demoStages { padding: 10px 24px 0; }
  .project-stage-panel { grid-template-columns: .85fr 1.15fr; gap: 24px; }
  .project-demo-copy { padding-left: 0; }
  .project-demo-copy h3 { font-size: 33px; }
  .project-demo-visual { min-height: 430px; }
  .project-direction-grid { gap: 10px; }
  .project-direction-select { font-size: 10px; }
}
@media (max-width: 760px) {
  #demo .demoStages { padding: 8px 16px 0; border-radius: 24px; }
  #demo:not([data-project-demo-ready="true"]) .demoStages { min-height: 760px; }
  .project-demo-tabs { gap: 4px; margin: 0 -8px; padding: 4px 0 12px; }
  #demo .project-demo-tabs button { flex-direction: column; gap: 6px; min-height: 60px; padding: 8px 1px; border-radius: 14px; font-size: 10px; }
  .project-demo-tabs b { font-size: 9px; }
  .project-stage-panel { grid-template-columns: 1fr; gap: 24px; min-height: 0; padding: 24px 0 12px; scroll-margin-top: 98px; }
  .project-demo-copy { padding: 0; }
  .project-demo-copy h3 { margin: 13px 0 14px; font-size: clamp(29px,8.5vw,38px); line-height: 1.06; }
  .project-demo-description { max-width: 480px; font-size: 14px; line-height: 1.6; }
  .project-demo-eyebrow { font-size: 9px; }
  .project-demo-visual { display: block; min-height: 0; }
  .project-demo-media { border-radius: 18px; }
  .project-key-visual .project-demo-media { aspect-ratio: 1; max-height: none; }
  .project-media-caption { margin-top: 9px; font-size: 10px; }
  .project-source-reference { gap: 14px; padding-top: 22px; }
  .project-source-reference .project-demo-media { width: 64px; flex-basis: 64px; border-radius: 10px; }
  .project-source-reference p { margin-top: 5px; font-size: 12px; }
  .project-source-reference .project-demo-media-error { font-size: 8px; padding: 2px; gap: 0; }
  .project-source-reference .project-demo-media-error > span { display: none; }
  #demo .project-source-reference .project-demo-media-error button { padding: 4px; font-size: 8px; }
  .project-demo-facts { max-width: none; padding-top: 18px; }
  .project-direction-note { max-width: none; padding-top: 20px; }
  .project-direction-grid { gap: 9px; }
  .project-direction-card:nth-child(2) { margin-top: 24px; }
  .project-direction-card:nth-child(3) { margin-top: 48px; }
  .project-direction-card .project-demo-media { border-radius: 10px; }
  .project-direction-select { font-size: 10px; padding-top: 12px; }
  .project-direction-marker { font-size: 9px; }
  .project-demo-note { gap: 4px; padding-top: 20px; }
  .project-demo-note strong { font-size: 25px; }
  .project-series-grid { grid-template-columns: 1fr 1fr; gap: 18px 12px; }
  .project-series-item--story { grid-column: 2; grid-row: 1/3; }
  .project-series-item--social { grid-column: 1; grid-row: 2; }
  .project-series-item--banner { grid-column: 1/3; }
  .project-series-item figcaption, .project-brandbook-grid figcaption { font-size: 10px; }
  .project-brandbook-contents { padding-top: 20px; gap: 8px; font-size: 12px; }
  .project-brandbook-grid { grid-template-columns: 1fr; gap: 20px; }
  .project-brandbook-grid figure:first-child { width: 62%; margin: 0; }
  .project-demo-footer { flex-wrap: wrap; gap: 14px; padding: 0 0 16px; }
  #demo .project-demo-next { width: 100%; justify-content: space-between; min-height: 48px; padding: 12px 18px; }
}
/* Brandbook: inspectable chapters and an actual document/source package. */
.project-stage-panel[data-stage="brandbook"] { grid-template-columns: minmax(0,1fr); gap: 28px; }
.bb-intro { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 44px; padding: 8px 8px 0; }
.bb-intro h3 { margin: 15px 0 0; font: 500 clamp(32px,3.3vw,46px)/1.05 Manrope,sans-serif; letter-spacing: -.055em; }
.bb-intro-copy > p { max-width: 470px; margin: 0; color: #66666b; font: 400 15px/1.6 Manrope,sans-serif; }
.bb-reader { border: 1px solid rgb(20 20 22 / .12); border-radius: 24px; overflow: hidden; }
.bb-chapters { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 6px; padding: 12px; border-bottom: 1px solid rgb(20 20 22 / .12); }
#demo .bb-chapters button { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; min-width: 0; min-height: 68px; padding: 12px 14px; border: 1px solid transparent; border-radius: 12px; color: #66666b; cursor: pointer; box-shadow: none; text-align: left; font: 700 12px/1.25 Manrope,sans-serif; }
.bb-chapters button b { font-size: 9px; font-weight: 500; }
#demo .bb-chapters button[aria-pressed="true"] { --control-base: #151516; --control-fluid: #151516; color: #fff; }
.bb-preview { min-height: 510px; background: #faf9f6; }
.bb-page { min-height: 510px; padding: 32px; }
.bb-page-heading > span { display: block; margin-bottom: 16px; color: #69645b; font: 800 9px/1.5 Manrope,sans-serif; letter-spacing: .1em; }
.bb-page h4 { margin: 0 0 16px; color: #192943; font: 500 clamp(27px,2.7vw,38px)/1.08 Manrope,sans-serif; letter-spacing: -.045em; }
.bb-page-heading > p { max-width: 670px; margin: 0; color: #65615a; font: 400 14px/1.65 Manrope,sans-serif; }
.bb-page--idea, .bb-page--applications { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); align-items: center; gap: 32px; }
.bb-book-pair { display: grid; grid-template-columns: .75fr 1fr; align-items: center; gap: 16px; }
.bb-page figure { min-width: 0; margin: 0; }
.bb-book-pair figure:first-child { margin-top: 75px; }
.bb-book-pair .project-demo-media { aspect-ratio: 1; border-radius: 14px; }
#demo .bb-page figcaption { margin-top: 10px; color: #65615a; font: 500 11px/1.45 Manrope,sans-serif; text-align: center; }
.bb-principles { display: grid; gap: 14px; margin: 26px 0 0; }
.bb-principles dt { color: #192943; font: 700 11px/1.5 Manrope,sans-serif; }
.bb-principles dd { margin: 4px 0 0; color: #65615a; font: 400 12px/1.55 Manrope,sans-serif; }
.bb-logo-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; margin-top: 26px; }
.bb-mark { aspect-ratio: 1.15; border-radius: 14px; background: #f3e8d3; }
.bb-mark img { object-fit: contain; padding: 24px; }
.bb-mark--reverse, .bb-mark--light { background: #192943; }
.bb-logo-rules { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 22px; margin-top: 24px; }
.bb-logo-rules p { display: grid; gap: 5px; margin: 0; color: #65615a; font: 400 11px/1.55 Manrope,sans-serif; }
.bb-logo-rules b { color: #192943; font-size: 12px; }
.bb-palette { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 14px; margin-top: 26px; }
.bb-swatch { height: 148px; background: var(--swatch); border: 1px solid rgb(20 20 22 / .08); border-radius: 12px; }
#demo .bb-palette figcaption { display: grid; gap: 5px; }
.bb-palette b { color: #192943; font-size: 13px; }
.bb-palette code { font: 600 11px/1.4 Manrope,sans-serif; }
.bb-palette small { font-size: 10px; }
.bb-palette figcaption > span { font-size: 10px; }
.bb-page-note { margin: 26px 0 0; max-width: 730px; color: #65615a; font: 400 12px/1.65 Manrope,sans-serif; }
.bb-type-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 30px; margin-top: 24px; }
.bb-type-specimen { display: flex; flex-direction: column; align-items: flex-start; padding: 24px; border-radius: 16px; color: #f3e8d3; background: #192943; }
.bb-type-specimen > span, .bb-type-example > span { font: 700 9px/1.5 Manrope,sans-serif; letter-spacing: .1em; }
.bb-type-specimen strong { font: 500 84px/1.1 Manrope,sans-serif; letter-spacing: -.06em; }
.bb-type-specimen p { margin: 14px 0; font: 400 22px/1.4 Manrope,sans-serif; }
.bb-type-specimen small { font: 400 10px/1.5 Manrope,sans-serif; }
.bb-type-example { padding: 22px 0; color: #192943; }
.bb-type-example h5 { margin: 22px 0 18px; font: 500 clamp(30px,3vw,42px)/1.04 Manrope,sans-serif; letter-spacing: -.05em; }
.bb-type-example > p { margin: 0 0 14px; font: 500 19px/1.4 Manrope,sans-serif; }
.bb-type-example > small { display: block; max-width: 310px; font: 400 13px/1.6 Manrope,sans-serif; }
.bb-type-example > div { display: flex; flex-wrap: wrap; gap: 8px 12px; margin-top: 24px; font: 400 10px/1.5 Manrope,sans-serif; }
.bb-applications-image { aspect-ratio: 3/2; border-radius: 16px; }
.bb-page-heading ul { display: grid; gap: 10px; margin: 26px 0 0; padding-left: 17px; color: #65615a; font: 400 12px/1.5 Manrope,sans-serif; }
.bb-files-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; margin-top: 24px; }
.bb-files-list > div { display: flex; align-items: flex-start; gap: 16px; padding: 18px 0; border-bottom: 1px solid rgb(20 20 22 / .1); }
.bb-file-format { flex: 0 0 70px; padding: 10px 4px; border: 1px solid rgb(20 20 22 / .12); border-radius: 8px; color: #192943; font: 700 10px/1.4 Manrope,sans-serif; text-align: center; }
.bb-files-list b { color: #192943; font: 700 13px/1.5 Manrope,sans-serif; }
.bb-files-list p { margin: 4px 0 0; color: #65615a; font: 400 11px/1.55 Manrope,sans-serif; }
#demo .bb-document { display: inline-grid; grid-template-columns: 44px minmax(0,1fr) 20px; align-items: center; gap: 12px; max-width: 100%; margin-top: 18px; padding: 8px 12px 8px 8px; border-radius: 12px; color: #151516; text-decoration: none; }
.bb-document-icon { display: grid; place-items: center; width: 44px; height: 54px; border: 1px solid rgb(6 93 253 / .18); border-radius: 5px 12px 5px 5px; background: rgb(6 93 253 / .06); color: #065dfd; }
.bb-document-icon .material-symbols-outlined { font-size: 28px; }
.bb-document-label { display: grid; gap: 4px; }
.bb-document-label b { font: 700 13px/1.4 Manrope,sans-serif; }
.bb-document-label small { font: 400 10px/1.5 Manrope,sans-serif; opacity: .7; }
.bb-document-arrow { font-size: 19px; }
#demo .bb-document.is-fluid-active .bb-document-icon { color: #fff; border-color: rgb(255 255 255 / .4); background: rgb(255 255 255 / .1); }
#demo .bb-document:focus-visible { outline: 2px solid #065dfd; outline-offset: 4px; }
@media (max-width: 1050px) {
  .bb-page--idea, .bb-page--applications { grid-template-columns: 1fr; gap: 24px; }
  .bb-book-pair { max-width: 570px; margin: 0 auto; }
  #demo .bb-chapters button { padding: 12px 8px; font-size: 10px; }
}
@media (max-width: 760px) {
  .project-stage-panel[data-stage="brandbook"] { gap: 22px; }
  .bb-intro { grid-template-columns: 1fr; gap: 18px; padding: 0; }
  .bb-intro h3 { font-size: clamp(29px,8.5vw,38px); margin-top: 13px; }
  .bb-intro-copy > p { font-size: 14px; }
  .bb-reader { border-radius: 18px; }
  .bb-chapters { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 4px; padding: 8px; }
  #demo .bb-chapters button { min-height: 62px; padding: 10px 8px; gap: 6px; font-size: 10px; }
  .bb-preview, .bb-page { min-height: 0; }
  .bb-page { padding: 22px 16px; }
  .bb-page h4 { font-size: 27px; }
  .bb-page-heading > span { font-size: 8px; margin-bottom: 13px; }
  .bb-page-heading > p { font-size: 13px; }
  .bb-book-pair { grid-template-columns: 1fr; gap: 18px; width: 100%; }
  .bb-book-pair figure:first-child { width: 66%; margin: 0; }
  .bb-logo-grid { grid-template-columns: 1fr 1fr; gap: 18px 10px; }
  .bb-mark img { padding: 14px; }
  .bb-logo-rules { grid-template-columns: 1fr; gap: 15px; }
  .bb-palette { grid-template-columns: 1fr 1fr; gap: 22px 12px; }
  .bb-swatch { height: 105px; }
  .bb-type-grid { grid-template-columns: 1fr; gap: 6px; }
  .bb-type-specimen { padding: 20px; }
  .bb-type-example h5 { font-size: 31px; }
  .bb-files-list { grid-template-columns: 1fr; }
  .bb-file-format { flex-basis: 60px; }
  .bb-files-list > div { gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  #demo *, #demo *::before, #demo *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Shared entry/exit waves for navigation and billing controls. */
.topbar .nav a.landing-wave,
.topbar .nav a.landing-wave:hover,
.priceToggle button.landing-wave,
.priceCard > a.landing-wave {
  --control-fluid: #065dfd;
  --fluid-radius: 0px;
  background-image: radial-gradient(circle at var(--fluid-x, 50%) var(--fluid-y, 50%), var(--control-fluid) 0, var(--control-fluid) var(--fluid-radius), transparent calc(var(--fluid-radius) + 1px)) !important;
  transition: --fluid-radius 520ms cubic-bezier(.16,1,.3,1), color 180ms ease, transform 180ms ease !important;
}
.topbar .nav a.landing-wave.is-fluid-active,
.priceToggle button.landing-wave.is-fluid-active,
.priceCard > a.landing-wave.is-fluid-active { --fluid-radius: var(--fluid-max); color: #fff !important; }
.landing-wave.is-fluid-exiting { --fluid-radius: 0px; }
.priceToggle button.landing-wave.selected { background-color: #fff; color: #065dfd; }
.priceToggle button.landing-wave.is-fluid-active span { color: #fff; }
.priceCard > a.landing-wave { --control-fluid: #fff !important; color: #fff; background-color: transparent; }
.priceCard > a.landing-wave.is-fluid-active { color: #065dfd !important; border-color: #fff !important; box-shadow: none; }
.priceCard.featuredPrice { color: #fff; background-color: #065dfd; }
.priceCard.featuredPrice :is(.plan, h3, h3 small, p, li, li::before, .popular),
.priceCard.is-fluid-active :is(.plan, h3, h3 small, p, li, li::before) { color: #fff !important; }
.priceCard.featuredPrice .popular { background: rgb(255 255 255 / .16); }
.priceCard.featuredPrice > a { color: #fff; background-color: transparent; }
.benefitGrid article > div { position: relative; min-height: 24px; }
.benefitGrid .benefitSticker { position: absolute; right: -8px; top: -12px; width: 110px; height: 110px; object-fit: contain; pointer-events: none; transition: transform 400ms ease; }
.benefitGrid article:is(.is-fluid-active, .is-scroll-active) .benefitSticker { transform: translateY(-3px) rotate(4deg); }
.benefitGrid article:is(.is-fluid-active, .is-scroll-active) p { color: #fff; }

@media (max-width: 760px) {
  .createGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1px; gap: 0 10px; }
  .createGrid .createCard { min-height: 0; padding: 12px; border-radius: 18px; }
  .createGrid .createCard h3 { font-size: clamp(15px, 4vw, 21px); line-height: 1.04; }
  .createGrid .createCard .cardLabel { font-size: 8px; }
  .createGrid .createCard .createCardIcon { width: 48%; height: calc(100% - 66px); max-height: 110px; top: 43%; }
  .createGrid .createCardIcon img { min-height: 0; max-height: 100%; object-fit: contain; }
  .createGrid :is(.createCard2, .createCard4, .createCard8) .createCardIcon { width: 32%; }
  .benefitGrid .benefitSticker { width: 100px; height: 100px; top: -10px; right: 0; }
  .how .step { padding: 20px 16px; border-radius: 24px; }
}
@media (hover: none), (pointer: coarse) {
  .how .step, .benefitGrid article { --control-fluid: #065dfd; --fluid-radius: 0px; position: relative; isolation: isolate; background-image: radial-gradient(circle at var(--fluid-x,50%) var(--fluid-y,50%), #065dfd 0, #065dfd var(--fluid-radius), transparent calc(var(--fluid-radius) + 1px)); transition: --fluid-radius 680ms cubic-bezier(.16,1,.3,1), color 200ms, transform 350ms !important; }
  .how .step.is-scroll-active, .benefitGrid article.is-scroll-active { --fluid-radius: var(--fluid-max); color: #fff; transform: translateY(-3px); }
  .how .step.is-scroll-active :is(.stepNumber, h3, p), .benefitGrid article.is-scroll-active > div span { color: #fff !important; }
}
@media (prefers-reduced-motion: reduce) {
  .landing-wave, .how .step, .benefitGrid article, .benefitSticker { transition: none !important; }
  .how .step.is-scroll-active, .benefitGrid article.is-scroll-active, .benefitGrid article .benefitSticker { transform: none !important; }
}

/* Keep horizontal gesture scrolling, without drawing horizontal scrollbars. */
*::-webkit-scrollbar:horizontal { height: 0; }
:is(.priceGrid, .priceToggle, .comparisonTabs, .inspiration-filters, .project-demo-tabs, .bb-chapters, .feedGrid, .demoTabs, .campaignStrip) { scrollbar-width: none; -ms-overflow-style: none; }
:is(.priceGrid, .priceToggle, .comparisonTabs, .inspiration-filters, .project-demo-tabs, .bb-chapters, .feedGrid, .demoTabs, .campaignStrip)::-webkit-scrollbar { display: none; }
.topbar .nav a.landing-wave:not(.is-fluid-active):not(.is-fluid-exiting),
.priceToggle button.landing-wave:not(.is-fluid-active):not(.is-fluid-exiting),
.priceCard > a.landing-wave:not(.is-fluid-active):not(.is-fluid-exiting) { background-image: none !important; }

.ticker.next-ticker-continuous > div {
  gap: 0 !important;
  animation: next-ticker-seamless var(--ticker-duration, 22s) linear infinite !important;
}
.ticker.next-ticker-continuous > div > .ticker-sequence {
  display: flex !important; flex: 0 0 auto; gap: 36px; padding-right: 36px;
  width: max-content; min-width: max-content; animation: none !important;
}
.ticker .ticker-sequence .vitrinai-brand-star { color: #065dfd; font: 900 32px/1 Manrope, sans-serif; transform: translateY(5px); }
@keyframes next-ticker-seamless { to { transform: translate3d(calc(-1 * var(--ticker-distance, 1200px)), 0, 0); } }
.benefitGrid article:is(.is-fluid-active, .is-scroll-active) .benefitSticker {
  filter: drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff);
}

@media (max-width: 760px) {
  .createGrid { grid-auto-rows: auto; gap: 10px; }
  .createGrid .createCard { transform: none !important; }
  .createGrid .createCard:is(.is-touch-active, .is-fluid-active) { transform: none !important; }
  .createGrid .createCard .createCardIcon { width: 62%; height: calc(100% - 72px); max-height: 145px; top: 42%; }
  .createGrid :is(.createCard2, .createCard4, .createCard8) .createCardIcon { width: 36%; }
  .benefitGrid article { position: relative; min-height: 254px; padding: 24px 20px; }
  .benefitGrid article > div { position: static; }
  .benefitGrid article h3 { max-width: 58%; margin-top: 38px; font-size: 24px; line-height: 1.08; }
  .benefitGrid article p { max-width: 58%; font-size: 12px; }
  .benefitGrid .benefitSticker { width: 44%; height: 174px; max-width: 176px; right: -2px; top: 50%; transform: translateY(-50%); }
  .benefitGrid article:is(.is-fluid-active, .is-scroll-active) .benefitSticker { transform: translateY(-50%) rotate(4deg); }

  .topbar > .nav, .topbar.topbarScrolled > .nav,
  .topbar > .nav.navOpen {
    display: flex; position: absolute; top: calc(100% + 10px); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 4px; padding: 12px;
    border: 1px solid rgb(255 255 255 / .95); border-radius: 26px;
    background: rgb(255 255 255 / .97); -webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);
    box-shadow: 0 20px 48px rgb(21 21 22 / .16);
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translateY(-10px) scale(.97); transform-origin: top right;
    transition: opacity 220ms ease, transform 320ms cubic-bezier(.2,.8,.2,1), visibility 220ms;
  }
  .topbar > .nav.navOpen { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) scale(1); }
  .topbar .nav a { min-height: 50px; padding: 0 18px; border-radius: 16px; font-size: 16px; }
  .menuButton { position: relative; flex-shrink: 0; }
  .menuButton span { transition: transform 220ms ease; }
  .menuButton[aria-expanded="true"] span:first-child { transform: translateY(3px) rotate(45deg); }
  .menuButton[aria-expanded="true"] span:last-child { transform: translateY(-3px) rotate(-45deg); }

  .comparisonControls:not(.comparisonControls--side) {
    display: flex; justify-content: center; align-items: center; gap: 12px;
    width: 100%; height: 44px; margin-top: 14px;
  }
  .comparisonControls:not(.comparisonControls--side) .compareArrow { position: static; flex: 0 0 42px; }
}
@media (prefers-reduced-motion: reduce) {
  .ticker.next-ticker-continuous > div { animation: none !important; }
  .topbar > .nav, .menuButton span { transition: none !important; }
  .benefitGrid .benefitSticker, .benefitGrid article:is(.is-fluid-active, .is-scroll-active) .benefitSticker { transform: none !important; }
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .benefitGrid .benefitSticker, .benefitGrid article:is(.is-fluid-active, .is-scroll-active) .benefitSticker { transform: translateY(-50%) !important; }
}
@media (hover: none), (pointer: coarse) {
  .how .step, .benefitGrid article { background-image: radial-gradient(circle at var(--fluid-x,50%) var(--fluid-y,50%), #065dfd 0, #065dfd var(--fluid-radius), transparent var(--fluid-radius)); }
}

/* Detail polish: smooth sticker silhouette and selected-card corners. */
.benefitGrid article:is(.is-fluid-active, .is-scroll-active) { border-radius: 26px; overflow: hidden; }
.benefitGrid article:is(.is-fluid-active, .is-scroll-active) .benefitSticker { filter: url(#benefit-sticker-outline); }
@media (max-width: 760px) {
  .benefitGrid .benefitSticker { width: 38%; max-width: 156px; height: 160px; right: 16px; }
  .benefitGrid article:is(.is-fluid-active, .is-scroll-active) .benefitSticker { transform: translateY(-50%) rotate(2deg); }
  .pricing .priceGrid { width: calc(100% + 32px); margin-inline: -16px; padding-inline: 16px; scroll-padding-inline: 16px; }
  #inspiration :is(.inspiration-card-favorite, .inspiration-card-add, .inspiration-card-more) { width: 42px; height: 42px; min-width: 42px; min-height: 42px; transform: none !important; }
  #inspiration .inspiration-card-favorite-actions { left: 10px; bottom: 10px; }
  #inspiration .inspiration-card-actions .inspiration-card-add { right: 10px !important; bottom: 10px !important; transform: none !important; }
  #inspiration .inspiration-card-more { right: 10px; top: 10px; }
}
@media (min-width: 761px) {
  .priceCard.featuredPrice { background-color: #fff; border-color: #fff; box-shadow: 0 18px 45px rgb(0 0 0 / .12); }
  .priceCard.featuredPrice:not(.is-fluid-active),
  .priceCard.featuredPrice:not(.is-fluid-active) :is(.plan, h3, h3 small, p, li, li::before, .popular) { color: #151516 !important; }
  .priceCard.featuredPrice:not(.is-fluid-active) :is(ul, li) { border-color: rgb(21 21 22 / .16); }
  .priceCard.featuredPrice:not(.is-fluid-active) .popular { background-color: #e6edff; }
  .priceCard.featuredPrice:not(.is-fluid-active) > a { color: #151516; border-color: #151516; }
  .priceCard.featuredPrice.is-fluid-active > a { color: #fff; border-color: #fff; }
  .priceCard.featuredPrice.is-fluid-active > a.is-fluid-active { color: #065dfd !important; }
}

.benefits .sectionIntro h2 { line-height: 1.08; }
.benefits .sectionIntro h2 em { display: inline-block; margin-top: .06em; }
.benefitGrid article,
.benefitGrid article.liquid-control:is(.is-fluid-active, .is-fluid-exiting, .is-scroll-active) {
  border-color: #1414161a !important;
  box-shadow: none !important;
}
@media (min-width: 761px) {
  .benefitGrid .benefitSticker { width: 154px; height: 154px; top: -12px; right: 0; }
  .benefitGrid h3 { margin-top: 104px; }
}
@media (max-width: 760px) {
  .hero { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .hero > .heroCopy { order: 0; }
  .hero > .heroComparison { order: 1; }
  .hero > .heroActions { order: 2; width: 100%; margin-top: 0; }
  .hero > .heroNote { order: 3; margin-top: 0; }
}

/* A moving studio contact sheet frames the final invitation. */
.finalCta.finalCtaGallery {
  isolation: isolate; background: #f1f3f7; border-color: #fff;
  min-height: 760px; padding: 110px 240px; box-shadow: none;
}
.finalCtaGallery::before, .finalCtaGallery::after, .finalCtaGallery .finalOrbit { display: none; }
.finalCtaGallery h2 { font-size: clamp(52px, 5.4vw, 82px); line-height: 1.04; max-width: 760px; margin-top: 28px; }
.finalCtaGallery h2 em { display: inline-block; margin-top: .1em; }
.finalCtaGallery > p { max-width: 400px; line-height: 1.6; margin: 24px 0 0; }
.finalCtaGallery .finalBadge { color: #065dfd; background: #e0e9ff; }
.finalCtaGallery .finalButton { background-color: #151516; min-height: 58px; padding-inline: 28px; margin-top: 28px; }
.finalGallery { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; mask-image: linear-gradient(90deg,#000 0%,#000 12%,transparent 32%,transparent 68%,#000 88%,#000 100%); }
.finalGalleryRail { position: absolute; width: 185px; top: -170px; bottom: -170px; transform: rotate(12deg); }
.finalGalleryRail1 { left: -62px; }
.finalGalleryRail2 { left: 143px; top: -320px; }
.finalGalleryRail3 { right: 143px; }
.finalGalleryRail4 { right: -62px; top: -320px; }
.finalGalleryTrack { display: flex; flex-direction: column; width: 100%; animation: final-gallery-rise 42s linear infinite; animation-play-state: paused; }
.gallery-in-view .finalGalleryTrack { animation-play-state: running; }
.finalGalleryRail:nth-child(even) .finalGalleryTrack { animation-direction: reverse; animation-duration: 49s; }
.finalGallerySequence { display: flex; flex-direction: column; flex: none; gap: 18px; padding-bottom: 18px; }
.finalGallerySequence figure { margin: 0; height: 238px; flex: none; padding: 5px; border-radius: 20px; background: #fff; box-shadow: 0 8px 24px rgb(21 21 22 / .09); overflow: hidden; }
.finalGallerySequence figure:nth-child(even) { height: 192px; }
.finalGallerySequence img { width: 100%; height: 100%; object-fit: cover; border-radius: 15px; }
@keyframes final-gallery-rise { to { transform: translateY(-50%); } }
@keyframes final-gallery-slide { to { transform: translateX(-50%); } }
@media (max-width: 1050px) and (min-width: 761px) {
  .finalCta.finalCtaGallery { padding-inline: 150px; }
  .finalGallery { mask-image: linear-gradient(90deg,#000,transparent 27%,transparent 73%,#000); }
}
@media (max-width: 760px) {
  .finalCta.finalCtaGallery { min-height: 820px; padding: 190px 22px; }
  .finalCtaGallery h2 { font-size: clamp(38px, 10.7vw, 62px); max-width: 460px; }
  .finalCtaGallery > p { max-width: 300px; font-size: 14px; margin-top: 20px; }
  .finalCtaGallery .finalBadge { font-size: 9px; letter-spacing: .08em; }
  .finalCtaGallery .finalButton { width: 100%; max-width: 310px; font-size: 13px; gap: 14px; }
  .finalGallery { mask-image: linear-gradient(#000 0%,#000 12%,transparent 24%,transparent 76%,#000 88%,#000 100%); }
  .finalGalleryRail { left: -40px; right: -40px; top: 0; bottom: auto; width: auto; height: 160px; transform: rotate(-6deg); }
  .finalGalleryRail2 { top: auto; bottom: 0; transform: rotate(6deg); }
  .finalGalleryRail3, .finalGalleryRail4 { display: none; }
  .finalGalleryTrack { width: max-content; flex-direction: row; animation-name: final-gallery-slide; animation-duration: 35s; }
  .finalGallerySequence { flex-direction: row; gap: 12px; padding: 0 12px 0 0; }
  .finalGallerySequence figure, .finalGallerySequence figure:nth-child(even) { width: 128px; height: 160px; border-radius: 15px; }
  .finalGallerySequence figure:nth-child(even) { width: 168px; }
  .finalGallerySequence img { border-radius: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .finalGalleryTrack { animation: none !important; }
}

.contextIcon { display: block; width: 21px; height: 21px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.priceCard .plan { display: inline-flex; align-items: center; gap: 9px; }
.priceCard .plan .contextIcon { width: 22px; height: 22px; }
@media (max-width: 760px) {
  .menuButton { width: 46px; height: 46px; }
  .menuButton span { width: 18px; height: 2px; }
  .menuButton[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
  .menuButton[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
  #inspiration .inspiration-controls { width: calc(100% + 32px); margin-left: -16px; }
  #inspiration .inspiration-filters { padding-inline: 16px; scroll-padding-inline: 16px; }
}

/* Give each workflow step the same contained highlight as the benefit cards. */
.how .step,
.how .step.liquid-control:is(.is-fluid-active, .is-fluid-exiting, .is-scroll-active) {
  padding-bottom: 32px;
  border-color: #ffffff40 !important;
  box-shadow: none !important;
}
.how .step:is(.is-fluid-active, .is-scroll-active) {
  border-radius: 26px;
  overflow: hidden;
}
.how .step:is(.is-fluid-active, .is-scroll-active) > p { color: #fff !important; }

.mobileMenuActions{display:none}
@media(max-width:760px){
 .topbar .nav{max-height:calc(100dvh - 120px);overflow:auto}
 .topbar .nav .mobileMenuActions{display:flex;flex-direction:column;gap:8px;margin-top:12px;padding-top:16px;border-top:1px solid #1515161a}
 .topbar .nav .mobileMenuActions a{display:flex;justify-content:center;align-items:center;text-align:center;font-family:inherit;font-weight:600;min-height:48px;text-decoration:none}
 .topbar .nav .mobileMenuLogin{background:#eceded;color:#151516}
 .topbar .nav .mobileMenuCreate{background:#065dfd;color:#fff}
}
@media(max-width:760px){
 .topbar .nav .mobileMenuLogin{--control-base:#eceded;background-color:#eceded!important}
 .topbar .nav .mobileMenuCreate{--control-base:#065dfd;--control-fluid:#151516!important;background-color:#065dfd!important;color:#fff!important}
 .topbar .nav .mobileMenuCreate span{color:inherit!important}
}

@media(max-width:1060px){
  .topbar > .nav, .topbar.topbarScrolled > .nav,
  .topbar > .nav.navOpen {
    display: flex; position: absolute; top: calc(100% + 10px); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 4px; padding: 12px;
    border: 1px solid rgb(255 255 255 / .95); border-radius: 26px;
    background: rgb(255 255 255 / .97); -webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);
    box-shadow: 0 20px 48px rgb(21 21 22 / .16);
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translateY(-10px) scale(.97); transform-origin: top right;
    transition: opacity 220ms ease, transform 320ms cubic-bezier(.2,.8,.2,1), visibility 220ms;
  }
  .topbar > .nav.navOpen { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) scale(1); }
  .topbar .nav a { min-height: 50px; padding: 0 18px; border-radius: 16px; font-size: 16px; }
  .menuButton { position: relative; flex-shrink: 0; }
  .menuButton span { transition: transform 220ms ease; }
  .menuButton[aria-expanded="true"] span:first-child { transform: translateY(3px) rotate(45deg); }
  .menuButton[aria-expanded="true"] span:last-child { transform: translateY(-3px) rotate(-45deg); }

 .topbar .headerActions{display:none!important}.topbar .menuButton{display:flex;align-items:center;justify-content:center;flex-direction:column;width:46px;height:46px;margin-left:auto}.topbar{justify-content:space-between}.topbar .brand{flex-shrink:0}
 .topbar .nav{max-height:calc(100dvh - 120px);overflow:auto}
 .topbar .nav .mobileMenuActions{display:flex;flex-direction:column;gap:8px;margin-top:12px;padding-top:16px;border-top:1px solid #1515161a}
 .topbar .nav .mobileMenuActions a{display:flex;align-items:center;justify-content:center;min-height:48px}
 .topbar .nav .mobileMenuLogin{background:#eceded!important;color:#151516}
 .topbar .nav .mobileMenuCreate{background:#065dfd!important;color:#fff!important}
}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}