/* ==========================================================================
   nl-convert.css
   The conversion layer. Loaded on every page after style.css and storm.css.
   Owner instruction, October 13, 2026: the 100 build list, items as marked.
   Everything here is additive. Deleting this file and its two tags restores
   the site exactly as it was.
   ========================================================================== */

/* ---------- item 101. The call to action ring. ---------------------------
   A rotating conic border on the primary calls to action, in the brand inks.
   Built on @property so the sweep animates the angle rather than repainting
   a gradient, and falls back to a static ring where @property is absent.    */
@property --nl-ring { syntax: '<angle>'; initial-value: 0deg; inherits: false; }

.btn--primary, .btn--gold, .plan-foot .btn--outline, .nl-cta-ring { position: relative; isolation: isolate; z-index: 0; }

.btn--primary::before, .btn--gold::before, .plan-foot .btn--outline::before, .nl-cta-ring::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  padding: 3px;
  background: conic-gradient(from var(--nl-ring),
      #2E7D32 0deg, #6FBF73 70deg, #4FA3E3 150deg,
      #BF8F00 230deg, #2E7D32 320deg, #2E7D32 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  opacity: .9;
  z-index: -1;
  animation: nl-ring-spin 4.2s linear infinite;
  pointer-events: none;
}
@keyframes nl-ring-spin { to { --nl-ring: 360deg; } }

/* the ring brightens on hover and on keyboard focus, so it reads as live */
.btn--primary:hover::before, .btn--gold:hover::before,
.plan-foot .btn--outline:hover::before,
.btn--primary:focus-visible::before, .btn--gold:focus-visible::before,
.plan-foot .btn--outline:focus-visible::before {
  inset: -4px; padding: 4px; opacity: 1;
  filter: drop-shadow(0 0 7px rgba(46,125,50,.45));
}

/* the ring never appears on a button sitting on navy, where it would glare */
.sec--navy .btn::before, .hero .btn--ghost::before, .btn--call::before { display: none; }

/* ---------- item 101. Anticipation. --------------------------------------
   A thin progress line that starts the moment a call to action is pressed and
   runs until the next page paints, so the wait has something in it.          */
.nl-prog {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: linear-gradient(90deg, #2E7D32, #4FA3E3, #BF8F00);
  z-index: 10000; pointer-events: none;
  transition: width .18s ease-out, opacity .4s ease .2s;
  box-shadow: 0 0 10px rgba(79,163,227,.6);
}

/* ---------- item 101. Arrival. -------------------------------------------
   The page a visitor lands on after pressing a call to action lifts into
   place once, quickly. It is a settle, not a bounce.                        */
.nl-arrive main > *:first-child,
.nl-arrive .hero { animation: nl-arrive .5s cubic-bezier(.2,.7,.3,1) both; }
@keyframes nl-arrive { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- item 101. The celebration canvas. ---------------------------- */
#nl-cheer { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9999; }

/* ---------- item 101. The submit state. ---------------------------------- */
.nl-sending { position: relative; pointer-events: none; opacity: .92; }
.nl-sending::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.38), transparent);
  background-size: 200% 100%; animation: nl-sweep 1s linear infinite;
}
@keyframes nl-sweep { from { background-position: 200% 0 } to { background-position: -200% 0 } }

@media (prefers-reduced-motion: reduce) {
  .btn--primary::before, .btn--gold::before, .plan-foot .btn--outline::before, .nl-cta-ring::before { animation: none; }
  .nl-arrive main > *:first-child, .nl-arrive .hero { animation: none; }
  .nl-sending::after { animation: none; }
  .nl-prog { transition: none; }
  .nl-bar { transition: none; }
}

/* ---------- items 1, 2 and 6. The proof the site has never shown. --------
   Three real Google reviews, the rating line, and the link back to the
   source so a reader can check every word.                                 */
.nl-rating {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  margin: 0 0 16px; font-size: .95rem; line-height: 1.3;
}
.nl-rating .nl-stars { color: #BF8F00; letter-spacing: 2px; font-size: 1.05rem; }
.nl-rating a { color: inherit; }
.nl-rating .nl-score { font-weight: 700; color: var(--char); }
.nl-rating .nl-src { color: var(--mut); }
.hero .nl-rating, .sec--navy .nl-rating { color: #fff; }
.hero .nl-rating .nl-score, .sec--navy .nl-rating .nl-score { color: #fff; }
.hero .nl-rating .nl-src, .sec--navy .nl-rating .nl-src { color: rgba(255,255,255,.82); }

.nl-reviews { padding: 46px 0 50px; background: var(--bg-alt); }
.nl-reviews .nl-rv-head { text-align: center; margin: 0 0 26px; }
.nl-reviews h2 { margin: 0 0 8px; }
.nl-reviews .nl-rv-sub { color: var(--mut); margin: 0; font-size: .97rem; }
.nl-rv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 18px; }
.nl-rv {
  background: linear-gradient(168deg, var(--surface), var(--bg-alt)); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px 20px 17px; display: flex; flex-direction: column; min-width: 0;
  box-shadow: var(--shadow, 0 2px 10px rgba(31,56,100,.07));
}
.nl-rv-stars { color: #BF8F00; letter-spacing: 2px; font-size: 1.02rem; margin-bottom: 9px; }
.nl-rv blockquote { margin: 0 0 14px; font-size: .97rem; line-height: 1.6; color: var(--body); }
.nl-rv figcaption { margin-top: auto; font-size: .88rem; color: var(--mut); }
.nl-rv figcaption b { color: var(--char); display: block; font-size: .95rem; }
.nl-rv-foot { text-align: center; margin: 24px 0 0; font-size: .92rem; color: var(--mut); }

/* ---------- item 34. The call and text bar, phones only. ---------------- */
.nl-bar { display: none; }
@media (max-width: 760px) {
  .nl-bar {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 9000;
    background: var(--surface); border-top: 1px solid var(--line-strong);
    padding: 9px 12px calc(9px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -4px 18px rgba(0,0,0,.35);
    transform: translateY(125%);
    transition: transform .3s cubic-bezier(.2,.7,.3,1);
    will-change: transform;
  }
  .nl-bar.nl-bar--on { transform: none; }
  .nl-bar a {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
    min-height: 46px; padding: 6px 8px; border-radius: 8px; font-weight: 700; font-size: .92rem;
    line-height: 1.15; text-align: center; text-decoration: none; border: 1.5px solid transparent;
  }
  .nl-bar .nl-bar-text { background: var(--green, #2E7D32); color: #fff; }
  .nl-bar .nl-bar-call { background: transparent; color: var(--char); border-color: var(--line-strong); }
  .nl-bar small { display: block; font-weight: 500; font-size: .68rem; opacity: .85; }
  body { padding-bottom: 76px; }
}

/* ---------- items 21 to 30. The quote card and the three steps. -----------
   The form is a white card inside the navy hero, the same object /memberships
   already uses, so the first field lands in the first screen instead of at
   1,635 px. Every rule here is scoped to the card, because the hero's own
   text rules are written for navy and reach inside it.                      */
.nl-qcard { margin-top: 0; }
.nl-qcard .offer-body { padding: 18px 18px 16px; }
.nl-qcard .offer-flag { font-size: .8rem; }
.nl-form .field { margin-bottom: 12px; }
.nl-form label { font-weight: 600; font-size: .93rem; }
.nl-form input, .nl-form select, .nl-form textarea {
  width: 100%; font-size: 1rem; padding: 11px 12px; border-radius: 8px;
}
.nl-form input.nl-bad, .nl-form select.nl-bad { border-color: #FF8A80; }
.nl-err { margin: 5px 0 0; font-size: .85rem; color: #FFB4AB; font-weight: 600; }
.nl-consent { display: flex; gap: 9px; align-items: flex-start; font-weight: 400; font-size: .85rem; color: var(--body); }
.nl-consent input { width: auto; flex: 0 0 auto; margin-top: 3px; }
.nl-form .btn-row { display: grid; gap: 9px; margin-top: 4px; }
.nl-form .offer-fine { text-align: left; }

.nl-sbar { height: 6px; border-radius: 99px; background: rgba(8,17,31,.55); overflow: hidden; margin: 0 0 8px; }
.nl-sfill { display: block; height: 100%; width: 8%; border-radius: 99px;
  background: linear-gradient(90deg, #2E7D32, #6FBF73);
  transition: width .45s cubic-bezier(.2,.7,.3,1); }
.nl-ssay { margin: 0 0 12px; font-size: .86rem; color: var(--mut); }
.nl-ssay b { color: var(--char); }
.nl-kept { margin: 0 0 12px; font-size: .85rem; color: var(--accent); font-weight: 600; }
.nl-kept-clear { background: none; border: 0; padding: 0; font: inherit; color: var(--mut);
  text-decoration: underline; cursor: pointer; font-weight: 500; }
.nl-step { border: 0; padding: 0; margin: 0; min-width: 0; }
.js-steps .nl-step { display: none; }
.js-steps .nl-step.nl-step--on { display: block; animation: nl-stepin .32s cubic-bezier(.2,.7,.3,1) both; }
@keyframes nl-stepin { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }

@media (max-width: 980px) {
  .page-hero--quote .hero-proof { display: none; }
  .page-hero--quote h1 { font-size: 1.45rem; }
  .page-hero--quote .lead { margin-bottom: 14px; }
  .page-hero--quote .nl-rating { margin-bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .js-steps .nl-step.nl-step--on { animation: none; }
  .nl-sfill { transition: none; }
}

/* ---------- item 24. The one field address band. ------------------------
   It sits directly under the hero on 81 pages. One field is the smallest
   commitment the site can ask for, and the address is the only thing a
   quote actually needs.                                                    */
.nl-addrband { background: var(--bg-alt); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 18px 0; }
.nl-addr label { display: block; margin: 0 0 9px; font-size: 1.02rem; color: var(--body); }
.nl-addr label b { color: var(--char); }
.nl-addr-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; align-items: stretch; }
.nl-addr-row input { width: 100%; font-size: 1rem; padding: 13px 14px; border-radius: 9px; }
.nl-addr-row .btn { white-space: nowrap; }
.nl-addr-fine { margin: 8px 0 0; font-size: .85rem; color: var(--mut); }
@media (max-width: 620px) {
  .nl-addr-row { grid-template-columns: 1fr; }
  .nl-addr label { font-size: .96rem; }
}

/* ---------- item 30. The three field form where the traffic already is. */
.nl-inline { background: linear-gradient(168deg, var(--surface), var(--bg-alt));
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px; max-width: 620px; margin: 0 auto; box-shadow: 0 6px 22px rgba(0,0,0,.22); }
.nl-inline h2 { margin: 0 0 6px; font-size: 1.35rem; color: var(--char); }
.nl-inline .nl-inline-sub { margin: 0 0 16px; color: var(--body); font-size: .95rem; }
.nl-inline .field { margin-bottom: 12px; }
.nl-inline label { display: block; font-weight: 600; font-size: .92rem; margin-bottom: 5px; }
.nl-inline input { width: 100%; font-size: 1rem; padding: 11px 12px; border-radius: 8px; }
.nl-inline .nl-inline-fine { margin: 10px 0 0; font-size: .84rem; color: var(--mut); }

/* ---------- item 37. The instant answer on the thank you page. ---------- */
.nl-est { background: linear-gradient(168deg, var(--surface), var(--bg-alt));
  border: 1px solid var(--line); border-left: 5px solid var(--accent);
  border-radius: var(--radius); padding: 22px 24px; box-shadow: 0 6px 22px rgba(0,0,0,.22); }
.nl-est-eyebrow { margin: 0 0 8px; font-size: .78rem; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--accent); font-weight: 700; }
.nl-est-line { margin: 0 0 10px; font-size: 1.12rem; line-height: 1.55; color: var(--char); }
.nl-est-fine { margin: 0; font-size: .88rem; color: var(--mut); }

/* item 35. The third route out of the phone bar, for the people who will
   give a number and a time but will never fill in a form. */
@media (max-width: 760px) {
  .nl-bar .nl-bar-cb {
    grid-column: 1 / -1; min-height: 0; padding: 2px 0 0; font-weight: 600;
    font-size: .78rem; color: var(--accent); text-decoration: underline;
    background: none; border: 0;
  }
  body { padding-bottom: 98px; }
}

/* item 42. The range sits before the form, not after it. Two paid clicks
   read the price on /memberships for over two minutes each, touched nothing
   and left: they were deciding, with no next step beside the number. */
.nl-range { margin: 0 0 14px; font-size: 1rem; line-height: 1.55; color: var(--body); max-width: 56ch; }

/* item 21. The first field has to be in the first screen on a phone, and
   the measured average scroll depth on this page is 25.85 per cent. Every
   rule below exists to pull the address box up the page and nothing else. */
@media (max-width: 760px) {
  .page-hero--quote { padding-top: 16px !important; padding-bottom: 20px !important; }
  .page-hero--quote h1 { font-size: 1.32rem !important; line-height: 1.18; margin-bottom: .3em; }
  .page-hero--quote .eyebrow { margin-bottom: 6px; }
  .page-hero--quote .nl-rating { font-size: .86rem; margin-bottom: 10px; }
  .page-hero--quote .lead { font-size: .95rem !important; line-height: 1.45; margin-bottom: 10px; }
  .page-hero--quote .nl-range { font-size: .86rem; line-height: 1.45; margin-bottom: 12px; }
  .page-hero--quote .offer-flag { padding: 6px 12px; font-size: .74rem; }
  .page-hero--quote .nl-qcard .offer-body { padding: 14px 14px 14px; }
  .page-hero--quote .nl-sbar { margin-bottom: 6px; }
  .page-hero--quote .nl-ssay { margin-bottom: 9px; font-size: .82rem; }
  .page-hero--quote .nl-form .field { margin-bottom: 10px; }
}
@media (max-width: 760px) {
  .page-hero--quote .offer-flag { display: none; }
  .page-hero--quote .nl-qcard { margin-top: 2px; }
  .page-hero--quote .hero-copy { margin-bottom: 0; }
}

/* item 42 on a phone. The range moves inside the card, directly under the
   first action, because on a 360 px screen a paragraph above the form costs
   46 px and the whole point of item 21 is the 46 px. */
.nl-range--card { font-size: .86rem; margin: 8px 0 0; color: var(--mut); }
@media (min-width: 761px) { .nl-range--card { display: none; } }
@media (max-width: 760px) { .page-hero--quote .hero-copy .nl-range { display: none; } }

/* items 50 and 78. The countdown on the real deadline. */
.nl-days { font-weight: 700; color: var(--accent); }

/* item 43. A real photograph in the first screen. */
.nl-herophoto { margin: 0 0 14px; }
.nl-herophoto img { display: block; width: 100%; height: auto; border-radius: 10px; }
.nl-herophoto figcaption { margin-top: 7px; font-size: .82rem; line-height: 1.45; color: var(--mut); }
.hero-card .nl-herophoto, .offer .nl-herophoto { margin-bottom: 16px; }
.offer .nl-herophoto img { border-radius: 10px 10px 0 0; }
.page-hero .nl-herophoto { max-width: 520px; margin-top: 20px; }
@media (max-width: 760px) { .page-hero .nl-herophoto figcaption { font-size: .78rem; } }

/* items 12, 14, 15, 17 and 18. The five numbers, published together. */
.nl-five { list-style: none; counter-reset: nlf; margin: 0; padding: 0; }
.nl-five > li { counter-increment: nlf; position: relative; padding: 0 0 20px 46px; margin: 0 0 20px;
  border-bottom: 1px solid var(--line-strong, rgba(255,255,255,.18)); }
.nl-five > li:last-child { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
.nl-five > li::before { content: counter(nlf); position: absolute; left: 0; top: 0;
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 700; font-size: .95rem; background: rgba(255,255,255,.12); color: #fff; }
.nl-five-n { display: block; font-weight: 700; font-size: 1.08rem; margin-bottom: 5px; color: #fff; }
.nl-five p { margin: 0 0 8px; }
.nl-five p:last-child { margin-bottom: 0; }
.nl-five-sub { font-size: .92rem; opacity: .88; }
@media (max-width: 600px) { .nl-five > li { padding-left: 40px; } }

/* item 15. The two trigger depths, together, on one line. */
.nl-trigger { font-size: 1.04rem; line-height: 1.6; margin: 0; padding: 14px 18px;
  border-left: 4px solid var(--accent); background: rgba(0,0,0,.14); border-radius: 0 8px 8px 0; }

/* item 5. One page per review. */
.nl-rv-full { margin: 0 0 22px; padding: 22px 24px; border-left: 4px solid var(--accent);
  background: rgba(0,0,0,.14); border-radius: 0 10px 10px 0; font-size: 1.1rem; line-height: 1.65; }
.nl-rv-full cite { display: block; margin-top: 14px; font-style: normal; font-size: .9rem; color: var(--mut); }
.nl-rv-say { margin-bottom: 18px; }
.nl-rvi { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 14px; }
.nl-rvi a { display: block; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--radius);
  background: linear-gradient(168deg, var(--surface), var(--bg-alt)); text-decoration: none; }
.nl-rvi a:hover { border-color: var(--line-strong); }
.nl-rvi-stars { color: #BF8F00; letter-spacing: 2px; display: block; margin-bottom: 6px; }
.nl-rvi b { display: block; font-size: 1.08rem; color: var(--char); }
.nl-rvi-job { display: block; font-size: .86rem; color: var(--mut); margin-bottom: 8px; }
.nl-rvi-quote { display: block; color: var(--body); }
.nl-rvi-foot { font-size: .92rem; color: var(--mut); }
.nl-rvi-name { display: block; font-size: 1.08rem; font-weight: 700; color: var(--char); }

/* item 44 applied to the rating line. On a 360 px screen the long form is
   two lines and it sits above the hero lead, which is what pushed seven
   town pages past the fold. The claim is unchanged on anything wider. */
@media (max-width: 760px) { .nl-src-long { display: none; } }

/* item 11. The response standard as a measured number. */
.nl-measured { border: 1px solid var(--line); border-left: 5px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0; padding: 22px 24px;
  background: linear-gradient(168deg, var(--surface), var(--bg-alt)); }
.nl-measured-eyebrow { margin: 0 0 4px; font-size: .76rem; letter-spacing: 1.4px;
  text-transform: uppercase; font-weight: 700; color: var(--accent); }
.nl-measured-big { margin: 0 0 10px; font-size: 2.3rem; line-height: 1.05; font-weight: 700; color: var(--char); }
.nl-measured-say { margin: 0 0 10px; color: var(--body); line-height: 1.6; }
.nl-measured-fine { margin: 0; font-size: .86rem; color: var(--mut); line-height: 1.55; }
@media (max-width: 600px) { .nl-measured-big { font-size: 1.9rem; } .nl-measured { padding: 18px 18px; } }

/* items 51 and 52. The estimator and the plan finder. */
.nl-fi { border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px;
  background: linear-gradient(168deg, var(--surface), var(--bg-alt)); }
.nl-fi-nojs { margin: 0; color: var(--body); line-height: 1.6; }
.nl-fi-step { margin: 0 0 6px; font-size: .76rem; letter-spacing: 1.4px; text-transform: uppercase;
  font-weight: 700; color: var(--accent); }
.nl-fi-q { margin: 0 0 16px; font-size: 1.22rem; line-height: 1.35; color: var(--char); font-weight: 700; }
.nl-fi-as { display: grid; gap: 10px; }
.nl-fi-a { font: inherit; text-align: left; padding: 13px 16px; border-radius: 9px; cursor: pointer;
  border: 1.5px solid var(--line-strong); background: rgba(0,0,0,.18); color: var(--char); }
.nl-fi-a:hover { border-color: var(--accent); background: rgba(0,0,0,.3); }
.nl-fi-back, .nl-fi-again { margin-top: 14px; font: inherit; font-size: .88rem; background: none;
  border: 0; padding: 0; color: var(--mut); text-decoration: underline; cursor: pointer; }
.nl-fi-out-t { margin: 0 0 10px; font-size: 1.35rem; font-weight: 700; color: var(--char); line-height: 1.25; }
.nl-fi-out-b p { margin: 0 0 10px; color: var(--body); line-height: 1.62; }
.nl-fi-num { font-weight: 700; color: var(--char); }
.nl-fi-fine { margin: 10px 0 16px; font-size: .85rem; color: var(--mut); line-height: 1.55; }

/* items 53 and 54. The FAQ search box and the three prices. */
.nl-fq-lab { display: block; font-weight: 700; margin-bottom: 7px; color: var(--char); }
.nl-fq { width: 100%; font-size: 1.05rem; padding: 13px 15px; border-radius: 9px; }
.nl-fq-count { margin: 8px 0 0; font-size: .88rem; color: var(--mut); }
.nl-fqp { border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px;
  background: linear-gradient(168deg, var(--surface), var(--bg-alt)); }
.nl-fqp h2 { margin: 0 0 14px; font-size: 1.3rem; }
.nl-fqp-list { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 14px; }
.nl-fqp-list li { display: grid; grid-template-columns: 110px 1fr; gap: 4px 14px; align-items: baseline; }
.nl-fqp-t { font-weight: 700; font-size: 1.1rem; color: var(--char); }
.nl-fqp-p { font-weight: 700; color: var(--green-l, #6FBF73); }
.nl-fqp-w { grid-column: 1 / -1; color: var(--body); font-size: .94rem; line-height: 1.55; }
.nl-fqp-fine { margin: 0; font-size: .86rem; color: var(--mut); line-height: 1.55; }
@media (max-width: 560px) { .nl-fqp-list li { grid-template-columns: 1fr; } }

/* item 57. A way out that is not the back button. */
.nl-next { display: grid; gap: 12px; }
@media (min-width: 760px) { .nl-next { grid-template-columns: repeat(3, 1fr); } }
.nl-next-card { display: block; padding: 16px 18px; border: 1px solid var(--line);
  border-radius: var(--radius); background: linear-gradient(168deg, var(--surface), var(--bg-alt));
  text-decoration: none; }
.nl-next-card:hover { border-color: var(--line-strong); }
.nl-next-t { display: block; font-weight: 700; font-size: 1.02rem; color: var(--char); margin-bottom: 5px; }
.nl-next-d { display: block; font-size: .9rem; line-height: 1.5; color: var(--body); }

/* item 56. The storm panel. Two halves: their words, and our mechanism. */
.nl-storm { display: grid; gap: 16px; }
@media (min-width: 860px) { .nl-storm { grid-template-columns: 1fr 1fr; } }
.nl-storm-half { border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px;
  background: linear-gradient(168deg, var(--surface), var(--bg-alt)); }
.nl-storm-ec { border-left: 5px solid var(--accent); }
.nl-storm-nl { border-left: 5px solid var(--green-l, #6FBF73); }
.nl-storm-h { margin: 0 0 12px; font-size: .78rem; letter-spacing: 1.5px; text-transform: uppercase;
  font-weight: 700; color: var(--accent); }
.nl-storm-nl .nl-storm-h { color: var(--green-l, #6FBF73); }
.nl-storm-body p { margin: 0 0 10px; color: var(--body); line-height: 1.6; }
.nl-storm-list { margin: 0 0 10px; padding-left: 20px; color: var(--body); }
.nl-storm-list li { margin-bottom: 4px; }
.nl-storm-fine, .nl-storm-src { margin: 0; font-size: .82rem; color: var(--mut); }
.nl-storm-src { margin-top: 12px; }
.nl-ec-flag { margin: 0 0 8px; font-weight: 700; color: var(--char); }
.nl-ec-q { margin: 0 0 10px; padding: 12px 14px; border-left: 3px solid var(--accent);
  background: rgba(0,0,0,.2); border-radius: 0 8px 8px 0; color: var(--char); line-height: 1.55; }

/* items 63 and 64. The route, counted, by town. */
.nl-rt { border: 1px solid var(--line); border-radius: var(--radius); padding: 24px;
  background: linear-gradient(168deg, var(--surface), var(--bg-alt)); }
.nl-rt-eyebrow { margin: 0 0 6px; font-size: .76rem; letter-spacing: 1.4px; text-transform: uppercase;
  font-weight: 700; color: var(--accent); }
.nl-rt h2 { margin: 0 0 16px; font-size: 1.5rem; }
.nl-rt-list { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 2px; }
.nl-rt-list a { display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  padding: 10px 12px; border-radius: 8px; text-decoration: none; color: var(--body); }
.nl-rt-list a:hover { background: rgba(0,0,0,.2); }
.nl-rt-town { font-weight: 700; color: var(--char); }
.nl-rt-n { font-weight: 700; font-size: 1.15rem; color: var(--green-l, #6FBF73); }
.nl-rt-open { color: var(--accent); font-weight: 600; }
.nl-rt-say { margin: 0 0 10px; color: var(--body); line-height: 1.6; }
.nl-rt-fine { margin: 0; font-size: .86rem; color: var(--mut); line-height: 1.55; }

/* item 66. The two offers, where people decide. */
.nl-offers { display: grid; gap: 14px; }
@media (min-width: 760px) { .nl-offers { grid-template-columns: 1fr 1fr; } }
.nl-offer { border: 1px solid var(--line); border-left: 4px solid var(--green-l, #6FBF73);
  border-radius: 0 var(--radius) var(--radius) 0; padding: 18px 20px;
  background: linear-gradient(168deg, var(--surface), var(--bg-alt)); }
.nl-offer-n { margin: 0 0 8px; font-weight: 700; font-size: 1.08rem; color: var(--char); }
.nl-offer p { margin: 0; color: var(--body); line-height: 1.58; }
.nl-offers-fine { margin: 14px 0 0; font-size: .86rem; color: var(--mut); line-height: 1.55; }

/* item 77. The journey, with step one already finished. */
.nl-journey { list-style: none; margin: 0; padding: 0; counter-reset: nlj; }
.nl-journey > li { position: relative; padding: 0 0 22px 52px; }
.nl-journey > li::after { content: ""; position: absolute; left: 17px; top: 34px; bottom: 0;
  width: 2px; background: var(--line-strong); }
.nl-journey > li:last-child { padding-bottom: 0; }
.nl-journey > li:last-child::after { display: none; }
.nl-j-n { position: absolute; left: 0; top: 0; width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700; background: rgba(0,0,0,.25);
  color: var(--body); border: 2px solid var(--line-strong); }
.nl-j--done .nl-j-n { background: var(--green, #2E7D32); color: #fff; border-color: var(--green-l, #6FBF73); }
.nl-j--done::after { background: var(--green-l, #6FBF73); }
.nl-j-t { display: block; font-weight: 700; font-size: 1.08rem; color: var(--char); margin-bottom: 3px; padding-top: 6px; }
.nl-j-d { display: block; color: var(--body); line-height: 1.58; }

/* items 78, 79 and 80. */
.nl-cmp-fine { margin: 14px 0 0; font-size: .9rem; color: var(--mut); line-height: 1.6; }
.nl-conseq { border: 1px solid var(--line); border-left: 5px solid #BF8F00;
  border-radius: 0 var(--radius) var(--radius) 0; padding: 22px 24px;
  background: linear-gradient(168deg, var(--surface), var(--bg-alt)); }
.nl-conseq h2 { margin: 0 0 12px; font-size: 1.35rem; }
.nl-conseq p { color: var(--body); line-height: 1.62; }

/* items 31 and 73. The checker stops being a dead end. */
.nl-chk-go { margin-top: 14px; }
.nl-chk-say { margin: 8px 0 0; font-size: .84rem; color: var(--mut); }

/* item 76. One question, answered in the owner's voice, dated. */
.nl-oa { border: 1px solid var(--line); border-left: 5px solid var(--green-l, #6FBF73);
  border-radius: 0 var(--radius) var(--radius) 0; padding: 22px 24px;
  background: linear-gradient(168deg, var(--surface), var(--bg-alt)); }
.nl-oa-flag { margin: 0 0 10px; font-size: .76rem; letter-spacing: 1.4px; text-transform: uppercase;
  font-weight: 700; color: var(--green-l, #6FBF73); }
.nl-oa-q { margin: 0 0 10px; font-size: 1.22rem; font-weight: 700; color: var(--char); line-height: 1.35; }
.nl-oa-a { margin: 0 0 12px; color: var(--body); line-height: 1.65; }
.nl-oa-fine { margin: 0; font-size: .84rem; color: var(--mut); }

/* item 81. The single storm trial. */
.nl-trial { border: 1px solid var(--line); border-left: 5px solid #BF8F00;
  border-radius: 0 var(--radius) var(--radius) 0; padding: 22px 24px;
  background: linear-gradient(168deg, var(--surface), var(--bg-alt)); }
.nl-trial-flag { margin: 0 0 6px; font-size: .76rem; letter-spacing: 1.4px; text-transform: uppercase;
  font-weight: 700; color: #E8B84B; }
.nl-trial h2 { margin: 0 0 12px; font-size: 1.38rem; line-height: 1.25; }
.nl-trial p { color: var(--body); line-height: 1.62; }

/* item 85. The job log. */
.nl-log { margin: 0 0 34px; }
.nl-log-meta { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: baseline; margin: 0 0 10px; }
.nl-log-date { font-weight: 700; color: var(--char); }
.nl-log-town { font-size: .86rem; letter-spacing: 1.2px; text-transform: uppercase; color: var(--accent); font-weight: 700; }
.nl-log-kind { font-size: .86rem; letter-spacing: 1.2px; text-transform: uppercase; color: var(--accent); font-weight: 700; }
.nl-log-job { color: var(--body); }
.nl-log-pic { margin: 0; }
.nl-log-fine { font-size: .9rem; color: var(--mut); line-height: 1.6; max-width: 70ch; }

/* item 83. The route board. One dot, one property, no addresses. */
.nl-board { border: 1px solid var(--line); border-radius: var(--radius); padding: 24px;
  background: linear-gradient(168deg, var(--surface), var(--bg-alt)); }
.nl-board-eyebrow { margin: 0 0 6px; font-size: .76rem; letter-spacing: 1.4px; text-transform: uppercase;
  font-weight: 700; color: var(--accent); }
.nl-board h2 { margin: 0 0 16px; font-size: 1.42rem; line-height: 1.25; }
.nl-board-list { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; }
.nl-board-list li { display: grid; grid-template-columns: 112px 1fr auto; gap: 12px; align-items: center; }
.nl-board-town { font-weight: 700; color: var(--char); }
.nl-dots { display: flex; flex-wrap: wrap; gap: 5px; }
.nl-dot { width: 13px; height: 13px; border-radius: 50%; background: var(--green-l, #6FBF73);
  box-shadow: 0 0 10px rgba(111,191,115,.45); }
.nl-dots--open { color: var(--accent); font-weight: 600; font-size: .9rem; }
.nl-board-n { color: var(--mut); font-size: .88rem; }
.nl-board-fine { margin: 0; font-size: .86rem; color: var(--mut); line-height: 1.55; }
@media (max-width: 560px) { .nl-board-list li { grid-template-columns: 92px 1fr; } .nl-board-n { display: none; } }

/* item 84. The storm clock. */
.nl-clock { border: 1px solid var(--line); border-left: 5px solid var(--line-strong);
  border-radius: 0 var(--radius) var(--radius) 0; padding: 20px 22px;
  background: linear-gradient(168deg, var(--surface), var(--bg-alt)); }
.nl-clock--on { border-left-color: var(--green-l, #6FBF73); }
.nl-clock-state { margin: 0 0 8px; font-size: 1.3rem; font-weight: 700; color: var(--char); }
.nl-clock--on .nl-clock-state { color: var(--green-l, #6FBF73); }
.nl-clock-line { margin: 0 0 10px; color: var(--body); line-height: 1.6; }
.nl-clock-fine { margin: 0; font-size: .84rem; color: var(--mut); line-height: 1.55; }

/* item 87. The swipeable sequence. */
.nl-seq { list-style: none; margin: 0; padding: 0 0 12px; display: grid; gap: 14px;
  grid-auto-flow: column; grid-auto-columns: minmax(260px, 300px);
  overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.nl-seq-f { scroll-snap-align: start; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 18px; background: linear-gradient(168deg, var(--surface), var(--bg-alt)); }
.nl-seq-f img { display: block; width: 100%; height: auto; border-radius: 8px; margin: 0 0 10px; }
.nl-seq-n { display: inline-block; font-size: .78rem; letter-spacing: 2px; font-weight: 700;
  color: var(--accent); margin-bottom: 8px; }
.nl-seq-t { margin: 0 0 6px; font-weight: 700; font-size: 1.08rem; color: var(--char); }
.nl-seq-d { margin: 0; color: var(--body); font-size: .94rem; line-height: 1.55; }
.nl-seq-fine { margin: 6px 0 0; font-size: .84rem; color: var(--mut); }

/* item 88. The question sticker. */
.nl-ask { border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px;
  background: linear-gradient(168deg, var(--surface), var(--bg-alt)); }
.nl-ask-q { margin: 0 0 14px; font-size: 1.22rem; font-weight: 700; color: var(--char); line-height: 1.35; }
.nl-ask-row { display: grid; gap: 10px; }
@media (min-width: 720px) { .nl-ask-row { grid-template-columns: repeat(3, 1fr); } }
.nl-ask-b { font: inherit; font-weight: 600; padding: 14px 16px; border-radius: 10px; cursor: pointer;
  border: 1.5px solid var(--line-strong); background: rgba(0,0,0,.2); color: var(--char); }
.nl-ask-b:hover { border-color: var(--accent); background: rgba(0,0,0,.32); }
.nl-ask-said { margin: 0 0 14px; color: var(--body); line-height: 1.62; }
.nl-ask-fine { margin: 12px 0 0; font-size: .84rem; color: var(--mut); line-height: 1.5; }

/* item 92. The short answer, written for an assistant as much as a reader. */
.nl-short { border: 1px solid var(--line); border-left: 5px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0; padding: 22px 24px;
  background: linear-gradient(168deg, var(--surface), var(--bg-alt)); }
.nl-short-q { margin: 0 0 10px; font-weight: 700; font-size: 1.18rem; color: var(--char); line-height: 1.35; }
.nl-short-a { margin: 0 0 10px; color: var(--body); line-height: 1.65; font-size: 1.04rem; }
.nl-short-fine { margin: 0; font-size: .84rem; color: var(--mut); line-height: 1.5; }

/* item 93. The owner's voice, with the transcript as the content. */
.nl-audio { border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px;
  background: linear-gradient(168deg, var(--surface), var(--bg-alt)); }
.nl-audio-flag { margin: 0 0 6px; font-size: .76rem; letter-spacing: 1.4px; text-transform: uppercase;
  font-weight: 700; color: var(--accent); }
.nl-audio h2 { margin: 0 0 14px; font-size: 1.35rem; }
.nl-audio-el { width: 100%; margin: 0 0 16px; }
.nl-audio-tx { border-top: 1px solid var(--line); padding-top: 14px; }
.nl-audio-txh { margin: 0 0 6px; font-size: .78rem; letter-spacing: 1.4px; text-transform: uppercase;
  font-weight: 700; color: var(--mut); }
.nl-audio-tx p { color: var(--body); line-height: 1.65; margin: 0; }
.nl-audio-fine { margin: 12px 0 0; font-size: .84rem; color: var(--mut); }
.nl-audio--noaudio .nl-audio-el { display: none; }

/* ===========================================================================
   OWNER RULING, October 13, 2026. THERE IS NO GOLD CALL TO ACTION.
   Every button that asks for the sale is canon green, white on #2E7D32,
   measured 5.13:1, and it carries the ring. The gold pill survives only on
   .plan-flag and .offer-flag, which are labels rather than actions.
   =========================================================================== */
.btn--gold,
.plan-foot .btn--outline{
  background:#2E7D32 !important;
  color:#fff !important;
  border:1px solid #2E7D32 !important;
  box-shadow:0 0 0 1px rgba(111,191,115,.35), 0 0 26px rgba(46,125,50,.45);
  transition:box-shadow .3s ease, transform .2s ease;
}
.btn--gold:hover,
.btn--gold:focus-visible,
.plan-foot .btn--outline:hover,
.plan-foot .btn--outline:focus-visible{
  background:#27682B !important;
  color:#fff !important;
  border-color:#2E7D32 !important;
  box-shadow:0 0 0 1px rgba(111,191,115,.7), 0 0 42px rgba(46,125,50,.8);
  transform:translateY(-1px);
}

/* The commercial block sits on navy and the blanket rule above it hides the
   ring on every button in a navy section. The owner asked for the ring on
   that call to action, so the green button is excepted by name. The ghost
   and call buttons on navy keep the suppression, which is what the rule
   was written for. */
.sec--navy .btn--gold::before{ display:block; }

/* ---------------------------------------------------------------------------
   THE CALL CARD NUMBER GLOWS.
   Owner instruction, October 13, 2026. Text shadow only, so nothing moves and
   nothing reflows, and the pulse stops under a reduced motion preference. */
.nl-callglow{
  display:inline-block;
  color:#6FBF73;
  text-shadow:0 0 14px rgba(46,125,50,.55), 0 0 28px rgba(46,125,50,.25);
  animation:nl-callpulse 2.6s ease-in-out infinite;
}
.nl-callglow:hover{ color:#8FD193; }
@keyframes nl-callpulse{
  0%,100%{ text-shadow:0 0 14px rgba(46,125,50,.55), 0 0 28px rgba(46,125,50,.25); }
  50%    { text-shadow:0 0 24px rgba(46,125,50,1),   0 0 50px rgba(46,125,50,.6); }
}
@media (prefers-reduced-motion: reduce){ .nl-callglow{ animation:none; } }