:root{
    --accent:#1C6DD0;
    --accent-dark:#134E8C;
    --ink:#13273D;
    --muted:#5B7285;
    --bg:#F6F8F9;
    --chip-bg:#EAF3FC;
    --border:#E3E9ED;
    box-sizing:border-box;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  *{box-sizing:border-box;}
  html{scroll-padding-top: env(safe-area-inset-top, 0px);}
  html,body{height:100%;}
  body{
    margin:0;
    font-family:'IBM Plex Sans', system-ui, sans-serif;
    background:var(--bg);
    color:var(--ink);
    -webkit-font-smoothing:antialiased;
  }
  a{text-decoration:none;color:inherit;}
  img{max-width:100%;display:block;}
  h1,h2{font-family:'Fraunces', Georgia, serif; font-weight:700; margin:0;}

  .wrap{max-width:1180px; margin:0 auto; padding:0 24px;}

  /* Offer bar */
  .offer-bar{background:var(--ink); color:#fff; text-align:center; padding:10px 16px; font-size:13.5px; font-weight:500; line-height:1.5;}
  .offer-bar strong{font-weight:700;}

  /* Header */
  header{display:flex; align-items:center; justify-content:space-between; padding:18px 24px; background:#fff; border-bottom:1px solid var(--border); position:sticky; top:0; z-index:20;}
  .logo{font-family:'Fraunces', serif; font-weight:700; font-size:22px; color:var(--ink); display:flex; align-items:center; gap:8px;}
  .logo img{height:30px; width:auto; display:block;}
  .logo-text{display:flex; flex-direction:column; line-height:1.15;}
  .logo-slogan{font-family:'IBM Plex Sans', sans-serif; font-weight:400; font-size:10.5px; color:var(--muted); letter-spacing:0.2px;}
  .header-nav{display:flex; align-items:center; gap:18px;}
  .header-tagline{font-size:14px; color:var(--muted); display:none;}
  @media (min-width:1000px){ .header-tagline{display:block;} }

  .btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:14px 24px; border-radius:999px; font-family:'IBM Plex Sans',sans-serif; font-weight:600; font-size:15px; border:2px solid transparent; cursor:pointer; white-space:nowrap;}
  .btn img{border-radius:5px; object-fit:contain; flex-shrink:0;}
  .btn-primary{background:var(--accent); color:#fff;}
  .btn-primary:hover{background:var(--accent-dark);}
  .btn-ghost{background:transparent; color:var(--accent); border-color:var(--accent);}
  .btn-subtle{background:transparent; color:var(--muted); border:1px solid var(--border); padding:9px 18px; font-size:13.5px; font-weight:500;}
  .btn-subtle:hover{color:var(--accent-dark); border-color:var(--accent-dark); background:var(--chip-bg);}
  .btn-ghost:hover{background:var(--chip-bg);}
  .btn-white{background:#fff; color:var(--ink);}
  .btn-white:hover{background:#EAF0F5;}
  .btn-hero{padding:18px 32px; font-size:17px;}
  .btn-block{width:100%;}

  .icon-badge{width:56px; height:56px; border-radius:50%; background:var(--chip-bg); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
  .icon-badge svg{stroke:var(--accent-dark);}

  /* Hero */
  .hero{padding:32px 0 56px 0;}
  .hero-inner{display:flex; align-items:flex-start; gap:56px;}
  .hero-copy{flex:1; min-width:0; display:flex; flex-direction:column; gap:20px;}
  .eyebrow{text-transform:uppercase; letter-spacing:1.5px; font-size:13px; font-weight:600; color:var(--accent-dark);}
  .hero-copy h1{font-size:46px; line-height:1.1;}
  .hero-copy p.lead{margin:0; font-size:18px; line-height:1.6; color:var(--muted);}
  .price-line{font-size:17px; font-weight:600;}
  .price-line .accent{color:var(--accent-dark);}
  .hero-actions{display:flex; gap:14px; flex-wrap:wrap; margin-top:4px;}
  .hero-visual{flex-shrink:0; width:460px; height:320px; background:#fff; border-radius:28px; border:1px solid var(--border); padding:14px; overflow:hidden;}
  .hero-visual img{width:100%; height:100%; object-fit:cover; border-radius:18px;}

  /* Usos */
  .usos{padding:0 0 48px 0; display:flex; justify-content:center; gap:48px; flex-wrap:wrap;}
  .uso-item{display:flex; flex-direction:column; align-items:center; gap:10px; width:140px; text-align:center;}
  .uso-item .icon-badge{width:52px; height:52px;}
  .uso-item span{font-size:14px; font-weight:600;}

  /* Bullets + form */
  .capture{padding:0 0 72px 0; display:flex; align-items:flex-start; justify-content:center; gap:48px; flex-wrap:wrap;}
  .capture-left{width:380px; max-width:100%; display:flex; flex-direction:column; gap:24px;}
  .capture-left h3{font-family:'Fraunces', serif; font-weight:700; font-size:19px;}
  .mini-icons{display:flex; gap:18px; flex-wrap:wrap;}
  .mini-icon{display:flex; flex-direction:column; align-items:center; gap:8px; width:100px; text-align:center;}
  .mini-icon .icon-badge{width:46px; height:46px;}
  .mini-icon span{font-size:12.5px; font-weight:600;}
  .bullets{display:flex; flex-direction:column; gap:20px;}
  .bullet{display:flex; align-items:flex-start; gap:12px;}
  .bullet .icon-badge{width:30px; height:30px;}
  .bullet p{margin:0; font-size:17px; line-height:1.55;}

  .form-card{width:520px; max-width:100%; background:#fff; border-radius:24px; border:1px solid var(--border); padding:36px; display:flex; flex-direction:column; gap:16px;}
  .form-card h3{font-family:'Fraunces', serif; font-weight:700; font-size:22px;}
  .form-card .sub{margin:0; font-size:14px; color:var(--muted);}
  .field{display:flex; flex-direction:column; gap:6px;}
  .field label{font-size:13px; font-weight:600;}
  .field input{padding:13px 15px; border-radius:12px; border:1px solid #D7E0E6; font-size:15px; font-family:inherit; width:100%;}
  .field-row{display:flex; gap:14px;}
  .field-row .field{flex:1; min-width:0;}
  .consent{display:flex; align-items:flex-start; gap:10px;}
  .consent input{margin-top:3px; width:18px; height:18px; flex-shrink:0;}
  .consent label{font-size:12.5px; line-height:1.5; color:var(--muted);}
  .consent a{color:var(--accent-dark); text-decoration:underline;}

  /* Benefits */
  .benefits{padding:64px 0; background:#fff;}
  .benefits h2{text-align:center; font-size:30px; margin-bottom:40px;}
  .benefit-grid{display:flex; gap:28px; flex-wrap:wrap;}
  .benefit-card{flex:1; min-width:240px; background:var(--bg); border-radius:20px; padding:28px; display:flex; flex-direction:column; gap:14px; overflow:hidden;}
  .benefit-card.has-photo{padding:0 0 28px 0;}
  .benefit-photo{width:100%; height:160px; overflow:hidden;}
  .benefit-photo img{width:100%; height:100%; object-fit:cover; display:block;}
  .benefit-card.has-photo .benefit-body{padding:20px 28px 0 28px; display:flex; flex-direction:column; gap:14px;}
  .benefit-card .icon-badge{border-radius:14px; width:56px; height:56px;}
  .benefit-card h4{margin:0; font-size:18px; font-weight:600;}
  .benefit-card p{margin:0; font-size:14.5px; line-height:1.6; color:var(--muted);}

  /* How it works */
  .how{padding:64px 0; background:var(--bg);}
  .how h2{text-align:center; font-size:30px; margin-bottom:40px;}
  .how-steps{display:flex; align-items:flex-start; justify-content:center; gap:20px; flex-wrap:wrap;}
  .step{width:260px; display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center;}
  .step-num{width:40px; height:40px; border-radius:50%; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700;}
  .step h4{margin:0; font-size:16px; font-weight:600;}
  .step p{margin:0; font-size:13.5px; color:var(--muted); line-height:1.5;}
  .step-arrow{padding-top:8px; color:var(--muted); font-size:20px;}
  @media (max-width:860px){ .step-arrow{display:none;} }

  /* CTA final */
  .cta-final{padding:72px 24px; background:var(--ink); color:#fff; text-align:center; display:flex; flex-direction:column; align-items:center; gap:18px;}
  .cta-final h2{color:#fff; font-size:28px;}
  .cta-final p{margin:0; max-width:520px; font-size:15px; line-height:1.6; color:#C6D3DE;}
  .cta-final .hero-actions{justify-content:center;}

  /* Final banner image */
  .final-banner{width:100%; height:240px; overflow:hidden;}
  .final-banner img{width:100%; height:100%; object-fit:cover;}

  /* Footer */
  footer{background:#fff; padding:28px 24px;}
  .footer-row{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;}
  .footer-row.top{border-bottom:1px solid var(--border); padding-bottom:20px; margin-bottom:20px;}
  .footer-brand{font-family:'Fraunces', serif; font-weight:700; font-size:17px; display:flex; align-items:center; gap:8px;}
  .footer-brand img{height:26px; width:auto; display:block;}
  .footer-loc{font-size:14px; color:var(--muted);}
  .footer-links{font-size:13px; color:var(--muted);}
  .footer-links a{color:var(--muted);}
  .footer-links a:hover{color:var(--accent-dark);}
  .social{display:flex; gap:10px;}
  .social a{width:34px; height:34px; border-radius:50%; background:var(--accent); display:flex; align-items:center; justify-content:center;}

  /* Sticky mobile CTA bar */
  .sticky-cta{display:none;}

  /* Cookie consent banner */
  #cookie-banner{position:fixed; left:0; right:0; bottom:0; z-index:999; background:#fff; border-top:1px solid var(--border); box-shadow:0 -8px 24px rgba(19,39,61,0.12); padding:20px 24px; padding-bottom:calc(20px + env(safe-area-inset-bottom,0px));}
  #cookie-banner .cb-inner{max-width:1120px; margin:0 auto; display:flex; align-items:center; gap:24px; flex-wrap:wrap;}
  #cookie-banner p{margin:0; font-size:13.5px; color:var(--muted); line-height:1.6; flex:1; min-width:240px;}
  #cookie-banner p a{color:var(--accent-dark); text-decoration:underline;}
  #cookie-banner .cb-actions{display:flex; gap:10px; flex-wrap:wrap;}
  #cookie-banner .cb-actions button{font-family:inherit;}
  #cookie-panel{display:none; max-width:1120px; margin:16px auto 0 auto; border-top:1px solid var(--border); padding-top:16px;}
  #cookie-panel.open{display:block;}
  .cb-row{display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:10px 0; border-bottom:1px solid var(--border);}
  .cb-row:last-child{border-bottom:none;}
  .cb-row-text{flex:1;}
  .cb-row-text strong{font-size:13.5px; display:block; margin-bottom:2px;}
  .cb-row-text span{font-size:12.5px; color:var(--muted); line-height:1.5;}
  .cb-switch{position:relative; width:40px; height:22px; flex-shrink:0;}
  .cb-switch input{opacity:0; width:0; height:0;}
  .cb-slider{position:absolute; inset:0; background:#D7E0E6; border-radius:999px; cursor:pointer; transition:background .15s;}
  .cb-slider::before{content:""; position:absolute; width:16px; height:16px; left:3px; top:3px; background:#fff; border-radius:50%; transition:transform .15s;}
  .cb-switch input:checked + .cb-slider{background:var(--accent);}
  .cb-switch input:checked + .cb-slider::before{transform:translateX(18px);}
  .cb-switch input:disabled + .cb-slider{opacity:0.6; cursor:not-allowed;}
  #cookie-panel .cb-save{margin-top:14px;}
  @media (max-width:860px){
    #cookie-banner .cb-inner{flex-direction:column; align-items:stretch;}
    #cookie-banner .cb-actions{width:100%;}
    #cookie-banner .cb-actions button{flex:1;}
  }

  /* Mobile */
  @media (max-width:860px){
    .wrap{padding:0 20px;}
    .header-tagline{display:none;}
    .hero{padding:32px 0 24px 0;}
    .hero-inner{flex-direction:column; gap:24px;}
    .hero-copy h1{font-size:32px;}
    .hero-copy p.lead{font-size:16px;}
    .hero-visual{width:100%; height:220px;}
    .hero-actions{flex-direction:column;}
    .hero-actions .btn{width:100%;}
    .usos{gap:16px; padding-bottom:32px;}
    .uso-item{width:96px;}
    .uso-item span{font-size:12px;}
    .capture{flex-direction:column; align-items:stretch; gap:32px; padding-bottom:48px;}
    .capture-left{width:100%;}
    .form-card{width:100%; padding:24px;}
    .field-row{flex-direction:row;}
    .benefits{padding:40px 0;}
    .benefit-grid{flex-direction:column;}
    .how{padding:40px 0;}
    .how-steps{flex-direction:column; align-items:center;}
    .cta-final{padding:48px 20px 96px 20px;}
    .cta-final .hero-actions{flex-direction:column; width:100%;}
    .final-banner{height:150px;}
    footer{padding-bottom:96px;}
    .footer-row{flex-direction:column; align-items:flex-start;}
    .sticky-cta{
      display:flex; position:fixed; bottom:0; left:0; width:100%;
      padding:12px 16px; padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
      background:#fff; border-top:1px solid var(--border);
      box-shadow:0 -4px 14px rgba(19,39,61,0.08); gap:10px; z-index:30;
    }
    .sticky-cta .btn{flex:1;}
    header{padding:14px 20px;}
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#F6F8F9; --ink:#13273D; /* keep light brand look even in dark mode viewers */
    }
  }

/* ---- */

.article-hero{background:#fff; padding:48px 0 32px 0; border-bottom:1px solid var(--border);}
  .article-banner{width:100%; height:300px; border-radius:20px; overflow:hidden; margin-top:20px;}
  .article-banner img{width:100%; height:100%; object-fit:cover; display:block;}
  .article-hero .eyebrow{margin-bottom:12px;}
  .article-hero h1{font-size:34px; line-height:1.15;}
  .article-hero .meta{font-size:13px; color:var(--muted); margin-top:10px;}
  .article-body{padding:40px 0 24px 0;}
  .article-body .wrap{max-width:760px;}
  .article-body h2{font-size:22px; margin:36px 0 14px 0; font-family:'Fraunces',serif;}
  .article-body p{font-size:16.5px; line-height:1.75; color:var(--ink); margin:0 0 16px 0;}
  .article-body ul{margin:0 0 16px 0; padding-left:20px;}
  .article-body li{font-size:16px; line-height:1.7; margin-bottom:8px; color:var(--ink);}
  .article-body table{width:100%; border-collapse:collapse; margin:20px 0; font-size:14.5px;}
  .article-body th, .article-body td{border:1px solid var(--border); padding:10px 12px; text-align:left;}
  .article-body th{background:var(--bg); font-weight:600;}
  .back-link{display:inline-block; margin-bottom:18px; font-size:14px; font-weight:600; color:var(--accent-dark);}
  .article-cta{margin:40px 0 8px 0; background:var(--bg); border:1px solid var(--border); border-radius:20px; padding:28px; display:flex; flex-direction:column; gap:14px; align-items:flex-start;}
  .article-cta h3{font-size:19px; margin:0;}
  .article-cta p{margin:0; font-size:14.5px; color:var(--muted);}
  .blog-hero{background:#fff; padding:48px 0 32px 0; border-bottom:1px solid var(--border); text-align:center;}
  .blog-hero h1{font-size:34px;}
  .blog-hero p{max-width:560px; margin:14px auto 0 auto; color:var(--muted); font-size:16px;}
  .blog-grid{display:flex; flex-direction:column; gap:20px; margin:32px 0 60px 0;}
  .blog-card{display:block; background:#fff; border:1px solid var(--border); border-radius:20px; padding:26px 28px; overflow:hidden;}
  .blog-card.has-thumb{padding:0 0 26px 0; display:flex; flex-direction:column;}
  .blog-thumb{width:100%; height:180px; overflow:hidden;}
  .blog-thumb img{width:100%; height:100%; object-fit:cover; display:block;}
  .blog-card.has-thumb .blog-card-body{padding:20px 28px 0 28px;}
  .blog-card h2{font-size:20px; margin:0 0 8px 0;}
  .blog-card p{margin:0; font-size:15px; color:var(--muted); line-height:1.6;}
  .blog-card .read-more{display:inline-block; margin-top:12px; font-size:14px; font-weight:600; color:var(--accent-dark);}
  @media (max-width:860px){
    .article-hero h1{font-size:26px;}
    .blog-hero h1{font-size:26px;}
  }

/* ---- */

.calc-hero{background:#fff; padding:48px 0 28px 0; border-bottom:1px solid var(--border); text-align:center;}
  .calc-hero h1{font-size:32px;}
  .calc-hero p{max-width:560px; margin:14px auto 0 auto; color:var(--muted); font-size:16px;}
  .calc-wrap{padding:40px 0 64px 0;}
  .calc-grid{display:flex; gap:32px; align-items:flex-start; flex-wrap:wrap;}
  .calc-card{flex:1; min-width:300px; background:#fff; border:1px solid var(--border); border-radius:24px; padding:32px;}
  .calc-card h2{font-size:19px; margin:0 0 18px 0; font-family:'Fraunces',serif;}
  .calc-field{display:flex; flex-direction:column; gap:6px; margin-bottom:18px;}
  .calc-field label{font-size:13.5px; font-weight:600;}
  .calc-field .hint{font-size:12px; color:var(--muted); font-weight:400;}
  .calc-field input{padding:13px 15px; border-radius:12px; border:1px solid #D7E0E6; font-size:15px; font-family:inherit; width:100%;}
  .calc-results{background:var(--ink); color:#fff; border-radius:24px; padding:32px; display:flex; flex-direction:column; gap:18px;}
  .calc-results h2{color:#fff; font-size:19px; margin:0;}
  .result-row{display:flex; align-items:baseline; justify-content:space-between; border-bottom:1px solid rgba(255,255,255,0.15); padding-bottom:14px;}
  .result-row:last-child{border-bottom:none; padding-bottom:0;}
  .result-label{font-size:14px; color:#C6D3DE;}
  .result-value{font-size:24px; font-weight:700; font-family:'Fraunces',serif;}
  .result-value.big{font-size:30px; color:#8FD3FF;}
  .calc-note{font-size:12.5px; color:var(--muted); margin-top:20px; line-height:1.6;}
  @media (max-width:860px){
    .calc-hero h1{font-size:26px;}
  }

/* ---- */

.legal-hero{background:#fff; padding:44px 0 28px 0; border-bottom:1px solid var(--border);}
  .legal-hero h1{font-size:30px;}
  .legal-hero .meta{font-size:13px; color:var(--muted); margin-top:8px;}
  .legal-body{padding:36px 0 24px 0;}
  .legal-body .wrap{max-width:780px;}
  .legal-body h2{font-size:20px; margin:32px 0 12px 0; font-family:'Fraunces',serif;}
  .legal-body h3{font-size:16px; margin:22px 0 8px 0;}
  .legal-body p{font-size:15.5px; line-height:1.7; color:var(--ink); margin:0 0 14px 0;}
  .legal-body ul{margin:0 0 14px 0; padding-left:20px;}
  .legal-body li{font-size:15px; line-height:1.65; margin-bottom:6px; color:var(--ink);}
  .legal-body table{width:100%; border-collapse:collapse; margin:16px 0; font-size:13.5px;}
  .legal-body th, .legal-body td{border:1px solid var(--border); padding:9px 11px; text-align:left; vertical-align:top;}
  .legal-body th{background:var(--bg); font-weight:600;}
  .legal-body .placeholder{background:#FFF3CD; padding:1px 5px; border-radius:4px; font-weight:600;}
  .back-link{display:inline-block; margin-bottom:16px; font-size:14px; font-weight:600; color:var(--accent-dark);}