/* Final responsive layer — intentionally loaded after the desktop reference. */
.nav-toggle,
.mobile-lang-switch {
  display: none;
}

/* Decorative, absolutely positioned artwork must never create a page-wide scroll rail. */
html,
body {
  overflow-x: clip;
}

@media (min-width: 768px) and (max-width: 1199px) {
  .page-shell { width: min(calc(100% - 48px), var(--max-width)); }
  .hero { padding-top: 32px; }
  .hero-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: "intro showcase";
    gap: clamp(24px, 3vw, 36px);
    align-items: stretch;
    min-height: 540px;
  }
  .hero-intro { align-self: center; padding-top: 0; }
  .hero-showcase { position: relative; inset: auto; }
  .hero-stage { position: relative; inset: auto; height: 100%; min-height: 540px; border-radius: 36px; }
  .hero-photo { transform: none; -webkit-mask-image: none; mask-image: none; object-position: 63% 50%; }
  .hero-text { white-space: normal; }
  html[lang="fr"] .hero-intro h1 { max-width: none; font-size: clamp(1.9rem, 4vw, 2rem); line-height: 0.95; letter-spacing: -0.065em; }
  .section { padding-top: 80px; padding-bottom: 80px; }
}

@media (max-width: 1024px) {
  .site-header {
    position: sticky;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 10px;
    min-height: 64px;
    padding: 10px 12px;
    border-radius: 24px;
  }
  .site-header .brand { min-width: 0; }
  .site-header .brand-mark { width: 38px; height: 38px; border-radius: 13px; }
  .site-header .brand-name { font-size: 1rem; }
  .site-header .header-actions { width: auto; gap: 0; }
  .site-header .header-actions .lang-switch { display: none; }
  .site-header .button-header { min-height: 44px; padding: 0 14px; font-size: 0.82rem; white-space: nowrap; }
  .nav-toggle {
    display: grid;
    width: 44px;
    height: 44px;
    place-content: center;
    gap: 5px;
    padding: 0;
    border: 1px solid var(--raddox-line);
    border-radius: 50%;
    background: var(--raddox-surface);
    color: var(--raddox-text);
    cursor: pointer;
  }
  .nav-toggle span { display: block; width: 17px; height: 1.5px; border-radius: 999px; background: currentColor; transition: transform 180ms ease, opacity 180ms ease; }
  .site-header.is-nav-open .nav-toggle span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .site-header.is-nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
  .site-header.is-nav-open .nav-toggle span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
  .site-header .site-nav {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    left: 0;
    z-index: 2;
    display: none;
    width: auto;
    padding: 10px;
    border: 1px solid var(--raddox-line);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 18px 40px rgba(20, 23, 25, 0.12);
    backdrop-filter: blur(18px);
  }
  .site-header.is-nav-open .site-nav { display: grid; }
  .site-header .site-nav a { display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 14px; color: var(--raddox-text); font-size: 1rem; }
  .site-header .site-nav a:hover,
  .site-header .site-nav a:focus-visible { background: var(--raddox-blue-soft); }
  .site-header .mobile-lang-switch { display: inline-flex; justify-self: start; margin: 6px 2px 2px; }

  /* Compact navigation keeps only the brand and language choice in view. */
  .site-header { display: flex; justify-content: space-between; }
  .site-header .site-nav,
  .site-header.is-nav-open .site-nav,
  .site-header .nav-toggle { display: none; }
  .site-header .header-actions { width: auto; margin-left: auto; }
  .site-header .header-actions .lang-switch { display: inline-flex; gap: 2px; padding: 3px; }
  .site-header .header-actions .lang-btn { min-width: 38px; min-height: 38px; padding: 0 8px; }
  .site-header .button-header { display: none; }
}

@media (max-width: 767px) {
  html, body { max-width: 100%; overflow-x: clip; }
  body { overflow-x: clip; }
  .page-shell { width: 100%; padding: 8px 0 32px; }
  .site-header { top: 8px; width: calc(100% - 24px); margin: 0 auto; }
  .site-header .button-header { padding: 0 12px; font-size: 0.75rem; }

  .hero { padding: 30px 20px 0; }
  .hero-grid { display: flex; flex-direction: column; gap: 28px; min-height: 0; }
  .hero-intro { align-self: auto; padding-top: 0; }
  .hero-intro .eyebrow { margin-bottom: 13px; font-size: 0.69rem; }
  .hero-intro h1 { max-width: none; font-size: clamp(2.75rem, 12vw, 3.05rem); line-height: 0.94; text-wrap: balance; }
  html[lang="fr"] .hero-intro h1 { font-size: clamp(1.9rem, 8vw, 2.2rem); letter-spacing: -0.07em; }
  .hero-manifesto { max-width: none; margin-top: 19px; }
  .hero-text { max-width: 34ch; font-size: 0.93rem; line-height: 1.5; white-space: normal; }
  .hero-actions { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 22px; }
  .hero-actions .button { width: 100%; min-height: 52px; }
  .hero-showcase { position: relative; inset: auto; width: 100%; }
  .hero-stage { position: relative; inset: auto; min-height: 0; aspect-ratio: 16 / 9; border-radius: 28px; }
  .hero-photo { position: absolute; transform: none; -webkit-mask-image: none; mask-image: none; object-position: 62% 46%; }
  .snapshot-ribbon { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; min-height: 0; margin: 26px 0 0; }
  .snapshot-ribbon li,
  .snapshot-ribbon li:first-child,
  .snapshot-ribbon li:last-child { min-height: 0; justify-content: flex-start; gap: 6px; padding: 0 10px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
  .snapshot-ribbon li:first-child { padding-left: 0; }
  .snapshot-ribbon li:last-child { padding-right: 0; }
  .snapshot-ribbon li + li::before { top: 0; display: block; height: 100%; transform: none; }
  .snapshot-ribbon span { margin-bottom: 5px; font-size: 0.52rem; line-height: 1.2; letter-spacing: 0.07em; }
  .snapshot-ribbon strong { max-width: none; font-size: 0.72rem; line-height: 1.3; text-wrap: pretty; }
  .snapshot-ribbon .snapshot-stat { font-size: clamp(1.23rem, 6.3vw, 1.45rem); }
  .snapshot-ribbon .snapshot-stat-source { margin-top: 0; font-size: 0.42rem; line-height: 1.15; letter-spacing: 0.025em; }
  .snapshot-caption { font-size: 0.62rem; line-height: 1.3; }
  .snapshot-disclaimer { max-width: none; margin-top: 14px; padding-top: 9px; border-top: 1px solid var(--raddox-line); font-size: 0.56rem; line-height: 1.35; }

  main > section.hero { padding-bottom: 0; }
  .section, main > section.section { padding: 68px 20px; }
  .opportunity-panel { display: block; padding: 42px 20px 38px; }
  .opportunity-panel::before { display: none; }
  .opportunity-copy-inner { margin-right: -8px; }
  .opportunity-title { font-size: clamp(1.95rem, 8.9vw, 2.3rem); line-height: 0.98; }
  .data-foundation-heading h2 { font-size: clamp(2.1rem, 9.7vw, 2.55rem); line-height: 0.98; }
  .problem-grid { display: block; margin-top: 32px; }
  .feature-card-opportunity { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 14px; min-height: 0; padding: 20px 0; border: 0; border-top: 1px solid var(--raddox-line); border-radius: 0; background: transparent; box-shadow: none; }
  .feature-card-opportunity .card-index { width: 36px; height: 36px; font-size: 0.65rem; }
  .feature-card-opportunity .feature-card-icon { display: none; }
  .feature-card-copy h3 { margin-bottom: 8px; font-size: 1.01rem; line-height: 1.15; }
  .feature-card-copy p { max-width: none; font-size: 0.9rem; line-height: 1.47; }

  .bento-section { padding-top: 34px !important; padding-bottom: 68px !important; }
  .product-status-heading { margin-bottom: 0 !important; }
  .product-status-hero { display: grid; grid-template-areas: "intro" "media" "notes"; gap: 28px; }
  .product-status-copy { display: contents; }
  .product-status-copy::before, .product-status-copy::after { display: none; }
  .product-status-intro { grid-area: intro; max-width: none; margin: 0; padding: 0; }
  .product-status-intro h2 { max-width: none; margin-bottom: 11px; font-size: clamp(1.72rem, 7.5vw, 1.95rem); }
  .product-status-intro > p { font-size: 1rem; }
  .product-status-detail { max-width: none; margin-top: 9px; font-size: clamp(0.68rem, 3.1vw, 0.77rem) !important; }
  html[lang="en"] .product-status-intro h2,
  html[lang="en"] .product-status-detail { white-space: nowrap; }
  .product-status-media { grid-area: media; min-height: 260px; }
  .product-status-media::before { top: -10%; left: 50%; width: 110%; }
  .product-status-media img { width: 112%; margin-left: -7%; }
  .product-status-notifications { grid-area: notes; display: grid; gap: 10px; min-height: 0; }
  .status-note, .status-note-home, .status-note-movement, .status-note-walk { position: relative; top: auto; right: auto; bottom: auto; left: auto; width: 100%; min-height: 70px; transform: none; }
  .status-note-copy strong { font-size: 0.88rem; }

  .product-carousel { width: 100%; margin-top: 34px; padding-bottom: 0; overflow: hidden; }
  .product-carousel-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; gap: 4px; width: 100%; margin: 0 0 18px; padding: 0; overflow: visible; }
  .product-carousel-tabs::-webkit-scrollbar, .roadmap-editorial-key::-webkit-scrollbar { display: none; }
  .product-carousel-tab { min-width: 0; min-height: 44px; justify-content: center; gap: 0; padding: 5px 4px; font-size: clamp(0.54rem, 2.15vw, 0.64rem); line-height: 1.12; text-align: center; }
  .product-carousel-tab svg { display: none; }
  .product-carousel-tab.is-active { padding: 5px 4px; }
  .product-carousel-stage-wrap { padding: 0; }
  .product-carousel-viewport { border-radius: 24px; touch-action: pan-y; }
  .product-carousel-slide { aspect-ratio: 16 / 9; }
  .product-carousel-arrow { top: auto; bottom: 14px; width: 44px; height: 44px; }
  .product-carousel-arrow-prev { left: 14px; }
  .product-carousel-arrow-next { right: 14px; }
  .live-location-overlay { top: auto; right: 14px; bottom: 18px; left: auto; width: min(230px, 69%); padding: 13px 14px; border-radius: 18px; transform: scale(0.42); transform-origin: right bottom; }
  .live-location-overlay-top { gap: 8px; }
  .live-location-dog, .safe-zone-label { font-size: 0.92rem; }
  .live-location-overlay-bottom { margin-top: 8px; font-size: 0.75rem; }
  .safe-zone-overlay { top: auto; right: 14px; bottom: 18px; left: auto; width: min(225px, 67%); padding: 13px 14px; }
  .safe-zone-details-overlay { display: none; }
  .product-carousel-slide-activity .daily-activity-summary,
  .product-carousel-slide-activity .daily-sleep-summary { width: 62%; right: 4%; left: auto; transform: scale(0.3); }
  .product-carousel-slide-activity .daily-activity-summary { top: 4%; }
  .product-carousel-slide-activity .daily-sleep-summary { right: 4%; bottom: 1%; }
  .product-carousel-slide-activity .daily-activity-status { display: none; }
  .walk-history-overlay { top: auto; right: 15px; bottom: 18px; width: min(230px, 69%); padding: 15px; border-radius: 19px; transform: scale(0.42); transform-origin: right bottom; }
  .walk-history-overlay-duration, .walk-history-overlay-meta, .walk-history-overlay-link { margin-left: 0; }
  .product-carousel-companion { position: relative; top: auto; right: auto; left: auto; display: grid; grid-template-columns: 118px minmax(0, 1fr); align-items: end; height: 196px; margin-top: 14px; }
  .live-location-phone-mockup, .live-location-phone-mockup[data-screen="2"] { position: relative; bottom: -5px; left: 2px; width: 118px; }
  .product-carousel-info-banner { position: relative; top: auto; right: auto; bottom: auto; left: auto; width: 100%; height: 158px; border-radius: 22px; }
  .insights-banner-copy { width: 70%; padding: 18px; }
  .insights-banner-copy h3 { font-size: 1.05rem; }
  .insights-banner-description { font-size: 0.69rem; }

  .platform-showcase { gap: 14px; margin-top: 28px; }
  .platform-intro { min-height: 0; padding: 0 2px 16px; }
  .platform-intro h2 { max-width: 13.5ch; font-size: clamp(1.98rem, 8.7vw, 2.35rem); letter-spacing: -0.065em; }
  .platform-intro p { max-width: 33ch; margin-top: 14px; font-size: 0.94rem; }
  .platform-column-left { grid-template-rows: auto 184px 246px; }
  .platform-column-center { grid-template-rows: 116px 400px; }
  .platform-column-right { grid-template-rows: 378px 300px; }
  .data-foundation-section { padding: 70px 20px 42px; }
  .data-foundation-heading { gap: 20px; padding-bottom: 28px; }
  .data-foundation-summary { font-size: 1rem; line-height: 1.55; }

  section.solution-roadmap, section.solution-roadmap + section.market-section { padding: 70px 20px; }
  .roadmap-editorial-heading { gap: 22px; }
  .roadmap-editorial-summary { font-size: 1rem; line-height: 1.5; }
  .roadmap-editorial-key { display: flex; gap: 10px; width: calc(100% + 20px); max-width: none; margin-right: -20px; padding-right: 20px; overflow-x: auto; scrollbar-width: none; }
  .roadmap-editorial-key > * { flex: 0 0 122px; }
  .roadmap-editorial-item { grid-template-columns: 44px minmax(0, 1fr); gap: 12px; }
  .roadmap-editorial-list::before { left: 16px; }
  .roadmap-editorial-marker { width: 34px; height: 34px; }
  .roadmap-editorial-phase, .roadmap-editorial-item-reversed .roadmap-editorial-phase { gap: 22px; padding-bottom: 54px; }
  .roadmap-editorial-item + .roadmap-editorial-item .roadmap-editorial-phase { padding-top: 46px; }
  .roadmap-editorial-copy h3 { max-width: 11ch; font-size: clamp(1.95rem, 9vw, 2.4rem); }
  .roadmap-editorial-copy > p { font-size: 0.94rem; line-height: 1.5; }
  .roadmap-editorial-features { gap: 9px 13px; }
  .roadmap-editorial-features li { font-size: 0.76rem; }
  .roadmap-editorial-media { height: min(105vw, 410px); }
  .roadmap-editorial-phase-insights .roadmap-phase2-vitals,
  .roadmap-editorial-phase-insights .roadmap-phase2-behaviours,
  .roadmap-editorial-phase-insights .roadmap-phase2-voice,
  .roadmap-editorial-phase-insights .roadmap-phase2-controls,
  .roadmap-editorial-phase-insights .roadmap-phase2-connectors { display: none; }
  .roadmap-editorial-phase-professional .roadmap-editorial-media-professional { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; height: auto; min-height: 0; padding-top: 270px; overflow: hidden; }
  .roadmap-editorial-phase-professional .roadmap-phase3-topography,
  .roadmap-editorial-phase-professional .roadmap-phase3-mountains { top: 0; bottom: auto; height: 270px; }
  .roadmap-editorial-phase-professional .roadmap-phase3-card { position: static; z-index: 5; grid-template-columns: 34px minmax(0, 1fr); gap: 8px; width: auto; padding: 11px 9px; border-radius: 14px; }
  .roadmap-editorial-phase-professional .roadmap-phase3-card-icon { width: 32px; height: 32px; }
  .roadmap-editorial-phase-professional .roadmap-phase3-card strong { font-size: 0.7rem; }
  .roadmap-editorial-phase-professional .roadmap-phase3-card small { font-size: 0.61rem; line-height: 1.25; }
  .roadmap-editorial-phase-professional .roadmap-phase3-radio-label,
  .roadmap-editorial-phase-professional .roadmap-phase3-bluetooth-label,
  .roadmap-editorial-phase-professional .roadmap-phase3-footer-label { display: none; }
  .roadmap-editorial-item-phase4 .roadmap-editorial-phase { gap: 24px; }
  .roadmap-phase4-points { grid-template-columns: 1fr; gap: 18px; }

  #market { padding-right: 20px; padding-left: 20px; }
  #market .market-dashboard-title { font-size: clamp(2.15rem, 10vw, 2.6rem); }
  #team.team-section { padding-right: 20px; padding-left: 20px; }
  .team-title { font-size: clamp(2.1rem, 9.8vw, 2.6rem); }
  main > section.ask-section { padding: 70px 20px; }
  .ask-editorial-heading h2 { font-size: clamp(1.85rem, 8.8vw, 2.35rem); line-height: 1.08; }
  main > section.cta-section { display: grid; grid-template-columns: 1fr; gap: 28px; margin: 0 20px; padding: 30px 24px; border-radius: 28px; }
  .cta-section h2 { max-width: 9ch; font-size: clamp(2.3rem, 11vw, 3rem); }
  .contact-editorial-actions { align-items: stretch; }
  .contact-editorial-cta { min-height: 56px; }
  .site-footer { align-items: flex-start; gap: 22px; margin: 52px 20px 0; padding: 24px 0 4px; }
  .footer-links { gap: 14px; }
  .pitch-modal-close { width: 44px; height: 44px; }
}

@media (max-width: 390px) {
  .site-header { gap: 7px; padding: 9px 10px; }
  .site-header .brand { gap: 8px; }
  .site-header .brand-name { font-size: 0.9rem; }
  .site-header .button-header { padding: 0 9px; font-size: 0.69rem; }
  .hero-intro h1 { font-size: clamp(2.65rem, 12vw, 2.85rem); }
  html[lang="fr"] .hero-intro h1 { font-size: clamp(1.9rem, 8vw, 2.15rem); }
  .hero-stage { aspect-ratio: 16 / 9; }
  .product-carousel-companion { grid-template-columns: 102px minmax(0, 1fr); }
  .live-location-phone-mockup, .live-location-phone-mockup[data-screen="2"] { width: 102px; }
  .product-carousel-info-banner { height: 150px; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-toggle span { transition: none; }
}