/* Fallbacks in case your global vars are not set here */
    :root{
      --bg: #F6F7FB;
      --ink: #0D1321;
      --muted: #6B7280;
      --paper: #FFFFFF;
      --brand: #0B5F82;
      --cta: #FF7A00;
      --border: #E8EEF5;
      --radius: 20px;
    }

    *{ box-sizing: border-box }
    html,body{ height:100% }
    body{
      margin:0; background:var(--bg); color:var(--ink);
      font-family: ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
      line-height:1.45;
    }
    a{ color:inherit; text-decoration:none }
    img{ display:block; max-width:100%; height:auto }

    .wrap{ max-width:1120px; margin:0 auto; padding:18px 16px 48px }

    /* Hero */
    .hero{
      margin:8px 0 20px; text-align:center; padding:24px 12px;
      border-radius:16px; background: radial-gradient(120% 100% at 50% 0%, #EDF7FF 0%, rgba(255,255,255,0) 70%);
    }
    .hero h1{ margin:0 0 8px; font-weight:900; font-size:clamp(28px,4vw,44px); letter-spacing:.2px }
    .hero p.sub{ margin:6px auto 0; max-width:880px; color:var(--muted); font-size:clamp(15px,1.8vw,18px) }

    /* Three-tile band */
    .pillars{ margin:26px 0 8px }
    .grid{ display:grid; grid-template-columns:1fr; gap:14px }
    @media (min-width:900px){ .grid{ grid-template-columns:repeat(4,1fr) } }

    .card{
      background:var(--paper); border:1px solid var(--border); border-radius:var(--radius);
      box-shadow:0 8px 30px rgba(0,0,0,.08); overflow:hidden; transition:transform 140ms ease, box-shadow 140ms ease;
    }
    .card:hover{ transform:translateY(-4px); box-shadow:0 14px 48px rgba(0,0,0,.12) }
    .media{ display:grid; place-items:center; padding:12px; aspect-ratio:16/10; background:#fff }
    @media (max-width:520px){ .media{ aspect-ratio:5/4 } }
    .sticker{ width:min(420px,76%); padding:10px; border-radius:18px; background:#fff; border:3px solid #fff;
              filter:drop-shadow(0 10px 26px rgba(0,0,0,.10)) }

    .body{ border-top:1px solid var(--border); padding:14px 16px 18px; display:grid; gap:6px }
    .body h3{ margin:0; font-size:clamp(18px,2vw,22px); font-weight:900 }
    .body p{ margin:0; color:var(--muted); font-size:clamp(14px,1.6vw,16px) }
    .link{ margin-top:6px; font-weight:800; font-size:14px; color:var(--brand); text-decoration:underline }

    /* Scroll affordance */
    .scroll-cue{ margin:18px 0 0; text-align:center; color:var(--muted); font-size:14px; font-weight: bold }
    .chev{ display:inline-block; margin-top:4px; font-size:20px; animation:bob 1.8s ease-in-out infinite }
    @keyframes bob{
      0%,100%{ transform:translateY(0); opacity:.7 }
      50%{ transform:translateY(6px); opacity:1 }
    }

    /* Explainer band that follows */
    .explain{
      margin:28px 0 12px; background:#fff; border:1px solid var(--border); border-radius:var(--radius);
      padding:18px; display:grid; gap:10px
    }
    .explain h2{ margin:0; font-size:clamp(20px,2.4vw,26px) }
    .bullets{ display:grid; gap:6px; color:var(--muted) }
    .outcomes{ display:flex; flex-wrap:wrap; gap:10px; margin-top:2px; font-size:14px }
    .badge{
      background:var(--paper); border:1px solid var(--border); border-radius:999px; padding:6px 10px;
      box-shadow:0 1px 0 rgba(0,0,0,.03)
    }
    .center { text-align:center; }
    .left   { text-align:left; }
    .inblock { display:inline-block; }
    .h1 { font-size: x-large; }


  :root {
    --jit-bg: #f0f8ff;
    --jit-border: #0076d6;
    --jit-highlight: #ffe98a;
    --jit-text: #111111;
    --jit-button-bg: #406739;
    --jit-button-text: #ffffff;
    --jit-radius: 28px;
  }

  .jit-hero-wrapper {
    max-width: 1100px;
    margin: 40px auto;
    padding: 0 16px;
  }

  .jit-hero {
    display: flex;
    align-items: center;
    gap: 32px;
    padding: 40px 40px 36px;
    background: var(--jit-bg);
    border-radius: var(--jit-radius);
    border: 4px solid var(--jit-border);
    box-sizing: border-box;
    color: var(--jit-text);
    line-height: 1.5;
  }

  .jit-hero-image {
    flex: 0 0 30%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .jit-hero-image img {
    max-width: 100%;
    height: auto;
    display: block;
  }

  .jit-hero-content {
    flex: 0 0 70%;
  }

  .jit-hero-title {
    font-size: 1.9rem;
    line-height: 1.25;
    font-weight: 800;
    margin: 0 0 10px;
  }

.hilite { padding: 0 4px;
    background: var(--jit-highlight);
    border-radius: 6px;
  }

.hilite2 { padding: 0 4px;
    background: #e5dac1;
    border-radius: 6px;
  }
.hilite3 { padding: 0 1rem 0 1rem!important;
    background: #3b5c33;
    border-radius: 6px;
  }

  .jit-hero-sub {
    display: inline-block;
    margin-bottom: 20px;
    font-weight: 700;
    padding: 4px 10px;
    background: var(--jit-highlight);
    border-radius: 6px;
  }

  .jit-highlight {
    background: var(--jit-highlight);
    padding: 0 4px;
    border-radius: 4px;
  }

  .jit-hero-lead {
    margin: 0 0 18px;
    line-height: 1.5;
    font-size: 0.98rem;
  }

  .jit-hero-heading {
    font-size: 1.3rem;
    font-weight: 800;
    margin: 0 0 6px;
  }

  .jit-hero-mission {
    margin: 0 0 24px;
    line-height: 1.55;
    font-size: 0.98rem;
  }

  .jit-hero-button {
    display: inline-block;
    padding: 10px 22px;
    background: var(--jit-button-bg);
    color: var(--jit-button-text);
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.98rem;
    text-decoration: none;
    border: none;
    cursor: pointer;
  }

  .jit-hero-button:hover {
    opacity: 0.93;
  }

  @media (max-width: 800px) {
    .jit-hero {
      flex-direction: column;
      align-items: flex-start;
    }

    .jit-hero-image,
    .jit-hero-content {
      flex: 0 0 auto;
      width: 100%;
    }

    .jit-hero-image {
      justify-content: flex-start;
    }
  }
  .jit-hero-image
  {
    display         : flex;
    flex-direction  : column;   /* stack children: img on top, h1 below */
    align-items     : center;   /* center both horizontally */
    text-align      : center;   /* center text inside */
  }

  .jit-hero-image img
  {
    display         : block;    /* no inline gaps */
    max-width       : 100%;
    height          : auto;
  }

  .jit-hero-image h1
  {
    margin-top      : 1rem;     /* space below image */
  }

  <style>
    /* Local footer styles - scoped to this block */
    .jit-foot-wrap {
      max-width: 1200px;
      margin: 0 auto;
      padding: 1.25rem 1rem 2rem;
    }
    .jit-foot-grid {
      display: grid;
      grid-template-columns: 1fr 1.5fr; /* left smaller, right bigger */
      gap: 2rem;
      align-items: start;
    }
    @media (max-width: 900px) {
      .jit-foot-grid { grid-template-columns: 1fr; }
    }

    .jit-left .note a {
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
    .jit-left img.logo {
      max-height: 3rem;
      border-radius: 50%;
      opacity: .8;
      filter: grayscale(60%);
    }

    /* Bigger inline credit logos (left column) */
    .flg-inline { height: 64px; width: auto; vertical-align: middle; }
    .badges-inline { height: 64px; width: auto; vertical-align: middle; }

    .logo-reated { height: 96px; width: auto; max-width: 90px; object-fit: contain; }

    .jit-right nav a {
      text-decoration: none;
      border-bottom: 1px solid transparent;
    }
    .jit-right nav a:hover,
    .jit-right nav a:focus {
      border-bottom-color: currentColor;
      outline: 0;
    }
    .jit-menu {
      font-size: 1.1rem;        /* bigger menus */
      line-height: 1.7;
    }
    .jit-menu h3 {
      margin: 0 0 .25rem 0;
      font-size: 1.25rem;
    }

    details.small summary {
      cursor: pointer;
      font-weight: 600;
    }

    .jit-foot-bottom {
      margin-top: 1.25rem;
      font-size: .95rem;
      opacity: .9;
    }

    /* Bottom strip (logos all in one line) */
    .jit-bottom-strip {
      display: flex;
      align-items: center;
      gap: 1.25rem;
      flex-wrap: nowrap;       /* keep one line */
      overflow-x: auto;        /* scroll on narrow screens */
      padding: .5rem 0 .25rem;
      margin-top: .5rem;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: thin;
      white-space: nowrap;
    }
    .jit-bottom-strip img {
      height: 128px;           /* big default for bottom strip */
      width: auto;
    }
    .jit-bottom-strip a {
      display: inline-flex;
      align-items: center;
      gap: .5rem;
      text-decoration: none;
      white-space: nowrap;
    }

  /* keep the Gen-X hairline + white gap */
  #to-top::before{
    content:""; position:absolute; inset:0; border-radius:999px; padding:2px;
    background:linear-gradient(90deg, var(--cta, #FF7A00), var(--brand, #0B5F82));
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor; mask-composite:exclude;
    pointer-events:none; opacity:.98;
    transition:filter .2s ease, opacity .2s ease;
  }

  /* === Heartbeat pulse (two beats per cycle) ===
     Set cadence with --pulse-period (e.g., .5s, 1s, 1.2s). */
  #to-top{
    --pulse-period: 2s;                 /* ← your control */
    scale: 1;                             /* independent from translateY */
    animation: toTopHeartbeat var(--pulse-period) ease-in-out infinite;

    /* CTA-like inner fill + shine */
    background:
      radial-gradient(130% 130% at 28% 28%, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 62%),
      linear-gradient(180deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 38%),
      radial-gradient(140% 140% at 70% 85%, rgba(0,0,0,.12) 0%, rgba(0,0,0,0) 70%),
      linear-gradient(90deg, var(--cta, #FF7A00), color-mix(in oklab, var(--cta, #FF7A00) 65%, var(--brand, #0B5F82)));
    box-shadow:
      inset 0 0 0 8px var(--paper, #fff),
      inset 0 2px 4px rgba(255,255,255,.30),
      inset 0 -4px 8px rgba(0,0,0,.25),
      0 18px 44px rgba(0,0,0,.20);
  }

  /* specular highlight */
  #to-top::after{
    content:""; position:absolute; left:10%; right:10%; top:11%;
    height:24%; border-radius:999px;
    background:linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,0));
    pointer-events:none; filter:blur(.8px);
  }

  /* hover polish still works */
  #to-top:hover{
    box-shadow:
      inset 0 0 0 8px var(--paper, #fff),
      inset 0 2px 4px rgba(255,255,255,.30),
      inset 0 -4px 8px rgba(0,0,0,.25),
      0 24px 56px rgba(0,0,0,.26);
  }
  #to-top:hover::before{ filter:saturate(1.08) drop-shadow(0 0 12px rgba(11,95,130,.28)) }
  #to-top:focus-visible{ outline:2px solid var(--brand, #0B5F82); outline-offset:4px }

  /* Heartbeat: two quick beats (10%+20% and 35%+45%), then rest */
  @keyframes toTopHeartbeat{
    0%   { scale:1;   filter:none }
    10%  { scale:1.08; filter:saturate(1.08) brightness(1.04) }
    20%  { scale:1.00; filter:none }

    35%  { scale:1.10; filter:saturate(1.1) brightness(1.06) }
    45%  { scale:1.00; filter:none }

    100% { scale:1;   filter:none }
  }

  /* Respect reduced motion */
  @media (prefers-reduced-motion: reduce){
    #to-top{ animation:none; scale:1 }
  }

.jittr_jittr-image {
  display: inline-block;
}
.jittr_jittr-flag-wrap {
  position: relative;
  display: inline-block;
}
.jittr_jittr-tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 6px;
  background: #ffffff;
  color: #000000;
  border-radius: 4px;
  border: 1px solid #cccccc;
  padding: 4px 8px;
  white-space: nowrap;
  font-size: 0.85rem;
  font-family: sans-serif;

  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  z-index: 10000;
}
.jittr_jittr-flag-wrap:hover .jittr_jittr-tooltip {
  opacity: 1;
}
.jittr_jittr_sticky-wrapper {
  top: 10%;
  left: 10%;
  position: fixed;
  z-index: 9999;
}
.jittr_jittr_hover-box {
  background-color: white;
  border-radius: 6px;
  border: 1px solid black;
  color: #fff;
/*max-width: 250px;*/
  padding: 10px 15px;
  position: relative;
  transition: all 0.3s ease;
}
.jittr_jittr_hover-box .jittr_jittr_extra {
  display: none;
  margin: 28px 0;
}
.jittr_jittr_hover-box:hover .jittr_jittr_extra {
  display: block;
}
.jittr_jittr_hover-box a {
  color: #00ccff;
  text-decoration: none;
}
.emoji {
  align-items: center;
  border-raius: 9%;
  border: 1px solid #eeeeee;
  cursor: pointer;
  display: inline-flex;
  font-size: x-large;
  justify-content: center;
  line-height: 1;
  margin: 1px;
  padding-rigjht: 33px;
  white-space: nowrap;
}
.emoji-wrap {
  display: inline-block;
  position: relative;
  margin: 8px;
}
.emoji-label {
  background: #fff;
  border-radius: 4px;
  border: 1px solid #ccc;
  bottom: 100%; /* Show above */
  color: black;
  display: none;
  font-family: sans-serif;
  font-size: 1.2em;
  font-weight: 500; /* or bold */
  left: 50%;
  margin-bottom: 6px;
  opacity: 1;
  padding: 1rem;
  position: absolute;
  transform: translateX(-50%);
  white-space: nowrap;
  z-index: 1000;
}

.emoji-wrap:hover .emoji-label {
  display: inline-block;
}