/* ============================================================
   THE ENTEL WIRE (/newsletter)
   ============================================================
   Lifted out of a 1,095 line inline <style> in src/newsletter.html so the page
   stops carrying its own private design system.

   EVERY RULE IS SCOPED UNDER .briefing, which is on that page's <body>. This is
   load bearing, not tidiness: .hero, .hero-deck and .hero-fine name a different
   design here than in site.css, and unscoped these rules would repaint the
   homepage hero. Any rule added here must keep the scope.

   Loaded only by /briefing, so no other page pays for it. Shrink it by moving
   rules onto the shared components in site.css one at a time; it is not meant
   to live at this size forever.
   ============================================================ */
/* Reset removed: site.css already ships one, and scoping this copy lifted its
   specificity from (0,0,0) to (0,1,0), which beat every single-class padding
   rule in site.css and collapsed the shared nav. */

    /* :root block removed: a verbatim duplicate of entel-tokens.css, which this
   page already links. */


    html{ scroll-behavior: smooth; }
    .newsletter{
      font-family: var(--serif);
      color: var(--text);
      background: var(--gray-light);
      -webkit-font-smoothing: antialiased;
    }

    /* ============================================================
   UN-BLEED FROM site.css
   ============================================================
   This page and the homepage BOTH use .hero, .hero-deck and .hero-fine for
   different designs. site.css loads first and its homepage hero has since grown
   a layered light source and a centred deck, and both were landing here: two
   radial gradients painting over this hero's own ground, and `margin: 0 auto`
   indenting the deck 33px inside a left-aligned column.

   Reset rather than rename, because .hero is written into this page's markup and
   its own 1,000 lines of rules. If the homepage hero grows another property this
   page does not want, it gets added here. */
.newsletter .hero::before,
.newsletter .hero::after { content: none; display: none; }
.newsletter .hero-deck { margin-left: 0; margin-right: 0; }
/* Left, with the rest of the column. The original centred this inside a 940px
   box while the eyebrow, headline, deck, promise and form above it all sit hard
   left, so the one line under the form was the only thing not on the edge.
   Scoped to .hero-left because the bottom CTA reuses .hero-fine and IS centred. */
.newsletter .hero-left .hero-fine { max-width: none; text-align: left; }

.newsletter a{ color: inherit; }

    /* ─── NAV ─── lives in shared chrome: /entel-chrome.css ─── */

    /* ─── HERO ─── */
    .newsletter .hero{
      background: var(--dark);
      padding: 56px 28px 0;
      position: relative;
      overflow: hidden;
    }
    .newsletter .hero::after{
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse 60% 50% at 80% 30%, rgba(122,173,106,0.07), transparent 60%),
        radial-gradient(ellipse 40% 40% at 15% 80%, rgba(122,173,106,0.04), transparent 60%);
      pointer-events: none;
    }
    .newsletter .hero-inner{
      max-width: 1040px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1.15fr 1fr;
      gap: 56px;
      align-items: center;
      position: relative;
      z-index: 1;
    }

    .newsletter .hero-eyebrow{
      font-family: var(--mono);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--green);
      margin-bottom: 18px;
      display: inline-flex;
      align-items: center;
      gap: 10px;
    }
    .newsletter .hero-eyebrow .blink{
      display: inline-block;
      width: 7px; height: 7px; border-radius: 50%;
      background: var(--green);
      animation: pulse 2.4s ease-in-out infinite;
    }
    @keyframes pulse { 0%,100% { opacity: 0.4; } 50% { opacity: 1; } }

    /* Matched to .page-h1 in site.css, which is what every other dark header on
       this site uses: same family, same weight, same clamp, same line height and
       tracking. It had its own heavier, tighter scale and read as a different
       site. The accent takes --green because the ground is dark, the same split
       beta.html and about.html use. */
    .newsletter .hero-headline{
      font-family: var(--serif);
      font-size: clamp(30px, 4.6vw, 50px);
      font-weight: 400;
      color: var(--white);
      line-height: 1.1;
      letter-spacing: -0.028em;
      margin-bottom: 18px;
    }
    .newsletter .hero-headline .accent{ color: var(--green); }

    .newsletter .hero-deck{
      font-family: var(--serif);
      font-size: 17px;
      line-height: 1.55;
      color: rgba(255,255,255,0.78);
      max-width: 460px;
      margin-bottom: 24px;
    }

    .newsletter .hero-proof{
      font-family: var(--sans);
      font-size: 12px;
      color: var(--green-muted);
      letter-spacing: 0.04em;
      line-height: 1.7;
    }
    .newsletter .hero-proof a{
      color: var(--green-muted);
      text-decoration: none;
      border-bottom: 1px dotted rgba(138,158,130,0.35);
      transition: color 0.15s, border-color 0.15s;
    }
    .newsletter .hero-proof a:hover{ color: var(--green); border-bottom-color: var(--green); }
    .newsletter .hero-proof .dot{ color: rgba(138,158,130,0.5); margin: 0 8px; }

    /* Hero left column: promise line + form under the headline */
    .hero-left{ padding: 4px 0 56px; }
    .newsletter .hero-promise{
      font-family: var(--sans);
      font-size: 13px;
      font-weight: 700;
      color: var(--green);
      letter-spacing: 0.02em;
      margin-bottom: 14px;
    }
    .newsletter .hero-left .signup-form{ max-width: 420px; }

    /* Edge-peek phone: leans out of the bottom-right corner, .newsletter cropped by the hero */
    .hero-phone{
      position: relative;
      min-height: 480px;
      height: 100%;
    }
    .newsletter .hero-phone img{
      width: 380px;
      height: auto;
      position: absolute;
      right: -70px;
      bottom: -230px;
      transform: rotate(9deg);
      filter: drop-shadow(-18px 26px 38px rgba(0,0,0,0.55));
    }
    .newsletter .hero-phone-glow{
      position: absolute;
      inset: auto -120px -160px -20px;
      height: 480px;
      background: radial-gradient(ellipse 55% 45% at 50% 45%, rgba(122,173,106,0.15), transparent 65%);
      pointer-events: none;
    }

    .newsletter .signup-form{
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }
    .newsletter .signup-form input[type="email"]{
      flex: 1;
      min-width: 200px;
      padding: 13px 14px;
      font-family: var(--sans);
      font-size: 14px;
      border: 1px solid #2a4a2a;
      background: #0c1a0c;
      color: var(--white);
      border-radius: 3px;
      outline: none;
      transition: border-color 0.15s;
    }
    .newsletter .signup-form input[type="email"]::placeholder{ color: #5a7a5a; }
    .newsletter .signup-form input[type="email"]:focus{ border-color: var(--green); }
    .newsletter .signup-form button{
      padding: 13px 22px;
      font-family: var(--sans);
      font-size: 13px;
      font-weight: 700;
      color: var(--dark);
      background: var(--green);
      border: none;
      border-radius: 3px;
      cursor: pointer;
      letter-spacing: 0.03em;
      transition: background 0.15s;
      white-space: nowrap;
    }
    .newsletter .signup-form button:hover{ background: var(--green-hi); }

    .newsletter .hero-fine{
      font-family: var(--sans);
      font-size: 11px;
      color: #4a6a4a;
      margin-top: 12px;
      letter-spacing: 0.03em;
    }

    .newsletter /* Honeypot. Out of flow, .newsletter so nothing on the page moves. Not type="hidden":
       better bots skip those, .newsletter and this one has to look fillable. */
    .newsletter .hp{ position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

    .newsletter .success-msg{
      display: none;
      font-family: var(--sans);
      font-size: 14px;
      color: var(--green);
      font-weight: 600;
      margin-top: 10px;
      letter-spacing: 0.02em;
    }

    @media (max-width: 860px) {
      .newsletter .hero-inner{ grid-template-columns: 1fr; gap: 18px; }
      .newsletter /* clip horizontally at the viewport edge (stops zoom-out side-scroll from the
         off-screen phone edge) while staying open vertically for the seam crossing */
      .hero{ overflow: visible; overflow-x: clip; overflow-y: visible; }
      /* less text on the stacked hero: the promise line does the deck's job */
      /* NOT display:none. This is the only line on the page that says what
         the newsletter contains; the promise line above it is a cadence claim
         ("Thursdays, 9:30 AM ET, free"), which is a different promise. It was
         being deleted on every tablet and every phone, which is most of the
         readership. attio.com shrinks its sub-deck at 390 and keeps every word.
         Tightened instead: smaller, and given back its own measure. */
      .newsletter .hero-deck{ font-size: 14.5px; line-height: 1.6; max-width: 52ch; margin-bottom: 20px; }
      .newsletter .hero-promise .promise-b{ display: block; }
      .newsletter .hero-left{ padding-bottom: 0; }
      .newsletter /* seam stamp: small phone straddling the hero/strip boundary, .newsletter fading as it
         crosses; the mask keeps it off the form */
      .hero-phone{ min-height: 26px; margin-top: 0; }
      .newsletter .hero-phone img{
        width: 148px; right: -50px; bottom: -96px;
        transform: rotate(-9deg);
        /* no drop-shadow here: overflow-x clip cuts it into a hard-edged dark box */
        filter: none;
        -webkit-mask-image: linear-gradient(to bottom, black 42%, transparent 78%);
        mask-image: linear-gradient(to bottom, black 42%, transparent 78%);
      }
      .newsletter .hero-phone-glow{ display: none; }
      /* hero only: the bottom CTA reuses .hero-fine and must stay centered */
      .hero-left .hero-fine{ max-width: 235px; }
    }

    /* ─── READER QUOTE STRIP (under hero) ─── */
    .newsletter .quote-strip{
      background: var(--dark-deep);
      border-top: 1px solid rgba(122,173,106,0.14);
      padding: 16px 24px 15px;
    }
    .newsletter .qs-lead{
      font-family: var(--sans);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: rgba(122,173,106,0.75);
      text-align: center;
      margin: 0 0 9px;
    }
    .newsletter .quote-strip-inner{
      max-width: 1040px;
      margin: 0 auto;
      display: flex;
      align-items: baseline;
      justify-content: center;
      gap: 10px 22px;
      flex-wrap: wrap;
      text-align: center;
    }
    .newsletter .qs-q{
      font-family: var(--serif);
      font-style: italic;
      font-size: 13.5px;
      color: rgba(255,255,255,0.68);
      white-space: nowrap;
    }
    .newsletter .qs-q .qm{ color: var(--green); font-style: normal; }
    .newsletter .qs-sep{ color: rgba(122,173,106,0.45); font-family: var(--sans); font-size: 11px; }
    @media (max-width: 768px) {
      /* no-JS / reduced-motion fallback: two quotes side by side, third underneath */
      .newsletter .quote-strip-inner{
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px 16px;
        justify-items: center;
        align-items: start;
      }
      .newsletter .qs-q{ white-space: normal; font-size: 12.5px; text-align: center; }
      .newsletter .quote-strip-inner .qs-q:last-child{ grid-column: 1 / -1; }
      /* 768, not 760. iPad portrait is exactly 768, so it cleared this by
         eight pixels, the flex row wrapped, and line one ended on a dangling
         diamond with nothing after it. A breakpoint eight pixels under the most
         common tablet width is a breakpoint aimed at no device. */
      .newsletter .qs-sep{ display: none; }
      /* marquee mode zeroes the section's side padding, so the lead line carries its own */
      /* 11px is the floor (DESIGN-SYSTEM 7.6), and this rule was walking a
         10px label down to 9 as the screen narrowed, so the label got harder to
         read exactly where reading is hardest. The room comes out of tracking. */
      .newsletter .qs-lead{ font-size: 11px; letter-spacing: 0.1em; padding: 0 20px; }

      /* JS upgrades the strip to a slow wire-ticker marquee */
      .newsletter .quote-strip.marquee{ padding-left: 0; padding-right: 0; overflow: hidden; }
      .newsletter .quote-strip.marquee .quote-strip-inner{
        display: inline-flex;
        flex-wrap: nowrap;
        align-items: baseline;
        gap: 30px;
        max-width: none;
        white-space: nowrap;
        animation: stripScroll 40s linear infinite;
        will-change: transform;
      }
      .newsletter .quote-strip.marquee .qs-q{ white-space: nowrap; grid-column: auto; }
      .newsletter .quote-strip.marquee .qs-sep{ display: inline; }
    }
    @keyframes stripScroll {
      from { transform: translateX(0); }
      to   { transform: translateX(-50%); }
    }

    /* ─── SECTION SHARED ─── */
    .section{ padding: 72px 24px; }
    .newsletter .section-narrow{ max-width: 720px; margin: 0 auto; }
    .newsletter .section-wide{ max-width: 1040px; margin: 0 auto; }
    .newsletter .section-eyebrow{
      font-family: var(--sans);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--green-bold);
      margin-bottom: 12px;
    }
    .newsletter .section-eyebrow.centered{ text-align: center; }
    .newsletter .section-title{
      font-family: var(--serif);
      font-size: clamp(24px, 3.4vw, 32px);
      font-weight: 700;
      color: var(--text);
      letter-spacing: -0.4px;
      line-height: 1.2;
      margin-bottom: 10px;
    }
    .newsletter .section-title.centered{ text-align: center; }
    .newsletter .section-sub{
      font-family: var(--sans);
      font-size: 14px;
      color: var(--text-muted);
      line-height: 1.6;
      margin-bottom: 36px;
    }
    .newsletter .section-sub.centered{ text-align: center; }

    /* ─── PREVIEW (mock email) ─── */
    .preview-section{ background: var(--gray-light); padding: 64px 24px 64px; }
    /* breathing room under the title now that the subhead is gone */
    .preview-section .section-narrow{ margin-bottom: 30px; }

    .newsletter .mock-email{
      max-width: 640px;
      margin: 0 auto;
      background: var(--white);
      border-radius: 4px;
      overflow: hidden;
      box-shadow: 0 2px 24px rgba(0,0,0,0.08);
      position: relative;
    }
    .newsletter .mock-header{
      background: var(--dark);
      padding: 26px 36px 22px;
    }
    .newsletter .mock-wordmark{
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--green);
      margin-bottom: 4px;
    }
    .newsletter .mock-title{
      font-family: var(--serif);
      font-size: 24px;
      font-weight: 700;
      color: var(--white);
      letter-spacing: -0.3px;
    }
    .newsletter .mock-date{
      font-family: var(--sans);
      font-size: 11px;
      color: var(--green-muted);
      margin-top: 6px;
    }
    .newsletter .mock-body{ padding: 30px 36px 0; }

    .newsletter .mock-hook{
      font-family: var(--serif);
      font-size: 16px;
      font-style: italic;
      line-height: 1.55;
      color: var(--text);
      margin-bottom: 10px;
    }
    .newsletter .mock-context{
      font-family: var(--sans);
      font-size: 12px;
      line-height: 1.65;
      color: #666;
      border-left: 3px solid var(--green-light);
      padding-left: 12px;
      margin-bottom: 26px;
    }
    .newsletter .mock-context strong{ color: var(--text); }
    .newsletter .mock-divider{
      border: none;
      border-top: 1px solid var(--gray-mid);
      margin: 18px 0;
    }
    .newsletter .mock-label{
      font-family: var(--sans);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--green-bold);
      margin-bottom: 14px;
    }
    .newsletter .mock-glance{ list-style: none; }
    .newsletter .mock-glance-item{
      padding: 10px 0;
      border-bottom: 1px solid #f0f0ec;
    }
    .newsletter .mock-glance-item:last-child{ border-bottom: none; }
    .newsletter .mock-glance-headline{
      font-family: var(--sans);
      font-size: 12.5px;
      font-weight: 600;
      color: var(--text);
      line-height: 1.4;
    }
    .newsletter .mock-glance-headline em{ font-style: italic; }
    .newsletter .mock-glance-sub{
      font-family: var(--sans);
      font-size: 11px;
      color: #888;
      margin-top: 2px;
    }
    .newsletter .mock-fade{
      height: 110px;
      background: linear-gradient(to bottom, transparent, var(--white));
      margin-top: -36px;
      position: relative;
      z-index: 2;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      padding-bottom: 22px;
    }
    .newsletter .mock-fade-cta{
      font-family: var(--sans);
      font-size: 12px;
      font-weight: 600;
      color: var(--green-bold);
      text-decoration: none;
      border-bottom: 1px solid var(--green-light);
      padding-bottom: 1px;
      transition: color 0.15s;
    }
    .newsletter .mock-fade-cta:hover{ color: #4a8a3a; }
    .newsletter .mock-source-note{
      font-family: var(--sans);
      font-size: 11px;
      color: var(--text-faint);
      text-align: center;
      margin-top: 14px;
      letter-spacing: 0.02em;
    }

    /* ─── COMPANION TOOL FEATURE ─── */
    .tool-section{
      background: var(--white);
      padding: 80px 24px;
      border-top: 1px solid var(--rule);
      border-bottom: 1px solid var(--rule);
    }
    .newsletter .tool-inner{
      max-width: 1040px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 56px;
      align-items: center;
    }
    @media (max-width: 860px) {
      .newsletter .tool-inner{ grid-template-columns: 1fr; gap: 40px; }
    }

    /* Companion tools: Atlas hero band + fuel UF6 strip (B2) */
    .tools2{ border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
    .newsletter .tools2-hero{ background: var(--dark); padding: 60px 24px; }
    .newsletter .tools2-hero-inner{ max-width: 1040px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.15fr; gap: 48px; align-items: center; }
    .newsletter .tools2-copy h2{ font-family: var(--serif); font-size: clamp(24px, 3.2vw, 32px); color: var(--white); line-height: 1.1; margin-bottom: 14px; letter-spacing: -0.3px; }
    /* :not(.eyebrow) because the chip is a <p> too, and this paragraph rule was
       out-specifying the shared chip colour. */
    .newsletter .tools2-copy p:not(.eyebrow){ font-family: var(--sans); font-size: 15px; color: #c9d6c1; line-height: 1.65; margin-bottom: 22px; max-width: 440px; }
    .newsletter .tools2-mock{ position: relative; display: block; text-decoration: none; border-radius: 4px; overflow: hidden; box-shadow: 0 12px 34px rgba(0,0,0,0.32); }
    /* explicit "this opens" affordance: a green action bar flush under the card image */
    .mock-open{
      display: flex; align-items: center; justify-content: center; gap: 6px;
      font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 0.02em;
      color: var(--dark); background: var(--green);
      padding: 9px 12px;
    }
    .newsletter .mock-open svg{ width: 14px; height: 14px; animation: mockOpenNudge 2.6s ease-in-out infinite; }
    @keyframes mockOpenNudge { 0%, 62%, 100% { transform: translate(0,0); } 80% { transform: translate(2px,-2px); } }
    .newsletter .tools2-mock:hover .mock-open{ background: var(--green-hi); }
    .newsletter .tools2-mockbar{ background: #0a160a; border-bottom: 1px solid #1e3a1e; padding: 9px 14px; display: flex; align-items: center; gap: 6px; }
    .newsletter .tools2-mockbar span{ width: 9px; height: 9px; border-radius: 50%; background: #2e4a2e; }
    .newsletter .tools2-mockbar .u{ width: auto; height: auto; border-radius: 0; background: none; font-family: var(--mono); font-size: 11px; color: #6f8a66; margin-left: 8px; }
    .newsletter .tools2-mock img{ display: block; width: 100%; height: auto; }
    /* THE MAP CROPS RATHER THAN SHRINKS, for the same reason the five showcase
       clips and the hero sheet do (site.css, SURFACES). At 390 a full-width
       Nuke Map renders its key, its pipeline bars and its reactor count at
       about five pixels, which is a picture of a product arguing that the
       product is unreadable. Held at a legible width inside a scroller. */
    @media (max-width: 767px) {
      .newsletter .tools2-mock{
        overflow-x: auto; overflow-y: hidden;
        overscroll-behavior-x: contain; scrollbar-width: none;
      }
      .newsletter .tools2-mock::-webkit-scrollbar{ display: none; }
      .newsletter .tools2-mock img{ width: clamp(680px, 168%, 900px); max-width: none; }
    }
    .newsletter .tools2-strip{ max-width: 1040px; margin: 0 auto; padding: 20px 24px; display: flex; align-items: center; gap: 18px; }
    .newsletter .tools2-chip{ font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--green-bold); background: #e6efe0; padding: 6px 11px; border-radius: 4px; white-space: nowrap; flex-shrink: 0; }
    .newsletter .tools2-t{ font-family: var(--sans); font-size: 13.5px; color: var(--text-muted); line-height: 1.55; }
    .newsletter .tools2-t strong{ color: var(--dark); }
    .newsletter .tools2-link{ margin-left: auto; white-space: nowrap; flex-shrink: 0; font-family: var(--sans); font-size: 13px; font-weight: 700; color: var(--green-bold); text-decoration: none; }
    .newsletter .tools2-link:hover{ color: var(--dark); }
    @media (max-width: 860px) {
      .newsletter .tools2-hero-inner{ grid-template-columns: 1fr; gap: 2px; }
      /* UF6 row reads as its own companion card sitting under the Nuke Map card on mobile */
      .tools2-strip{
        flex-direction: column; align-items: flex-start; gap: 12px;
        margin: 18px 16px; padding: 20px;
        background: var(--white); border: 1px solid var(--rule); border-radius: 5px;
      }
      .newsletter .tools2-link{ margin-left: 0; }
      /* NOT hidden. This span is the only place the page explains what UF6 is
         and why conversion is the squeeze, and it was being removed for every
         reader on a tablet or a phone, which is the reader most likely to need
         it. Same treatment as .hero-deck above: smaller, not gone. */
      .newsletter .tools2-detail{ display: block; font-size: 12.5px; line-height: 1.5; margin-top: 6px; }
    }

    /* motion polish: arrow nudge, .newsletter latest-issue dot pulse, .newsletter button press, .newsletter clickable Atlas mock */
    .arw{ display: inline-block; transition: transform 0.18s var(--ease-out-cubic); }
    .newsletter a:hover .arw, .newsletter button:hover .arw{ transform: translateX(4px); }
    @keyframes latestPulse {
      0% { box-shadow: 0 0 0 0 rgba(122,173,106,0.55); }
      70% { box-shadow: 0 0 0 9px rgba(122,173,106,0); }
      100% { box-shadow: 0 0 0 0 rgba(122,173,106,0); }
    }
    .newsletter .tl-item.is-latest .tl-dot{ animation: latestPulse 2.4s ease-out infinite; }
    .newsletter .signup-form button, .newsletter .tool-link, .newsletter .tools2-link{ transition: transform 0.1s var(--ease-out-cubic), background 0.15s, color 0.15s, border-color 0.15s; }
    .newsletter .signup-form button:active, .newsletter .tool-link:active, .newsletter .tools2-link:active{ transform: scale(0.97); }
    .newsletter .tools2-mock{ cursor: pointer; transition: transform 0.25s var(--ease-out-cubic), box-shadow 0.25s var(--ease-out-cubic); }
    .newsletter .tools2-mock:hover{ transform: translateY(-3px); box-shadow: 0 20px 48px rgba(0,0,0,0.42); }
    @media (prefers-reduced-motion: reduce) {
      .newsletter .tl-item.is-latest .tl-dot{ animation: none; }
      .newsletter .arw, .newsletter .tools2-mock{ transition: none; }
      .newsletter .mock-open svg{ animation: none; }
    }

    .newsletter /* Touch devices have no hover: the card crossing the viewport middle self-highlights
       as you scroll, .newsletter so tappability reads without a tap. JS toggles .tl-active. */
    @media (hover: none){
      .tl-item.tl-active .tl-card {
        transform: translateY(-2px);
        box-shadow: 0 12px 28px -18px rgba(15,31,15,0.35);
        border-color: var(--green-bold);
      }
      .tl-item.is-latest.tl-active .tl-card { box-shadow: 0 16px 34px -20px rgba(15,31,15,0.55); }
      .tl-item.tl-active .tl-cta { color: var(--dark); }
      .tl-item.is-latest.tl-active .tl-cta { color: var(--green-hi); }
      .tl-item.tl-active .tl-cta .arw { transform: translateX(4px); }
      /* Nuke Map card lifts as it crosses the viewport middle, so it reads as tappable */
      .tools2-mock.tl-active { transform: translateY(-3px); box-shadow: 0 20px 48px rgba(0,0,0,0.42); }
    }
    @media (hover: none) and (prefers-reduced-motion: reduce) {
      .newsletter .tl-item.tl-active .tl-card{ transform: none; }
      .newsletter .tl-item.tl-active .tl-cta .arw{ transform: none; }
      .newsletter .tools2-mock.tl-active{ transform: none; }
    }

    .newsletter .tool-copy .tool-eyebrow{
      font-family: var(--sans);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--green-bold);
      margin-bottom: 12px;
      display: inline-flex;
      align-items: center;
      gap: 10px;
    }
    .newsletter .tool-copy .tool-eyebrow::before{
      content: "";
      display: inline-block;
      width: 24px;
      height: 1px;
      background: var(--green-bold);
    }
    .newsletter .tool-copy h2{
      font-family: var(--serif);
      font-size: clamp(26px, 3.6vw, 36px);
      font-weight: 700;
      color: var(--text);
      letter-spacing: -0.5px;
      line-height: 1.15;
      margin-bottom: 16px;
    }
    .newsletter .tool-copy h2 .small{
      font-family: var(--mono);
      font-size: 0.55em;
      font-weight: 400;
      color: var(--green-bold);
      letter-spacing: 0.05em;
      vertical-align: middle;
      margin-left: 6px;
    }
    .newsletter .tool-copy p{
      font-family: var(--serif);
      font-size: 16px;
      line-height: 1.6;
      color: var(--text-muted);
      margin-bottom: 14px;
      max-width: 460px;
    }
    .newsletter .tool-copy .tool-link{
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-top: 8px;
      font-family: var(--sans);
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--dark);
      background: var(--green);
      padding: 11px 18px;
      border-radius: 3px;
      text-decoration: none;
      transition: background 0.15s;
    }
    .newsletter .tool-copy .tool-link:hover{ background: var(--green-hi); }

    /* Mock fuel.jrand.net visual */
    .tool-mock{
      background: var(--dark);
      border-radius: 4px;
      overflow: hidden;
      box-shadow: 0 24px 60px -28px rgba(15,31,15,0.5);
    }
    .newsletter .tool-mock-bar{
      background: var(--dark-deep);
      padding: 10px 16px;
      display: flex;
      align-items: center;
      gap: 8px;
      border-bottom: 1px solid rgba(122,173,106,0.12);
    }
    .newsletter .tool-mock-bar .url{
      font-family: var(--mono);
      font-size: 11px;
      color: var(--green-muted);
      letter-spacing: 0.04em;
    }
    .newsletter .tool-mock-bar .dot{
      width: 9px; height: 9px; border-radius: 50%;
      background: rgba(122,173,106,0.25);
    }
    .newsletter .tool-mock-bar .dot:nth-child(2){ background: rgba(122,173,106,0.45); }
    .newsletter .tool-mock-bar .dot:nth-child(3){ background: var(--green); }
    .newsletter .tool-mock-body{ padding: 22px 24px 26px; }
    .newsletter .tool-mock-body-img{ background: #ecead8; display: block; }
    .newsletter .tool-mock-body-img img{ display: block; width: 100%; height: auto; }
    .newsletter .tool-mock-h{
      font-family: var(--serif);
      font-size: 14px;
      color: var(--white);
      margin-bottom: 4px;
      letter-spacing: -0.2px;
    }
    .newsletter .tool-mock-sub{
      font-family: var(--sans);
      font-size: 11px;
      color: var(--green-muted);
      margin-bottom: 18px;
    }
    .newsletter .tool-mock-table{ width: 100%; border-collapse: collapse; }
    .newsletter .tool-mock-table th, .newsletter .tool-mock-table td{
      text-align: left;
      padding: 8px 0;
      font-family: var(--mono);
      font-size: 11px;
      color: rgba(255,255,255,0.78);
      border-bottom: 1px solid rgba(255,255,255,0.05);
    }
    .newsletter .tool-mock-table th{
      color: var(--green-bold);
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      font-size: 10px;
      border-bottom-color: rgba(122,173,106,0.18);
    }
    .newsletter .tool-mock-table td.num{
      text-align: right;
      color: var(--white);
      font-weight: 600;
    }
    .newsletter .tool-mock-table td.flag{
      color: var(--green);
      font-weight: 600;
    }
    .newsletter .tool-mock-foot{
      margin-top: 14px;
      font-family: var(--mono);
      font-size: 10px;
      color: rgba(255,255,255,0.4);
      letter-spacing: 0.06em;
    }

    /* ─── TIMELINE (recent issues) ─── */
    .timeline-section{
      /* --gray-light like every other light band. It was --off-white and
         .why-section below it was --white, which put three light grounds on one
         page. Bands are separated by texture and hairlines here, not colour. */
      background: var(--gray-light);
      border-top: 1px solid var(--rule);
      padding: 72px 24px;
    }
    .newsletter .timeline-head{ max-width: 720px; margin: 0 auto 36px; text-align: center; }
    .newsletter .timeline{
      max-width: 700px;
      margin: 0 auto;
      position: relative;
      padding: 12px 0 8px;
    }
    .newsletter .timeline::before{
      content: '';
      position: absolute;
      left: 92px;
      top: 0; bottom: 0;
      width: 2px;
      background: linear-gradient(180deg, transparent 0, rgba(92,158,74,0.45) 30px, rgba(92,158,74,0.35) calc(100% - 30px), transparent 100%);
    }
    @media (max-width: 600px) { .newsletter .timeline::before{ left: 16px; } }

    .newsletter .tl-item{
      position: relative;
      padding: 0 0 22px 130px;
      display: block;
      text-decoration: none;
      color: inherit;
    }
    @media (max-width: 600px) { .newsletter .tl-item{ padding: 0 0 18px 48px; } }
    .newsletter .tl-item:last-child{ padding-bottom: 0; }

    .newsletter .tl-date{
      position: absolute;
      left: 0; top: 0;
      width: 88px;
      text-align: right;
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--green-bold);
      line-height: 1.4;
      padding-top: 6px;
      padding-right: 16px;
    }
    .newsletter .tl-date .day{
      display: block;
      font-family: var(--serif);
      font-size: 24px;
      font-weight: 700;
      line-height: 1;
      color: var(--dark);
      letter-spacing: -0.01em;
    }
    .newsletter .tl-date .month{ display: block; margin-top: 4px; font-size: 10px; }
    @media (max-width: 600px) {
      .newsletter .tl-date{
        position: static; width: auto; text-align: left;
        padding-top: 0; padding-bottom: 8px; padding-left: 4px;
        display: flex; align-items: baseline; gap: 6px;
      }
      .newsletter .tl-date .day{ font-size: 16px; display: inline; }
      .newsletter .tl-date .month{ display: inline; margin-top: 0; }
    }

    .newsletter .tl-dot{
      position: absolute;
      left: 86px; top: 14px;
      width: 14px; height: 14px;
      border-radius: 50%;
      background: var(--dark);
      border: 3px solid var(--off-white);
      box-shadow: 0 0 0 1px var(--green-bold);
    }
    @media (max-width: 600px) { .newsletter .tl-dot{ left: 10px; top: 6px; } }

    .newsletter .tl-card{
      background: var(--white);
      border: 1px solid var(--rule);
      padding: 20px 24px;
      transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
      border-radius: 3px;
    }
    .newsletter .tl-item:hover .tl-card{
      transform: translateY(-2px);
      box-shadow: 0 12px 28px -18px rgba(15,31,15,0.35);
      border-color: var(--green-bold);
    }
    .newsletter .tl-issue-no{
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--green-bold);
      margin-bottom: 6px;
    }
    .newsletter .tl-title{
      font-family: var(--serif);
      font-weight: 700;
      font-size: 19px;
      line-height: 1.3;
      color: var(--text);
      letter-spacing: -0.2px;
      margin-bottom: 8px;
    }
    .newsletter .tl-deck{
      font-family: var(--sans);
      font-size: 13px;
      line-height: 1.55;
      color: var(--text-muted);
      margin-bottom: 10px;
    }
    .newsletter .tl-cta{
      font-family: var(--sans);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--green-bold);
    }
    .newsletter .tl-item:hover .tl-cta{ color: var(--dark); }

    /* Latest variant */
    .tl-item.is-latest .tl-card{
      background: var(--dark);
      border-color: var(--dark);
      padding: 24px 28px;
    }
    .newsletter .tl-item.is-latest .tl-title{ color: var(--white); font-size: 22px; }
    .newsletter .tl-item.is-latest .tl-deck{ color: rgba(255,255,255,0.78); font-size: 14px; }
    .newsletter .tl-item.is-latest .tl-issue-no{ color: var(--green); }
    .newsletter .tl-item.is-latest .tl-cta{ color: var(--green); }
    .newsletter .tl-item.is-latest .tl-dot{
      background: var(--green);
      box-shadow: 0 0 0 1px var(--green-bold), 0 0 0 6px rgba(122,173,106,0.18);
    }
    .newsletter .tl-flag{
      display: inline-block;
      font-family: var(--sans);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      background: var(--green);
      color: var(--dark);
      padding: 3px 8px;
      border-radius: 2px;
      margin-bottom: 10px;
    }

    .newsletter .timeline-foot{ max-width: 700px; margin: 24px auto 0; text-align: center; }
    .newsletter .tl-archive-link{
      font-family: var(--sans);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--text);
      text-decoration: none;
      border-bottom: 2px solid var(--green-bold);
      padding-bottom: 3px;
    }
    .newsletter .tl-archive-link:hover{ color: var(--green-bold); }

    /* ─── WHY ─── */
    .why-section{ background: var(--gray-light); border-top: 1px solid var(--rule); padding: 72px 24px; }
    .newsletter .why-inner{ max-width: 880px; margin: 0 auto; }
    .newsletter .why-grid{
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 36px;
      margin-top: 12px;
    }
    /* 3 -> 2 -> 1, the rung every other three-up on the site got. Straight to
       one column at 720 gave the 620-720 band three stacked cards where two fit. */
    @media (max-width: 900px) {
      .newsletter .why-grid{ grid-template-columns: 1fr 1fr; gap: 26px 28px; }
    }
    @media (max-width: 600px) {
      .newsletter .why-grid{ grid-template-columns: 1fr; gap: 24px; }
    }
    .newsletter .why-item{ padding-top: 16px; border-top: 2px solid var(--green-bold); }
    .newsletter .why-author{
      font-family: var(--sans);
      font-size: 13px;
      line-height: 1.6;
      color: #4a6a4a;
      max-width: 560px;
      margin: 44px auto 0;
      text-align: center;
    }
    .newsletter .why-author a{
      color: inherit;
      font-weight: 700;
      text-decoration: underline;
      text-underline-offset: 3px;
    }
    .newsletter .why-label{
      font-family: var(--sans);
      font-size: 13px;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 6px;
      letter-spacing: 0.01em;
    }
    .newsletter .why-desc{
      font-family: var(--sans);
      font-size: 13px;
      color: var(--text-muted);
      line-height: 1.6;
    }

    /* ─── BOTTOM CTA ─── */
    .bottom-cta{
      /* --dark-deep, matching .work-strip and the footer below it. At --dark it
         was one step lighter than both, and the boundary read as a divider
         drawn between the capture and the footer. */
      background: var(--dark-deep);
      padding: 72px 24px;
      text-align: center;
      position: relative;
      overflow: hidden;
    }
    .newsletter .bottom-cta::after{
      content: "";
      position: absolute; inset: 0;
      background: radial-gradient(ellipse 50% 60% at 50% 50%, rgba(122,173,106,0.06), transparent 60%);
      pointer-events: none;
    }
    .newsletter .bottom-cta-inner{ position: relative; z-index: 1; max-width: 560px; margin: 0 auto; }
    .newsletter .bottom-cta-eyebrow{
      font-family: var(--mono);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--green);
      margin-bottom: 12px;
    }
    .newsletter .bottom-cta-headline{
      font-family: var(--serif);
      font-size: clamp(26px, 4vw, 36px);
      font-weight: 700;
      color: var(--white);
      letter-spacing: -0.4px;
      margin-bottom: 12px;
      line-height: 1.15;
    }
    .newsletter .bottom-cta-sub{
      font-family: var(--sans);
      font-size: 14px;
      color: var(--green-muted);
      margin-bottom: 28px;
      line-height: 1.6;
    }
    .newsletter .bottom-cta .signup-form{ max-width: 440px; margin: 0 auto; justify-content: center; }

    /* ─── BROADER WORK STRIP ─── */
    .work-strip{
      background: var(--dark-deep);
      padding: 28px 24px 24px;
    }
    .newsletter .work-inner{
      max-width: 880px;
      margin: 0 auto;
      display: flex;
      flex-wrap: wrap;
      gap: 16px 28px;
      align-items: baseline;
      justify-content: center;
    }
    .newsletter .work-label{
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--green-bold);
    }
    .newsletter .work-strip a{
      font-family: var(--sans);
      font-size: 12px;
      color: rgba(255,255,255,0.65);
      text-decoration: none;
      border-bottom: 1px dotted rgba(122,173,106,0.4);
      padding-bottom: 1px;
      transition: color 0.15s, border-color 0.15s;
    }
    .newsletter .work-strip a:hover{
      color: var(--green);
      border-bottom-color: var(--green);
    }
    .newsletter .work-strip a .work-meta{
      font-family: var(--mono);
      font-size: 10px;
      color: var(--green-muted);
      margin-left: 6px;
      letter-spacing: 0.04em;
    }

    /* The phone mock is decoration and the email field is the page's job. At
       390 the mock sat over the right half of the input and over the
       "unsubscribe anytime" line, so the conversion surface was occluded by an
       illustration of it. Decoration yields, but only where it actually
       collides: hidden from 860 it also emptied the right of the 768 hero,
       which is a width where the two sit side by side perfectly well. */
    @media (max-width: 540px) {
      .newsletter .hero-phone{ display: none; }
    }

    /* ─── FOOTER ─── */
    /* The bare `footer{}` rule that used to live here was written for a
       .footer-text block this page no longer has (0 occurrences in
       newsletter.html). What it actually caught was the SHARED <footer
       class="site-foot"> partial, and because .newsletter sets font-family to
       the serif, the same footer rendered centred in Georgia here and
       left-aligned in the sans on all six other pages. One partial, two
       appearances, from a rule for markup that no longer exists. Deleted; the
       partial's own styles in site.css are now the only thing that reaches it. */
    .newsletter .footer-text{
      font-family: var(--sans);
      font-size: 11px;
      color: #3a5a3a;
      line-height: 1.9;
    }
    .newsletter .footer-text a{
      color: #5a7a5a;
      text-decoration: none;
      transition: color 0.15s;
    }
    .newsletter .footer-text a:hover{ color: var(--green-muted); }

    /* ─── MOBILE TIGHTENING ─── */
    @media (max-width: 540px){
      .hero { padding: 36px 18px 0; }
      .hero-deck { font-size: 16px; }
      .signup-form input[type="email"] { width: 100%; min-width: 0; }
      .signup-form button { width: 100%; }
      .section { padding: 52px 18px; }
      .preview-section { padding: 44px 18px; }
      .mock-header { padding: 20px 22px 16px; }
      .mock-body { padding: 22px 22px 0; }
      /* Both of these were being cut on phones, and they are the two lines
         that make the sample brief evidence rather than a picture of one: the
         context paragraph is what ENTEL added, and the source note is what it
         read to add it. Cutting them leaves a headline mock that proves nothing.
         Shrunk, not deleted. */
      .mock-context { font-size: 12.5px; line-height: 1.55; }
      .mock-glance-item:nth-child(n+3) { display: none; }
      .mock-source-note { font-size: 11px; line-height: 1.5; }
      .tool-section { padding: 52px 18px; }
      .tool-mock-body { padding: 18px 18px 22px; }
      .timeline-section { padding: 52px 16px; }
      .why-section { padding: 48px 18px; }
      .bottom-cta { padding: 52px 20px; }
      .work-strip { padding: 22px 18px; }
    }

    /* ─── SCROLL-IN REVEALS (blur, .newsletter not fade). See .claude/rules/motion-principles.md ─── */
    .reveal{
      filter: blur(6px);
      opacity: 0;
      transform: translateY(12px);
      transition: filter var(--reveal-dur) var(--ease-out-cubic),
                  opacity var(--reveal-dur) var(--ease-out-cubic),
                  transform var(--reveal-dur) var(--ease-out-cubic);
      will-change: filter, opacity, transform;
    }
    .newsletter .reveal.in{
      filter: blur(0);
      opacity: 1;
      transform: translateY(0);
    }

    .newsletter /* Timeline: each row streams in top-to-bottom (Zajno principle 5: stagger has intent).
       Hidden state gated on .js (added by the reveal script) so no-JS visitors see the list. */
    .newsletter .timeline.js > *{
      filter: blur(6px);
      opacity: 0;
      transform: translateY(10px);
      transition: filter 0.55s var(--ease-out-cubic),
                  opacity 0.55s var(--ease-out-cubic),
                  transform 0.55s var(--ease-out-cubic);
    }
    .newsletter .timeline.stagger-in > *{
      filter: blur(0);
      opacity: 1;
      transform: translateY(0);
    }
    .newsletter .timeline.stagger-in > *:nth-child(1){ transition-delay: 0s; }
    .newsletter .timeline.stagger-in > *:nth-child(2){ transition-delay: 0.08s; }
    .newsletter .timeline.stagger-in > *:nth-child(3){ transition-delay: 0.16s; }
    .newsletter .timeline.stagger-in > *:nth-child(4){ transition-delay: 0.24s; }
    .newsletter .timeline.stagger-in > *:nth-child(5){ transition-delay: 0.32s; }
    .newsletter .timeline.stagger-in > *:nth-child(6){ transition-delay: 0.40s; }
    .newsletter .timeline.stagger-in > *:nth-child(7){ transition-delay: 0.48s; }
    .newsletter .timeline.stagger-in > *:nth-child(8){ transition-delay: 0.56s; }

    @media (prefers-reduced-motion: reduce) {
      .newsletter .reveal, .newsletter .timeline > *{
        filter: none !important;
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
      }
    }
