/* ============================================================
   RESPONSIVE STYLES
   Append to the bottom of style.css.
   Breakpoints: 1200px | 1024px | 768px | 480px
   ============================================================ */

/* ── 1200px — wide laptop ── */
@media (max-width: 1200px) {

  /* Nav */
  nav {
    padding: 0 32px;
  }

  /* Hero split */
  .hero.hero-split {
    padding: 100px 32px 60px;
    gap: 40px;
  }

  .hero-left {
    width: 48%;
  }

  /* Mega menu — pull in from edges */
  .mega-menu {
    width: 700px;
  }

  /* Sections */
  section,
  .content-section,
  .plans-section,
  .usage-section,
  .compare-section,
  .faq-section {
    padding-left: 32px;
    padding-right: 32px;
  }

  /* Pricing page hero */
  .pricing-hero {
    padding: 60px 32px 40px;
  }

  /* Service tabs */
  .service-tabs {
    padding: 0 32px;
  }

  /* CTA */
  .cta-section,
  .cta-banner {
    margin: 0 32px 80px;
    padding: 56px 48px;
  }

  /* Footer */
  footer {
    padding: 48px 32px;
    grid-template-columns: 1.6fr 1.2fr 1.2fr 1.2fr 1fr;
    gap: 32px;
  }

  .footer-bottom {
    padding: 20px 32px;
  }

  /* Metrics + logos strips */
  .metrics-strip,
  .logos-strip {
    padding: 40px 32px;
  }

  /* Console shell */
  .cc-shell {
    max-width: min(680px, 50vw);
  }

  /* Plan grids */
  .plan-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── 1024px — tablet landscape / small laptop ── */
@media (max-width: 1024px) {

  /* Nav — hide non-essential links */
  .nav-links li:has(> a[href="#"]):not(:first-child) {
    display: none;
  }

  nav {
    padding: 0 24px;
  }

  /* Hero — stack vertically */
  .hero.hero-split {
    flex-direction: column;
    min-height: auto;
    padding: 100px 24px 60px;
    text-align: center;
    gap: 48px;
  }

  .hero-left {
    width: 100%;
    max-width: 640px;
  }

  .hero.hero-split h1 {
    font-size: clamp(36px, 5vw, 56px);
  }

  .hero.hero-split .hero-ctas {
    justify-content: center;
  }

  .hero.hero-split .hero-trust {
    justify-content: center;
    margin-top: 32px;
  }

  .hero-right {
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
  }

  /* Console shell — full width on tablet */
  .cc-shell {
    max-width: 100%;
  }

  .cc-body {
    height: 340px;
  }

  /* Mega menu — full width minus margins */
  .mega-menu {
    width: calc(100vw - 48px);
    left: 24px;
    transform: none;
  }

  .nav-links li.open .mega-menu {
    transform: translateY(0);
  }

  /* Two-col grids → single column */
  .why-grid,
  .two-col,
  .two-col-3,
  .svc-hero {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .svc-hero {
    padding: 60px 24px 40px;
  }

  /* Service hero visual goes below text */
  .hero-visual {
    order: -1;
  }

  /* Pricing grid → 1 col */
  .pricing-grid {
    grid-template-columns: 1fr;
    max-width: 420px;
    margin: 0 auto;
  }

  /* Plan grids */
  .plan-grid {
    grid-template-columns: 1fr;
    max-width: 420px;
    margin: 0 auto;
  }

  .plan-grid-4 {
    grid-template-columns: 1fr 1fr;
  }

  /* Feature grid */
  .feature-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* Use-case grid */
  .usecase-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* CTA section — stack */
  .cta-section,
  .cta-banner {
    flex-direction: column;
    align-items: flex-start;
    margin: 0 24px 64px;
    gap: 28px;
    padding: 48px 32px;
  }

  .cta-right,
  .cta-actions {
    align-items: flex-start;
  }

  /* Footer → 2-col */
  footer {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    padding: 48px 24px;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 20px 24px;
  }

  .footer-bottom-left,
  .footer-bottom-right {
    flex-wrap: wrap;
  }

  /* Metrics strip */
  .metrics-strip {
    padding: 32px 24px;
    gap: 0;
  }

  .metric-item {
    min-width: 120px;
    padding: 0 20px;
  }

  /* Logos strip */
  .logos-strip {
    padding: 32px 24px;
  }

  .logos-row {
    gap: 24px;
  }

  .logo-img {
    height: 44px;
  }

  /* Compliance strip */
  .compliance-strip {
    gap: 24px;
    padding: 24px 24px;
  }

  /* Compare table — horizontal scroll */
  .compare-wrap {
    overflow-x: auto;
  }

  .compare-table {
    min-width: 600px;
  }

  /* How it works + compare */
  .hiw-steps {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .hiw-connector {
    display: none;
  }

  .compare-header-row,
  .compare-row {
    grid-template-columns: 1.8fr 1.2fr 1fr 1fr;
  }

  .compare-feature-col,
  .compare-col {
    padding: 14px 16px;
    font-size: 13px;
  }

  /* Pricing section */
  #pricing .section-label,
  #pricing .section-title,
  #pricing .section-sub,
  #pricing .pricing-grid {
    padding-left: 24px;
    padding-right: 24px;
  }

  /* Pricing page */
  .calc-layout {
    grid-template-columns: 1fr;
  }

  .calc-box {
    position: static;
    grid-column: 1;
    grid-row: 2;
  }

  .calc-rates {
    grid-column: 1;
    grid-row: 1;
  }

  .pricing-hero,
  .pricing-content,
  .pricing-faq {
    padding-left: 24px;
    padding-right: 24px;
  }

  .pricing-tabs {
    padding-left: 24px;
    padding-right: 24px;
  }

  /* Company pages */
  .about-mission-inner,
  .about-dc-inner { grid-template-columns: 1fr; gap: 40px; }
  .about-values-grid { grid-template-columns: repeat(2, 1fr); }
  .careers-perks-grid { grid-template-columns: repeat(2, 1fr); }
  .hc-channels-inner { grid-template-columns: 1fr 1fr; }
  .hc-faq-inner { grid-template-columns: 1fr; gap: 32px; }
  .sales-contact-inner { grid-template-columns: 1fr; gap: 40px; }
}

/* ── 768px — tablet portrait / large phone ── */
@media (max-width: 768px) {

  /* Nav — collapse to logo + CTA only */
  .nav-links {
    display: none;
  }

  nav {
    padding: 0 20px;
  }

  .nav-ctas .btn-ghost {
    display: none;
  }

  /* Hero */
  .hero.hero-split {
    padding: 90px 20px 48px;
  }

  .hero.hero-split h1 {
    font-size: clamp(32px, 7vw, 48px);
    letter-spacing: -1px;
  }

  .hero>p,
  .hero.hero-split>.hero-left>p {
    font-size: 16px;
  }

  .hero-trust {
    gap: 16px;
  }

  .trust-stat strong {
    font-size: 20px;
  }

  /* Sections */
  section,
  .content-section {
    padding: 64px 20px;
  }

  .section-title {
    font-size: clamp(24px, 5vw, 36px);
  }

  /* Services grid → 1 col */
  .services-grid {
    grid-template-columns: 1fr;
  }

  /* Why items */
  .why-grid {
    grid-template-columns: 1fr;
  }

  /* Stat row → 2-col wrap */
  .stat-row {
    flex-wrap: wrap;
  }

  .stat-item {
    flex: 1 1 45%;
    padding: 20px 24px;
  }

  /* Feature grid → 1 col */
  .feature-grid {
    grid-template-columns: 1fr;
  }

  /* Use-case grid → 1 col */
  .usecase-grid {
    grid-template-columns: 1fr;
  }

  /* Plan grids → 1 col */
  .plan-grid,
  .plan-grid-4 {
    grid-template-columns: 1fr;
    max-width: 100%;
  }

  /* Pricing hero */
  .pricing-hero {
    padding: 60px 20px 32px;
  }

  /* Service tabs — scrollable */
  .service-tabs {
    padding: 0 20px;
  }

  .plans-section,
  .usage-section,
  .compare-section,
  .faq-section {
    padding: 40px 20px 0;
  }

  /* Mega menu */
  .mega-menu {
    width: calc(100vw - 32px);
    left: 16px;
  }

  .mega-grid {
    grid-template-columns: 1fr;
  }

  /* Console mockup — condensed on small screens */
  .cc-sidebar {
    display: none;
  }

  .cc-body {
    height: 300px;
  }

  .cc-tabs {
    overflow-x: auto;
  }

  .cc-tab {
    font-size: 8.5px;
    padding: 5px 7px;
  }

  /* Metrics strip → 2×2 wrap */
  .metrics-strip {
    flex-wrap: wrap;
    padding: 32px 20px;
  }

  .metric-item {
    flex: 1 1 40%;
    padding: 16px;
  }

  .metric-div {
    display: none;
  }

  .metric-val {
    font-size: 28px;
  }

  /* Compliance strip */
  .compliance-strip {
    flex-direction: column;
    gap: 14px;
    padding: 24px 20px;
    align-items: flex-start;
  }

  /* Payment section */
  .payment-section {
    padding: 40px 20px;
  }

  .payment-logos {
    gap: 8px;
  }

  .pay-pill {
    padding: 8px 14px;
    font-size: 12px;
  }

  /* CTA section */
  .cta-section {
    margin: 0 16px 48px;
    padding: 40px 24px;
  }

  .cta-left h2 {
    font-size: 28px;
  }

  .cta-banner {
    margin: 0 16px 48px;
    padding: 36px 24px;
  }

  .cta-banner h3 {
    font-size: 24px;
  }

  /* Footer → 1 col */
  footer {
    grid-template-columns: 1fr;
    padding: 40px 20px;
    gap: 32px;
  }

  .footer-brand {
    grid-column: auto;
  }

  /* Service strip */
  .service-strip {
    top: 72px;
    height: 48px;
    padding: 4px;
    border-radius: 40px;
  }

  .strip-btn {
    font-size: 12px;
    padding: 6px 16px;
    gap: 6px;
  }

  .strip-dot {
    width: 6px;
    height: 6px;
  }

  /* Logos strip */
  .logos-strip {
    padding: 28px 20px;
  }

  .logos-row {
    gap: 20px;
  }

  .logo-img {
    height: 36px;
  }

  /* How it works + compare */
  .compare-grid {
    overflow-x: auto;
  }

  .compare-header-row,
  .compare-row {
    min-width: 580px;
  }

  .hiw-step {
    padding: 28px 24px;
  }

  /* Pricing section */
  #pricing {
    padding: 64px 0;
  }

  #pricing .section-label,
  #pricing .section-title,
  #pricing .section-sub,
  #pricing .pricing-grid {
    padding-left: 20px;
    padding-right: 20px;
  }

  .pricing-glow {
    display: none;
  }

  /* Pricing page */
  .pricing-hero {
    padding: 80px 20px 40px;
  }

  .pricing-trust-row {
    gap: 16px;
  }

  .pricing-content,
  .pricing-faq {
    padding-left: 20px;
    padding-right: 20px;
  }

  .pricing-tabs {
    padding-left: 20px;
  }

  .calc-box {
    padding: 24px 20px;
  }

  .calc-result-price {
    font-size: 32px;
  }

  /* Products & Solutions page heroes */
  .products-hero,
  .solutions-hero {
    padding: 80px 20px 40px;
  }

  .products-hero-stats {
    gap: 0;
    padding: 20px 0;
  }

  .products-hero-stat {
    flex: 1 1 45%;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
  }

  .products-hero-stat:nth-child(n+5) {
    border-bottom: none;
  }

  .products-hero-div {
    display: none;
  }

  /* Legal pages */
  .legal-body { padding: 32px 20px 80px; }
  .legal-cookie-header { flex-direction: column; gap: 10px; }

  /* Company pages */
  .about-hero, .about-mission, .about-values, .about-dc, .about-cta { padding-left: 20px; padding-right: 20px; }
  .about-values-grid { grid-template-columns: 1fr; }
  .careers-hero, .careers-why, .careers-roles { padding-left: 20px; padding-right: 20px; }
  .careers-perks-grid { grid-template-columns: 1fr; }
  .careers-role-card { flex-direction: column; align-items: flex-start; }
  .press-hero, .press-main, .press-brand, .press-facts { padding-left: 20px; padding-right: 20px; }
  .press-main-inner, .press-logo-grid, .press-brand-rules { grid-template-columns: 1fr; }
  .hc-hero, .hc-channels, .hc-faq { padding-left: 20px; padding-right: 20px; }
  .hc-channels-inner { grid-template-columns: 1fr; }
  .hc-compliance { padding-left: 20px; padding-right: 20px; gap: 8px; }
  .sales-hero, .sales-contact { padding-left: 20px; padding-right: 20px; }
  .sales-compliance { padding-left: 20px; padding-right: 20px; gap: 8px; }
}

/* ── 480px — small phones ── */
@media (max-width: 480px) {

  /* Service strip */
  .service-strip {
    justify-content: flex-start;
    padding: 4px 8px;
    max-width: 95vw;
  }

  /* Nav */
  nav {
    padding: 0 16px;
    height: 60px;
  }

  .logo {
    font-size: 15px;
  }

  .logo-mark {
    width: 28px;
    height: 28px;
    font-size: 11px;
  }

  .btn-primary {
    padding: 7px 14px;
    font-size: 13px;
  }

  /* Hero */
  .hero.hero-split {
    padding: 80px 16px 40px;
    gap: 32px;
  }

  .hero.hero-split h1 {
    font-size: clamp(28px, 8vw, 40px);
    letter-spacing: -0.5px;
  }

  .hero-ctas {
    flex-direction: column;
    align-items: stretch;
  }

  .btn-large {
    width: 100%;
    text-align: center;
    padding: 14px 20px;
  }

  .hero-trust {
    flex-wrap: wrap;
    gap: 16px;
  }

  .trust-div {
    display: none;
  }

  /* Sections */
  section,
  .content-section {
    padding: 48px 16px;
  }

  .section-sub {
    font-size: 14px;
  }

  /* Service card */
  .service-card {
    padding: 24px 20px;
  }

  /* Why items */
  .why-item {
    padding: 18px 20px;
  }

  /* Pricing cards */
  .pricing-card,
  .plan-card {
    padding: 24px 20px;
  }

  .pricing-price,
  .plan-price {
    font-size: 32px;
  }

  /* Stat row → 1 col */
  .stat-row {
    flex-direction: column;
  }

  .stat-item {
    flex: none;
    width: 100%;
    border-bottom: 1px solid var(--border);
  }

  .stat-item:last-child {
    border-bottom: none;
  }

  /* Usage table — scroll */
  .usage-table-wrap {
    overflow-x: auto;
  }

  .usage-table {
    min-width: 480px;
  }

  /* Terminal */
  .terminal-body {
    padding: 14px;
    font-size: 11px;
  }

  /* Console — hide tabs badge, shrink */
  .cc-tab-badge {
    display: none;
  }

  .cc-body {
    height: 260px;
  }

  .cc-page-title {
    font-size: 11px;
  }

  .cc-page-sub {
    font-size: 9px;
    margin-bottom: 8px;
  }

  .cc-card-desc {
    display: none;
  }

  /* CTA */
  .cta-section {
    margin: 0 12px 40px;
    padding: 32px 20px;
    border-radius: 14px;
  }

  .cta-left h2 {
    font-size: 24px;
  }

  .cta-right {
    align-items: stretch;
    width: 100%;
  }

  .cta-right .btn-large {
    text-align: center;
  }

  /* Footer */
  footer {
    padding: 32px 16px;
    gap: 24px;
  }

  .footer-bottom {
    padding: 16px;
  }

  .footer-bottom-left {
    gap: 10px;
  }

  /* Logos strip */
  .logos-row {
    gap: 16px;
  }

  .logo-img {
    height: 28px;
  }

  /* Metrics */
  .metrics-strip {
    padding: 24px 16px;
  }

  .metric-item {
    flex: 1 1 100%;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
  }

  .metric-item:last-child {
    border-bottom: none;
  }

  /* FAQ */
  .faq-section {
    padding: 32px 16px 0;
  }

  .faq-q {
    font-size: 14px;
  }

  /* Payment */
  .payment-section {
    padding: 32px 16px;
  }

  /* How it works */
  .hiw-step {
    padding: 24px 20px;
  }

  .hiw-step-num {
    font-size: 36px;
    margin-bottom: 14px;
  }

  .hiw-step-body h3 {
    font-size: 15px;
  }
}

/* responsive */
@media (max-width: 1024px) {
  .why-dc-img {
    height: 180px;
  }
}

@media (max-width: 768px) {
  .why-dc-img-wrap {
    margin-top: 24px;
  }

  .why-dc-img {
    height: 200px;
  }
}