:root{--ink:#0a1a2b;--muted:#52657a;--line:#dce5ec;--bg:#f8fbfd;--card:#fff;--green:#10b981;--green2:#41d5b2;--greenSoft:#eafaf5;--blueSoft:#eff6ff;--purpleSoft:#f7f2ff;--shadow:0 16px 45px rgba(18,42,61,.08)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:15px;line-height:1.5}button,input,select{font:inherit}button{cursor:pointer}.top-strip{height:38px;background:#e9f9f1;color:#076a4c;display:flex;align-items:center;gap:11px;padding:0 3.2%;font-size:12px;font-weight:700}.top-strip .help{margin-left:auto}.header{height:84px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 3.2%;gap:40px;position:sticky;top:0;z-index:20}.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-size:25px;letter-spacing:-1px;white-space:nowrap}.logo-box{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:linear-gradient(145deg,#75e8ca,#68aef8);font-weight:950}.logo strong span{color:#22c9a3}.header nav{display:flex;gap:35px;margin:auto;color:#34465a;font-weight:600}.header nav a{padding:31px 0 28px;text-decoration:none;color:inherit}.header nav a.active,.header nav a:hover{color:#079d70;border-bottom:3px solid #10b981}.head-actions{display:flex;gap:10px;align-items:center}.square,.language,.share,.outline{background:#fff;border:1px solid var(--line);border-radius:10px;color:var(--ink)}.square{width:42px;height:42px;font-size:20px}.language{height:42px;padding:0 15px}.share{height:42px;padding:0 17px;color:#087c5b;border-color:#17b981;font-weight:700}main{max-width:1420px;margin:auto;padding:35px 3.2% 0}.hero{display:grid;grid-template-columns:minmax(380px,.8fr) minmax(650px,1.2fr);gap:42px;align-items:start}.intro{padding-top:28px}.badge{display:inline-block;background:var(--greenSoft);border:1px solid #c9eee2;color:#07845f;padding:7px 14px;border-radius:999px;font-weight:800;font-size:12px}.intro h1{font-size:clamp(52px,5.1vw,76px);line-height:.99;letter-spacing:-4px;margin:30px 0 24px}.intro h1 em{font-style:normal;color:#25caa6;text-decoration:underline;text-decoration-color:#6ae0c5;text-decoration-thickness:4px;text-underline-offset:12px}.intro>p{max-width:590px;color:#52677d;font-size:17px;line-height:1.65}.feature-pills{display:flex;gap:10px;margin-top:28px}.feature-pills>div{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 13px;min-width:145px;box-shadow:0 5px 20px rgba(18,42,61,.04)}.feature-pills b{float:left;margin-right:9px;color:#14a97e}.feature-pills strong,.feature-pills small{display:block}.feature-pills strong{font-size:11px}.feature-pills small{font-size:10px;color:var(--muted);margin-top:2px}.trust{display:flex;background:#fff;border:1px solid var(--line);border-radius:13px;margin-top:20px;padding:17px 5px;box-shadow:var(--shadow)}.trust div{flex:1;text-align:center;border-right:1px solid var(--line)}.trust div:last-child{border:0}.trust span{display:block;color:#0eaa78;font-size:22px}.trust b,.trust small{display:block}.trust b{font-size:15px}.trust small{font-size:10px;color:var(--muted)}.compliance{margin-top:20px;background:#fff;border:1px solid var(--line);border-radius:13px;display:flex;align-items:center;padding:18px;gap:18px;box-shadow:var(--shadow)}.illus{width:105px;height:90px;border-radius:12px;background:linear-gradient(145deg,#effff9,#e9f4ff);display:grid;place-items:center;color:#18b78c;font-size:25px}.compliance b{font-size:15px}.compliance p{font-size:12px;color:var(--muted);margin:4px 0}.compliance a{font-size:11px;color:#079d70;font-weight:800}.calculator{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 20px 55px rgba(18,42,61,.1);padding:25px;margin-bottom:0}.calc-title{display:flex;align-items:center;justify-content:space-between}.calc-title h2{margin:0;font-size:24px}.calc-title span{background:var(--greenSoft);color:#087c5b;border:1px solid #cdeee2;border-radius:999px;padding:7px 12px;font-size:11px;font-weight:800}.divider{height:1px;background:var(--line);margin:15px 0}.label-row,.two-col{display:grid;grid-template-columns:1fr 1fr;gap:14px}.label-row{font-weight:750;margin-bottom:7px}.label-row small{color:#7b8b9b}.choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.choice{height:72px;background:#fff;border:1px solid var(--line);border-radius:11px;color:var(--ink);text-align:center}.choice b,.choice small{display:block}.choice b{font-size:14px}.choice small{font-size:11px;color:var(--muted);margin-top:3px}.choice.selected{border:1.5px solid #15b98a;background:#f0fcf8}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-top:22px}.form-grid label,.currency-field{font-weight:700}.form-grid small{display:block;color:var(--muted);font-size:11px;margin-top:4px}.amount-box,.plain-input,.currency-box{height:54px;border:1px solid var(--line);border-radius:10px;display:flex;align-items:center;margin-top:7px;background:#fff}.amount-box input,.plain-input input{border:0;outline:0;min-width:0;flex:1;height:100%;padding:0 12px;font-size:17px;color:var(--ink);font-weight:650}.amount-box select{height:100%;border:0;border-left:1px solid var(--line);padding:0 15px;color:var(--ink);background:#fff;outline:0}.plain-input b{padding:0 14px;color:#66788a}.currency-field{display:block;margin-top:20px}.currency-box{padding-left:12px}.currency-box select{border:0;outline:0;flex:1;color:var(--ink);font-weight:650;background:#fff}.currency-box button{height:40px;margin-right:6px;border:1px solid var(--line);background:#fff;border-radius:8px;padding:0 16px;color:#52657a}.results-title{font-weight:750;margin:23px 0 8px}.results{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.result{border:1px solid var(--line);border-radius:11px;padding:16px;min-height:119px}.result>span{display:grid;place-items:center;width:37px;height:37px;border-radius:11px;float:left;margin-right:11px;font-weight:900;font-size:17px}.result small,.result strong,.result>b{display:block}.result small{font-size:12px;font-weight:700;padding-top:2px}.result strong{font-size:23px;line-height:1.2;margin-top:9px;letter-spacing:-.5px}.result>b{font-size:11px;margin-top:1px}.net{background:var(--blueSoft);color:#143d93}.net>span{background:#e4efff;color:#1d68e9}.vat{background:var(--greenSoft);color:#078455}.vat>span{background:#ddf7ee;color:#10a879}.total{background:var(--purpleSoft);color:#33239c}.total>span{background:#ede7ff;color:#6348e8}.actions{display:flex;justify-content:space-between;align-items:center;margin-top:17px}.actions>div{display:flex;gap:9px}.outline,.save{height:43px;padding:0 17px;font-weight:700}.save{border:0;background:#0fba87;color:#fff;border-radius:9px}.saved-msg{height:18px;text-align:right;color:#0a9d71;font-size:11px;margin-top:5px}.feature-bar{background:#fff;border:1px solid var(--line);border-radius:15px;margin-top:25px;padding:20px;display:grid;grid-template-columns:repeat(4,1fr);box-shadow:var(--shadow)}.feature-bar>div{padding:0 25px;border-right:1px solid var(--line);color:#08a878}.feature-bar>div:last-child{border:0}.feature-bar b,.feature-bar small{display:block;margin-left:29px;color:var(--ink)}.feature-bar small{color:var(--muted);font-size:11px}.content-section{padding:95px 0 0}.eyebrow{font-size:11px;letter-spacing:2px;color:#0da77b;font-weight:900}.content-section h2{font-size:35px;letter-spacing:-1.5px;margin:8px 0 28px}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.cards article,.resource{background:#fff;border:1px solid var(--line);border-radius:15px;padding:24px;box-shadow:var(--shadow)}.cards article>b{color:#10ad7d}.cards h3{margin:18px 0 6px}.cards p,.wide,.faq p,.resource p{color:var(--muted)}.wide{max-width:850px;font-size:17px}.faq details{background:#fff;border-bottom:1px solid var(--line);padding:20px 0}.faq summary{cursor:pointer;font-weight:750}.resource{display:flex;align-items:center;gap:20px;max-width:800px}.resource>b{font-size:44px;color:#10b98a}.resource h3{margin:0}.resource p{margin:4px 0}footer{max-width:1420px;margin:100px auto 0;padding:25px 3.2%;border-top:1px solid var(--line);display:flex;align-items:center;gap:25px;color:var(--muted);font-size:12px}footer .logo{font-size:20px;margin-right:auto}footer .logo-box{width:34px;height:34px}.dark{--ink:#edf7f5;--muted:#9bb1bd;--line:#263c47;--bg:#07151b;--card:#0d2028}.dark body{background:var(--bg)}body.dark{background:radial-gradient(circle at 70% 0,#102f2c 0,#07151b 38%,#051016 100%);color:var(--ink)}body.dark .header,body.dark .calculator,body.dark .feature-bar,body.dark .trust,body.dark .compliance,body.dark .cards article,body.dark .resource,body.dark .amount-box,body.dark .plain-input,body.dark .currency-box,body.dark .choice,body.dark .square,body.dark .language,body.dark .outline{background:#0d2028;color:var(--ink)}body.dark .header nav,body.dark .intro>p,body.dark .feature-pills small,body.dark .trust small,body.dark .compliance p,body.dark .result strong,body.dark .currency-box button{color:var(--muted)}body.dark .amount-box input,body.dark .plain-input input,body.dark select{background:#0d2028;color:var(--ink)}body.dark .top-strip{background:#0b2b24;color:#8fe9c9}
[dir=rtl]{font-family:Tahoma,Arial,sans-serif}[dir=rtl] .top-strip .help{margin-left:0;margin-right:auto}[dir=rtl] .header nav a{direction:rtl}[dir=rtl] .amount-box select{border-left:0;border-right:1px solid var(--line)}[dir=rtl] .currency-box{padding-left:0;padding-right:12px}[dir=rtl] .currency-box button{margin-right:0;margin-left:6px}
@media(max-width:1100px){.hero{grid-template-columns:1fr}.intro{padding-top:5px}.intro h1{font-size:60px}.header nav{gap:20px}.feature-bar{grid-template-columns:repeat(2,1fr);gap:20px}.feature-bar>div:nth-child(2){border:0}}@media(max-width:760px){.top-strip{font-size:10px}.top-strip .help{display:none}.header{height:70px;padding:0 16px}.header nav{display:none}.head-actions{margin-left:auto}.share{display:none}main{padding:20px 15px}.intro h1{font-size:48px;letter-spacing:-2.5px}.feature-pills{overflow:auto}.feature-pills>div{min-width:140px}.label-row,.two-col,.form-grid{grid-template-columns:1fr}.results{grid-template-columns:1fr}.feature-bar,.cards{grid-template-columns:1fr}.feature-bar>div{border-right:0;border-bottom:1px solid var(--line);padding:15px 5px}.feature-bar>div:last-child{border:0}.calculator{padding:18px}.currency-box button{padding:0 8px}.actions{align-items:stretch;flex-direction:column;gap:10px}.actions>div{justify-content:flex-end}.saved-msg{text-align:center}.content-section{padding-top:70px}footer{margin-top:70px;flex-wrap:wrap}footer .logo{width:100%}}

/* FINAL TARGETED DARK-MODE FIX
   Only fixes the low-contrast feature pills and result values shown in the supplied screenshot.
   All other styling remains unchanged.
*/
body.dark .feature-pills>div{
  background:#0d2028;
  border-color:#263c47;
  color:#edf7f5;
  box-shadow:none;
}
body.dark .feature-pills strong{color:#edf7f5}
body.dark .feature-pills small{color:#9bb1bd}
body.dark .feature-pills b{color:#10b981}

body.dark .result strong{color:inherit}
body.dark .result small{color:inherit}
body.dark .net strong{color:#143d93}
body.dark .vat strong{color:#078455}
body.dark .total strong{color:#33239c}
body.dark .net>b{color:#143d93}
body.dark .vat>b{color:#078455}
body.dark .total>b{color:#33239c}

/* FINAL TARGETED FAQ DARK-MODE FIX
   Keeps the existing layout/spacing; only restores dark FAQ surfaces and readable text.
*/


/* FINAL FAQ THEME FIX
   app.js toggles body.dark. Light mode is the default body state.
*/
body:not(.dark) .faq{
  background:transparent;
  color:var(--ink);
}
body:not(.dark) .faq h2{
  color:var(--ink);
}
body:not(.dark) .faq details{
  background:#fff;
  border-bottom:1px solid var(--line);
}
body:not(.dark) .faq summary{
  color:var(--ink);
}
body:not(.dark) .faq p{
  color:var(--muted);
}

body.dark .faq{
  background:transparent;
  color:var(--ink);
}
body.dark .faq h2{
  color:var(--ink);
}
body.dark .faq details{
  background:#091820;
  border-bottom:1px solid #29434e;
}
body.dark .faq summary{
  color:#eef7f7;
}
body.dark .faq p{
  color:#a7bbc2;
}


/* VATMetrics brand assets — preserves the existing layout. */
.brand{display:flex;align-items:center;line-height:0}
.brand-logo{display:block;width:190px;height:auto;max-height:52px;object-fit:contain;object-position:left center}
.brand-logo-dark{display:none}
body.dark .brand-logo-light{display:none}
body.dark .brand-logo-dark{display:block}

/* Ad-ready spaces: intentionally neutral so ads never disturb the site's visual system. */
.ad-slot{position:relative;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.72);border:1px dashed #c9d7df;border-radius:14px;color:#8a9aaa;overflow:hidden}
.ad-slot>span{position:absolute;top:8px;left:50%;transform:translateX(-50%);font-size:9px;letter-spacing:1.4px;text-transform:uppercase;font-weight:800;color:#98a7b4}
.ad-placeholder{font-size:11px;letter-spacing:.2px;color:#9aa9b5}
.ad-wide{min-height:90px;margin:28px 0 0}
.ad-grid{display:grid;grid-template-columns:repeat(2,minmax(0,300px));justify-content:center;gap:28px;padding-top:72px}
.ad-square{width:300px;height:250px}
body.dark .ad-slot{background:#0b1b22;border-color:#29434e;color:#718792}
body.dark .ad-slot>span{color:#708792}
body.dark .ad-placeholder{color:#718792}

@media(max-width:760px){
  .brand-logo{width:145px;max-height:44px}
  .ad-grid{grid-template-columns:1fr;justify-items:center;gap:18px;padding-top:55px}
  .ad-square{width:min(300px,100%);height:250px}
}

/* Visible ad placement spacing — preserves the existing design */
.ad-grid-section{
  margin:28px 0;
  padding-top:0;
  align-items:start;
}
.ad-grid-section .ad-slot{
  flex:none;
}

/* Footer uses the supplied VATMetrics logo */
footer .footer-brand{display:flex;align-items:center;text-decoration:none;flex:0 0 auto}
footer .footer-logo{display:block;width:175px;height:auto;max-height:48px;object-fit:contain;object-position:left center}
footer .footer-logo-dark{display:none}
body.dark footer .footer-logo-light{display:none}
body.dark footer .footer-logo-dark{display:block}
@media(max-width:760px){
  footer .footer-logo{width:145px;max-height:44px}
  footer .footer-brand{width:100%}
}


/* =========================================================
   FINAL MOBILE VIEWPORT / OVERFLOW FIX
   Keeps the existing desktop design unchanged.
   ========================================================= */
html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}
img, video, iframe, svg {
  max-width: 100%;
}
main, footer {
  width: 100%;
  min-width: 0;
}
.hero, .intro, .calculator, .feature-bar, .content-section, .ad-grid, .ad-slot {
  min-width: 0;
}

.square-ad-link {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background: #fff;
  border-radius: inherit;
}
.square-ad-link img {
  display: block;
  width: 100%;
  height: 170px;
  max-width: 100%;
  object-fit: cover;
  object-position: center;
}
.square-ad-copy {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.square-ad-copy strong {
  font-size: 12px;
  line-height: 1.2;
  color: #17212b;
}
.square-ad-copy span {
  align-self: flex-start;
  padding: 5px 9px;
  border-radius: 6px;
  background: #111827;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
}
body.dark .square-ad-link { background: #fff; }

@media (max-width: 760px) {
  body {
    overflow-x: hidden;
  }
  main {
    padding-left: 15px;
    padding-right: 15px;
  }
  .hero {
    width: 100%;
    grid-template-columns: minmax(0, 1fr);
  }
  .intro, .calculator {
    width: 100%;
    max-width: 100%;
  }
  .feature-pills {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
  }
  .choice-grid, .two-col, .form-grid, .results {
    width: 100%;
    min-width: 0;
  }
  .currency-box {
    width: 100%;
    min-width: 0;
  }
  .currency-box select {
    min-width: 0;
    width: 100%;
  }
  .currency-box button {
    flex: 0 0 auto;
    max-width: 42%;
    white-space: normal;
  }
  .actions, .actions > div {
    min-width: 0;
    max-width: 100%;
  }
  .actions > div button {
    min-width: 0;
  }
  .ad-grid {
    width: 100%;
    max-width: 100%;
    grid-template-columns: minmax(0, 1fr);
    padding-top: 35px;
  }
  .ad-square {
    width: min(300px, 100%);
    max-width: 100%;
    height: 250px;
  }
  .content-section {
    width: 100%;
    max-width: 100%;
  }
  .wide {
    width: 100%;
    max-width: 100%;
  }
  .resource {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  footer {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }
}

@media (max-width: 420px) {
  .header { padding-left: 12px; padding-right: 12px; }
  .brand-logo { width: 132px; }
  .head-actions { gap: 6px; }
  .language { padding: 0 10px; }
  .calculator { padding: 15px; }
  .calc-title h2 { font-size: 20px; }
  .calc-title span { font-size: 9px; padding: 6px 8px; }
  .choice { height: 68px; }
  .currency-box button { max-width: 38%; padding-left: 7px; padding-right: 7px; }
}

/* =========================================================
   FINAL SQUARE AD PRESENTATION FIX
   Keeps the existing site design unchanged.
   ========================================================= */
.ad-grid.ad-grid-section{
  width:100%;
  max-width:640px;
  margin:32px auto;
  padding:0;
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 300px));
  justify-content:center;
  align-items:start;
  gap:24px;
  box-sizing:border-box;
}

.ad-grid.ad-grid-section .ad-slot.ad-square{
  width:300px;
  max-width:100%;
  height:250px;
  box-sizing:border-box;
  overflow:hidden;
  border-radius:14px;
}

.ad-grid.ad-grid-section .square-ad-link{
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  box-sizing:border-box;
}

.ad-grid.ad-grid-section .square-ad-link img{
  width:100%;
  height:168px;
  flex:0 0 168px;
  object-fit:contain;
  object-position:center;
  background:#fff;
}

.ad-grid.ad-grid-section .square-ad-copy{
  flex:1 1 auto;
  min-height:0;
  padding:8px 10px;
  gap:4px;
  justify-content:center;
  box-sizing:border-box;
  background:#fff;
}

.ad-grid.ad-grid-section .square-ad-copy strong{
  display:block;
  font-size:11px;
  line-height:1.2;
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}

.ad-grid.ad-grid-section .square-ad-copy span{
  font-size:9px;
  line-height:1;
  padding:5px 8px;
}

@media (max-width:760px){
  .ad-grid.ad-grid-section{
    width:100%;
    max-width:100%;
    grid-template-columns:minmax(0, 300px);
    gap:18px;
    margin:24px auto;
  }

  .ad-grid.ad-grid-section .ad-slot.ad-square{
    width:min(300px, 100%);
    height:250px;
  }
}

@media (max-width:420px){
  .ad-grid.ad-grid-section{
    grid-template-columns:minmax(0, 1fr);
    padding-left:0;
    padding-right:0;
  }

  .ad-grid.ad-grid-section .ad-slot.ad-square{
    width:100%;
    max-width:300px;
    height:250px;
    justify-self:center;
  }
}


/* =========================================================
   VATMETRICS FINAL HEADER / LOGO OVERFLOW FIX
   Prevents the supplied 900px logo assets from ever escaping
   the header or showing both light/dark versions at once.
   Existing design is preserved.
   ========================================================= */

.header{
  overflow:hidden !important;
}

.header .brand{
  flex:0 0 190px !important;
  width:190px !important;
  max-width:190px !important;
  min-width:0 !important;
  height:100% !important;
  overflow:hidden !important;
  white-space:nowrap !important;
}

.header .brand-logo{
  display:block !important;
  width:190px !important;
  max-width:190px !important;
  min-width:0 !important;
  height:auto !important;
  max-height:52px !important;
  object-fit:contain !important;
  object-position:left center !important;
  flex:0 0 auto !important;
}

.header .brand-logo-dark{
  display:none !important;
}

body.dark .header .brand-logo-light{
  display:none !important;
}

body.dark .header .brand-logo-dark{
  display:block !important;
}

@media (max-width:760px){
  .header .brand{
    flex-basis:145px !important;
    width:145px !important;
    max-width:145px !important;
  }

  .header .brand-logo{
    width:145px !important;
    max-width:145px !important;
    max-height:44px !important;
  }
}

@media (max-width:420px){
  .header .brand{
    flex-basis:132px !important;
    width:132px !important;
    max-width:132px !important;
  }

  .header .brand-logo{
    width:132px !important;
    max-width:132px !important;
    max-height:42px !important;
  }
}


/* =========================================================
   FINAL WIDE AD SIZE FIX
   Keeps the ad inside its own area instead of allowing the
   product image to become a huge page-sized image.
   ========================================================= */

.ad-slot.ad-wide{
  height:280px !important;
  min-height:280px !important;
  max-height:280px !important;
  width:100% !important;
  max-width:100% !important;
  overflow:hidden !important;
}

.ad-slot.ad-wide > .wide-ad-placeholder,
.ad-slot.ad-wide .affiliate-ad,
.ad-slot.ad-wide .affiliate-ad-content{
  height:280px !important;
  min-height:280px !important;
  max-height:280px !important;
  max-width:100% !important;
  overflow:hidden !important;
}

.ad-slot.ad-wide .affiliate-ad-content{
  width:100% !important;
  box-sizing:border-box !important;
}

.ad-slot.ad-wide .affiliate-ad-product{
  flex:0 0 340px !important;
  width:340px !important;
  height:240px !important;
  max-width:42% !important;
  max-height:240px !important;
  overflow:hidden !important;
}

.ad-slot.ad-wide .affiliate-ad-product img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
  object-fit:cover !important;
}

@media (max-width:900px){
  .ad-slot.ad-wide,
  .ad-slot.ad-wide > .wide-ad-placeholder,
  .ad-slot.ad-wide .affiliate-ad,
  .ad-slot.ad-wide .affiliate-ad-content{
    height:250px !important;
    min-height:250px !important;
    max-height:250px !important;
  }

  .ad-slot.ad-wide .affiliate-ad-product{
    flex:0 0 270px !important;
    width:270px !important;
    height:215px !important;
    max-width:40% !important;
    max-height:215px !important;
  }
}

@media (max-width:600px){
  .ad-slot.ad-wide,
  .ad-slot.ad-wide > .wide-ad-placeholder,
  .ad-slot.ad-wide .affiliate-ad,
  .ad-slot.ad-wide .affiliate-ad-content{
    height:220px !important;
    min-height:220px !important;
    max-height:220px !important;
  }

  .ad-slot.ad-wide .affiliate-ad-content{
    padding:12px !important;
    gap:8px !important;
  }

  .ad-slot.ad-wide .affiliate-ad-product{
    flex:0 0 115px !important;
    width:115px !important;
    height:185px !important;
    max-width:38% !important;
    max-height:185px !important;
  }

  .ad-slot.ad-wide .affiliate-ad-copy h3{
    font-size:15px !important;
  }

  .ad-slot.ad-wide .affiliate-ad-copy p{
    font-size:10px !important;
    line-height:1.3 !important;
  }
}

@media (max-width:400px){
  .ad-slot.ad-wide,
  .ad-slot.ad-wide > .wide-ad-placeholder,
  .ad-slot.ad-wide .affiliate-ad,
  .ad-slot.ad-wide .affiliate-ad-content{
    height:200px !important;
    min-height:200px !important;
    max-height:200px !important;
  }

  .ad-slot.ad-wide .affiliate-ad-product{
    flex-basis:95px !important;
    width:95px !important;
    height:170px !important;
    max-height:170px !important;
  }

  .ad-slot.ad-wide .affiliate-ad-copy h3{
    font-size:13px !important;
  }

  .ad-slot.ad-wide .affiliate-ad-copy p{
    font-size:9px !important;
  }
}


/* =========================================================
   FINAL PAGE-WIDTH SAFETY
   Prevents any image, ad or component from creating the
   horizontal "stuck/zoomed" mobile viewport.
   ========================================================= */

html,
body{
  width:100% !important;
  max-width:100% !important;
  overflow-x:hidden !important;
}

main,
.header,
footer,
.content-section,
.hero,
.calculator,
.feature-bar,
.ad-slot{
  max-width:100% !important;
  min-width:0 !important;
}

img{
  max-width:100%;
}


/* =========================================================
   FINAL AD IMAGE FIT
   Show the COMPLETE product image instead of cropping/zooming.
   The ad box dimensions remain unchanged.
   ========================================================= */

.ad-slot.ad-wide .affiliate-ad-product{
  background: #ffffff !important;
  overflow: hidden !important;
}

.ad-slot.ad-wide .affiliate-ad-product img{
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  transform: none !important;
}

.ad-slot.ad-wide .affiliate-ad:hover .affiliate-ad-product img{
  transform: none !important;
}


/* Legal / policy pages — same VATMetrics visual system, no redesign */
.legal-main{max-width:1120px;margin:0 auto;padding:55px 3.2% 90px}
.legal-hero{background:var(--card,#fff);border:1px solid var(--line);border-radius:18px;padding:38px 42px;box-shadow:var(--shadow,0 12px 35px rgba(18,42,61,.07))}
.legal-eyebrow{font-size:11px;letter-spacing:2px;color:#0da77b;font-weight:900;text-transform:uppercase}
.legal-hero h1{font-size:clamp(38px,5vw,58px);line-height:1.05;letter-spacing:-2.5px;margin:10px 0 12px;color:var(--ink)}
.legal-updated{font-size:12px;color:var(--muted);margin:0}
.legal-content{margin-top:22px;background:var(--card,#fff);border:1px solid var(--line);border-radius:18px;padding:36px 42px;box-shadow:var(--shadow,0 12px 35px rgba(18,42,61,.07))}
.legal-content h2{font-size:25px;letter-spacing:-.7px;margin:28px 0 8px;color:var(--ink)}
.legal-content h2:first-child{margin-top:0}
.legal-content p,.legal-content li{color:var(--muted);font-size:15px;line-height:1.75}
.legal-content ul{padding-left:22px}
.legal-content a{color:#079d70;font-weight:700}
.legal-note{background:var(--greenSoft);border:1px solid #c9eee2;border-radius:12px;padding:15px 18px;margin-top:18px;color:var(--muted)}
.legal-links{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.legal-button{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 16px;border:1px solid var(--line);border-radius:9px;text-decoration:none;color:var(--ink);background:var(--card,#fff);font-weight:700}
.legal-button.primary{background:#0fba87;color:#fff;border-color:#0fba87}
footer.legal-footer{margin-top:0}
footer .footer-links{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
footer .footer-links a{color:var(--muted);text-decoration:none;font-weight:600}
footer .footer-links a:hover{color:#079d70}
@media(max-width:760px){.legal-main{padding:30px 15px 60px}.legal-hero,.legal-content{padding:24px 20px}.legal-hero h1{letter-spacing:-1.5px}.legal-content p,.legal-content li{font-size:14px}footer .footer-links{width:100%;gap:14px}}