/* Renowo site styles — loaded by mu-plugins/renowo.php after Additional CSS, synced by deploy.sh (no page rebuild).
   Production's Additional CSS may still hold an older copy of these rules; this file wins where they meet. */
@font-face { font-family: 'Vazirmatn'; font-weight: 100 900; font-display: swap; src: url(/wp-content/uploads/renowo/fonts/vazirmatn-arabic.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFC; }
@font-face { font-family: 'Vazirmatn'; font-weight: 100 900; font-display: swap; src: url(/wp-content/uploads/renowo/fonts/vazirmatn-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20C4, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Vazirmatn'; font-weight: 100 900; font-display: swap; src: url(/wp-content/uploads/renowo/fonts/vazirmatn-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }
/* Elementor only loads widget-image.css on pages whose content has an image widget; without it the header logo's <a> is
   inline and the header grows 8px (blog page). */
.elementor-widget-image a { display: inline-block; }
.elementor-widget-image img { display: inline-block; vertical-align: middle; }
.elementor-widget-text-editor p:last-child { margin-bottom: 0; }
.rw-glass { -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); will-change: transform; }
.rw-token { display: inline-block; width: 1.3em; height: 1.3em; margin: 0 .2em; vertical-align: -.32em; background: currentColor;
  -webkit-mask: url(/wp-content/uploads/renowo/icons/token.svg) center / contain no-repeat; mask: url(/wp-content/uploads/renowo/icons/token.svg) center / contain no-repeat; }

/* landing: sticky splash, header slides in once the splash has gone.
   Keyed on the page having a splash, not on rw.js's body.rw-anim: rw.js runs at the end of the page, so for the first
   frames the header showed and the logo was sharp, then both snapped away (client, 2026-10-18). */
.rw-splash-stick { position: sticky !important; top: 0; }
.rw-splash img { will-change: filter, opacity, transform; filter: blur(24px); opacity: .35; transform: scale(.9); }
body:has(.rw-splash) #masthead { position: fixed; inset: 0 0 auto; z-index: 100; transform: translateY(-100%) translateY(-80px); transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
body:has(.rw-splash).rw-header-in #masthead { transform: none; }
html:has(.rw-splash) { scroll-padding-top: 113px; }
/* header: white 75% over a 50px blur (2026-10-16); the mobile bar takes it too wherever its white icon would vanish */
.rw-headbar { -webkit-backdrop-filter: blur(50px); backdrop-filter: blur(50px); }
@media (max-width: 767px) {
  /* The glass is a layer of its own: a backdrop-filter on the bar would make the bar the containing block of the fixed
     drawer below, so the drawer could not slide from the top of the screen. */
  .rw-headbar-m { background: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  body:not(:has(.rw-splash)) .rw-headbar-m, body.rw-header-in .rw-headbar-m { padding-bottom: 12px !important; }
  body:not(:has(.rw-splash)) .rw-headbar-m::before, body.rw-header-in .rw-headbar-m::before { content: ""; position: absolute; inset: 0; z-index: -2;
    background: rgba(255, 255, 255, .75); -webkit-backdrop-filter: blur(50px); backdrop-filter: blur(50px); transition: opacity .35s; }
  body:has(.rw-headbar-m .menu-is-active) .rw-headbar-m::before { opacity: 0; }
  body:has(.rw-splash):not(.rw-header-in):not(:has(.menu-is-active)) .rw-headbar-m .hfe-nav-menu__toggle,
  body:has(.rw-splash):not(.rw-header-in):not(:has(.menu-is-active)) .rw-headbar-m .hfe-nav-menu__toggle * { color: #FFFFFF !important; fill: #FFFFFF !important; }
  body:not(:has(.rw-splash)) .rw-headbar-m .hfe-nav-menu__toggle, body.rw-header-in .rw-headbar-m .hfe-nav-menu__toggle,
  body:not(:has(.rw-splash)) .rw-headbar-m .hfe-nav-menu__toggle *, body.rw-header-in .rw-headbar-m .hfe-nav-menu__toggle * { color: #1C2942 !important; fill: #1C2942 !important; }
  /* the logo in the bar (2026-10-18), at the left; over the hero only the white hamburger, as `mobile/Landing/3.homepage-1.png` */
  .rw-headbar-m > .e-con-inner { flex-direction: row !important; flex-wrap: nowrap !important; justify-content: space-between !important; align-items: center !important; }
  /* only the hamburger takes room; the open menu is position: fixed below */
  .rw-headbar-m .elementor-widget-navigation-menu { width: 48px !important; max-width: 48px !important; flex: 0 0 48px !important; }
  .rw-logo-m { order: 2; width: auto !important; flex: 0 0 auto !important; }
  .rw-logo-m img { width: 44px !important; height: auto; }
  body:has(.rw-splash):not(.rw-header-in) .rw-logo-m { visibility: hidden; }
  /* `Mobile_Menu.png` (2026-10-19): a navy sheet that comes down from the top at a standard pace and goes back up the
     same way, under the bar so the × stays where the hamburger was; centred items, the current page white. */
  .rw-headbar-m nav.hfe-dropdown { display: block !important; position: fixed !important; inset: 0 !important; top: 0 !important; width: 100vw !important;
    height: 100dvh !important; margin: 0 !important; padding: 230px 32px 40px !important; background: #1C2942 !important; z-index: -1; overflow-y: auto;
    box-shadow: none !important; border-radius: 0 !important; opacity: 1 !important; transform: translateY(-100%); visibility: hidden;
    transition: transform .35s cubic-bezier(.4, 0, .2, 1), visibility 0s .35s; }
  .rw-headbar-m nav.hfe-dropdown.menu-is-active { transform: none; visibility: visible; transition: transform .35s cubic-bezier(.4, 0, .2, 1); }
  .rw-headbar-m nav.hfe-dropdown ul { display: block !important; height: auto !important; visibility: inherit !important; opacity: 1 !important;
    background: transparent !important; box-shadow: none !important; border-radius: 0 !important; }
  .rw-headbar-m nav.hfe-dropdown li { flex: none !important; border: 0 !important; margin: 0 !important; padding: 0 !important; min-height: 0 !important; }
  .rw-headbar-m nav.hfe-dropdown li a { display: block !important; text-align: center; background: transparent !important; color: #9EA3AE !important;
    font-size: 18px !important; font-weight: 500 !important; padding: 20px 0 !important; border: 0 !important; }
  .rw-headbar-m nav.hfe-dropdown li.current-menu-item a { color: #FFFFFF !important; font-weight: 700 !important; }
  .rw-headbar-m nav.hfe-dropdown .hfe-nav-menu__item-separator, .rw-headbar-m nav.hfe-dropdown hr { display: none !important; }
  body:has(.rw-headbar-m .menu-is-active) { overflow: hidden; }
  body:has(.rw-headbar-m .menu-is-active) .rw-headbar-m .hfe-nav-menu__toggle,
  body:has(.rw-headbar-m .menu-is-active) .rw-headbar-m .hfe-nav-menu__toggle * { color: #FFFFFF !important; fill: #FFFFFF !important; }
  body:has(.rw-headbar-m .menu-is-active) .rw-logo-m { visibility: visible; }
  .rw-logo-m img { transition: filter .35s; }
  body:has(.rw-headbar-m .menu-is-active) .rw-logo-m img { filter: brightness(0) invert(1); }
  /* three bars that turn into an × (HFE swaps its own icons; ours replace them so the change can animate) */
  .rw-headbar-m .hfe-nav-menu__toggle { position: relative; display: flex !important; align-items: center; width: 28px; height: 28px; padding: 0 !important; }
  .rw-headbar-m .hfe-nav-menu-icon { position: relative; display: block; width: 28px; height: 20px; }
  .rw-headbar-m .hfe-nav-menu-icon > * { display: none !important; }
  .rw-headbar-m .hfe-nav-menu-icon::before, .rw-headbar-m .hfe-nav-menu-icon::after, .rw-headbar-m .hfe-nav-menu__toggle::after {
    content: ""; position: absolute; left: 0; width: 28px; height: 2px; border-radius: 1px; background: currentColor;
    transition: transform .35s cubic-bezier(.4, 0, .2, 1), opacity .2s; }
  .rw-headbar-m .hfe-nav-menu-icon::before { top: 0; }
  .rw-headbar-m .hfe-nav-menu-icon::after { bottom: 0; }
  .rw-headbar-m .hfe-nav-menu__toggle::after { top: 13px; }
  .rw-headbar-m .hfe-active-menu .hfe-nav-menu-icon::before { transform: translateY(9px) rotate(45deg); }
  .rw-headbar-m .hfe-active-menu .hfe-nav-menu-icon::after { transform: translateY(-9px) rotate(-45deg); }
  .rw-headbar-m .hfe-active-menu::after { opacity: 0; }
}
/* the current page in the desktop menu (Figma: navy, bold) */
.rw-headbar .current-menu-item > a.hfe-menu-item { color: #1C2942 !important; font-weight: 700 !important; }
/* text pages (`Desktop_About us` format: /product/, /accuracy/, /about/, /terms/, /privacy/, /security/) */
.rw-prose p { margin: 0 0 1.4em; }
.rw-prose h2 { font-size: 1.15em; font-weight: 700; color: #1C2942; margin: 2em 0 .6em; }
.rw-prose h3 { font-size: 1em; font-weight: 700; color: #1C2942; margin: 1.8em 0 .3em; }
.rw-prose ul, .rw-prose ol { margin: 0 0 1.4em; padding-inline-start: 1.4em; }
.rw-prose > :first-child, .rw-prose .elementor-widget-container > :first-child { margin-top: 0; }
/* theme-rendered pages (posts) start under the mobile bar, which is absolute over the page */
@media (max-width: 767px) { .site-main:has(> .page-header) { padding-top: 104px; } }
/* the full FAQ page keeps the header on screen (2026-10-16); sticky inside its own wrapper scrolled away with it (2026-10-18) */
body:has(.rw-fixed-head) #masthead { position: fixed; inset: 0 0 auto; z-index: 100; }
@media (min-width: 768px) { body:has(.rw-fixed-head) { padding-top: 113px; } }
/* splash: the subtitle fades in once the logo is sharp (rw.js) */
.rw-splash-sub { opacity: 0; will-change: opacity, transform; }

/* app screens: overlapped until the strip is in view, then they spread on their own — not tied to scroll distance
   (2026-10-16); rw.js sets --dx per screen and toggles .rw-spread */
.rw-shots { overflow: hidden; }
.rw-shot { position: relative; transform: translateX(var(--dx, 0)); transition: transform 1.1s cubic-bezier(.2, .7, .2, 1), width .35s ease; }
.rw-spread .rw-shot { transform: none; }
.rw-shot img { border-radius: 26px; box-shadow: 0 14px 34px rgba(28, 41, 66, .16); }
@media (min-width: 768px) and (hover: hover) {
  /* hovered: 270 → 340 wide, desktop only */
  .rw-spread .rw-shot:hover { transform: scale(calc(340 / 270)); z-index: 10; }
}
@media (max-width: 767px) {
  /* a swipeable strip anchored left: the left screen stays put, the rest slide out to the right */
  .rw-shots { direction: ltr; flex-direction: row !important; justify-content: flex-start !important; overflow-x: auto !important;
    padding-inline: 20px !important; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .rw-shots::-webkit-scrollbar { display: none; }
  .rw-shots > .e-con-inner { justify-content: flex-start !important; width: max-content !important; max-width: none !important; margin: 0 !important; }
  /* laid out spread (12px apart) so the strip swipes its full width; rw.js slides each screen over its left neighbour by
     scroll position — the first, at the left padding, stays put while the rest open to the right (client, 2026-10-18:
     «با اسکرول، بقیه اسکرین شات ها به نرمی به سمت راست باز میشن … الان یکهو پرش داره»). No tap enlarges. */
  .rw-shot, .rw-spread .rw-shot { margin-left: 12px !important; transition: none !important; transform: translateX(var(--mx, 0px)) !important; }
  .rw-shot:nth-child(5), .rw-spread .rw-shot:nth-child(5) { margin-left: 0 !important; }
  /* the same space above and below the screens; the 100vh band left them against the hero and ~370px empty under them */
  .rw-shots { min-height: 0 !important; padding-block: 56px !important; align-items: center !important; }
  /* DOM order is RTL (5…1); read left → right as 1…5, the first on top */
  .rw-shot:nth-child(5) { order: 1; z-index: 5; } .rw-shot:nth-child(4) { order: 2; z-index: 4; } .rw-shot:nth-child(3) { order: 3; z-index: 3; }
  .rw-shot:nth-child(2) { order: 4; z-index: 2; } .rw-shot:nth-child(1) { order: 5; }
  .rw-video-m .elementor-wrapper { aspect-ratio: auto !important; height: 100svh; }
  html:has(.rw-anim) { scroll-padding-top: 60px; }
}

/* «ما یک کار پیچیده رو…» boxes: 270×185, the title in a fixed 55px band (2026-10-16) */
@media (min-width: 768px) {
  .rw-feature > .elementor-widget-container { min-height: 185px; box-sizing: border-box; }
  /* top-aligned, so every title starts the same distance under the tick, one line or two (client, 2026-10-18) */
  .rw-feature .elementor-icon-box-title { height: 55px; display: flex; align-items: flex-start; justify-content: center; margin-block: 0 !important; }
}
@media (max-width: 767px) {
  /* the tick sits on the title's line */
  .rw-feature .elementor-icon-box-icon { display: none !important; }
  .rw-feature .elementor-icon-box-title { display: flex; align-items: center; justify-content: flex-start; direction: rtl; }
  .rw-feature .elementor-icon-box-title::before { content: ""; display: inline-block; width: 14px; height: 14px; margin-inline-end: 8px; vertical-align: -1px;
    background: #CBB279; -webkit-mask: url(/wp-content/uploads/renowo/icons/check.svg) center / contain no-repeat; mask: url(/wp-content/uploads/renowo/icons/check.svg) center / contain no-repeat; }
}

/* blog search: HFE pins its × at right:0, on top of RTL text — it sits before the text with 12px between (2026-10-16) */
.rw-search .hfe-search-form__input { padding-right: 44px !important; }
.rw-search button#clear { right: 6px; left: auto; }
.elementor-widget-video video { object-fit: cover; }

/* buttons 55 tall, radius 22 (2026-10-15) */
.elementor-button { min-height: 55px; display: inline-flex; align-items: center; justify-content: center; }
/* the orange «توی بازاری که…» boxes are square whatever the text */
.rw-sq { aspect-ratio: 1 / 1; height: auto; }
/* mobile: a 2×2 tile, the 2nd and 3rd 40% wide so it is no chessboard (client, 2026-10-18), 14/500/1.5em text, 12px in */
@media (max-width: 767px) {
  .rw-sq { aspect-ratio: auto !important; min-height: 105px !important; padding: 12px !important; flex: 1 1 0 !important; width: auto !important; }
  .rw-sq:nth-child(2), .rw-sq:nth-child(3) { flex: 0 0 40% !important; }
  .rw-sq:nth-child(1), .rw-sq:nth-child(4) { flex-basis: calc(60% - 8px) !important; }
  .rw-sq .elementor-heading-title { font-size: 14px !important; font-weight: 500 !important; line-height: 1.5em !important; }
}
/* desktop video fills one screen */
@media (min-width: 768px) { .rw-video-d .elementor-wrapper { aspect-ratio: auto !important; height: 100vh; } }

/* FAQ: answer panel joins the question with square corners */
.e-n-accordion-item[open] > .e-n-accordion-item-title { border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; }
/* the answer is the question's own box carried on: same border, no rule between them (client, 2026-10-18; mobile 3.homepage-3) */
.e-n-accordion-item[open] > [role="region"], .e-n-accordion-item[open] > .e-con {
  border-color: #E6E6E6 !important; border-top: 0 !important; }
.e-n-accordion-item[open] > .e-n-accordion-item-title { border-bottom: 0 !important; }

/* blog */
.rw-tab { cursor: pointer; }
.rw-tab .elementor-heading-title { color: #6B7280; padding-bottom: 6px; border-bottom: 2px solid transparent; }
.rw-tab.rw-active .elementor-heading-title { color: #1C2942; font-weight: 700; border-bottom-color: #1C2942; }
.rw-tabs[hidden], .rw-order-note[hidden], .rw-posts [hidden] { display: none !important; }
.rw-posts .hfe-post-card { cursor: pointer; }
.rw-posts mark { background: rgba(203, 178, 121, .45); color: inherit; border-radius: 3px; padding: 0 2px; }
.rw-empty { text-align: center; color: #8A909C; }
.hfe-read-more { display: flex; width: fit-content; margin-inline-start: auto; align-items: center; gap: 10px; background: #1C2942; border-radius: 10px; padding: 8px 14px; }
/* a left-pointing chevron as in Desktop_Blog.png; a mask, so the RTL line cannot mirror it */
.hfe-read-more::after { content: ""; width: 14px; height: 14px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 18l-6-6 6-6' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 18l-6-6 6-6' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.rw-tags { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 18px; color: #8A909C; font-size: 15px; }
.rw-tags span::before { content: ""; display: inline-block; width: 16px; height: 16px; margin-inline-end: 6px; vertical-align: -3px; background: currentColor;
  -webkit-mask: url(/wp-content/uploads/renowo/icons/check.svg) center / contain no-repeat; mask: url(/wp-content/uploads/renowo/icons/check.svg) center / contain no-repeat; }
@media (max-width: 767px) { .rw-tags { font-size: 12px; } }
/* mobile: the tabs on one line, scrolling sideways — no wrap (client, 2026-10-20; was three to a row per `Mobile_Blog_Home.png`) */
@media (max-width: 767px) {
  .rw-tabs { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; justify-content: flex-start !important; overflow-x: auto; scrollbar-width: none; column-gap: 20px !important; }
  .rw-tabs::-webkit-scrollbar { display: none; }
  .rw-tab { flex: none; white-space: nowrap; }
}

/* a post (`Desktop_Blog_Post.png`): theme-rendered, decorated by mu-plugins/renowo.php — meta line, 30-second summary, related posts */
body.single-post .site-main { max-width: 800px !important; margin-inline: auto; padding-inline: 0; padding-bottom: 100px; }
.single-post .page-header .entry-title { font-size: 23px; font-weight: 700; color: #1C2942; margin: 80px 0 16px; }
.single-post .page-content { font-size: 16px; line-height: 1.8; color: #3A4150; }
.single-post .page-content h2, .single-post .page-content h3 { font-size: 16px; font-weight: 700; color: #1C2942; margin: 1.6em 0 .6em; }
.single-post .post-tags, .single-post #comments { display: none; }
.rw-meta { display: flex; gap: 28px; color: #8A909C; font-size: 14px; padding-bottom: 22px; border-bottom: 1px solid #E3E4E7; margin-bottom: 30px; }
.rw-meta span::before { content: ""; display: inline-block; width: 18px; height: 18px; margin-inline-end: 6px; vertical-align: -4px; background: currentColor;
  -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.rw-meta .rw-cat { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M3 12V4h8l10 10-8 8L3 12z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.2'/%3E%3C/svg%3E"); }
.rw-meta .rw-time { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
.rw-summary { background: #FAFAFA; border-radius: 24px; padding: 28px 24px; margin-bottom: 30px; font-size: 15px; }
.single-post .rw-summary h2 { margin-top: 0 !important; font-size: 15px !important; }
.rw-summary p { margin: 0 0 .9em; } .rw-summary p:last-child { margin-bottom: 0; }
.rw-related { margin-top: 90px; }
.single-post .rw-related > h2 { text-align: center; font-size: 21px; font-weight: 700; color: #1C2942; margin: 0 0 22px; }
.rw-related-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.rw-card { border: 2px solid #DEDEDE; border-radius: 24px; padding: 32px 24px 28px; cursor: pointer; }
.single-post .rw-card h3 { margin: 0 0 14px; font-size: 21px; font-weight: 700; } .rw-card h3 a { color: #1C2942; text-decoration: none; }
.rw-card p { margin: 0 0 20px; font-size: 15px; line-height: 1.8; color: #6B7280; }
.rw-card .hfe-read-more { color: #FFFFFF; font-size: 15px; font-weight: 500; text-decoration: none; margin-inline-start: 0; }
@media (max-width: 767px) {
  body.single-post .site-main { padding-inline: 20px; }
  .single-post .page-header .entry-title { font-size: 18px; margin-top: 40px; }
  .single-post .page-content, .rw-summary { font-size: 13px; }
  .rw-meta { font-size: 12px; }
  .rw-related { margin-top: 56px; } .single-post .rw-related > h2 { font-size: 18px; }
  .rw-related-grid { grid-template-columns: 1fr; }
  .single-post .rw-card h3 { font-size: 18px; } .rw-card p { font-size: 12px; } .rw-card .hfe-read-more { font-size: 12px; }
}