/* --- Calc card: icon pulse + cycling feature line --- */
        .kye-calc-icon { position: relative; }
        .kye-calc-icon::after {
          content: '';
          position: absolute;
          inset: 0;
          border-radius: inherit;
          box-shadow: 0 0 0 0 currentColor;
          animation: kye-calc-pulse 2.6s ease-out infinite;
        }
        .kye-calc-card:hover .kye-calc-icon::after {
          animation-duration: 1.1s;
        }
        @keyframes kye-calc-pulse {
          0%   { box-shadow: 0 0 0 0 currentColor; opacity: 0.45; }
          70%  { box-shadow: 0 0 0 10px currentColor; opacity: 0; }
          100% { box-shadow: 0 0 0 0 currentColor; opacity: 0; }
        }
        @media (max-width: 640px) {
          .kye-calc-card { display: grid; grid-template-columns: auto 1fr; column-gap: 18px; row-gap: 10px; align-items: start; padding: 14px 16px; margin-left: -8px; margin-right: -8px; }
          .kye-calc-card > .kye-calc-icon { grid-column: 1; grid-row: 1 / 3; align-self: center; }
          .kye-calc-card > .flex-1 { grid-column: 2; grid-row: 1; }
          .kye-calc-card > a { grid-column: 2 / -1; grid-row: 2; justify-self: stretch; width: 100%; box-sizing: border-box; text-align: center; }
        }
        .kye-hero-pills { display: flex; flex-wrap: wrap; gap: 8px 10px; }
        .kye-hero-pills > span { justify-content: flex-start; text-align: left; }
        .kye-feature-window { position: relative; height: 15px; overflow: hidden; margin-top: 3px; }
        .kye-feature-item {
          position: absolute;
          top: 0;
          left: 0;
          font-size: 0.7rem;
          font-weight: 600;
          white-space: nowrap;
          transition: transform 0.5s ease, opacity 0.5s ease;
        }

            #feedbackToast.show {
            transform: translate(-50%, 0);
            opacity: 1;
            }
            #feedbackToast.hide {
            transform: translate(-50%, 100%);
            opacity: 0;
            }

        /* --- Rotating pill animation --- */
        .rotate-pill {
          display: inline-flex;
          align-items: center;
          gap: 7px;
          background: rgba(255,255,255,0.18);
          border-radius: 999px;
          padding: 5px 18px 5px 14px;
          overflow: hidden;
        }
        .live-dot {
          width: 7px;
          height: 7px;
          border-radius: 50%;
          background: #4ade80;
          flex-shrink: 0;
          box-shadow: 0 0 0 0 rgba(74,222,128,0.6);
          animation: pill-pulse-dot 1.8s ease-in-out infinite;
        }
        @keyframes pill-pulse-dot {
          0%   { box-shadow: 0 0 0 0 rgba(74,222,128,0.6); }
          70%  { box-shadow: 0 0 0 8px rgba(74,222,128,0); }
          100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); }
        }
        .rotate-window {
          position: relative;
          height: 17px;
          width: 100%;
        }
        .rotate-item {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          text-align: center;
          font-size: 0.7rem;
          font-weight: 700;
          letter-spacing: 0.08em;
          text-transform: uppercase;
          color: #FFFFFF;
          white-space: nowrap;
        }
        .rotate-item.enter {
          animation: pill-enter-up 0.45s cubic-bezier(0.4, 0, 0.2, 1) forwards;
        }
        .rotate-item.exit {
          animation: pill-exit-up 0.45s cubic-bezier(0.4, 0, 0.2, 1) forwards;
        }
        @keyframes pill-enter-up {
          0%   { opacity: 0; transform: translateY(70%); }
          60%  { opacity: 1; }
          100% { opacity: 1; transform: translateY(0%); }
        }
        @keyframes pill-exit-up {
          0%   { opacity: 1; transform: translateY(0%); }
          40%  { opacity: 0; }
          100% { opacity: 0; transform: translateY(-70%); }
        }
        /* --- End rotating pill animation --- */

        /* ============================================================
           LOAN TYPE ICON ANIMATIONS
           Affects: .icon-stage, .icon-personal, .icon-home,
                    .icon-car, .icon-credit and their is-active states.
           Independent block — safe to edit or remove without touching
           anything else.
           ============================================================ */

        .loan-type-btn {
          transition: background-color 0.25s ease, color 0.25s ease, transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        .loan-type-btn.active {
          animation: lti-settle-in 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        @keyframes lti-settle-in {
          0%   { transform: scale(0.94); }
          60%  { transform: scale(1.035); }
          100% { transform: scale(1); }
        }
        .loan-type-btn:active { transform: scale(0.97); }

        .icon-stage {
          position: relative;
          width: 30px;
          height: 30px;
          margin-bottom: 4px;
          overflow: hidden;
        }
        .icon-stage svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

        /* --- CAR: drives off screen and returns --- */
        .icon-car.is-active svg {
          animation: lti-car-drive 2.6s cubic-bezier(0.45, 0, 0.55, 1) infinite;
        }
        @keyframes lti-car-drive {
          0%   { transform: translateX(0);    opacity: 1; }
          38%  { transform: translateX(34px); opacity: 1; }
          45%  { transform: translateX(34px); opacity: 0; }
          52%  { transform: translateX(-34px);opacity: 0; }
          60%  { transform: translateX(-34px);opacity: 1; }
          100% { transform: translateX(0);    opacity: 1; }
        }

        /* --- HOME: roof drops down and settles onto base --- */
        .icon-home { position: relative; }
        .icon-home .house-base { position: absolute; inset: 0; }
        .icon-home .house-roof { position: absolute; inset: 0; transform-origin: 50% 100%; }
        .icon-home.is-active .house-roof {
          animation: lti-roof-drop 2.3s cubic-bezier(0.34, 1.4, 0.64, 1) infinite;
        }
        @keyframes lti-roof-drop {
          0%   { transform: translateY(-9px);                       opacity: 0; }
          35%  { transform: translateY(-9px);                       opacity: 0; }
          55%  { transform: translateY(0.5px) scale(1.06, 0.92);   opacity: 1; }
          70%  { transform: translateY(0);                          opacity: 1; }
          100% { transform: translateY(0);                          opacity: 1; }
        }

        /* --- PERSONAL: note slides out of wallet and back --- */
        .icon-personal { position: relative; }
        .icon-personal .note {
          position: absolute;
          left: 50%; top: 44%;
          width: 14px; height: 8px;
          margin-left: -7px;
          border-radius: 1.5px;
          background: #86efac;
          border: 1px solid #15803d;
          opacity: 0;
        }
        .icon-personal .note::after {
          content: '';
          position: absolute;
          top: 50%; left: 50%;
          width: 4px; height: 4px;
          margin: -2px 0 0 -2px;
          border-radius: 50%;
          border: 1px solid #15803d;
        }
        .icon-personal.is-active .note {
          animation: lti-note-slide 2.2s cubic-bezier(0.34, 1.4, 0.64, 1) infinite;
        }
        @keyframes lti-note-slide {
          0%   { transform: translateY(2px) scale(0.7);  opacity: 0; }
          8%   { opacity: 1; }
          35%  { transform: translateY(-11px) scale(1);  opacity: 1; }
          55%  { transform: translateY(-11px) scale(1);  opacity: 1; }
          75%  { transform: translateY(2px) scale(0.85); opacity: 1; }
          90%  { opacity: 0; }
          100% { transform: translateY(2px) scale(0.7);  opacity: 0; }
        }
        .icon-personal.is-active .wallet-body {
          animation: lti-wallet-flex 2.2s ease-in-out infinite;
          transform-origin: 50% 100%;
        }
        @keyframes lti-wallet-flex {
          0%, 8% { transform: scaleY(1);   }
          20%    { transform: scaleY(0.9); }
          35%    { transform: scaleY(1);   }
          100%   { transform: scaleY(1);   }
        }

        /* --- CREDIT CARD: quick 3D flip --- */
        .icon-credit { perspective: 200px; }
        .icon-credit svg { transform-style: preserve-3d; }
        .icon-credit.is-active svg {
          animation: lti-card-flip 2.4s cubic-bezier(0.45, 0, 0.3, 1) infinite;
        }
        @keyframes lti-card-flip {
          0%   { transform: rotateY(0deg);   }
          30%  { transform: rotateY(180deg); }
          45%  { transform: rotateY(180deg); }
          75%  { transform: rotateY(360deg); }
          100% { transform: rotateY(360deg); }
        }

        /* === End loan type icon animations === */

        /* =========================================================
           POPULAR ARTICLES REVEAL ANIMATION — self-contained block
           Scroll-triggered, plays once via IntersectionObserver.
           Safe to move into its own CSS file later; no dependency
           on any other rule in this stylesheet.
        ========================================================= */
        .kye-reveal-fade {
          opacity: 0;
          transform: translateY(10px);
        }
        .kye-reveal-fade.kye-in {
          animation: kye-reveal-fade-in 0.35s ease forwards;
        }
        @keyframes kye-reveal-fade-in {
          to { opacity: 1; transform: translateY(0); }
        }
        .kye-reveal-num {
          opacity: 0;
          transform: translateX(-8px);
        }
        .kye-reveal-num.kye-in {
          animation: kye-reveal-num-in 0.3s ease forwards;
        }
        @keyframes kye-reveal-num-in {
          to { opacity: 1; transform: translateX(0); }
        }
        /* === End popular articles reveal animation === */

        /* =========================================================
           MOBILE MENU UNROLL ANIMATION — self-contained block
           Panel grows down from the top edge with a slight vertical
           stretch, like a carpet unrolling, rather than a plain
           fade or slide. No dependency on any other rule here.
        ========================================================= */
        .kye-mobilemenu-panel {
          position: absolute;
          top: 100%;
          left: 0;
          width: 100%;
          max-height: 0;
          opacity: 0;
          transform: scaleY(0.85);
          transform-origin: top;
          transition: max-height 0.45s cubic-bezier(0.22, 1, 0.36, 1),
                      transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
                      opacity 0.3s ease;
        }
        .kye-mobilemenu-panel.kye-menu-open {
          max-height: 480px;
          opacity: 1;
          transform: scaleY(1);
        }
        .kye-mobilemenu-row {
          transition: background 0.15s ease;
        }
        .kye-mobilemenu-row:hover {
          background: #f8fafc;
        }
        .kye-mobilemenu-row:active {
          background: #f3f4f6;
        }
        /* === End mobile menu unroll animation === */

        /* =========================================================
           HAMBURGER TO X MORPH — self-contained block
           Three bars that rotate and fade into an X when the menu
           is open, driven by a class toggled from the same script
           that already manages the menu's open/close state.
        ========================================================= */
        .kye-hamburger {
          width: 22px;
          height: 16px;
          position: relative;
          background: none;
          border: none;
          padding: 0;
          cursor: pointer;
        }
        .kye-hamburger:focus-visible {
          outline: 2px solid #FCDC4D;
          outline-offset: 3px;
        }
        .kye-hamburger-bar {
          position: absolute;
          left: 0;
          width: 100%;
          height: 2px;
          background: #ffffff;
          border-radius: 2px;
          transition: transform 0.3s ease, opacity 0.2s ease, top 0.3s ease;
        }
        .kye-hamburger-bar:nth-child(1) { top: 0; }
        .kye-hamburger-bar:nth-child(2) { top: 7px; }
        .kye-hamburger-bar:nth-child(3) { top: 14px; }
        .kye-hamburger.kye-menu-icon-open .kye-hamburger-bar:nth-child(1) {
          top: 7px;
          transform: rotate(45deg);
        }
        .kye-hamburger.kye-menu-icon-open .kye-hamburger-bar:nth-child(2) {
          opacity: 0;
        }
        .kye-hamburger.kye-menu-icon-open .kye-hamburger-bar:nth-child(3) {
          top: 7px;
          transform: rotate(-45deg);
        }
        /* === End hamburger to X morph === */

        /* =========================================================
           HERO CALCULATOR ILLUSTRATION — self-contained block
           Buttons that appear to press one at a time, and result
           pills that rise from the screen, fade in then fade out.
           Desktop/tablet only. No dependency on any other rule in
           this stylesheet or on any script; safe to remove entirely
           by deleting this CSS block and the markup block that
           uses these classes.
        ========================================================= */
        @keyframes kye-hero-calc-btn-press {
          0%, 100% { fill-opacity: 0.12; transform: scale(1); }
          40% { fill-opacity: 0.12; transform: scale(1); }
          55% { fill-opacity: 0.9; transform: scale(0.88); }
          75% { fill-opacity: 0.12; transform: scale(1); }
        }
        .kye-hero-calc-key {
          fill: #ffffff;
          stroke: #ffffff;
          stroke-width: 1.2;
          stroke-opacity: 0.5;
          transform-box: fill-box;
          transform-origin: center;
        }
        .kye-hero-calc-k1 { animation: kye-hero-calc-btn-press 4s ease-in-out infinite; }
        .kye-hero-calc-k2 { animation: kye-hero-calc-btn-press 4s ease-in-out infinite 0.5s; }
        .kye-hero-calc-k3 { animation: kye-hero-calc-btn-press 4s ease-in-out infinite 2.5s; }
        .kye-hero-calc-k4 { animation: kye-hero-calc-btn-press 4s ease-in-out infinite 1.4s; }
        .kye-hero-calc-k5 { animation: kye-hero-calc-btn-press 4s ease-in-out infinite 3.1s; }
        .kye-hero-calc-k6 { animation: kye-hero-calc-btn-press 4s ease-in-out infinite 0.8s; }
        .kye-hero-calc-k7 { animation: kye-hero-calc-btn-press 4s ease-in-out infinite 1.9s; }
        .kye-hero-calc-k8 { animation: kye-hero-calc-btn-press 4s ease-in-out infinite 3.5s; }
        .kye-hero-calc-k9 { animation: kye-hero-calc-btn-press 4s ease-in-out infinite 1.6s; }

        @keyframes kye-hero-calc-float-up {
          0%   { opacity: 0; transform: translate(0,0); }
          6%   { opacity: 0.15; }
          25%  { opacity: 1; }
          35%  { transform: translate(var(--kye-dx,0), -55px); }
          100% { opacity: 0; transform: translate(var(--kye-dx,0), -150px); }
        }
        .kye-hero-calc-pill { opacity: 0; animation-fill-mode: backwards; will-change: transform, opacity; }
        .kye-hero-calc-pill1 { animation: kye-hero-calc-float-up 6s ease-out infinite; }
        .kye-hero-calc-pill2 { animation: kye-hero-calc-float-up 6s ease-out infinite 1.5s; }
        .kye-hero-calc-pill3 { animation: kye-hero-calc-float-up 6s ease-out infinite 3s; }
        .kye-hero-calc-pill4 { animation: kye-hero-calc-float-up 6s ease-out infinite 4.5s; }
        /* === End hero calculator illustration === */