/* ==========================================================================
   Breakpoints
   All @media rules, one block per condition.
   Within each block, rules stay in their original document order.
   ========================================================================== */

@media (max-width: 990.98px) {

  /* Mobile bar (Figma 341:487, 390x72): brand left; search btn, menu btn
     (40px circles, 16px gap) and e77 logo (45x40) right-aligned, 16px edge pad,
     16px above/below the 40px controls (y=16).
     The gradient is 100.46deg on mobile. Search and menu: CSS circle outline + glyph. */
  .site-header {
    --cgms-header-gradient: linear-gradient(100.46deg, var(--cgms-blue-start) 0%, var(--cgms-blue-end) 100%);
    overflow: hidden; /* beads bleed 64px off the left edge */
  }

  .site-header__inner {
    min-height: 72px; /* closed bar = 72px; grows when the menu opens */
    padding: 0 16px;
    align-items: center;
    row-gap: 0;
  }

  /* Each bar item carries the 16px top/bottom inset (40px + 2 x 16 = 72px) so the
     72px row is explicit and the collapse starts directly below it. */
  .site-header .navbar-brand,
  .header-search-toggle,
  .site-header .navbar-toggler,
  .site-header__logo-mobile {
    margin-top: 16px;
    margin-bottom: 16px;
  }

  .site-header .navbar-brand {
    margin-right: auto;
    font-size: 24px;
    font-weight: 600;
    line-height: normal;
  }

  /* Circle buttons: search + menu (40px, Figma 341:487) */
  .header-search-toggle,
  .site-header .navbar-toggler {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
    box-sizing: border-box;
    border: 1px solid var(--cgms-white);
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
  }

  .header-search-toggle {
    margin-right: 16px;
    cursor: pointer;
  }

  .header-search-toggle img {
    display: block;
    width: 16px;
    height: 16px;
  }

  .header-search-toggle:focus-visible,
  .site-header .navbar-toggler:focus-visible {
    outline: 2px solid var(--cgms-white);
    outline-offset: 2px;
  }

  /* Hamburger (closed) / close (open) glyph */
  .site-header .navbar-toggler-icon {
    width: 14px;
    height: 16px;
    background: url("/images/icon-menu.svg") center / contain no-repeat;
  }

  .site-header .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
    background-image: url("/images/icon-close.svg");
  }

  .site-header__logo-mobile {
    flex: 0 0 45px;
    width: 45px;
    height: 40px;
    margin-left: 8px;
  }

  /* Beads (332x64, left -64, top 4 = vertically centred in the 72px bar, same artwork/ratio as desktop) */
  .header-beads {
    display: block;
    top: 4px;
    left: -64px;
    width: 332px;
    height: 64px;
    transform: none;
  }

  /* Opened menu: stacked links, search field; partner logo lives in the bar */
  .site-header .navbar-collapse {
    flex-basis: 100%;
  }

  .site-header__right {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 16px 0 36px;
  }

  .site-header__right > .site-header__logo {
    display: none;
  }

  .site-header .navbar-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    width: 100%;
  }

  .site-header .nav-item {
    width: 100%;
    text-align: center;
  }

  .site-header .nav-link {
    font-size: 16px;
    text-align: center;
  }

  .header-search {
    width: 100%;
    max-width: 320px;
    margin-inline: auto;
  }

  .site-header__logo {
    height: 48px;
  }

  /* Products intro, tablet range: centered copy with side inset (575px block refines to Figma 454:2932). */
  /* Photo keeps its 780:666 ratio (390x333 at 390px) and is capped so it never towers on wide tablets;
     the PNG has a white margin, so contain blends seamlessly into the section. */
  .products-intro__media {
    aspect-ratio: 780 / 666;
    max-height: 460px;
    min-height: 0;
    /* Width follows the height cap (460 * 780/666) so the box can be centred instead of hugging the left edge. */
    width: min(100%, 538.74px);
    margin-inline: auto;
  }

  .products-intro--dcont .products-intro__media {
    aspect-ratio: 390 / 366;
    width: min(100%, 539px);
  }

  .products-intro__photo {
    min-height: 0;
    height: 100%;
    object-position: center center;
    object-fit: contain;
  }

  .products-intro__panel {
    padding: 64px 24px 0;
  }

  .products-intro {
    container-type: inline-size;
  }

  /* Upper bead row (Figma 454:3080): 390x184 crop whose top sits 57px above the hero image bottom
     (section top inset + media height - 57px); media height = min(100%, 538.74px) * 666/780. */
  .products-intro__beads-top {
    display: block;
    position: absolute;
    z-index: 0;
    top: calc(64px + min(100cqw, 538.74px) * 0.853846 - 57px);
    left: 50%;
    width: 390px;
    transform: translateX(-50%);
    pointer-events: none;
  }

  .products-intro__beads-top img {
    display: block;
    width: 100%;
    height: auto;
    max-width: none;
  }

  .products-intro__content {
    max-width: 740px;
    margin-inline: auto;
    align-items: center;
    gap: 16px;
    text-align: center;
  }

  /* Fluid type: 32/22/18/14 at 390px (Figma) growing to 44/26/18/14 at 991px. */
  .products-intro__title {
    font-size: clamp(32px, 24.2px + 2vw, 44px);
  }

  .products-intro__subtitle {
    font-size: clamp(22px, 19.4px + 0.667vw, 26px);
  }

  .products-intro__lead {
    font-size: 18px;
  }

  .products-intro__footnotes {
    font-size: 14px;
  }

  .products-intro__btn {
    align-self: center;
  }

  /* Compatible phones hero — mobile/tablet ≤990.98px (Figma 465:7719 intro + 465:7725 search) */
  .compatible-phones-hero > .compatible-phones-hero__inner.container-xl {
    padding-left: 12px;
    padding-right: 12px;
  }

  .compatible-phones-hero {
    padding: 32px 0 40px;
  }

  /* Compatible phones results — mobile cards (Figma 465:7748) */
  .compatible-phones-results > .compatible-phones-results__inner.container-xl {
    padding-left: 12px;
    padding-right: 12px;
    min-width: 0;
    max-width: 100%;
  }

  .compatible-phones-results {
    padding-bottom: 64px;
  }

  .compatible-phones-results__note {
    align-items: center;
    padding-top: 32px;
    text-align: center;
  }

  .compatible-phones-results__note-lead,
  .compatible-phones-results__note-updated {
    width: 100%;
    font-size: 18px;
  }

  .compatible-phones-results__table--desktop {
    display: none;
  }

  .compatible-phones-results__cards--mobile {
    display: block;
  }

  /* table-footer 465:7751 — min 110px, two rows; container already has 12px inset */
  .compatible-phones-results__footer {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    box-sizing: border-box;
    gap: 16px;
    min-height: 110px;
    padding: 16px;
    max-width: 100%;
    min-width: 0;
  }

  .compatible-phones-results__footer-per-page {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 16px;
    width: 100%;
    min-width: 0;
  }

  .compatible-phones-results__per-page-label {
    flex: 0 0 auto;
    min-width: 0;
    white-space: normal;
    font-size: 16px;
    line-height: 1.5;
  }

  .compatible-phones-results__per-page-select {
    flex-shrink: 0;
    height: 42px;
    min-height: 42px;
  }

  .compatible-phones-results__footer-pages {
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px 32px;
    width: 100%;
    min-width: 0;
  }

  .compatible-phones-results__range {
    white-space: normal;
    font-size: 16px;
    line-height: 1.5;
    text-align: center;
  }

  .compatible-phones-results__page-btns {
    gap: 24px;
    flex-shrink: 0;
  }

  .compatible-phones-hero__intro {
    gap: 16px;
    padding-bottom: 24px;
    align-items: flex-start;
    text-align: left;
  }

  .compatible-phones-hero__title {
    font-size: 32px;
  }

  .compatible-phones-hero__lead {
    font-size: 18px;
  }

  .compatible-phones-hero__row--search {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
  }

  .compatible-phones-hero__actions {
    display: flex;
    justify-content: center;
    width: 100%;
  }

  .compatible-phones-hero__submit {
    width: auto;
    height: auto;
    --bs-btn-padding-y: 12px;
    --bs-btn-padding-x: 24px;
    --bs-btn-font-size: 14px;
    --bs-btn-line-height: 26px;
    padding: 12px 24px;
  }

  .faq-page {
    padding: 32px 0 40px;
  }

  .faq-page > .faq-page__inner.container-xl {
    padding-left: 12px;
    padding-right: 12px;
  }

  .faq-page__title {
    font-size: 32px;
    text-align: center;
  }

  .impressum-page {
    padding: 32px 0 40px;
  }

  .impressum-page > .impressum-page__header.container-xl,
  .impressum-page__body > .impressum-page__body-inner.container-xl {
    padding-left: 12px;
    padding-right: 12px;
  }

  .support-page > .support-page__intro.container-xl {
    padding-left: 12px;
    padding-right: 12px;
  }

  /* dcont products-story list — centered copy, bullets inside (≤990.98px). */
  .page-dcont-sens .products-story__list {
    width: 100%;
    max-width: 100%;
    margin-inline: auto;
    padding-inline: 0;
    list-style-position: inside;
  }

  .page-dcont-sens .products-story__list li {
    margin-inline-start: 0;
    text-align: center;
  }
}

@media (max-width: 767.98px) {

  .quick-nav {
    padding: 32px 16px 64px;
  }

  .quick-nav > .container-xl {
    max-width: none;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
  }

  .quick-nav__row {
    gap: 16px;
  }

  .quick-nav__btn {
    --bs-btn-padding-y: 12px;
    --bs-btn-padding-x: 24px;
    --bs-btn-font-size: 14px;
    --bs-btn-line-height: 26px;
    height: 52px;
    padding: 12px 24px;
    font-size: 14px;
    line-height: 26px;
  }

  /* Same responsive behaviour as .quick-nav; products keeps its own vertical paddings. */
  .products-nav {
    padding: 64px 16px 80px;
  }

  .products-nav > .container-xl {
    max-width: none;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
  }

  .products-nav__row {
    gap: 16px;
  }

  .products-nav__btn {
    --bs-btn-padding-y: 12px;
    --bs-btn-padding-x: 24px;
    --bs-btn-font-size: 14px;
    --bs-btn-line-height: 26px;
    height: 52px;
    padding: 12px 24px;
    font-size: 14px;
    line-height: 26px;
  }


  .features,
  .products-features {
    padding: 56px 16px 64px;
  }

  .features__inner,
  .products-features__inner {
    padding-left: 0;
    padding-right: 0;
  }

  /* Section horizontal padding owns the Figma inset; drop duplicate Bootstrap container gutters. */
  .products-apps > .container-xl.products-apps__inner,
  .products-materials > .container-xl.products-materials__inner {
    max-width: none;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
  }

  .products-intro__beads-top,
  .products-intro__beads {
    width: min(100%, 390px);
  }

  .features__title,
  .products-features__title {
    margin-bottom: 54px;
    font-size: 32px;
    line-height: normal;
  }

  .features__grid,
  .products-features__grid {
    --bs-gutter-x: 0;
    --bs-gutter-y: 48px;
  }

  .features__grid > .col,
  .products-features__grid > .col {
    max-width: 100%;
  }

  .features__item,
  .products-features__item {
    gap: 24px;
    max-width: none;
  }

  .features__label,
  .products-features__label {
    font-size: 20px;
    line-height: 1.5;
  }


  .learn {
    padding: 64px 16px 0;
  }

  .learn__intro,
  .learn__closing {
    padding-left: 0;
    padding-right: 0;
    margin-left: auto;
    margin-right: auto;
  }

  .learn__title {
    max-width: none;
    font-size: 32px;
    line-height: normal;
  }

  .learn__subtitle {
    margin-top: 40px;
    max-width: none;
    font-size: 26px;
    line-height: normal;
  }

  .learn__text {
    margin-top: 16px;
    max-width: none;
    font-size: 18px;
    line-height: 1.5;
  }

  /* Full-bleed only inside .learn (16px section pad); standalone block on dcont-sens stays 100%. */
  .learn .learn__comparison {
    margin-top: 24px;
    margin-left: -16px;
    margin-right: -16px;
    width: calc(100% + 32px);
  }

  .learn__comparison-title {
    padding-top: 8px;
    padding-inline: 32px;
    font-size: 16px;
    line-height: 28px;
  }

  .learn__closing {
    margin-top: 32px;
    margin-bottom: 64px;
  }

  .learn__closing-text {
    max-width: none;
    font-size: 18px;
    line-height: 1.5;
    text-align: center;
  }


  .how-it-works__layout {
    display: flex;
    flex-direction: column;
  }

  .how-it-works__media {
    position: relative;
    flex-shrink: 0;
    height: 360px;
    min-height: 0;
    overflow: hidden;
  }

  .how-it-works__photo {
    position: absolute;
    inset: 0;
    min-height: 0;
    height: 100%;
    object-fit: cover;
    object-position: 42% 22%;
  }

  .how-it-works__panel {
    padding: 56px 16px;
  }

  .how-it-works__content {
    gap: 16px;
    margin-inline: auto;
    align-items: stretch;
    text-align: center;
  }

  .how-it-works__title {
    font-size: 32px;
    line-height: normal;
    text-align: center;
  }

  .how-it-works__text {
    font-size: 18px;
    line-height: 1.5;
    text-align: center;
  }

  .how-it-works__diagram {
    width: 100%;
    max-width: 358px;
    height: 135px;
    margin-top: 0;
    margin-inline: auto;
    object-fit: contain;
  }


  .phone-monitoring__layout {
    display: flex;
    flex-direction: column;
  }

  .phone-monitoring__media {
    order: -1;
    flex-shrink: 0;
    height: 360px;
    min-height: 0;
  }

  .phone-monitoring__photo {
    position: absolute;
    inset: 0;
    min-height: 0;
    height: 100%;
    object-fit: cover;
    object-position: 48% 28%;
  }

  .phone-monitoring__image {
    max-width: 160px;
  }

  .phone-monitoring__main {
    order: 2;
    min-height: 0;
    padding: 56px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }

  .phone-monitoring__content {
    width: 100%;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .phone-monitoring__title {
    margin: 0;
    font-size: 32px;
    line-height: normal;
    text-align: center;
  }

  .phone-monitoring__text {
    font-size: 18px;
    line-height: 1.5;
    text-align: center;
  }

  .phone-monitoring__phone-img {
    width: min(158px, 40.5vw);
    max-width: 100%;
  }


  .why-useful > .container-xl.why-useful__header {
    max-width: none;
    padding-left: 16px;
    padding-right: 16px;
    padding-bottom: 61px;
  }

  .why-useful__title {
    font-size: 32px;
    line-height: normal;
  }

  .why-useful__band--insights {
    margin-top: 0;
    background: transparent;
  }

  .why-useful__band--lifestyle {
    background: transparent;
  }

  .why-useful__visual {
    order: 1;
    min-height: 0;
    height: 360px;
  }

  .why-useful__copy {
    order: 2;
    padding: 56px 16px;
    text-align: center;
  }

  .why-useful__copy--insights {
    background: #eaf9ff;
  }

  .why-useful__copy--lifestyle {
    background: #eaf9ff;
  }

  .why-useful__graph-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: cover;
    object-position: center 22%;
  }

  .why-useful__photo-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: cover;
    object-position: center center;
  }

  .why-useful__prose {
    margin-inline: auto;
    font-size: 18px;
    line-height: 1.5;
  }

  .why-useful__list {
    display: inline-block;
    margin-inline: auto;
    text-align: left;
  }

  .why-useful__list li {
    margin-inline-start: 27px;
  }

  .why-useful__subtitle {
    margin-inline: auto;
    font-size: 26px;
    line-height: normal;
    text-align: center;
  }

  .why-useful__subtitle--second {
    margin-top: 32px;
  }

  .why-useful__lead {
    margin-inline: auto;
    margin-top: 16px;
    font-size: 18px;
    line-height: 1.5;
    text-align: center;
  }

  .why-useful__list--activities {
    max-width: 358px;
    margin-inline: auto;
    font-size: 18px;
    line-height: 1.5;
  }

  .why-useful__prose--closing {
    margin-top: 16px;
  }


  .apps-download > .container-xl.apps-download__inner {
    max-width: none;
    padding: 64px 16px;
  }

  .apps-download__title,
  .apps-download__tagline {
    font-size: 32px;
    line-height: normal;
  }

  .apps-download__text {
    margin-top: 16px;
    font-size: 18px;
    line-height: 1.5;
  }

  .apps-download__actions {
    gap: 16px;
    margin-top: 32px;
  }

  .apps-download__stores {
    width: 304px;
    min-height: 50px;
    padding: 5px 24px;
    gap: 16px;
  }

  .apps-download__tagline {
    margin-top: 32px;
  }


  .site-footer {
    --ftr-min-height: 0;
    --ftr-pad-y: 64px;
    --ftr-link-gap: 24px;
    --ftr-link-size: 16px;
    --ftr-copy-gap: 0;
    --ftr-logo-w: 86px;
    --ftr-logo-h: 76px;

    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.16);
  }

  .site-footer__inner {
    flex-direction: column;
    align-items: center;
    gap: 40px;
    padding: var(--ftr-pad-y) 16px;
  }

  .site-footer__content {
    flex: 0 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    width: 100%;
    max-width: 358px;
  }

  .site-footer__links {
    justify-content: center;
    width: 100%;
    max-width: 358px;
  }

  .site-footer__copyright {
    margin: 0;
    text-align: center;
  }

  .site-footer__logo {
    margin-left: 0;
    align-self: center;
  }

  .site-footer__link {
    white-space: normal;
  }

  /* Dcont® Sens mobile (Figma 680:* @ 390px): 12px inset; full-width bands and hero art. */
  .page-dcont-sens main {
    width: 100%;
    max-width: none;
  }

  .page-dcont-sens .products-nav,
  .page-dcont-sens .products-features,
  .page-dcont-sens .products-materials {
    padding-inline: 12px;
  }

  .page-dcont-sens .products-intro--dcont .products-intro__media {
    width: 100%;
    max-width: none;
    margin-inline: 0;
  }

  .page-dcont-sens .products-intro--dcont .products-intro__photo {
    object-fit: cover;
  }
}

@media (max-width: 1199.98px) {

  /* Desktop-like hero: copy column = half of slide width (not fixed 710px). */
  .hero-slide__fade {
    width: 55%;
    max-width: 55%;
  }

  .hero-slide__content {
    width: 50%;
    max-width: 50%;
  }
}

@media (max-width: 575.98px) {

  .hero-slider .slick-dots {
    margin-top: 8px;
  }

  /* Mobile slider (Figma 232:549, 390×640): stacked copy, bottom photo strip. */
  .hero-slide {
    display: flex;
    flex-direction: column;
    min-height: 640px;
  }

  .hero-slide:not(.hero-slide--photo) .hero-slide__media {
    position: absolute;
    inset: auto 0 0 0;
    height: 216px;
    overflow: hidden;
  }

  /* Crop to the strip without stretching (Figma 232:549 placement). */
  .hero-slide:not(.hero-slide--photo) .hero-slide__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 70% center;
  }

  .hero-slide__fade {
    display: block;
    top: auto;
    bottom: 184px;
    left: 0;
    width: 100%;
    max-width: none;
    height: 32px;
    background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
  }

  .hero-slide__content {
    align-items: center;
    gap: 16px;
    width: 100%;
    max-width: none;
    margin-left: 0;
    padding: 24px 16px 228px;
    text-align: center;
  }

  .hero-slide__copy {
    align-items: stretch;
  }

  .hero-slide__title {
    font-size: 28px;
    line-height: normal;
  }

  .hero-slide__subtitle {
    font-size: 18px;
    line-height: 24px;
  }

  .hero-slide__visual {
    width: 311px;
  }

  .hero-slide__actions {
    justify-content: center;
    gap: 16px;
  }

  .hero-btn {
    height: 50px;
    padding: 12px 24px;
    font-size: 14px;
  }

  .how-it-works__media {
    height: 260px;
  }
  .phone-monitoring__media {
    height: 260px;
  }
  .why-useful__visual {
    height: 260px;
  }

  .products-properties__media {
    height: 285px;
    min-height: 0;
  }

  .products-properties__photo {
    min-height: 0;
    height: 100%;
  }

  .page-dcont-sens .products-story__media {
    height: 285px;
    min-height: 0;
  }

  .page-dcont-sens .products-story__photo {
    min-height: 0;
    height: 100%;
  }

  .products-intro {
    padding: 0 0 64px;
  }

  .products-intro__panel {
    padding: 64px 12px 0;
  }

  .products-intro__beads-top {
    top: calc(min(100cqw, 538.74px) * 0.853846 - 57px);
  }

  .products-intro__content {
    max-width: none;
    align-items: center;
    gap: 16px;
    text-align: center;
  }

  /* Figma 454:2928: blank 14px line (21px) between the two footnotes. */
  .products-intro__footnotes p + p {
    margin-top: 21px;
  }

  .products-intro__btn {
    align-self: center;
    height: 52px;
    padding: 12px 24px;
    font-size: 14px;
  }

}

@media (min-width: 991px) {

  :root {
    --hdr-sticky-offset: var(--hdr-height);
  }

  .site-header__inner {
    min-height: var(--hdr-height);
    padding: 0 var(--hdr-pad-x);
    flex-wrap: nowrap;
  }

  .site-header .navbar-collapse {
    flex-grow: 1;
    overflow: visible;
  }

  .site-header__right {
    display: flex;
    align-items: center;
    margin-left: auto;
  }

  .site-header .navbar-nav {
    flex-direction: row;
    align-items: center;
    gap: var(--hdr-menu-gap);
  }

  .header-search {
    flex: 0 0 var(--hdr-search-w);
    width: var(--hdr-search-w);
    margin-left: var(--hdr-menu-to-search);
  }

  .site-header__logo {
    margin-left: var(--hdr-search-to-logo);
  }

  /* Figma 641:1397 / 465:7535 — 1296px content; override Bootstrap container-xl (960/1140). */
  .compatible-phones-hero > .compatible-phones-hero__inner.container-xl,
  .compatible-phones-results > .compatible-phones-results__inner.container-xl {
    max-width: 1296px;
    width: 100%;
  }

  .compatible-phones-hero {
    --cph-search-gap: 32px;
  }

  .compatible-phones-hero__control--text {
    height: 60px;
  }

  /* Base .compatible-phones-hero__row uses flex-wrap: wrap; narrow desktops fit the
     Figma widths only by shrinking the input — keep one row and undo mobile __actions. */
  .compatible-phones-hero__row--search {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: var(--cph-search-gap);
  }

  .compatible-phones-hero__actions {
    display: flex;
    justify-content: flex-start;
    width: auto;
    flex: 0 0 auto;
  }

  .compatible-phones-hero__intro {
    align-items: flex-start;
    text-align: left;
  }

  /* Compatible phones results — desktop table (Figma 465:7535) */
  .compatible-phones-results__table--desktop {
    display: table;
  }

  .compatible-phones-results__cards--mobile {
    display: none;
  }

  /* Tablet/desktop bar: show bead wave beside CGMS brand (base layout in style.css) */
  .header-beads {
    display: block;
  }

  .header-search-toggle,
  .site-header__logo-mobile {
    display: none;
  }

  /* Termékek — desktop hover/focus flyout (Figma 696:6711) */
  .site-header__nav-dropdown {
    position: relative;
    display: block;
    width: max-content;
  }

  .site-header__nav-dropdown-toggle:hover,
  .site-header__nav-dropdown-toggle:focus-visible,
  .site-header__nav-dropdown:hover .site-header__nav-dropdown-toggle,
  .site-header__nav-dropdown:focus-within .site-header__nav-dropdown-toggle {
    color: var(--cgms-white);
    opacity: 0.8;
  }

  /* Invisible hit area: li only sizes to the toggle, but the panel is 24px below
     and −32px left — keep :hover on the dropdown wrapper while crossing the gap. */
  .site-header__nav-dropdown::after {
    content: "";
    position: absolute;
    top: 100%;
    left: -32px;
    width: max(calc(100% + 32px), 200px);
    height: 24px;
  }

  .site-header__products-dropdown::before {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 0;
    width: 100%;
    height: 24px;
  }

  .site-header__products-dropdown {
    position: absolute;
    top: calc(100% + 24px);
    left: -32px;
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
    width: max-content;
    min-width: 200px;
    padding: 24px 48px 24px 32px;
    background: var(--cgms-white);
    border: 1px solid var(--cgms-accent);
    border-radius: 16px;
    box-shadow: none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.15s ease-in-out, visibility 0.15s ease-in-out;
    z-index: 110;
  }

  .site-header__nav-dropdown:hover .site-header__products-dropdown,
  .site-header__nav-dropdown:focus-within .site-header__products-dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .site-header__products-dropdown-link {
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    text-align: left;
    color: var(--cgms-accent);
  }

  .site-header__products-dropdown-link:hover,
  .site-header__products-dropdown-link:focus-visible {
    color: var(--cgms-accent);
    opacity: 0.8;
  }

  .site-header__products-dropdown-link:focus-visible {
    outline: 2px solid var(--cgms-accent);
    outline-offset: 4px;
  }


  .features,
  .products-features {
    padding: 64px 0 72px;
  }


  .learn {
    padding: 64px 0;
  }


  .phone-monitoring__layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-height: 640px;
  }

  .phone-monitoring__main {
    padding: 64px var(--hdr-pad-x) 10px;
  }

  .phone-monitoring__media {
    grid-column: 2;
    grid-row: 1;
    min-height: 640px;
  }


  .phone-monitoring__content {
    margin-top: 32px;
  }


  .phone-monitoring__title {
    margin-bottom: 32px;
  }

  .phone-monitoring__phone-img {
    width: auto;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    object-fit: contain;
  }


  .phone-monitoring__photo {
    position: absolute;
    inset: 0;
    min-height: 0;
  }

  .products-intro {
    padding: 64px 0 64px;
  }

  .products-intro__layout {
    /* Image column: 45% at 991px easing to Figma's 788/1920 (41.04%) at 1920px. */
    grid-template-columns: minmax(0, max(41.0417%, calc(36.85vw + 80.4px))) minmax(0, 1fr);
    grid-template-rows: auto;
    align-items: stretch;
  }

  /* Photo keeps its 788:560 ratio (560px tall at 1920px) and is centred, never cropped. */
  .products-intro__media {
    grid-row: 1;
    display: flex;
    align-items: center;
    aspect-ratio: auto;
    max-height: none;
    min-height: 0;
  }

  .products-intro__photo {
    width: 100%;
    height: auto;
    aspect-ratio: 788 / 560;
    max-height: 560px;
    min-height: 0;
    object-fit: contain;
    object-position: center center;
  }

  .products-intro--dcont .products-intro__logo {
    width: min(100%, 364px);
  }

  .products-intro--dcont .products-intro__photo {
    aspect-ratio: 788 / 591;
    max-height: 591px;
  }

  .products-intro--dcont .products-intro__beads {
    left: 28.125%;
    width: 53.4375%;
  }

  .products-intro__panel {
    grid-row: 1;
    justify-content: center;
    padding: 64px clamp(24px, 4.17vw, 80px);
    /* 24px at 991px up to Figma's 312px at 1920px. */
    padding-right: clamp(24px, calc(24px + (100vw - 991px) * 0.3103), 312px);
  }

  .products-intro__content {
    text-align: left;
    align-items: flex-start;
  }

  /* Fluid type: 44/26/18/14 at 991px (continuous with tablet) to Figma 56/28/20/16 at 1440px. */
  .products-intro__title {
    font-size: clamp(44px, 17.4px + 2.679vw, 56px);
  }

  .products-intro__subtitle {
    font-size: clamp(26px, 21.6px + 0.446vw, 28px);
  }

  .products-intro__lead {
    font-size: clamp(18px, 13.6px + 0.446vw, 20px);
  }

  .products-intro__footnotes {
    font-size: clamp(14px, 9.5px + 0.446vw, 16px);
  }

  .products-intro__beads {
    left: 37.9167%;
    bottom: 1px;
    width: 45.4688%;
    transform: none;
  }

  .products-apps {
    padding: 120px 0;
  }

  .products-apps__inner {
    align-items: stretch;
    gap: 48px;
  }

  .products-apps__header {
    align-items: flex-start;
    gap: 32px;
    text-align: left;
  }

  .products-apps__title {
    font-size: 35px;
    text-align: left;
  }

  .products-apps__intro {
    font-size: 20px;
    text-align: left;
  }

  .products-apps__list {
    gap: 48px;
  }

  .products-apps__row {
    flex-direction: row;
    align-items: flex-start;
    gap: 24px;
  }

  .products-apps__body {
    flex: 1 1 0;
    align-items: flex-start;
    gap: 24px;
    min-width: 0;
    text-align: left;
  }

  .products-apps__visual {
    width: 308px;
    max-width: none;
    align-self: flex-start;
  }

  .products-apps__name {
    font-size: 28px;
    text-align: left;
  }

  .products-apps__subtitle {
    font-size: 24px;
    text-align: left;
  }

  .products-apps__text {
    font-size: 20px;
    text-align: left;
  }

  /* Sens365 Web — Figma 696:7037 body stack: 24px between subtitle and infographic. */
  .products-apps__row:last-child .products-apps__copy {
    gap: 24px;
  }

  .products-apps__infographic-frame {
    max-width: 757px;
    margin-inline: 0;
  }

  .products-apps__infographic {
    top: -43.23%;
    height: 153.12%;
  }

  .products-apps__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 16px 25px;
  }

  .products-apps__row:last-child .products-apps__actions {
    display: flex;
  }

  .products-apps__btn {
    display: inline-flex;
    grid-column: auto;
    justify-self: auto;
    min-height: 58px;
    padding: 16px 32px;
    font-size: 16px;
  }

  .caresens-air-app-modal__dialog {
    max-width: 1296px;
    width: 100%;
  }

  .caresens-air-app-modal__header {
    background-image: var(--cgms-header-gradient);
  }

  .caresens-air-app-modal__title {
    font-size: 28px;
  }

  .caresens-air-app-modal__body {
    padding: 24px 32px 48px;
  }

  .caresens-air-app-modal__intro {
    flex-direction: row;
    align-items: flex-start;
    gap: 24px;
  }

  .caresens-air-app-modal__intro-copy {
    flex: 1 1 auto;
    min-width: 0;
  }

  .caresens-air-app-modal__mockup {
    flex: 0 0 384px;
    align-self: flex-start;
    margin-top: 50px;
  }

  .caresens-air-app-modal__steps-title {
    font-size: 35px;
  }

  .caresens-air-app-modal__section-title {
    font-size: 24px;
  }

  .caresens-air-app-modal__section-text,
  .caresens-air-app-modal__list {
    font-size: 20px;
  }

  .caresens-air-app-modal__list {
    padding-left: 30px;
  }

  .products-materials {
    padding: 120px 16px;
  }

  .products-materials__inner {
    gap: 24px;
  }

  .products-materials__title {
    padding-bottom: 32px;
    font-size: 35px;
  }

  .products-materials__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .products-materials__name {
    font-size: 24px;
  }

  .products-materials__text {
    font-size: 18px;
  }

  .products-materials__btn {
    min-height: 58px;
    padding: 16px 32px;
    font-size: 16px;
  }

  .products-faq {
    padding: 80px 0;
  }

  .products-faq__layout {
    grid-template-columns: minmax(0, 788fr) minmax(0, 1132fr);
    align-items: start;
  }

  .products-faq__media {
    align-self: start;
    /* Match desktop FAQ artboard (1576×1394 → 788 / 697); photo uses contain — no crop. */
    aspect-ratio: 788 / 697;
    min-width: 0;
    min-height: 0;
  }

  .products-faq__media picture {
    display: block;
    width: 100%;
    height: auto;
  }

  .products-faq__photo {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center center;
  }

  .products-faq__panel {
    min-width: 0;
    align-items: center;
    justify-content: flex-start;
    padding: 120px clamp(24px, 16.25vw, 312px) 120px clamp(24px, 4.17vw, 80px);
  }

  .products-faq__question {
    font-size: 24px;
  }

  .page-dcont-sens .products-faq--dcont .products-faq__media {
    aspect-ratio: 788 / 740;
  }

  .faq-page {
    padding: 80px 0 64px;
  }

  .faq-page__title {
    font-size: 56px;
    text-align: left;
    padding-bottom: 64px;
  }

  .faq-page__question {
    font-size: 24px;
  }

  .faq-page__body {
    font-size: 20px;
  }

  .impressum-page {
    padding: 80px 0 64px;
  }

  .impressum-page__title {
    font-size: 56px;
    text-align: left;
    padding-bottom: 64px;
  }

  .impressum-page__body {
    padding: 80px 0 0;
  }

  .impressum-page__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }

  .impressum-page__block {
    gap: 24px;
  }

  .impressum-page__heading {
    font-size: 28px;
  }

  .impressum-page__text {
    font-size: 20px;
  }

  .support-page {
    padding: 80px 0 64px;
  }

  .support-page__intro {
    gap: 24px;
    align-items: flex-start;
  }

  .support-page__title {
    font-size: 56px;
    text-align: left;
  }

  .support-page__lead {
    font-size: 24px;
    color: #000;
    text-align: left;
  }

  .support-contact__layout {
    /* Figma 618:596: full-width 1920 row; text x=312 w=740, 80px gap, image 788 flush right */
    min-height: 648px;
    grid-template-columns: minmax(24px, 1fr) minmax(0, 740px) 80px minmax(0, 788px);
    align-items: end;
  }

  .support-contact__content {
    grid-column: 2;
    grid-row: 1;
    align-items: flex-start;
    padding: 112px 0;
    text-align: left;
  }

  .support-contact__phone {
    font-size: clamp(36px, 2.5vw, 48px);
  }

  .support-contact__hours {
    font-size: 20px;
    text-align: left;
  }

  .support-contact__notice {
    max-width: 740px; /* Figma 618:600 Frame 37 */
    padding: 24px;
    font-size: 20px;
    text-align: left;
  }

  .support-contact__media {
    grid-column: 4;
    grid-row: 1;
    height: auto;
    align-self: stretch;
  }

  .support-contact__photo {
    height: 100%;
    object-position: center bottom;
  }

  /* Newsletter — Figma 514:367: 80px y-padding, 856px column, 24px gaps */
  .support-newsletter {
    padding: 80px 12px;
  }

  .support-newsletter__inner {
    gap: 24px;
  }

  .support-newsletter__intro {
    gap: 24px;
  }

  .support-newsletter__lead {
    font-size: 24px;
  }

  .support-newsletter__title {
    font-size: 48px;
  }

  .support-newsletter__form {
    padding: 0 110px;
    width: auto;
  }

  .support-newsletter__row {
    flex-direction: row;
  }

  .support-newsletter__field {
    flex: 1 1 0;
    width: auto;
  }

  .support-newsletter__submit {
    padding: 16px 32px;
    font-size: 16px;
  }
}

@media (min-width: 768px) {

  .learn__comparison {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .learn__comparison-col {
    display: flex;
  }

  .learn__comparison-panel {
    flex: 1;
    width: 100%;
  }


  .how-it-works__layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-height: 640px;
  }


  .how-it-works__media {
    min-height: 640px;
  }


  .how-it-works__photo {
    position: absolute;
    inset: 0;
    min-height: 0;
  }


  .how-it-works__panel {
    align-items: stretch;
    padding: 96px clamp(24px, 4.17vw, 80px) 96px clamp(24px, 4.17vw, 80px);
  }


  .how-it-works__diagram {
    margin-top: 24px;
  }


  .why-useful__header {
    padding-top: 124px;
  }


  .why-useful__band {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }


  .why-useful__band--insights {
    margin-top: 64px;
    min-height: 512px;
  }


  .why-useful__band--lifestyle {
    min-height: 742px;
  }


  .why-useful__copy--insights {
    display: flex;
    align-items: center;
    padding: 120px var(--hdr-pad-x) 150px;
  }

  .why-useful__copy--lifestyle {
    padding: 96px var(--hdr-pad-x) 92px;
  }


  .why-useful__subtitle--second {
    margin-top: 32px;
  }


  .why-useful__prose--closing {
    margin-top: 24px;
  }


  .why-useful__visual--graph {
    order: 2;
    min-height: 512px;
  }

  .why-useful__visual--photo {
    order: 1;
    min-height: 742px;
  }

  .why-useful__band--lifestyle .why-useful__copy {
    order: 2;
  }


  .why-useful__graph-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 145.85%;
    min-height: 0;
    top: -45.78%;
    object-fit: cover;
    object-position: center top;
  }


  .why-useful__photo-img {
    position: absolute;
    inset: 0;
    min-height: 0;
  }


  .apps-download__inner {
    padding-top: 64px;
    padding-bottom: 72px;
  }


  .apps-download__actions {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 32px;
    margin-top: 40px;
  }


  .apps-download__tagline {
    margin-top: 56px;
  }


  .products-materials__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }


  .site-footer {
    --ftr-min-height: 248px;
    --ftr-pad-y: 72px;
    --ftr-link-gap: 20px;
    --ftr-link-size: 15px;
    --ftr-copy-gap: 24px;
    --ftr-logo-w: 80px;
    --ftr-logo-h: 70px;
  }
}

/* #products-properties: two columns text left / image right from 990px; stack below (Figma 454:3416). */
@media (min-width: 990px) {

  .products-properties__layout {
    grid-template-columns: minmax(0, 1132fr) minmax(0, 788fr);
    align-items: stretch;
    min-height: 576px;
  }

  .products-properties__media {
    order: 0;
    min-height: 576px;
  }

  .products-properties__photo {
    position: absolute;
    inset: 0;
    min-height: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left center;
  }

  .products-properties__panel {
    align-items: center;
    justify-content: flex-end;
    padding: 120px clamp(24px, 4.17vw, 80px) 120px clamp(24px, 16.25vw, 312px);
    background-image: url("/images/elonyok-gyongyok.png");
    background-size: cover;
    background-position: right center;
    background-repeat: no-repeat;
  }

  .products-properties__content {
    align-items: flex-start;
    gap: 32px;
    text-align: left;
  }

  .products-properties__title {
    font-size: 48px;
  }

  .products-properties__subtitle {
    font-size: 28px;
    font-weight: 700;
    line-height: normal;
  }

  .products-properties__text {
    font-size: 20px;
    font-weight: 400;
  }

}

/* Dcont® Sens story splits: image left / right from 990px (Figma 684:5700 / 680:4303). */
@media (min-width: 990px) {

  .page-dcont-sens .products-story--image-left .products-story__layout {
    grid-template-columns: minmax(0, 788fr) minmax(0, 1132fr);
    align-items: stretch;
    min-height: 578px;
  }

  .page-dcont-sens .products-story--image-right .products-story__layout {
    grid-template-columns: minmax(0, 1132fr) minmax(0, 788fr);
    align-items: stretch;
    min-height: 578px;
  }

  .page-dcont-sens .products-story__media {
    order: 0;
    min-height: 578px;
  }

  .page-dcont-sens .products-story--image-right .products-story__media {
    order: 1;
  }

  .page-dcont-sens .products-story__photo {
    position: absolute;
    inset: 0;
    min-height: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }

  .page-dcont-sens .products-story__panel {
    align-items: center;
    justify-content: center;
  }

  .page-dcont-sens .products-story--image-left .products-story__panel {
    padding: 120px clamp(24px, 16.25vw, 312px) 120px clamp(24px, 4.17vw, 80px);
  }

  .page-dcont-sens .products-story--image-right .products-story__panel {
    padding: 120px clamp(24px, 4.17vw, 80px) 120px clamp(24px, 16.25vw, 312px);
  }

  .page-dcont-sens .products-story__content {
    align-items: flex-start;
    gap: 32px;
    max-width: none;
    text-align: left;
  }

  .page-dcont-sens .products-story__title {
    font-size: 48px;
  }

  .page-dcont-sens .products-story__subtitle {
    font-size: 28px;
    font-weight: 700;
    line-height: normal;
  }

  .page-dcont-sens .products-story__text {
    font-size: 20px;
    font-weight: 400;
  }

  .page-dcont-sens .products-story__list {
    font-size: 20px;
  }

  .page-dcont-sens .products-story__footnote {
    font-size: 16px;
    font-weight: 400;
  }

  .page-dcont-sens .products-comparison-intro {
    padding: 80px clamp(24px, 16.25vw, 312px);
  }

  .page-dcont-sens .products-comparison-intro__text {
    font-size: 20px;
  }

}

@media (min-width: 1200px) {

  :root {
    --hdr-height: 128px;
    --hdr-pad-x: 40px;
    --hdr-brand-size: 44px;
    --hdr-menu-size: 14px;
    --hdr-menu-gap: 24px;
    --hdr-menu-to-search: 32px;
    --hdr-search-to-logo: 24px;
    --hdr-search-w: 220px;
    --hdr-logo-h: 56px;
  }


  .header-beads {
    display: block;
  }


  .features,
  .products-features {
    min-height: 712px;
    padding: 80px 0 80px;
  }


  .features__title,
  .products-features__title {
    margin-bottom: 57px;
  }


  .features__grid,
  .products-features__grid {
    --bs-gutter-y: 48px;
  }


  .learn {
    padding: 80px 0 120px;
  }


  .learn__subtitle {
    margin-top: 56px;
  }


  .learn__text {
    margin-top: 24px;
  }


  .apps-download__inner {
    min-height: 578px;
    padding-top: 88px;
    padding-bottom: 98px;
  }


  .apps-download__text {
    margin-top: 50px;
  }


  .apps-download__actions {
    margin-top: 48px;
  }


  .apps-download__stores {
    width: 328px;
    padding-left: 32px;
    padding-right: 32px;
  }


  .apps-download__tagline {
    margin-top: 80px;
  }


  .products-materials__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1600px) {
  /* Full design values (Figma 1920x128) */

  :root {
    --hdr-pad-x: 80px;
    --hdr-brand-size: 56px;
    --hdr-menu-size: 16px;
    --hdr-menu-gap: 32px;
    --hdr-menu-to-search: 40px;
    --hdr-search-to-logo: 32px;
    --hdr-search-w: 240px;
    --hdr-logo-h: 64px;
  }


  .site-footer {
    --ftr-min-height: 268px;
    --ftr-pad-y: 96px;
    --ftr-link-gap: 24px;
    --ftr-link-size: 16px;
    --ftr-copy-gap: 27px;
    --ftr-logo-w: 86px;
    --ftr-logo-h: 76px;
  }
}


/* Figma 465:7535 — fixed table columns only when the 1296px artboard fits. */
@media (min-width: 1296px) {
  .compatible-phones-results__table thead th:first-child {
    width: 416px;
  }

  .compatible-phones-results__table thead th:nth-child(2) {
    width: 440px;
  }

  .compatible-phones-results__table thead th:last-child {
    width: 416px;
  }
}