/* 2026-07 responsive consistency pass
   One gutter, section rhythm, radius scale and card density across public pages. */

.page-home,
.page-details,
.page-policies,
.page-support{
  --layout-gutter:40px;
  --layout-section:72px;
  --layout-card-gap:16px;
  --layout-card-radius:12px;
  --layout-control-radius:8px;
  --layout-card-padding:24px;
  --layout-line:#dfe4e9;
  --landing-white:#fff;
  --landing-tint:#f6f7f9;
  --landing-ink:#252c34;
  --landing-muted:#66717c;
}

/* Align every primary page surface to the same desktop content edge. */
.page-home .wrap{
  width:100%;
  max-width:1280px;
  padding-inline:var(--layout-gutter);
}

/* 2026-07 landing section system: one rhythm, alternating surfaces, shared cards. */
.page-home .commerce-shelves,
.page-home .sales-live,
.page-home #models{background:var(--landing-white)}
.page-home .media-proof-sec{background:var(--landing-tint)}
.page-home .commerce-shelves,
.page-home .sales-live,
.page-home .media-proof-sec,
.page-home .final{border-top:1px solid var(--layout-line)}
.page-home #models,
.page-home .commerce-shelves{border-top:none}

.page-home .commerce-shelves .product-shelf{padding:0!important}

.page-home .shelf-head,
.page-home #models .sec-head,
.page-home .sales-live-head,
.page-home .media-proof-head{align-items:flex-end;gap:40px}
.page-home .shelf-head h2,
.page-home #models .sec-title,
.page-home .sales-live h2,
.page-home .media-proof-sec .sec-title,
.page-home .final h2{
  color:var(--landing-ink);
  font-size:clamp(32px,3vw,40px);
  font-weight:680;
  line-height:1.18;
  letter-spacing:-.045em;
}
.page-home .shelf-head p,
.page-home #models .sec-kicker,
.page-home .sales-live-status,
.page-home .media-proof-sec .sec-kicker{
  margin-bottom:9px;
  color:#626e79;
  font-size:11px;
  font-weight:720;
  line-height:1.4;
  letter-spacing:.08em;
}
.page-home .sales-live-status::before{
  background:#66798a;
  box-shadow:0 0 0 4px rgba(102,121,138,.12);
}
.page-home .shelf-head>a{
  color:#4c5966;
  font-size:12px;
  font-weight:700;
  border-bottom:1px solid #aeb7c0;
  padding-bottom:6px;
}

.page-home .featured-product,
.page-home .mcard,
.page-home .model-guide,
.page-home .sales-live-card,
.page-home .review-collage,
.page-home .video-card,
.page-home .price-note{
  border:1px solid var(--layout-line);
  border-radius:var(--layout-card-radius);
  box-shadow:none;
}
.page-home .featured-product,
.page-home .mcard,
.page-home .model-guide,
.page-home .review-collage{background:#fff}
.page-home .sales-live-card{
  padding:32px;
  background:#f8f9fa;
  border-color:#e0e5e9;
}
.page-home .sales-facts{border-color:#dfe4e8}
.page-home .sales-fact{background:transparent}
.page-home .media-proof-note{
  color:var(--landing-muted);
  border-left-color:#b8c2cb;
}

.page-home main>.final{background:#252c34;color:#fff}
.page-home .final h2{color:#fff}
.page-home .final p{color:rgba(255,255,255,.7)}
.page-home .final .btn-blue{background:#fff;border-color:#fff;color:#252c34}
.page-home .final .btn-blue:hover{
  background:#eef2f5;
  border-color:#eef2f5;
  color:#1f252b;
}

@media(max-width:700px){
  .page-home .commerce-shelves,
  .page-home #models,
  .page-home .sales-live,
  .page-home .media-proof-sec{padding-block:52px}
  .page-home main>.final{padding-block:52px}
  .page-home .shelf-head,
  .page-home #models .sec-head,
  .page-home .sales-live-head,
  .page-home .media-proof-head{align-items:flex-start;gap:16px}
  .page-home .shelf-head h2,
  .page-home #models .sec-title,
  .page-home .sales-live h2,
  .page-home .media-proof-sec .sec-title,
  .page-home .final h2{font-size:30px;line-height:1.2}
  .page-home .sales-live-card{padding:22px 20px}
}
.page-details .wrap,
.page-support .wrap,
.page-policies .wrap{
  width:min(1200px,calc(100% - (var(--layout-gutter) * 2)));
  max-width:none;
  padding-inline:0;
}
.page-policies .policy>.wrap{
  width:min(1120px,calc(100% - (var(--layout-gutter) * 2)));
}

/* Keep section pacing predictable when moving between pages. */
.page-home .sales-live,
.page-home .commerce-shelves,
.page-home #models,
.page-home .benefit-showcase,
.page-home .media-proof-sec,
.page-details .section,
.page-policies .policy,
.page-support .section,
.page-support .support-finder{
  padding-block:var(--layout-section);
}
.page-home .final,
.page-details .detail-final{
  padding-block:64px;
}

/* The closing home CTA is a full-width section, not a floating card. */
.page-home main > .final{
  width:100%;
  max-width:none;
  margin:0;
  padding-block:var(--layout-section);
  border-top:1px solid var(--layout-line);
  border-bottom:1px solid var(--layout-line);
  border-radius:0;
}
.page-home .shelf-head,
.page-home .home-section-head,
.page-home .media-proof-head,
.page-home #models .sec-head,
.page-support .support-finder-head{
  margin-bottom:32px;
}

/* A restrained two-level curvature scale: cards 12px, controls 8px. */
.page-home .sales-fact,
.page-home .featured-product,
.page-home .mcard,
.page-home .benefit-card,
.page-home .review-collage,
.page-home .video-card,
.page-home .price-note,
.page-home .model-guide,
.page-home .bo .opt,
.page-home .bo .app,
.page-home .bo .addon,
.page-home .sum,
.page-details .card,
.page-details .person,
.page-details .faq details,
.page-details .outcome-disclaimer,
.page-details .outcome-case,
.page-details .outcome-routine,
.page-details .outcome-principle,
.page-policies .summary>div,
.page-policies .checklist li,
.page-support .quicknav a,
.page-support .step,
.page-support .action,
.page-support .form,
.page-support .faq details{
  border-radius:var(--layout-card-radius);
}
.page-home .featured-visual,
.page-home .mcard .mimg,
.page-details .person img,
.page-support input,
.page-support select,
.page-support textarea,
.page-home .btn,
.page-details .cta,
.page-details .ghost,
.page-policies .doc-link,
.page-policies .tabs a,
.page-support .btn{
  border-radius:var(--layout-control-radius);
}

/* Older component rules use positional selectors; pin the final radius per set. */
.page-home .sales-facts .sales-fact:nth-child(n),
.page-home .shelf-track .featured-product:nth-child(n),
.page-home #models .mcard:nth-child(n),
.page-details .grid2 .card:nth-child(n),
.page-details .grid3 .card:nth-child(n),
.page-details .grid4 .card:nth-child(n),
.page-details .team .person:nth-child(n),
.page-support .quicknav a:nth-child(n),
.page-support .steps .step:nth-child(n),
.page-support .actions .action:nth-child(n){
  border-radius:var(--layout-card-radius);
}
.page-home .sales-facts .sales-fact:nth-child(n){padding:20px}
.page-home .shelf-track .featured-product:nth-child(n){padding:22px}
.page-home #models .mcard:nth-child(n){padding:20px}

/* Use the same density and gap for repeated card groups. */
.page-home .sales-facts,
.page-home .benefit-grid{
  gap:var(--layout-card-gap);
}
.page-home .shelf-track,
.page-home .mgrid{
  gap:20px;
}
.page-details .grid2,
.page-details .grid3,
.page-details .grid4,
.page-details .team,
.page-support .quicknav,
.page-support .steps,
.page-support .actions{
  gap:var(--layout-card-gap);
}

/* The same component should remain a card at every breakpoint. */
@media(min-width:701px){
  .page-details .grid2 .card:nth-child(n),
  .page-details .grid3 .card:nth-child(n),
  .page-details .grid4 .card:nth-child(n),
  .page-details .team .person:nth-child(n),
  .page-support .quicknav a:nth-child(n),
  .page-support .step:nth-child(n),
  .page-support .action:nth-child(n){
    padding:var(--layout-card-padding);
    border:1px solid var(--dr-line);
    border-radius:var(--layout-card-radius);
    background:#fff;
  }
  .page-support .quicknav,
  .page-support .steps,
  .page-support .actions{
    border-top:0;
  }
  .page-support .quicknav a:nth-child(n),
  .page-support .step:nth-child(n),
  .page-support .action:nth-child(n){
    border-right:1px solid var(--dr-line);
  }
  .page-support .quicknav a::after{right:20px;bottom:20px}
}

/* Hero surfaces use a slightly larger radius than content cards. */
@media(min-width:701px){
  .page-home .hero-slide,
  .page-details .hero,
  .page-policies .hero,
  .page-support .hero{
    border-radius:14px;
  }
}

@media(max-width:700px){
  .page-home,
  .page-details,
  .page-policies,
  .page-support{
    --layout-gutter:20px;
    --layout-section:56px;
    --layout-card-gap:12px;
    --layout-card-radius:10px;
    --layout-control-radius:8px;
    --layout-card-padding:20px;
  }

  /* Remove nested mobile indents; every section starts on the same 20px line. */
  .page-home .wrap,
  .page-details .wrap,
  .page-details .outcome-section>.wrap,
  .page-support .wrap,
  .page-policies .wrap,
  .page-policies .policy>.wrap{
    width:100%;
    max-width:none;
    padding-inline:var(--layout-gutter);
  }
  .catalog-rail-inner,
  .policy-catalog-in{
    padding-inline:var(--layout-gutter);
  }

  .page-home .final,
  .page-details .detail-final{
    padding-block:56px;
  }

  .page-home main > .final{
    width:100%;
    margin:0;
    padding:var(--layout-section) var(--layout-gutter);
    border-radius:0;
  }
  .page-home .shelf-head,
  .page-home .home-section-head,
  .page-home .media-proof-head,
  .page-home #models .sec-head,
  .page-support .support-finder-head{
    margin-bottom:24px;
  }

  /* Full-bleed mobile heroes, with copy aligned to the shared gutter. */
  .page-home .hero-slide,
  .page-details .hero,
  .page-policies .hero,
  .page-support .hero{
    border-radius:0;
  }
  .page-home .hero-slide-inner,
  .page-details .hero>.wrap,
  .page-policies .hero>.wrap,
  .page-support .hero>.wrap{
    width:100%;
    padding-inline:var(--layout-gutter);
  }
  .page-home .hero-controls,
  .page-home .hero-cta-row{
    width:calc(100% - (var(--layout-gutter) * 2));
  }

  /* Horizontal shelves keep the same trailing breathing room as the page edge. */
  .page-home .shelf-track,
  .page-home .mgrid{
    gap:12px;
    margin-right:calc(var(--layout-gutter) * -1);
    padding-right:var(--layout-gutter);
  }

  .page-home .sales-fact,
  .page-home .featured-product,
  .page-home .mcard,
  .page-home .benefit-card,
  .page-details .card,
  .page-details .person,
  .page-support .quicknav a,
  .page-support .step,
  .page-support .action,
  .page-support .form{
    padding:var(--layout-card-padding);
  }

  /* Neutralize older nth-child density rules so repeated cards stay identical. */
  .page-home .sales-facts .sales-fact:nth-child(n),
  .page-home .shelf-track .featured-product:nth-child(n),
  .page-home #models .mcard:nth-child(n),
  .page-details .grid2 .card:nth-child(n),
  .page-details .grid3 .card:nth-child(n),
  .page-details .grid4 .card:nth-child(n),
  .page-details .team .person:nth-child(n),
  .page-support .quicknav a:nth-child(n),
  .page-support .steps .step:nth-child(n),
  .page-support .actions .action:nth-child(n){
    padding:var(--layout-card-padding);
    border:1px solid var(--dr-line);
    border-radius:var(--layout-card-radius);
    background:#fff;
  }

  .page-support .quicknav,
  .page-support .steps,
  .page-support .actions{
    gap:var(--layout-card-gap);
  }
  .page-support .quicknav a:nth-child(n),
  .page-support .step:nth-child(n),
  .page-support .action:nth-child(n){
    border:1px solid var(--dr-line);
  }
  .page-support .contact .action:nth-child(n){
    border-color:rgba(72,103,132,.22);
    background:rgba(255,255,255,.42);
  }
}

/* Final system pass: badges, accordions, callouts and quiet supporting UI. */
.page-home,
.page-details,
.page-policies,
.page-support{
  --layout-badge-height:26px;
  --layout-note-bg:#eef3f8;
}

/* Compact metadata uses one pill language everywhere. */
.page-home .mcard .mtrust span,
.page-home .mcard .msel-badge,
.page-details .person .badge{
  display:inline-flex;
  min-height:var(--layout-badge-height);
  align-items:center;
  justify-content:center;
  padding:0 9px;
  border:0;
  border-radius:999px;
  background:var(--dr-blue-soft);
  color:#536476;
  font-size:10px;
  font-weight:700;
  line-height:1.2;
  letter-spacing:-.01em;
  text-decoration:none;
}
.page-home .mcard .msel-badge{display:none}
.page-home .mcard.sel .msel-badge{display:inline-flex}
.page-details .person .badge{margin-top:14px}
.page-home .mcard .mtrust{gap:6px}

/* FAQ rows behave and read the same on service and support pages. */
.page-details .faq details,
.page-support .faq details{
  margin-top:10px;
  padding:0;
  overflow:hidden;
  border:1px solid var(--dr-line);
  border-radius:var(--layout-card-radius);
  background:#fff;
}
.page-details .faq summary,
.page-support .faq summary{
  min-height:64px;
  padding:16px 48px 16px 18px;
  display:flex;
  align-items:center;
  line-height:1.5;
}
.page-details .faq details>p,
.page-support .faq details>p{
  margin:0;
  padding:0 18px 18px;
  color:var(--dr-muted);
}
.page-details .faq details[open],
.page-support .faq details[open]{
  padding-inline:0;
  background:#fff;
}

/* Informational callouts no longer switch color and shape between pages. */
.page-details .callout,
.page-policies .callout{
  padding:24px;
  border:1px solid var(--dr-line);
  border-left:3px solid var(--dr-blue);
  border-radius:var(--layout-card-radius);
  background:var(--layout-note-bg);
  color:var(--dr-ink);
}
.page-details .callout p,
.page-policies .callout p{
  color:var(--dr-text);
}
.page-support .section h2{margin-top:0}

/* Footer navigation wraps with the same row and column rhythm. */
.page-home footer .f-policy,
.page-details footer .f-policy,
.page-policies footer .f-policy,
.page-support footer .footer-policy{
  gap:8px 16px;
}

/* Keep long-form tables visually connected to the neutral surface system. */
.page-details .table-wrap,
.page-policies .table{
  border-color:var(--dr-line);
}
.page-details th,
.page-policies .table th{
  background:#f0f2f5;
}

@media(max-width:700px){
  .page-home .hero-slide h1,
  .page-home .hero-slide h2{
    font-size:30px;
    line-height:1.15;
  }
  .page-details .faq summary,
  .page-support .faq summary{
    min-height:60px;
    padding:14px 44px 14px 16px;
    font-size:14px;
  }
  .page-details .faq details>p,
  .page-support .faq details>p{
    padding:0 16px 16px;
  }
  .page-details .callout,
  .page-policies .callout{
    padding:20px;
  }
}

@media(max-width:360px){
  .page-home,
  .page-details,
  .page-policies,
  .page-support{
    --layout-gutter:16px;
  }
}

/* Interaction and alignment pass: controls share one height and visual grammar. */
.page-home,
.page-details,
.page-policies,
.page-support{
  --layout-control-height:44px;
  --layout-control-height-lg:48px;
}

.page-home .nav .btn-blue,
.page-home .hero-active-cta,
.page-home .models-more,
.page-details .top .btn-blue,
.page-details .hero>.wrap>.hero-actions .cta,
.page-details .hero>.wrap>.hero-actions .ghost,
.page-policies .back,
.page-policies .doc-link,
.page-support .support-order,
.page-support .btn{
  min-height:var(--layout-control-height);
  border-radius:var(--layout-control-radius);
}
.page-home .hero-active-cta,
.page-details .hero>.wrap>.hero-actions .cta,
.page-details .hero>.wrap>.hero-actions .ghost{
  padding-inline:18px;
}

/* Segmented device choice, pill filters, and ordinary actions are distinct. */
.page-home .dev-toggle{
  padding:4px;
  border-radius:10px;
  gap:4px;
}
.page-home .dev-toggle .dbtn:nth-child(n){
  min-height:var(--layout-control-height);
  border-radius:7px;
  padding:0 18px;
}
.page-home .filter{gap:8px}
.page-home .filter .fchip:nth-child(n){
  min-height:var(--layout-control-height);
  padding:0 16px;
  border-radius:999px;
}
.page-home .models-more{
  padding-inline:22px;
}
.page-home .hero-controls .hero-arrow{
  width:var(--layout-control-height);
  height:var(--layout-control-height);
  min-height:var(--layout-control-height);
  flex-basis:var(--layout-control-height);
}

.page-home .final .btn-blue,
.page-details .detail-final .btn-blue{
  min-height:var(--layout-control-height-lg);
  padding:0 22px;
  border-radius:var(--layout-control-radius);
}
.page-support .action .btn,
.page-support .contact .btn,
.page-support .support-form-actions .btn{
  border-radius:var(--layout-control-radius);
}
.page-policies .tabs a{
  min-height:var(--layout-control-height);
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

/* Detail-page supporting actions remain text links, but gain a full touch target. */
.page-details .section>.wrap>.hero-actions .cta,
.page-details .section>.wrap>.hero-actions .ghost{
  min-height:var(--layout-control-height);
  align-items:center;
  padding:8px 0 7px;
}

/* Media and data containers follow the same curvature scale as cards. */
.page-details .media img,
.page-details .media video,
.page-details .table-wrap,
.page-support .video{
  border-radius:var(--layout-card-radius);
}
.page-home .featured-visual,
.page-home .mcard .mimg,
.page-details .person img{
  border-radius:var(--layout-control-radius);
}

/* Keep cloned boundary slides visually active during the infinite-loop handoff. */
.page-home .hero-slide.is-visual-active .hero-slide-copy>*{
  opacity:1;
  transform:translate3d(0,0,0);
}
.page-home .hero-slide.is-visual-active .hero-slide-kicker{transition-delay:.08s}
.page-home .hero-slide.is-visual-active .hero-slide-copy h1,
.page-home .hero-slide.is-visual-active .hero-slide-copy h2{transition-delay:.15s}
.page-home .hero-slide.is-visual-active .hero-slide-lead{transition-delay:.22s}

@media(max-width:700px){
  /* Horizontal rails start exactly on the 20px page line. */
  .page-home .shelf-track,
  .page-home .mgrid{
    margin-left:calc(var(--layout-gutter) * -1);
  }

  .page-home .nav .btn-blue,
  .page-home .hero-active-cta,
  .page-home .models-more,
  .page-details .top .btn-blue,
  .page-details .hero>.wrap>.hero-actions .cta,
  .page-details .hero>.wrap>.hero-actions .ghost,
  .page-policies .back,
  .page-policies .doc-link,
  .page-support .support-order,
  .page-support .btn{
    min-height:var(--layout-control-height);
  }

  .page-home .dev-toggle{width:100%}
  .page-home .dev-toggle .dbtn:nth-child(n){
    flex:1;
    min-width:0;
    padding-inline:12px;
  }

  .page-details .grid2,
  .page-details .grid3,
  .page-details .grid4,
  .page-details .team,
  .page-details .media,
  .page-details .table-wrap{
    margin-top:28px;
  }

  /* Keep the existing mobile design while making operational copy readable. */
  .page-home .sales-live-status,
  .page-home .shelf-head p,
  .page-home .home-section-head>div>p,
  .page-home #models .sec-kicker,
  .page-home .media-proof-sec .sec-kicker{
    font-size:10.5px;
    line-height:1.5;
    letter-spacing:.08em;
  }

  .page-home .featured-copy small{font-size:10.5px}
  .page-home .featured-copy span{font-size:11.5px;line-height:1.5}
  .page-home .mcard .msub{font-size:11px;line-height:1.55}
  .page-home .models-brandline{font-size:11.5px}
  .page-home .model-guide-head p{font-size:13px;line-height:1.65}
  .page-home .price-note,
  .page-home .representative-note{font-size:12.5px;line-height:1.75}
  .page-home .swipe-hint{font-size:11.5px}
  .page-home .video-meta span{font-size:11px;line-height:1.6}
}
/* Browser feedback: this section label is intentionally text-only. */
.page-home #different .sec-kicker {
  gap: 0;
}

.page-home #different .sec-kicker::before {
  display: none;
}
