/* Shared free-calculator ad layout. No AdSense code is loaded by this preview.
   Desktop: one 300x50 creative, in a reserved rail, sticky only for a fine mouse.
   Mobile/tablet: ordinary in-flow top banner; no sticky/fixed overlay.
   Entire card, including attribution and dismiss control, must fit <=20svh.
   Never crop/scale a real creative: omit the placement when it cannot fit. */
.nx-ad-layout { max-width: 1680px; margin: 0 auto; }
.nx-ad-content { min-width: 0; }
.nx-ad-rail { padding: 12px 0; background: #e7ebe2; color: #506550; }
.nx-ad-card { box-sizing: border-box; width: 318px; height: 104px; padding: 8px; margin: 0 auto; border: 1px solid #cad3c5; border-radius: 9px; background: #f9faf6; }
.nx-ad-label { height: 32px; margin-bottom: 4px; display: flex; align-items: center; justify-content: space-between; font: 9px/1.2 'DM Sans', sans-serif; letter-spacing: .35px; color: #78856e; }
.nx-ad-label small { font-size: 8px; color: #99a48e; }
.nx-ad-close { box-sizing: border-box; display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 32px; margin: 0; padding: 0; border: 0; border-radius: 5px; background: transparent; color: #6d7b64; font: 21px/1 sans-serif; cursor: pointer; }
.nx-ad-close:hover { background: #e8eddf; }
.nx-ad-close:focus-visible { outline: 2px solid #397954; outline-offset: 2px; }
.nx-ad-creative { box-sizing: border-box; width: 300px; height: 50px; display: flex; align-items: center; gap: 10px; padding: 7px 10px; background: #ebdfca; color: #5b513d; }
.nx-ad-sample-mark { display: grid; place-items: center; width: 31px; height: 31px; flex: 0 0 31px; border: 1px solid #caba9e; border-radius: 50%; font: 500 21px/1 'Space Grotesk', sans-serif; }
.nx-ad-creative strong { display: block; font: 500 11px/1.3 'DM Sans', sans-serif; }
.nx-ad-creative div>span { display: block; margin-top: 3px; color: #8f8167; font: 8px/1.2 'DM Sans', sans-serif; }
.nx-ad-layout[data-ad-hidden] .nx-ad-rail { display: none; }
/* 104px card + 24px surrounding strip =128px; reserve at most 20%.
   At shorter heights reduce only the strip's outside spacing, not the creative. */
@media (max-height: 639px) { .nx-ad-rail { padding-top: 0; padding-bottom: 0; } }
@media (max-height: 519px), (max-width: 317px) { .nx-ad-rail { display: none; } }
/* A constrained, in-flow desktop sidebar is not a freely floating box.
   Coarse-pointer tablet/touch layouts retain the normal top placement. */
@media (min-width: 1200px) and (min-height: 560px) and (hover: hover) and (pointer: fine) {
  .nx-ad-layout { display: grid; grid-template-columns: minmax(0, 1fr) 326px; column-gap: 32px; padding-right: 28px; }
  .nx-ad-content { grid-column: 1; grid-row: 1; }
  .nx-ad-content>.wrap, .nx-ad-content .wrap { padding-left: 32px; padding-right: 32px; }
  .nx-ad-rail { grid-column: 2; grid-row: 1; padding: 158px 0 48px; background: none; }
  .nx-ad-card { position: sticky; top: 24px; width: 326px; height: 112px; padding: 12px; margin: 0; }
  .nx-ad-layout[data-ad-hidden] { grid-template-columns: minmax(0, 1fr); padding-right: 0; }
  .nx-ad-content .section-note { display: none; }
  .nx-ad-content header { gap: 14px; }
  .nx-ad-content header nav { gap: 10px; }
  .nx-ad-content .section-heading h1 { font-size: clamp(29px, 3vw, 43px); }
  .nx-ad-content .folder { padding-left: 15px; padding-right: 15px; }
  .nx-ad-content .folder strong { font-size: 13px; }
  .nx-ad-content .folder>span:not(.folder-icon) { font-size: 9px; }
  .nx-ad-content .tool-list { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .nx-ad-content .hero { gap: 10px; }
  .nx-ad-content .hero h1 { font-size: clamp(42px,4.5vw,70px); }
  .nx-ad-content .hero-art { min-width: 0; }
  .nx-ad-content .calc-demo { width: 300px; }
  .nx-ad-content .hero .text-link { display: flex; margin: 18px 0 0; }
  .nx-ad-content .hero-foot { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) { .nx-ad-card, .nx-ad-rail { scroll-behavior: auto; } }
@media print { .nx-ad-rail { display: none; } .nx-ad-layout { display: block; padding: 0; } }
@media (max-width: 359px) { .nx-ad-content header nav { flex-wrap: wrap; } }