/* ReptiVibe 2.4.0-r13
   Lighter hero + one 1400px page frame + homepage typography.
   Installed after diary-landing.css; replaces r12 override. */

.rv-diary-landing {
  --dl-site-max: 1400px;
  --dl-site-gutter: 20px;
  --dl-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --dl-font-display: Georgia, "Times New Roman", serif;
  font-family: var(--dl-font-sans) !important;
}

/* =========================================================
   SHARED PAGE FRAME
   Homepage desktop frame:
   width: min(1400px, calc(100% - 40px))
   ========================================================= */

.rv-diary-landing .dl-shell,
.rv-diary-landing .dl-header-inner,
.rv-diary-landing .dl-hero-layout {
  width: min(var(--dl-site-max), calc(100% - (var(--dl-site-gutter) * 2))) !important;
  max-width: var(--dl-site-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Footer uses .dl-shell too; this makes the intention explicit. */
.rv-diary-landing .dl-footer-inner {
  width: min(var(--dl-site-max), calc(100% - (var(--dl-site-gutter) * 2))) !important;
  max-width: var(--dl-site-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* =========================================================
   HOMEPAGE TYPOGRAPHY SYSTEM
   ========================================================= */

.rv-diary-landing,
.rv-diary-landing button,
.rv-diary-landing input,
.rv-diary-landing select,
.rv-diary-landing textarea,
.rv-diary-landing .dl-nav,
.rv-diary-landing .dl-brand small,
.rv-diary-landing .dl-footer,
.rv-diary-landing .dl-btn {
  font-family: var(--dl-font-sans) !important;
}

.rv-diary-landing .dl-brand > span,
.rv-diary-landing .dl-footer-brand strong,
.rv-diary-landing .dl-hero h1,
.rv-diary-landing .dl-heading h2,
.rv-diary-landing .dl-chaos-copy h2,
.rv-diary-landing .dl-final-inner h2,
.rv-diary-landing .dl-plan h3 {
  font-family: var(--dl-font-display) !important;
}

/* =========================================================
   HERO
   Keep approved r11 panorama and r12 proportions/font size.
   Only reduce darkness and make the scene visible under copy.
   ========================================================= */

.rv-diary-landing .dl-hero {
  position: relative !important;
  width: 100% !important;
  height: 640px !important;
  min-height: 640px !important;
  max-height: 640px !important;
  overflow: hidden !important;
  background: #070a08 !important;
  color: #fff !important;
}

.rv-diary-landing .dl-hero-image {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  transform: none !important;
  /* Small lift only. It does not redraw or blur the approved image. */
  filter: brightness(1.075) saturate(.99) !important;
  background-image: url("assets/landing/hero-diary-agama-panorama-r11.webp") !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: right center !important;
}

/*
  r12 started at rgba(...,.70), which hid the left side.
  r13 starts at .48 and fades continuously to zero.
  There is no opaque black panel and no visible vertical seam.
*/
.rv-diary-landing .dl-hero-shade {
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background: linear-gradient(
    90deg,
    rgba(4,7,6,.48) 0%,
    rgba(4,7,6,.44) 11%,
    rgba(4,7,6,.37) 22%,
    rgba(4,7,6,.29) 33%,
    rgba(4,7,6,.21) 44%,
    rgba(4,7,6,.14) 54%,
    rgba(4,7,6,.08) 63%,
    rgba(4,7,6,.035) 71%,
    rgba(4,7,6,.012) 77%,
    rgba(4,7,6,0) 82%,
    rgba(4,7,6,0) 100%
  ) !important;
}

.rv-diary-landing .dl-hero-layout {
  position: relative !important;
  z-index: 2 !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
}

.rv-diary-landing .dl-hero-copy {
  width: min(650px, 47vw) !important;
  max-width: 650px !important;
  margin: 0 !important;
  /* Readability comes from text shadow now, not a black wall. */
  text-shadow: 0 2px 15px rgba(0,0,0,.48), 0 1px 3px rgba(0,0,0,.36) !important;
}

.rv-diary-landing .dl-hero h1 {
  max-width: 650px !important;
  margin: 0 0 22px !important;
  font-family: var(--dl-font-display) !important;
  font-size: clamp(44px, 3.6vw, 62px) !important;
  font-weight: 700 !important;
  line-height: 1.02 !important;
  letter-spacing: -1.35px !important;
  text-wrap: balance !important;
  color: #fff !important;
}

.rv-diary-landing .dl-hero h1 em {
  display: inline !important;
  margin: 0 !important;
  font-style: normal !important;
  background: linear-gradient(135deg, #c9a84c, #e8d48b, #c9a84c) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  text-shadow: none !important;
  filter: drop-shadow(0 2px 7px rgba(0,0,0,.22));
}

.rv-diary-landing .dl-hero-lead {
  max-width: 590px !important;
  margin: 0 !important;
  font-family: var(--dl-font-sans) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.7 !important;
  color: rgba(248,248,248,.94) !important;
}

.rv-diary-landing .dl-hero-points {
  margin-top: 25px !important;
}

.rv-diary-landing .dl-hero-point b {
  text-shadow: 0 1px 7px rgba(0,0,0,.50) !important;
}

.rv-diary-landing .dl-hero-actions {
  margin-top: 27px !important;
}

/* Section headings keep the same display family and scale as homepage. */
.rv-diary-landing .dl-heading h2 {
  font-family: var(--dl-font-display) !important;
  font-size: clamp(30px, 4vw, 46px) !important;
  line-height: 1.08 !important;
  letter-spacing: -.025em !important;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1099px) {
  .rv-diary-landing {
    --dl-site-gutter: 16px;
  }

  .rv-diary-landing .dl-hero {
    height: 620px !important;
    min-height: 620px !important;
    max-height: 620px !important;
  }

  .rv-diary-landing .dl-hero-image {
    background-position: 66% center !important;
  }

  .rv-diary-landing .dl-hero-copy {
    width: min(570px, 62%) !important;
  }

  .rv-diary-landing .dl-hero h1 {
    max-width: 570px !important;
    font-size: 46px !important;
    line-height: 1.02 !important;
    letter-spacing: -1.15px !important;
  }
}

@media (max-width: 820px) {
  .rv-diary-landing {
    --dl-site-gutter: 12px;
  }

  .rv-diary-landing .dl-header-inner {
    min-height: 64px !important;
  }
}

@media (max-width: 700px) {
  .rv-diary-landing .dl-hero {
    height: 710px !important;
    min-height: 710px !important;
    max-height: 710px !important;
  }

  .rv-diary-landing .dl-hero-image {
    background-size: auto 100% !important;
    background-position: 72% center !important;
    filter: brightness(1.06) saturate(.99) !important;
  }

  /* Lighter mobile veil too. */
  .rv-diary-landing .dl-hero-shade {
    background: linear-gradient(
      180deg,
      rgba(4,7,6,.68) 0%,
      rgba(4,7,6,.60) 24%,
      rgba(4,7,6,.46) 43%,
      rgba(4,7,6,.30) 60%,
      rgba(4,7,6,.16) 76%,
      rgba(4,7,6,.055) 90%,
      rgba(4,7,6,.015) 100%
    ) !important;
  }

  .rv-diary-landing .dl-hero-layout {
    padding: 38px 0 34px !important;
    align-items: flex-start !important;
  }

  .rv-diary-landing .dl-hero-copy {
    width: 100% !important;
    max-width: 560px !important;
  }

  .rv-diary-landing .dl-hero h1 {
    max-width: 540px !important;
    font-size: 38px !important;
    line-height: 1.04 !important;
    letter-spacing: -.8px !important;
  }

  .rv-diary-landing .dl-hero-lead {
    font-size: 15px !important;
    line-height: 1.6 !important;
  }
}

/* =========================================================
   ReptiVibe 2.4.0-r14
   Audience restore + brand sizing + dark notes block + FAQ.
   Hero and all other r13 layout rules remain unchanged.
   ========================================================= */

/* Main-page brand dimensions.
   Header: 42px emblem + 28px wordmark.
   Footer: 48px emblem + 24px wordmark. */
.rv-diary-landing .dl-brand {
  gap: 11px !important;
}
.rv-diary-landing .dl-brand img {
  width: 42px !important;
  height: 42px !important;
  flex: 0 0 42px !important;
  object-fit: contain !important;
}
.rv-diary-landing .dl-brand > span {
  font-family: var(--dl-font-display) !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: .55px !important;
}
.rv-diary-landing .dl-brand > span > span {
  color: var(--dl-gold-2) !important;
}

.rv-diary-landing .dl-footer-brand {
  grid-template-columns: 48px auto !important;
  column-gap: 14px !important;
}
.rv-diary-landing .dl-footer-brand img {
  width: 48px !important;
  height: 48px !important;
  grid-row: 1 / 3 !important;
  object-fit: contain !important;
}
.rv-diary-landing .dl-footer-brand strong {
  font-family: var(--dl-font-display) !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 1.05 !important;
  letter-spacing: .5px !important;
  color: #fff !important;
}
.rv-diary-landing .dl-footer-brand strong span {
  color: var(--dl-gold-2) !important;
}

/* Approved audience images keep their original near-4:3 proportions.
   No vertical stretching. */
.rv-diary-landing .dl-audience-grid article {
  overflow: hidden !important;
}
.rv-diary-landing .dl-audience-grid img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 3 !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}
.rv-diary-landing .dl-audience-grid h3 {
  min-height: 34px;
  display: flex;
  align-items: center;
}

/* Dark notes/tables block uses the same base as the final CTA. */
.rv-diary-landing .dl-chaos-card {
  position: relative !important;
  min-height: 190px !important;
  grid-template-columns: 1.02fr .78fr 1.20fr !important;
  gap: 22px !important;
  padding: 28px 0 28px 34px !important;
  border: 1px solid rgba(255,255,255,.055) !important;
  border-radius: 20px !important;
  background: linear-gradient(110deg,#0b0d15,#151a2c) !important;
  color: #fff !important;
  overflow: hidden !important;
}
.rv-diary-landing .dl-chaos-copy {
  position: relative;
  z-index: 2;
}
.rv-diary-landing .dl-chaos-copy h2 {
  color: #fff !important;
  font-family: var(--dl-font-display) !important;
  font-size: 25px !important;
  line-height: 1.08 !important;
}
.rv-diary-landing .dl-chaos-copy p {
  color: #c7ccda !important;
  font-size: 12px !important;
  line-height: 1.62 !important;
}
.rv-diary-landing .dl-old-tools {
  position: relative;
  z-index: 2;
  color: #d7dbea !important;
  font-size: 11px !important;
  gap: 13px !important;
}
.rv-diary-landing .dl-old-tools span {
  opacity: .9;
}

/* Real auth/login laptop photo.
   The mask makes it dissolve into the dark card instead of forming a box. */
.rv-diary-landing .dl-chaos-laptop {
  position: relative !important;
  align-self: stretch !important;
  min-height: 190px !important;
  margin: -28px 0 -28px -36px !important;
  overflow: hidden !important;
}
.rv-diary-landing .dl-chaos-laptop img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: 60% center !important;
  display: block !important;
  filter: brightness(.92) saturate(.92) !important;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0,0,0,.22) 12%,
    rgba(0,0,0,.58) 25%,
    #000 43%,
    #000 100%
  ) !important;
  mask-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0,0,0,.22) 12%,
    rgba(0,0,0,.58) 25%,
    #000 43%,
    #000 100%
  ) !important;
}
.rv-diary-landing .dl-chaos-laptop::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(11,13,21,.82) 0%,
    rgba(11,13,21,.38) 24%,
    rgba(11,13,21,.08) 45%,
    transparent 68%
  );
}
.rv-diary-landing .dl-chaos-laptop figcaption {
  position: absolute !important;
  z-index: 2 !important;
  right: 18px !important;
  bottom: 15px !important;
  margin: 0 !important;
  padding: 8px 11px !important;
  border: 1px solid rgba(232,212,139,.24) !important;
  border-radius: 10px !important;
  background: rgba(7,10,15,.72) !important;
  backdrop-filter: blur(8px);
  color: #e8d48b !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}

/* FAQ starts as a clean 4x2 closed grid. */
.rv-diary-landing .dl-faq-grid {
  align-items: start !important;
}
.rv-diary-landing .dl-faq-grid details {
  height: auto;
}
.rv-diary-landing .dl-faq-grid summary {
  min-height: 58px !important;
}

/* Responsive brand sizes match the same visual hierarchy. */
@media (max-width: 820px) {
  .rv-diary-landing .dl-brand > span {
    font-size: 22px !important;
  }
  .rv-diary-landing .dl-brand img {
    width: 38px !important;
    height: 38px !important;
    flex-basis: 38px !important;
  }
  .rv-diary-landing .dl-footer-brand strong {
    font-size: 21px !important;
  }
}

@media (max-width: 1099px) {
  .rv-diary-landing .dl-chaos-card {
    grid-template-columns: 1fr 1fr !important;
    padding-right: 0 !important;
  }
  .rv-diary-landing .dl-chaos-laptop {
    grid-column: 1 / -1;
    min-height: 210px !important;
    margin: 0 0 -28px -34px !important;
  }
}

@media (max-width: 700px) {
  .rv-diary-landing .dl-chaos-card {
    grid-template-columns: 1fr !important;
    padding: 24px 20px 0 !important;
  }
  .rv-diary-landing .dl-old-tools {
    grid-template-columns: 1fr 1fr !important;
  }
  .rv-diary-landing .dl-chaos-laptop {
    grid-column: auto;
    min-height: 190px !important;
    margin: 4px -20px 0 !important;
  }
  .rv-diary-landing .dl-chaos-laptop img {
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.56) 23%, #000 42%) !important;
    mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.56) 23%, #000 42%) !important;
  }
  .rv-diary-landing .dl-chaos-laptop::after {
    background: linear-gradient(180deg, rgba(11,13,21,.72), rgba(11,13,21,.10) 46%, transparent 70%);
  }
}

/* =========================================================
   ReptiVibe 2.4.0-r15
   Requested scope only:
   - laptop photo without darkening/cropping;
   - Encyclopedia link;
   - larger, higher-contrast body text across the landing page.
   Main section headings are intentionally unchanged.
   ========================================================= */

.rv-diary-landing {
  /* Higher contrast on the light advertising page. */
  --dl-muted: #484f63 !important;
}

/* ---------- Header readable copy ---------- */

.rv-diary-landing .dl-nav {
  font-size: 14px !important;
  gap: 22px !important;
}
.rv-diary-landing .dl-nav a {
  color: #f7f8fc !important;
  opacity: .92 !important;
}
.rv-diary-landing .dl-brand small {
  color: #d0d5f1 !important;
  font-size: 12px !important;
}
.rv-diary-landing .dl-theme,
.rv-diary-landing .dl-login,
.rv-diary-landing .dl-start,
.rv-diary-landing .dl-btn {
  font-size: 14px !important;
}

/* ---------- Hero copy, heading untouched ---------- */

.rv-diary-landing .dl-hero-lead {
  font-size: 17px !important;
  line-height: 1.68 !important;
  color: rgba(255,255,255,.96) !important;
}
.rv-diary-landing .dl-hero-point {
  font-size: clamp(13px, .78vw, 14px) !important;
}
.rv-diary-landing .dl-hero-point b {
  color: rgba(255,255,255,.99) !important;
}

/* ---------- Shared section copy ---------- */

.rv-diary-landing .dl-section-subtitle {
  font-size: 16px !important;
  line-height: 1.65 !important;
  color: #454c60 !important;
}

/* Feature cards */
.rv-diary-landing .dl-feature-card h3 {
  font-size: 16px !important;
  line-height: 1.3 !important;
}
.rv-diary-landing .dl-feature-card > p {
  min-height: 58px !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  color: #4b5265 !important;
}
.rv-diary-landing .dl-record-card,
.rv-diary-landing .dl-growth-card,
.rv-diary-landing .dl-health-card,
.rv-diary-landing .dl-event-list,
.rv-diary-landing .dl-breeding-card {
  font-size: 12px !important;
  line-height: 1.45 !important;
}
.rv-diary-landing .dl-record-card span,
.rv-diary-landing .dl-growth-card b,
.rv-diary-landing .dl-health-card b,
.rv-diary-landing .dl-breeding-card b,
.rv-diary-landing .dl-event-list b {
  font-size: 13px !important;
}
.rv-diary-landing .dl-record-card strong {
  font-size: 12px !important;
}
.rv-diary-landing .dl-record-card small,
.rv-diary-landing .dl-health-card small,
.rv-diary-landing .dl-breeding-card small {
  color: #50576a !important;
}

/* How it works */
.rv-diary-landing .dl-how-grid h3 {
  font-size: 16px !important;
}
.rv-diary-landing .dl-how-grid p {
  font-size: 14px !important;
  line-height: 1.55 !important;
  color: #4a5164 !important;
}
.rv-diary-landing .dl-minute-card div {
  font-size: 17px !important;
}

/* Audience */
.rv-diary-landing .dl-audience-grid h3 {
  font-size: 16px !important;
  line-height: 1.3 !important;
}
.rv-diary-landing .dl-audience-grid ul {
  font-size: 14px !important;
  line-height: 1.55 !important;
  color: #4a5164 !important;
}

/* Species / suitability block */
.rv-diary-landing .dl-species-list {
  font-size: 14px !important;
  line-height: 1.5 !important;
}
.rv-diary-landing .dl-species-list p {
  font-size: 13px !important;
  line-height: 1.55 !important;
  color: #4a5164 !important;
}

/* Tariffs */
.rv-diary-landing .dl-billing-switch button {
  font-size: 13px !important;
}
.rv-diary-landing .dl-billing-switch span {
  font-size: 11px !important;
}
.rv-diary-landing .dl-plan h3 {
  font-size: 14px !important;
  line-height: 1.45 !important;
  color: #50576b !important;
}
.rv-diary-landing .dl-price small {
  font-size: 13px !important;
  color: #50576b !important;
}
.rv-diary-landing .dl-year-copy {
  font-size: 13px !important;
  line-height: 1.45 !important;
  color: #50576b !important;
}
.rv-diary-landing .dl-plan ul {
  font-size: 14px !important;
  line-height: 1.55 !important;
}
.rv-diary-landing .dl-plan-content > small {
  font-size: 11.5px !important;
  line-height: 1.45 !important;
  color: #555c70 !important;
}

/* ---------- "No more notes and tables" ---------- */

.rv-diary-landing .dl-chaos-card {
  min-height: 222px !important;
  grid-template-columns: .92fr .72fr 1.36fr !important;
  gap: 20px !important;
  padding: 30px 0 30px 36px !important;
}

.rv-diary-landing .dl-chaos-copy p {
  font-size: 14px !important;
  line-height: 1.62 !important;
  color: #e0e4ee !important;
}

.rv-diary-landing .dl-old-tools {
  font-size: 13.5px !important;
  line-height: 1.45 !important;
  color: #eef1f7 !important;
}

/*
  The login photograph is 1540x582, already panoramic.
  Show the complete photograph: no crop, no brightness reduction,
  no dark overlay over the image itself.
*/
.rv-diary-landing .dl-chaos-laptop {
  position: relative !important;
  align-self: center !important;
  width: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  line-height: 0 !important;
}

.rv-diary-landing .dl-chaos-laptop img {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1540 / 582 !important;
  object-fit: contain !important;
  object-position: center !important;
  display: block !important;
  filter: none !important;

  /* Only the left transition dissolves into the dark block. */
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0,0,0,.18) 5%,
    rgba(0,0,0,.48) 11%,
    rgba(0,0,0,.78) 17%,
    #000 25%,
    #000 100%
  ) !important;
  mask-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0,0,0,.18) 5%,
    rgba(0,0,0,.48) 11%,
    rgba(0,0,0,.78) 17%,
    #000 25%,
    #000 100%
  ) !important;
}

/* Narrow soft transition only, not a dark layer over the photo. */
.rv-diary-landing .dl-chaos-laptop::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 auto 0 0 !important;
  width: 24% !important;
  pointer-events: none !important;
  background: linear-gradient(
    90deg,
    rgba(11,13,21,.24) 0%,
    rgba(11,13,21,.13) 35%,
    rgba(11,13,21,.05) 67%,
    transparent 100%
  ) !important;
}

/* Caption removed from HTML; defensive hide for stale markup/cache. */
.rv-diary-landing .dl-chaos-laptop figcaption {
  display: none !important;
}

/* FAQ */
.rv-diary-landing .dl-faq-grid summary {
  min-height: 62px !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  color: #24293a !important;
}
.rv-diary-landing .dl-faq-grid p {
  font-size: 14px !important;
  line-height: 1.65 !important;
  color: #4a5164 !important;
}

/* Final CTA body copy */
.rv-diary-landing .dl-final-inner p {
  font-size: 14px !important;
  line-height: 1.55 !important;
  color: #e1e5ee !important;
}
.rv-diary-landing .dl-final-inner ul {
  font-size: 13.5px !important;
  line-height: 1.55 !important;
  color: #eef1f7 !important;
}

/* Footer */
.rv-diary-landing .dl-footer-inner {
  font-size: 12px !important;
}
.rv-diary-landing .dl-footer {
  color: #d0d5e1 !important;
}
.rv-diary-landing .dl-footer-brand > span {
  color: #aeb6c6 !important;
}

/* ---------- Responsive typography ---------- */

@media (max-width: 1099px) {
  .rv-diary-landing .dl-nav {
    font-size: 13px !important;
    gap: 14px !important;
  }

  .rv-diary-landing .dl-chaos-card {
    grid-template-columns: 1fr 1fr !important;
    padding: 28px 28px 0 !important;
  }

  .rv-diary-landing .dl-chaos-laptop {
    grid-column: 1 / -1 !important;
    width: calc(100% + 56px) !important;
    margin: 4px -28px 0 !important;
  }

  .rv-diary-landing .dl-chaos-laptop img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1540 / 582 !important;
    object-fit: contain !important;
    -webkit-mask-image: linear-gradient(
      180deg,
      transparent 0%,
      rgba(0,0,0,.34) 7%,
      rgba(0,0,0,.72) 15%,
      #000 24%,
      #000 100%
    ) !important;
    mask-image: linear-gradient(
      180deg,
      transparent 0%,
      rgba(0,0,0,.34) 7%,
      rgba(0,0,0,.72) 15%,
      #000 24%,
      #000 100%
    ) !important;
  }

  .rv-diary-landing .dl-chaos-laptop::after {
    inset: 0 0 auto 0 !important;
    width: 100% !important;
    height: 22% !important;
    background: linear-gradient(
      180deg,
      rgba(11,13,21,.20) 0%,
      rgba(11,13,21,.08) 50%,
      transparent 100%
    ) !important;
  }
}

@media (max-width: 820px) {
  .rv-diary-landing .dl-nav {
    font-size: 13px !important;
  }
}

@media (max-width: 700px) {
  .rv-diary-landing .dl-hero-lead {
    font-size: 16px !important;
  }

  .rv-diary-landing .dl-feature-card > p,
  .rv-diary-landing .dl-how-grid p,
  .rv-diary-landing .dl-audience-grid ul,
  .rv-diary-landing .dl-faq-grid p,
  .rv-diary-landing .dl-final-inner p {
    font-size: 13.5px !important;
  }

  .rv-diary-landing .dl-chaos-card {
    grid-template-columns: 1fr !important;
    padding: 24px 20px 0 !important;
  }

  .rv-diary-landing .dl-chaos-laptop {
    grid-column: auto !important;
    width: calc(100% + 40px) !important;
    margin: 6px -20px 0 !important;
  }

  .rv-diary-landing .dl-chaos-laptop img {
    height: auto !important;
    aspect-ratio: 1540 / 582 !important;
    object-fit: contain !important;
  }
}

/* =========================================================
   ReptiVibe 2.4.0-r17
   Compact main-page header, stable PWA buttons, brighter copy.
   Major H1/H2 sizes remain unchanged.
   ========================================================= */

/* ---------- Header: same visual scale as public homepage ---------- */

.rv-diary-landing .dl-header-inner {
  width: min(1400px, calc(100% - 40px)) !important;
  min-height: 72px !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 20px !important;
}

.rv-diary-landing .dl-brand {
  min-width: 0 !important;
  gap: 11px !important;
}

.rv-diary-landing .dl-brand img {
  width: 42px !important;
  height: 42px !important;
  flex: 0 0 42px !important;
}

.rv-diary-landing .dl-brand > span {
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: .55px !important;
  color: #fff !important;
  text-shadow: 0 0 18px rgba(226,190,91,.14) !important;
}

.rv-diary-landing .dl-brand > span > span {
  color: #d7aa43 !important;
  -webkit-text-fill-color: #d7aa43 !important;
}

.rv-diary-landing .dl-brand small {
  margin: 0 !important;
  padding: 4px 7px !important;
  border: 1px solid rgba(201,168,76,.20) !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: #9a9ab0 !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
}

/* Exact homepage nav typography/color scale. */
.rv-diary-landing .dl-nav {
  min-width: 0 !important;
  display: flex !important;
  justify-content: center !important;
  gap: 2px !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

.rv-diary-landing .dl-nav a {
  padding: 11px 10px !important;
  border-radius: 10px !important;
  color: #9a9ab0 !important;
  opacity: 1 !important;
  white-space: nowrap !important;
}

.rv-diary-landing .dl-nav a:hover {
  color: #e8d48b !important;
  background: rgba(201,168,76,.08) !important;
}

.rv-diary-landing .dl-header-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 7px !important;
  min-width: 0 !important;
}

/* Compact header buttons so the whole header fits cleanly. */
.rv-diary-landing .dl-header-actions .dl-login,
.rv-diary-landing .dl-header-actions .dl-start,
.rv-diary-landing .dl-header-actions .dl-header-install {
  min-height: 40px !important;
  height: 40px !important;
  border-radius: 10px !important;
  padding: 0 11px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

.rv-diary-landing .dl-header-actions .dl-login {
  min-width: 74px !important;
}

.rv-diary-landing .dl-header-actions .dl-start {
  min-width: 118px !important;
}

.rv-diary-landing .dl-header-actions .dl-header-install {
  min-width: 0 !important;
  padding-inline: 10px !important;
  gap: 6px !important;
}

/* ---------- Install buttons: exact same violet as Start Free ---------- */

/*
   pwa.css contains:
   html[data-theme="light"] .install-app-button { ... !important }
   That rule is more specific than the previous landing selector.
   The selectors below intentionally outrank it.
*/
html body.rv-diary-landing .dl-install-app.install-app-button,
html[data-theme="light"] body.rv-diary-landing .dl-install-app.install-app-button,
html[data-theme="dark"] body.rv-diary-landing .dl-install-app.install-app-button {
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, #5b4eff 0%, #3428e9 100%) !important;
  color: #fff !important;
  box-shadow: 0 10px 30px rgba(75,60,255,.28) !important;
  text-shadow: none !important;
}

html body.rv-diary-landing .dl-install-app.install-app-button:hover,
html[data-theme="light"] body.rv-diary-landing .dl-install-app.install-app-button:hover,
html[data-theme="dark"] body.rv-diary-landing .dl-install-app.install-app-button:hover {
  border-color: transparent !important;
  background: linear-gradient(135deg, #665aff 0%, #4034f0 100%) !important;
  color: #fff !important;
  box-shadow: 0 13px 34px rgba(75,60,255,.34) !important;
}

.rv-diary-landing .dl-install-app {
  min-height: 40px !important;
  padding: 0 13px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

/* Force both icons visible, including the below-fold final CTA button. */
.rv-diary-landing .dl-install-app .install-button-shield,
.rv-diary-landing .dl-install-app .install-button-download {
  position: static !important;
  display: block !important;
  flex: 0 0 auto !important;
  opacity: 1 !important;
  visibility: visible !important;
  object-fit: contain !important;
  filter: brightness(0) invert(1) !important;
}

.rv-diary-landing .dl-install-app .install-button-shield {
  width: 19px !important;
  height: 19px !important;
}

.rv-diary-landing .dl-install-app .install-button-download {
  width: 17px !important;
  height: 17px !important;
  padding-left: 6px !important;
  border-left: 1px solid rgba(255,255,255,.28) !important;
  box-sizing: content-box !important;
}

/* Hero install button remains below the two main CTAs. */
.rv-diary-landing .dl-hero-install-row {
  display: flex !important;
  margin-top: 12px !important;
}

.rv-diary-landing .dl-hero-install {
  min-width: 214px !important;
  min-height: 42px !important;
  font-size: 13px !important;
}

/* ---------- Unified primary buttons ---------- */

.rv-diary-landing .dl-start,
.rv-diary-landing .dl-btn.primary,
.rv-diary-landing .dl-btn.plan-primary,
.rv-diary-landing .dl-btn.plan-secondary {
  border: 1px solid transparent !important;
  background: linear-gradient(135deg, #5b4eff 0%, #3428e9 100%) !important;
  color: #fff !important;
  box-shadow: 0 10px 30px rgba(75,60,255,.28) !important;
}

.rv-diary-landing .dl-btn.plan-secondary {
  width: 100% !important;
}

/* ---------- Feeding mockup: thawed food is ordinary text ---------- */

.rv-diary-landing .dl-feeding-state {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #343b50 !important;
}

/* ---------- Brighter / more contrasty grey copy ---------- */

.rv-diary-landing {
  --dl-muted: #343b50 !important;
}

.rv-diary-landing .dl-section-subtitle,
.rv-diary-landing .dl-feature-card > p,
.rv-diary-landing .dl-how-grid p,
.rv-diary-landing .dl-audience-grid ul,
.rv-diary-landing .dl-species-list,
.rv-diary-landing .dl-species-list p,
.rv-diary-landing .dl-plan h3,
.rv-diary-landing .dl-price small,
.rv-diary-landing .dl-year-copy,
.rv-diary-landing .dl-plan-content > small,
.rv-diary-landing .dl-record-card small,
.rv-diary-landing .dl-health-card small,
.rv-diary-landing .dl-breeding-card small,
.rv-diary-landing .dl-faq-grid p {
  color: #343b50 !important;
}

.rv-diary-landing .dl-section-subtitle {
  font-size: 17px !important;
  line-height: 1.68 !important;
}

.rv-diary-landing .dl-feature-card > p,
.rv-diary-landing .dl-how-grid p,
.rv-diary-landing .dl-audience-grid ul,
.rv-diary-landing .dl-plan ul,
.rv-diary-landing .dl-faq-grid p {
  font-size: 15.5px !important;
  line-height: 1.62 !important;
}

.rv-diary-landing .dl-feature-card h3,
.rv-diary-landing .dl-how-grid h3,
.rv-diary-landing .dl-audience-grid h3 {
  font-size: 18px !important;
}

/* Dark blocks need light grey, not washed-out mid-grey. */
.rv-diary-landing .dl-chaos-copy p,
.rv-diary-landing .dl-old-tools,
.rv-diary-landing .dl-final-inner p,
.rv-diary-landing .dl-final-inner ul {
  color: #f0f2f7 !important;
}

/* ---------- Laptop remains full height, unchanged from the accepted r16 intent ---------- */

.rv-diary-landing .dl-chaos-card {
  min-height: 236px !important;
  padding: 30px 0 30px 36px !important;
  align-items: stretch !important;
}

.rv-diary-landing .dl-chaos-laptop {
  position: relative !important;
  align-self: stretch !important;
  min-height: calc(100% + 60px) !important;
  height: calc(100% + 60px) !important;
  margin: -30px 0 -30px 0 !important;
  overflow: hidden !important;
}

.rv-diary-landing .dl-chaos-laptop img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: auto !important;
  object-fit: cover !important;
  object-position: center !important;
  filter: none !important;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0,0,0,.18) 4%,
    rgba(0,0,0,.52) 9%,
    rgba(0,0,0,.82) 14%,
    #000 20%,
    #000 100%
  ) !important;
  mask-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0,0,0,.18) 4%,
    rgba(0,0,0,.52) 9%,
    rgba(0,0,0,.82) 14%,
    #000 20%,
    #000 100%
  ) !important;
}

.rv-diary-landing .dl-chaos-laptop::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 auto 0 0 !important;
  width: 19% !important;
  height: 100% !important;
  pointer-events: none !important;
  background: linear-gradient(90deg, rgba(11,13,21,.18), rgba(11,13,21,.08) 48%, transparent 100%) !important;
}

/* ---------- Final CTA: stable button column, icons always visible ---------- */

.rv-diary-landing .dl-final-inner {
  grid-template-columns: minmax(0,1fr) 270px 190px !important;
  gap: 18px !important;
  align-items: center !important;
  padding-left: 34px !important;
}

.rv-diary-landing .dl-final-message {
  position: relative !important;
  z-index: 3 !important;
  display: grid !important;
  grid-template-columns: 96px minmax(0,1fr) !important;
  gap: 20px !important;
  align-items: center !important;
}

.rv-diary-landing .dl-final-logo {
  position: static !important;
  width: 96px !important;
  height: 96px !important;
  object-fit: contain !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
}

.rv-diary-landing .dl-final-actions {
  position: relative !important;
  z-index: 5 !important;
  width: 270px !important;
  min-width: 270px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 9px !important;
}

.rv-diary-landing .dl-final-actions .dl-btn,
.rv-diary-landing .dl-final-actions .dl-install-app {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 42px !important;
  height: 42px !important;
  margin: 0 !important;
  padding: 0 12px !important;
  border-radius: 10px !important;
  font-size: 12.5px !important;
  line-height: 1 !important;
}

.rv-diary-landing .dl-final-actions .dl-install-app .install-button-shield {
  width: 19px !important;
  height: 19px !important;
}

.rv-diary-landing .dl-final-actions .dl-install-app .install-button-download {
  width: 17px !important;
  height: 17px !important;
}

.rv-diary-landing .dl-final-reptile {
  z-index: 1 !important;
  pointer-events: none !important;
}

/* ---------- Responsive ---------- */

@media (max-width: 1320px) {
  .rv-diary-landing .dl-header-inner {
    gap: 14px !important;
  }

  .rv-diary-landing .dl-nav a {
    padding-inline: 8px !important;
  }

  .rv-diary-landing .dl-brand small {
    display: none !important;
  }
}

@media (max-width: 1180px) {
  .rv-diary-landing .dl-header-install {
    display: none !important;
  }

  .rv-diary-landing .dl-nav {
    font-size: 11.5px !important;
  }
}

@media (max-width: 1099px) {
  .rv-diary-landing .dl-chaos-laptop {
    min-height: 230px !important;
    height: 230px !important;
    margin: 8px -28px -30px !important;
  }

  .rv-diary-landing .dl-chaos-laptop img {
    object-fit: cover !important;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.36) 7%, rgba(0,0,0,.78) 14%, #000 22%, #000 100%) !important;
    mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.36) 7%, rgba(0,0,0,.78) 14%, #000 22%, #000 100%) !important;
  }

  .rv-diary-landing .dl-final-inner {
    grid-template-columns: 1fr 250px !important;
    padding-right: 175px !important;
  }

  .rv-diary-landing .dl-final-actions {
    width: 250px !important;
    min-width: 250px !important;
  }
}

@media (max-width: 820px) {
  .rv-diary-landing .dl-final-inner {
    grid-template-columns: 1fr !important;
    padding: 26px 145px 26px 26px !important;
  }

  .rv-diary-landing .dl-final-actions {
    width: min(100%, 300px) !important;
    min-width: 0 !important;
  }
}

@media (max-width: 700px) {
  .rv-diary-landing .dl-final-inner {
    padding: 24px 20px 150px !important;
  }

  .rv-diary-landing .dl-final-message {
    grid-template-columns: 72px minmax(0,1fr) !important;
    gap: 14px !important;
  }

  .rv-diary-landing .dl-final-logo {
    width: 72px !important;
    height: 72px !important;
  }

  .rv-diary-landing .dl-final-actions,
  .rv-diary-landing .dl-hero-install-row,
  .rv-diary-landing .dl-hero-install {
    width: 100% !important;
    max-width: none !important;
  }
}

@media (display-mode: standalone) {
  .rv-diary-landing [data-pwa-install] {
    display: none !important;
  }
}

/* ReptiVibe 2.4.0-r19-clean
   Clean rebuild from r17 of the user's last request only. */

.rv-diary-landing .dl-header-actions {
  gap: 9px !important;
}

/* Indigo halo */
.rv-diary-landing .dl-feature-card,
.rv-diary-landing .dl-how-grid > article,
.rv-diary-landing .dl-minute-card,
.rv-diary-landing .dl-audience-grid > article,
.rv-diary-landing .dl-species-list,
.rv-diary-landing .dl-plan,
.rv-diary-landing .dl-faq-grid details,
.rv-diary-landing .dl-chaos-card {
  border: 1px solid rgba(79,70,229,.43) !important;
  box-shadow:
    0 0 0 1px rgba(99,102,241,.08),
    0 10px 26px rgba(67,56,202,.08),
    0 0 22px rgba(79,70,229,.13) !important;
}

.rv-diary-landing .dl-feature-card:hover,
.rv-diary-landing .dl-how-grid > article:hover,
.rv-diary-landing .dl-audience-grid > article:hover,
.rv-diary-landing .dl-plan:hover,
.rv-diary-landing .dl-faq-grid details:hover {
  border-color: rgba(79,70,229,.66) !important;
  box-shadow:
    0 0 0 1px rgba(99,102,241,.13),
    0 12px 32px rgba(67,56,202,.11),
    0 0 28px rgba(79,70,229,.18) !important;
}

/* Feature icons */
.rv-diary-landing .dl-feature-title {
  display: flex !important;
  align-items: center !important;
  gap: 11px !important;
}
.rv-diary-landing .dl-card-icon {
  width: 38px !important;
  height: 38px !important;
  flex: 0 0 38px !important;
  display: inline-grid !important;
  place-items: center !important;
  border: 1px solid rgba(79,70,229,.26) !important;
  border-radius: 11px !important;
  background: linear-gradient(145deg, rgba(99,102,241,.12), rgba(79,70,229,.045)) !important;
  color: #4f46e5 !important;
  box-shadow: inset 0 0 14px rgba(99,102,241,.06), 0 0 14px rgba(79,70,229,.08) !important;
}
.rv-diary-landing .dl-card-icon svg {
  width: 23px !important;
  height: 23px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

/* Species */
.rv-diary-landing .dl-species-list {
  padding: 22px 20px !important;
  border-radius: 17px !important;
  background: linear-gradient(145deg, #e7e9f5 0%, #dfe2f0 100%) !important;
  color: #23293d !important;
  font-size: 16px !important;
  line-height: 1.45 !important;
}
.rv-diary-landing .dl-species-list > span {
  min-height: 42px !important;
  display: flex !important;
  align-items: center !important;
  gap: 11px !important;
  padding: 6px 8px !important;
  border-radius: 11px !important;
  color: #23293d !important;
  font-size: 16px !important;
  font-weight: 700 !important;
}
.rv-diary-landing .dl-species-list > span:hover {
  background: rgba(255,255,255,.40) !important;
}
.rv-diary-landing .dl-species-icon {
  width: 35px !important;
  height: 35px !important;
  flex: 0 0 35px !important;
  display: inline-grid !important;
  place-items: center !important;
  border: 1px solid rgba(79,70,229,.26) !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,.56) !important;
  color: #4338ca !important;
  box-shadow: 0 4px 12px rgba(67,56,202,.08) !important;
}
.rv-diary-landing .dl-species-icon svg {
  width: 22px !important;
  height: 22px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.7 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}
.rv-diary-landing .dl-species-list p {
  margin-top: 12px !important;
  padding-top: 13px !important;
  border-top: 1px solid rgba(79,70,229,.15) !important;
  color: #3d455b !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
}

/* Tariffs align buttons */
.rv-diary-landing .dl-plan-grid {
  align-items: stretch !important;
}
.rv-diary-landing .dl-plan {
  height: 100% !important;
}
.rv-diary-landing .dl-plan-content {
  height: 100% !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}
.rv-diary-landing .dl-plan-content > ul {
  flex: 1 1 auto !important;
  margin-bottom: 20px !important;
}
.rv-diary-landing .dl-plan-content > .dl-btn {
  margin-top: auto !important;
  min-height: 44px !important;
  height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Tighter section rhythm */
.rv-diary-landing .dl-section {
  padding-top: 60px !important;
  padding-bottom: 60px !important;
}
.rv-diary-landing .dl-heading {
  margin-bottom: 22px !important;
}
.rv-diary-landing .dl-section-subtitle {
  margin-top: -8px !important;
  margin-bottom: 24px !important;
}
.rv-diary-landing .dl-tariffs .dl-heading,
.rv-diary-landing .dl-faq-section .dl-heading {
  margin-bottom: 20px !important;
}

@media (max-width: 820px) {
  .rv-diary-landing .dl-section {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
  .rv-diary-landing .dl-heading {
    margin-bottom: 18px !important;
  }
  .rv-diary-landing .dl-species-list,
  .rv-diary-landing .dl-species-list > span {
    font-size: 15px !important;
  }
}