/* ============================================================================
   New Wave "nwb_" page-editor blocks
   ----------------------------------------------------------------------------
   Styles for the block types rendered by public_html/site_data/widgets/nwb_*.php
   (added from the admin SEO page editor's "Add block" menu).

   Everything is scoped under .nwb and prefixed nwb- so it can sit on the same
   page as the legacy col/widget blocks without touching core.css. Brand colours
   mirror --brand-* in nw.css; the block-local tokens below exist so the blocks
   also render correctly in the admin preview, which does not load nw.css.
   ========================================================================== */
/* Sora + Manrope (SIL Open Font License), latin, self-hosted in /css/fonts and
   preloaded by index.php so the hero text paints without waiting on Google Fonts.
   The "Fallback" faces are Arial resized to the same metrics, so text does not
   jump when the real font arrives (layout shift). */
@font-face{font-family:"Sora";font-style:normal;font-weight:600 800;font-display:swap;src:url(/css/fonts/sora-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Manrope";font-style:normal;font-weight:400 800;font-display:swap;src:url(/css/fonts/manrope-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Sora Fallback";font-weight:600 800;src:local("Arial Bold"),local("Arial-BoldMT");size-adjust:106.86%;ascent-override:90.77%;descent-override:27.14%;line-gap-override:0%}
@font-face{font-family:"Manrope Fallback";font-weight:400 500;src:local("Arial"),local("ArialMT");size-adjust:103.27%;ascent-override:103.23%;descent-override:29.05%;line-gap-override:0%}
@font-face{font-family:"Manrope Fallback";font-weight:600 800;src:local("Arial Bold"),local("Arial-BoldMT");size-adjust:103.27%;ascent-override:103.23%;descent-override:29.05%;line-gap-override:0%}

.nwb{
  --nwb-ink:#002552;
  --nwb-primary:#252261;
  --nwb-primary-deep:#1a1848;
  --nwb-primary-night:#120f33;
  --nwb-accent:#f2a738;
  --nwb-accent-2:#f7bd5e;
  --nwb-accent-deep:#b86f12;
  --nwb-info:#2bbcde;
  --nwb-info-2:#5fd3ec;
  --nwb-muted:#5c5f7a;
  --nwb-faint:#9195ad;
  --nwb-line:#e1e3ef;
  --nwb-bg:#f3f4fa;
  --nwb-surface:#ffffff;
  --nwb-tint:#eceefb;
  --nwb-shadow-sm:0 1px 2px rgba(37,34,97,.05),0 8px 22px rgba(37,34,97,.07);
  --nwb-shadow-md:0 14px 34px rgba(37,34,97,.12),0 3px 10px rgba(37,34,97,.06);
  --nwb-shadow-xl:0 44px 90px -24px rgba(37,34,97,.32),0 10px 28px rgba(37,34,97,.12);
  --nwb-head:"Sora","Sora Fallback",system-ui,sans-serif;
  --nwb-body:"Manrope","Manrope Fallback",system-ui,sans-serif;

  font-family:var(--nwb-body);
  color:var(--nwb-ink);
  line-height:1.6;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  position:relative;
}
.nwb *,.nwb *::before,.nwb *::after{box-sizing:border-box}
.nwb h1,.nwb h2,.nwb h3,.nwb h4{font-family:var(--nwb-head);line-height:1.06;margin:0;letter-spacing:-.02em;text-wrap:balance;color:inherit;font-weight:800}
.nwb p{margin:0}
.nwb a{color:inherit;text-decoration:none}
/* buttons keep their own colours when hovered or focused (after a click, e.g. when the quote modal closes), so this skips them */
.nwb a:where(:not(.nwb-btn)):hover,.nwb a:where(:not(.nwb-btn)):focus{text-decoration:none;color:inherit}
.nwb a.nwb-btn:hover,.nwb a.nwb-btn:focus{text-decoration:none}
.nwb ul{margin:0;padding:0;list-style:none}
.nwb svg{display:inline-block;vertical-align:middle}
.nwb button{font:inherit}
/* inside col blocks core.css sets .col-text-pages div{font-size:18px} and img{max-height:500px} */
.col-text-pages .nwb div{font-size:inherit}
.col-text-pages .nwb img{max-height:none}
.col-text-pages .nwb .nwb-abody img{max-height:none}
/* every image in an NW block stays inside its container; images in text keep their shape when shrunk */
.nwb img{max-width:100%}
.nwb-sec-head img,.nwb-abody img{height:auto}
.nwb-sec-head figure{margin:24px 0}
.nwb-sec-head figcaption{font-size:13px;color:var(--nwb-faint);margin-top:8px}
.col-pages .nwb ul{padding-left:0}
.col-pages .nwb ul li{margin-bottom:0}
.col-pages .nwb ul li:before{content:none;margin:0}
.col-pages .nwb .nwb-abody ul{padding-left:22px}
.col-pages .nwb .nwb-abody li{margin-bottom:6px}
.col-pages .nwb .nwb-ticks li{margin-bottom:0}

.nwb-wrap{max-width:1180px;margin:0 auto;padding:0 28px}
.nwb-sec{padding:90px 0}
.nwb-light{background:var(--nwb-bg)}
.nwb-white{background:var(--nwb-surface)}

/* ---- shared bits ------------------------------------------------------- */
.nwb-eyebrow{display:none} /* removed from the design; hides the label in blocks baked before */

.nwb-btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--nwb-body);font-weight:800;font-size:15px;line-height:1.2;border-radius:14px;padding:15px 26px;cursor:pointer;border:0;white-space:nowrap;transition:transform .18s cubic-bezier(.2,.7,.3,1),box-shadow .18s,filter .18s}
.nwb .nwb-btn-dark{background:var(--nwb-ink);color:#fff}
.nwb .nwb-btn-dark:hover{transform:translateY(-2px);box-shadow:0 16px 30px -10px rgba(0,37,82,.5);color:#fff}
.nwb .nwb-btn-accent{background:linear-gradient(180deg,var(--nwb-accent-2),var(--nwb-accent));color:var(--nwb-primary-deep);box-shadow:0 12px 26px -8px rgba(242,167,56,.55)}
.nwb .nwb-btn-accent:hover{transform:translateY(-2px);color:var(--nwb-primary-deep)}
.nwb .nwb-btn-ghost{background:transparent;color:var(--nwb-primary);border:1.5px solid var(--nwb-line)}
.nwb .nwb-btn-ghost:hover{border-color:var(--nwb-primary);background:var(--nwb-tint);color:var(--nwb-primary)}
.nwb-btn-sm{padding:13px 22px;font-size:14px}
.nwb-btn-lg{padding:17px 34px;font-size:16px}
.nwb-btn-block{width:100%;justify-content:center}

.nwb-sec-head{max-width:660px;margin:0 auto 52px;text-align:center}
.nwb-sec-head h2{font-size:clamp(30px,3.6vw,46px);color:var(--nwb-ink);margin:16px 0 14px}
.nwb-sec-head p{color:var(--nwb-muted);font-size:17.5px}
.nwb-sec-head.nwb-left{margin-left:0;text-align:left}
.nwb-sec-head.nwb-flush{margin-bottom:0}
.nwb-empty{text-align:center;color:var(--nwb-muted)}

.nwb-stars{color:var(--nwb-accent-deep);letter-spacing:1px}

/* ---- hero -------------------------------------------------------------- */
.nwb-hero{overflow:hidden;background:
  radial-gradient(700px 420px at 92% -6%,rgba(242,167,56,.16),transparent 62%),
  linear-gradient(180deg,var(--nwb-tint),var(--nwb-bg) 70%)}
/* dark hero: the title bar's navy gradient, white type */
.nwb-hero.nwb-hero-dark{background:linear-gradient(150deg,var(--nwb-primary),var(--nwb-primary-deep));color:#fff;position:relative}
.nwb-hero.nwb-hero-dark::before{content:"";position:absolute;right:-160px;top:-200px;width:560px;height:560px;border-radius:50%;background:radial-gradient(circle at 35% 35%,rgba(43,188,222,.32),transparent 66%);pointer-events:none}
.nwb-hero.nwb-hero-dark::after{content:"";position:absolute;left:-220px;bottom:-260px;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle at 50% 50%,rgba(242,167,56,.16),transparent 66%);pointer-events:none}
.nwb-hero.nwb-hero-dark .nwb-wrap{position:relative;z-index:1}
.nwb-hero.nwb-hero-dark h1{color:#fff}
.nwb-hero.nwb-hero-dark h1 em{color:var(--nwb-accent-2)}
.nwb-hero.nwb-hero-dark h1 em::after{display:none}
.nwb-hero.nwb-hero-dark .nwb-lead{color:rgba(255,255,255,.8)}
.nwb-hero.nwb-hero-dark .nwb-chip{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);color:#fff;box-shadow:none}
.nwb-hero.nwb-hero-dark .nwb-chip svg{color:var(--nwb-info-2)}
.nwb-hero.nwb-hero-dark .nwb-rating .av span{border-color:var(--nwb-primary-deep)}
.nwb-hero.nwb-hero-dark .nwb-rating .txt small{color:rgba(255,255,255,.72)}
.nwb-hero.nwb-hero-dark .nwb-rating .txt b{color:#fff}
.nwb-hero.nwb-hero-dark .nwb-stars{color:var(--nwb-accent-2)}
/* converted pages' hero (seo/nwb_hero_reference.html): the page's own picture faded in on the right, reviews link under the CTA */
.nwb-hero-img{position:absolute;right:-40px;top:50%;transform:translateY(-50%);width:520px;height:360px;background-repeat:no-repeat;background-size:contain;background-position:center;opacity:.22;pointer-events:none}
.nwb-hero-reviews{display:inline-block;margin-top:14px;color:rgba(255,255,255,.92);font-size:14px;border-bottom:1px dashed rgba(242,167,56,.8);padding-bottom:2px;text-decoration:none}
.nwb-hero-reviews:hover{color:#fff;text-decoration:none}
.nwb-hero-reviews b{font-weight:800}
@media (max-width:980px){.nwb-hero-img{display:none}}
/* top/bottom only: a padding shorthand here wiped .nwb-wrap's side padding, so the hero text touched the screen edge between 561px and 1236px */
.nwb-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;padding-top:78px;padding-bottom:88px}
.nwb-hero-grid.nwb-single{grid-template-columns:1fr;max-width:760px}
.nwb-hero h1{font-size:clamp(42px,5.4vw,66px);margin:22px 0 20px;color:var(--nwb-ink)}
.nwb-hero h1 b,.nwb-hero h1 strong{font-weight:inherit}
.nwb-hero h1 em{font-style:normal;position:relative;color:var(--nwb-primary);white-space:nowrap;z-index:0}
.nwb-hero h1 em::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:12px;background:var(--nwb-accent);opacity:.35;border-radius:6px;z-index:-1}
.nwb-lead{font-size:19px;color:var(--nwb-muted);max-width:500px;margin:0 0 30px}
.nwb-chips{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:34px}
.nwb-hero .nwb-chips{margin-top:16px}
.nwb-chip{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:12px;background:var(--nwb-surface);border:1px solid var(--nwb-line);font-weight:700;font-size:13.5px;box-shadow:var(--nwb-shadow-sm)}
.nwb-chip svg{width:15px;height:15px;color:var(--nwb-primary)}
a.nwb-chip{color:inherit;text-decoration:none}a.nwb-chip:hover{border-color:var(--nwb-primary)}
.nwb-hero-cta{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.nwb-rating{display:flex;align-items:center;gap:11px}
.nwb-rating .av{display:flex}
.nwb-rating .av span{width:30px;height:30px;border-radius:50%;border:2px solid var(--nwb-bg);margin-left:-9px;background:linear-gradient(135deg,var(--nwb-primary),var(--nwb-info))}
.nwb-rating .av span:first-child{margin-left:0}
/* review avatars in the hero rating box: free Unsplash headshots (Unsplash License: 1l6UeCc9P9o, WMD64tMfc4k, SLd8M9knkGc), 192px face crops */
.nwb-rating .av span:nth-child(1){background:url("/img/nwb/reviewer-1.jpg") center/cover no-repeat,linear-gradient(135deg,var(--nwb-primary),var(--nwb-info))}
.nwb-rating .av span:nth-child(2){background:url("/img/nwb/reviewer-2.jpg") center/cover no-repeat,linear-gradient(135deg,var(--nwb-primary),var(--nwb-info))}
.nwb-rating .av span:nth-child(3){background:url("/img/nwb/reviewer-3.jpg") center/cover no-repeat,linear-gradient(135deg,var(--nwb-primary),var(--nwb-info))}
.nwb-rating .txt small{display:block;color:var(--nwb-muted);font-weight:700;font-size:12.5px}
.nwb-rating .txt b{color:var(--nwb-ink);font-weight:800;font-size:13.5px}

/* ---- quote / estimate card (dark) -------------------------------------- */
.nwb-qcard{background:linear-gradient(160deg,var(--nwb-primary),var(--nwb-primary-deep));border-radius:28px;padding:8px;color:#fff;box-shadow:var(--nwb-shadow-xl)}
.nwb-qcard-in{border-radius:22px;border:1px solid rgba(255,255,255,.12);padding:28px}
.nwb-qcard-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.nwb-qcard h3{font-family:var(--nwb-body);font-weight:800;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.nwb-secure{font-size:11.5px;font-weight:800;color:var(--nwb-info-2);display:inline-flex;align-items:center;gap:5px}
.nwb-secure svg{width:13px;height:13px}
.nwb-seg{display:grid;grid-template-columns:repeat(var(--nwb-cols,4),1fr);gap:8px;margin-bottom:24px}
.nwb-seg button{font-weight:800;font-size:12.5px;line-height:1.2;text-align:center;padding:12px 6px;border-radius:14px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);color:#fff;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:7px;transition:.15s}
.nwb-seg button svg{width:22px;height:22px;color:rgba(255,255,255,.8)}
.nwb-seg button.on{background:var(--nwb-accent);border-color:var(--nwb-accent);color:var(--nwb-primary-deep)}
.nwb-seg button.on svg{color:var(--nwb-primary-deep)}
.nwb-valrow{display:flex;justify-content:space-between;align-items:baseline}
.nwb-valrow .lab{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.65)}
.nwb-valrow .val{font-family:var(--nwb-head);font-weight:800;font-size:30px;color:#fff;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
/* Value slider. js/nw-blocks.js sets --nwb-frac (0..1); the fill is painted on
   the track the thumb travels in and ends at the thumb centre, which sits half
   a thumb in from each end. Padding/border are reset because core.css gives
   every input "padding:6px 30px", which would shrink the track under the fill. */
.nwb-range{--nwb-thumb:24px;--nwb-track:8px;--nwb-frac:.5;
  --nwb-fill:calc(var(--nwb-thumb) / 2 + (100% - var(--nwb-thumb)) * var(--nwb-frac));
  -webkit-appearance:none;appearance:none;display:block;width:100%;height:var(--nwb-thumb);margin:8px 0 0;padding:0;border:0;background:none;outline:none;cursor:pointer}
.nwb-range::-webkit-slider-runnable-track{height:var(--nwb-track);border-radius:5px;background:linear-gradient(90deg,var(--nwb-info) 0,var(--nwb-info-2) var(--nwb-fill),rgba(255,255,255,.16) var(--nwb-fill))}
.nwb-range::-webkit-slider-thumb{-webkit-appearance:none;box-sizing:border-box;width:var(--nwb-thumb);height:var(--nwb-thumb);margin-top:calc((var(--nwb-track) - var(--nwb-thumb)) / 2);border-radius:50%;background:#fff;border:4px solid var(--nwb-info);box-shadow:0 3px 8px rgba(0,0,0,.28);cursor:grab}
.nwb-range::-moz-range-track{height:var(--nwb-track);border-radius:5px;background:rgba(255,255,255,.16)}
.nwb-range::-moz-range-progress{height:var(--nwb-track);border-radius:5px;background:linear-gradient(90deg,var(--nwb-info),var(--nwb-info-2))}
.nwb-range::-moz-range-thumb{box-sizing:border-box;width:var(--nwb-thumb);height:var(--nwb-thumb);border-radius:50%;background:#fff;border:4px solid var(--nwb-info);box-shadow:0 3px 8px rgba(0,0,0,.28);cursor:grab}
.nwb-track-ends{display:flex;justify-content:space-between;font-size:12px;color:rgba(255,255,255,.55);font-weight:700}
.nwb-premium{margin-top:22px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:18px;padding:20px 22px;display:flex;align-items:center;justify-content:space-between;gap:14px}
.nwb-premium .p b{display:block;font-family:var(--nwb-head);font-size:34px;line-height:1;letter-spacing:-.02em;color:#fff}
.nwb-premium .p b small{font-size:16px;font-weight:600}
.nwb-premium .p small{color:rgba(255,255,255,.72);font-weight:700;font-size:12.5px}
.nwb-premium .note{color:rgba(255,255,255,.55);font-size:11px;max-width:118px;text-align:right;line-height:1.4}
.nwb-premium [hidden]{display:none!important}
.nwb-premium-top b{display:block;font-family:var(--nwb-head);font-size:18px;line-height:1.2;color:#fff}
.nwb-premium-top small{display:block;margin-top:6px;color:rgba(255,255,255,.72);font-weight:700;font-size:12.5px}
.nwb-qcard .nwb-btn{margin-top:16px}

/* ---- trust bar ----------------------------------------------------------- */
.nwb-trust{background:var(--nwb-surface);border-top:1px solid var(--nwb-line);border-bottom:1px solid var(--nwb-line)}
.nwb-trust .nwb-wrap{display:flex;align-items:center;justify-content:center;gap:14px 36px;flex-wrap:wrap;padding:22px 28px;font-weight:800;font-size:13.5px;color:var(--nwb-muted)}
.nwb-trust .t{display:flex;align-items:center;gap:9px}
.nwb-trust svg{width:18px;height:18px;color:var(--nwb-primary);flex:none}
.nwb-trust .sep{width:1px;height:22px;background:var(--nwb-line)}
.nwb-trust .sep:last-child{display:none}

/* ---- stats ------------------------------------------------------------- */
.nwb-stats{background:var(--nwb-surface)}
/* one equal column per figure (1 to 4), so 3 figures fill the row instead of leaving a 4th column empty */
.nwb-stats .nwb-wrap{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:0;padding:0}
.nwb-stat{padding:36px 28px;text-align:center;border-right:1px solid var(--nwb-line)}
.nwb-stat:last-child{border-right:0}
.nwb-stat b{display:block;font-family:var(--nwb-head);font-weight:800;font-size:36px;color:var(--nwb-primary);line-height:1;letter-spacing:-.02em}
.nwb-stat b span{color:var(--nwb-accent-deep)}
.nwb-stat small{display:block;margin-top:9px;font-size:13.5px;font-weight:700;color:var(--nwb-muted)}

/* ---- estimate ------------------------------------------------------------ */
.nwb-estimate{background:var(--nwb-surface)}
.nwb-est-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.nwb-est-copy h2{font-size:clamp(30px,3.4vw,42px);color:var(--nwb-ink);margin:16px 0 18px}
.nwb-est-copy .nwb-lead{font-size:17.5px;margin:0 0 26px;max-width:460px}
.nwb .nwb-ticks{margin:0 0 30px;padding:0;display:grid;gap:15px}
.nwb-ticks li{display:flex;gap:14px;align-items:flex-start;font-size:16px;font-weight:600;color:var(--nwb-ink)}
.nwb-ticks .ck{flex:none;width:26px;height:26px;border-radius:9px;background:var(--nwb-tint);display:grid;place-items:center;margin-top:1px}
.nwb-ticks .ck svg{width:15px;height:15px;color:var(--nwb-accent-deep)}

/* ---- why (bento) ------------------------------------------------------- */
.nwb-bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:1fr;gap:22px}
.nwb-lead-tile{grid-column:span 2;grid-row:span 2;background:linear-gradient(160deg,var(--nwb-primary),var(--nwb-primary-deep));color:#fff;border-radius:28px;padding:46px 42px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden;box-shadow:var(--nwb-shadow-md)}
.nwb-lead-tile::after{content:"";position:absolute;right:-70px;bottom:-70px;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle at 35% 35%,rgba(43,188,222,.38),transparent 66%)}
.nwb-lead-tile h2{font-size:clamp(26px,2.6vw,34px);color:#fff;margin:16px 0 14px;position:relative;z-index:1}
.nwb-lead-tile p{color:rgba(255,255,255,.82);font-size:16px;margin:0 0 26px;max-width:340px;position:relative;z-index:1}
.nwb-lead-badge{display:inline-flex;align-items:center;gap:12px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:16px;padding:14px 18px;position:relative;z-index:1;align-self:flex-start}
.nwb-lead-badge .nwb-stars{color:var(--nwb-accent-2);letter-spacing:2px;font-size:16px}
.nwb-lead-badge b{color:#fff;font-weight:800}
.nwb-lead-badge small{display:block;color:rgba(255,255,255,.72);font-weight:700;font-size:12px}
.nwb-fcard{background:var(--nwb-surface);border:1px solid var(--nwb-line);border-radius:22px;padding:30px 26px;box-shadow:var(--nwb-shadow-sm);transition:transform .18s,box-shadow .18s}
.nwb-fcard:hover{transform:translateY(-5px);box-shadow:var(--nwb-shadow-md)}
.nwb-fcard .ic{width:52px;height:52px;border-radius:15px;background:var(--nwb-tint);display:grid;place-items:center;margin-bottom:18px}
.nwb-fcard .ic svg{width:26px;height:26px;color:var(--nwb-primary)}
.nwb-fcard h3{font-size:19px;color:var(--nwb-ink);margin-bottom:9px;font-weight:700}
.nwb-fcard p{color:var(--nwb-muted);font-size:14.5px}

/* ---- products (dark) ------------------------------------------------------ */
.nwb-products{background:linear-gradient(180deg,var(--nwb-primary-deep),var(--nwb-primary-night));color:#fff}
.nwb-products .nwb-sec-head h2{color:#fff}
.nwb-products .nwb-sec-head p{color:rgba(255,255,255,.75)}
.nwb-pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.nwb .nwb-pcard{display:block;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:22px;padding:30px;color:#fff;transition:transform .18s,border-color .18s,background .18s}
.nwb .nwb-pcard:hover{transform:translateY(-5px);border-color:rgba(242,167,56,.55);background:rgba(255,255,255,.08);color:#fff}
.nwb-pcard .ic{width:56px;height:56px;border-radius:16px;background:rgba(43,188,222,.16);display:grid;place-items:center;margin-bottom:20px}
.nwb-pcard .ic svg{width:28px;height:28px;color:var(--nwb-info-2)}
.nwb-pcard h3{font-size:21px;color:#fff;margin-bottom:9px;font-weight:700}
.nwb-pcard p{margin:0 0 18px;color:rgba(255,255,255,.72);font-size:14.5px}
.nwb-pcard .go{color:var(--nwb-accent-2);font-weight:800;font-size:14px;display:inline-flex;align-items:center;gap:7px;transition:gap .18s}
.nwb-pcard:hover .go{gap:12px}

/* ---- steps ------------------------------------------------------------- */
.nwb-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;counter-reset:nwbstep}
.nwb-step{position:relative;padding:34px 28px;background:var(--nwb-surface);border:1px solid var(--nwb-line);border-radius:22px;box-shadow:var(--nwb-shadow-sm)}
.nwb-step .n{counter-increment:nwbstep;font-family:var(--nwb-head);font-weight:800;font-size:16px;color:#fff;width:46px;height:46px;border-radius:14px;background:linear-gradient(160deg,var(--nwb-primary),var(--nwb-primary-deep));display:grid;place-items:center;margin-bottom:18px}
.nwb-step .n::before{content:"0" counter(nwbstep)}
.nwb-step h3{font-size:19px;color:var(--nwb-ink);margin-bottom:9px;font-weight:700}
.nwb-step p{color:var(--nwb-muted);font-size:14.5px}

/* ---- articles list ------------------------------------------------------- */
.nwb-articles{background:var(--nwb-bg)}
.nwb-agrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.nwb .nwb-acard{display:flex;flex-direction:column;background:var(--nwb-surface);border:1px solid var(--nwb-line);border-radius:22px;overflow:hidden;box-shadow:var(--nwb-shadow-sm);transition:transform .18s,box-shadow .18s;color:var(--nwb-ink)}
.nwb .nwb-acard:hover{transform:translateY(-5px);box-shadow:var(--nwb-shadow-md);color:var(--nwb-ink)}
.nwb-acard .img{aspect-ratio:16/10;background-size:cover;background-position:center;position:relative;background-color:var(--nwb-tint)}
.nwb-acard .tag{position:absolute;left:16px;top:16px;background:rgba(255,255,255,.94);color:var(--nwb-primary);font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;padding:7px 12px;border-radius:999px;box-shadow:var(--nwb-shadow-sm)}
.nwb-acard .body{padding:24px 24px 26px;display:flex;flex-direction:column;flex:1}
.nwb-acard .meta{font-size:12.5px;color:var(--nwb-faint);font-weight:700;margin-bottom:10px}
.nwb-acard h3{font-size:19px;color:var(--nwb-ink);font-weight:700;margin-bottom:10px;line-height:1.3}
.nwb-acard p{color:var(--nwb-muted);font-size:14.5px;margin:0 0 20px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.nwb-acard .go{margin-top:auto;color:var(--nwb-primary);font-weight:800;font-size:14px;display:inline-flex;align-items:center;gap:7px;transition:gap .18s,color .18s}
.nwb-acard:hover .go{gap:12px;color:var(--nwb-accent-deep)}
.nwb-articles .more{text-align:center;margin-top:40px}

/* ---- breadcrumb (own block) ------------------------------------------------- */
.nwb-breadcrumb{background:var(--nwb-surface);border-bottom:1px solid var(--nwb-line);padding:14px 0}
.nwb-breadcrumb .nwb-crumbs{margin:0}

/* ---- article -------------------------------------------------------------- */
.nwb-article-sec{background:var(--nwb-surface);padding:44px 0 80px}
.nwb-crumbs{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;font-size:13.5px;font-weight:700;color:var(--nwb-muted);margin:0 0 30px}
.nwb-crumbs a{color:var(--nwb-primary)}
.nwb-crumbs a:hover{color:var(--nwb-accent-deep)}
.nwb-crumbs .sep{color:var(--nwb-faint);font-size:12px}
.nwb-crumbs .cur{font-weight:600}
.nwb-alayout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:48px;align-items:start}
.nwb-alayout-single{grid-template-columns:minmax(0,1fr)}
.nwb-article{min-width:0}
.nwb-ahead{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.nwb-ahead-l{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.nwb-cat{display:inline-flex;align-items:center;gap:9px;padding:8px 14px;border-radius:999px;background:var(--nwb-tint);border:1px solid var(--nwb-line);font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--nwb-primary)}
.nwb-cat::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--nwb-accent)}
.nwb-ameta{color:var(--nwb-faint);font-weight:700;font-size:13.5px}
.nwb-atitle{font-size:clamp(30px,3.6vw,44px);color:var(--nwb-ink);margin:0 0 22px;max-width:1000px}
.nwb-abody p{font-size:17.5px;color:var(--nwb-ink);line-height:1.75;margin:0 0 22px}
.nwb-abody .nwb-lead,.nwb-abody>p:first-child{font-size:19.5px;color:var(--nwb-muted);line-height:1.65;max-width:none;margin:0 0 26px}
.nwb-abody img{display:block;width:100%;height:auto;border-radius:20px;margin:0 0 30px;box-shadow:var(--nwb-shadow-sm)}
.nwb-abody figure{margin:0 0 30px}
.nwb-abody figcaption{font-size:13px;color:var(--nwb-faint);margin:-18px 0 26px}
.nwb-abody h2{font-size:28px;margin:38px 0 14px;color:var(--nwb-ink);font-weight:800;scroll-margin-top:100px}
.nwb-abody h3{font-size:21px;margin:28px 0 10px;color:var(--nwb-ink);font-weight:700;scroll-margin-top:100px}
.nwb-abody h4{font-size:17px;margin:22px 0 8px;color:var(--nwb-ink);font-weight:800}
.nwb-abody ul,.nwb-abody ol{margin:0 0 22px;padding-left:22px;list-style:disc;font-size:17px;line-height:1.7}
.nwb-abody ol{list-style:decimal}
.nwb-abody li{margin-bottom:6px}
.nwb-abody a:not(.nwb-btn){color:var(--nwb-primary);text-decoration:underline;text-underline-offset:3px}
.nwb-abody a:not(.nwb-btn):hover{color:var(--nwb-accent-deep)}
.nwb-abody blockquote{margin:0 0 22px;padding:18px 24px;border-left:4px solid var(--nwb-accent);background:var(--nwb-tint);border-radius:0 14px 14px 0;font-size:17px}
.nwb-abody table{width:100%;border-collapse:collapse;margin:0 0 22px;font-size:15px}
.nwb-abody th,.nwb-abody td{border:1px solid var(--nwb-line);padding:10px 12px;text-align:left}
.nwb-abody th{background:var(--nwb-tint)}
.nwb-abody hr{border:0;border-top:1px solid var(--nwb-line);margin:30px 0}
.nwb-callout{background:var(--nwb-tint);border:1px solid var(--nwb-line);border-radius:18px;padding:22px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:10px}
.nwb-callout b{font-family:var(--nwb-head);font-size:19px;color:var(--nwb-primary);display:block}
.nwb-callout small{color:var(--nwb-muted);font-weight:700;font-size:13.5px}
.nwb-aside{position:sticky;top:96px;display:grid;gap:18px}
.nwb-toc{background:var(--nwb-bg);border:1px solid var(--nwb-line);border-radius:20px;padding:22px 24px}
.nwb-toc b{display:block;font-family:var(--nwb-head);font-size:15px;color:var(--nwb-ink);margin-bottom:12px}
.nwb-toc ol{list-style:none;margin:0;padding:0;display:grid;gap:10px;counter-reset:toc}
.nwb-toc li{counter-increment:toc;display:flex;gap:10px;font-size:14px;font-weight:600;line-height:1.4}
.nwb-toc li::before{content:counter(toc,decimal-leading-zero);color:var(--nwb-accent-deep);font-weight:800;font-size:12px;margin-top:2px;font-variant-numeric:tabular-nums}
.nwb-toc a{color:var(--nwb-primary)}
.nwb-toc a:hover{color:var(--nwb-accent-deep)}
.nwb-aquote{background:linear-gradient(160deg,var(--nwb-primary),var(--nwb-primary-deep));color:#fff;border-radius:20px;padding:26px;box-shadow:var(--nwb-shadow-md)}
.nwb-aquote b{display:block;font-family:var(--nwb-head);font-size:22px;line-height:1.15;letter-spacing:-.02em;margin:12px 0 8px}
.nwb-aquote small{display:block;color:rgba(255,255,255,.75);font-size:14px;line-height:1.5;margin-bottom:18px}
.nwb-aquote .phone{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:14px;color:#fff;font-weight:800;font-size:15px}
.nwb-aquote .phone svg{width:16px;height:16px;color:var(--nwb-info-2)}

/* ---- faq ------------------------------------------------------------------- */
.nwb-faq{background:var(--nwb-surface)}
.nwb-faq-list{max-width:860px;margin:0 auto;display:grid;gap:12px}
.nwb-faq-item{background:var(--nwb-bg);border:1px solid var(--nwb-line);border-radius:18px;padding:0 24px;transition:box-shadow .18s}
.nwb-faq-item[open]{background:var(--nwb-surface);box-shadow:var(--nwb-shadow-sm)}
.nwb-faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 0;font-family:var(--nwb-head);font-weight:700;font-size:17px;color:var(--nwb-ink)}
.nwb-faq-item summary::-webkit-details-marker{display:none}
.nwb-faq-item summary i{flex:none;width:34px;height:34px;border-radius:10px;background:var(--nwb-tint);display:grid;place-items:center;transition:transform .2s;color:var(--nwb-primary)}
.nwb-faq-item summary i svg{width:16px;height:16px}
.nwb-faq-item[open] summary i{transform:rotate(180deg);background:var(--nwb-accent);color:var(--nwb-primary-deep)}
.nwb-faq-a{padding:0 0 20px;color:var(--nwb-muted);font-size:16px;line-height:1.7;max-width:760px}
.nwb-faq-a p{margin:0 0 12px}
.nwb-faq-a p:last-child{margin:0}

/* ---- reviews (carousel and reviews page) ------------------------------------ */
.nwb-reviews{background:var(--nwb-bg)}
.nwb-reviews .nwb-sec-head p b{color:var(--nwb-ink)}
.nwb-rcard{background:var(--nwb-surface);border:1px solid var(--nwb-line);border-radius:20px;padding:22px 24px;box-shadow:var(--nwb-shadow-sm);display:flex;flex-direction:column;gap:12px}
.nwb-rhead{display:flex;align-items:center;gap:12px}
.nwb-rhead>div{flex:1;min-width:0}
.nwb-rhead b{display:block;font-family:var(--nwb-head);font-size:16px;color:var(--nwb-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nwb-rhead small{color:var(--nwb-faint);font-weight:700;font-size:12.5px}
.nwb-ravatar{flex:none;width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--nwb-primary),var(--nwb-info));color:#fff;font-weight:800;font-size:14px;display:grid;place-items:center;letter-spacing:.04em}
.nwb-rverified{flex:none;display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:999px;background:#e8f7ee;color:#1d7a46;font-size:11.5px;font-weight:800}
.nwb-rverified svg{width:12px;height:12px}
.nwb-rtext{margin:0;color:var(--nwb-ink);font-size:15.5px;line-height:1.6}
.nwb-rtext.clamp{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;cursor:pointer}
.nwb-rtext .hl{background:rgba(242,167,56,.35);border-radius:3px}
.nwb-rstars{display:flex;gap:2px;color:var(--nwb-accent);font-size:18px;line-height:1}
.nwb-rstars .off{color:var(--nwb-line)}
.nwb-rslider{position:relative;padding:0 56px}
.nwb-rtrack{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 48px) / 3);gap:24px;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none;padding:4px}
.nwb-rtrack::-webkit-scrollbar{display:none}
/* snapping is switched on (js/nw-blocks.js) once the visitor touches the slider:
   snapping at page load counts as a scroll in Chrome and stops it recording the
   page's main paint (Largest Contentful Paint), which sank the PageSpeed score */
.nwb-rtrack.nwb-snap{scroll-snap-type:x mandatory}
.nwb-rtrack.nwb-snap .nwb-rcard{scroll-snap-align:start}
.nwb-rnav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:1px solid var(--nwb-line);background:var(--nwb-surface);box-shadow:var(--nwb-shadow-sm);display:grid;place-items:center;cursor:pointer;color:var(--nwb-primary);z-index:1}
.nwb-rnav svg{width:18px;height:18px}
.nwb-rnav.prev{left:0}.nwb-rnav.prev svg{transform:rotate(90deg)}
.nwb-rnav.next{right:0}.nwb-rnav.next svg{transform:rotate(-90deg)}
.nwb-rnav:hover{background:var(--nwb-tint)}
.nwb-reviews .more{text-align:center;margin-top:36px}
.nwb-rstats{display:grid;grid-template-columns:260px 1fr;gap:32px;align-items:center;background:linear-gradient(150deg,var(--nwb-primary),var(--nwb-primary-deep));color:#fff;border-radius:24px;padding:30px 36px;max-width:900px;margin:0 auto 24px;box-shadow:var(--nwb-shadow-md)}
.nwb-rstats-main{text-align:center}
.nwb-rstats-main b{display:block;font-family:var(--nwb-head);font-size:56px;line-height:1;letter-spacing:-.03em}
.nwb-rstats-main .nwb-rstars{justify-content:center;margin:10px 0 8px;font-size:22px}
.nwb-rstats-main .nwb-rstars .off{color:rgba(255,255,255,.3)}
.nwb-rstats-main small{color:rgba(255,255,255,.75);font-weight:700;font-size:13px}
.nwb-rbars{display:grid;gap:8px}
.nwb-rbar{display:grid;grid-template-columns:44px 1fr 56px;align-items:center;gap:12px;background:none;border:0;padding:0;color:#fff;font:inherit;font-weight:700;font-size:13px;cursor:pointer;text-align:left}
.nwb-rbar .k{color:rgba(255,255,255,.85)}
.nwb-rbar .bar{height:8px;border-radius:4px;background:rgba(255,255,255,.16);overflow:hidden}
.nwb-rbar .bar i{display:block;height:100%;border-radius:4px;background:var(--nwb-accent)}
.nwb-rbar .n{text-align:right;color:rgba(255,255,255,.75)}
.nwb-rbar:hover .k{color:var(--nwb-accent-2)}
.nwb-rfilters{max-width:900px;margin:0 auto 20px;background:var(--nwb-surface);border:1px solid var(--nwb-line);border-radius:20px;padding:18px 22px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
.nwb-rsearch{flex:1 1 100%;display:flex;align-items:center;gap:10px;border:1px solid var(--nwb-line);border-radius:12px;padding:0 14px;height:46px;margin:0;background:var(--nwb-bg)}
.nwb-rsearch svg{width:18px;height:18px;color:var(--nwb-faint);flex:none}
.nwb-rsearch input{flex:1;border:0;background:none;font:inherit;font-size:15px;outline:0;color:var(--nwb-ink)}
.nwb-rpills{display:flex;flex-wrap:wrap;gap:6px}
.nwb-rpills button{border:1px solid var(--nwb-line);background:var(--nwb-surface);border-radius:999px;padding:7px 13px;font:inherit;font-weight:800;font-size:12.5px;color:var(--nwb-primary);cursor:pointer}
.nwb-rpills button.on{background:var(--nwb-primary-deep);border-color:var(--nwb-primary-deep);color:#fff}
.nwb-rsort{display:flex;align-items:center;gap:8px;margin:0 0 0 auto;font-size:13px;font-weight:700;color:var(--nwb-muted)}
.nwb-rsort select{border:1px solid var(--nwb-line);border-radius:10px;padding:7px 10px;font:inherit;font-weight:700;font-size:13px;color:var(--nwb-ink);background:var(--nwb-surface)}
.nwb-rcount{flex-basis:100%;font-size:12.5px;color:var(--nwb-faint);font-weight:700;text-align:right}
.nwb-rlist{max-width:900px;margin:0 auto;display:grid;gap:14px}
.nwb-rlist.busy{opacity:.5}
.nwb-rempty{text-align:center;color:var(--nwb-muted);padding:30px 0}

/* ---- newsletter signup ------------------------------------------------------ */
.nwb-signup{background:var(--nwb-bg)}
.nwb-signup-card{background:linear-gradient(150deg,var(--nwb-primary),var(--nwb-primary-deep));color:#fff;border-radius:28px;padding:48px 52px;display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center;box-shadow:var(--nwb-shadow-md);position:relative;overflow:hidden}
.nwb-signup-card::after{content:"";position:absolute;right:-140px;top:-180px;width:460px;height:460px;border-radius:50%;background:radial-gradient(circle at 35% 35%,rgba(43,188,222,.3),transparent 66%)}
.nwb-signup-copy{position:relative;z-index:1}
.nwb-signup-copy h2{color:#fff;font-size:clamp(26px,3vw,36px);margin:12px 0 12px}
.nwb-signup-copy p{color:rgba(255,255,255,.78);margin:0;font-size:16px}
.nwb-signup-form{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:10px}
.nwb-signup-form input{flex:1 1 220px;height:56px;border-radius:14px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.1);color:#fff;padding:0 18px;font:inherit;font-size:16px;font-weight:600;outline:0;transition:.15s}
.nwb-signup-form input::placeholder{color:rgba(255,255,255,.5);font-weight:500}
.nwb-signup-form input:focus{border-color:var(--nwb-accent);background:rgba(255,255,255,.14)}
.nwb-signup-form input.err{border-color:#f87171}
.nwb-signup-form .nwb-btn{height:56px;padding:0 26px;white-space:nowrap}
.nwb-signup-msg{flex-basis:100%;font-weight:700;font-size:14px;color:#fecaca}
.nwb-signup-msg.ok{color:var(--nwb-accent-2);font-size:17px}
.nwb-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- testimonial band ------------------------------------------------------ */
.nwb-quote-band{background:var(--nwb-tint)}
.nwb-qb{max-width:840px;margin:0 auto;text-align:center}
.nwb-qb .nwb-stars{letter-spacing:4px;font-size:20px;margin-bottom:22px;display:block}
.nwb-qb blockquote{font-family:var(--nwb-head);font-weight:700;font-size:clamp(23px,2.8vw,33px);color:var(--nwb-primary-deep);line-height:1.28;margin:0 0 24px;letter-spacing:-.02em;border:0;padding:0}
.nwb-qb .who{font-weight:800;color:var(--nwb-ink)}
.nwb-qb .who small{display:block;color:var(--nwb-muted);font-weight:700;margin-top:2px;font-size:14px}

/* ---- cta band ----------------------------------------------------------- */
.nwb-cta{background:linear-gradient(150deg,var(--nwb-primary),var(--nwb-primary-deep));color:#fff;text-align:center;position:relative;overflow:hidden}
.nwb-cta::after{content:"";position:absolute;left:50%;top:-40%;width:600px;height:600px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(circle,rgba(43,188,222,.22),transparent 62%)}
.nwb-cta .nwb-wrap{position:relative;z-index:1}
.nwb-cta h2{font-size:clamp(30px,3.8vw,48px);margin-bottom:16px;color:#fff}
.nwb-cta p{color:rgba(255,255,255,.85);font-size:18px;margin:0 auto 30px;max-width:520px}

/* ---- responsive --------------------------------------------------------- */
@media (max-width:980px){
  .nwb-hero-grid,.nwb-est-grid{grid-template-columns:1fr;gap:40px;padding-top:56px;padding-bottom:64px}
  .nwb-pgrid,.nwb-steps,.nwb-agrid{grid-template-columns:1fr 1fr}
  .nwb-bento{grid-template-columns:1fr 1fr;grid-auto-rows:auto}
  .nwb-lead-tile{grid-column:span 2;grid-row:auto}
  .nwb-sec{padding:70px 0}
}
@media (max-width:560px){
  .nwb-wrap{padding:0 16px}
  .nwb-pgrid,.nwb-steps,.nwb-agrid,.nwb-bento{grid-template-columns:1fr}
  .nwb-lead-tile{grid-column:span 1}
  .nwb-stats .nwb-wrap{grid-auto-flow:row;grid-template-columns:1fr 1fr}
  .nwb-stat:last-child:nth-child(odd){grid-column:1/-1}
  .nwb-stat:nth-child(2){border-right:0}
  .nwb-stat:nth-child(1),.nwb-stat:nth-child(2){border-bottom:1px solid var(--nwb-line)}
  .nwb-seg{grid-template-columns:1fr 1fr}
  .nwb-qcard-in{padding:20px}
  .nwb-premium{flex-wrap:wrap;gap:10px;padding:16px 18px}
  .nwb-premium .p b{white-space:nowrap}
  .nwb-premium .p small{white-space:nowrap}
  .nwb-premium .note{max-width:none;text-align:left;flex-basis:100%}
  .nwb-valrow .val{font-size:26px}
  .nwb-abody,.nwb-ahead{padding-left:20px;padding-right:20px}
  .nwb-sec{padding:56px 0}
}

/* ---- AI generator templates (admin seo/nwb_templates.php) ---------------
   Static markup the content generator reflows; no JS, so no estimate card. */
.nwb-titlebar{background:linear-gradient(150deg,var(--nwb-primary),var(--nwb-primary-deep));color:#fff;position:relative;overflow:hidden;padding:44px 0}
.nwb-titlebar::after{content:"";position:absolute;right:-120px;top:-160px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle at 35% 35%,rgba(43,188,222,.35),transparent 66%)}
.nwb-titlebar .nwb-wrap{position:relative;z-index:1}
.nwb-titlebar h1{font-size:clamp(24px,2.7vw,34px);color:#fff;margin:14px 0 0;max-width:980px;line-height:1.15}
.nwb-titlebar h1 em{font-style:normal;color:var(--nwb-accent-2)}
.nwb-titlebar .nwb-lead{color:rgba(255,255,255,.8);margin:12px 0 0;max-width:820px;font-size:17px}
.nwb-titlebar-lg{padding:72px 0 80px}
.nwb-titlebar-lg h1{font-size:clamp(34px,4.6vw,58px);max-width:none;line-height:1.06}
.nwb-titlebar-lg .nwb-lead{font-size:19px;max-width:640px}
.nwb-titlebar .nwb-chips{margin:22px 0 0}
.nwb-titlebar .nwb-chip{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);color:#fff;box-shadow:none}
.nwb-titlebar .nwb-chip svg{color:var(--nwb-info-2)}
.nwb-titlebar .nwb-hero-cta{margin-top:22px}
.nwb-titlebar:not(.nwb-titlebar-lg) .nwb-hero-cta .nwb-btn{padding:13px 22px;font-size:14px}
.nwb-titlebar .nwb-rating .txt small{color:rgba(255,255,255,.72)}
.nwb-titlebar .nwb-rating .txt b{color:#fff}
.nwb-titlebar .nwb-rating .av span{border-color:var(--nwb-primary)}
.nwb-hero .nwb-card-static{display:flex;flex-direction:column;gap:14px}
.nwb-hero .nwb-card-static .k{font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--nwb-accent-2)}
.nwb-hero .nwb-card-static .t{font-family:var(--nwb-head);font-size:24px;font-weight:800;line-height:1.2;color:#fff}
.nwb-hero .nwb-card-static .d{color:rgba(255,255,255,.8);font-size:15px}
.nwb-hero .nwb-card-static .pills{display:flex;flex-wrap:wrap;gap:8px}
.nwb-hero .nwb-card-static .pills span{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:12px;background:rgba(255,255,255,.08);border:1px solid rgba(242,167,56,.35);color:#fff;font-weight:700;font-size:13px}
.nwb-text-block{padding:72px 0}
/* a blank line between paragraphs (and lists) of the text; .nwb p has no margin of its own */
.nwb-text-block .nwb-sec-head > * + *{margin-top:16px}
.nwb-text-block .nwb-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:28px}
.nwb-text-block.nwb-dark{background:linear-gradient(180deg,var(--nwb-primary-deep),var(--nwb-primary-night));color:#fff}
.nwb-text-block.nwb-dark .nwb-sec-head h2{color:#fff}
.nwb-text-block.nwb-dark .nwb-sec-head p{color:rgba(255,255,255,.78)}
.nwb-text-block.nwb-dark .nwb-btn-ghost{color:#fff;border-color:rgba(255,255,255,.3)}
.nwb-text-block.nwb-dark .nwb-btn-ghost:hover{background:rgba(255,255,255,.08);border-color:#fff;color:#fff}
.nwb-text-block .nwb-fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:40px;text-align:left}
.nwb-text-block.nwb-dark .nwb-fcard{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12)}
.nwb-text-block.nwb-dark .nwb-fcard h3{color:#fff}
.nwb-text-block.nwb-dark .nwb-fcard p{color:rgba(255,255,255,.72)}
.nwb-text-block.nwb-dark .nwb-fcard .ic{background:rgba(43,188,222,.16)}
.nwb-text-block.nwb-dark .nwb-fcard .ic svg{color:var(--nwb-info-2)}
@media (max-width:980px){.nwb-text-block .nwb-fgrid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.nwb-text-block .nwb-fgrid{grid-template-columns:1fr}.nwb-titlebar{padding:36px 0}.nwb-titlebar-lg{padding:52px 0 56px}}
@media (max-width:980px){.nwb-rtrack{grid-auto-columns:calc((100% - 24px) / 2)}.nwb-rstats{grid-template-columns:1fr;padding:26px 24px}.nwb-signup-card{grid-template-columns:1fr;padding:36px 28px;gap:24px}.nwb-alayout{grid-template-columns:1fr}.nwb-aside{position:static}.nwb-toc{display:none}}
@media (max-width:560px){.nwb-rtrack{grid-auto-columns:100%}.nwb-rslider{padding:0}.nwb-rnav{display:none}.nwb-rsort{margin-left:0}.nwb-article-sec{padding:28px 0 56px}.nwb-abody p{font-size:16.5px}.nwb-abody h2{font-size:24px}}

/* ============================================================================
   Header (site_data/nav/boat.php) and footer (site_data/footer/boat.php)
   ========================================================================== */
.nwb-header{position:sticky;top:0;z-index:1030;background:rgba(243,244,250,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--nwb-line)}
.nwb-nav{display:flex;align-items:center;gap:22px;height:74px}
.nwb-brand{display:flex;align-items:center;flex:none}
.nwb-brand img{height:44px;width:auto;display:block}
.nwb-brand-fit img{height:66px}
/* header only: no 28px side padding once the screen is wider than the 1180px bar plus that padding (below that it keeps it, so the logo never touches the screen edge) */
@media (min-width:1237px){.nwb-header .nwb-nav{padding-left:0;padding-right:0}}
.nwb-nav-mobile{display:none;align-items:center;gap:10px;margin-left:auto}
.nwb-burger{width:44px;height:44px;border-radius:12px;border:1px solid var(--nwb-line);background:var(--nwb-surface);display:grid;place-items:center;gap:0;padding:12px 11px;cursor:pointer}
.nwb-burger span{display:block;width:22px;height:2px;border-radius:2px;background:var(--nwb-ink);transition:transform .2s,opacity .2s}
.nwb-header.open .nwb-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nwb-header.open .nwb-burger span:nth-child(2){opacity:0}
.nwb-header.open .nwb-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nwb-menu{display:flex;align-items:center;gap:22px;flex:1;min-width:0}
.nwb-menu-list{display:flex;align-items:center;gap:26px;margin:0 auto 0 0;padding:0;list-style:none;font-weight:700;font-size:14.5px;color:var(--nwb-muted);white-space:nowrap}
.nwb-menu-list>li{position:static}
.nwb-menu-list>li>a{display:inline-flex;align-items:center;gap:7px;padding:27px 0;color:var(--nwb-muted)}
.nwb-menu-list>li>a:hover,.nwb-menu-list>li.active>a,.nwb-menu-list>li.open>a{color:var(--nwb-primary)}
.nwb-menu-list>li.has-menu>a::after{content:"";width:6px;height:6px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg) translate(-1px,-2px);opacity:.55;transition:transform .18s}
.nwb-menu-list>li.open>a::after{transform:rotate(225deg) translate(-2px,0)}
.nwb-menu-cta{display:flex;align-items:center;gap:18px;flex:none}
.nwb-phone{display:inline-flex;align-items:center;gap:9px;color:var(--nwb-ink);font-weight:800;font-size:15px;white-space:nowrap}
.nwb-phone .ic{width:32px;height:32px;border-radius:10px;background:var(--nwb-tint);display:grid;place-items:center;color:var(--nwb-primary)}
.nwb-phone .ic svg{width:16px;height:16px}
.nwb-backdrop{display:none}

/* mega menu panel */
.nwb-mega{position:absolute;left:0;right:0;top:100%;background:var(--nwb-surface);border-bottom:1px solid var(--nwb-line);box-shadow:0 40px 70px -30px rgba(37,34,97,.35),0 10px 24px rgba(37,34,97,.08);opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .18s,transform .18s,visibility .18s;white-space:normal;color:var(--nwb-ink);font-weight:400}
.nwb-menu-list>li.has-menu:focus-within .nwb-mega,.nwb-menu-list>li.open .nwb-mega{opacity:1;visibility:visible;transform:none}
/* hover opens the panel only on real pointer devices at desktop width: on touch
   screens the tap leaves :hover stuck on the item, which fought the .open rules */
@media (hover:hover) and (min-width:1101px){
  .nwb-menu-list>li.has-menu:hover>a::after{transform:rotate(225deg) translate(-2px,0)}
  .nwb-menu-list>li.has-menu:hover .nwb-mega{opacity:1;visibility:visible;transform:none}
}
.nwb-mega-in{max-width:1180px;margin:0 auto;padding:28px 28px 30px;display:grid;grid-template-columns:320px 1fr;gap:34px;align-items:start}
.nwb .nwb-mega-cta{display:flex;align-items:center;gap:18px;background:linear-gradient(160deg,var(--nwb-accent-2),var(--nwb-accent));border-radius:22px;padding:26px 24px;color:var(--nwb-primary-deep);box-shadow:0 16px 32px -12px rgba(242,167,56,.65);transition:transform .18s,box-shadow .18s}
.nwb .nwb-mega-cta:hover{transform:translateY(-2px);box-shadow:0 22px 40px -12px rgba(242,167,56,.75);color:var(--nwb-primary-deep)}
.nwb .nwb-mega-cta-danger{background:linear-gradient(160deg,#f28b82,#dc3545);color:#fff;box-shadow:0 16px 32px -12px rgba(220,53,69,.55)}
.nwb .nwb-mega-cta-danger:hover{color:#fff}
.nwb-mega-cta .ic{width:58px;height:58px;border-radius:16px;background:rgba(26,24,72,.14);display:grid;place-items:center;flex:none}
.nwb-mega-cta .ic svg{width:32px;height:32px}
.nwb-mega-cta b{display:block;font-family:var(--nwb-head);font-size:23px;letter-spacing:-.02em;line-height:1.1}
.nwb-mega-cta small{display:block;font-weight:700;font-size:13px;opacity:.78;margin-top:4px}
.nwb-mega-right{border-left:1px solid var(--nwb-line);padding-left:34px}
.nwb-mega-title{font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--nwb-faint);margin-bottom:12px}
.nwb-mega-links{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.nwb-mega-links a{display:flex;align-items:center;gap:14px;padding:13px 16px;border:1px solid var(--nwb-line);border-radius:16px;background:var(--nwb-bg);font-weight:700;font-size:15px;color:var(--nwb-ink);transition:transform .15s,border-color .15s,background .15s}
.nwb-mega-links a:hover{border-color:var(--nwb-primary);background:var(--nwb-tint);transform:translateY(-2px);color:var(--nwb-ink)}
.nwb-mega-links .ic{width:40px;height:40px;border-radius:12px;background:var(--nwb-surface);border:1px solid var(--nwb-line);display:grid;place-items:center;flex:none;color:var(--nwb-primary)}
.nwb-mega-links .ic svg{width:21px;height:21px}
.nwb-mega-sub{display:flex;flex-wrap:wrap;gap:8px 28px;margin-top:20px;padding-top:18px;border-top:1px solid var(--nwb-line);font-weight:700;font-size:14px;color:var(--nwb-muted)}
.nwb-mega-sub a{display:inline-flex;align-items:center;gap:6px;color:var(--nwb-muted)}
.nwb-mega-sub a::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--nwb-accent)}
.nwb-mega-sub a:hover{color:var(--nwb-primary)}

/* mobile drawer */
@media (max-width:1100px){
  .nwb-nav{height:64px;gap:12px}
  .nwb-brand img{height:38px}
  .nwb-brand-fit img{height:54px}
  .nwb-nav-mobile{display:flex}
  /* Drawer: always in the DOM so it can animate. Closed = faded, nudged up and
     inert; visibility flips after the fade-out so it stays visible while closing. */
  .nwb-menu{display:flex;position:fixed;left:0;right:0;top:64px;height:calc(100vh - 64px);height:calc(100dvh - 64px);overflow-y:auto;background:var(--nwb-bg);padding:12px 16px 32px;flex-direction:column;align-items:stretch;gap:0;z-index:1030;
    opacity:0;transform:translateY(-10px);visibility:hidden;pointer-events:none;
    transition:opacity .22s ease,transform .22s ease,visibility 0s linear .22s}
  .nwb-header.open .nwb-menu{opacity:1;transform:none;visibility:visible;pointer-events:auto;transition:opacity .25s ease,transform .3s cubic-bezier(.2,.8,.2,1),visibility 0s}
  .nwb-menu-list{flex-direction:column;align-items:stretch;gap:0;margin:0;white-space:normal;font-size:16px}
  /* Items and the phone/quote block rise in one after another */
  .nwb-menu-list>li,.nwb-menu-cta{opacity:0;transform:translateY(10px);transition:opacity .2s ease,transform .2s ease}
  .nwb-header.open .nwb-menu-list>li,.nwb-header.open .nwb-menu-cta{opacity:1;transform:none;transition:opacity .35s ease,transform .4s cubic-bezier(.2,.8,.2,1)}
  .nwb-header.open .nwb-menu-list>li:nth-child(1){transition-delay:.05s}
  .nwb-header.open .nwb-menu-list>li:nth-child(2){transition-delay:.09s}
  .nwb-header.open .nwb-menu-list>li:nth-child(3){transition-delay:.13s}
  .nwb-header.open .nwb-menu-list>li:nth-child(4){transition-delay:.17s}
  .nwb-header.open .nwb-menu-list>li:nth-child(5){transition-delay:.21s}
  .nwb-header.open .nwb-menu-list>li:nth-child(6){transition-delay:.25s}
  .nwb-header.open .nwb-menu-cta{transition-delay:.3s}
  .nwb-menu-list>li{border-bottom:1px solid var(--nwb-line)}
  .nwb-menu-list>li>a{display:flex;justify-content:space-between;padding:16px 4px;color:var(--nwb-ink)}
  .nwb-menu-list>li.has-menu>a::after{transform:rotate(45deg);margin-right:6px;transition:transform .25s ease}
  .nwb-menu-list>li.has-menu.open>a::after{transform:rotate(225deg)}
  /* Sections open as an accordion: a one-row grid grows from 0fr to 1fr, so the
     panel's own height drives the animation and no fixed max-height is needed */
  .nwb-mega{position:static;display:grid;grid-template-rows:0fr;opacity:1;visibility:visible;box-shadow:none;border:0;background:transparent;transform:none;padding-bottom:0;
    transition:grid-template-rows .3s cubic-bezier(.2,.8,.2,1),padding-bottom .3s ease}
  .nwb-menu-list>li.has-menu.open .nwb-mega{grid-template-rows:1fr;padding-bottom:16px}
  .nwb-mega-in{grid-template-columns:1fr;gap:14px;padding:0;min-height:0;overflow:hidden;opacity:0;transform:translateY(-6px);transition:opacity .2s ease,transform .2s ease}
  .nwb-menu-list>li.has-menu.open .nwb-mega-in{opacity:1;transform:none;transition:opacity .3s ease .08s,transform .3s ease .08s}
  .nwb-mega-cta{padding:18px 20px}
  .nwb-mega-cta b{font-size:19px}
  .nwb-mega-right{border-left:0;padding-left:0}
  .nwb-mega-links{grid-template-columns:1fr}
  .nwb-mega-sub{gap:8px 20px;margin-top:14px;padding-top:14px}
  .nwb-menu-cta{flex-direction:column;align-items:stretch;gap:12px;padding-top:18px}
  .nwb-menu-cta .nwb-btn{justify-content:center}
  .nwb-phone{justify-content:center}
  .nwb-backdrop{display:block;position:fixed;inset:0;background:rgba(0,37,82,.3);z-index:1020;opacity:0;visibility:hidden;transition:opacity .25s ease,visibility 0s linear .25s}
  .nwb-header.open~.nwb-backdrop{opacity:1;visibility:visible;transition:opacity .25s ease,visibility 0s}
  body.nwb-menu-open{overflow:hidden}
}
@media (prefers-reduced-motion:reduce){
  .nwb-menu,.nwb-menu-list>li,.nwb-menu-cta,.nwb-mega,.nwb-mega-in,.nwb-backdrop,.nwb-burger span,.nwb-menu-list>li.has-menu>a::after{transition:none!important}
}

/* footer: keeps the .footer class for the site's sticky-footer and bleed rules */
.nwb-footer.footer{background:var(--nwb-primary-night);color:rgba(255,255,255,.66);font-size:14px;padding:0;height:auto}
.nwb-footer a{color:inherit}
.nwb-fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;gap:36px;padding:64px 0 40px}
.nwb-fbrand img{height:48px;width:auto;display:block;margin-bottom:16px}
.nwb-fbrand p{margin:0 0 12px;max-width:290px;line-height:1.65}
.nwb .nwb-fphone{display:inline-flex;align-items:center;gap:8px;color:var(--nwb-accent-2);font-weight:800;font-size:16px;margin-bottom:18px}
.nwb-fphone svg{width:16px;height:16px}
.nwb-awards{display:flex;gap:12px;align-items:center}
.nwb-awards img{height:64px;width:auto}
.nwb-footer h4{color:#fff;font-family:var(--nwb-body);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;margin:0 0 16px;font-weight:800}
.nwb-footer ul{display:grid;gap:11px}
.nwb-footer ul a:hover{color:var(--nwb-accent-2)}
.nwb-fbar{border-top:1px solid rgba(255,255,255,.1);padding:22px 0;font-size:12px;color:rgba(255,255,255,.48);line-height:1.65}
.nwb-fbar p{margin:0}
.nwb-fbar p+p{margin-top:10px}
.nwb-fdisc b{color:rgba(255,255,255,.72);font-weight:800}
@media (max-width:980px){.nwb-fgrid{grid-template-columns:1fr 1fr;gap:30px;padding:48px 0 32px}.nwb-fbrand{grid-column:span 2}}
@media (max-width:560px){.nwb-fgrid{grid-template-columns:1fr}.nwb-fbrand{grid-column:span 1}}

/* ---- free design kit -----------------------------------------------------
   General pieces the admin Sync "Free convert" AI composes a block from when no
   NW block fits (contact details, offices with maps, mixed layouts). Prefixed
   nwb-x- so they never clash with the fixed blocks above (e.g. the footer's
   .nwb-fgrid). Markup reference: admin seo/nwb_sync_ai.php nwb_sync_free_prompt. */
.nwb-free{padding:72px 0}
.nwb-free .nwb-sec-head{margin-bottom:40px}
.nwb-x-label{display:block;font-size:12.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--nwb-accent-deep);margin-bottom:10px}
.nwb-x-stack{display:grid;gap:22px}
.nwb-x-stack+.nwb-x-stack,.nwb-x-split+.nwb-x-split,.nwb-x-grid+.nwb-x-split,.nwb-x-split+.nwb-x-grid,.nwb-x-grid+.nwb-x-grid{margin-top:28px}
.nwb-x-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px}
.nwb-x-split{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.nwb-x-split.nwb-x-top{align-items:start}
.nwb-x-card{background:var(--nwb-surface);border:1px solid var(--nwb-line);border-radius:22px;padding:28px 26px;box-shadow:var(--nwb-shadow-sm);min-width:0}
.nwb-light .nwb-x-card{background:var(--nwb-surface)}
.nwb-white .nwb-x-card{background:var(--nwb-bg);box-shadow:none}
.nwb-x-card .ic{width:48px;height:48px;border-radius:14px;background:var(--nwb-tint);display:grid;place-items:center;margin-bottom:16px}
.nwb-white .nwb-x-card .ic{background:var(--nwb-surface)}
.nwb-x-card .ic svg{width:24px;height:24px;color:var(--nwb-primary)}
.nwb-x-card h3{font-size:19px;color:var(--nwb-ink);margin:0 0 8px;font-weight:700}
.nwb-x-card p{color:var(--nwb-muted);font-size:15px;margin:0 0 6px}
.nwb-x-card p:last-child{margin-bottom:0}
.nwb .nwb-x-big{display:inline-block;font-family:var(--nwb-head);font-weight:800;font-size:clamp(22px,2.4vw,30px);line-height:1.25;color:var(--nwb-primary);text-decoration:none;overflow-wrap:anywhere}
.nwb .nwb-x-big:hover{color:var(--nwb-accent-deep)}
.nwb-x-media{border-radius:22px;overflow:hidden;border:1px solid var(--nwb-line);box-shadow:var(--nwb-shadow-md);background:var(--nwb-bg)}
.nwb-x-media iframe{display:block;width:100%;height:340px;border:0}
.nwb-x-media img{display:block;width:100%;height:auto}
.nwb-x-body{color:var(--nwb-muted);font-size:16.5px}
.nwb-x-body h3{font-size:21px;color:var(--nwb-ink);margin:24px 0 10px;font-weight:700}
.nwb-x-body h3:first-child{margin-top:0}
.nwb-x-body p{margin:0 0 14px}
.nwb-x-body a{color:var(--nwb-primary);font-weight:700}
.nwb .nwb-x-body ul,.nwb .nwb-x-body ol{padding-left:22px;margin:0 0 14px}
.nwb .nwb-x-body ul{list-style:disc}
.nwb .nwb-x-body ol{list-style:decimal}
.col-pages .nwb .nwb-x-body li{margin-bottom:6px}
.nwb-x-body table{width:100%;border-collapse:collapse;margin:0 0 14px;font-size:15px}
.nwb-x-body th,.nwb-x-body td{border-bottom:1px solid var(--nwb-line);padding:10px 12px;text-align:left;vertical-align:top}
.nwb-x-body th{color:var(--nwb-ink);background:var(--nwb-tint)}
.nwb-x-btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.nwb-sec-head+.nwb-x-btns{justify-content:center;margin-top:-16px;margin-bottom:36px}
@media (max-width:980px){.nwb-x-split{grid-template-columns:1fr;gap:26px}}
@media (max-width:560px){.nwb-free{padding:52px 0}.nwb-x-card{padding:24px 20px}.nwb-x-media iframe{height:260px}}

/* ---- site guide (site_data/widgets/site_guide.php) ---------------------------
   Directory of the boat insurance pages: a navy band with the three general
   pages, then one card per boat family. It is an older block type, so
   pages/blocks.php wraps it in a Bootstrap column; the first rule takes that
   column's side padding away so the section runs edge to edge like the rest. */
.block-main:has(>.nwb-guide){padding-left:0;padding-right:0}
/* two blocks side by side: main (the band over Sailing and Power) takes two columns, side
   (Personal Watercraft over Speciality) the third. The last row of each stretches, so both end level */
.nwb-guide-grid,.nwb-guide-main,.nwb-guide-side{display:grid;gap:22px}
.nwb-guide-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.nwb-guide-main{grid-column:span 2;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto 1fr}
.nwb-guide-side{grid-template-rows:auto 1fr}
.nwb-guide .ic{flex:none;width:46px;height:46px;border-radius:14px;background:var(--nwb-tint);color:var(--nwb-primary);display:grid;place-items:center;transition:background .18s,color .18s}
.nwb-guide .ic svg{width:52%;height:52%}
/* the small arrow after every link is a rotated corner, so the links need no icon markup */
.nwb-guide-top span::after,.nwb-guide-head a::after,.nwb-guide-list a::after{content:"";flex:none;display:inline-block;width:7px;height:7px;border-top:1.8px solid;border-right:1.8px solid;transform:rotate(45deg);transition:transform .18s}
.nwb-guide a:hover::after,.nwb-guide a:hover span::after{transform:translateX(4px) rotate(45deg)}
.nwb-guide a:focus-visible,.nwb-guide-head a:focus-visible::before{outline:2px solid var(--nwb-primary);outline-offset:2px}

.nwb-guide-top{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);overflow:hidden;border-radius:22px;background:linear-gradient(160deg,var(--nwb-primary),var(--nwb-primary-deep));box-shadow:var(--nwb-shadow-md)}
.nwb-guide-top li+li{border-left:1px solid rgba(255,255,255,.12)}
.nwb .nwb-guide-top a{display:flex;flex-direction:column;justify-content:space-between;gap:14px;height:100%;padding:20px 22px;font-family:var(--nwb-head);font-weight:700;font-size:16.5px;line-height:1.25;letter-spacing:-.01em;color:#fff;transition:background .18s}
.nwb .nwb-guide-top a:hover{background:rgba(255,255,255,.08);color:#fff}
/* the band clips what sticks out of it, so its focus ring is drawn inside the link */
.nwb-guide-top a:focus-visible{outline-color:var(--nwb-accent-2);outline-offset:-6px;border-radius:20px}
.nwb-guide-top .ic{width:40px;height:40px;border-radius:12px;background:rgba(43,188,222,.16);color:var(--nwb-info-2)}
.nwb-guide-top span::after{margin-left:9px;color:var(--nwb-accent-2);vertical-align:2px}

.nwb-guide-card{min-width:0;background:var(--nwb-surface);border:1px solid var(--nwb-line);border-radius:22px;padding:22px 22px 14px;box-shadow:var(--nwb-shadow-sm)}
.nwb-guide-head{position:relative;display:flex;align-items:center;gap:14px;padding-bottom:16px;margin-bottom:8px;border-bottom:1px solid var(--nwb-line)}
.nwb-guide-head h3{font-size:17.5px;font-weight:700;line-height:1.25}
/* the family link covers its whole heading row, icon included, and its focus ring goes around that row instead of the text */
.nwb-guide-head a::before{content:"";position:absolute;inset:-6px -6px 10px;border-radius:14px}
.nwb-guide-head a:focus-visible{outline:0}
.nwb-guide-head a::after{margin-left:8px;color:var(--nwb-accent-deep);vertical-align:2px}
.nwb .nwb-guide-head a:hover{color:var(--nwb-primary)}
.nwb-guide-head:hover .ic{background:var(--nwb-primary);color:#fff}
/* pages in one column, or two (never more) once a card is wide enough for two 250px columns;
   a card narrower than 250px keeps one column of its own width */
.nwb-guide-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(max(min(250px,100%),40%),1fr));column-gap:22px}
/* each row is at least 44px tall for thumbs; the negative margin lets the hover tint run past the text on both sides */
.nwb .nwb-guide-list a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;margin:0 -10px;padding:9px 10px;border-radius:10px;font-weight:600;font-size:15px;line-height:1.35;color:var(--nwb-muted);transition:background .15s,color .15s}
.nwb-guide-list a::after{margin-right:3px;color:var(--nwb-faint)}
.nwb .nwb-guide-list a:hover{background:var(--nwb-tint);color:var(--nwb-primary)}
.nwb-guide-list a:hover::after{color:var(--nwb-accent-deep)}
.nwb-guide-cta{text-align:center;margin-top:40px}

/* tablet: main keeps its two cards side by side, the side cards go full width below it */
@media (max-width:980px){
  .nwb-guide-grid{grid-template-columns:minmax(0,1fr)}
  .nwb-guide-main{grid-column:auto}
}
/* phone: one column, and the band becomes three rows (icon, name, arrow at the far end) */
@media (max-width:560px){
  .nwb-guide-main{grid-template-columns:minmax(0,1fr)}
  .nwb-guide-top{grid-template-columns:1fr}
  .nwb-guide-top li+li{border-left:0;border-top:1px solid rgba(255,255,255,.12)}
  .nwb .nwb-guide-top a{flex-direction:row;justify-content:flex-start;align-items:center;padding:13px 22px}
  .nwb-guide-top span{flex:1;display:flex;align-items:center;justify-content:space-between;gap:12px}
}