/* ==============================================================
   home.css — clean homepage layout (Elementor-free rebuild)
   --------------------------------------------------------------
   Provides the layout primitives the homepage used to get from
   bootstrap (.container/.row/.col) + Elementor (.e-con) + the theme
   main.css. The custom visual styling still comes from the kept
   stylesheets: site-header.css (hero search bar, floating tags),
   polish.css (boundary lines, subtitle, type scale), theme.js
   (heading sizes, brand tokens, corner squares).

   PILOT scope: hero section only.
   ============================================================== */

/* Global box-sizing reset. The WordPress/bootstrap vendor CSS used to
   provide `* { box-sizing: border-box }`; without it, width:100% +
   padding overflows (e.g. the sticky header rendered wider than the
   viewport, pushing the auth buttons off the right edge). */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Page surface (the homepage body renders on solid white) */
body {
  background: var(--brand-bg, #ffffff);
}

/* ── Shared container (replaces bootstrap .container + e-con) ── */
.uic-container {
  width: 100%;
  max-width: 1220px;
  margin-inline: auto;
  padding-inline: 24px;
  box-sizing: border-box;
}

/* ── Consistent body gutter for polish + newsletter + footer ────
   .uic-section-inner ships with padding 0 (polish.css assumes the
   live site's body 20px padding handled the inner gutter; hero-pilot
   has none). Add the same 24px each side that .uic-container gives
   every other section so features/categories/pricing/FAQ/CTA, the
   newsletter and the footer all align to the same body inset at
   every breakpoint. Selectors include `body` so they beat polish.css's
   higher-specificity `body footer.footer { padding-left: 0 !important }`
   and similar (0,1,2) rules. */
body .uic-section-inner,
body footer.footer {
  padding-left: 24px !important;
  padding-right: 24px !important;
  box-sizing: border-box;
}
/* Footer: full width, the 24px inner padding alone sets its gutter so
   it lines up with the rest of the body content at every breakpoint. */
body footer.footer {
  width: min(1220px, 100%) !important;
  max-width: 1220px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
/* Remove the gray lines around the footer area (per design feedback):
   - site-footer.css gives .footer `border-top: 1px solid ...` — the
     thin line at the very bottom of the page above the footer block.
   - polish.css gives the last FAQ item a `border-bottom` — that's the
     line that sits between FAQ and the newsletter card.
   The internal divider between footer-nav and the copyright row stays
   (it's a deliberate separator). All breakpoints. */
body footer.footer { border-top: 0 !important; }
body .uic-faq-item:last-child { border-bottom: 0 !important; }

/* Newsletter is a rounded PURPLE CARD (unlike the flat polish sections),
   so it needs visible outer breathing room from the viewport at every
   width — same as the live design. Outer 32px gutter + 24-48px inside
   padding so the heading/form sit comfortably inside the card. */
body section.newsletter {
  width: min(1220px, calc(100% - 64px)) !important;
  max-width: 1220px !important;
  margin: 0 auto !important;
  padding-left: clamp(24px, 4vw, 48px) !important;
  padding-right: clamp(24px, 4vw, 48px) !important;
  box-sizing: border-box !important;
}

/* ── Hero ─────────────────────────────────────────────────────
   .home-banner keeps its class so site-header.css + polish.css
   (boundary lines, floating tags, search bar) still apply. */
.home-banner {
  position: relative;
  margin-top: 43px;     /* gap below the sticky header (was the Elementor
                           widget-container's 43px top margin) */
  /* Top padding matches the bottom's clamp (site-header.css forces
     padding-bottom: clamp(48px,6vw,96px) !important) so the hero content
     sits vertically centred inside the boundary box — was 45px top vs the
     larger bottom, which pushed the content upward. */
  padding: clamp(48px, 6vw, 96px) 16px;
  z-index: 1;
}

/* Constrain the purple boundary box to the old design's 1224px content
   width and centre it. polish.css only sets inset:0 50px (so without
   the dropped Elementor container the box stretched ~full width); the
   live design got 1224px from the Elementor widget-container. Loaded
   after polish.css so this !important wins on source order. */
.home-banner .banner-boundary {
  max-width: 1224px !important;
  margin-inline: auto !important;
}

/* The hero content column — replaces .col-lg-9 (≈75% / 871px max),
   centered, centred text. */
.uic-hero-inner {
  max-width: 872px;
  margin-inline: auto;
  text-align: center;
}

/* ── Version pill ("v1.00 · initial release") ─────────────────── */
.home-banner .version-number {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 18px;
  padding: 4px 18px;
  border: 1px solid #d6d9dd;
  border-radius: 50px;
  font-size: 12px;
  line-height: 1;
  color: var(--brand-ink, #0f0f14);
}
.home-banner .version-number span:first-child {
  color: #a852ea;
  font-weight: 600;
}

/* ── Hero title → subtitle gap (was the browser's ~0.67em h1 default,
      ~43px at the 64px hero size — tightened to a fixed 20px). ── */
.home-banner .main-title {
  margin: 0 0 20px;
}

/* ── Subtitle width (polish.css colours it; constrain + centre) ── */
.home-banner .home-description {
  max-width: 600px;
  margin: 0 auto 25px;
}

/* ── Hero platform badges (Figma / HTML / Framer) ─────────────── */
.home-banner .platform-badge-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 20px;
}
.home-banner .platform-badge-wrap .badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid #f5ecff;
  border-radius: 30px;
  background: #fff;
  font-size: 12.8px;
  font-weight: 600;
  color: var(--brand-ink, #0f0f14);
  text-decoration: none;
  transition: border-color .2s cubic-bezier(.22,1,.36,1), transform .2s cubic-bezier(.22,1,.36,1);
}
.home-banner .platform-badge-wrap .badge:hover {
  border-color: #d8b9ff;
  transform: translateY(-1px);
}
.home-banner .platform-badge-wrap .badge .platform-logo {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

/* Search wrap width (site-header.css styles the bar itself) */
.hero-search-wrap {
  /* 620 + 10% = 682 per feedback */
  max-width: 682px;
  margin: 0 auto;
}
.hero-search-wrap .hero-search-bar { width: 100%; }

/* ── Marquee template strips ───────────────────────────────────
   Two rows of template screenshots scrolling opposite directions,
   each tilted -1.6deg (was an Elementor transform). The scroll
   animation + overflow live in custom-enhancements.css; this adds
   the layout main.css used to provide (image size, card radius,
   row tilt, section padding). */
.template-list-slider-bg {
  /* Top gap from the hero boundary box to the marquee rows. site-header.css
     pins this to clamp(24px,3vw,48px); keep a generous, CONSISTENT gap
     across desktop widths (the earlier 6.3vw shrank too much on smaller
     laptops — ~71px at 1440 — so the gap looked cramped). High min keeps
     it ≥96px on any desktop. !important to beat the site-header clamp. */
  padding-top: clamp(96px, 7vw, 124px) !important;
  padding-bottom: 95px;
  overflow: hidden;
  /* Soft purple gradient behind the marquee (was on the Elementor
     section bg): white at top -> lavender -> fades to transparent. */
  background-image: linear-gradient(
    rgba(255, 255, 255, 0.36) 0.38%,
    rgba(227, 205, 255, 0.72) 58.86%,
    rgba(215, 196, 255, 0.6) 75.03%,
    rgba(232, 208, 255, 0) 99.46%
  );
}
/* Mobile: the boundary box is hidden (≤760px), so the big top gap isn't
   needed — keep the marquee tight to the hero content. */
@media (max-width: 760px) {
  .template-list-slider-bg { padding-top: 48px !important; }
}
.uic-marquee-row {
  transform: rotate(-1.6deg);
}
/* Marquee scroll keyframes (were defined in vendor main.css). The
   .marquee-slide / .marquee-slide-right animation rules live in
   custom-enhancements.css and reference these by name. */
@keyframes marquee-left {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}
@keyframes marquee-right {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(0); }
}
.template-list-slider .marque-list.template-marquee {
  flex-shrink: 0;
  border-radius: 12px;
  overflow: hidden;
}
.template-list-slider .template-marquee img {
  display: block;
  width: 360px;
  height: 250px;
  object-fit: cover;
}

/* ── "Design like a pro" section + promo cards ─────────────────
   Section title centered (44px/600), then two bordered cards
   (Free Templates / Free Components): illustration + count-up +
   platform badges. Replaces the Elementor groupimage/counterup/
   platformlist widgets + their main.css styling. */
.uic-promo {
  padding: 96px 0;
}
.uic-promo-title {
  text-align: center;
  margin: 0 auto 48px;
}
.uic-promo-title .title {
  font-size: 44px;
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--brand-ink, #0f0f14);
  margin: 0;
}
.uic-promo-row {
  display: flex;
  gap: 40px;
  justify-content: center;
  max-width: 1200px;
  margin-inline: auto;
}
.uic-promo-card {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 2px solid #e9d9ff;
  border-radius: 20px;
  padding: 48px 0 46px;
}
.uic-promo-card .img-wrapper-five {
  margin-bottom: 30px;
  text-align: center;
}
.uic-promo-card .img-wrapper-five img {
  display: block;
  max-width: 100%;
  height: auto;
}
.uic-promo-card .counter-wrap-1 {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
}
.uic-promo-card .number {
  font-size: 36px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.22;
  margin: 0 0 38px;
  color: var(--brand-ink, #0f0f14);
}
.uic-promo-card .counter-title {
  font-size: 24px;
  font-weight: 400;
  margin: 0 0 6px;
  color: var(--brand-ink, #0f0f14);
}
.uic-promo-card .platform-badge-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.uic-promo-card .platform-badge-wrap .badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border: 1px solid #e6e6e6;
  border-radius: 30px;
  background: #fff;
  font-size: 16px;
  font-weight: 600;
  color: var(--brand-ink, #0f0f14);
  text-decoration: none;
  transition: border-color .2s cubic-bezier(.22,1,.36,1), transform .2s cubic-bezier(.22,1,.36,1);
}
.uic-promo-card .platform-badge-wrap .badge:hover {
  border-color: #d8b9ff;
  transform: translateY(-1px);
}
.uic-promo-card .platform-badge-wrap .badge .icon img {
  display: block;
  width: 22px;
  height: 22px;
  object-fit: contain;
}
/* The Framer logo's glyph fills its whole viewBox (unlike figma/html which
   have internal padding), so at 22px it reads visually larger. Shrink it a
   touch so it optically matches the other badge icons. */
.uic-promo-card .platform-badge-wrap .badge .icon img[src*="framer"] {
  width: 17px;
  height: 17px;
}
/* Promo responsive: tighten the gap on tablet, then STACK the two cards
   on small screens (they were staying side-by-side at 375px → cramped). */
/* Note: the promo "designHeading" title font-size is controlled by
   theme.js inline (clamp(20px,3.67vw,44px)) — same curve the grid/roadmap
   headings use above, so all section titles scale together. */
@media (max-width: 991px) {
  .uic-promo { padding: 72px 0; }
  .uic-promo-row { gap: 24px; }
  .uic-promo-title { margin-bottom: 36px; }
}
@media (max-width: 700px) {
  .uic-promo { padding: 56px 0; }
  .uic-promo-row { flex-direction: column; gap: 20px; }
  .uic-promo-card { padding: 36px 0 34px; }
  .uic-promo-card .number { font-size: 30px; margin-bottom: 28px; }
  .uic-promo-card .counter-title { font-size: 20px; }
}

/* ── Product grid sections ("All Templates" / "Components") ─────
   Section header (title left + CTA button right) + a clean
   responsive bootstrap-style grid. home-products.js injects cards
   carrying col-* classes (templates: col-xl-6/col-lg-6/col-md-6/
   col-12; components: col-xl-4/col-lg-4/col-md-6/col-12); reproduce
   the col widths + gutter since bootstrap is dropped. The card inner
   (.product-wrapper / .showcase-component) is styled by polish.css +
   custom-enhancements.css, with base rules patched in below. */
.uic-grid-section {
  padding: 0 0 115px;
}
.uic-grid-head {
  display: flex;
  align-items: flex-end;   /* "Browse …" link sits on the title's bottom line */
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}
.uic-grid-head .title {
  /* Same fluid curve theme.js injects on the promo "designHeading" title
     (clamp(20px,3.67vw,44px)) so every section heading scales identically
     across desktop → tablet → mobile. !important + the (0,2,0) selector
     beats polish.css's `h2` ≤760 !important rule (clamp 26-36) which would
     otherwise make these 26px while the promo title stays 20px. */
  font-size: clamp(20px, 3.67vw, 44px) !important;
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--brand-ink, #0f0f14);
  margin: 0;
}
/* Grid section responsive: tighter bottom padding + smaller CTA button
   on small screens (heading size handled by the clamp above). */
@media (max-width: 991px) {
  .uic-grid-section { padding-bottom: 72px; }
  .uic-grid-head { margin-bottom: 32px; }
}
@media (max-width: 700px) {
  .uic-grid-section { padding-bottom: 56px; }
  .uic-grid-head { gap: 16px; margin-bottom: 24px; }
  .uic-grid-head .ht-btn { height: 44px; padding: 0 20px; font-size: 14px; }
}
@media (max-width: 540px) {
  .uic-grid-head {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
  }
}
/* Text CTA (not a filled button) — cleaner, more minimal. Brand-ink label
   + a colour-inheriting arrow; on hover it shifts to brand purple and the
   arrow nudges right. */
body.home .uic-grid-head .ht-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--brand-ink, #0f0f14) !important;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: none !important;
  transition: gap .2s cubic-bezier(.22,1,.36,1), color .2s;
}
body.home .uic-grid-head .ht-btn:hover {
  transform: none;
  opacity: 1;
  color: #803CE7 !important;
  gap: 11px !important;
}
/* Hide the white chevron image; use a text arrow that inherits `color`
   so it recolours on hover for free. */
body.home .uic-grid-head .ht-btn .btn-icon { display: none !important; }
body.home .uic-grid-head .ht-btn::after {
  content: "\2192";   /* → — beats custom-enhancements.css's .ht-btn::after{display:none} */
  display: inline-block !important;
  font-size: 17px;
  line-height: 1;
  font-weight: 500;
  opacity: 1 !important;
}
/* polish.css hides .ht-btn::after on hover (opacity:0, to kill the button
   shine) — keep OUR arrow visible and purple on hover. */
body.home .uic-grid-head .ht-btn:hover::after {
  opacity: 1 !important;
  color: #803CE7 !important;
}

/* Responsive bootstrap-style column grid */
.uic-template-grid,
.uic-component-grid {
  display: flex;
  flex-wrap: wrap;
  /* Left-aligned (flex-start) so cards fill left-to-right as the admin
     adds products; a lone last card sits under the first column
     instead of floating centered. */
  justify-content: flex-start;
  margin-inline: -16px;
  /* Vertical gap between card rows (the cards' mb-40 utility was in
     the dropped theme CSS, leaving rows nearly touching). */
  row-gap: 36px;
}
/* Neutralize the leftover mb-40 utility so it doesn't add to row-gap. */
.uic-template-grid .product-wrapper.mb-40,
.uic-component-grid .showcase-component.mb-40 { margin-bottom: 0; }
.uic-template-grid > [class*="col-"],
.uic-component-grid > [class*="col-"] {
  padding-inline: 16px;
  box-sizing: border-box;
}
.uic-template-grid > .col-12,
.uic-component-grid > .col-12 { flex: 0 0 100%; max-width: 100%; }
@media (min-width: 768px) {
  .uic-template-grid > .col-md-6,
  .uic-component-grid > .col-md-6 { flex: 0 0 50%; max-width: 50%; }
}
@media (min-width: 992px) {
  .uic-template-grid > .col-lg-6 { flex: 0 0 50%; max-width: 50%; }
  .uic-template-grid > .col-lg-4,
  .uic-component-grid > .col-lg-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
}
@media (min-width: 1200px) {
  .uic-template-grid > .col-xl-6 { flex: 0 0 50%; max-width: 50%; }
  .uic-template-grid > .col-xl-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
  /* Components grid: 4 per row on desktop (was 3). */
  .uic-component-grid > .col-xl-4 { flex: 0 0 25%; max-width: 25%; }
}

/* ── Components slider (jQuery-free; uic-slider.js drives it) ────
   The .uic-component-grid stays the hydration target but becomes the
   slider TRACK: a single non-wrapping flex row inside an overflow-
   hidden viewport, translated on X. Arrows + dots sit below. Scoped
   under .uic-slider so the .uic-template-grid wrap layout is untouched. */
.uic-slider { position: relative; }
.uic-slider-viewport { overflow: hidden; }
.uic-slider .uic-component-grid {
  flex-wrap: nowrap !important;
  row-gap: 0;
  /* Carousel gutter: 15px each side. The negative margin matches the
     card padding so the first/last cards still sit flush with the
     viewport edges. */
  margin-inline: -15px;
  transition: transform .5s cubic-bezier(.22, 1, .36, 1);
  will-change: transform;
}
/* 4 slides desktop / 3 large-tablet / 2 tablet / 1 mobile — override the
   breakpoint col rules so the visible count is consistent at the slider's
   own widths. */
.uic-slider .uic-component-grid > [class*="col-"] {
  flex: 0 0 25% !important;
  max-width: 25% !important;
  padding-inline: 15px !important;
}
@media (max-width: 1199px) {
  .uic-slider .uic-component-grid > [class*="col-"] {
    flex-basis: 33.3333% !important;
    max-width: 33.3333% !important;
  }
}
@media (max-width: 991px) {
  .uic-slider .uic-component-grid > [class*="col-"] {
    flex-basis: 50% !important;
    max-width: 50% !important;
  }
}
@media (max-width: 600px) {
  .uic-slider .uic-component-grid > [class*="col-"] {
    flex-basis: 100% !important;
    max-width: 100% !important;
  }
}
/* Component slide card — match the template card look: a soft grey
   rounded box (#f5f5f5, same as the template img-wrap) with 30px
   padding, a FIXED height so every slide aligns, and the preview
   image shown inside. Beats home-products.js's #f7f6f8 !important. */
.uic-component-grid .showcase-component .product-img {
  padding: 0;      /* no padding — image fills the card edge-to-edge */
  height: 184px;   /* 25% shorter than the original 245px */
  overflow: hidden;
}
/* 7px corners — body.home prefix to beat the higher-specificity default */
body.home .uic-component-grid .showcase-component .product-img {
  border-radius: 7px !important;
}
/* home-products.js injects a runtime <style> setting product-img
   background:#f7f6f8 !important at (0,3,0); the body.home prefix lifts
   us to (0,4,1) so our surface wins the tie. Colour matches the
   Why-choose / Build-&-launch card surface (#faf9fe). */
body.home .uic-component-grid .showcase-component .product-img {
  background: #faf9fe !important;
  border: 0;
}
/* Drop the inner hairline border polish.css puts on the image wrapper
   (.uic-card-img-link, 1px rgba(15,17,23,.06)). The #faf9fe surface
   above already gives the component card a visible edge, and the
   featured/4×2 cards carry no such border — so removing it keeps the
   two card types consistent. Radius pinned to 7px to match the surface. */
body.home .uic-component-grid .showcase-component .uic-card-img-link {
  border: 0 !important;
  border-radius: 7px !important;
}
/* Constrain the link wrapper to the padded content box so the image
   sits INSIDE the 30px padding (home-products.js sets img 100%/cover,
   but its <a> wrapper has auto height and lets the image bleed over
   the padding) — same treatment the template cards already get. */
.uic-component-grid .showcase-component .product-img > a,
.uic-component-grid .showcase-component .product-img .uic-card-img-link {
  display: block;
  width: 100%;
  height: 100%;
}
.uic-component-grid .showcase-component .product-img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 7px;
}
.uic-component-grid .showcase-component .product-content {
  /* Title sits tight under the gray image box; the box's own 30px
     bottom padding already provides the visual gap, matching the
     template card's 30px title→image rhythm. */
  margin-top: 0;
}

/* Card patches: polish.css scopes these to .elementor-widget-product-
   widget-post (absent in the clean markup) and main.css provided the
   pill colour — re-apply for the clean grids. */
.uic-template-grid .product-wrapper.prstyle-2 .img-wrap {
  /* Height now driven by .product-img's 6:7 aspect-ratio (matches the
     recommended 1200×1400 upload size). Was a fixed clamp(490,54vw,650). */
  height: auto;
  display: flex;
  flex-direction: column;
}
/* Tablet (768–991): the 560px floor is too tall for the narrower
   2-col layout — drop 20% per design feedback (560 → 448). */
@media (min-width: 768px) and (max-width: 991px) {
  .uic-template-grid .product-wrapper.prstyle-2 .img-wrap {
    /* Tablet — let the 6:7 .product-img drive height too. */
    height: auto;
  }
}
/* Template card header (logo + "Startup" / category title) — center
   the title under the logo and bump the size a touch. The matching
   rules in custom-enhancements.css are scoped to
   .elementor-widget-product-widget-post (legacy) and don't catch the
   clean rebuild grid, so define them here. */
.uic-template-grid .product-wrapper.prstyle-2 .product-header {
  text-align: center;
}
.uic-template-grid .product-wrapper.prstyle-2 .product-custom-title-wrap {
  text-align: center;
}
/* 3-up grid: full-bleed preview. The logo + category header was removed
   from the card markup (home-products.js v24) — the image now fills the
   whole tile edge-to-edge with no grey frame, like the reference design.
   body.home prefix + the :has variant out-rank polish.css's grey-box
   rules (#F5F5F5 / 14px-top radius / 50px padding); home.css also loads
   after polish.css so equal-specificity ties break our way. */
body.home .uic-template-grid .product-wrapper.prstyle-2 .img-wrap,
body.home .uic-template-grid .product-wrapper.prstyle-2 .img-wrap:has(img) {
  padding: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
}
body.home .uic-template-grid .product-wrapper.prstyle-2 .img-wrap .product-img,
body.home .uic-template-grid .product-wrapper.prstyle-2 .img-wrap .product-img > a,
body.home .uic-template-grid .product-wrapper.prstyle-2 .img-wrap .product-img > a > img {
  border-radius: 16px !important;
  overflow: hidden !important;
}

/* product-img fills the remaining img-wrap height (was in dropped
   main.css); the preview image covers it. */
.uic-template-grid .product-wrapper.prstyle-2 .product-img {
  /* 6:7 portrait — matches the recommended 1200×1400 upload exactly, so
     the home template card shows the full preview without cropping. */
  width: 100%;
  aspect-ratio: 6 / 7;
  flex: 0 0 auto;
}
.uic-template-grid .product-wrapper.prstyle-2 .product-img > a,
.uic-template-grid .product-wrapper.prstyle-2 .product-img > a > img,
.uic-template-grid .product-wrapper.prstyle-2 .product-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Template card: soft-purple Free/Pro pill in the bottom row, to the
   right of the platform icon — same treatment as the component card. */
.uic-template-grid .type-free {
  background: #f5ecff;
  color: rgba(0, 0, 0, 0.39);
  text-decoration: none;
  height: 36px !important;
}
/* Component card: keep the original soft-purple pill in the bottom row. */
.uic-component-grid .type-free {
  background: #f5ecff;
  color: rgba(0, 0, 0, 0.39);
  text-decoration: none;
  height: 36px !important;
}
/* Keep the wrapper a positioning context for the "New" badge overlay.
   The Free/Pro pill now lives inline in the bottom row (no longer pinned
   to the corner) so it sits to the right of the platform icon. */
.uic-template-grid .product-wrapper {
  position: relative;
}

/* Card meta row: title left, platform-logos + Free/Pro pill right.
   Reproduces the dropped bootstrap d-flex/justify-content-between/gap
   utilities + the round platform-logo circle. */
.uic-template-grid .bottom-content,
.uic-component-grid .bottom-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: nowrap;
}
.uic-template-grid .product-title a,
.uic-component-grid .product-title a {
  text-decoration: none;
  color: var(--brand-ink, #0f0f14);
}
.uic-template-grid .download-link,
.uic-component-grid .download-link {
  display: flex;
  align-items: center;
  gap: 8px;
}
.uic-template-grid .downloadable-link,
.uic-component-grid .downloadable-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid #e3e3e8;   /* gray ring — match the featured/4×2 card icon */
  border-radius: 50%;
  background: #fff;            /* pure white circle behind the logo */
}
/* Platform icons inside the 36px round .downloadable-link circle.
   Add inner padding to the circle and let the icon fill the remaining
   space at object-fit:contain — every icon ends up the same visual
   size with the same gap from the border (uniform padding). */
/* Match polish.css's (0,4,1) selector specificity so template-grid
   icons get the same 5px padding as the component-grid ones (polish
   scopes templates with .product-wrapper.prstyle-2 which my plain
   .uic-template-grid was losing to). */
body.home .uic-template-grid .product-wrapper .downloadable-link,
body.home .uic-component-grid .showcase-component .downloadable-link {
  /* 7.5px padding on a 36px circle (with 1px border) = ~19x19 inner
     area — 20% smaller than the previous 24x24 per feedback. */
  padding: 7.5px !important;
  box-sizing: border-box !important;
}
body.home .uic-template-grid .product-wrapper .downloadable-link img,
body.home .uic-component-grid .showcase-component .downloadable-link img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
}

/* Hero search bar: polish.css adds a soft drop-shadow we don't want. */
body.home .hero-search-bar {
  box-shadow: none !important;
}

/* Hero search input: keep the placeholder visible in the normal state,
   but hide it the moment the user focuses/clicks the input — fixes the
   mid-word chop when the focused input scrolls horizontally. */
body.home .hero-search-bar .hero-search-input { min-width: 0; }
body.home .hero-search-bar .hero-search-input input {
  min-width: 0;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
body.home .hero-search-bar .hero-search-input input:focus::placeholder {
  color: transparent !important;
}

/* ── CEO Quote (purple box, white text — matches vendor/main.css) ── */
.uic-ceo-quote {
  /* No outer padding: the neighbouring sections already supply the gap
     (components' 115px bottom above, .uic-features' 115px top below), so
     the CEO card's own padding was stacking on top of those and making
     the gaps around it ~187px instead of the 115px the other sections
     get. The purple .uic-ceo-box keeps its own inner padding. */
  padding: 0;
  background: var(--brand-bg, #fff);
}
.uic-ceo-box {
  background: #8439ff;
  border-radius: 30px;
  /* Even padding all round — left/right matched to the 60px top/bottom
     (was 95.5px, which read as too wide). */
  padding: 60px;
}
.uic-ceo-row {
  display: flex;
  align-items: center;
  gap: 40px;
}
.uic-ceo-box .ui-author-thumb {
  flex: 0 0 auto;
}
.uic-ceo-box .ui-author-thumb img {
  width: 266px;
  height: 266px;
  border-radius: 100%;
  object-fit: cover;
  display: block;
}
.uic-ceo-box .quote-wrap {
  flex: 1 1 0;
  min-width: 0;
}
.uic-ceo-box .quote-title {
  color: rgba(255, 255, 255, 0.4);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.65;
  letter-spacing: -0.4px;
  margin: 0 0 22px;
}
.uic-ceo-box .quote-text {
  color: #ffffff;
  /* !important so it beats theme.js's global `p, .description { font-size:
     var(--brand-body-size) !important }` — the quote is a <p class="…
     description"> so it would otherwise collapse to the 16px body size. */
  font-size: 32px !important;
  font-weight: 400;
  line-height: 1.42;
  margin: 0 0 22px;
}
.uic-ceo-box .quote-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.uic-ceo-box .author-info .name {
  color: #ffffff;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.65;
  letter-spacing: -0.4px;
  margin: 0;
}
.uic-ceo-box .author-info .designation {
  color: rgba(255, 255, 255, 0.7);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.6;
  margin: 0 0 15px;
}
.uic-ceo-box .quote-icon {
  flex: 0 0 auto;
  width: 54.547px;
  height: 54.547px;
  border-radius: 54.547px;
  background: rgba(255, 255, 255, 0.3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.uic-ceo-box .quote-icon img {
  width: 30px;
  height: auto;
}
@media (max-width: 991px) {
  .uic-ceo-box { padding: 40px; }
  .uic-ceo-box .quote-text { font-size: 22px !important; }
}
@media (max-width: 767px) {
  .uic-ceo-row {
    flex-direction: column;
    text-align: center;
    gap: 28px;
  }
  .uic-ceo-box { padding: 24px; }
  .uic-ceo-box .ui-author-thumb img { width: 200px; height: 200px; }
  .uic-ceo-box .quote-text { font-size: 18px !important; }
  .uic-ceo-box .quote-meta { flex-direction: column; gap: 18px; }
  .uic-ceo-box .designation { font-size: 16px; }
}

/* ── Testimonials (full-bleed autoplay slider — matches old design) ──
   Card visuals match vendor/main.css (border #e6e6e6, radius 20px,
   22px copy, gold stars, 34px round avatar). Layout is a full-width
   auto-sliding carousel: 4 cards desktop / 3 / 2 / 1, gaps via the
   .uic-testi-col wrapper, driven by uic-slider.js (autoplay loop). */
.uic-testimonials {
  padding: 115px 0;
  background: var(--brand-bg, #fff);
}
.uic-testimonials .uic-slider { padding-inline: 24px; }
.uic-testimonials .uic-slider-viewport { overflow: hidden; }
.uic-testimonials-grid {
  display: flex;
  flex-wrap: nowrap;
  transition: transform .6s cubic-bezier(.22, 1, .36, 1);
  will-change: transform;
}
.uic-testimonials-grid > .uic-testi-col {
  flex: 0 0 25%;          /* 4 cards across on desktop */
  max-width: 25%;
  padding-inline: 13px;   /* → 26px gap between cards */
  box-sizing: border-box;
}
.uic-testimonials-grid .feedback-wrap {
  border: 1px solid #e6e6e6;
  border-radius: 20px;
  padding: 26px 25px 30px;
  background: #fff;
}
.feedback-rating {
  color: rgb(255, 188, 59);
  font-size: 18px;
  letter-spacing: 2px;
  display: inline-block;
  margin-bottom: 12px;
}
.uic-testimonials-grid .feedback-text {
  color: #22282b;
  /* !important so it beats theme.js's global `p { font-size:
     var(--brand-body-size) !important }` (the card quote is a <p>). */
  font-size: 24px !important;
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.44px;
  margin: 0 0 18px;
}
.feedback-author {
  display: flex;
  align-items: center;
  gap: 8px;
}
.feedback-author .author-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 100%;
  object-fit: cover;
  display: block;
}
.feedback-author .name {
  color: #000;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.26px;
  margin: 0;
}
@media (max-width: 1200px) {
  .uic-testimonials-grid > .uic-testi-col { flex-basis: 33.3333%; max-width: 33.3333%; }
}
@media (max-width: 991px) {
  .uic-testimonials-grid > .uic-testi-col { flex-basis: 50%; max-width: 50%; }
  .uic-testimonials-grid .feedback-text { font-size: 22px !important; }
}
@media (max-width: 600px) {
  .uic-testimonials-grid > .uic-testi-col { flex-basis: 100%; max-width: 100%; }
}

/* ── Blueprint / Roadmap (vertical stepped slider) ──
   Exact old-design background: the .upcoming-section gradient — a soft
   purple GLOW that's transparent at top, peaks at #E3CDFF in the middle
   (behind the title + top cards) and fades back to transparent (white
   page) at the bottom. The bottom fade is white to match that. */
.uic-roadmap {
  padding: 96px 0;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 0.38%,
    #e3cdff 58.86%,
    #e2ccff 65.77%,
    rgba(215, 196, 255, 0.6) 75.03%,
    rgba(232, 208, 255, 0) 99.46%
  );
}
/* Mobile — the desktop 96px top padding stacked on the section above
   left a large empty gap before the heading; tighten it. */
@media (max-width: 760px) {
  .uic-roadmap { padding-top: 44px; }
  .uic-roadmap-head .description-text { margin-bottom: 32px; }
}
.uic-roadmap-head {
  text-align: center;
  max-width: 680px;
  margin: 0 auto;
}
.uic-roadmap-head .title {
  /* No font-size override here on purpose: this h2 inherits the exact
     same sizing rules as every other heading — `body.home h2`
     (clamp 28px→44px) on desktop and polish.css's `h2` ≤760 rule
     (clamp 26px→36px) on mobile — so it always matches its neighbours.
     The old `clamp(20px…) !important` out-specified those and rendered
     ~6px smaller than the other section titles on phones. */
  font-weight: 600;
  /* theme.js forces -0.02em on all headings (!important); the live
     blueprint title renders with normal tracking via the elementor
     sectiontitle override, so match it here. */
  letter-spacing: normal !important;
  line-height: 1.08;
  margin: 0 0 15px;
  color: #000;
}
.uic-roadmap-head .description-text {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.42;
  color: #000;
  margin: 0 0 50px;
}
/* Vertical auto-scroll viewport (matches the old vertical slick slider):
   a fixed-height window showing ~4 blocks, the track scrolls up
   continuously and loops, with a white fade over the bottom. uic-slider.js
   clones the blocks so the -50% keyframe loops seamlessly. */
.uic-roadmap-viewport {
  position: relative;
  max-width: 993px;
  height: 796px;
  margin-inline: auto;
  overflow: hidden;
}
.uic-roadmap-viewport::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 220px;
  border-radius: 20px;
  /* white fade — the section gradient is already near-transparent (white
     page) at the bottom, so the cards dissolve to white like the old
     vertical-slider::after. */
  background: linear-gradient(181deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.55) 42%, #fff 82%);
  pointer-events: none;
  z-index: 3;
}
.uic-roadmap-list {
  display: flex;
  flex-direction: column;
}
.roadmap-block {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 27px;   /* owns its trailing gap so the -50% loop is seamless */
  border-radius: 30px;
  background: #ffffff;
  padding: 35px 37.5px;
}
.roadmap-block .roadmap-intro {
  flex: 0 0 auto;
  min-width: 200px;
}
.roadmap-block .intro-title {
  font-size: 28px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.56px;
  margin: 0 0 8px;
  color: #000;
}
.roadmap-block .intro-title a {
  color: inherit;
  text-decoration: none;
  transition: color .2s ease;
}
.roadmap-block .intro-title a:hover { color: var(--brand-purple, #8735ee); }
.roadmap-block .release-date {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: -0.36px;
  color: rgba(0, 0, 0, 0.65);
  margin: 0;
}
.roadmap-block .release-date span { color: #000; }
.roadmap-block .description-content {
  flex: 1 1 0;
  color: rgba(0, 0, 0, 0.7);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: -0.17px;
  max-width: 344px;
  margin: 0;
}
.roadmap-block .icon-wrap {
  flex: 0 0 100px;
  width: 100px;
  height: 100px;
  padding: 25px;
  border-radius: 75px;
  background: #e0f3f6;
  display: flex;
  align-items: center;
  justify-content: center;
}
.roadmap-block .icon-wrap img {
  width: 100%;
  height: auto;
  object-fit: contain;
}
@media (max-width: 991px) {
  .roadmap-block .intro-title { font-size: 22px; }
  .roadmap-block .description-content { font-size: 16px; max-width: 300px; }
}
@media (max-width: 767px) {
  .uic-roadmap-viewport { height: 660px; }
  .roadmap-block {
    flex-direction: column;
    text-align: center;
    gap: 18px;
    padding: 28px 18px;
  }
  .roadmap-block .roadmap-intro { min-width: 0; }
  .roadmap-block .description-content { max-width: 100%; }
}

/* ── Uniform section rhythm (desktop) ──────────────────────────────
   Every home flow section uses the SAME symmetric vertical padding so
   the gap between any two adjacent sections is identical (~115px =
   2 × 57.5). This is the single source of truth for desktop section
   spacing — it overrides theme.js's `--brand-section-y` (applied with
   !important to the token sections) and each section's own value.

   Before this, grid sections (bottom-only) gave clean 115px gaps but
   any two both-side-padded sections (categories/pricing/cta, and
   features → testimonials → roadmap) doubled up to ~230px, so the gaps
   read as uneven. Mobile (<992px) keeps each section's own responsive
   padding. ── */
@media (min-width: 992px) {
  body.home .uic-promo,
  body.home .uic-grid-section,
  body.home .uic-features,
  body.home .uic-categories,
  body.home .uic-pricing,
  body.home .uic-cta-banner,
  body.home .uic-ceo-quote,
  body.home .uic-testimonials,
  body.home .uic-roadmap,
  body.home .uic-compare,
  body.home .uic-faq,
  body.home section.newsletter {
    /* Driven by Brand Studio's "Section padding-Y" token, which
       theme.js exposes as --brand-section-y. We use HALF of it on
       each side so the visible gap between adjacent sections equals
       the admin-set value (e.g. 115 → 57.5 each side → 115 gap). */
    padding-top: calc(var(--brand-section-y, 115px) / 2) !important;
    padding-bottom: calc(var(--brand-section-y, 115px) / 2) !important;
  }
}
/* CTA banner: no bottom gap — sits tight above the newsletter. Higher
   specificity (2 elements + 2 classes) than the rhythm rule above so it
   wins at every breakpoint. */
body.home section.uic-cta-banner {
  padding-bottom: 0 !important;
}

/* ============================================================
   How-we-compare section — comparison table that contrasts
   uicompose against "Generic UI kits" and "Hiring a designer".
   Uses the brand palette (purple highlight on the uicompose
   column, soft border separators, no shadow flourishes).
   ============================================================ */
.uic-compare {
  width: 100%;
}
.uic-compare .uic-container {
  width: min(1220px, calc(100% - 48px));
  margin: 0 auto;
}
.uic-compare-head {
  max-width: 760px;
  margin: 0 auto 56px;
  text-align: center;
}
.uic-compare-head .uic-section-lead {
  max-width: 580px;
  margin: 14px auto 0;
}
.uic-compare-table {
  border: 1px solid #ece9f1;
  border-radius: 22px;
  overflow: hidden;
  background: #fff;
}
.uic-compare-row {
  display: grid;
  grid-template-columns: minmax(280px, 1.6fr) repeat(3, 1fr);
  align-items: center;
}
.uic-compare-row + .uic-compare-row {
  border-top: 1px solid #ece9f1;
}
.uic-compare-cell {
  padding: 24px 28px;
  font-size: 15px;
  color: var(--brand-ink, #0f0f14);
}
.uic-compare-feature {
  font-weight: 600;
  color: var(--brand-ink, #0f0f14);
}
.uic-compare-thead .uic-compare-cell {
  font-size: 14px;
  font-weight: 500;
  color: var(--brand-muted, #6b6b75);
  padding-top: 22px;
  padding-bottom: 22px;
  background: transparent;
}
.uic-compare-thead .uic-compare-us {
  color: var(--brand, #8735ee);
  font-weight: 600;
}
/* uicompose column highlight — a soft tint that runs full height. */
.uic-compare-us {
  background: rgba(135, 53, 238, 0.05);
}
.uic-compare-thead .uic-compare-us {
  /* Header keeps a slightly stronger tint so the column reads as the
     featured option even before you scan the rows. */
  background: rgba(135, 53, 238, 0.08);
}
/* Yes / No / partial indicators — thin SVG line icons (1.5px stroke). */
.uic-compare-check,
.uic-compare-cross {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.uic-compare-check { color: var(--brand, #8735ee); }
.uic-compare-cross { color: rgba(15, 15, 20, 0.32); }
.uic-compare-partial {
  color: var(--uic-ink, #0f0f14);
  font-weight: 500;
}
.uic-compare-us strong {
  font-weight: 700;
}

/* Tablet — keep the 4-col grid but tighten cells. */
@media (max-width: 991px) {
  .uic-compare-row {
    grid-template-columns: minmax(200px, 1.4fr) repeat(3, 1fr);
  }
  .uic-compare-cell { padding: 18px 16px; font-size: 14px; }
  .uic-compare-thead .uic-compare-cell { font-size: 12.5px; }
  /* Below 992px the desktop section-padding token rule doesn't apply,
     so the section had 0 top/bottom padding — the heading touched the
     section above and the table touched the one below. Give it real
     section breathing room, and pull the oversized 56px head→table gap
     in so the rhythm reads balanced (big gap between sections, smaller
     gap inside one). */
  .uic-compare { padding: 52px 0; }
  .uic-compare-head { margin-bottom: 30px; }
}

/* Mobile — collapse to a stack: feature label as a row, then 3
   labelled value rows ("uicompose: Yes", etc.). The header row hides
   and each row is its own card. */
@media (max-width: 640px) {
  /* The container's width:calc(100% - 48px) adds a 24px auto-margin on
     each side ON TOP of the global .uic-container 24px padding — so the
     table sat 48px in from each edge (279px) while sibling cards span
     327px. Full width here drops the extra margin; the padding alone
     gives the same 24px gutters as the rest of the page. */
  .uic-compare .uic-container { width: 100%; }
  /* Must out-specify the `.uic-compare-row { display:block }` below —
     the thead carries BOTH classes, equal specificity, and the row
     rule comes later, so a bare `.uic-compare-thead` lost and the
     header showed as a duplicated "uicompose uicompose" block. */
  .uic-compare-row.uic-compare-thead { display: none; }
  .uic-compare-row {
    display: block;
    padding: 18px 18px 8px;
  }
  .uic-compare-row + .uic-compare-row { border-top: 1px solid #ece9f1; }
  .uic-compare-feature {
    padding: 0 0 10px;
    font-size: 15px;
  }
  .uic-compare-cell:not(.uic-compare-feature) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 14px;
    background: transparent;
  }
  /* Labels via data attribute fallback — keep clarity on small screens. */
  .uic-compare-row .uic-compare-us::before { content: "uicompose"; color: var(--brand, #8735ee); font-weight: 600; }
  .uic-compare-row .uic-compare-cell:nth-child(3):not(.uic-compare-feature)::before { content: "Generic UI kits"; color: var(--brand-muted, #6b6b75); font-weight: 500; }
  .uic-compare-row .uic-compare-cell:nth-child(4):not(.uic-compare-feature)::before { content: "Hiring a designer"; color: var(--brand-muted, #6b6b75); font-weight: 500; }
}

/* ============================================================
   Newsletter — clean left-text + right-form row.
   MOVED to polish.css (loaded on every page) + de-scoped from
   `body.home` to `body` so the CTA + subscriber row can appear
   site-wide, not just on the home page. See polish.css
   "Newsletter clean (site-wide)" block.
   ============================================================ */

/* ============================================================
   Hero search — live suggestion dropdown (instant, from DB).
   Anchored under the hero search bar. Same brand language as the
   ⌘K command palette but standalone classes.
   ============================================================ */
.hero-search-wrap { position: relative; }

.hero-suggest {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  right: 0;
  z-index: 40;
  background: var(--uic-bg, #fff);
  border: 1px solid var(--uic-line, #e6e5e0);
  border-radius: 18px;
  box-shadow:
    0 1px 2px rgba(18, 12, 40, .03),
    0 14px 38px -22px rgba(18, 12, 40, .14),
    0 5px 16px -14px rgba(18, 12, 40, .08);
  padding: 7px;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-8px) scale(.99);
  transform-origin: top center;
  transition: opacity .18s ease, transform .2s cubic-bezier(.22, 1, .36, 1);
  text-align: left;
}
.hero-suggest[hidden] { display: none; }
.hero-suggest.is-open { opacity: 1; transform: translateY(0) scale(1); }

.hero-suggest-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--uic-faint, #9a9aa3);
  padding: 9px 12px 7px;
}

.hero-suggest-item {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  background: transparent;
  border-radius: 13px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  scroll-margin: 6px;
  transition: background .14s ease, color .14s ease;
}
.hero-suggest-item.is-active { background: var(--uic-brand-soft, #f2e9ff); }
.hero-suggest-item.is-active .hero-suggest-title { color: var(--uic-brand, #8735ee); }
.hero-suggest-item:active { transform: scale(.994); }

.hero-suggest-thumb {
  width: 56px;
  height: 40px;
  border-radius: 9px;
  overflow: hidden;
  background: var(--uic-bg-tile, #f1f0ec);
  box-shadow: inset 0 0 0 1px rgba(18, 12, 40, .06);
  flex: none;
}
.hero-suggest-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  animation: hero-suggest-fade .35s ease both;
}
@keyframes hero-suggest-fade { from { opacity: 0; } to { opacity: 1; } }

/* skeleton (shown while the catalogue is loading on first focus) */
.hero-suggest-skel { display: flex; align-items: center; gap: 13px; padding: 10px 12px; }
.hero-suggest-skel-thumb { width: 56px; height: 40px; border-radius: 9px; flex: none; }
.hero-suggest-skel-text { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.hero-suggest-skel-line { height: 9px; border-radius: 5px; }
.hero-suggest-skel-line.is-short { width: 42%; }
.hero-suggest-skel-thumb,
.hero-suggest-skel-line {
  background: linear-gradient(90deg,
    var(--uic-bg-tile, #f1f0ec) 25%,
    color-mix(in srgb, var(--uic-bg-tile, #f1f0ec) 60%, #fff) 37%,
    var(--uic-bg-tile, #f1f0ec) 63%);
  background-size: 400% 100%;
  animation: hero-suggest-shimmer 1.4s ease infinite;
}
@keyframes hero-suggest-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-suggest-skel-thumb,
  .hero-suggest-skel-line { animation: none; }
  .hero-suggest-thumb img { animation: none; }
}

.hero-suggest-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hero-suggest-title {
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--uic-ink, #0f0f14);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hero-suggest-sub {
  font-size: 12.5px;
  color: var(--uic-muted, #6b6b75);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hero-suggest-title mark,
.hero-suggest-sub mark { background: transparent; color: var(--uic-brand, #8735ee); font-weight: 700; }

.hero-suggest-price {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--uic-muted, #6b6b75);
  padding: 4px 10px;
  border-radius: var(--uic-r-pill, 999px);
  background: var(--uic-bg-tile, #f1f0ec);
  flex: none;
}
.hero-suggest-price.is-free { color: var(--uic-brand, #8735ee); background: var(--uic-brand-soft, #f2e9ff); }

.hero-suggest-go {
  flex: none;
  width: 16px;
  height: 16px;
  margin-left: 2px;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity .15s ease, transform .15s ease;
}
.hero-suggest-go svg { width: 16px; height: 16px; fill: var(--uic-brand, #8735ee); display: block; }
.hero-suggest-item.is-active .hero-suggest-go,
.hero-suggest-item:hover .hero-suggest-go { opacity: 1; transform: none; }

.hero-suggest-empty {
  padding: 18px 12px;
  font-size: 13px;
  color: var(--uic-muted, #6b6b75);
  text-align: center;
}

.hero-suggest-all {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-top: 6px;
  padding: 11px 12px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--uic-muted, #6b6b75);
  text-align: left;
  transition: background .14s ease, color .14s ease;
}
/* hairline divider that stops short of the rounded corners */
.hero-suggest-all::before {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  top: -3px;
  height: 1px;
  background: var(--uic-line, #e6e5e0);
}
.hero-suggest-all-ico {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--uic-bg-soft, #fafaf7);
  border: 1px solid var(--uic-line, #e6e5e0);
  flex: none;
}
.hero-suggest-all-ico svg { width: 14px; height: 14px; fill: var(--uic-muted, #6b6b75); }
.hero-suggest-all .hero-suggest-arrow {
  margin-left: auto;
  color: var(--uic-brand, #8735ee);
  font-weight: 700;
  font-size: 15px;
}
.hero-suggest-all.is-active,
.hero-suggest-all:hover { background: var(--uic-brand-soft, #f2e9ff); color: var(--uic-brand, #8735ee); }
.hero-suggest-all.is-active .hero-suggest-all-ico svg,
.hero-suggest-all:hover .hero-suggest-all-ico svg { fill: var(--uic-brand, #8735ee); }

@media (prefers-reduced-motion: reduce) {
  .hero-suggest { transition: none !important; transform: none !important; }
  .hero-suggest-go { transition: none !important; }
}

/* ============================================================
   Why choose uicompose — reference-style bento grid.
   2×2 bento cards. Motion: vertical template
   collage marquees, floating platform chips, name marquee with a
   tilted "New Published" ribbon, fanned source-file shots, and a
   one-shot reveal (.in-view via IntersectionObserver).
   ============================================================ */
.uic-why {
  padding: 96px 0 24px;
}
/* Heading + lead centered per design feedback. */
.uic-why .uic-section-title,
.uic-why .uic-section-lead {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.uic-why .uic-section-lead {
  max-width: 560px;
}
.uic-why-grid {
  display: grid;
  /* Asymmetric bento — wide/narrow top row flips to narrow/wide below,
     so the rhythm doesn't read as a plain 2x2 grid. */
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  margin-top: 40px;
}
.uic-why-templates { grid-column: span 3; }
.uic-why-platforms { grid-column: span 2; }
.uic-why-drops { grid-column: span 2; }
.uic-why-files { grid-column: span 3; }
.uic-why-card {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  background: #f6f6f8;
  border: 1px solid #efeef3;
  padding: 34px 36px 0;
  /* Reveal state — JS flips .in-view once the card scrolls in. */
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .45s cubic-bezier(.22,1,.36,1), transform .45s cubic-bezier(.22,1,.36,1);
}
.uic-why-card.in-view {
  opacity: 1;
  transform: none;
}
.uic-why-card:nth-child(2).in-view { transition-delay: .05s; }
.uic-why-card:nth-child(3).in-view { transition-delay: .08s; }
.uic-why-card:nth-child(4).in-view { transition-delay: .11s; }
.uic-why-card h3 {
  margin: 0 0 10px;
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--brand-ink, #0f0f14);
}
.uic-why-card > p {
  margin: 0 0 8px;
  font-size: 15.5px;
  line-height: 1.6;
  color: #57575f;
  max-width: 400px;
}

/* ── Card 1: scrolling template collage + floating Browse button ── */
.uic-why-templates {
  padding-bottom: 0;
}
.uic-why-collage {
  position: relative;
  height: 300px;
  margin-top: 22px;
  display: flex;
  gap: 14px;
  overflow: hidden;
  border-radius: 14px 14px 0 0;
}
.uic-why-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.uic-why-col img {
  width: 100%;
  aspect-ratio: 6 / 7;
  object-fit: cover;
  object-position: top center;
  border-radius: 10px;
  border: 1px solid #e9e7ef;
  display: block;
  background: #fff;
}
/* Columns hold 2× content (duplicated) — translate by -50% loops seamlessly. */
.uic-anim-up { animation: uicWhyUp 16s linear infinite; will-change: transform; }
.uic-anim-down { animation: uicWhyDown 16s linear infinite; will-change: transform; }
.uic-anim-up.is-slow { animation-duration: 21s; }
@keyframes uicWhyUp {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); }
}
@keyframes uicWhyDown {
  from { transform: translateY(-50%); }
  to   { transform: translateY(0); }
}
.uic-why-collage-fade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(246,246,248,.9), rgba(246,246,248,0) 22%, rgba(246,246,248,0) 70%, rgba(246,246,248,.95));
}
.uic-why-browse {
  position: absolute;
  left: 50%;
  bottom: 120px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 52px;
  padding: 0 24px;
  border-radius: 12px;
  background: var(--brand, #8735ee);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  box-shadow: 0 18px 40px -12px rgba(135, 53, 238, .55);
  transition: transform .2s cubic-bezier(.22,1,.36,1), box-shadow .2s;
  z-index: 2;
}
.uic-why-browse:hover {
  transform: translateX(-50%) translateY(-2px);
  box-shadow: 0 24px 48px -12px rgba(135, 53, 238, .6);
}

/* ── Card 2: floating platform chips ── */
.uic-why-platforms { padding-bottom: 34px; }
.uic-why-chipstage {
  position: relative;
  height: 280px;
  margin-top: 8px;
}
.uic-why-glow {
  position: absolute;
  left: 50%;
  top: 56%;
  width: 380px;
  height: 230px;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse, rgba(135, 53, 238, .18), rgba(135, 53, 238, 0) 68%);
  border-radius: 50%;
  animation: uicWhyGlowPulse 4.5s ease-in-out infinite alternate;
  will-change: transform, opacity;
}
@keyframes uicWhyGlowPulse {
  from { transform: translate(-50%, -50%) scale(.92); opacity: .75; }
  to   { transform: translate(-50%, -50%) scale(1.12); opacity: 1; }
}
.uic-why-chip {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 74px;
  padding: 0 30px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .9);
  border: 1px solid #eceaf2;
  box-shadow: 0 24px 50px -20px rgba(63, 22, 122, .25);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--brand-ink, #0f0f14);
  backdrop-filter: blur(4px);
}
.uic-float-a { left: 5%; top: 8%; animation: uicChipDrift 3s ease-in-out infinite alternate, uicChipSpot 9.6s ease-in-out infinite; will-change: transform; }
.uic-float-b { right: 6%; top: 26%; animation: uicChipDrift 3.4s ease-in-out .5s infinite alternate-reverse, uicChipSpot 9.6s ease-in-out 2.4s infinite; will-change: transform; }
.uic-float-c { left: 12%; top: 46%; animation: uicChipDrift 3.2s ease-in-out .25s infinite alternate, uicChipSpot 9.6s ease-in-out 4.8s infinite; will-change: transform; }
.uic-float-d { right: 14%; top: 66%; animation: uicChipDrift 3.6s ease-in-out .7s infinite alternate-reverse, uicChipSpot 9.6s ease-in-out 7.2s infinite; will-change: transform; }
/* Drift + a whisper of tilt — livelier than a straight bob. */
@keyframes uicChipDrift {
  from { transform: translateY(-7px) rotate(-1.6deg); }
  to   { transform: translateY(9px) rotate(1.4deg); }
}
/* Travelling spotlight: each chip takes its turn lighting up (purple
   ring + deeper glow), staggered 2.4s apart over a 9.6s cycle. */
@keyframes uicChipSpot {
  0%, 25%, 100% {
    border-color: #eceaf2;
    box-shadow: 0 24px 50px -20px rgba(63, 22, 122, .25);
  }
  8%, 17% {
    border-color: #c9a6ff;
    box-shadow: 0 30px 62px -18px rgba(135, 53, 238, .48), 0 0 0 5px rgba(135, 53, 238, .09);
  }
}
@keyframes uicWhyFloat {
  from { transform: translateY(-8px); }
  to   { transform: translateY(10px); }
}

/* ── Card 3: vertical release ticker — fills the card, no side crop ── */
.uic-why-drops {
  padding-bottom: 0;
  display: flex;
  flex-direction: column;
}
.uic-why-ticker {
  position: relative;
  /* Fixed window — the duplicated track scrolls inside; without this the
     card would grow to the track's full natural height. */
  height: 318px;
  flex: none;
  margin-top: 24px;
  overflow: hidden;
}
.uic-why-ticker-track {
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* 2x duplicated rows — -50% translate loops seamlessly. */
  animation: uicWhyTicker 11s linear infinite;
  will-change: transform;
}
@keyframes uicWhyTicker {
  from { transform: translateY(0); }
  to   { transform: translateY(calc(-50% - 6px)); }
}
.uic-why-release {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  flex: none;
  padding: 0 22px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid #eceaf2;
}
.uic-why-release-name {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #2c2c33;
}
.uic-why-release em {
  font-style: normal;
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 13px;
  border-radius: 999px;
  background: var(--brand, #8735ee);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.uic-why-release em.alt {
  background: #f5ecff;
  color: var(--brand, #8735ee);
}
.uic-why-ticker-fade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(246,246,248,.95), rgba(246,246,248,0) 18%, rgba(246,246,248,0) 72%, rgba(246,246,248,.95));
}

/* ── Card 4: clean layered deck — anchored to the card bottom with a
   clear gap below the copy (no text overlap). ── */
.uic-why-files {
  padding-bottom: 0;
  overflow: hidden;
}
.uic-why-deck {
  position: relative;
  height: 290px;
  margin-top: 30px;
}
.uic-why-deck img {
  position: absolute;
  bottom: -70px;
  aspect-ratio: 6 / 7;
  object-fit: cover;
  object-position: top center;
  border-radius: 14px 14px 0 0;
  border: 1px solid #e9e7ef;
  border-bottom: 0;
  background: #fff;
  box-shadow: 0 -18px 50px -22px rgba(24, 18, 34, .28);
}
.uic-deck-a {
  width: 46%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  animation: uicWhyDeck 3s ease-in-out infinite alternate;
  will-change: transform;
}
.uic-deck-b {
  width: 38%;
  left: 4%;
  bottom: -110px;
  opacity: .92;
  animation: uicWhyDeckSide 3.6s ease-in-out .4s infinite alternate;
  will-change: transform;
}
.uic-deck-c {
  width: 38%;
  right: 4%;
  bottom: -110px;
  opacity: .92;
  animation: uicWhyDeckSide 3.3s ease-in-out .2s infinite alternate;
  will-change: transform;
}
@keyframes uicWhyDeck {
  from { transform: translateX(-50%) translateY(0); }
  to   { transform: translateX(-50%) translateY(-16px); }
}
@keyframes uicWhyDeckSide {
  from { transform: translateY(0); }
  to   { transform: translateY(-12px); }
}
.uic-why-figma-badge {
  position: absolute;
  right: 12%;
  top: -2%;
  width: 60px;
  height: 60px;
  border-radius: 17px;
  background: #fff;
  border: 1px solid #eceaf2;
  display: grid;
  place-items: center;
  box-shadow: 0 22px 44px -16px rgba(63, 22, 122, .3);
  z-index: 4;
  animation: uicWhyDeckSide 2.8s ease-in-out .6s infinite alternate;
}

/* ── Responsive + reduced motion ── */
@media (max-width: 900px) {
  .uic-why-grid { grid-template-columns: 1fr; }
  .uic-why-templates, .uic-why-platforms, .uic-why-drops, .uic-why-files { grid-column: auto; }
  .uic-why-chip { font-size: 19px; height: 62px; padding: 0 22px; }
  /* the full-width single-column cards have plenty of room — trim the
     side padding so the source-file deck shots read at a usable size
     (36px each side was squeezing them on a 327px card). */
  .uic-why-card { padding-left: 22px; padding-right: 22px; }
  .uic-deck-a { width: 54%; }
  .uic-deck-b, .uic-deck-c { width: 44%; }
  /* The deck container's desktop 290px height left a big empty void
     between the title and the bottom-anchored shots on the now-taller
     mobile images, and floated the Figma badge way up top. Shrink the
     deck so the shots sit just under the copy, and drop the badge down
     so it hovers over them instead of in the gap. */
  .uic-why-deck { height: 188px; margin-top: 18px; }
  .uic-deck-a { bottom: -52px; }
  .uic-deck-b, .uic-deck-c { bottom: -84px; }
  .uic-why-figma-badge { top: 18%; right: 9%; width: 52px; height: 52px; }
}
@media (prefers-reduced-motion: reduce) {
  .uic-anim-up, .uic-anim-down, .uic-why-ticker-track,
  .uic-float-a, .uic-float-b, .uic-float-c, .uic-float-d, .uic-why-glow,
  .uic-deck-a, .uic-deck-b, .uic-deck-c,
  .uic-why-figma-badge { animation: none !important; }
  .uic-why-card { opacity: 1; transform: none; transition: none; }
}

/* (Old features-bento restyle removed along with the section.) */



/* ============================================================
   Build & launch, faster — benefit cards with meaningful CSS
   micro-animations: self-assembling page, one-template-to-every-
   platform radiation, and a $59 → FREE flip tag.
   ============================================================ */
.uic-ship {
  /* --s2-accent feeds the merged comparison card's purple fill, row
     title and checklist ticks (was scoped to the removed .uic-ship2
     section, so it must live here now). */
  --s2-accent: #8735ee;
  padding: 28px 0 24px;
}
.uic-ship .uic-section-title,
.uic-ship .uic-section-lead {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.uic-ship .uic-section-lead { max-width: 560px; }
.uic-ship-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 40px;
}
.uic-ship-card {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  background: #faf9fe;
  border: 1px solid #ece4f9;
  padding: 30px 30px 0;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .45s cubic-bezier(.22,1,.36,1), transform .45s cubic-bezier(.22,1,.36,1);
}
.uic-ship-card.in-view { opacity: 1; transform: none; }
.uic-ship-card:nth-child(2).in-view { transition-delay: .07s; }
.uic-ship-card:nth-child(3).in-view { transition-delay: .14s; }
.uic-ship-card h3 {
  margin: 0 0 9px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--brand-ink, #0f0f14);
}
.uic-ship-card > p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: #57575f;
}
.uic-ship-stage {
  position: relative;
  height: 230px;
  margin-top: 18px;
}

/* ── Card 1: the page assembles itself ── */
.uic-build {
  position: absolute;
  left: 50%;
  bottom: -14px;
  transform: translateX(-50%);
  width: 84%;
  height: 210px;
  background: #fff;
  border: 1px solid #e9e7ef;
  border-bottom: 0;
  border-radius: 14px 14px 0 0;
  box-shadow: 0 -16px 44px -20px rgba(24, 18, 34, .22);
  padding: 0 16px;
  overflow: hidden;
}
.uic-build-bar {
  height: 28px;
  margin: 0 -16px 14px;
  background: #f5ecff;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
}
.uic-build-bar i {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(135, 53, 238, .4);
}
.uic-build-hero,
.uic-build-row {
  display: block;
  border-radius: 7px;
  margin-bottom: 10px;
  animation: uicBuildSeq 6.4s ease-in-out infinite;
  opacity: 0;
}
.uic-build-hero {
  height: 54px;
  background: linear-gradient(135deg, #8735ee, #a866ff);
}
.uic-build-row { height: 16px; background: #efeaf6; }
.uic-build-row.b1 { width: 86%; animation-delay: .5s; }
.uic-build-row.b2 { width: 64%; animation-delay: .9s; }
.uic-build-row.b3 { width: 74%; animation-delay: 1.3s; }
@keyframes uicBuildSeq {
  0% { opacity: 0; transform: translateY(12px); }
  7%, 78% { opacity: 1; transform: none; }
  88%, 100% { opacity: 0; transform: translateY(-6px); }
}
.uic-build-done {
  position: absolute;
  right: 12px;
  bottom: 14px;
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--brand, #8735ee);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  box-shadow: 0 12px 26px -10px rgba(135, 53, 238, .55);
  animation: uicBuildDone 6.4s ease-in-out infinite;
  opacity: 0;
}
@keyframes uicBuildDone {
  0%, 28% { opacity: 0; transform: scale(.8); }
  34%, 78% { opacity: 1; transform: scale(1); }
  88%, 100% { opacity: 0; transform: scale(.9); }
}

/* ── Card 2: one template radiates to every platform ── */
.uic-radiate {
  position: absolute;
  inset: 0;
}
.uic-radiate-core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 58px;
  height: 58px;
  margin: -29px 0 0 -29px;
  border-radius: 16px;
  background: linear-gradient(135deg, #8735ee, #a866ff);
  display: grid;
  place-items: center;
  box-shadow: 0 18px 38px -12px rgba(135, 53, 238, .55);
  z-index: 2;
}
.uic-radiate-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 70px;
  height: 70px;
  margin: -35px 0 0 -35px;
  border: 1.5px solid rgba(135, 53, 238, .5);
  border-radius: 50%;
  animation: uicRadiate 2.6s ease-out infinite;
  opacity: 0;
}
.uic-radiate-ring.r2 { animation-delay: 1.3s; }
@keyframes uicRadiate {
  0% { transform: scale(.6); opacity: .9; }
  100% { transform: scale(2.6); opacity: 0; }
}
.uic-radiate-chip {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #eceaf2;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--brand-ink, #0f0f14);
  box-shadow: 0 12px 26px -12px rgba(63, 22, 122, .22);
  animation: uicRadiateChip 8s ease-in-out infinite;
}
.uic-radiate-chip.c1 { left: 6%; top: 10%; }
.uic-radiate-chip.c2 { right: 7%; top: 16%; animation-delay: 2s; }
.uic-radiate-chip.c3 { left: 8%; bottom: 12%; animation-delay: 4s; }
.uic-radiate-chip.c4 { right: 10%; bottom: 8%; animation-delay: 6s; }
/* Each chip "receives" the template in turn — lifts + purple flash. */
@keyframes uicRadiateChip {
  0%, 18%, 100% {
    transform: translateY(0);
    border-color: #eceaf2;
    box-shadow: 0 12px 26px -12px rgba(63, 22, 122, .22);
  }
  6%, 11% {
    transform: translateY(-6px);
    border-color: #c9a6ff;
    box-shadow: 0 18px 36px -12px rgba(135, 53, 238, .45);
  }
}

/* ── Card 3: $59 → FREE flip tag with confetti ── */
.uic-pricetag-wrap {
  position: absolute;
  left: 50%;
  top: 54%;
  transform: translate(-50%, -50%);
}
.uic-pricetag {
  position: relative;
  width: 158px;
  height: 84px;
  transform-origin: 50% -26px;
  animation: uicTagSwing 3.4s ease-in-out infinite alternate;
}
@keyframes uicTagSwing {
  from { transform: rotate(-5deg); }
  to   { transform: rotate(5deg); }
}
.uic-pricetag-hole {
  position: absolute;
  left: 50%;
  top: -26px;
  width: 2px;
  height: 26px;
  background: #cfc8dd;
}
.uic-tagflip {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  animation: uicTagFlip 7s ease-in-out infinite;
}
@keyframes uicTagFlip {
  0%, 38% { transform: rotateX(0); }
  46%, 88% { transform: rotateX(180deg); }
  96%, 100% { transform: rotateX(360deg); }
}
.uic-tagface {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 16px;
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.02em;
  backface-visibility: hidden;
}
.uic-tagface.front {
  background: #fff;
  border: 1.5px solid #eceaf2;
  color: #9a9aa3;
  box-shadow: 0 20px 44px -16px rgba(24, 18, 34, .25);
}
.uic-tagface.front s { text-decoration-color: rgba(135, 53, 238, .6); text-decoration-thickness: 3px; }
.uic-tagface.back {
  background: linear-gradient(135deg, #8735ee, #a866ff);
  color: #fff;
  transform: rotateX(180deg);
  box-shadow: 0 24px 50px -16px rgba(135, 53, 238, .55);
}
.uic-confetti {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 3px;
  background: var(--brand, #8735ee);
  opacity: 0;
  animation: uicConfetti 7s ease-out infinite;
}
.uic-confetti.k1 { left: -26px; top: 6px; }
.uic-confetti.k2 { right: -24px; top: 14px; background: #1abcfe; animation-delay: .12s; }
.uic-confetti.k3 { left: -14px; bottom: -6px; background: #00d2a3; animation-delay: .2s; }
.uic-confetti.k4 { right: -16px; bottom: -14px; background: #f2b3ff; animation-delay: .08s; }
@keyframes uicConfetti {
  0%, 44% { opacity: 0; transform: translate(0, 0) scale(.4); }
  50% { opacity: 1; transform: translate(var(--cx, -14px), -16px) scale(1); }
  62%, 100% { opacity: 0; transform: translate(var(--cx, -20px), -30px) scale(.5); }
}
.uic-confetti.k1 { --cx: -16px; }
.uic-confetti.k2 { --cx: 16px; }
.uic-confetti.k3 { --cx: -12px; }
.uic-confetti.k4 { --cx: 14px; }

@media (max-width: 900px) {
  .uic-ship-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .uic-build-hero, .uic-build-row, .uic-build-done,
  .uic-radiate-ring, .uic-radiate-chip,
  .uic-pricetag, .uic-tagflip, .uic-confetti { animation: none !important; }
  .uic-build-hero, .uic-build-row { opacity: 1; }
  .uic-build-done { opacity: 1; transform: none; }
  .uic-ship-card { opacity: 1; transform: none; transition: none; }
}

/* ── "Design like a pro" promo: animated scenes ──────────────────
   Replaces the static SVG illustrations. Card 1: a mini browser
   wireframe where a green "Template" cursor selects blocks with a
   Figma-style selection box (corner handles). Card 2: a floating
   component-chip cloud where a purple "Components" cursor hops
   chip-to-chip and the visited chip flashes purple. All CSS-only,
   deterministic loops (9s shared timeline per scene). */
.uic-promo-card {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1);
}
.uic-promo-card.in-view { opacity: 1; transform: none; }
.uic-promo-card:nth-child(2) { transition-delay: .12s; }

.uic-scene {
  position: relative;
  width: min(480px, 86%);
  margin: 0 auto 34px;
}

/* ---- Scene 1: template browser + selection cursor ---- */
.uic-scene-tpl { height: 264px; }
.uic-tpl-ghost {
  position: absolute;
  top: 18%;
  width: 60px;
  height: 56%;
  border-radius: 14px;
  background: #f6f1fc;
}
.uic-tpl-ghost.ghost-l { left: -2%; }
.uic-tpl-ghost.ghost-r { right: -2%; }
.uic-tpl-browser {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 66%;
  height: 100%;
  background: #fff;
  border: 2px solid #a06ee8;
  border-radius: 16px;
}
.uic-tpl-line {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  height: 7px;
  border-radius: 4px;
  background: #d9c8f5;
}
.uic-tpl-line.l1 { top: 28px; width: 52%; }
.uic-tpl-line.l2 { top: 45px; width: 32%; background: #ebe1fa; }
.uic-tpl-pill {
  position: absolute;
  left: 50%;
  top: 74px;
  transform: translateX(-50%);
  width: 58px;
  height: 22px;
  border-radius: 12px;
  background: #8735ee;
}
.uic-tpl-hero {
  position: absolute;
  left: 50%;
  top: 120px;
  transform: translateX(-50%);
  width: 80%;
  height: 108px;
  border-radius: 10px;
  background: linear-gradient(110deg, #f3edfb 40%, #faf7fe 50%, #f3edfb 60%);
  background-size: 220% 100%;
  animation: uicTplShimmer 4.5s linear infinite;
}
@keyframes uicTplShimmer {
  0% { background-position: 110% 0; }
  100% { background-position: -110% 0; }
}
/* Figma-style selection box with corner handles */
.uic-sel {
  position: absolute;
  border: 1.5px solid #8735ee;
  border-radius: 4px;
  opacity: 0;
}
.uic-sel i {
  position: absolute;
  width: 7px;
  height: 7px;
  background: #fff;
  border: 1.5px solid #8735ee;
  border-radius: 2px;
}
.uic-sel i:nth-child(1) { left: -4px; top: -4px; }
.uic-sel i:nth-child(2) { right: -4px; top: -4px; }
.uic-sel i:nth-child(3) { left: -4px; bottom: -4px; }
.uic-sel i:nth-child(4) { right: -4px; bottom: -4px; }
.uic-sel-pill {
  left: 50%;
  top: 68px;
  transform: translateX(-50%);
  width: 76px;
  height: 34px;
  animation: uicSelPill 9s cubic-bezier(.22,1,.36,1) infinite;
}
.uic-sel-hero {
  left: 50%;
  top: 113px;
  transform: translateX(-50%);
  width: 86%;
  height: 122px;
  animation: uicSelHero 9s cubic-bezier(.22,1,.36,1) infinite;
}
@keyframes uicSelPill {
  0%, 20% { opacity: 0; }
  24%, 44% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
@keyframes uicSelHero {
  0%, 54% { opacity: 0; }
  60%, 86% { opacity: 1; }
  93%, 100% { opacity: 0; }
}

/* ---- Shared cursor + tag ---- */
/* Cursors restyled to match the hero's two floating speech-bubble
   pills (.uic-hero-tag in site-header.css): flat solid colour, full
   pill radius, white medium text, gentle tilt, and a triangular
   tail. The tail tip points up-left at the cursor's hotspot (the
   keyframe paths land that point on the chips), so the arrow SVG
   is retired. */
.uic-scn-cursor {
  position: absolute;
  z-index: 3;
  width: 26px;
  height: 26px;
}
.uic-scn-cursor svg { display: none; }
.uic-scn-tag {
  position: absolute;
  left: 4px;
  top: 8px;
  padding: 9px 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1;
  color: #fff;
  white-space: nowrap;
  box-shadow: 0 10px 24px rgba(15, 15, 20, .12);
}
/* triangular tail, same construction as the hero bubbles */
.uic-scn-tag::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 17px;
  left: -7px;
  top: -8px;
  background: inherit;
  clip-path: polygon(0 0, 100% 35%, 38% 100%);
  z-index: 1;
}
.uic-tpl-cursor {
  left: 14%;
  top: 78%;
  animation: uicTplCursor 9s ease-in-out infinite;
}
.uic-tpl-cursor .uic-scn-tag {
  background: #00d2a3;
  transform: rotate(-4deg);
}
@keyframes uicTplCursor {
  0%, 6% { left: 14%; top: 78%; }
  22%, 46% { left: 50%; top: 32%; }
  58%, 88% { left: 28%; top: 60%; }
  100% { left: 14%; top: 78%; }
}

/* ---- Scene 2: component chip cloud + hopping cursor ---- */
.uic-scene-cmp {
  display: flex;
  flex-direction: column;
  gap: 14px;
  justify-content: center;
  height: 264px;
}
.uic-cmp-row {
  display: flex;
  gap: 14px;
  justify-content: center;
}
/* organic offsets so the cloud doesn't read as a centered grid */
.uic-cmp-row.r1 { transform: translateX(-30px); }
.uic-cmp-row.r2 { transform: translateX(14px); }
.uic-cmp-row.r3 { transform: translateX(34px); }
.uic-cmp-row.r4 { transform: translateX(-22px); }
.uic-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 17px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #ece3fa;
  box-shadow: 0 6px 18px rgba(35, 22, 70, .07);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  color: #4a4560;
  animation: uicChipBob 4.4s ease-in-out infinite alternate;
  will-change: transform;
}
.uic-chip svg {
  display: block;
  width: 14px;
  height: 14px;
  color: var(--chip-ic, #8735ee);
  flex: none;
}
/* idle bob rides the `translate` property so it can COMPOSE with
   the transform-based hit/nudge animations (no property fight) */
@keyframes uicChipBob {
  from { translate: 0 0; }
  to { translate: 0 -5px; }
}
/* the four bystander chips get "nudged" when the cursor presses a
   neighbour — tiny physical push-away synced to each hit window */
.uic-cmp-row.r1 .uic-chip { animation: uicChipBob 4.4s ease-in-out .5s infinite alternate, uicNudgeCT 9s ease-in-out infinite; }
.uic-cmp-row.r2 .uic-chip:nth-child(2) { animation: uicChipBob 4.4s ease-in-out 1.1s infinite alternate, uicNudgeHeader 9s ease-in-out infinite; }
.uic-cmp-row.r3 .uic-chip:nth-child(1) { animation: uicChipBob 4.4s ease-in-out .8s infinite alternate, uicNudgeHB 9s ease-in-out infinite; }
.uic-cmp-row.r4 .uic-chip:nth-child(2) { animation: uicChipBob 4.4s ease-in-out 1.4s infinite alternate, uicNudgeMore 9s ease-in-out infinite; }
@keyframes uicNudgeCT { 0%, 4% { transform: none; } 8% { transform: translateY(-5px); } 15%, 100% { transform: none; } }
@keyframes uicNudgeHeader {
  0%, 4% { transform: none; }
  9% { transform: translateX(8px); }
  16%, 29% { transform: none; }
  34% { transform: translateX(-8px); }
  41%, 100% { transform: none; }
}
@keyframes uicNudgeHB { 0%, 54% { transform: none; } 59% { transform: translateX(-8px); } 66%, 100% { transform: none; } }
@keyframes uicNudgeMore { 0%, 79% { transform: none; } 84% { transform: translateX(8px); } 91%, 100% { transform: none; } }
/* the four chips the cursor "visits" glow purple in sequence
   (9s cursor path, arrivals at 0% / 25% / 50% / 75%). Delays are
   per-animation pairs (hit, bob) — kept on .hit-N only; no other
   rule may set animation-delay on hit chips (specificity bug we
   shipped once: row delay rules silently overrode these). */
.uic-chip.hit {
  position: relative;
  animation: uicCmpHit 9s cubic-bezier(.4, 0, .2, 1) infinite, uicChipBob 4.4s ease-in-out infinite alternate;
}
.uic-chip.hit-1 { animation-delay: 0s, .3s; }
.uic-chip.hit-2 { animation-delay: 2.25s, 1.6s; }
.uic-chip.hit-3 { animation-delay: 4.5s, .9s; }
.uic-chip.hit-4 { animation-delay: 6.75s, 2.1s; }
/* soft ripple ring radiating from the pressed chip */
.uic-chip.hit::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 999px;
  border: 2px solid rgba(135, 53, 238, .45);
  opacity: 0;
  animation: uicChipRipple 9s ease-out infinite;
  pointer-events: none;
}
.uic-chip.hit-1::after { animation-delay: 0s; }
.uic-chip.hit-2::after { animation-delay: 2.25s; }
.uic-chip.hit-3::after { animation-delay: 4.5s; }
.uic-chip.hit-4::after { animation-delay: 6.75s; }
@keyframes uicChipRipple {
  0%, 3% { opacity: 0; transform: scale(.85); }
  6% { opacity: .55; }
  16% { opacity: 0; transform: scale(1.8); }
  17%, 100% { opacity: 0; transform: scale(.85); }
}
@property --chip-ic {
  syntax: "<color>";
  inherits: true;
  initial-value: #8735ee;
}
@keyframes uicCmpHit {
  0% { transform: scale(1) translateY(0); }
  4%, 12% {
    background: #8735ee;
    border-color: #8735ee;
    color: #fff;
    --chip-ic: #fff;
    transform: scale(1.08) translateY(-3px);
    box-shadow: 0 14px 30px rgba(135, 53, 238, .32);
  }
  18%, 100% {
    background: #fff;
    border-color: #ece3fa;
    color: #4a4560;
    --chip-ic: #8735ee;
    transform: scale(1) translateY(0);
    box-shadow: 0 6px 18px rgba(35, 22, 70, .07);
  }
}
/* cursor: X and Y ride separate easings so travel curves gently
   instead of moving in straight lines; the arrow dips on arrival
   like a real click (origin at the arrow tip) */
.uic-cmp-cursor {
  left: 28%;
  top: 38%;
  animation: uicCmpCurX 9s cubic-bezier(.7, 0, .25, 1) infinite, uicCmpCurY 9s cubic-bezier(.4, 0, .2, 1) infinite;
}
/* hero-purple pill, opposite tilt to the mint one (like the hero pair).
   The click dip rides the `scale` property so the rotate stays intact. */
.uic-cmp-cursor .uic-scn-tag {
  background: #a259ff;
  transform: rotate(4deg);
  transform-origin: -7px -8px;
  animation: uicCurClick 9s ease-in-out infinite;
}
@keyframes uicCmpCurX {
  0%, 14% { left: 28%; }
  25%, 39% { left: 75%; }
  50%, 64% { left: 71%; }
  75%, 89% { left: 30%; }
  100% { left: 28%; }
}
@keyframes uicCmpCurY {
  0%, 14% { top: 38%; }
  25%, 39% { top: 38%; }
  50%, 64% { top: 58%; }
  75%, 89% { top: 78%; }
  100% { top: 38%; }
}
@keyframes uicCurClick {
  0% { scale: .88; }
  3%, 24.5% { scale: 1; }
  26% { scale: .88; }
  29%, 49.5% { scale: 1; }
  51% { scale: .88; }
  54%, 74.5% { scale: 1; }
  76% { scale: .88; }
  79%, 100% { scale: 1; }
}

@media (max-width: 700px) {
  .uic-scene { width: min(420px, 92%); margin-bottom: 26px; }
  .uic-scene-tpl, .uic-scene-cmp { height: 218px; }
  .uic-tpl-browser { width: 74%; }
  .uic-tpl-hero { top: 104px; height: 84px; }
  .uic-sel-hero { top: 97px; height: 98px; }
  .uic-tpl-pill { top: 66px; }
  .uic-sel-pill { top: 60px; }
  .uic-chip { padding: 8px 13px; font-size: 12px; }
  .uic-scene-cmp { gap: 11px; }
  .uic-tpl-ghost { width: 38px; }
  .uic-scn-cursor { width: 19px; height: 19px; }
  .uic-scn-tag { font-size: 12px; padding: 7px 13px; left: 2px; top: 6px; }
  .uic-scn-tag::after { width: 11px; height: 13px; left: -5px; top: -6px; }
  .uic-chip svg { width: 12px; height: 12px; }
  .uic-cmp-row.r1 { transform: translateX(-12px); }
  .uic-cmp-row.r2 { transform: translateX(7px); }
  .uic-cmp-row.r3 { transform: translateX(7px); }
  .uic-cmp-row.r4 { transform: translateX(-9px); }
}
@media (prefers-reduced-motion: reduce) {
  .uic-promo-card { opacity: 1; transform: none; transition: none; }
  .uic-scn-cursor, .uic-scn-cursor svg, .uic-chip, .uic-chip::after, .uic-sel, .uic-tpl-hero { animation: none !important; }
  .uic-sel-hero { opacity: 1; }
}

/* ── Promo V4: v1 on the soft-gray why-choose surface ────────────
   Identical scenes/animations to v1; only the card surface changes
   to the bento gray (#f6f6f8 + #efeef3 hairline). White chips and
   the white browser pop harder on gray, so the inner pieces get a
   touch more contrast for free. */
.uic-promo-gray { padding-top: 0; }
.uic-promo-gray .uic-promo-card {
  background: #f6f6f8;
  border: 1px solid #efeef3;
}
/* ghosts read too purple on gray — go neutral glass */
.uic-promo-gray .uic-tpl-ghost { background: rgba(255, 255, 255, .65); }
/* hairline under the white browser so it doesn't melt into gray */
.uic-promo-gray .uic-tpl-browser { box-shadow: 0 10px 30px rgba(35, 22, 70, .06); }
.uic-promo-gray .uic-chip { border-color: #eceaf2; }
.uic-promo-gray .platform-badge-wrap .badge { border-color: #e7e5ee; }

/* V4: rows sit dead-center (no organic offsets) per feedback */
.uic-promo-gray .uic-cmp-row.r1,
.uic-promo-gray .uic-cmp-row.r2,
.uic-promo-gray .uic-cmp-row.r3,
.uic-promo-gray .uic-cmp-row.r4 { transform: none; }

/* V4 cursor path re-aimed for the centered rows (chip centers move
   a few % once the organic offsets are gone) */
.uic-promo-gray .uic-cmp-cursor {
  left: 27%;
  top: 38%;
  animation-name: uicCmpCurX4, uicCmpCurY4;
}
@keyframes uicCmpCurX4 {
  0%, 14% { left: 27%; }
  25%, 39% { left: 74%; }
  50%, 64% { left: 66%; }
  75%, 89% { left: 37%; }
  100% { left: 27%; }
}
@keyframes uicCmpCurY4 {
  0%, 14% { top: 38%; }
  25%, 39% { top: 38%; }
  50%, 64% { top: 58%; }
  75%, 89% { top: 77%; }
  100% { top: 38%; }
}

/* ── Why-choose V3: V2-panel surface ─────────────────────────────
   Same bento; cards wear the promo-V2 panel colors (#faf9fe +
   #ece4f9). Inner whites from the base (gray) variant already pop
   on this tint; only the edge fade masks need re-tinting. */
.uic-why-soft { position: relative; }
.uic-why-soft .uic-why-card {
  background: #faf9fe;
  border: 1px solid #ece4f9;
}
.uic-why-soft .uic-why-collage-fade {
  background: linear-gradient(180deg, rgba(250,249,254,.9), rgba(250,249,254,0) 22%, rgba(250,249,254,0) 70%, rgba(250,249,254,.95));
}
.uic-why-soft .uic-why-ticker-fade {
  background: linear-gradient(180deg, rgba(250,249,254,.95), rgba(250,249,254,0) 18%, rgba(250,249,254,0) 72%, rgba(250,249,254,.95));
}

/* ── Promo V6: V1's white + purple-border surface, V5's centered
   rows. Inherits .uic-promo-gray (centered rows + re-aimed cursor)
   and reverts the gray-surface tweaks back to the V1 look. */
.uic-promo-vsix .uic-promo-card {
  background: #fff;
  border: 2px solid #e9d9ff;
}
.uic-promo-vsix .uic-tpl-ghost { background: #f6f1fc; }
.uic-promo-vsix .uic-tpl-browser { box-shadow: none; }
.uic-promo-vsix .uic-chip { border-color: #ece3fa; }
.uic-promo-vsix .platform-badge-wrap .badge { border-color: #e6e6e6; }

/* ── Build & launch, faster — V2 "speed comparison" ──────────────
   One wide panel: two progress bars race. The gray "from scratch"
   bar crawls; the purple "with uicompose" bar zips and finishes
   first — the speed gap is the message. Benefit checklist below.
   Fills are gated behind .in-view so the race starts on scroll. */
.uic-ship2 {
  --s2-accent: #8735ee;
  padding: 28px 0 24px;
  position: relative;
}
.uic-ship2-flag {
  position: absolute;
  top: 0;
  right: 36px;
  padding: 5px 12px;
  border: 1px solid #d8b9ff;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: #8735ee;
  background: #fff;
  z-index: 3;
}
.uic-ship2 .uic-section-title,
.uic-ship2 .uic-section-lead {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.uic-ship2 .uic-section-lead { max-width: 560px; }

.uic-ship2-compare {
  /* full width — matches the 3-card grid row above (merged into the
     ship section, so it spans the section-inner edge to edge). */
  margin: 20px 0 0;
  padding: 38px 40px;
  background: #faf9fe;
  border: 1px solid #ece4f9;
  border-radius: 22px;
  display: flex;
  flex-direction: column;
  gap: 26px;
  /* shared reveal */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1);
}
.uic-ship2-compare.in-view { opacity: 1; transform: none; }
.uic-ship2-row {
  display: grid;
  grid-template-columns: 220px 1fr;
  align-items: center;
  gap: 26px;
}
.uic-ship2-rowhead { display: flex; flex-direction: column; gap: 3px; }
.uic-ship2-rowtitle {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--brand-ink, #0f0f14);
}
.uic-ship2-row.uic .uic-ship2-rowtitle { color: var(--s2-accent); }
.uic-ship2-rowsub { font-size: 13px; color: #8a849c; }
.uic-ship2-track {
  position: relative;
  height: 40px;
  border-radius: 12px;
  background: #f0edf6;
  overflow: hidden;
}
.uic-ship2-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  border-radius: 12px;
}
.uic-ship2-row.scratch .uic-ship2-fill { background: linear-gradient(90deg, #d9d4e4, #c7c0d8); }
.uic-ship2-row.uic .uic-ship2-fill {
  background: linear-gradient(90deg, #9a55f5, var(--s2-accent));
  box-shadow: 0 6px 18px -6px rgba(135, 53, 238, .5);
}
/* the 4 "step" ticks the scratch bar trudges through */
.uic-ship2-steps {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding: 0 18%;
  justify-content: space-between;
  pointer-events: none;
}
.uic-ship2-steps i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #b9b1cc;
}
.uic-ship2-time {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  font-weight: 600;
  color: #6a6478;
  opacity: 0;
}
.uic-ship2-time.done { color: #fff; }

/* race: both 7s loops; purple finishes ~12%, gray ~82% */
.uic-ship2-compare.in-view .uic-ship2-row.scratch .uic-ship2-fill { animation: s2Scratch 7s cubic-bezier(.4,0,.2,1) infinite; }
.uic-ship2-compare.in-view .uic-ship2-row.uic .uic-ship2-fill { animation: s2Uic 7s cubic-bezier(.22,1,.36,1) infinite; }
.uic-ship2-compare.in-view .uic-ship2-row.scratch .uic-ship2-time { animation: s2TimeScratch 7s ease infinite; }
.uic-ship2-compare.in-view .uic-ship2-row.uic .uic-ship2-time { animation: s2TimeUic 7s ease infinite; }
@keyframes s2Scratch { 0% { width: 0; } 82% { width: 100%; } 92%, 100% { width: 100%; } }
@keyframes s2Uic { 0% { width: 0; } 12% { width: 100%; } 92%, 100% { width: 100%; } }
@keyframes s2TimeScratch { 0%, 78% { opacity: 0; } 84%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes s2TimeUic { 0%, 9% { opacity: 0; } 14%, 92% { opacity: 1; } 100% { opacity: 0; } }

/* benefit checklist (inline, not cards) */
.uic-ship2-points {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 30px;
  margin-top: 26px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .55s cubic-bezier(.22,1,.36,1) .15s, transform .55s cubic-bezier(.22,1,.36,1) .15s;
}
.uic-ship2-points.in-view { opacity: 1; transform: none; }
.uic-ship2-point {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 14.5px;
  font-weight: 500;
  color: #45405a;
}
.uic-ship2-point svg {
  width: 18px;
  height: 18px;
  color: var(--s2-accent);
  flex: none;
}

@media (max-width: 760px) {
  .uic-ship2-compare { padding: 28px 22px; gap: 20px; }
  .uic-ship2-row { grid-template-columns: 1fr; gap: 10px; }
  .uic-ship2-flag { right: 16px; }
  .uic-ship2-points { flex-direction: column; align-items: flex-start; max-width: 320px; margin-inline: auto; gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .uic-ship2-compare, .uic-ship2-points { opacity: 1; transform: none; transition: none; }
  .uic-ship2-fill { animation: none !important; width: 100% !important; }
  .uic-ship2-time { animation: none !important; opacity: 1 !important; }
}

/* ============================================================
   Mobile section rhythm — consistency pass.
   On phones several sections inherited the desktop --brand-section-y
   token (~150px) full-size: theme.js applies it to faq/categories/
   pricing/cta-banner with no media guard, and testimonials/roadmap
   carry their own large values — so section gaps ranged from 56px to
   ~300px. Normalize every content section to a single 40px top/bottom
   (~80px between sections) so the whole page scrolls with one even
   rhythm. body.home prefixes out-specify theme.js's bare selectors. */
@media (max-width: 760px) {
  body.home .template-list-slider-bg { padding-bottom: 40px !important; }
  body.home .uic-promo,
  body.home .uic-grid-section,
  body.home .uic-ceo-quote,
  body.home .uic-why,
  body.home .uic-compare,
  body.home .uic-ship,
  body.home .uic-testimonials,
  body.home .uic-roadmap,
  body.home .uic-categories,
  body.home .uic-pricing,
  body.home .uic-faq,
  body.home section.newsletter {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
  body.home .uic-cta-banner { padding-top: 40px !important; }
}

/* ─────────────────────────────────────────────────────────────────
   FEATURED TEMPLATES — curated picks (NEW, self-contained)
   Sits above "All Templates" to give the flat grid an editorial top.
   ───────────────────────────────────────────────────────────────── */
.uic-featured {
  padding: 75px 0;   /* match .uic-grid-section for consistent section spacing */
}
.uic-featured .uic-container { width: 100%; max-width: 1220px; margin: 0 auto; padding-inline: 24px; box-sizing: border-box; }

/* All Templates — 4×2 demo grid (reuses the clean .uic-featured-card style) */
.uic-alltpl-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
/* Taller image area for the 4×2 cards only (~40% more than 16/13.2).
   Scoped so the Featured carousel cards keep their own height. */
.uic-alltpl-grid .uic-featured-media { aspect-ratio: 16 / 18.48; }
@media (max-width: 1024px) { .uic-alltpl-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
@media (max-width: 760px)  { .uic-alltpl-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } }
@media (max-width: 460px)  { .uic-alltpl-grid { grid-template-columns: 1fr; } }

/* Header row — title (left) + carousel dots (top-right) */
.uic-featured-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 40px;
}
.uic-featured-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #803CE7;
  background: linear-gradient(180deg, rgba(128,60,231,.08), rgba(128,60,231,.04));
  border: 1px solid rgba(128,60,231,.16);
  padding: 6px 13px;
  border-radius: 999px;
  margin-bottom: 16px;
}
.uic-featured-spark {
  font-size: 12px;
  animation: uic-feat-spark 2.6s ease-in-out infinite;
}
@keyframes uic-feat-spark {
  0%, 100% { opacity: 1; transform: rotate(0deg) scale(1); }
  50% { opacity: .55; transform: rotate(90deg) scale(.82); }
}
.uic-featured-title {
  font-size: clamp(26px, 3.4vw, 42px);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.025em;
  color: var(--brand-ink, #0f0f14);
  margin: 0;
}
.uic-featured-lead {
  margin: 12px 0 0;
  max-width: 440px;
  font-size: 15.5px;
  line-height: 1.55;
  color: #5b5b67;
}
/* Brand button — matches .ht-btn ("Browse Templates" in All Templates) */
.uic-featured-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  height: 50px;
  padding: 0 26px;
  border-radius: 10px;
  background: var(--brand-ink, #0f0f14);
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: transform .2s cubic-bezier(.22,1,.36,1), opacity .2s;
}
.uic-featured-link:hover { transform: translateY(-1px); opacity: .92; }
.uic-featured-link-ico { display: inline-flex; align-items: center; }

/* Card grid */
/* Carousel — slide-by-slide autoplay + right-aligned circular dots */
.uic-featured-carousel {
  --uic-fv-per: 3;
  --uic-fv-gap: 24px;
}
.uic-featured-viewport { overflow: hidden; }
.uic-featured-track {
  display: flex;
  gap: var(--uic-fv-gap);
  transition: transform .6s cubic-bezier(.22, 1, .36, 1);
  will-change: transform;
}
.uic-featured-carousel .uic-featured-card {
  flex: 0 0 calc((100% - (var(--uic-fv-per) - 1) * var(--uic-fv-gap)) / var(--uic-fv-per));
  min-width: 0;
}
/* Dots row — circles, aligned to the right */
.uic-featured-dots {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  min-height: 10px;
}
.uic-featured-dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(15, 15, 20, .16);
  cursor: pointer;
  transition: background .25s, width .3s cubic-bezier(.22, 1, .36, 1);
}
.uic-featured-dot:hover { background: rgba(128, 60, 231, .45); }
.uic-featured-dot.is-active { width: 20px; background: #803CE7; }

.uic-featured-card {
  display: flex;
  flex-direction: column;
  background: transparent;
  border: 0;
  border-radius: 7px;
  text-decoration: none;
}
/* Image keeps its own rounded corners (card itself is borderless) */
.uic-featured-media { border-radius: 7px; }

/* Media — static, no hover */
.uic-featured-media {
  position: relative;
  aspect-ratio: 16 / 18.48; /* carousel card image, 40% taller */
  overflow: hidden;
  background: linear-gradient(135deg, #f4f1fb, #efeaf9);
}
.uic-featured-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* polish.css's hover-swap rule pins .uic-card-base-img to height:auto
   (0,3,1), so a landscape preview (e.g. 3200×2400) shrank to its natural
   ratio and left a big gap below it in the tall media box. Re-pin the
   base preview to fill the box so EVERY card's image covers uniformly,
   whatever its aspect ratio. (0,4,1) + !important beats the polish rule. */
body.home .uic-featured-card .uic-featured-media .uic-card-base-img {
  height: 100% !important;
  object-fit: cover !important;
}

/* Body — category + (title left / platform icon right), like All Templates */
.uic-featured-body {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 15px 2px 4px;
}
.uic-featured-cat {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #9a9aa4;
}
.uic-featured-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;   /* title + icon start from the top */
  justify-content: space-between;
  gap: 6px 10px;
}
/* "Free" label (plain text) — drops to a second row, left-aligned, so it
   sits below the title on the left side. Pseudo-element = no per-card markup. */
.uic-featured-foot::after {
  content: "Free";
  order: 3;
  flex-basis: 100%;
  width: 100%;
  margin-top: -16px;   /* 5px gap from the title (row is icon-height tall) */
  display: flex;
  justify-content: flex-start;
  color: #9a9aa4;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}
.uic-featured-name { order: 1; }
.uic-featured-foot .uic-featured-ico { order: 2; }
.uic-featured-name {
  margin: 0;
  flex: 1;
  min-width: 0;
  font-size: 16.5px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--brand-ink, #0f0f14);
}
/* Circle CONTAINER (a <span>) — the logo <img> sits INSIDE it, un-clipped.
   Mirrors the component card's .downloadable-link structure so the LOGO is
   never round-clipped; only this background circle is round. */
.uic-featured-ico {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7.5px;
  box-sizing: border-box;
  border: 1px solid #e3e3e8;   /* gray ring */
  border-radius: 50%;
  background: #fff;            /* pure white circle */
}
/* Inner logo — clean rectangle, NEVER rounded (border-radius:0 beats any
   inherited rounding); transparent so the white circle shows through. */
.uic-featured-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  border-radius: 0;
  background: transparent;
}

/* Responsive — fewer cards per view on smaller screens */
@media (max-width: 920px) {
  .uic-featured { padding-top: 72px; }
  .uic-featured-carousel { --uic-fv-per: 2; --uic-fv-gap: 18px; }
}
@media (max-width: 760px) {
  body.home .uic-featured { padding-top: 40px !important; padding-bottom: 8px !important; }
  .uic-featured-head { flex-direction: column; align-items: flex-start; gap: 18px; margin-bottom: 28px; }
}
@media (max-width: 560px) {
  .uic-featured-carousel { --uic-fv-per: 1; --uic-fv-gap: 16px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .uic-featured-card, .uic-featured-media img, .uic-featured-link,
  .uic-featured-go, .uic-featured-go i, .uic-featured-spark,
  .uic-featured-track, .uic-featured-dot { transition: none; animation: none; }
  .uic-featured-card:hover { transform: none; }
  .uic-featured-card:hover .uic-featured-media img { transform: none; }
}

/* ─────────────────────────────────────────────────────────────────
   FAQ — centered version, each item a bordered card (NEW)
   ───────────────────────────────────────────────────────────────── */
.uic-faq-v2 .uic-faqv2-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 640px;
  margin: 0 auto 24px;
}
.uic-faq-v2 .uic-faqv2-head .uic-section-lead {
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}
.uic-faqv2-list {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.uic-faq-v2 .uic-faq-item {
  border: 1px solid var(--uic-line, #ece9f2) !important;
  border-radius: 14px;
  background: #fff;
  padding: 2px 22px;
  transition: border-color .2s, box-shadow .2s;
}
/* Beat home.css's `body .uic-faq-item:last-child { border-bottom:0 !important }` */
body .uic-faq-v2 .uic-faq-item:last-child { border-bottom: 1px solid var(--uic-line, #ece9f2) !important; }
.uic-faq-v2 .uic-faq-item[open] {
  border-color: rgba(128, 60, 231, .4) !important;
  box-shadow: 0 8px 24px -12px rgba(128, 60, 231, .3);
}
.uic-faq-v2 .uic-faq-item > summary { padding: 18px 0; }
.uic-faq-v2 .uic-faq-body { padding: 0 0 18px; max-width: none; }

/* Component card: title with a small soft-gray "Free" label beneath it,
   platform icon stays on the right. */
/* 15px gap between the card image and the title — matches the featured/4×2
   card's image→title rhythm (.uic-featured-body padding-top:15px). */
.uic-component-grid .showcase-component .product-content { padding-top: 15px !important; }
/* Component card foot — same structure as the featured card: title + icon
   on row 1 (top-aligned), "Free" on a full-width row 2 below (5px gap). */
.uic-component-grid .uic-comp-foot {
  display: flex !important;
  flex-wrap: wrap;
  align-items: flex-start !important;
  justify-content: space-between;
  gap: 6px 10px;
}
.uic-component-grid .uic-comp-foot .product-title,
.uic-component-grid .uic-comp-foot .product-title a {
  order: 1;
  margin: 0 !important;
  /* Tighten from the global 1.6 so the title's first glyph top-aligns
     with the icon circle (the featured card's title uses ~1.3 and sits
     at delta 0). Removes the ~3.5px the loose line-height pushed it down. */
  line-height: 1.2 !important;
}
.uic-component-grid .uic-comp-foot .download-link { order: 2; }
body.home .uic-component-grid .uic-comp-foot .type-free.uic-free-sub {
  order: 3;
  flex-basis: 100%;
  width: 100%;
  /* Match the featured/template card's title→Free gap (~8px). With the
     Free at line-height 1 and the foot's 6px row-gap over the 36px row-1
     (component download-link = template icon height), the gap measures
     linearly as (16px + margin-top). After tightening the title to
     line-height 1.2 (for icon top-alignment) the title's baseline rose
     ~4px, so the pull deepened from -8px to -12px to keep the gap at
     ~8px — equal to the template card's measured 8.05px title→Free gap. */
  margin: -12px 0 0 !important;
  display: block !important;
  text-align: left !important;
}
/* body.home prefix → (0,4,1) beats polish.css's body.home .showcase-component
   .type-free (0,3,1) which was forcing padding 0 18px / font-size 14px. */
body.home .uic-component-grid .type-free.uic-free-sub {
  font-size: 12.5px !important;
  font-weight: 500 !important;
  line-height: 1 !important;   /* match the template card's tight Free (was 1.2 → looser leading made the gap look bigger) */
  color: #9a9aa4 !important;
  background: none !important;
  background-color: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  min-width: 0 !important;
  height: auto !important;
  text-decoration: none !important;
  box-shadow: none !important;
}