@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800&family=Noto+Sans+Arabic:wght@400;500;600;700;800&family=Noto+Sans+Hebrew:wght@400;500;600;700;800&display=swap");

:root {
  --modern-bg: #f3f2f2;
  --modern-paper: #fff;
  --modern-ink: #201e1d;
  --modern-muted: #5f5b59;
  --modern-red: #ec3013;
  --modern-red-dark: #a02008;
  --modern-rule: 2px solid var(--modern-ink);
  --modern-max: 1200px;
  --modern-pad: clamp(20px, 5vw, 72px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0 !important;
  background: var(--modern-bg) !important;
  color: var(--modern-ink) !important;
  font-family: "Archivo", Arial, sans-serif !important;
  font-size: 16px;
  line-height: 1.75;
  overflow-x: hidden;
}
[lang="he"] body { font-family: "Noto Sans Hebrew", Arial, sans-serif !important; }
[lang="ar"] body { font-family: "Noto Sans Arabic", Arial, sans-serif !important; }
[dir="rtl"] body { direction: rtl; text-align: right; }
[dir="rtl"] .article-wrap, [dir="rtl"] .section-inner, [dir="rtl"] .hero { text-align: right !important; }
[dir="rtl"] .article-wrap h1, [dir="rtl"] .article-wrap h2, [dir="rtl"] .article-wrap h3, [dir="rtl"] .hero h1 { letter-spacing: 0 !important; }
[dir="rtl"] .breadcrumb, [dir="rtl"] .article-meta, [dir="rtl"] .footer-links { direction: rtl; }
[dir="rtl"] .author-card { text-align: right; }
body::before { display: none !important; }
.sky, .sky-bg, .clouds { display: none !important; }
img { max-width: 100%; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--modern-red) !important; outline-offset: 3px; }

h1, h2, h3, h4, h5, h6,
.logo, .nav-logo, .brand, .footer-logo, .foot-logo,
.sec-title, .section-title, .step-title, .feat-title,
.btn-dl, .btn-cta, .btn-white, .btn-cta-white, .nav-cta, .nav-dl {
  color: var(--modern-ink) !important;
  font-family: "Archivo", Arial, sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
}
p, li, .hero-sub, .hero-subtitle, .sec-sub, .section-subtitle,
.step-desc, .feat-desc, .feature-desc, .article-meta, .footer-copy {
  color: var(--modern-muted) !important;
}

/* Shared navigation */
.nav, .topbar, header.sticky {
  position: sticky !important;
  top: 0;
  z-index: 1000;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 var(--modern-pad) !important;
  background: rgba(243, 242, 242, .97) !important;
  border: 0 !important;
  border-bottom: var(--modern-rule) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: blur(10px);
}
.nav-in, .nav-inner, .topbar {
  width: 100% !important;
  max-width: var(--modern-max) !important;
  min-height: 72px !important;
  height: auto !important;
  margin: 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
}
.logo, .nav-logo, .brand {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--modern-ink) !important;
  font-size: 20px !important;
  line-height: 1 !important;
  text-transform: uppercase;
  white-space: nowrap;
  text-decoration: none;
}
.logo::before, .nav-logo::before, .brand::before { display: none !important; }
.logo b, .nav-logo span, .brand span { color: var(--modern-red) !important; }
.langs, .nav-langs, .social { display: flex !important; align-items: center; gap: 4px !important; }
.lb, .lang-btn, .lang, .social a {
  min-width: auto !important;
  padding: 7px 9px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--modern-muted) !important;
  font: 700 12px/1 "Archivo", sans-serif !important;
}
.lb:hover, .lang-btn:hover, .lang:hover, .lb.on, .lang-btn.active { color: var(--modern-red) !important; transform: none !important; }
.nav-dl, .nav-cta, .btn-dl, .btn-cta, .btn, button[type="submit"] {
  display: inline-flex !important;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 13px 18px !important;
  border: 2px solid var(--modern-red) !important;
  border-radius: 0 !important;
  background: var(--modern-red) !important;
  color: #fff !important;
  box-shadow: none !important;
  font: 800 13px/1.2 "Archivo", sans-serif !important;
  letter-spacing: 0 !important;
  text-align: left !important;
  text-decoration: none !important;
  transition: background .18s ease, border-color .18s ease !important;
}
.nav-dl:hover, .nav-cta:hover, .btn-dl:hover, .btn-cta:hover, .btn:hover, button[type="submit"]:hover {
  background: var(--modern-red-dark) !important;
  border-color: var(--modern-red-dark) !important;
  color: #fff !important;
  transform: none !important;
}

/* Homepage */
.wrap, .wrapper, .page { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; }
.wrap > .hero {
  width: min(100%, calc(var(--modern-max) + 2 * var(--modern-pad))) !important;
  max-width: none !important;
  margin: 0 auto !important;
  padding: clamp(58px, 8vw, 104px) var(--modern-pad) !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(340px, .82fr);
  grid-template-areas: "eyebrow image" "title image" "copy image" "cta image" "chips image";
  align-items: start;
  column-gap: clamp(40px, 7vw, 96px);
  text-align: left !important;
}
.wrap > .hero .eyebrow { grid-area: eyebrow; }
.wrap > .hero h1 { grid-area: title; }
.wrap > .hero .hero-sub { grid-area: copy; }
.wrap > .hero > .btn-dl { grid-area: cta; justify-self: start; }
.wrap > .hero .chips { grid-area: chips; }
.wrap > .hero .hero-banner { grid-area: image; align-self: stretch; }
.eyebrow, .hero-eyebrow, .bc-tag, .blog-tag, .article-tag {
  display: inline-block !important;
  width: fit-content;
  margin: 0 0 22px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--modern-red-dark) !important;
  font: 800 12px/1.3 "Archivo", sans-serif !important;
  letter-spacing: .08em !important;
  text-transform: uppercase;
}
.wrap > .hero h1 {
  max-width: 760px;
  margin: 0 0 25px !important;
  font-size: clamp(44px, 6.2vw, 88px) !important;
  line-height: 1.03 !important;
}
.wrap > .hero h1 .pk, .highlight { color: var(--modern-red) !important; }
.wrap > .hero .hero-sub { max-width: 650px; margin: 0 0 28px !important; font-size: 17px !important; line-height: 28px !important; }
.wrap > .hero .chips { margin: 24px 0 0 !important; display: flex !important; flex-wrap: wrap; gap: 0 18px !important; }
.chip {
  padding: 4px 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--modern-muted) !important;
  font: 700 11px/1.4 "Archivo", sans-serif !important;
  letter-spacing: .05em !important;
  text-transform: uppercase;
}
.hero-banner, .hero-img, .screenshot-frame {
  width: 100% !important;
  min-width: 0 !important;
  height: 100%;
  min-height: 440px;
  margin: 0 !important;
  border: var(--modern-rule) !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
  overflow: hidden;
}
.hero-banner img, .hero-img img { width: 100% !important; min-width: 0 !important; height: 100%; object-fit: cover; border-radius: 0 !important; }

.sec, section:not(.hero) {
  margin: 0 !important;
  padding: clamp(64px, 8vw, 92px) var(--modern-pad) !important;
  border: 0 !important;
  border-top: var(--modern-rule) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.sec-in, .section-inner {
  width: 100% !important;
  max-width: var(--modern-max) !important;
  margin: 0 auto !important;
  padding: 0 !important;
}
.sec-in > div[style*="background"] { padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
.sec-title, .section-title {
  max-width: 860px;
  margin: 0 0 18px !important;
  font-size: clamp(32px, 4.5vw, 58px) !important;
  line-height: 1.06 !important;
  text-align: left !important;
}
.sec-sub, .section-subtitle { max-width: 720px; margin: 0 0 42px !important; font-size: 16px !important; line-height: 28px !important; text-align: left !important; }
.bg-alt { background: #e9e7e6 !important; }

.chars-row { display: grid !important; grid-template-columns: repeat(10, minmax(64px, 1fr)) !important; gap: 0 !important; border: var(--modern-rule); }
.char-card {
  min-width: 0 !important;
  padding: 14px !important;
  border: 0 !important;
  border-right: var(--modern-rule) !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
  transition: transform .18s ease !important;
}
.char-card:last-child { border-right: 0 !important; }
.char-card:hover { transform: translateY(-8px) !important; }

.steps, .feat-grid, .feature-grid, .blog-grid, .needs-grid, .special-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0 !important;
  border: var(--modern-rule) !important;
  background: var(--modern-ink) !important;
}
.step-card, .feat, .feature-card, .need-card, .special-card, .blog-card, .bc {
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--modern-bg) !important;
  box-shadow: none !important;
  outline: 1px solid var(--modern-ink);
  overflow: hidden;
}
.step-card:hover, .feat:hover, .feature-card:hover, .blog-card:hover, .bc:hover { transform: none !important; background: #fff !important; box-shadow: none !important; }
.step-img, .game-thumb, .blog-card img { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
.step-body, .feat, .feature-card, .blog-card-body, .bc { padding: 25px !important; }
.step-num { color: var(--modern-red) !important; font: 800 36px/1 "Archivo", sans-serif !important; }
.step-title, .feat-title, .feature-title { font-size: 21px !important; line-height: 1.2 !important; }
.feat-ico, .feature-icon, .reward-icon { display: none !important; }

.gallery {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 2px !important;
  padding: 2px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--modern-ink) !important;
  box-shadow: none !important;
}
.gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform .25s ease; }
.gallery img:hover { transform: scale(1.05); }
.two { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: clamp(36px, 6vw, 80px) !important; align-items: center; }
.two img, .parent-img, .pet-main-img, .journey-img {
  border: var(--modern-rule) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.bullet-list li { position: relative; padding: 14px 0 14px 24px !important; border-top: 1px solid var(--modern-ink); }
.bullet-list li::before { content: "" !important; position: absolute; left: 0; top: 23px; width: 9px; height: 9px; background: var(--modern-red); }
.pet-grid { gap: 2px !important; padding: 2px; background: var(--modern-ink); }
.pet-item { border: 0 !important; border-radius: 0 !important; background: #fff !important; box-shadow: none !important; }
.faq, .faq-list { max-width: 900px; }
details, .faq details { border: 0 !important; border-top: var(--modern-rule) !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
summary { padding: 20px 0 !important; font: 800 18px/1.3 "Archivo", sans-serif !important; }
details p { padding: 0 0 24px !important; }
.newsletter-card, .newsletter, .lead-magnet {
  padding: clamp(28px, 5vw, 56px) !important;
  border: var(--modern-rule) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: left !important;
}
.newsletter-card::before, .newsletter-card::after { display: none !important; }
.newsletter-card .section-title, .newsletter-card .sec-title { font-size: clamp(28px, 4vw, 46px) !important; }
input, input[type="email"] { min-height: 50px; border: var(--modern-rule) !important; border-radius: 0 !important; background: #fff !important; color: var(--modern-ink) !important; font: 500 15px "Archivo", sans-serif !important; }
.cta-section, .final-cta {
  margin: 0 !important;
  padding: clamp(62px, 9vw, 112px) var(--modern-pad) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--modern-red) !important;
  box-shadow: none !important;
  text-align: left !important;
}
.cta-section h2, .final-cta h2 { max-width: var(--modern-max); margin: 0 auto 18px !important; color: var(--modern-bg) !important; font-size: clamp(38px, 6vw, 76px) !important; line-height: 1.03 !important; }
.cta-section p, .final-cta p { max-width: var(--modern-max); margin: 0 auto 24px !important; color: #fff !important; }
.cta-section .btn-cta-white, .final-cta .btn-white, .btn-cta-white {
  display: inline-flex !important;
  padding: 13px 18px !important;
  border: 2px solid currentColor !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: inherit !important;
  box-shadow: none !important;
  text-decoration: none;
}

/* Blog listing */
.wrapper > .hero { max-width: var(--modern-max) !important; margin: 0 auto !important; padding: clamp(58px, 8vw, 96px) var(--modern-pad) !important; text-align: left !important; }
.wrapper > .hero h1 { max-width: 900px; margin: 0 0 24px !important; font-size: clamp(44px, 7vw, 88px) !important; line-height: 1.02 !important; }
.wrapper > .hero .hero-subtitle { max-width: 720px; margin: 0 !important; font-size: 17px !important; line-height: 28px !important; }
.blog-grid { grid-template-columns: 1fr !important; border-left: 0 !important; border-right: 0 !important; border-bottom: 0 !important; background: transparent !important; }
.blog-card { outline: 0 !important; border-bottom: var(--modern-rule) !important; }
.blog-card-body {
  display: grid !important;
  grid-template-columns: minmax(130px, .3fr) minmax(0, 1.7fr) !important;
  column-gap: clamp(22px, 5vw, 70px);
  align-items: start;
  padding: 30px 0 !important;
}
.blog-card .blog-tag { grid-column: 1; grid-row: 1 / span 3; margin: 4px 0 0 !important; }
.blog-card h3 { grid-column: 2; margin: 0 0 8px !important; font-size: clamp(20px, 2.4vw, 28px) !important; line-height: 1.2 !important; }
.blog-card p { grid-column: 2; margin: 0 0 12px !important; line-height: 1.65 !important; }
.blog-card .blog-read-more { grid-column: 2; color: var(--modern-red-dark) !important; font-weight: 800; }

/* Articles */
.article-wrap {
  width: min(100%, 840px) !important;
  max-width: 840px !important;
  margin: 0 auto !important;
  padding: clamp(50px, 8vw, 92px) var(--modern-pad) !important;
}
.breadcrumb { margin: 0 0 38px !important; color: var(--modern-muted) !important; font-size: 12px !important; text-transform: uppercase; letter-spacing: .06em; }
.breadcrumb a, .blog-read-more { color: var(--modern-red-dark) !important; }
.article-wrap > h1 { margin: 0 0 20px !important; font-size: clamp(34px, 5vw, 58px) !important; line-height: 1.06 !important; }
.article-meta { margin: 0 0 38px !important; padding: 16px 0 !important; border-top: var(--modern-rule); border-bottom: var(--modern-rule); font-size: 12px !important; text-transform: uppercase; letter-spacing: .04em; }
.article-wrap > img { width: 100%; margin: 28px 0 38px !important; border: var(--modern-rule) !important; border-radius: 0 !important; box-shadow: none !important; }
.article-wrap h2 { margin: 48px 0 14px !important; font-size: clamp(26px, 3vw, 36px) !important; line-height: 1.16 !important; }
.article-wrap h3 { margin: 32px 0 10px !important; color: var(--modern-ink) !important; font-size: 22px !important; line-height: 1.25 !important; }
.article-wrap p, .article-wrap li { color: var(--modern-ink) !important; font-size: 16px !important; line-height: 1.75 !important; }
.article-wrap ul, .article-wrap ol { padding-left: 22px !important; margin: 16px 0 26px !important; }
.callout, .check-item {
  margin: 28px 0 !important;
  padding: 22px 0 22px 24px !important;
  border: 0 !important;
  border-left: 10px solid var(--modern-red) !important;
  border-radius: 0 !important;
  background: #e9e7e6 !important;
  box-shadow: none !important;
}
.callout strong { color: var(--modern-red-dark) !important; font-family: "Archivo", sans-serif !important; }
.article-cta {
  margin: 52px 0 !important;
  padding: 34px !important;
  border: var(--modern-rule) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--modern-ink) !important;
  text-align: left !important;
}
.article-cta h3 { margin-top: 0 !important; color: var(--modern-ink) !important; }
.article-cta p { color: var(--modern-muted) !important; }
.article-cta .btn-cta-white { border-color: var(--modern-red) !important; background: var(--modern-red) !important; color: #fff !important; }
.author-card {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 20px;
  align-items: start;
  margin: 56px 0 8px;
  padding: 28px 0;
  border-top: var(--modern-rule);
  border-bottom: var(--modern-rule);
}
.author-mark { width: 88px; height: 88px; display: block; object-fit: contain; background: transparent; }
.author-card h2 { margin: 0 0 5px !important; font-size: 21px !important; }
.author-card p { margin: 0 !important; color: var(--modern-muted) !important; font-size: 14px !important; line-height: 1.65 !important; }

/* Footer and utility pages */
footer, .footer {
  margin: 0 !important;
  padding: 46px var(--modern-pad) !important;
  border: 0 !important;
  border-top: var(--modern-rule) !important;
  border-radius: 0 !important;
  background: var(--modern-ink) !important;
  color: var(--modern-bg) !important;
  box-shadow: none !important;
}
.footer-inner, .foot-inner { max-width: var(--modern-max) !important; margin: 0 auto !important; text-align: left !important; }
.footer-logo, .foot-logo { color: #fff !important; font-size: 20px !important; }
.footer-logo::before, .foot-logo::before { display: none !important; }
.footer-links { display: flex !important; flex-wrap: wrap; gap: 10px 22px !important; margin: 24px 0 !important; }
.footer-links a, footer a { color: var(--modern-bg) !important; font-size: 13px !important; }
.footer-copy { color: #c8c4c2 !important; }
.policy, .error-card, .admin-shell { border-radius: 0 !important; box-shadow: none !important; }

[dir="rtl"] .bullet-list li { padding-left: 0 !important; padding-right: 24px !important; }
[dir="rtl"] .bullet-list li::before { left: auto; right: 0; }

@media (max-width: 900px) {
  .wrap > .hero { grid-template-columns: 1fr; grid-template-areas: "eyebrow" "title" "copy" "cta" "chips" "image"; }
  .hero-banner { min-height: 0; margin-top: 38px !important; aspect-ratio: 16 / 10; }
  .chars-row { grid-template-columns: repeat(5, 1fr) !important; }
  .char-card:nth-child(5) { border-right: 0 !important; }
  .char-card:nth-child(-n+5) { border-bottom: var(--modern-rule) !important; }
  .gallery { grid-template-columns: repeat(3, 1fr) !important; }
}

@media (max-width: 640px) {
  .nav, .topbar, header.sticky { padding-inline: 18px !important; }
  .nav-in, .nav-inner, .topbar { min-height: 64px !important; gap: 12px !important; }
  .langs, .nav-langs, .social { display: none !important; }
  .nav-dl, .nav-cta { padding: 11px 12px !important; font-size: 11px !important; }
  .wrap > .hero h1, .wrapper > .hero h1 { font-size: clamp(40px, 12vw, 58px) !important; }
  .steps, .feat-grid, .feature-grid, .needs-grid, .special-grid, .two { grid-template-columns: 1fr !important; }
  .gallery { grid-template-columns: repeat(2, 1fr) !important; }
  .chars-row { grid-template-columns: repeat(2, 1fr) !important; }
  .char-card { border-right: 0 !important; border-bottom: var(--modern-rule) !important; }
  .char-card:nth-child(odd) { border-right: var(--modern-rule) !important; }
  .char-card:nth-last-child(-n+2) { border-bottom: 0 !important; }
  .blog-card-body { grid-template-columns: 1fr !important; }
  .blog-card .blog-tag, .blog-card h3, .blog-card p, .blog-card .blog-read-more { grid-column: 1; grid-row: auto; }
  .blog-card .blog-tag { margin-bottom: 16px !important; }
  .author-card { grid-template-columns: 56px 1fr; }
  .author-mark { width: 56px; height: 56px; }
  .author-mark { width: 56px; height: 56px; font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
