:root{
    --navy-950:#101a33;
    --navy-900:#152246;
    --navy-800:#1c2f5c;
    --blue-700:#1f3d8f;
    --blue-600:#2a52c9;
    --ink:#1b2437;
    --muted:#5b6478;
    --bg-top:#eef1fb;
    --bg-bottom:#f7f8fc;
    --card-bg:#ffffff;
    --line:#e6e9f4;
    --radius-lg:18px;
    --radius-md:14px;
    --radius-sm:10px;
    --shadow-card:0 4px 18px rgba(20,30,70,0.06);
    --shadow-icon:0 6px 16px rgba(20,30,70,0.12);
  }

  *{box-sizing:border-box;}
  html{-webkit-text-size-adjust:100%;}
  body{
    margin:0;
    font-family:'Manrope', sans-serif;
    color:var(--ink);
    line-height:1.55;
    background:#ffffff;
  }

  .wrap{
    max-width:1920px;
    margin:0 auto;
    padding:36px 60px 70px;
  }

  /* ---------- Header section — fixed 1920px ---------- */
  .cp-header{
    max-width:1920px;
    margin:0 auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:60px;
    padding:50px 120px;
  }

  .cp-header-copy{
    flex:1;
    max-width:700px;
  }

  .cp-header-copy h1{
    font-size:52px;
    line-height:1.05;
    margin:0 0 18px;
    color: #11A0F5;
    font-weight:800;
    letter-spacing:-0.01em;
  }

  .date-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background: #eef1fb;
    color:#000000;
    font-size:14px;
    font-weight:700;
    padding:9px 16px;
    border-radius:999px;
    margin-bottom:26px;
  }
  .date-badge i{font-size:13px;}

  .cp-header-copy h2{
    font-size:30px;
    line-height:1.25;
    margin:0 0 14px;
    color:var(--navy-950);
    font-weight:800;
  }

  .cp-header-copy p{
    font-size:22px;
    margin:0;
    color:var(--ink);
    max-width:560px;
  }

  .cp-header-copy a{
    color:var(--blue-600);
    font-weight:700;
    text-decoration:none;
  }
  .cp-header-copy a:hover{text-decoration:underline;}

  .cp-hero{
    flex:none;
    width:460px;
  }
  .cp-hero img{
    width:100%;
    height:auto;
    display:block;
  }

  /* ---------- Sub-section (card grid) — fixed 1320px ---------- */
  .cp-grid{
    max-width:1320px;
    margin:0 auto;
    display:grid;
    grid-template-columns:1fr 1.1fr;
    grid-template-rows:auto auto;
    gap:24px;
  }

  .cp-card{
    background:var(--card-bg);
    border:1px solid var(--line);
    border-radius:var(--radius-lg);
    padding:30px 30px 28px;
    box-shadow:var(--shadow-card);
    position:relative;
  }

  .cp-card-icon{grid-column:1;}
  .cp-card-types{grid-column:2; grid-row:1 / 3;}
  .cp-card-third{grid-column:1 / -1;}

  /* Icon circles */
  .cp-icon-circle{
    width:56px;
    height:56px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    flex:none;
    box-shadow:var(--shadow-icon);
  }
  .cp-icon-circle i{font-size:22px;}

  .cp-icon-outline{
    background:var(--bg-top);
    color:var(--blue-700);
    margin-bottom:18px;
  }
  .cp-icon-filled{
    background:var(--blue-700);
    color:#ffffff;
    margin-bottom:18px;
  }

  .cp-card h3{
    margin:0 0 14px;
    font-size:30px;
    color:var(--blue-700);
    font-weight:800;
  }

  .cp-card p{
    margin:0 0 10px;
    color:var(--muted);
    font-size:22px;
  }

  /* ---------- Types of Cookies card ---------- */
  .cp-types-banner{
    display:flex;
    align-items:center;
    gap:12px;
    background:#eef1fb;
    color:#000000;
    padding:14px 20px;
    margin:-30px -30px 22px;
  }
  .cp-banner-icon{
    width:34px;
    height:34px;
    border-radius:50%;
    background:rgba(0, 73, 207, 0.15);
    display:flex;
    align-items:center;
    justify-content:center;
    flex:none;
  }
  .cp-banner-icon i{font-size:16px; color:#1f3d8f;}
  .cp-types-banner h3{margin:0; color:#383838; font-size:30px;}

  .cp-sub{
    display:flex;
    gap:16px;
    padding:16px 0;
    border-bottom:1px solid var(--line);
  }
  .cp-sub-last{border-bottom:none; padding-bottom:0;}
  .cp-sub .cp-icon-circle{
    width:48px;
    height:48px;
    background:var(--bg-top);
    color:var(--blue-700);
  }
  .cp-sub .cp-icon-circle i{font-size:19px;}

  .cp-sub-copy h4{
    margin:0 0 8px;
    font-size:26px;
    color:var(--blue-700);
    font-weight:700;
  }
  .cp-sub-copy ul{
    margin:0;
    padding-left:18px;
    color:var(--muted);
    font-size:20px;
  }
  .cp-sub-copy ul li{margin-bottom:4px;}

  /* ---------- Managing cookies checklist ---------- */
  .cp-check-list{
    list-style:none;
    margin:8px 0 16px;
    padding:0;
  }
  .cp-check-list li{
    display:flex;
    align-items:flex-start;
    gap:10px;
    color:var(--muted);
    font-size:20px;
    margin-bottom:10px;
  }
  .cp-check-list li i{color:var(--blue-600); font-size:20px; margin-top:3px;}

  .cp-note{
    display:flex;
    align-items:flex-start;
    gap:10px;
    background:var(--bg-top);
    border-radius:var(--radius-sm);
    padding:14px 16px;
    font-size:22px;
    color:var(--navy-900);
  }
  .cp-note i{color:var(--blue-700); margin-top:7px;}

  /* ---------- Third-party brand row ---------- */
  .cp-brand-list{
    display:flex;
    flex-wrap:wrap;
    gap:100px;
    margin:20px 0 18px;
  }
  .cp-brand{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
    font-size:20px;
    font-weight:700;
    color:var(--ink);
  }
  .cp-brand i{font-size:50px;}
  .cp-brand-analytics{color:#f2994a;}
  .cp-brand-ads{color:#2a52c9;}
  .cp-brand-meta{color:#1877f2;}
  .cp-brand-linkedin{color:#0a66c2;}

  .cp-small{
    font-size:14px;
    color:var(--muted);
    margin:0;
  }

  .cp-watermark{
    position:absolute;
    right:24px;
    bottom:20px;
    width:250px;
    height:auto;
    opacity:0.12;
    pointer-events:none;
  }

  /* ---------- Contact bar ---------- */
  .cp-contact-bar{
    max-width:1320px;
    margin:28px auto 0;
    display:flex;
    align-items:center;
    gap:24px;
    padding:22px 32px;
    background:#eef1fb;
    border-radius:999px;
    color:#000000;
  }
  .cp-contact-left{
    display:flex;
    align-items:center;
    gap:14px;
    font-weight:800;
    font-size:19px;
  }
  .cp-contact-icon{
    width:38px;
    height:38px;
    border-radius:50%;
    background:rgba(0, 73, 207, 0.15);
    color:var(--navy-950);
    display:flex;
    align-items:center;
    justify-content:center;
    flex:none;
  }
  .cp-contact-divider{
    width:1px;
    height:26px;
    background:rgba(12, 12, 12, 0.973);
  }
  .cp-contact-right{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:16px;
  }
  .cp-contact-right a{
    color:#000000;
    font-weight:700;
    text-decoration:none;
  }
  .cp-contact-right a:hover{text-decoration:underline;}

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

  /* Mobile Small: 320px – 480px */
  @media (max-width:480px){
    .wrap{padding:20px 16px 44px;}

    .cp-header{
      flex-direction:column-reverse;
      gap:22px;
      padding:26px 16px 34px;
      text-align:left;
    }
    .cp-header-copy{max-width:100%;}
    .cp-header-copy h1{font-size:26px;}
    .cp-header-copy h2{font-size:17px;}
    .cp-header-copy p{font-size:14.5px;}
    .date-badge{font-size:11.5px; padding:7px 12px; margin-bottom:16px;}
    .date-badge i{font-size:11.5px;}
    .cp-hero{width:100%; max-width:200px; margin:0 auto;}

    .cp-grid{
      max-width:100%;
      grid-template-columns:1fr;
      grid-template-rows:none;
      gap:14px;
    }
    .cp-card-icon,
    .cp-card-types,
    .cp-card-third{grid-column:1; grid-row:auto;}

    .cp-card{padding:20px;}
    .cp-card h3{font-size:19px; margin-bottom:10px;}
    .cp-card p{font-size:14.5px;}

    .cp-types-banner{
      margin:-20px -20px 16px;
      padding:12px 16px;
    }
    .cp-types-banner h3{font-size:19px;}
    .cp-banner-icon{width:28px; height:28px;}
    .cp-banner-icon i{font-size:13px;}

    .cp-sub{gap:12px; padding:12px 0;}
    .cp-sub .cp-icon-circle{width:38px; height:38px;}
    .cp-sub .cp-icon-circle i{font-size:15px;}
    .cp-sub-copy h4{font-size:16.5px;}
    .cp-sub-copy ul{font-size:13.5px;}

    .cp-check-list li{font-size:14px;}
    .cp-note{font-size:13.5px; padding:12px 14px;}

    .cp-brand-list{gap:24px; justify-content:center;}
    .cp-brand{font-size:12.5px;}
    .cp-brand i{font-size:30px;}
    .cp-watermark{width:100px;}

    .cp-contact-bar{
      max-width:100%;
      flex-direction:column;
      align-items:flex-start;
      gap:10px;
      padding:18px 20px;
      border-radius:var(--radius-lg);
    }
    .cp-contact-left{font-size:16px;}
    .cp-contact-divider{display:none;}
    .cp-contact-right{font-size:14px;}
  }

  /* Mobile Large: 481px – 767px */
  @media (min-width:481px) and (max-width:767px){
    .wrap{padding:26px 24px 50px;}

    .cp-header{
      flex-direction:column-reverse;
      gap:26px;
      padding:32px 24px 40px;
      text-align:left;
    }
    .cp-header-copy{max-width:100%;}
    .cp-header-copy h1{font-size:32px;}
    .cp-header-copy h2{font-size:21px;}
    .cp-header-copy p{font-size:16px;}
    .date-badge{font-size:12.5px;}
    .cp-hero{width:100%; max-width:260px; margin:0 auto;}

    .cp-grid{
      max-width:100%;
      grid-template-columns:1fr;
      grid-template-rows:none;
      gap:16px;
    }
    .cp-card-icon,
    .cp-card-types,
    .cp-card-third{grid-column:1; grid-row:auto;}

    .cp-card h3{font-size:21px;}
    .cp-card p{font-size:15.5px;}
    .cp-types-banner{margin:-30px -30px 20px;}
    .cp-types-banner h3{font-size:21px;}
    .cp-sub-copy h4{font-size:18px;}
    .cp-sub-copy ul{font-size:15px;}
    .cp-check-list li{font-size:15.5px;}
    .cp-note{font-size:15px;}

    .cp-brand-list{gap:40px;}
    .cp-brand{font-size:14px;}
    .cp-brand i{font-size:36px;}
    .cp-watermark{width:130px;}

    .cp-contact-bar{
      max-width:100%;
      flex-wrap:wrap;
      gap:16px;
      border-radius:var(--radius-lg);
    }
    .cp-contact-left{font-size:17px;}
    .cp-contact-right{font-size:15px;}
  }

  /* Tablet: 768px – 991px */
  @media (min-width:768px) and (max-width:991px){
    .cp-header{padding:40px 40px; gap:40px;}
    .cp-header-copy{max-width:420px;}
    .cp-header-copy h1{font-size:38px;}
    .cp-header-copy h2{font-size:24px;}
    .cp-header-copy p{font-size:18px;}
    .cp-hero{width:300px;}

    .cp-grid{
      max-width:100%;
      grid-template-columns:1fr;
      grid-template-rows:none;
      gap:18px;
    }
    .cp-card-icon,
    .cp-card-types,
    .cp-card-third{grid-column:1; grid-row:auto;}

    .cp-card h3{font-size:24px;}
    .cp-card p{font-size:17px;}
    .cp-types-banner h3{font-size:24px;}
    .cp-sub-copy h4{font-size:21px;}
    .cp-sub-copy ul{font-size:16.5px;}

    .cp-brand-list{gap:50px;}
    .cp-brand i{font-size:42px;}
    .cp-watermark{width:170px;}

    .cp-contact-bar{max-width:100%;}
  }

  /* Small Laptop: 992px – 1199px */
  @media (min-width:992px) and (max-width:1199px){
    .cp-header{padding:50px 60px; gap:50px;}
    .cp-header-copy{max-width:520px;}
    .cp-header-copy h1{font-size:42px;}
    .cp-header-copy p{font-size:19px;}
    .cp-hero{width:360px;}

    .cp-grid{max-width:100%; gap:20px;}
    .cp-card h3{font-size:26px;}
    .cp-card p{font-size:19px;}
    .cp-types-banner h3{font-size:26px;}
    .cp-sub-copy h4{font-size:23px;}
    .cp-sub-copy ul{font-size:18px;}

    .cp-brand-list{gap:70px;}
    .cp-contact-bar{max-width:100%;}
  }

  /* Desktop: 1200px – 1439px */
  @media (min-width:1200px) and (max-width:1439px){
    .cp-header{padding:50px 80px;}
    .cp-header-copy h1{font-size:48px;}
    .cp-header-copy p{font-size:20px;}
    .cp-hero{width:420px;}

    .cp-card h3{font-size:28px;}
    .cp-card p{font-size:20px;}
    .cp-types-banner h3{font-size:28px;}
    .cp-brand-list{gap:80px;}
  }

  /* Large Desktop: 1440px and above (base rules above already cover this) */
  @media (min-width:1440px){
    .cp-header{padding:50px 120px;}
  }