/* ══ CSS VARIABLES (light default) ══ */
    :root {
      --ht-ticker:   rgba(255,255,255,.97);
      --ht-anim-bg:  linear-gradient(135deg, #ecfdf5 0%, #f0f4f8 60%);
      --ht-node-bg:  #f3f4f6;
      --ht-hub-bg:   linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
      --ht-step-bg:  #ffffff;
      --ht-mock-bar: #f3f4f6;
      --ht-ftab-ol-h: linear-gradient(110deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.83) 40%, rgba(255,255,255,.22) 68%, transparent 100%);
      --ht-ftab-ol-v: linear-gradient(to top, rgba(255,255,255,.97) 0%, rgba(255,255,255,.84) 40%, rgba(255,255,255,.18) 72%, transparent 100%);
    }

    @media (prefers-color-scheme: dark) {
      :root {
        --ht-ticker:   rgba(17,24,39,.94);
        --ht-anim-bg:  linear-gradient(135deg, #0f1420 0%, #0a0c12 60%);
        --ht-node-bg:  #111827;
        --ht-hub-bg:   linear-gradient(135deg, #1a4a3a 0%, #0d2420 100%);
        --ht-step-bg:  #0d1117;
        --ht-mock-bar: #111827;
        --ht-ftab-ol-h: linear-gradient(110deg, rgba(10,12,18,.93) 0%, rgba(10,12,18,.72) 40%, rgba(10,12,18,.18) 68%, transparent 100%);
        --ht-ftab-ol-v: linear-gradient(to top, rgba(10,12,18,.96) 0%, rgba(10,12,18,.76) 40%, rgba(10,12,18,.12) 72%, transparent 100%);
      }
    }

    /* ══ GLOBAL ══ */
    html, body { overflow-x: hidden; }
    .ht-body { font-family: inherit; }

    /* ══ HERO ══ */
    .ht-hero {
      min-height: 100svh;
      display: grid;
      grid-template-columns: minmax(0, 560px) minmax(0, 680px);
      justify-content: center;
      align-items: stretch;
      background: var(--ht-bg);
      overflow: hidden;
    }
    .ht-hero-copy {
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 80px 56px 80px 64px;
      gap: 28px;
    }
    .ht-kicker {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 12px;
      font-weight: 600;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--ht-g-hi);
    }
    .ht-kicker-dot {
      width: 6px; height: 6px;
      border-radius: 50%;
      background: var(--ht-g);
      animation: ht-dot-pulse 2s ease-in-out infinite;
      flex-shrink: 0;
    }
    @keyframes ht-dot-pulse {
      0%,100% { opacity:1; transform:scale(1); }
      50%      { opacity:.5; transform:scale(.7); }
    }
    .ht-hero h1 {
      font-size: clamp(30px, 4.2vw, 56px);
      font-weight: 700;
      line-height: 1.1;
      color: var(--ht-fg1);
      margin: 0;
    }
    .ht-hero h1 em {
      font-style: normal;
      color: var(--ht-g-hi);
    }
    .ht-hero-lead {
      font-size: clamp(15px, 1.2vw, 18px);
      color: var(--ht-fg4);
      line-height: 1.65;
      max-width: 480px;
      margin: 0;
    }
    .ht-hero-actions {
      display: flex;
      align-items: center;
      gap: 14px;
      flex-wrap: wrap;
    }
    .ht-btn-primary {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 14px 28px;
      background: var(--ht-g);
      color: var(--ht-g-fg);
      font-weight: 700;
      font-size: 15px;
      border-radius: 8px;
      text-decoration: none;
      transition: filter .15s, transform .1s;
    }
    .ht-btn-primary:hover { filter: brightness(1.08); transform: translateY(-1px); }
    .ht-btn-ghost {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 14px 24px;
      border: 1.5px solid var(--ht-b3);
      color: var(--ht-fg2);
      font-size: 15px;
      border-radius: 8px;
      text-decoration: none;
      transition: border-color .15s, color .15s;
    }
    .ht-btn-ghost:hover { border-color: var(--ht-b2); color: var(--ht-fg1); }
    .ht-demo-pill {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      margin-top: 14px;
      font-size: 0.82rem;
      font-weight: 600;
      color: var(--ht-fg4);
      text-decoration: none;
      border: 1px solid var(--ht-b2);
      border-radius: 20px;
      padding: 5px 14px;
      transition: color 0.15s, border-color 0.15s;
    }
    .ht-demo-pill:hover {
      color: var(--ht-fg2);
      border-color: var(--ht-b3);
    }
    .ht-trust-row {
      display: flex;
      align-items: center;
      gap: 18px;
      flex-wrap: wrap;
    }
    .ht-trust-badge {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      color: var(--ht-fg4);
    }
    .ht-trust-badge svg {
      width: 14px; height: 14px;
      color: var(--ht-g-hi);
      flex-shrink: 0;
    }

    /* ══ ANIMATION PANEL ══ */
    .ht-anim-panel {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      background: var(--ht-anim-bg);
      overflow: hidden;
      padding: 56px 32px 32px;
    }
    .ht-anim-panel::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(var(--ht-g-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--ht-g-grid) 1px, transparent 1px);
      background-size: 40px 40px;
      pointer-events: none;
    }

    /* ── Mode toggle bar ── */
    .ht-mode-bar {
      position: absolute;
      top: 14px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      align-items: center;
      gap: 4px;
      z-index: 30;
      background: var(--ht-ticker);
      border: 1px solid var(--ht-b2);
      border-radius: 24px;
      padding: 5px 5px 5px 12px;
      white-space: nowrap;
    }
    .ht-mode-label {
      font-size: 11px;
      color: var(--ht-fg4);
      font-weight: 500;
      margin-right: 2px;
    }
    .ht-mode-btn {
      padding: 5px 14px;
      border-radius: 20px;
      border: none;
      background: transparent;
      color: var(--ht-fg4);
      font-size: 11px;
      font-weight: 600;
      cursor: pointer;
      transition: background .2s, color .2s;
      font-family: inherit;
    }
    .ht-mode-btn.is-active {
      background: var(--ht-g);
      color: var(--ht-g-fg);
    }
    .ht-mode-btn:not(.is-active):hover {
      background: var(--ht-b1);
      color: var(--ht-fg2);
    }

    /* ── Animation body wrapper (anchors ticker to network bounds) ── */
    .ht-anim-body {
      position: relative;
      width: 100%;
      max-width: 480px;
      display: flex;
      flex-direction: column;
    }

    /* ── Network container ── */
    .ht-network {
      position: relative;
      width: 100%;
      aspect-ratio: 1 / 1.05;
      flex-shrink: 0;
    }
    .ht-svg-lines {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
    }

    /* ── Hub ── */
    .ht-hub {
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      z-index: 10;
    }
    .ht-hub-ring {
      position: relative;
      width: 76px; height: 76px;
    }
    .ht-hub-ring::before, .ht-hub-ring::after {
      content: "";
      position: absolute;
      inset: -12px;
      border-radius: 50%;
      border: 1px solid var(--ht-g-brd);
      animation: ht-ring 3s ease-in-out infinite;
    }
    .ht-hub-ring::after { inset: -24px; border-color: var(--ht-g-sub); animation-delay: 1s; }
    @keyframes ht-ring {
      0%,100% { opacity:0; transform:scale(.9); }
      50%      { opacity:1; transform:scale(1); }
    }
    .ht-hub-core {
      width: 76px; height: 76px;
      border-radius: 50%;
      background: var(--ht-hub-bg);
      border: 2px solid var(--ht-g);
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 0 28px var(--ht-g-glow), 0 0 56px var(--ht-g-sub);
    }
    .ht-hub-core svg { width: 30px; height: 30px; color: var(--ht-g-hi); }
    .ht-hub-label {
      font-size: 11px;
      font-weight: 600;
      color: var(--ht-g-hi);
      letter-spacing: .06em;
      text-transform: uppercase;
      white-space: nowrap;
    }

    /* ── State nodes ── */
    .ht-node {
      position: absolute;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 5px;
      z-index: 5;
    }
    /* Desktop positions */
    #ht-node-CA { top: 12%; left:  4%; }
    #ht-node-TX { top:  8%; left: 42%; }
    #ht-node-NY { top: 14%; right: 5%; }
    #ht-node-FL { top: 52%; right: 3%; }
    #ht-node-IL { top: 62%; left:  5%; }
    #ht-node-WA { top: 30%; left:  2%; }
    #ht-node-GA { top: 36%; right: 4%; }

    .ht-node-circle {
      width: 44px; height: 44px;
      border-radius: 50%;
      background: var(--ht-node-bg);
      border: 1.5px solid var(--ht-b2);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      font-weight: 700;
      color: var(--ht-fg4);
      transition: border-color .3s, color .3s, box-shadow .3s, background .3s;
    }
    .ht-node.is-active .ht-node-circle {
      border-color: var(--ht-g);
      color: var(--ht-g-hi);
      background: var(--ht-g-sub);
      box-shadow: 0 0 16px var(--ht-g-glow);
    }
    .ht-node-label {
      font-size: 10px;
      color: var(--ht-fg4);
      white-space: nowrap;
      transition: color .3s;
    }
    .ht-node.is-active .ht-node-label { color: var(--ht-fg3); }

    /* ── Client node ── */
    .ht-client-node {
      position: absolute;
      bottom: 10%; left: 5%;
      display: flex;
      align-items: center;
      gap: 10px;
      z-index: 5;
    }
    .ht-client-icon {
      width: 48px; height: 48px;
      border-radius: 50%;
      background: var(--ht-el2);
      border: 1.5px solid var(--ht-b2);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .ht-client-icon svg { width: 20px; height: 20px; color: var(--ht-fg3); }
    .ht-client-copy { display: flex; flex-direction: column; gap: 2px; }
    .ht-client-name { font-size: 13px; font-weight: 600; color: var(--ht-fg2); }
    .ht-client-status { font-size: 11px; color: var(--ht-fg4); }

    /* ── Packet dot ── */
    .ht-packet {
      position: absolute;
      width: 8px; height: 8px;
      border-radius: 50%;
      background: var(--ht-g);
      box-shadow: 0 0 8px var(--ht-g), 0 0 16px var(--ht-g-glow);
      pointer-events: none;
      opacity: 0;
      z-index: 20;
    }

    /* ── Status ticker ── */
    .ht-status-ticker {
      position: relative;
      background: var(--ht-ticker);
      border: 1px solid var(--ht-g-brd);
      border-radius: 10px;
      padding: 10px 14px;
      display: flex;
      flex-direction: column;
      gap: 6px;
      z-index: 15;
      margin-top: 14px;
      width: 100%;
      box-sizing: border-box;
    }
    .ht-ticker-row {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 11px;
      color: var(--ht-fg4);
      transition: color .4s;
    }
    .ht-ticker-row.is-active { color: var(--ht-fg2); }
    .ht-ticker-dot {
      width: 6px; height: 6px;
      border-radius: 50%;
      background: var(--ht-el2);
      flex-shrink: 0;
      transition: background .4s, box-shadow .4s;
    }
    .ht-ticker-row.is-active .ht-ticker-dot {
      background: var(--ht-g);
      box-shadow: 0 0 6px var(--ht-g-glow);
    }

    /* ── PI assignment typing card ── */
    .ht-pi-assign {
      overflow: hidden;
      max-height: 0;
      opacity: 0;
      margin-top: 0;
      transition: max-height .5s cubic-bezier(0,.85,.3,1), opacity .35s ease, margin-top .3s ease;
    }
    .ht-pi-assign.is-visible { max-height: 200px; opacity: 1; margin-top: 6px; }
    .ht-pi-assign-inner {
      padding: 9px 11px;
      background: var(--ht-g-sub);
      border: 1px solid var(--ht-g-brd);
      border-radius: 8px;
    }
    .ht-pi-assign-row { display: flex; flex-direction: column; gap: 3px; padding: 4px 0; }
    .ht-pi-assign-row + .ht-pi-assign-row {
      border-top: 1px solid var(--ht-b1);
      margin-top: 5px;
    }
    .ht-pi-assign-name { font-size: 12px; font-weight: 600; color: var(--ht-fg2); min-height: 16px; line-height: 1.3; }
    .ht-pi-assign-lic  { font-size: 10px; color: var(--ht-g-hi); min-height: 14px; line-height: 1.3; }
    .ht-pi-assign-cursor {
      display: inline-block;
      width: 1.5px; height: 11px;
      background: var(--ht-g-hi);
      vertical-align: middle;
      margin-left: 1px;
      animation: ht-blink .7s step-end infinite;
    }
    @keyframes ht-blink { 50% { opacity: 0; } }

    /* ══ SOCIAL PROOF ══ */
    .ht-proof {
      padding: 64px 64px;
      background: var(--ht-bg);
    }
    .ht-proof-inner {
      max-width: 860px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
    }
    .ht-proof-card {
      background: var(--ht-bg2);
      border: 1px solid var(--ht-b1);
      border-radius: 16px;
      padding: 28px 32px;
      display: flex;
      flex-direction: column;
      gap: 18px;
    }
    .ht-proof-platform-name {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--ht-fg4);
    }
    .ht-proof-score-row {
      display: flex;
      align-items: center;
      gap: 14px;
    }
    .ht-proof-score {
      font-size: 52px;
      font-weight: 800;
      letter-spacing: -.04em;
      line-height: 1;
      color: var(--ht-fg1);
    }
    .ht-proof-score-meta {
      display: flex;
      flex-direction: column;
      gap: 5px;
    }
    .ht-proof-stars {
      display: flex;
      gap: 3px;
    }
    .ht-proof-stars svg { width: 16px; height: 16px; fill: #f59e0b; }
    .ht-proof-star-label {
      font-size: 12px;
      color: var(--ht-fg4);
    }
    .ht-proof-awards {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    .ht-proof-badge {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 5px 12px 5px 8px;
      border-radius: 20px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .04em;
      text-transform: uppercase;
      white-space: nowrap;
      background: var(--ht-el);
      border: 1px solid var(--ht-b2);
      color: var(--ht-fg3);
    }
    .ht-proof-badge-icon {
      width: 13px; height: 13px;
      flex-shrink: 0;
    }
    .ht-proof-badge.is-gold {
      border-color: rgba(245,158,11,.35);
      color: #92400e;
    }
    .ht-proof-badge.is-bark {
      border-color: rgba(249,115,22,.3);
      color: #9a3412;
    }
    .ht-proof-verify {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .ht-proof-verify-icon {
      width: 44px; height: 44px;
      border-radius: 12px;
      background: rgba(249,115,22,.1);
      border: 1px solid rgba(249,115,22,.2);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      color: #fb923c;
    }
    .ht-proof-verify-icon svg { width: 22px; height: 22px; }
    .ht-proof-verify-text strong {
      display: block;
      font-size: 16px;
      font-weight: 700;
      color: var(--ht-fg1);
      letter-spacing: -.01em;
    }
    .ht-proof-verify-text span {
      font-size: 12px;
      color: var(--ht-fg4);
    }
    .ht-proof-desc {
      font-size: 13px;
      color: var(--ht-fg4);
      line-height: 1.6;
    }
    .ht-proof-link {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin-top: auto;
      padding: 8px 14px;
      border-radius: 8px;
      font-size: 12px;
      font-weight: 600;
      text-decoration: none;
      border: 1px solid rgba(245,158,11,.3);
      color: #92400e;
      background: rgba(245,158,11,.06);
      transition: background .15s, border-color .15s;
      align-self: flex-start;
    }
    .ht-proof-link svg { width: 12px; height: 12px; }
    .ht-proof-link:hover { background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.5); }
    .ht-proof-link.is-bark {
      border-color: rgba(249,115,22,.3);
      color: #9a3412;
      background: rgba(249,115,22,.06);
    }
    .ht-proof-link.is-bark:hover { background: rgba(249,115,22,.12); border-color: rgba(249,115,22,.5); }
    @media (max-width: 768px) {
      .ht-proof { padding: 48px 24px; }
      .ht-proof-inner { grid-template-columns: 1fr; gap: 16px; }
      .ht-proof-score { font-size: 44px; }
    }
    @media (max-width: 480px) {
      .ht-proof { padding: 36px 16px; }
      .ht-proof-card { padding: 22px 24px; }
    }

    /* ══ ATTORNEY STRIP ══ */
    .ht-attorney {
      background: var(--ht-bg2);
      border-top: 1px solid var(--ht-b1);
      border-bottom: 1px solid var(--ht-b1);
    }
    .ht-attorney-inner {
      max-width: 860px;
      margin: 0 auto;
      padding: 36px 64px;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 32px;
      align-items: start;
    }
    .ht-attorney-item {
      display: flex;
      align-items: flex-start;
      gap: 16px;
    }
    .ht-attorney-icon {
      width: 40px; height: 40px;
      border-radius: 10px;
      background: var(--ht-g-sub);
      border: 1px solid var(--ht-g-brd);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .ht-attorney-icon svg { width: 18px; height: 18px; color: var(--ht-g-hi); }
    .ht-attorney-text strong {
      display: block;
      font-size: 14px;
      font-weight: 700;
      color: var(--ht-fg1);
      margin-bottom: 4px;
    }
    .ht-attorney-text span {
      font-size: 13px;
      color: var(--ht-fg4);
      line-height: 1.5;
    }

    /* ══ HOW IT WORKS ══ */
    .ht-steps {
      background: var(--ht-bg2);
      padding: 96px 64px;
    }
    .ht-section-head { text-align: center; margin-bottom: 64px; }
    .ht-section-kicker {
      font-size: 12px;
      font-weight: 600;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--ht-g-hi);
      margin: 0 0 12px;
    }
    .ht-section-head h2 {
      font-size: clamp(24px, 3vw, 38px);
      font-weight: 700;
      color: var(--ht-fg1);
      margin: 0 0 14px;
      line-height: 1.2;
    }
    .ht-section-head p { font-size: 17px; color: var(--ht-fg4); max-width: 560px; margin: 0 auto; line-height: 1.65; }
    .ht-step-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 2px;
      max-width: 1120px;
      margin: 0 auto;
    }
    .ht-step {
      background: var(--ht-step-bg);
      padding: 40px 32px;
      display: flex;
      flex-direction: column;
      gap: 16px;
      position: relative;
    }
    .ht-step:first-child { border-radius: 12px 0 0 12px; }
    .ht-step:last-child  { border-radius: 0 12px 12px 0; }
    .ht-step-num {
      width: 36px; height: 36px;
      border-radius: 50%;
      border: 1.5px solid var(--ht-g-brd);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      font-weight: 700;
      color: var(--ht-g-hi);
    }
    .ht-step h3 { font-size: 19px; font-weight: 700; color: var(--ht-fg1); margin: 0; line-height: 1.25; }
    .ht-step p  { font-size: 15px; color: var(--ht-fg4); margin: 0; line-height: 1.65; }

    /* ══ VALUE SECTION ══ */
    .ht-value-section { background: var(--ht-bg); padding: 96px 64px; }
    .ht-value-inner {
      max-width: 1200px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 64px;
      align-items: center;
    }
    .ht-value-copy { display: flex; flex-direction: column; gap: 20px; }
    .ht-value-copy h2 { font-size: clamp(24px, 3vw, 38px); font-weight: 700; color: var(--ht-fg1); margin: 0; line-height: 1.2; }
    .ht-value-copy > p { font-size: 17px; color: var(--ht-fg4); line-height: 1.65; margin: 0; }
    .ht-feature-list { display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 0; list-style: none; }
    .ht-feature-item { display: flex; align-items: flex-start; gap: 14px; }
    .ht-feature-icon {
      width: 32px; height: 32px;
      border-radius: 8px;
      background: var(--ht-g-sub);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      margin-top: 1px;
    }
    .ht-feature-icon svg { width: 16px; height: 16px; color: var(--ht-g-hi); }
    .ht-feature-text strong { display: block; font-size: 15px; font-weight: 600; color: var(--ht-fg2); margin-bottom: 3px; }
    .ht-feature-text span  { font-size: 14px; color: var(--ht-fg4); line-height: 1.5; }

    /* Coverage card */
    .ht-coverage-card {
      background: var(--ht-card);
      border: 1px solid var(--ht-b1);
      border-radius: 16px;
      padding: 32px;
      display: flex;
      flex-direction: column;
      gap: 20px;
    }
    .ht-coverage-title {
      font-size: 14px;
      font-weight: 600;
      color: var(--ht-fg3);
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .ht-coverage-title::before {
      content: "";
      display: block;
      width: 8px; height: 8px;
      border-radius: 50%;
      background: var(--ht-g);
    }
    .ht-state-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
    .ht-state-chip {
      padding: 5px 0;
      border-radius: 5px;
      font-size: 11px;
      font-weight: 600;
      text-align: center;
      background: var(--ht-el2);
      color: var(--ht-fg4);
      transition: background .3s, color .3s;
    }
    .ht-state-chip.is-lit { background: var(--ht-g-sub); color: var(--ht-g-hi); }
    .ht-coverage-note { font-size: 12px; color: var(--ht-fg5); margin: 0; }

    /* ══ PORTAL PREVIEW ══ */
    .ht-portal-section { background: var(--ht-bg2); padding: 96px 64px; }
    .ht-portal-inner {
      max-width: 1120px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: center;
    }
    .ht-portal-copy { display: flex; flex-direction: column; gap: 24px; }
    .ht-portal-copy h2 { font-size: clamp(24px, 3vw, 36px); font-weight: 700; color: var(--ht-fg1); margin: 0; line-height: 1.2; }
    .ht-portal-copy p  { font-size: 17px; color: var(--ht-fg4); line-height: 1.65; margin: 0; }
    .ht-portal-bullets { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
    .ht-portal-bullets li { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--ht-fg3); }
    .ht-portal-bullets li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--ht-g); flex-shrink: 0; }
    .ht-portal-mock { background: var(--ht-card); border: 1px solid var(--ht-b1); border-radius: 16px; overflow: hidden; }
    .ht-mock-topbar { background: var(--ht-mock-bar); padding: 12px 20px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--ht-b1); }
    .ht-mock-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ht-el2); }
    .ht-mock-dot:nth-child(1) { background: #ef4444; }
    .ht-mock-dot:nth-child(2) { background: #f59e0b; }
    .ht-mock-dot:nth-child(3) { background: #10b981; }
    .ht-mock-url { margin-left: 8px; font-size: 11px; color: var(--ht-fg5); background: var(--ht-el); padding: 3px 12px; border-radius: 20px; }
    .ht-mock-body { padding: 24px; display: flex; flex-direction: column; gap: 16px; }
    .ht-mock-header { display: flex; align-items: center; justify-content: space-between; }
    .ht-mock-case-id { font-size: 11px; font-weight: 600; color: var(--ht-fg4); letter-spacing: .06em; text-transform: uppercase; }
    .ht-mock-status-badge {
      font-size: 11px; font-weight: 600;
      padding: 3px 10px;
      border-radius: 20px;
      background: var(--ht-g-sub);
      color: var(--ht-g-hi);
      animation: ht-badge 3s ease-in-out infinite;
    }
    @keyframes ht-badge { 0%,100%{opacity:1} 50%{opacity:.6} }
    .ht-mock-pi { display: flex; align-items: center; gap: 12px; padding: 14px; background: var(--ht-el); border-radius: 10px; }
    .ht-mock-avatar {
      width: 40px; height: 40px;
      border-radius: 50%;
      background: var(--ht-g-sub);
      border: 1.5px solid var(--ht-g);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      font-size: 13px;
      font-weight: 700;
      color: var(--ht-g-hi);
    }
    .ht-mock-pi-name { font-size: 14px; font-weight: 600; color: var(--ht-fg2); }
    .ht-mock-pi-cred { font-size: 11px; color: var(--ht-fg4); }
    .ht-mock-verified { margin-left: auto; display: flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 600; color: var(--ht-g-hi); }
    .ht-mock-progress { display: flex; flex-direction: column; gap: 8px; }
    .ht-mock-progress-label { display: flex; justify-content: space-between; font-size: 11px; color: var(--ht-fg4); }
    .ht-mock-progress-track { height: 4px; background: var(--ht-el2); border-radius: 2px; overflow: hidden; }
    .ht-mock-progress-fill { height: 100%; background: linear-gradient(90deg, var(--ht-g), #34d399); border-radius: 2px; width: 0; animation: ht-fill 4s ease-out 1s forwards; }
    @keyframes ht-fill { to { width: 62%; } }
    .ht-mock-updates { display: flex; flex-direction: column; gap: 8px; }
    .ht-mock-update { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; background: var(--ht-el); border-radius: 8px; opacity: 0; transform: translateY(6px); }
    .ht-mock-update:nth-child(1) { animation: ht-slide .4s ease-out 1.5s forwards; }
    .ht-mock-update:nth-child(2) { animation: ht-slide .4s ease-out 2.2s forwards; }
    .ht-mock-update:nth-child(3) { animation: ht-slide .4s ease-out 3s   forwards; }
    @keyframes ht-slide { to { opacity:1; transform:translateY(0); } }
    .ht-mock-update-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ht-g); flex-shrink: 0; margin-top: 4px; }
    .ht-mock-update-text { font-size: 12px; color: var(--ht-fg3); line-height: 1.4; }
    .ht-mock-update-time { margin-left: auto; font-size: 10px; color: var(--ht-fg5); white-space: nowrap; }

    /* ══ CTA ══ */
    .ht-cta-section {
      background: var(--ht-bg);
      border-top: 1px solid var(--ht-b1);
      padding: 96px 64px;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 28px;
    }
    .ht-cta-section h2 { font-size: clamp(26px, 3.5vw, 44px); font-weight: 700; color: var(--ht-fg1); margin: 0; max-width: 600px; line-height: 1.2; }
    .ht-cta-section p  { font-size: 17px; color: var(--ht-fg4); max-width: 480px; margin: 0; line-height: 1.6; }

    /* ══ FEATURE TABS ══ */
    .ht-ftabs { background: var(--ht-bg); padding: 56px 64px 72px; }
    .ht-ftabs-card {
      max-width: 1160px;
      margin: 0 auto;
      border-radius: 20px;
      overflow: hidden;
      border: 1px solid var(--ht-b2);
      box-shadow: 0 8px 40px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.08);
    }
    .ht-ftabs-nav-wrap {
      border-bottom: 1px solid var(--ht-b1);
      background: var(--ht-bg);
      position: relative;
      z-index: 2;
    }
    .ht-ftabs-nav {
      max-width: 100%;
      margin: 0 auto;
      padding: 0 64px;
      display: flex;
      overflow-x: auto;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
    }
    .ht-ftabs-nav::-webkit-scrollbar { display: none; }
    .ht-ftab-btn {
      flex: 1 0 auto;
      padding: 22px 24px 18px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 4px;
      background: none;
      border: none;
      cursor: pointer;
      position: relative;
      text-align: left;
      font-family: inherit;
      color: var(--ht-fg4);
      transition: color .2s;
    }
    .ht-ftab-btn::after {
      content: "";
      position: absolute;
      bottom: -1px; left: 0; right: 0;
      height: 2px;
      background: var(--ht-g);
      transform: scaleX(0);
      transform-origin: left;
    }
    .ht-ftab-btn.is-active { color: var(--ht-fg1); }
    .ht-ftab-btn.is-active::after {
      transform: scaleX(1);
      transition: transform .25s ease;
    }
    .ht-ftab-btn:not(.is-active):hover { color: var(--ht-fg2); }
    .ht-ftab-num {
      font-size: 10px;
      font-weight: 600;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--ht-g-hi);
    }
    .ht-ftab-name {
      font-size: 14px;
      font-weight: 600;
      white-space: nowrap;
    }

    /* Panel viewport */
    .ht-ftabs-viewport {
      position: relative;
      height: 580px;
      overflow: hidden;
      touch-action: pan-y;
    }
    .ht-ftabs-track {
      display: flex;
      height: 100%;
      will-change: transform;
      transition: transform .52s cubic-bezier(.4,0,.2,1);
    }
    .ht-ftab-panel {
      flex: 0 0 100%;
      height: 100%;
      position: relative;
      overflow: hidden;
      background-size: cover;
      background-position: center;
      background-color: var(--ht-el);
    }
    .ht-ftab-overlay {
      position: absolute;
      inset: 0;
      background: var(--ht-ftab-ol-h);
      pointer-events: none;
    }
    .ht-ftab-content {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 0 64px;
      gap: 22px;
      max-width: 620px;
    }
    .ht-ftab-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--ht-g-hi);
    }
    .ht-ftab-eyebrow-dot {
      width: 6px; height: 6px;
      border-radius: 50%;
      background: var(--ht-g);
      flex-shrink: 0;
    }
    .ht-ftab-content h2 {
      font-size: clamp(26px, 3.6vw, 48px);
      font-weight: 700;
      color: var(--ht-fg1);
      margin: 0;
      line-height: 1.08;
      letter-spacing: -.025em;
    }
    .ht-ftab-content p {
      font-size: clamp(14px, 1.15vw, 17px);
      color: var(--ht-fg3);
      line-height: 1.7;
      max-width: 420px;
      margin: 0;
    }
    .ht-ftab-cta {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      font-size: 14px;
      font-weight: 600;
      color: var(--ht-g-hi);
      text-decoration: none;
      transition: gap .15s;
    }
    .ht-ftab-cta:hover { gap: 12px; }
    .ht-ftab-cta svg { width: 14px; height: 14px; flex-shrink: 0; }

    /* Dot indicators */
    .ht-ftabs-dots {
      position: absolute;
      bottom: 22px; left: 64px;
      display: flex;
      gap: 7px;
      z-index: 5;
    }
    .ht-ftabs-dot {
      width: 6px; height: 6px;
      border-radius: 50%;
      background: rgba(255,255,255,.28);
      cursor: pointer;
      transition: background .3s, transform .3s;
    }
    .ht-ftabs-dot.is-active {
      background: var(--ht-g);
      transform: scale(1.5);
    }

    /* ══ MULTI-STATE COLOR THEME ══ */
    .ht-anim-panel.is-multi {
      --ht-g:      #60a5fa;
      --ht-g-hi:   #93c5fd;
      --ht-g-fg:   #1e3a5f;
      --ht-g-sub:  rgba(96,165,250,.12);
      --ht-g-brd:  rgba(96,165,250,.25);
      --ht-g-glow: rgba(96,165,250,.35);
      --ht-g-grid: rgba(96,165,250,.04);
    }

    /* ══ US STATE GRID MAP ══ */
    .ht-usmap {
      display: grid;
      grid-template-columns: repeat(13, 1fr);
      grid-template-rows: repeat(8, 1fr);
      gap: 2px;
      width: 100%;
      aspect-ratio: 13 / 8;
      flex-shrink: 0;
      user-select: none;
    }
    .ht-usmap-tile {
      border-radius: 3px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 8px;
      font-weight: 700;
      color: var(--ht-fg5);
      background: var(--ht-b1);
      border: 1px solid var(--ht-b2);
      transition: background .45s, color .45s, border-color .45s, box-shadow .45s;
      min-height: 0;
      overflow: hidden;
    }
    .ht-usmap-tile.is-warm {
      background: var(--ht-g-sub);
      color: var(--ht-g-hi);
      border-color: var(--ht-g-brd);
    }
    .ht-usmap-tile.is-target {
      background: var(--ht-g);
      color: var(--ht-g-fg);
      border-color: var(--ht-g-hi);
      box-shadow: 0 0 8px var(--ht-g-glow);
    }

    /* ══ DESKTOP LAYOUT ══ */
    @media (min-width: 961px) {
      .ht-hero { min-height: 0; }
      .ht-hero-copy { padding: 56px 40px 56px 56px; }
      .ht-anim-body { max-width: 520px; }
      .ht-anim-panel { padding: 40px 32px 20px; }
    }

    /* ══ RESPONSIVE ══ */
    @media (max-width: 960px) {
      .ht-hero { grid-template-columns: 1fr; min-height: auto; }
      .ht-hero-copy { padding: 60px 32px 40px; }
      .ht-anim-panel { padding: 52px 24px 24px; min-height: 320px; }
      .ht-step-grid { grid-template-columns: 1fr; }
      .ht-step:first-child { border-radius: 12px 12px 0 0; }
      .ht-step:last-child  { border-radius: 0 0 12px 12px; }
      .ht-step:not(:last-child)::after { display: none; }
      .ht-value-inner, .ht-portal-inner { grid-template-columns: 1fr; gap: 48px; }
      .ht-steps, .ht-portal-section, .ht-cta-section { padding: 64px 32px; }
      .ht-ftabs { padding: 40px 32px 56px; }
      .ht-ftabs-card { border-radius: 16px; }
      .ht-ftabs-nav { padding: 0 24px; }
      .ht-ftabs-viewport { height: 480px; }
      .ht-ftab-content { padding: 0 36px; max-width: 100%; }
      .ht-value-section { padding: 64px 32px; }
      .ht-attorney-inner { padding: 32px; }
    }

    @media (max-width: 768px) {
      /* Feature tabs: portrait layout — text at bottom, image fills top */
      .ht-ftabs { padding: 28px 16px 44px; }
      .ht-ftabs-card { border-radius: 14px; }
      .ht-ftabs-nav { padding: 0 12px; }
      .ht-ftab-btn { padding: 16px 14px 13px; }
      .ht-ftab-name { font-size: 12px; }
      .ht-ftabs-viewport { height: 500px; }
      .ht-ftab-overlay { background: var(--ht-ftab-ol-v) !important; }
      .ht-ftab-content {
        justify-content: flex-end;
        padding: 0 24px 64px;
        max-width: 100%;
        gap: 14px;
      }
      .ht-ftab-content h2 { letter-spacing: -.015em; }
      .ht-ftab-content p { max-width: 100%; }
      .ht-ftabs-dots { left: 24px; bottom: 18px; }

      .ht-ticker-row { font-size: 12px; }
      .ht-pi-assign-name { font-size: 13px; }
      .ht-pi-assign-lic  { font-size: 11px; }

      .ht-attorney-inner { grid-template-columns: 1fr; gap: 20px; padding: 28px 20px; }
      .ht-steps, .ht-portal-section, .ht-cta-section { padding: 52px 20px; }
      .ht-value-section { padding: 52px 20px; }
    }

    @media (max-width: 600px) {
      /* Redistribute nodes in clock-face pattern for readability */
      #ht-node-TX { top: 3%;  left: calc(50% - 19px); right: auto; }
      #ht-node-NY { top: 15%; right: 5%; left: auto; }
      #ht-node-FL { top: 46%; right: 4%; left: auto; }
      #ht-node-GA { top: 65%; right: 8%; left: auto; }
      #ht-node-IL { top: 65%; left: 8%; right: auto; }
      #ht-node-WA { top: 46%; left: 4%; right: auto; }
      #ht-node-CA { top: 15%; left: 5%; right: auto; }

      .ht-hero-copy { padding: 44px 20px 28px; }
      .ht-state-grid { grid-template-columns: repeat(5, 1fr); }
      .ht-client-icon { width: 40px; height: 40px; }
      .ht-client-icon svg { width: 17px; height: 17px; }
      .ht-client-name { font-size: 12px; }
      .ht-client-status { font-size: 11px; }
    }

    @media (max-width: 480px) {
      .ht-mode-bar { padding: 4px 4px 4px 10px; }
      .ht-mode-label { display: none; }
      .ht-mode-btn { padding: 5px 11px; }
      .ht-ftab-num { display: none; }
      .ht-ftab-btn { padding: 14px 12px 11px; }
      .ht-ftab-name { font-size: 11px; }
    }