:root {
      --red: #a30f24;
      --green: #197d33;
      --teal: #1d5a52;
      --ink: #000;
      --gray: #58585c;
      --band: #f6f6f6;
      --cream: #fefdf8;
      --maroon: #8d1425;
      --maroon-deep: #4f0e1b;
      --mock-cream: #fbf8f1;
      --mock-card: #f7f3ea;
      --mock-line: #efe7d8;
      --grad: linear-gradient(90deg, #033766 0%, #652e45 50%, #9d1026 100%);
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0
    }

    html {
      -webkit-text-size-adjust: 100%
    }

    body {
      background: #fff;
      color: var(--ink);
      -webkit-font-smoothing: antialiased;
    }

    img {
      display: block;
      max-width: 100%
    }

    a {
      color: inherit;
      text-decoration: none
    }

    button {
      cursor: pointer;
      border: 0
    }

    .container {
      max-width: 1520px;
      margin: 0 auto;
      padding: 0 40px
    }

    .accent {
      color: var(--red)
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: var(--grad);
      color: #fff;
      font-weight: 600;
      font-size: 18px;
      border-radius: 8px;
      padding: 0 27px;
      height: 52px;
      box-shadow: 0 10px 24px -12px rgba(90, 15, 35, .55);
      transition: transform .15s ease, box-shadow .15s ease;
    }

    .btn:hover {
      transform: translateY(-1px);
      box-shadow: 0 14px 28px -12px rgba(90, 15, 35, .6)
    }

    .btn.big {
      height: 58px;
      padding: 0 28px
    }



    /* ---- partner logo marquee ---- */
    .marquee {
      overflow: hidden;
      margin-top: 50px;
      position: relative
    }

    .marquee::before,
    .marquee::after {
      content: "";
      position: absolute;
      top: 0;
      bottom: 80px;
      width: 90px;
      z-index: 2;
      pointer-events: none;
    }

    .mq-track {
      display: flex;
      align-items: center;
      width: max-content;
      animation: mqscroll 32s linear infinite;
      will-change: transform
    }

    .marquee:hover .mq-track {
      animation-play-state: paused
    }

    .mq-track img {
      height: 55px;
      width: auto;
      border-radius: 4px;
      margin-right: 66px;
      box-shadow: 0 14px 26px -14px rgba(40, 40, 45, .35);
    }

    @keyframes mqscroll {
      to {
        transform: translateX(-50%)
      }
    }



    /* ============ HERO ============ */
    .hero {
      background: url(https://www.zealconnect.com/wp-content/uploads/2026/07/hero-bg.png) center top / cover no-repeat #f6f5f4;
      background-image: image-set(url(https://www.zealconnect.com/wp-content/uploads/2026/07/hero-bg.png) 1x, url(https://www.zealconnect.com/wp-content/uploads/2026/07/hero-bg.png) 2x);
      padding: 20px 0 60px;
    }

    .nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px
    }

    .nav .logo img {
      height: 62px;
      width: auto
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 40px;
      font-size: 16px;
      font-weight: 600;
/*       margin-left: auto; */
/*       margin-right: 70px */
    }

    .nav-links a:hover {
      color: var(--red)
    }

    .nav-links .live {
      color: var(--green);
      display: inline-flex;
      align-items: center;
      gap: 8px
    }

    .nav-links .live:hover {
      color: var(--green)
    }

    .live-dot {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      border: 1.5px solid var(--green);
      display: inline-flex;
      align-items: center;
      justify-content: center
    }

    .live-dot::after {
      content: "";
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--green);
      animation: livepulse 2.2s infinite
    }

    @keyframes livepulse {
      50% {
        opacity: .35
      }
    }

    .nav-cta {
      display: flex;
      align-items: center;
      gap: 14px
    }

    .nav-cta .plain {
      font-size: 18px;
      font-weight: 600
    }

    .hero-inner {
      text-align: center
    }

    h1 {
      margin-top: 60px;
      font-size: clamp(36px, 4.08vw, 59px);
      font-weight: 700;
      line-height: 1.34;
      letter-spacing: -.01em;
    }

    .hero-sub {
      margin: 33px auto 0;
      font-size: clamp(17px, 1.15vw, 22px);
      line-height: 1.37;
      color: var(--ink);
    }

    .hero-cta {
      margin-top: 82px;
      display: inline-flex;
      align-items: center;
      gap: 14px
    }

    .hero-cta .see {
      font-size: 18px;
      font-weight: 600
    }

    .hero-cta .see:hover {
      color: var(--red)
    }

    .trusted {
      margin-top: 107px;
      font-size: 25px;
      font-weight: 600;
      text-align: center;
    }

    .logo-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 20px;
      margin-top: 71px;
      padding-bottom: 80px;
    }

    .logo-row img {
      height: 55px;
      width: auto;
      border-radius: 4px;
      box-shadow: 0 14px 26px -14px rgba(40, 40, 45, .35);
    }

    /* ============ SECTION SHARED ============ */
    .sec {
      position: relative;
      overflow: hidden
    }

    .sec>.container {
      position: relative;
      z-index: 2
    }

    .deco {
      position: absolute;
      z-index: 1;
      pointer-events: none
    }

    h2 {
      font-size: clamp(34px, 3.08vw, 59px);
      font-weight: 700;
      line-height: 1.12;
      letter-spacing: -.01em;
      text-align: center;
    }

    .sub {
      text-align: center;
      font-size: clamp(16px, 1.15vw, 22px);
      line-height: 1.37;
      color: var(--ink);
    }

    /* ============ ONE DESK ============ */
    .onedesk .deco-l {
      left: -572px;
      top: 336px;
      width: 1058px
    }

    .onedesk .deco-r {
      right: -381px;
      top: 211px;
      width: 817px
    }

    /* .onedesk h2 {
      padding-top: 86px
    } */

    .tabs {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 56px;
      margin: 26px auto 0;
      max-width: 952px;
      border-bottom: 1px solid #e3ded6;
    }

    .tab {
      background: none;
      display: inline-flex;
      align-items: center;
      gap: 11px;
      font-size: 20px;
      font-weight: 600;
      color: #838b87;
      padding: 6px 2px 16px;
      border-bottom: 3px solid transparent;
      margin-bottom: -1px;
      transition: color .2s;
    }

    .tab img {
      height: 22px;
      width: auto;
      opacity: .55;
      transition: opacity .2s
    }

    .tab:hover {
      color: #4c534f
    }

    .tab.active {
      color: var(--red);
      border-bottom-color: var(--red)
    }

    .tab.active img {
      opacity: 1
    }

    .pane {
      display: none
    }

    .pane.active {
      display: grid;
      grid-template-columns: minmax(0, 464px) minmax(0, 636px);
      justify-content: space-between;
      align-items: start;
      margin-top: 67px;
      padding: 0 0 0 162px;
    }

    .pane.switched.active {
      animation: panein .45s ease both
    }

    @keyframes panein {
      from {
        opacity: 0;
        transform: translateY(14px)
      }

      to {
        opacity: 1;
        transform: none
      }
    }

    .pane-left {
      padding-top: 22px
    }

    .pane h2 {
      font-size: 30px;
      font-weight: 700;
      line-height: 1.27;
      letter-spacing: -.005em
    }

    .pane .lede {
      margin-top: 22px;
      font-size: 20px;
      line-height: 1.4;
      color: var(--gray);
      max-width: 390px
    }

    .flist {
      margin-top: 34px;
      display: flex;
      flex-direction: column;
      gap: 22px
    }

    .feat {
      display: flex;
      align-items: center;
      gap: 14px;
      font-size: 20px;
      font-weight: 600
    }

    .feat img {
      height: 33px;
      width: auto
    }

    .feat .fic {
      width: 33px;
      height: 33px;
      flex: 0 0 33px;
      border-radius: 9px;
      background: #f9e3e5;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: var(--maroon);
    }

    .feat .fic svg {
      width: 17px;
      height: 17px
    }

    .pane .btn {
      margin-top: 56px
    }

    /* ---- inbox mock (pane 1) ---- */
    .inbox-mock {
      width: 636px;
      max-width: 100%;
      height: 505px;
      position: relative;
      background: #f3f3f3;
      border-radius: 28px;
      box-shadow: 0 45px 70px -45px rgba(30, 25, 25, .35);
    }

    .msg-card {
      position: absolute;
      left: 36px;
      top: 88px;
      width: 246px;
      background: #fff;
      border-radius: 14px;
      padding: 18px 18px 20px;
      box-shadow: 0 18px 38px -18px rgba(60, 45, 35, .3);
      animation: bob 5s ease-in-out infinite;
    }

    @keyframes bob {
      50% {
        transform: translateY(-7px)
      }
    }

    .msg-head {
      display: flex;
      align-items: flex-start;
      gap: 10px
    }

    .avatar {
      width: 38px;
      height: 38px;
      flex: 0 0 38px;
      border-radius: 50%;
      background: linear-gradient(135deg, #cfa78f, #b08165);
      color: #fff;
      font-weight: 700;
      font-size: 16px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .mname {
      font-size: 14px;
      font-weight: 700;
      line-height: 1.25;
      color: #241f1b
    }

    .wa-pill {
      margin-left: auto;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: #f7ecdd;
      border-radius: 999px;
      padding: 5px 10px;
      font-size: 11px;
      font-weight: 700;
      color: #8a4a2a;
      white-space: nowrap;
    }

    .wa-pill .dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #e05c2a;
      animation: livepulse 2s infinite
    }

    .msg-card p {
      margin-top: 13px;
      font-size: 13.5px;
      line-height: 1.5;
      color: #5d574f
    }

    .inbox-panel {
      position: absolute;
      right: 32px;
      top: 52px;
      width: 308px;
      height: 400px;
      background: #fff;
      border: 1px solid var(--mock-line);
      border-radius: 12px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }

    .ip-head {
      background: var(--mock-cream);
      border-bottom: 1px solid var(--mock-line);
      padding: 12px 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .ip-head strong {
      font-size: 13.5px;
      color: #241f1b
    }

    .ip-icons {
      display: flex;
      gap: 6px
    }

    .ip-icons span {
      width: 24px;
      height: 24px;
      border-radius: 7px;
      background: #fff;
      border: 1px solid var(--mock-line);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #8a6a55;
    }

    .ip-icons svg {
      width: 12px;
      height: 12px
    }

    .ip-cols {
      flex: 1;
      display: grid;
      grid-template-columns: 1fr 1fr
    }

    .ip-col {
      padding: 14px;
      border-right: 1px solid #f1ece2
    }

    .ip-col:last-child {
      border-right: 0
    }

    .ip-lbl {
      font-size: 13px;
      font-weight: 700;
      color: #8b8b8b;
      display: inline-flex;
      align-items: center;
      gap: 7px
    }

    .ip-lbl.res {
      color: #a03b2d
    }

    .badge {
      display: inline-block;
      min-width: 18px;
      text-align: center;
      font-size: 10.5px;
      font-weight: 700;
      background: #eeeceb;
      color: #6b6b6b;
      border-radius: 6px;
      padding: 2px 5px;
    }

    .badge.pink {
      background: #f6e3de;
      color: #a03b2d
    }

    /* ---- workflow mock (pane 2) ---- */
    .wf-mock {
      width: 636px;
      max-width: 100%;
      height: 505px;
      background: #f3f3f3;
      border-radius: 28px;
      padding: 44px 46px;
      box-shadow: 0 45px 70px -45px rgba(30, 25, 25, .35);
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 14px;
    }

    .wf-step {
      background: #fff;
      border: 1px solid var(--mock-line);
      border-radius: 12px;
      padding: 14px 16px;
      display: flex;
      align-items: center;
      gap: 13px;
      position: relative;
    }

    .wf-step .sdot {
      width: 26px;
      height: 26px;
      flex: 0 0 26px;
      border-radius: 50%;
      background: var(--maroon);
      color: #fff;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .wf-step .sdot svg {
      width: 12px;
      height: 12px
    }

    .wf-step b {
      font-size: 14.5px;
      color: #241f1b
    }

    .wf-step small {
      display: block;
      font-size: 12.5px;
      color: #8b8478;
      margin-top: 2px
    }

    .wf-step .tagx {
      margin-left: auto;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .08em;
      background: #f6dfe0;
      color: #a1273a;
      border-radius: 6px;
      padding: 3px 8px;
    }

    .wf-mock.play .wf-step {
      opacity: 0;
      animation: steprise .5s ease forwards
    }

    .wf-mock.play .wf-step:nth-child(1) {
      animation-delay: .05s
    }

    .wf-mock.play .wf-step:nth-child(2) {
      animation-delay: .25s
    }

    .wf-mock.play .wf-step:nth-child(3) {
      animation-delay: .45s
    }

    .wf-mock.play .wf-step:nth-child(4) {
      animation-delay: .65s
    }

    .wf-mock.play .wf-step:nth-child(5) {
      animation-delay: .85s
    }

    @keyframes steprise {
      from {
        opacity: 0;
        transform: translateY(16px)
      }

      to {
        opacity: 1;
        transform: none
      }
    }

    /* ---- guardrail mock (pane 3) ---- */
    .gr-mock {
      width: 636px;
      max-width: 100%;
      height: 505px;
      background: #f3f3f3;
      border-radius: 28px;
      padding: 44px 46px;
      box-shadow: 0 45px 70px -45px rgba(30, 25, 25, .35);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .gr-card {
      width: 100%;
      max-width: 430px;
      background: #fff;
      border: 1px solid var(--mock-line);
      border-radius: 14px;
      overflow: hidden;
    }

    .gr-head {
      background: var(--mock-cream);
      border-bottom: 1px solid var(--mock-line);
      padding: 13px 18px;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .gr-head .sdot {
      width: 26px;
      height: 26px;
      border-radius: 50%;
      background: var(--maroon);
      color: #fff;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .gr-head .sdot svg {
      width: 12px;
      height: 12px
    }

    .gr-head b {
      font-size: 14.5px;
      color: #241f1b
    }

    .gr-list {
      list-style: none;
      padding: 8px 18px
    }

    .gr-list li {
      display: flex;
      align-items: center;
      gap: 11px;
      font-size: 13.5px;
      color: #4c463e;
      padding: 11px 0;
      border-bottom: 1px dashed #efe7d8;
    }

    .gr-list li:last-child {
      border-bottom: 0
    }

    .gr-list .tick {
      color: var(--maroon);
      font-weight: 700
    }

    .gr-foot {
      margin: 6px 18px 18px;
      background: var(--maroon-deep);
      color: #fff;
      border-radius: 9px;
      padding: 11px 15px;
      font-size: 13px;
      font-weight: 700;
      display: flex;
      align-items: center;
      gap: 9px;
      animation: glowbar 3s ease-in-out infinite;
    }

    @keyframes glowbar {
      50% {
        box-shadow: 0 0 22px -4px rgba(141, 20, 37, .55)
      }
    }

    .gr-mock.play .gr-list li {
      opacity: 0;
      animation: steprise .45s ease forwards
    }

    .gr-mock.play .gr-list li:nth-child(1) {
      animation-delay: .1s
    }

    .gr-mock.play .gr-list li:nth-child(2) {
      animation-delay: .3s
    }

    .gr-mock.play .gr-list li:nth-child(3) {
      animation-delay: .5s
    }

    .gr-mock.play .gr-list li:nth-child(4) {
      animation-delay: .7s
    }

    /* ============ WATCH / QUEUE DEMO ============ */
    .watch {
      background: var(--band)
    }

    .watch h2 {
      padding-top: 89px
    }

    .watch .sub {
      margin: 33px auto 0;
      max-width: 1010px
    }

    .queue-mock {
      width: 900px;
      max-width: 100%;
      margin: 68px auto 0;
      display: grid;
      grid-template-columns: 372px 1fr;
      gap: 18px;
      margin-bottom: 88px;
      text-align: left;
    }

    .qcard {
      background: #fff;
      border-radius: 16px;
      padding: 22px;
      box-shadow: 0 30px 55px -40px rgba(30, 20, 20, .35)
    }

    .qlabel {
      font-size: 10.5px;
      font-weight: 700;
      letter-spacing: .12em;
      color: #8a837a;
      margin-bottom: 10px
    }

    .chiprow {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
      margin-bottom: 18px
    }

    .chip {
      background: #fff;
      border: 1px solid #ddd6cc;
      border-radius: 999px;
      padding: 5px 12px;
      font-size: 12px;
      font-weight: 600;
      color: #5d5850;
      transition: all .15s;
    }

    .chip:hover {
      border-color: #b9a99b
    }

    .chip.on {
      background: var(--maroon-deep);
      border-color: var(--maroon-deep);
      color: #fff
    }

    .tickets {
      display: flex;
      flex-direction: column;
      gap: 9px;
      margin-bottom: 18px
    }

    .ticket {
      text-align: left;
      background: #f8f4ee;
      border: 1.5px solid transparent;
      border-radius: 10px;
      padding: 10px 13px;
      display: flex;
      gap: 11px;
      align-items: flex-start;
      transition: all .15s;
    }

    .ticket .tic {
      width: 26px;
      height: 26px;
      flex: 0 0 26px;
      border-radius: 8px;
      background: #f4e3e4;
      color: var(--maroon);
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .ticket .tic svg {
      width: 13px;
      height: 13px
    }

    .ticket b {
      display: block;
      font-size: 12.5px;
      color: #241f1b
    }

    .ticket small {
      font-size: 11px;
      color: #94897b
    }

    .ticket.sel {
      background: #fdf6f4;
      border-color: #b3505c
    }

    .qdivider {
      display: flex;
      align-items: center;
      gap: 10px;
      margin: 2px 0 14px;
      font-size: 10.5px;
      font-weight: 700;
      letter-spacing: .12em;
      color: #b0b23a;
      white-space: nowrap;
    }

    .qdivider::before,
    .qdivider::after {
      content: "";
      height: 1px;
      background: #e3ddce;
      flex: 1
    }

    .qta {
      width: 100%;
      border: 1.5px solid #e6c869;
      border-radius: 10px;
      background: #fffdf6;
      font-size: 12.5px;
      color: #5d5850;
      padding: 11px 13px;
      height: 74px;
      resize: none;
      margin-bottom: 16px;
      outline: none;
    }

    .qta::placeholder {
      color: #b3ab9d
    }

    .qrun {
      width: 100%;
      background: var(--grad);
      color: #fff;
      font-size: 14.5px;
      font-weight: 600;
      border-radius: 9px;
      padding: 13px;
      transition: transform .15s;
    }

    .qrun:hover {
      transform: translateY(-1px)
    }

    .qnote {
      margin-top: 12px;
      font-size: 10.5px;
      line-height: 1.5;
      color: #a49b8d
    }

    .qright {
      background: var(--mock-cream);
      border-radius: 16px;
      padding: 16px;
      box-shadow: 0 30px 55px -40px rgba(30, 20, 20, .35)
    }

    .qr-head {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 2px 4px 12px
    }

    .qr-head .wdots {
      display: flex;
      gap: 4px
    }

    .qr-head .wdots i {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #e0d5c2
    }

    .qr-head b {
      font-size: 12.5px;
      color: #514a40;
      margin-left: 4px
    }

    .qr-head .rpill {
      margin-left: auto;
      background: #f4e3e0;
      color: #a1273a;
      font-size: 11px;
      font-weight: 700;
      border-radius: 999px;
      padding: 4px 11px;
    }

    .qmsg {
      background: var(--mock-card);
      border: 1px solid var(--mock-line);
      border-radius: 11px;
      padding: 12px 14px;
      margin-bottom: 10px
    }

    .qmsg-head {
      display: flex;
      align-items: center;
      gap: 9px;
      margin-bottom: 8px
    }

    .qmsg .avatar {
      width: 30px;
      height: 30px;
      flex: 0 0 30px;
      font-size: 13px
    }

    .qmsg b {
      font-size: 12.5px;
      color: #241f1b
    }

    .qmeta {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-top: 3px
    }

    .epill {
      background: #dce8f7;
      color: #3568b8;
      font-size: 9.5px;
      font-weight: 700;
      border-radius: 5px;
      padding: 2px 7px
    }

    .qmeta small {
      font-size: 10.5px;
      color: #a49b8d
    }

    .qmsg p {
      font-size: 12px;
      line-height: 1.5;
      color: #5d574f
    }

    .qbook {
      background: var(--mock-card);
      border: 1px solid var(--mock-line);
      border-radius: 11px;
      padding: 12px 14px;
      margin-bottom: 10px
    }

    .qbook-title {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 12.5px;
      font-weight: 700;
      color: #6d1420;
      margin-bottom: 9px
    }

    .qbook-title svg {
      width: 12px;
      height: 12px
    }

    .qbook-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0 24px
    }

    .qbrow {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      padding: 6px 0;
      border-top: 1px dashed #e8dfcc;
      font-size: 11px;
      color: #a49b8d;
    }

    .qbrow b {
      font-size: 11.5px;
      color: #241f1b
    }

    .qsteps {
      display: flex;
      flex-direction: column;
      gap: 9px
    }

    .qstep {
      background: #fff;
      border: 1px solid var(--mock-line);
      border-radius: 11px;
      padding: 11px 14px;
      display: flex;
      gap: 11px;
      align-items: flex-start;
    }

    .qdot {
      width: 24px;
      height: 24px;
      flex: 0 0 24px;
      border-radius: 50%;
      background: var(--maroon);
      color: #fff;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .qdot svg {
      width: 11px;
      height: 11px
    }

    .qstep b {
      font-size: 12.5px;
      color: #241f1b;
      display: inline-flex;
      align-items: center;
      gap: 8px
    }

    .qstep small {
      display: block;
      font-size: 11.5px;
      color: #8b8478;
      margin-top: 3px;
      line-height: 1.45
    }

    .hpill {
      background: #f6dfe0;
      color: #a1273a;
      font-size: 9px;
      font-weight: 700;
      letter-spacing: .06em;
      border-radius: 5px;
      padding: 2px 7px
    }

    .tagpill {
      display: inline-block;
      background: #f4e3e4;
      color: #8d3a44;
      font-size: 10px;
      font-weight: 700;
      border-radius: 6px;
      padding: 3px 9px;
      margin: 6px 6px 0 0
    }

    .qaction {
      display: flex;
      align-items: center;
      gap: 10px;
      margin: 3px 0;
      font-size: 9.5px;
      font-weight: 700;
      letter-spacing: .12em;
      color: #b09a6a;
      white-space: nowrap;
    }

    .qaction::before,
    .qaction::after {
      content: "";
      height: 1px;
      background: #e8dfcc;
      flex: 1
    }

    .qresolved {
      background: var(--maroon-deep);
      border-radius: 11px;
      padding: 13px 14px;
      margin-top: 9px;
      display: flex;
      gap: 11px;
      align-items: center;
      color: #fff;
      animation: glowbar 3.2s ease-in-out infinite;
    }

    .qresolved .qdot {
      background: #fff;
      color: var(--maroon-deep)
    }

    .qresolved b {
      font-size: 12.5px
    }

    .qresolved small {
      display: block;
      font-size: 11px;
      color: #e6c9c9;
      margin-top: 3px;
      line-height: 1.45
    }

    .qresolved .qbtn {
      margin-left: auto;
      flex: 0 0 auto;
      background: #fff;
      color: #241f1b;
      font-size: 12px;
      font-weight: 700;
      border-radius: 8px;
      padding: 9px 13px;
      white-space: nowrap;
      transition: transform .15s;
    }

    .qresolved .qbtn:hover {
      transform: translateY(-1px)
    }

    .qsteps.play .qstep,
    .qsteps.play .qresolved,
    .qsteps.play .qaction {
      opacity: 0;
      animation: steprise .45s ease forwards
    }

    .qsteps.play>*:nth-child(1) {
      animation-delay: .05s
    }

    .qsteps.play>*:nth-child(2) {
      animation-delay: .3s
    }

    .qsteps.play>*:nth-child(3) {
      animation-delay: .55s
    }

    .qsteps.play>*:nth-child(4) {
      animation-delay: .8s
    }

    .qsteps.play>*:nth-child(5) {
      animation-delay: 1.05s
    }

    .qsteps.play>*:nth-child(6) {
      animation-delay: 1.3s
    }

    .qsteps.play>*:nth-child(7) {
      animation-delay: 1.55s
    }

    /* ============ BUILT ============ */
    .built .deco-r {
      right: -604px;
      top: -137px;
      width: 1084px
    }

    .built .deco-l {
      left: -570px;
      top: 478px;
      width: 1098px
    }

    .built-grid {
      display: grid;
      grid-template-columns: minmax(0, 640px) minmax(0, 618px);
      justify-content: space-between;
      align-items: start;
      padding: 0 53px 0 48px;
    }

    .built-text {
      padding-top: 0;
    }

    .built-text h2 {
      text-align: left;
      line-height: 1.22
    }

    .built-text p {
      margin-top: 33px;
      font-size: 20px;
      line-height: 1.5;
      color: #333;
      max-width: 640px
    }

    /* ---- booking card mock ---- */
    .bk-mock {
      margin-top: 0;
      width: 618px;
      max-width: 100%;
      background: #f3f3f3;
      border-radius: 26px;
      padding: 34px 36px;
      box-shadow: 0 45px 70px -45px rgba(30, 25, 25, .35);
    }

    .bk-card {
      background: #fff;
      border: 1px solid var(--mock-line);
      border-radius: 13px;
      overflow: hidden
    }

    .bk-head {
      background: var(--mock-cream);
      border-bottom: 1px solid var(--mock-line);
      padding: 13px 17px;
      display: flex;
      align-items: center;
      gap: 11px;
    }

    .bk-head .bic {
      width: 30px;
      height: 30px;
      flex: 0 0 30px;
      border-radius: 9px;
      background: #f4e9e9;
      color: var(--maroon);
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .bk-head .bic svg {
      width: 14px;
      height: 14px
    }

    .bk-head b {
      font-size: 14.5px;
      color: #241f1b
    }

    .bk-head small {
      display: block;
      font-size: 12px;
      color: #94897b;
      margin-top: 1px
    }

    .bk-pill {
      margin-left: auto;
      background: #f5ecd2;
      color: #8a713a;
      font-size: 11px;
      font-weight: 700;
      border-radius: 999px;
      padding: 5px 12px;
      white-space: nowrap;
    }

    .bk-pill .ell::after {
      content: "";
      animation: ell 1.6s steps(4) infinite
    }

    @keyframes ell {
      0% {
        content: ""
      }

      25% {
        content: "."
      }

      50% {
        content: ".."
      }

      75% {
        content: "..."
      }
    }

    .bk-rows {
      list-style: none
    }

    .bk-rows li {
      display: flex;
      align-items: center;
      gap: 13px;
      padding: 11px 17px;
      border-bottom: 1px solid #f3eee4;
    }

    .bk-rows .bic {
      width: 32px;
      height: 32px;
      flex: 0 0 32px;
      border-radius: 9px;
      background: #f7ecec;
      color: #7d3b44;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .bk-rows .bic svg {
      width: 15px;
      height: 15px
    }

    .bk-rows .lbl {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .1em;
      color: #94897b
    }

    .bk-rows .val {
      font-size: 13.5px;
      color: #241f1b;
      margin-top: 2px
    }

    .bk-rows .val b {
      font-weight: 700
    }

    .bk-rows .val span {
      color: #94897b;
      font-weight: 400
    }

    .bk-rows .rdot {
      margin-left: auto;
      width: 15px;
      height: 15px;
      flex: 0 0 15px;
      border-radius: 50%;
      background: var(--maroon);
      color: #fff;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .bk-rows .rdot svg {
      width: 7px;
      height: 7px
    }

    .bk-mock.play .bk-rows .rdot {
      opacity: 0;
      animation: dotpop .4s ease forwards
    }

    .bk-mock.play .bk-rows li:nth-child(1) .rdot {
      animation-delay: .2s
    }

    .bk-mock.play .bk-rows li:nth-child(2) .rdot {
      animation-delay: .5s
    }

    .bk-mock.play .bk-rows li:nth-child(3) .rdot {
      animation-delay: .8s
    }

    .bk-mock.play .bk-rows li:nth-child(4) .rdot {
      animation-delay: 1.1s
    }

    .bk-mock.play .bk-rows li:nth-child(5) .rdot {
      animation-delay: 1.4s
    }

    @keyframes dotpop {
      0% {
        opacity: 0;
        transform: scale(.3)
      }

      70% {
        transform: scale(1.25)
      }

      100% {
        opacity: 1;
        transform: scale(1)
      }
    }

    .bk-foot {
      background: var(--mock-cream);
      border-top: 1px solid var(--mock-line);
      padding: 12px 17px;
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 12.5px;
      font-weight: 700;
      color: #42403a;
    }

    .bk-foot .bic {
      width: 24px;
      height: 24px;
      flex: 0 0 24px;
      border-radius: 50%;
      border: 1.3px solid #7d3b44;
      color: #7d3b44;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .bk-foot .bic svg {
      width: 11px;
      height: 11px
    }

    /* .fcards {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 111px;
      margin-top: 74px;
      padding: 0 53px 216px 48px;
    } */

    /* .fcard {
      background: #fff;
      border-radius: 18px;
      padding: 38px 40px 42px;
      box-shadow: 0 30px 55px -35px rgba(30, 20, 20, .28), 0 2px 10px rgba(30, 20, 20, .04);
    }

    .fcard img {
      height: 50px;
      width: 50px;
    }

    .fcard h3 {
      margin-top: 26px;
      font-size: 28px;
      font-weight: 700
    }

    .fcard ul {
      list-style: none;
      margin-top: 24px;
      display: flex;
      flex-direction: column;
      gap: 15px
    }

    .fcard li {
      display: flex;
      gap: 14px;
      font-size: 20px;
      color: #3d3d3d;
      line-height: 1.35
    }

    .fcard li::before {
      color: var(--red);
      font-weight: 700;
      flex: 0 0 auto
    }

    .fcard.a li::before {
      content: "\2713"
    }

    .fcard.b li::before {
      content: "\2192"
    } */


    .dcard {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 18px;
      padding: 30px 32px;
      box-shadow: 0 40px 60px -40px rgba(20, 10, 10, .15)
    }

    .dcard .dic {
      width: 44px;
      height: 44px;
      border-radius: 12px;
      background: #f9e6ea;
      color: var(--red);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 22px
    }

    .dcard .dic svg {
      width: 20px;
      height: 20px
    }

    .dcard h3 {
      font-size: 22px;
      font-weight: 700;
      margin: 0 0 18px
    }

    .dcard ul {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 12px
    }

    .dcard li {
      display: flex;
      gap: 12px;
      color: var(--ink-2);
      font-size: 14.5px;
      font-weight: 500
    }

    .dcard.a li::before {
      content: "✓";
      color: var(--red);
      font-weight: 700
    }

    .dcard.b li::before {
      content: "→";
      color: var(--red);
      font-weight: 700
    }


    /* ============ SEGMENTS ============ */
    .segments {
      background: var(--band)
    }

    .segments h2 {
      padding-top: 80px
    }

    .segments .sub {
      margin: 42px auto 0;
      max-width: 900px
    }

    .seg-grid {
      display: grid;
      grid-template-columns: repeat(3, 366px);
      gap: 39px 76px;
      justify-content: center;
      margin-top: 94px;
      padding-bottom: 140px;
    }

    .scard {
      background: var(--cream);
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 30px 50px -35px rgba(30, 25, 20, .3);
      display: flex;
      flex-direction: column;
      transition: transform .25s ease, box-shadow .25s ease;
    }

    .scard:hover {
      transform: translateY(-6px);
      box-shadow: 0 40px 60px -35px rgba(30, 25, 20, .4)
    }

    .scard>img {
      width: 100%;
      height: 228px;
      object-fit: cover
    }

    .scard .body {
      padding: 26px 28px 30px
    }

    .scard .eyebrow {
      font-size: 15px;
      font-weight: 700;
      letter-spacing: .13em;
      color: var(--red);
    }

    .scard h4 {
      margin-top: 14px;
      font-size: 28px;
      font-weight: 600;
      line-height: 1.25;
      color: #241f1b;
      letter-spacing: -.005em
    }

    .scard p {
      margin-top: 16px;
      font-size: 19px;
      line-height: 1.4;
      color: #6f6a64
    }

    .scard .explore {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-top: 26px;
      font-size: 19px;
      font-weight: 700;
      color: var(--teal);
    }

    /* ============ ROI ============ */
    .roi .deco-r {
      right: -541px;
      top: -20px;
      width: 1184px
    }

    .roi .deco-l {
      left: -850px;
      top: 74px;
      width: 1184px
    }

    .roi-band {
      position: relative;
      /* margin-top: 95px; */
      border-radius: 40px;
      overflow: hidden;
      background: url(https://www.zealconnect.com/wp-content/uploads/2026/07/planet-band.jpg) center / cover no-repeat #0b0705;
      color: #fff;
      height: 530px;
    }

    .roi-band h2 {
      padding-top: 41px;
      color: #fff
    }

    .roi-stats {
      position: absolute;
      left: 0;
      right: 0;
      top: 221px
    }

/*     .stat {
      position: absolute;
      transform: translateX(-50%);
      text-align: center;
      white-space: nowrap
    } */

    .stat .num {
      font-size: 59px;
      font-weight: 700;
      line-height: 1
    }

    .stat .lbl {
      margin-top: 29px;
      font-size: 20px;
      line-height: 1.33;
      white-space: pre-line
    }

    .stat:nth-child(1) {
      left: 12.5%
    }

    .stat:nth-child(2) {
      left: 34.7%
    }

    .stat:nth-child(3) {
      left: 59.2%
    }

    .stat:nth-child(4) {
      left: 84.9%
    }

    .proof {
      padding: 74px 0 0;
    }

    .prow {
      display: grid;
      grid-template-columns: 246px 1fr;
      gap: 50px;
      align-items: center;
      padding: 24px 0 24px 280px;
    }

    .prow .plogo {
      display: flex;
      justify-content: center
    }

    .prow .plogo img {
      width: auto
    }

    .prow.r1 .plogo img {
      height: 56px
    }

    .prow.r2 .plogo img {
      height: 82px
    }

    .prow.r3 .plogo img {
      height: 56px
    }

    .prow .statline {
      display: flex;
      align-items: baseline;
      gap: 36px
    }

    .prow .n {
      font-size: 59px;
      font-weight: 700;
      letter-spacing: -.01em
    }

    .prow .t {
      font-size: 30px;
      color: var(--ink)
    }

    /* ============ FOOTER ============ */
    footer {
      background: url(https://www.zealconnect.com/wp-content/uploads/2026/08/footer-bg.png) center / cover no-repeat #f5f5f5;
      padding: 66px 0;
    }

    .fgrid {
      display: grid;
      grid-template-columns: 480px 259px 243px 259px 1fr;
      align-items: start;
    }

    .fbrand img {
      height: 50px;
      width: auto
    }

    .fbrand .loc {
      margin-top: 0;
      font-size: 16px;
      color: #1a1a1a
    }
/* 
    .fcol {
      padding-top: 28px
    }
 */
    .fcol h5 {
      font-size: 22px;
      font-weight: 700;
      margin: 0;
    }

    .fcol ul {
      list-style: none;
      margin-top: 20px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .fcol li a {
      font-size: 15px;
      color: #1a1a1a;
      white-space: nowrap
    }

    .fcol li a:hover {
      color: var(--red)
    }

    .socials {
      margin-top: 28px;
      display: flex;
      gap: 15px
    }

    .socials a {
      color: var(--red);
      display: inline-flex
    }

    .socials svg {
      width: 24px;
      height: 24px
    }

    /* ============ RESPONSIVE ============ */
    @media (max-width:1500px) {
      .pane.active {
        padding-left: 80px;
        padding-right: 0
      }

      .prow {
        padding-left: 80px
      }

      .sub br {
        display: none
      }

      .built-grid,
      .fcards {
        padding-left: 24px
      }

      .seg-grid {
        grid-template-columns: repeat(3, minmax(280px, 366px))
      }

      .fgrid {
        grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
        gap: 24px
      }
    }

    @media (max-width:1180px) {
      .nav-links {
        display: none
      }

      .prow {
        padding-left: 0
      }

      .hero-sub br {
        display: none
      }

      .pane.active {
        grid-template-columns: 1fr;
        padding-left: 0;
        gap: 56px
      }

      .inbox-mock,
      .wf-mock,
      .gr-mock {
        width: 100%
      }

      .built-grid {
        grid-template-columns: 1fr;
        padding-left: 0;
        gap: 40px
      }

      .built-text {
        padding-top: 30px
      }

      .bk-mock {
        margin-top: 0
      }

      /* .fcards {
        grid-template-columns: 1fr;
        gap: 36px;
        padding-left: 0;
        padding-bottom: 120px
      } */

      .seg-grid {
        grid-template-columns: repeat(2, minmax(280px, 366px))
      }

      .queue-mock {
        grid-template-columns: 1fr;
        width: 100%
      }

      .roi-band {
        height: auto;
        padding-bottom: 60px
      }

      .roi-band h2 {
        padding: 48px 24px 0
      }

      .roi-stats {
        position: static;
        margin-top: 48px;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 48px 64px
      }

      .stat {
        position: static;
        transform: none
      }

      .deco {
        display: none
      }

      .fgrid {
        grid-template-columns: 1fr 1fr
      }

      .fbrand {
        grid-column: 1/-1
      }
    }

    @media (max-width:720px) {
      .container {
        padding: 0 22px
      }

      .hero {
        padding-top: 28px
      }

      .nav .logo img {
        height: 44px
      }

      .nav-cta .plain {
        display: none
      }

      .btn {
        font-size: 16px;
        height: 46px;
        padding: 0 20px
      }

      h1 {
        margin-top: 70px
      }

      .hero-cta {
        margin-top: 48px
      }

      .trusted {
        margin-top: 64px;
        font-size: 19px
      }

      .logo-row {
        flex-wrap: wrap;
        justify-content: center;
        gap: 16px;
        margin-top: 40px;
        padding-bottom: 56px
      }

      .logo-row img {
        height: 44px
      }

      .tabs {
        gap: 24px;
        overflow-x: auto;
        justify-content: flex-start
      }

      .tab {
        font-size: 16px;
        white-space: nowrap
      }

      .pane h3 {
        font-size: 24px
      }

      .feat {
        font-size: 17px
      }

      .inbox-mock {
        height: auto;
        padding: 22px
      }

      .msg-card {
        position: static;
        width: 100%;
        margin-bottom: 16px
      }

      .inbox-panel {
        position: static;
        width: 100%;
        height: 320px
      }

      .wf-mock,
      .gr-mock {
        height: auto;
        padding: 26px 22px
      }

      .stat .num {
        font-size: 44px
      }

      .stat .lbl {
        font-size: 22px;
        margin-top: 16px
      }

      .seg-grid {
        grid-template-columns: minmax(0, 366px)
      }

      .prow {
        grid-template-columns: 1fr;
        gap: 18px;
        justify-items: center;
        text-align: center
      }

      .prow .statline {
        flex-direction: column;
        align-items: center;
        gap: 8px
      }

      .prow .n {
        font-size: 44px
      }

      .prow .t {
        font-size: 18px
      }

      .qresolved {
        flex-wrap: wrap
      }

      .qresolved .qbtn {
        margin-left: 0
      }

      .fcol ul {
        margin-top: 20px;
        gap: 16px
      }

      .fbrand img {
        height: 52px
      }

      .fbrand .loc {
        font-size: 22px
      }
    }

    .mainHead {
      padding-bottom: 100px;
    }


/*! Zeal Connect — single stylesheet for every route.
    The homepage style block is the base layer; the shared site
    components follow. Every token lives in the :root below. */
:root {
  /* palette — verbatim from the homepage style block */
  --red: #a30f24;
  --green: #197d33;
  --teal: #1d5a52;
  --ink: #000000;
  --gray: #58585c;
  --band: #f6f6f6;
  --cream: #fefdf8;
  --maroon: #8d1425;
  --maroon-deep: #4f0e1b;
  --mock-cream: #fbf8f1;
  --mock-card: #f7f3ea;
  --mock-line: #efe7d8;
  --grad: linear-gradient(90deg, #033766 0%, #652e45 50%, #9d1026 100%);

  /* artwork and the extra tokens the shared components need */
  --grad-hover: linear-gradient(90deg, #04294c 0%, #542336 50%, #82091f 100%);
  --deco-arcs-l: url(https://www.zealconnect.com/wp-content/uploads/2026/07/deco-arcs-left.svg);
  --deco-arcs-r: url(https://www.zealconnect.com/wp-content/uploads/2026/07/deco-arcs-right.svg);
  --deco-curves-l: url(https://www.zealconnect.com/wp-content/uploads/2026/07/deco-curves-left.svg);
  --deco-curves-r: url(https://www.zealconnect.com/wp-content/uploads/2026/07/deco-curves-right.svg);
  --deco-ripples-l: url(https://www.zealconnect.com/wp-content/uploads/2026/07/deco-ripples-left.svg);
  --deco-ripples-r: url(https://www.zealconnect.com/wp-content/uploads/2026/07/deco-ripples-right.svg);
  --hero-bg: url(https://www.zealconnect.com/wp-content/uploads/2026/07/hero-bg.png);
  --hero-base: #f6f5f4;
  --footer-bg: url(https://www.zealconnect.com/wp-content/uploads/2026/08/footer-bg.png);
  --surface: #ffffff;
  --card: #fefdf8;
  --deep: #f6f6f6;
  --g-deep: #4f0e1b;
  --g: #8d1425;
  --g-mid: #a30f24;
  --spring: #a30f24;
  --g-soft: #f9e3e5;
  --forest: #4f0e1b;
  --forest-deep: #2a0710;
  --body: #58585c;
  --muted: #8b8b8b;
  --line: #e3ded6;
  --fs: 'Schibsted Grotesk', -apple-system, sans-serif;
  --fb: 'Schibsted Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  --fl: 'Schibsted Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  --maxw: 1520px;
  --zgrain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='zng'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.17 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23zng)'/%3E%3C/svg%3E");
  --accent: #a30f24;
  --accent-deep: #8d1425;
  --accent-soft: #f9e3e5;
  --accent-ink: #4f0e1b;
}

/* ============================================================
   Zeal Connect — 2026 homepage stylesheet
   Extracted verbatim from the homepage <style> block so every
   route shares one base layer.
   ============================================================ */

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--g-deep);
  color: #fff;
  padding: 10px 16px;
  z-index: 400;
  border-radius: 0 0 8px 0
}

.skip:focus {
  left: 0
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0
}

html {
  -webkit-text-size-adjust: 100%
}

body {
  background: #fff;
  color: var(--ink);
  -webkit-font-smoothing: antialiased
}

img {
  display: block;
  max-width: 100%
}

a {
  color: inherit;
  text-decoration: none
}

button {
  cursor: pointer;
  border: 0
}

.container {
  max-width: 1520px;
  margin: 0 auto;
  padding: 0 40px
}

.accent {
  color: var(--red)
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--grad);
  color: #fff;
  font-weight: 600;
  font-size: 18px;
  border-radius: 8px;
  padding: 0 27px;
  height: 52px;
  box-shadow: 0 10px 24px -12px rgba(90, 15, 35, .55);
  transition: transform .15s ease, box-shadow .15s ease;
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 28px -12px rgba(90, 15, 35, .6)
}

.btn.big {
  height: 58px;
  padding: 0 28px
}

/* ---- partner logo marquee ---- */
.marquee {
  overflow: hidden;
  margin-top: 50px;
  position: relative
}

.marquee::before,
.marquee::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 80px;
  width: 90px;
  z-index: 2;
  pointer-events: none;
}

.mq-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: mqscroll 32s linear infinite;
  will-change: transform
}

.marquee:hover .mq-track {
  animation-play-state: paused
}

.mq-track img {
  height: 55px;
  width: auto;
  border-radius: 4px;
  margin-right: 66px;
  box-shadow: 0 14px 26px -14px rgba(40, 40, 45, .35)
}

@keyframes mqscroll {
  to {
    transform: translateX(-50%)
  }
}

/* ============ HERO ============ */
.hero {
  background: url(https://www.zealconnect.com/wp-content/uploads/2026/07/hero-bg.png) center top / cover no-repeat #f6f5f4;
  background-image: image-set(url(https://www.zealconnect.com/wp-content/uploads/2026/07/hero-bg.png) 1x, url(https://www.zealconnect.com/wp-content/uploads/2026/07/hero-bg.png) 2x);
  padding: 20px 0 60px;
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 30px;
  font-size: 16px;
  font-weight: 600;
/*   margin-left: auto;
  margin-right: 70px */
}

.nav-links a:hover {
  color: var(--red)
}

@keyframes livepulse {
  50% {
    opacity: .35
  }
}

.nav-cta {
  display: flex;
  align-items: center;
  gap: 14px
}

.hero-inner {
  text-align: center
}

h1 {
  margin-top: 60px;
  font-size: clamp(36px, 4.08vw, 59px);
  font-weight: 700;
  line-height: 1.34;
  letter-spacing: -.01em
}

.hero-sub {
  margin: 33px auto 0;
  font-size: clamp(17px, 1.15vw, 22px);
  line-height: 1.37;
  color: var(--ink)
}

.hero-cta {
  margin-top: 82px;
  display: inline-flex;
  align-items: center;
  gap: 14px
}

.hero-cta .see {
  font-size: 18px;
  font-weight: 600
}

.hero-cta .see:hover {
  color: var(--red)
}

.trusted {
  margin-top: 107px;
  font-size: 25px;
  font-weight: 600;
  text-align: center
}

/* ============ SECTION SHARED ============ */
.sec {
  position: relative;
  overflow: hidden
}

.sec>.container {
  position: relative;
  z-index: 2
}

.deco {
  position: absolute;
  z-index: 1;
  pointer-events: none
}

h2 {
  font-size: clamp(34px, 3.08vw, 59px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.01em;
  text-align: center
}

.sub {
  text-align: center;
  font-size: clamp(16px, 1.15vw, 22px);
  line-height: 1.37;
  color: var(--ink)
}

/* ============ ONE DESK ============ */
.onedesk .deco-l {
  left: -572px;
  top: 336px;
  width: 1058px
}

.onedesk .deco-r {
  right: -381px;
  top: 211px;
  width: 817px
}

.tabs {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 56px;
  margin: 26px auto 0;
  max-width: 952px;
  border-bottom: 1px solid #e3ded6
}

.tab {
  background: none;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-size: 20px;
  font-weight: 600;
  color: #838b87;
  padding: 6px 2px 16px;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  transition: color .2s
}

.tab img {
  height: 22px;
  width: auto;
  opacity: .55;
  transition: opacity .2s
}

.tab:hover {
  color: #4c534f
}

.tab.active {
  color: var(--red);
  border-bottom-color: var(--red)
}

.tab.active img {
  opacity: 1
}

.pane {
  display: none
}

.pane.active {
  display: grid;
  grid-template-columns: minmax(0, 464px) minmax(0, 636px);
  justify-content: space-between;
  align-items: start;
  margin-top: 67px;
  padding: 0 0 0 162px
}

.pane.switched.active {
  animation: panein .45s ease both
}

@keyframes panein {
  from {
    opacity: 0;
    transform: translateY(14px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

.pane-left {
  padding-top: 22px
}

.pane h2 {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.27;
  letter-spacing: -.005em
}

.pane .lede {
  margin-top: 22px;
  font-size: 20px;
  line-height: 1.4;
  color: var(--gray);
  max-width: 390px
}

.flist {
  margin-top: 34px;
  display: flex;
  flex-direction: column;
  gap: 22px
}

.feat {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 20px;
  font-weight: 600
}

.feat img {
  height: 33px;
  width: auto
}

.feat .fic {
  width: 33px;
  height: 33px;
  flex: 0 0 33px;
  border-radius: 9px;
  background: #f9e3e5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--maroon)
}

.feat .fic svg {
  width: 17px;
  height: 17px
}

.pane .btn {
  margin-top: 56px
}

/* ---- inbox mock (pane 1) ---- */
.inbox-mock {
  width: 636px;
  max-width: 100%;
  height: 505px;
  position: relative;
  background: #f3f3f3;
  border-radius: 28px;
  box-shadow: 0 45px 70px -45px rgba(30, 25, 25, .35)
}

.msg-card {
  position: absolute;
  left: 36px;
  top: 88px;
  width: 246px;
  background: #fff;
  border-radius: 14px;
  padding: 18px 18px 20px;
  box-shadow: 0 18px 38px -18px rgba(60, 45, 35, .3);
  animation: bob 5s ease-in-out infinite
}

@keyframes bob {
  50% {
    transform: translateY(-7px)
  }
}

.msg-head {
  display: flex;
  align-items: flex-start;
  gap: 10px
}

.avatar {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, #cfa78f, #b08165);
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center
}

.mname {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  color: #241f1b
}

.wa-pill {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f7ecdd;
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 700;
  color: #8a4a2a;
  white-space: nowrap
}

.wa-pill .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e05c2a;
  animation: livepulse 2s infinite
}

.msg-card p {
  margin-top: 13px;
  font-size: 13.5px;
  line-height: 1.5;
  color: #5d574f
}

.inbox-panel {
  position: absolute;
  right: 32px;
  top: 52px;
  width: 308px;
  height: 400px;
  background: #fff;
  border: 1px solid var(--mock-line);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column
}

.ip-head {
  background: var(--mock-cream);
  border-bottom: 1px solid var(--mock-line);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between
}

.ip-head strong {
  font-size: 13.5px;
  color: #241f1b
}

.ip-icons {
  display: flex;
  gap: 6px
}

.ip-icons span {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: #fff;
  border: 1px solid var(--mock-line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #8a6a55
}

.ip-icons svg {
  width: 12px;
  height: 12px
}

.ip-cols {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr
}

.ip-col {
  padding: 14px;
  border-right: 1px solid #f1ece2
}

.ip-col:last-child {
  border-right: 0
}

.ip-lbl {
  font-size: 13px;
  font-weight: 700;
  color: #8b8b8b;
  display: inline-flex;
  align-items: center;
  gap: 7px
}

.ip-lbl.res {
  color: #a03b2d
}

.badge {
  display: inline-block;
  min-width: 18px;
  text-align: center;
  font-size: 10.5px;
  font-weight: 700;
  background: #eeeceb;
  color: #6b6b6b;
  border-radius: 6px;
  padding: 2px 5px
}

.badge.pink {
  background: #f6e3de;
  color: #a03b2d
}

/* ---- workflow mock (pane 2) ---- */
.wf-mock {
  width: 636px;
  max-width: 100%;
  height: 505px;
  background: #f3f3f3;
  border-radius: 28px;
  padding: 44px 46px;
  box-shadow: 0 45px 70px -45px rgba(30, 25, 25, .35);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px
}

.wf-step {
  background: #fff;
  border: 1px solid var(--mock-line);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 13px;
  position: relative
}

.wf-step .sdot {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  border-radius: 50%;
  background: var(--maroon);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center
}

.wf-step .sdot svg {
  width: 12px;
  height: 12px
}

.wf-step b {
  font-size: 14.5px;
  color: #241f1b
}

.wf-step small {
  display: block;
  font-size: 12.5px;
  color: #8b8478;
  margin-top: 2px
}

.wf-step .tagx {
  margin-left: auto;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  background: #f6dfe0;
  color: #a1273a;
  border-radius: 6px;
  padding: 3px 8px
}

.wf-mock.play .wf-step {
  opacity: 0;
  animation: steprise .5s ease forwards
}

.wf-mock.play .wf-step:nth-child(1) {
  animation-delay: .05s
}

.wf-mock.play .wf-step:nth-child(2) {
  animation-delay: .25s
}

.wf-mock.play .wf-step:nth-child(3) {
  animation-delay: .45s
}

.wf-mock.play .wf-step:nth-child(4) {
  animation-delay: .65s
}

.wf-mock.play .wf-step:nth-child(5) {
  animation-delay: .85s
}

@keyframes steprise {
  from {
    opacity: 0;
    transform: translateY(16px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

/* ---- guardrail mock (pane 3) ---- */
.gr-mock {
  width: 636px;
  max-width: 100%;
  height: 505px;
  background: #f3f3f3;
  border-radius: 28px;
  padding: 44px 46px;
  box-shadow: 0 45px 70px -45px rgba(30, 25, 25, .35);
  display: flex;
  align-items: center;
  justify-content: center
}

.gr-card {
  width: 100%;
  max-width: 430px;
  background: #fff;
  border: 1px solid var(--mock-line);
  border-radius: 14px;
  overflow: hidden
}

.gr-head {
  background: var(--mock-cream);
  border-bottom: 1px solid var(--mock-line);
  padding: 13px 18px;
  display: flex;
  align-items: center;
  gap: 10px
}

.gr-head .sdot {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--maroon);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center
}

.gr-head .sdot svg {
  width: 12px;
  height: 12px
}

.gr-head b {
  font-size: 14.5px;
  color: #241f1b
}

.gr-list {
  list-style: none;
  padding: 8px 18px
}

.gr-list li {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 13.5px;
  color: #4c463e;
  padding: 11px 0;
  border-bottom: 1px dashed #efe7d8
}

.gr-list li:last-child {
  border-bottom: 0
}

.gr-list .tick {
  color: var(--maroon);
  font-weight: 700
}

.gr-foot {
  margin: 6px 18px 18px;
  background: var(--maroon-deep);
  color: #fff;
  border-radius: 9px;
  padding: 11px 15px;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 9px;
  animation: glowbar 3s ease-in-out infinite
}

@keyframes glowbar {
  50% {
    box-shadow: 0 0 22px -4px rgba(141, 20, 37, .55)
  }
}

.gr-mock.play .gr-list li {
  opacity: 0;
  animation: steprise .45s ease forwards
}

.gr-mock.play .gr-list li:nth-child(1) {
  animation-delay: .1s
}

.gr-mock.play .gr-list li:nth-child(2) {
  animation-delay: .3s
}

.gr-mock.play .gr-list li:nth-child(3) {
  animation-delay: .5s
}

.gr-mock.play .gr-list li:nth-child(4) {
  animation-delay: .7s
}

.qdivider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 2px 0 14px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .12em;
  color: #b0b23a;
  white-space: nowrap
}

.qdivider::before,
.qdivider::after {
  content: "";
  height: 1px;
  background: #e3ddce;
  flex: 1
}

.qrun {
  width: 100%;
  background: var(--grad);
  color: #fff;
  font-size: 14.5px;
  font-weight: 600;
  border-radius: 9px;
  padding: 13px;
  transition: transform .15s
}

.qrun:hover {
  transform: translateY(-1px)
}

.qsteps {
  display: flex;
  flex-direction: column;
  gap: 9px
}

.qsteps.play>*:nth-child(1) {
  animation-delay: .05s
}

.qsteps.play>*:nth-child(2) {
  animation-delay: .3s
}

.qsteps.play>*:nth-child(3) {
  animation-delay: .55s
}

.qsteps.play>*:nth-child(4) {
  animation-delay: .8s
}

.qsteps.play>*:nth-child(5) {
  animation-delay: 1.05s
}

.qsteps.play>*:nth-child(6) {
  animation-delay: 1.3s
}

.qsteps.play>*:nth-child(7) {
  animation-delay: 1.55s
}

/* ============ BUILT ============ */
.built .deco-r {
  right: -604px;
  top: -137px;
  width: 1084px
}

.built .deco-l {
  left: -570px;
  top: 478px;
  width: 1098px
}

.built-grid {
  display: grid;
  grid-template-columns: minmax(0, 640px) minmax(0, 618px);
  justify-content: space-between;
  align-items: start;
  padding: 0 53px 0 48px
}

.built-text {
  padding-top: 0
}

.built-text h2 {
  text-align: left;
  line-height: 1.22
}

.built-text p {
  margin-top: 33px;
  font-size: 20px;
  line-height: 1.5;
  color: #333;
  max-width: 640px
}

/* ---- booking card mock ---- */
.bk-mock {
  margin-top: 0;
  width: 618px;
  max-width: 100%;
  background: #f3f3f3;
  border-radius: 26px;
  padding: 34px 36px;
  box-shadow: 0 45px 70px -45px rgba(30, 25, 25, .35)
}

.bk-card {
  background: #fff;
  border: 1px solid var(--mock-line);
  border-radius: 13px;
  overflow: hidden
}

.bk-head {
  background: var(--mock-cream);
  border-bottom: 1px solid var(--mock-line);
  padding: 13px 17px;
  display: flex;
  align-items: center;
  gap: 11px
}

.bk-head .bic {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 9px;
  background: #f4e9e9;
  color: var(--maroon);
  display: inline-flex;
  align-items: center;
  justify-content: center
}

.bk-head .bic svg {
  width: 14px;
  height: 14px
}

.bk-head b {
  font-size: 14.5px;
  color: #241f1b
}

.bk-head small {
  display: block;
  font-size: 12px;
  color: #94897b;
  margin-top: 1px
}

.bk-pill {
  margin-left: auto;
  background: #f5ecd2;
  color: #8a713a;
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
  padding: 5px 12px;
  white-space: nowrap
}

.bk-pill .ell::after {
  content: "";
  animation: ell 1.6s steps(4) infinite
}

@keyframes ell {
  0% {
    content: ""
  }

  25% {
    content: "."
  }

  50% {
    content: ".."
  }

  75% {
    content: "..."
  }
}

.bk-rows {
  list-style: none
}

.bk-rows li {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 11px 17px;
  border-bottom: 1px solid #f3eee4
}

.bk-rows .bic {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border-radius: 9px;
  background: #f7ecec;
  color: #7d3b44;
  display: inline-flex;
  align-items: center;
  justify-content: center
}

.bk-rows .bic svg {
  width: 15px;
  height: 15px
}

.bk-rows .lbl {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  color: #94897b
}

.bk-rows .val {
  font-size: 13.5px;
  color: #241f1b;
  margin-top: 2px
}

.bk-rows .val b {
  font-weight: 700
}

.bk-rows .val span {
  color: #94897b;
  font-weight: 400
}

.bk-rows .rdot {
  margin-left: auto;
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  border-radius: 50%;
  background: var(--maroon);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center
}

.bk-rows .rdot svg {
  width: 7px;
  height: 7px
}

.bk-mock.play .bk-rows .rdot {
  opacity: 0;
  animation: dotpop .4s ease forwards
}

.bk-mock.play .bk-rows li:nth-child(1) .rdot {
  animation-delay: .2s
}

.bk-mock.play .bk-rows li:nth-child(2) .rdot {
  animation-delay: .5s
}

.bk-mock.play .bk-rows li:nth-child(3) .rdot {
  animation-delay: .8s
}

.bk-mock.play .bk-rows li:nth-child(4) .rdot {
  animation-delay: 1.1s
}

.bk-mock.play .bk-rows li:nth-child(5) .rdot {
  animation-delay: 1.4s
}

@keyframes dotpop {
  0% {
    opacity: 0;
    transform: scale(.3)
  }

  70% {
    transform: scale(1.25)
  }

  100% {
    opacity: 1;
    transform: scale(1)
  }
}

.bk-foot {
  background: var(--mock-cream);
  border-top: 1px solid var(--mock-line);
  padding: 12px 17px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  font-weight: 700;
  color: #42403a
}

.bk-foot .bic {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  border-radius: 50%;
  border: 1.3px solid #7d3b44;
  color: #7d3b44;
  display: inline-flex;
  align-items: center;
  justify-content: center
}

.bk-foot .bic svg {
  width: 11px;
  height: 11px
}

.dcard {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 30px 32px;
  box-shadow: 0 40px 60px -40px rgba(20, 10, 10, .15)
}

.dcard .dic {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #f9e6ea;
  color: var(--red);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px
}

.dcard .dic svg {
  width: 20px;
  height: 20px
}

.dcard h3 {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 18px
}

.dcard ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px
}

.dcard li {
  display: flex;
  gap: 12px;
  color: var(--ink-2);
  font-size: 14.5px;
  font-weight: 500
}

.dcard.a li::before {
  content: "✓";
  color: var(--red);
  font-weight: 700
}

.dcard.b li::before {
  content: "→";
  color: var(--red);
  font-weight: 700
}

/* ============ SEGMENTS ============ */
.segments {
  background: var(--band)
}

.segments h2 {
  padding-top: 80px
}

.segments .sub {
  margin: 42px auto 0;
  max-width: 900px
}

.seg-grid {
  display: grid;
  grid-template-columns: repeat(3, 366px);
  gap: 39px 76px;
  justify-content: center;
  margin-top: 94px;
  padding-bottom: 140px
}

.scard {
  background: var(--cream);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 30px 50px -35px rgba(30, 25, 20, .3);
  display: flex;
  flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease
}

.scard:hover {
  transform: translateY(-6px);
  box-shadow: 0 40px 60px -35px rgba(30, 25, 20, .4)
}

.scard>img {
  width: 100%;
  height: 228px;
  object-fit: cover
}

.scard .body {
  padding: 26px 28px 30px
}

.scard .eyebrow {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .13em;
  color: var(--red)
}

.scard h4 {
  margin-top: 14px;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.25;
  color: #241f1b;
  letter-spacing: -.005em
}

.scard p {
  margin-top: 16px;
  font-size: 19px;
  line-height: 1.4;
  color: #6f6a64
}

.scard .explore {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 26px;
  font-size: 19px;
  font-weight: 700;
  color: var(--teal)
}

/* ============ ROI ============ */
.roi .deco-r {
  right: -541px;
  top: -20px;
  width: 1184px
}

.roi .deco-l {
  left: -850px;
  top: 74px;
  width: 1184px
}

.roi-band {
  position: relative;
  border-radius: 40px;
  overflow: hidden;
  background: url(https://www.zealconnect.com/wp-content/uploads/2026/07/planet-band.jpg) center / cover no-repeat #0b0705;
  color: #fff;
  height: 530px
}

.roi-band h2 {
  padding-top: 41px;
  color: #fff
}

.roi-stats {
  position: absolute;
  left: 0;
  right: 0;
  top: 221px
}

/* .stat {
  position: absolute;
  transform: translateX(-50%);
  text-align: center;
  white-space: nowrap
} */

.stat .num {
  font-size: 59px;
  font-weight: 700;
  line-height: 1
}

.stat .lbl {
  margin-top: 29px;
  font-size: 20px;
  line-height: 1.33;
  white-space: pre-line
}

.stat:nth-child(1) {
  left: 12.5%
}

.stat:nth-child(2) {
  left: 34.7%
}

.stat:nth-child(3) {
  left: 59.2%
}

.stat:nth-child(4) {
  left: 84.9%
}

.proof {
  padding: 74px 0 0
}

.prow {
  display: grid;
  grid-template-columns: 246px 1fr;
  gap: 50px;
  align-items: center;
  padding: 24px 0 24px 280px
}

.prow .plogo {
  display: flex;
  justify-content: center
}

.prow .plogo img {
  width: auto
}

.prow.r1 .plogo img {
  height: 56px
}

.prow.r2 .plogo img {
  height: 82px
}

.prow.r3 .plogo img {
  height: 56px
}

.prow .statline {
  display: flex;
  align-items: baseline;
  gap: 36px
}

.prow .n {
  font-size: 59px;
  font-weight: 700;
  letter-spacing: -.01em
}

.prow .t {
  font-size: 30px;
  color: var(--ink)
}

/* ============ FOOTER ============ */
footer {
  background: url(https://www.zealconnect.com/wp-content/uploads/2026/08/footer-bg.png) center / cover no-repeat #f5f5f5;
  padding: 66px 0
}

.fgrid {
  display: grid;
  grid-template-columns: repeat(5,minmax(0,1fr));
  align-items: start
}

.fbrand img {
  height: 50px;
  width: auto
}

.fbrand .loc {
  margin-top: 0;
  font-size: 16px;
  color: #1a1a1a
}

/* .fcol {
  padding-top: 28px
} */

.fcol h5 {
  font-size: 22px;
  font-weight: 700;
  margin: 0
}

.fcol ul {
  list-style: none;
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px
}

.fcol li a {
  font-size: 15px;
  color: #1a1a1a;
  white-space: nowrap
}

.fcol li a:hover {
  color: var(--red)
}

.socials {
  margin-top: 28px;
  display: flex;
  gap: 15px
}

.socials a {
  color: var(--red);
  display: inline-flex
}

.socials svg {
  width: 24px;
  height: 24px
}

@media (max-width:1500px) {
  .pane.active {
    padding-left: 80px;
    padding-right: 0
  }

  .prow {
    padding-left: 80px
  }

  .sub br {
    display: none
  }

  .built-grid {
    padding-left: 24px
  }

  .seg-grid {
    grid-template-columns: repeat(3, minmax(280px, 366px))
  }

  .fgrid {
    grid-template-columns: repeat(5,minmax(0,1fr));
    gap: 24px
  }
}

@media (max-width:1180px) {
  .nav-links {
    display: none
  }

  .prow {
    padding-left: 0
  }

  .hero-sub br {
    display: none
  }

  .pane.active {
    grid-template-columns: 1fr;
    padding-left: 0;
    gap: 56px
  }

  .inbox-mock,
  .wf-mock,
  .gr-mock {
    width: 100%
  }

  .built-grid {
    grid-template-columns: 1fr;
    padding-left: 0;
    gap: 40px
  }

  .built-text {
    padding-top: 30px
  }

  .bk-mock {
    margin-top: 0
  }

  .seg-grid {
    grid-template-columns: repeat(2, minmax(280px, 366px))
  }

  .roi-band {
    height: auto;
    padding-bottom: 60px
  }

  .roi-band h2 {
    padding: 48px 24px 0
  }

  .roi-stats {
    position: static;
    margin-top: 48px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 48px 64px
  }

  .stat {
    position: static;
    transform: none
  }

  .deco {
    display: none
  }

  .fgrid {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .fbrand {
    grid-column: 1/-1
  }
}

@media (max-width:720px) {
  .container {
    padding: 0 22px
  }

  .hero {
    padding-top: 28px
  }

  .btn {
    font-size: 16px;
    height: 46px;
    padding: 0 20px
  }

  h1 {
    margin-top: 70px
  }

  .hero-cta {
    margin-top: 48px
  }

  .trusted {
    margin-top: 64px;
    font-size: 19px
  }

  .tabs {
    gap: 24px;
    overflow-x: auto;
    justify-content: flex-start
  }

  .tab {
    font-size: 16px;
    white-space: nowrap
  }

  .pane h3 {
    font-size: 24px
  }

  .feat {
    font-size: 17px
  }

  .inbox-mock {
    height: auto;
    padding: 22px
  }

  .msg-card {
    position: static;
    width: 100%;
    margin-bottom: 16px
  }

  .inbox-panel {
    position: static;
    width: 100%;
    height: 320px
  }

  .wf-mock,
  .gr-mock {
    height: auto;
    padding: 26px 22px
  }

  .stat .num {
    font-size: 44px
  }

  .stat .lbl {
    font-size: 22px;
    margin-top: 16px
  }

  .seg-grid {
    grid-template-columns: minmax(0, 366px)
  }

  .prow {
    grid-template-columns: 1fr;
    gap: 18px;
    justify-items: center;
    text-align: center
  }

  .prow .statline {
    flex-direction: column;
    align-items: center;
    gap: 8px
  }

  .prow .n {
    font-size: 44px
  }

  .prow .t {
    font-size: 18px
  }

  .fcol ul {
    margin-top: 20px;
    gap: 16px
  }

  .fbrand img {
    height: 52px
  }

  .fbrand .loc {
    font-size: 22px
  }
}

/* ============================================================
   Zeal Connect — 2026 homepage palette (single source of truth)
   Values mirror the new zealconnect.com homepage:
   red #a30f24 · maroon #8d1425 · maroon-deep #4f0e1b · teal #1d5a52
   green #197d33 · ink #000 · gray #58585c · band #f6f6f6 · cream #fefdf8
   ============================================================ */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%
}

body {
  font-family: var(--fb);
  color: var(--body);
  background: var(--surface);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden
}

a {
  color: inherit;
  text-decoration: none
}

img,
svg {
  display: block;
  max-width: 100%
}

main,
#main {
  overflow-x: clip
}

::selection {
  background: var(--g-deep);
  color: #fff
}

.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 36px
}

/* type helpers */
.eyebrow {
  font-family: var(--fl);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--g-mid)
}

.h1 {
  font-family: var(--fs);
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -.022em;
  line-height: 1.04;
  font-size: clamp(2.6rem, 5.6vw, 4.7rem)
}

.h2 {
  font-family: var(--fs);
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -.022em;
  line-height: 1.06;
  font-size: clamp(2rem, 4.3vw, 3.2rem)
}

.h3 {
  font-family: var(--fs);
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -.018em;
  line-height: 1.12;
  font-size: clamp(1.4rem, 2.6vw, 2rem)
}

.em {
  color: var(--g-mid)
}

.lede {
  font-size: 1.12rem;
  color: var(--body);
  line-height: 1.55;
  max-width: 60ch
}

.dark .h1,
.dark .h2,
.dark .h3 {
  color: #fff
}

.dark .lede {
  color: #e0d0c9
}

/* buttons */
.btn {
  font-family: var(--fl);
  font-weight: 600;
  font-size: 15px;
  border-radius: 999px;
  padding: 13px 26px;
  border: 1.6px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  transition: transform .18s, box-shadow .25s, background .2s, color .2s, border-color .2s;
  white-space: nowrap
}

.btn .ar {
  transition: transform .2s
}

.btn:hover .ar {
  transform: translateX(3px)
}

.btn-lg {
  padding: 16px 32px;
  font-size: 16.5px
}

.btn-dark {
  background: var(--g-deep);
  color: #fff
}

.btn-dark:hover {
  background: #3d0a15;
  transform: translateY(-2px);
  box-shadow: 0 16px 34px -14px rgba(79, 14, 27, .5)
}

.btn-out {
  background: transparent;
  color: var(--g-deep);
  border-color: rgba(79, 14, 27, .28)
}

.btn-out:hover {
  background: rgba(79, 14, 27, .05);
  border-color: var(--g-deep);
  transform: translateY(-2px)
}

.btn-white {
  background: #fff;
  color: var(--g-deep)
}

.btn-white:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px -14px rgba(0, 0, 0, .35)
}

.dark .btn-out {
  color: #fff;
  border-color: rgba(255, 255, 255, .4)
}

.dark .btn-out:hover {
  background: rgba(255, 255, 255, .1);
  border-color: #fff
}

.tlink {
  font-family: var(--red);
  font-weight: 600;
  font-size: 15px;
  color: var(--g-deep);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-bottom: 1.5px solid rgba(79, 14, 27, .25);
  padding-bottom: 2px
}

.tlink:hover {
  border-color: var(--accent-ink)
}

.tlink .ar {
  transition: transform .2s
}

.tlink:hover .ar {
  transform: translateX(3px)
}

.dark .tlink {
  color: #fff;
  border-color: rgba(255, 255, 255, .35)
}

/* ============ NAV ============ */
header.nav {
  position: sticky;
  top: 0;
  z-index: 200;
  background: linear-gradient(180deg, rgba(251, 243, 233, .97), rgba(245, 234, 219, .95));
  backdrop-filter: saturate(150%) blur(12px);
  -webkit-backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid #E7DAC6;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .55) inset, 0 8px 26px -20px rgba(79, 14, 27, .32);
  transition: box-shadow .3s, background .3s
}

header.nav::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--grad)
}

header.nav.solid {
  box-shadow: 0 1px 0 rgba(255, 255, 255, .55) inset, 0 16px 36px -22px rgba(79, 14, 27, .42)
}

.nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: 74px
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: var(--fl);
  font-weight: 700;
  color: var(--g-deep);
  font-size: 20px;
  letter-spacing: -.01em;
/*   margin-right: 12px */
}

/* .nav-links {
  display: flex;
  align-items: center;
  gap: 2px
} */

.nav-item {
  position: relative
}

.nav-link {
  font-family: var(--fl);
  font-weight: 500;
  font-size: 15.5px;
  color: var(--ink);
  padding: 9px 14px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color .18s, background .18s;
  cursor: pointer
}

.nav-link:hover,
.nav-item:hover .nav-link,
.nav-link.active {
  color: var(--g-deep);
  background: rgba(79, 14, 27, .05)
}

.nav-link .cv {
  width: 13px;
  height: 13px;
  opacity: .55;
  transition: transform .25s
}

.nav-item:hover .nav-link .cv {
  transform: rotate(180deg)
}

.mega {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 300px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 30px 70px -30px rgba(79, 14, 27, .4);
  padding: 12px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .2s, transform .2s, visibility .2s;
  z-index: 50
}

.nav-item:hover .mega,
.nav-item:focus-within .mega {
  opacity: 1;
  visibility: visible;
  transform: none
}

.mega::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  height: 14px
}

.mega-link {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  padding: 13px 14px;
  border-radius: 13px;
  transition: background .18s
}

.mega-link:hover {
  background: var(--g-soft)
}

.mega-ic {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--g-soft);
  color: var(--g-deep);
  display: grid;
  place-items: center;
  flex: none
}

.mega-link:hover .mega-ic {
  background: #fff
}

.mega-tt {
  display: block;
  font-family: var(--fl);
  font-weight: 600;
  font-size: 15px;
  color: var(--ink)
}

.mega-ds {
  display: block;
  font-size: 13px;
  color: var(--muted);
  margin-top: 4px;
  line-height: 1.45
}

.mega-lbl {
  font-family: var(--fl);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 8px 14px 4px
}

.nav-cta {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px
}

.nav-signin {
  font-family: var(--fl);
  font-weight: 600;
  font-size: 15px;
  color: var(--body);
  padding: 9px 12px
}

.nav-signin:hover {
  color: var(--g-deep)
}

.menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--line);
  border-radius: 9px;
  width: 44px;
  height: 44px;
  cursor: pointer
}

.menu-btn span,
.menu-btn span::before,
.menu-btn span::after {
  content: "";
  display: block;
  width: 18px;
  height: 2px;
  background: var(--g-deep);
  margin: 0 auto;
  position: relative;
  transition: .3s
}

.menu-btn span::before {
  position: absolute;
  top: -6px
}

.menu-btn span::after {
  position: absolute;
  top: 6px
}

.mpanel {
  display: none
}

/* ============ HERO + animated bursts ============ */
.hero {
  position: relative;
  text-align: center;
  padding: 104px 0 96px;
  overflow: hidden
}

.hero.sub {
  padding: 96px 0 76px
}

.burst {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  transform: translate(var(--px, 0), var(--py, 0));
  transition: transform .8s cubic-bezier(.16, 1, .3, 1)
}

.burst .bi {
  width: 100%;
  height: 100%;
  animation: breathe 17s ease-in-out infinite
}

.burst svg {
  width: 100%;
  height: 100%
}

.burst .rot {
  transform-origin: 200px 200px;
  animation: spin 150s linear infinite
}

.burst.rev .rot {
  animation: spinr 120s linear infinite
}

.burst.b1 {
  top: 24px;
  left: -150px;
  width: 460px;
  height: 460px;
  color: #B79AA0
}

.burst.b2 {
  top: 70px;
  right: -170px;
  width: 520px;
  height: 520px;
  color: #9BB1C2
}

@keyframes spin {
  to {
    transform: rotate(360deg)
  }
}

@keyframes spinr {
  to {
    transform: rotate(-360deg)
  }
}

@keyframes breathe {

  0%,
  100% {
    transform: scale(1)
  }

  50% {
    transform: scale(1.05)
  }
}

.hero .inner {
  position: relative;
  z-index: 1;
  max-width: 1000px;
  margin: 0 auto
}

.heyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--fl);
  font-weight: 600;
  font-size: 13px;
  color: var(--g-deep);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 16px
}

.heyebrow .sp {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--spring);
  box-shadow: 0 0 0 4px rgba(163, 15, 36, .18);
  animation: pulse 2.4s infinite
}

@keyframes pulse {

  0%,
  100% {
    box-shadow: 0 0 0 4px rgba(163, 15, 36, .18)
  }

  50% {
    box-shadow: 0 0 0 7px rgba(163, 15, 36, .06)
  }
}

.hero h1 {
  margin-top: 24px
}

.hero .sub-txt {
  font-size: clamp(1.08rem, 1.6vw, 1.3rem);
  color: var(--body);
  max-width: 56ch;
  margin: 24px auto 0;
  line-height: 1.55
}

.hero .actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  align-items: center;
  margin-top: 38px;
  flex-wrap: wrap
}

.hero .chips {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 30px
}

/* ============ MARQUEE ============ */
.logos {
  background: var(--band);
  padding: 38px 0 42px;
  text-align: center;
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line)
}

.logos .ll {
  font-family: var(--fl);
  font-size: 14px;
  color: #8a8372;
  margin-bottom: 26px
}

.marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent)
}

.mtrack {
  display: flex;
  align-items: center;
  gap: 30px;
  width: max-content;
  animation: scrollx 34s linear infinite
}

.logos:hover .mtrack {
  animation-play-state: paused
}

@keyframes scrollx {
  to {
    transform: translateX(-50%)
  }
}

.lmk {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 196px;
  height: 84px;
  flex: none;
  padding: 0 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 10px 26px -18px rgba(0, 0, 0, .22)
}

.lmk img {
  width: auto;
  height: 34px;
  max-width: 152px;
  object-fit: contain
}

.lmk img[alt="Akbar Travels"] {
  height: 30px
}

.lmk img[alt="Nava Travel"] {
  height: 30px
}

.lmk img[alt="Go Global Travel"] {
  height: 30px
}

.lmk img[alt="MWR Life"] {
  height: 30px
}

.lmk img[alt="TravClan"] {
  height: 30px
}

.lmk img[alt="Eastern Travels"] {
  height: 33px
}

.lmk img[alt="Custom Travel Solutions"] {
  height: 33px
}

.lmk img[alt="Uniglobe Travel"] {
  height: 34px
}

.lmk img[alt="PeakPoint Global"] {
  height: 36px
}

.lmk img[alt="Eturia"] {
  height: 54px
}

.lmk img[alt="TailorBeds"] {
  height: 60px
}

.lmk img[alt="Maral Tourismo"] {
  height: 60px
}

.lmk b {
  font-weight: 700;
  color: #7d7768
}

/* ============ FOOTER ============ */
footer.ft {
  background: #E8EDEA;
  color: #2A332F;
  padding: 72px 0 36px;
  border-top: 1px solid rgba(30, 45, 40, .1)
}

/* terracotta = the shipping Zeal Connect brand (matches :root above) */

/* warm = the shipping surface set: white sections, #f6f6f6 bands (matches :root) */


html[data-font]:not([data-font="editorial"]) .h1,
html[data-font]:not([data-font="editorial"]) .h2,
html[data-font]:not([data-font="editorial"]) .h3 {
  font-weight: 600;
  letter-spacing: -.025em
}

html[data-cta="gradient"] .btn-dark {
  background: var(--grad) !important;
  color: #fff !important;
  border-color: transparent !important
}

html[data-cta="gradient"] .btn-dark:hover {
  background: var(--grad-hover) !important;
  color: #fff !important
}

/* ===== Section texture system (task 2) ===== */

.sec-dark,
.ctaX-left,
footer.ft {
  position: relative
}

html[data-texture="rings"] .sec-dark {
  background-image: repeating-radial-gradient(circle at 82% 22%, rgba(255, 255, 255, .13) 0 1.5px, transparent 1.5px 30px), linear-gradient(160deg, var(--forest), var(--forest-deep))
}

html[data-texture="rings"] .ctaX-left {
  background-image: repeating-radial-gradient(circle at 82% 22%, rgba(255, 255, 255, .14) 0 1.5px, transparent 1.5px 28px), linear-gradient(160deg, var(--g), var(--g-deep))
}

html[data-texture="rings"] footer.ft {
  background-image: repeating-radial-gradient(circle at 92% 34%, rgba(255, 255, 255, .12) 0 1.5px, transparent 1.5px 32px)
}

html[data-texture="rings"] .pillar.dark,
html[data-texture="rings"] .quote {
  background-image: repeating-radial-gradient(circle at 82% 22%, rgba(255, 255, 255, .13) 0 1.5px, transparent 1.5px 30px), linear-gradient(158deg, var(--g), var(--g-deep))
}

html[data-texture="rings"] .seg-out {
  background-image: repeating-radial-gradient(circle at 82% 22%, rgba(255, 255, 255, .13) 0 1.5px, transparent 1.5px 30px), linear-gradient(160deg, var(--g-mid), var(--g-deep))
}

html[data-texture="rings"] .intgrid {
  background-image: repeating-radial-gradient(circle at 82% 22%, rgba(255, 255, 255, .13) 0 1.5px, transparent 1.5px 30px), linear-gradient(165deg, var(--forest), var(--forest-deep))
}

/* ===== text CTAs sitewide — teal on light, pale pink on dark ===== */
.tlink,
.blog-read {
  color: var(--red) !important;
  font-weight: 700 !important
}

.tlink {
  border-bottom-color: var(--red) !important;
  border-bottom-width: 2px !important
}

.tlink:hover {
  border-bottom-color: var(--red) !important
}

.dark .tlink,
.sec-dark .tlink,
.ctaX-left .tlink,
.blog-feat .blog-read {
  color: #f6dfe0 !important;
  border-bottom-color: rgba(246, 223, 224, .55) !important
}

.btn-white {
  background: #fff !important;
  color: var(--maroon-deep) !important;
  border-color: transparent !important
}

.btn-white:hover {
  background: #f9e3e5 !important;
  color: var(--maroon-deep) !important
}

.btn-out {
  color: var(--maroon) !important;
  border-color: rgba(141, 20, 37, .4) !important
}

.btn-out:hover {
  background: rgba(141, 20, 37, .07) !important;
  border-color: var(--maroon) !important
}

.dark .btn-out,
.sec-dark .btn-out,
.ctaX-left .btn-out {
  color: #f6dfe0 !important;
  border-color: rgba(246, 223, 224, .5) !important
}

.tad-run,
.tad-dcta {
  background: var(--grad) !important;
  color: #fff !important
}

.faq-sub a {
  color: var(--red) !important
}

/* sitewide alternating section backgrounds for contrast */
.ztone-cream {
  background: var(--surface) !important
}

.ztone-white {
  background: #fff !important
}

/* ============ SECTION SHELL ============ */
.route {
  display: none
}

.route.active {
  display: block
}

.sec {
  padding: 104px 0
}

.sec-cream {
  background: var(--surface)
}

.sec-band {
  background: var(--deep)
}

.sec-white {
  background: #fff
}

.sec-dark {
  background: linear-gradient(160deg, var(--forest), var(--forest-deep));
  color: #fff
}

.center {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 52px
}

.center .lede {
  margin-left: auto;
  margin-right: auto
}

/* consistent gap between a heading and its sub-headline, site-wide */
.h1+.lede,
.h2+.lede,
.h3+.lede {
  margin-top: 18px
}

.sec-head {
    max-width: 780px;
    margin: 0 auto 50px;
    text-align: center;
}

/* problem row (Front) */
.prob-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px
}

.pcard {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 32px;
  transition: transform .25s, box-shadow .25s
}

.pcard:hover {
  transform: translateY(-4px);
  box-shadow: 0 28px 54px -32px rgba(79, 14, 27, .3)
}

.pcard .pi {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--deep);
  color: var(--g-deep);
  display: grid;
  place-items: center;
  margin-bottom: 18px
}

.pcard h4 {
  font-family: var(--fl);
  font-weight: 600;
  font-size: 1.18rem;
  color: var(--ink);
  letter-spacing: -.01em
}

.pcard p {
  font-size: .98rem;
  color: var(--body);
  margin-top: 9px;
  line-height: 1.5
}

/* feature blocks (Hiver alternating) */
.fblock {
  display: grid;
  grid-template-columns: 1fr 1.08fr;
  gap: 64px;
  align-items: center;
  padding: 56px 0
}

.fblock.rev .ftext {
  order: 2
}

.fblock h2 {
  margin-top: 14px
}

.fpoints {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 22px
}

.fpoint {
  display: flex;
  gap: 15px;
  align-items: flex-start
}

.fpoint .fi {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--g-soft);
  color: var(--g-deep);
  display: grid;
  place-items: center;
  flex: none
}

.fpoint h4 {
  font-family: var(--fl);
  font-weight: 600;
  font-size: 1.08rem;
  color: var(--ink)
}

.fpoint p {
  font-size: .97rem;
  color: var(--body);
  margin-top: 4px;
  line-height: 1.5
}

/* mockups */
.mock-stage {
  position: relative;
  border-radius: 24px;
  padding: 30px;
  overflow: hidden;
  background: var(--grad);
  min-height: 430px;
  display: grid;
  place-items: center
}

.mock-stage.green {
  background: linear-gradient(150deg, var(--forest), var(--g-deep))
}

.mock-stage.dawn {
  background: var(--grad)
}

.mock {
  width: 100%;
  max-width: 430px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .5);
  padding: 18px;
  font-family: var(--fl)
}

.mk-h {
  display: flex;
  align-items: center;
  gap: 9px;
  padding-bottom: 13px;
  border-bottom: 1px solid #EFEAD9;
  margin-bottom: 13px
}

.mk-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--spring)
}

.mk-t {
  font-weight: 600;
  font-size: 13.5px;
  color: var(--ink)
}

.mk-live {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  color: var(--g-mid);
  display: inline-flex;
  align-items: center;
  gap: 5px
}

.mk-live::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--spring)
}

.mk-step {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid #F4EFE2
}

.mk-step:last-child {
  border-bottom: none
}

.mk-num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--g-soft);
  color: var(--g-deep);
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
  flex: none
}

.mk-sl {
  font-size: 13px;
  color: var(--ink);
  font-weight: 600
}

.mk-sl small {
  display: block;
  font-weight: 500;
  color: var(--muted);
  font-size: 11.5px;
  margin-top: 1px
}

.mk-ic {
  margin-left: auto;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: var(--g-soft);
  color: var(--g-mid);
  flex: none
}

.mk-chip {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  border-radius: 999px;
  padding: 5px 11px;
  background: var(--g-soft);
  color: var(--g-deep);
  margin: 3px 4px 0 0
}

.mk-bubble {
  background: var(--g-soft);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 13px;
  color: #44352e;
  line-height: 1.45;
  margin-top: 10px
}

.mk-row {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
  color: var(--body);
  padding: 8px 0
}

.mk-tick {
  color: var(--g-mid);
  font-weight: 700;
  margin-left: auto
}

/* flow mock */
.mk-flow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px
}

.flow-node {
  width: 100%;
  border: 1.5px solid var(--g-soft);
  border-radius: 12px;
  padding: 11px 13px;
  font-size: 12.5px;
  color: var(--ink);
  background: #fff;
  text-align: center;
  font-weight: 600
}

.flow-node.ai {
  border-color: #e0c9bf;
  background: linear-gradient(#fff, #fbf6f4)
}

.flow-node.cond {
  border-color: #f3d9cb;
  background: #fdf6f1;
  color: #9A4528
}

.flow-line {
  width: 2px;
  height: 14px;
  background: var(--line)
}

.flow-split {
  display: flex;
  gap: 12px;
  width: 100%
}

.flow-split .flow-node {
  flex: 1;
  font-size: 11.5px;
  padding: 9px
}

/* tabbed platform (Hiver) */
.tabwrap {
  margin-top: 46px
}

.tabbtns {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
  padding-bottom: 0;
  margin-bottom: 34px
}

.tabbtn {
  font-family: var(--fl);
  font-weight: 600;
  font-size: 15px;
  color: var(--muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 14px 18px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color .2s, border-color .2s;
  margin-bottom: -1px
}

.tabbtn .ti {
  width: 18px;
  height: 18px;
  opacity: .7
}

.tabbtn.on {
  color: var(--g-deep);
  border-color: var(--g-deep)
}

.tabpanel {
  display: none;
  animation: fade .4s ease
}

.tabpanel.on {
  display: block
}

@keyframes fade {
  from {
    opacity: 0;
    transform: translateY(8px)
  }

  to {
    opacity: 1
  }
}

.tabpanel .mock-stage {
  min-height: 400px
}

/* enterprise pillars (Pylon) */
.pillars {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px
}

.pillar {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 36px
}

.pillar.dark {
  background: linear-gradient(158deg, var(--maroon-deep), #2a0710);
  color: #fff;
  border-color: transparent
}

.pillar .pi {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--g-soft);
  color: var(--g-deep);
  display: grid;
  place-items: center;
  margin-bottom: 20px
}

.pillar.dark .pi {
  background: rgba(255, 255, 255, .14);
  color: #fff
}

.pillar h3 {
  font-family: var(--fl);
  font-weight: 600;
  font-size: 1.3rem;
  color: var(--ink);
  letter-spacing: -.01em
}

.pillar.dark h3 {
  color: #fff
}

.pillar p {
  font-size: 1rem;
  color: var(--body);
  margin-top: 10px;
  line-height: 1.5
}

.pillar.dark p {
  color: #cfe7df
}

.plist {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 11px
}

.plist div {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: .95rem;
  color: var(--body)
}

.pillar.dark .plist div {
  color: #dcece6
}

.plist .pk {
  color: var(--g-mid);
  font-weight: 700;
  flex: none
}

.pillar.dark .plist .pk {
  color: #f6dfe0
}

/* stats */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  text-align: center;
  background: #FFFDF8;
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 40px 24px
}

.dark .stats {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .12)
}

.stat .nb {
  font-family: var(--fs);
  font-weight: 500;
  font-size: clamp(2.2rem, 3.8vw, 3.1rem);
  color: var(--ink);
  letter-spacing: -.02em
}

.dark .stat .nb {
  color: #fff
}

.stat .nb .sx {
  color: var(--g-mid)
}

.dark .stat .nb .sx {
  color: var(--spring)
}

.stat .nl {
  font-family: var(--fl);
  font-size: 14px;
  color: var(--muted);
  margin-top: 7px
}

.dark .stat .nl {
  color: #c8b2a9
}

.pnote {
  font-family: var(--fl);
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 14px
}

.dark .pnote {
  color: #a58a7f
}

/* agents */
.agents {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 8px
}

.agent {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 26px;
  transition: transform .25s, box-shadow .25s
}

.agent:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 46px -28px rgba(163, 15, 36, .35)
}

.agent .ai {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: var(--g-soft);
  color: var(--g-mid);
  display: grid;
  place-items: center;
  margin-bottom: 15px
}

.agent h4 {
  font-family: var(--fl);
  font-weight: 600;
  font-size: 1.12rem;
  color: var(--ink)
}

.agent p {
  font-size: .95rem;
  color: var(--body);
  margin-top: 7px;
  line-height: 1.5
}

.agent.bridge {
  grid-column: 1/-1;
  background: linear-gradient(120deg, var(--g-soft), #fff 70%);
  display: flex;
  gap: 16px;
  align-items: flex-start
}

.agent.bridge .ai {
  flex: none;
  margin-bottom: 0;
  background: #fff
}

@media(max-width:860px) {
  .agents {
    grid-template-columns: repeat(2, 1fr)
  }
}

@media(max-width:520px) {
  .agents {
    grid-template-columns: 1fr
  }
}

/* segment switcher */
.seg-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start
}

.seg-tabs {
  display: flex;
  flex-direction: column;
  gap: 10px
}

.seg-tab {
  text-align: left;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 17px 20px;
  cursor: pointer;
  font-family: inherit;
  transition: border-color .25s, box-shadow .25s
}

.seg-tab:hover {
  border-color: #ddd0cb
}

.seg-tab .lab {
  display: inline-flex;
  font-family: var(--fl);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--deep);
  border-radius: 999px;
  padding: 5px 11px;
  transition: background .25s, color .25s
}

.seg-tab .hd {
  display: block;
  font-family: var(--fl);
  font-weight: 600;
  font-size: 1.04rem;
  color: var(--ink);
  margin-top: 11px;
  line-height: 1.3
}

.seg-tab .body {
  display: block;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height .35s, opacity .3s
}

.seg-tab .chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding-top: 13px
}

.seg-chip {
  font-family: var(--fl);
  font-weight: 500;
  font-size: 12px;
  color: var(--body);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 11px
}

.seg-tab.active {
  border-color: var(--g-mid);
  box-shadow: 0 18px 40px -22px rgba(163, 15, 36, .4)
}

.seg-tab.active .lab {
  background: var(--g-soft);
  color: var(--g-deep)
}

.seg-tab.active .body {
  max-height: 240px;
  opacity: 1
}

.seg-out {
  position: sticky;
  top: 96px;
  border-radius: 24px;
  padding: 38px;
  color: #fff;
  background: linear-gradient(160deg, var(--g-mid), var(--g-deep));
  overflow: hidden;
  min-height: 340px;
  display: flex;
  flex-direction: column
}

.seg-out::before {
  content: "";
  position: absolute;
  top: -25%;
  right: -20%;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .18), transparent 70%)
}

.so-seg {
  position: relative;
  align-self: flex-start;
  font-family: var(--fl);
  font-weight: 700;
  font-size: 12px;
  color: #fff;
  background: rgba(255, 255, 255, .18);
  border-radius: 999px;
  padding: 7px 14px;
  margin-bottom: auto
}

.so-eye {
  position: relative;
  font-family: var(--fl);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #d9b09e;
  margin-top: 26px
}

.so-big {
  position: relative;
  font-family: var(--fs);
  font-weight: 500;
  font-size: clamp(2.1rem, 3.8vw, 3rem);
  letter-spacing: -.025em;
  line-height: 1.05;
  margin-top: 8px
}

.so-sub {
  position: relative;
  font-size: 1.02rem;
  color: #edded7;
  margin-top: 10px;
  line-height: 1.45
}

/* comparison */
.cmp {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 40px;
  box-shadow: 0 36px 80px -52px rgba(79, 14, 27, .3)
}

.cmp h3 {
  margin-bottom: 24px
}

.cmp-head {
  display: grid;
  grid-template-columns: 1fr 120px 120px;
  gap: 10px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--g-soft);
  font-family: var(--fl);
  font-weight: 700;
  font-size: 13px
}

.cmp-head .zc {
  color: var(--g-deep);
  text-align: center
}

.cmp-head .gc {
  color: var(--muted);
  text-align: center;
  font-weight: 600
}

.cmp-tr {
  display: grid;
  grid-template-columns: 1fr 120px 120px;
  gap: 10px;
  align-items: center;
  padding: 13px 0;
  border-bottom: 1px solid #F0EBDD;
  font-size: 14.5px;
  color: var(--ink)
}

.cmp-tr:last-child {
  border-bottom: none
}

.zc-c,
.gc-c {
  text-align: center
}

.ck {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--g-soft);
  color: var(--g-mid);
  font-weight: 700;
  font-size: 13px
}

.ck svg {
  width: 13px;
  height: 13px;
  display: block
}

.gc-c {
  color: #C9C2B0;
  font-weight: 600
}

/* quote */
.quote {
  background: linear-gradient(158deg, var(--g), var(--g-deep));
  color: #fff;
  border-radius: 26px;
  padding: 54px
}

.quote .stars {
  color: #f0a07d;
  letter-spacing: 3px;
  margin-bottom: 20px
}

.quote blockquote {
  font-family: var(--fs);
  font-weight: 400;
  font-size: clamp(1.3rem, 2.4vw, 1.9rem);
  line-height: 1.4;
  letter-spacing: -.01em
}

.quote .who {
  margin-top: 26px;
  font-family: var(--fl)
}

.quote .who b {
  font-weight: 600
}

.quote .who span {
  display: block;
  color: #e0c9bf;
  font-size: .92rem;
  margin-top: 3px
}

/* faq */
.faq-wrap {
  max-width: 780px;
  margin: 0 auto
}

.faq-item {
  border-bottom: 1px solid var(--line)
}

.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: none;
  border: none;
  text-align: left;
  font-family: var(--fl);
  font-weight: 600;
  font-size: 1.08rem;
  color: var(--ink);
  padding: 22px 4px;
  cursor: pointer
}

.faq-q .ic {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1.5px solid var(--g-deep);
  position: relative
}

.faq-q .ic::before,
.faq-q .ic::after {
  content: "";
  position: absolute;
  background: var(--g-deep);
  top: 50%;
  left: 50%;
  transition: .3s
}

.faq-q .ic::before {
  width: 10px;
  height: 1.6px;
  transform: translate(-50%, -50%)
}

.faq-q .ic::after {
  width: 1.6px;
  height: 10px;
  transform: translate(-50%, -50%)
}

.faq-item.open .ic {
  background: var(--g-deep)
}

.faq-item.open .ic::before {
  background: #fff
}

.faq-item.open .ic::after {
  opacity: 0
}

.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s ease
}

.faq-a .in {
  padding: 0 4px 24px;
  font-size: 1rem;
  color: var(--body);
  max-width: 66ch
}

.cta h2 {
  position: relative;
  color: #fff
}

.cta p {
  position: relative;
  color: #c8b2a9;
  font-size: 1.08rem;
  margin-top: 14px
}

.cta .actions {
  position: relative;
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-top: 32px;
  flex-wrap: wrap
}

/* segment page pains */
.pains {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px
}

.pain {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 28px
}

.pain .pn {
  font-family: var(--fs);
  font-size: 1.6rem;
  color: var(--g-soft);
  font-weight: 600
}

.pain h4 {
  font-family: var(--fl);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--ink);
  margin-top: 6px
}

.handle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 8px
}

.hrow {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 20px
}

.hrow .hk {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--g-soft);
  color: var(--g-mid);
  display: grid;
  place-items: center;
  flex: none;
  font-weight: 700
}

.hrow p {
  font-size: .97rem;
  color: var(--ink);
  font-weight: 500
}

/* reveal */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s cubic-bezier(.16, 1, .3, 1), transform .7s cubic-bezier(.16, 1, .3, 1)
}

.reveal.in {
  opacity: 1;
  transform: none
}

.reveal.d1 {
  transition-delay: .07s
}

.reveal.d2 {
  transition-delay: .14s
}

.reveal.d3 {
  transition-delay: .21s
}

@media(max-width:1000px) {
  .fblock {
    grid-template-columns: 1fr;
    gap: 36px
  }

  .fblock.rev .ftext {
    order: 0
  }

  .prob-grid,
  .agents,
  .pains {
    grid-template-columns: 1fr
  }

  .pillars,
  .seg-grid,
  .handle {
    grid-template-columns: 1fr
  }

  .stats {
    grid-template-columns: 1fr 1fr;
    gap: 32px
  }

  .seg-out {
    position: static;
    min-height: 0
  }
}

@media(max-width:1024px) {
  .nav-links {
    display: none
  }

  .nav-cta .nav-signin {
    display: none
  }

  .menu-btn {
    display: inline-flex
  }

  .mpanel.open {
    display: block;
    position: fixed;
    inset: 74px 0 0;
    background: var(--surface);
    z-index: 190;
    padding: 22px 26px;
    overflow-y: auto
  }

  .mp-sec {
    border-bottom: 1px solid var(--line);
    padding: 6px 0
  }

  .mp-sec>a,
  .mp-h {
    font-family: var(--fl);
    font-weight: 600;
    font-size: 18px;
    color: var(--ink);
    padding: 14px 0;
    display: block;
    cursor: pointer
  }

  .mp-sub a {
    font-size: 15.5px;
    color: var(--body);
    padding: 9px 0 9px 14px;
    display: block
  }

  .mp-glbl {
    display: block;
    font-family: var(--fl);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
    padding: 13px 0 3px 14px
  }

  .mp-sub .mp-glbl:first-child {
    padding-top: 2px
  }

  .mp-cta {
    display: flex;
    gap: 12px;
    margin-top: 22px;
    flex-wrap: wrap
  }
}

@media(max-width:560px) {
  .container {
    padding: 0 22px
  }

  .sec {
    padding: 74px 0
  }

  .stats {
    grid-template-columns: 1fr 1fr;
    gap: 26px
  }

  .cmp-head,
  .cmp-tr {
    grid-template-columns: 1fr 60px 60px
  }

  .quote {
    padding: 34px
  }
}

@media(max-width:880px) {
  .hero {
    padding: 74px 0 60px
  }

  .hero.sub {
    padding: 60px 0 46px
  }

  #ent-partner {
    padding: 84px 0 !important
  }
}

@media(max-width:600px) {
  .hero {
    padding: 52px 0 44px
  }

  .hero.sub {
    padding: 46px 0 36px
  }

  .sec {
    padding: 56px 0
  }

  #ent-partner {
    padding: 58px 0 !important
  }

  .nav-cta .btn {
    display: none
  }

  .actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%
  }

  .actions .btn {
    flex: 1 1 100%;
    justify-content: center
  }

  .lede {
    font-size: 1.03rem
  }

  #ent-partner .ephero {
    min-height: 126px;
    padding: 14px
  }

  #ent-partner .epbody {
    padding-top: 20px
  }

  #ent-partner .epc {
    padding: 20px !important
  }

  .tad-shell {
    margin-top: 26px
  }

  .tad-left,
  .tad-right {
    min-width: 0
  }
}

@media(max-width:400px) {
  .container {
    padding: 0 17px
  }

  .stats {
    grid-template-columns: 1fr 1fr;
    gap: 16px
  }

  .stat .nb {
    font-size: 1.95rem
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior: auto
  }

  .reveal {
    opacity: 1;
    transform: none;
    transition: none
  }

  .mtrack,
  .burst .bi,
  .burst .rot,
  .heyebrow .sp {
    animation: none
  }

  .burst {
    transition: none
  }

  * {
    animation-duration: .001s !important
  }
}

/* ============================================================
   PREMIUM UPGRADE LAYER
   ============================================================ */
.container {
  position: relative;
  z-index: 2
}

.sec {
  position: relative
}

/* ---- Icertis-style concentric ring decoration (used throughout) ---- */
.sec.dec {
  overflow: hidden
}

.sec.dec::before {
  content: "";
  position: absolute;
  width: 640px;
  height: 640px;
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
  /* background: repeating-radial-gradient(circle, transparent 0 26px, rgba(61, 23, 7, .05) 26px 27px, transparent 27px 28px);
  -webkit-mask: radial-gradient(circle, #000 52%, transparent 70%);
  mask: radial-gradient(circle, #000 52%, transparent 70%) */
}

.sec.dec.tr::before {
  top: -210px;
  right: -190px
}

.sec.dec.bl::before {
  bottom: -230px;
  left: -210px
}

.sec.dec.tl::before {
  top: -210px;
  left: -190px
}

.sec.dec.br::before {
  bottom: -230px;
  right: -210px
}

.sec-dark.dec::before {
  background: repeating-radial-gradient(circle, transparent 0 26px, rgba(255, 255, 255, .06) 26px 27px, transparent 27px 28px)
}

/* ---- hero polish ---- */
.hero {
  overflow: hidden
}

.hero::before {
  content: "";
  position: absolute;
  top: -12%;
  left: 50%;
  transform: translateX(-50%);
  width: 940px;
  height: 620px;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, rgba(163, 15, 36, .11), transparent 70%)
}

.hero .burst {
  opacity: .46;
  filter: saturate(.7)
}

.hero.sub .burst {
  opacity: .4
}

.hero h1 {
  margin-top: 6px
}

.hero .sub-txt {
  margin-top: 26px
}

@keyframes rowIn {
  0% {
    opacity: 0;
    transform: translateY(9px)
  }

  100% {
    opacity: 1;
    transform: none
  }
}

@keyframes floaty {

  0%,
  100% {
    transform: translateY(0)
  }

  50% {
    transform: translateY(-8px)
  }
}

@keyframes sweep {
  0% {
    transform: translateX(-160%) skewX(-12deg)
  }

  100% {
    transform: translateX(360%) skewX(-12deg)
  }
}

@keyframes livePulse {
  0% {
    box-shadow: 0 0 0 0 rgba(163, 15, 36, .55)
  }

  70% {
    box-shadow: 0 0 0 7px rgba(163, 15, 36, 0)
  }

  100% {
    box-shadow: 0 0 0 0 rgba(163, 15, 36, 0)
  }
}

.mock {
  position: relative;
  overflow: hidden
}

.mock::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 32%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent);
  transform: translateX(-160%);
  pointer-events: none;
  z-index: 5
}

.route.active .mock::after {
  animation: sweep 7s ease-in-out 1.6s infinite
}

.mk-dot,
.mk-live::before {
  animation: livePulse 2.2s infinite
}

.route.active .mock-stage .mk-step {
  animation: rowIn .5s both
}

.route.active .mock-stage .mk-step:nth-child(2) {
  animation-delay: .07s
}

.route.active .mock-stage .mk-step:nth-child(3) {
  animation-delay: .14s
}

.route.active .mock-stage .mk-step:nth-child(4) {
  animation-delay: .21s
}

.route.active .mock-stage .mk-step:nth-child(5) {
  animation-delay: .28s
}

.route.active .mock-stage .mk-bubble {
  animation: rowIn .55s .3s both
}

@media(prefers-reduced-motion:reduce) {

  .mock::after,
  .mk-dot,
  .mk-live::before {
    animation: none
  }

  .route.active [class] {
    animation: none !important
  }
}

/* ============ Front-style CTA (point 4) ============ */
.ctaX-wrap {
  display: grid;
  grid-template-columns: 1.04fr .96fr;
  border-radius: 30px;
  overflow: hidden;
  box-shadow: 0 50px 110px -56px rgba(79, 14, 27, .5)
}

.ctaX-left {
  position: relative;
  background: linear-gradient(160deg, var(--g), var(--g-deep));
  color: #fff;
  padding: 64px 52px;
  display: flex;
  flex-direction: column;
  justify-content: center
}

.ctaX-left h2 {
  color: #fff
}

.ctaX-left p {
  color: #e6d2c9;
  font-size: 1.08rem;
  margin-top: 14px;
  max-width: 42ch
}

.ctaX-left .actions {
  margin-top: 30px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap
}

.ctaX-right {
  position: relative;
  background-image: linear-gradient(150deg, rgba(79, 14, 27, .42), rgba(20, 8, 3, .55)), url(https://www.zealconnect.com/wp-content/uploads/2026/07/planet-band.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #0b0705;
  display: grid;
  place-items: center;
  min-height: 340px;
  overflow: hidden
}

.ctaX-right::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(20, 8, 3, .28))
}

.cta-chip {
  position: relative;
  z-index: 2;
  background: #fff;
  border-radius: 16px;
  padding: 15px 20px;
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .55);
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--fl);
  font-weight: 600;
  font-size: 14.5px;
  color: var(--ink);
  animation: floaty 4.5s ease-in-out infinite
}

.cta-chip .ic {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--spring);
  color: #fff;
  display: grid;
  place-items: center;
  flex: none
}

.cta-chip .st {
  background: var(--g-soft);
  color: var(--g-deep);
  border-radius: 8px;
  padding: 5px 11px;
  font-size: 13px;
  font-weight: 700
}

@media(max-width:860px) {
  .ctaX-wrap {
    grid-template-columns: 1fr
  }

  .ctaX-left {
    padding: 48px 30px
  }

  .ctaX-right {
    min-height: 240px
  }
}

/* ============ Front-style integrations logo grid (point 5) ============ */
.intgrid {
  position: relative;
  overflow: hidden;
  background: linear-gradient(165deg, var(--forest), var(--forest-deep));
  border-radius: 30px;
  padding: 72px 40px 80px;
  text-align: center
}

.intgrid::before {
  content: "";
  position: absolute;
  top: -160px;
  left: 50%;
  transform: translateX(-50%);
  width: 760px;
  height: 760px;
  border-radius: 50%;
  background: repeating-radial-gradient(circle, transparent 0 30px, rgba(255, 255, 255, .045) 30px 31px, transparent 31px 32px);
  -webkit-mask: radial-gradient(circle, #000 48%, transparent 66%);
  mask: radial-gradient(circle, #000 48%, transparent 66%)
}

.intgrid h2 {
  position: relative;
  color: #fff
}

.intgrid .lede {
  position: relative;
  color: #c8b2a9;
  margin: 16px auto 0
}

.logo-cloud {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 18px;
  max-width: 780px;
  margin: 48px auto 0
}

.logo-tile {
  aspect-ratio: 1/1;
  background: #fff;
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .45);
  transition: transform .28s cubic-bezier(.16, 1, .3, 1)
}

.logo-tile .lmono {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--g-soft);
  color: var(--g-deep);
  display: grid;
  place-items: center;
  font-family: var(--fl);
  font-weight: 700;
  font-size: 14px
}

.logo-tile .lname {
  font-family: var(--fl);
  font-weight: 600;
  font-size: 10.5px;
  color: var(--body);
  text-align: center;
  line-height: 1.1;
  padding: 0 4px
}

.logo-tile img {
  height: 30px;
  max-width: 68%;
  object-fit: contain;
  display: block
}

.logo-tile.feat {
  outline: 2px solid rgba(122, 58, 31, .28);
  outline-offset: -2px
}

.logo-tile.feat .lmono {
  background: var(--g-mid);
  color: #fff
}

.logo-cloud .logo-tile:nth-child(6n+2),
.logo-cloud .logo-tile:nth-child(6n+4),
.logo-cloud .logo-tile:nth-child(6n+6) {
  transform: translateY(20px)
}

.logo-cloud .logo-tile:nth-child(6n+2):hover,
.logo-cloud .logo-tile:nth-child(6n+4):hover,
.logo-cloud .logo-tile:nth-child(6n+6):hover {
  transform: translateY(13px) scale(1.05)
}

.logo-cloud .logo-tile:hover {
  transform: translateY(-6px) scale(1.05)
}

@media(max-width:760px) {
  .logo-cloud {
    grid-template-columns: repeat(4, 1fr)
  }
}

@media(max-width:480px) {
  .logo-cloud {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px
  }

  .intgrid {
    padding: 50px 22px 56px
  }
}

/* ============ shared "why zeal desk" strip (solutions depth) ============ */
.whyz {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px
}

.whyz .wz {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 24px;
  transition: transform .25s, box-shadow .25s
}

.whyz .wz:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 46px -30px rgba(79, 14, 27, .3)
}

.whyz .wz .wi {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: var(--g-soft);
  color: var(--g-deep);
  display: grid;
  place-items: center;
  margin-bottom: 14px
}

.whyz .wz h4 {
  font-family: var(--fl);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--ink)
}

.whyz .wz p {
  font-size: .92rem;
  color: var(--body);
  margin-top: 6px;
  line-height: 1.45
}

@media(max-width:900px) {
  .whyz {
    grid-template-columns: 1fr 1fr
  }
}

@media(max-width:520px) {
  .whyz {
    grid-template-columns: 1fr
  }
}

/* steps timeline (enterprise depth) */
.tline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  counter-reset: t
}

.tstep {
  position: relative;
  padding: 0 22px
}

.tstep::before {
  content: "";
  position: absolute;
  top: 18px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--line)
}

.tstep:first-child::before {
  left: 50%
}

.tstep:last-child::before {
  right: 50%
}

.tstep .tn {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--g-deep);
  color: #fff;
  font-family: var(--fl);
  font-weight: 700;
  font-size: 14px;
  display: grid;
  place-items: center;
  margin: 0 auto 18px;
  z-index: 1
}

.tstep h4 {
  font-family: var(--fl);
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--ink);
  text-align: center
}

.tstep p {
  font-size: .9rem;
  color: var(--body);
  margin-top: 6px;
  line-height: 1.45;
  text-align: center
}

@media(max-width:780px) {
  .tline {
    grid-template-columns: 1fr 1fr;
    gap: 30px 0
  }

  .tstep::before {
    display: none
  }
}

/* ---- Front-style wide mega menu ---- */
.nav-item.wide {
  position: static
}

.mega-wide {
  background: #fff;
  left: 50%;
  width: min(1140px, 95vw);
  min-width: 0;
  padding: 34px 40px;
  border-radius: 26px;
  box-shadow: 0 56px 120px -42px rgba(79, 14, 27, .4)
}

.nav-item.wide .mega-wide {
  transform: translateX(-50%) translateY(8px)
}

.nav-item.wide:hover .mega-wide,
.nav-item.wide:focus-within .mega-wide {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%)
}

.mw-grid {
  display: grid;
  grid-template-columns: 308px 1fr 1fr;
  gap: 6px 52px;
  align-items: stretch
}

.mw-c1 {
  display: flex;
  flex-direction: column;
  padding-right: 4px
}

.mw-col {
  padding-left: 44px;
  border-left: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  justify-content: center
}

.mega-wide .mega-link {
  padding: 15px 14px;
  border-radius: 14px
}

.mega-wide .mega-ic {
  width: 36px;
  height: 36px
}

.mega-wide .mega-lbl {
  padding: 0 14px 14px;
  font-size: 11.5px;
  letter-spacing: .13em
}

.mw-btn {
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 13px;
  font-family: var(--fl);
  font-weight: 600;
  font-size: 14.5px;
  color: var(--g-deep);
  box-shadow: 0 1px 2px rgba(79, 14, 27, .06);
  transition: background .18s, border-color .18s, box-shadow .18s, transform .18s
}

.mw-btn:hover {
  background: #fff;
  border-color: var(--g-deep);
  box-shadow: 0 12px 26px -16px rgba(79, 14, 27, .45);
  transform: translateY(-1px)
}

.mw-btn .ar {
  transition: transform .2s
}

.mw-btn:hover .ar {
  transform: translateX(3px)
}

.mw-shot {
  border-radius: 15px;
  overflow: hidden;
  background: linear-gradient(150deg, #471e0c, var(--forest-deep));
  padding: 16px;
  flex: 1;
  display: flex;
  align-items: center
}

.mws-app {
  background: #fff;
  border-radius: 11px;
  display: grid;
  grid-template-columns: 60px 1fr;
  overflow: hidden;
  width: 100%;
  box-shadow: 0 20px 40px -22px rgba(0, 0, 0, .5)
}

.mws-side {
  background: #FBF8F1;
  border-right: 1px solid #EFEAD9;
  padding: 11px 9px;
  display: flex;
  flex-direction: column;
  gap: 7px
}

.mws-side i {
  display: block;
  height: 7px;
  border-radius: 3px;
  background: #e3ded6
}

.mws-side i.on {
  background: #e0c9bf
}

.mws-main {
  padding: 11px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px
}

.mws-row {
  display: flex;
  align-items: center;
  gap: 8px
}

.mws-av {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, #eed7cd, #bf8f7b);
  flex: none
}

.mws-tag {
  font-size: 8.5px;
  font-weight: 700;
  background: #efe7e4;
  color: var(--g-deep);
  border-radius: 5px;
  padding: 3px 6px;
  flex: none
}

@media(max-width:980px) {
  .mega-wide {
    width: 94vw
  }

  .mw-grid {
    grid-template-columns: 1fr 1fr;
    gap: 4px 20px
  }

  .mw-c1 {
    grid-column: 1/3
  }

  .mw-shot {
    display: none
  }

  .mw-c1 .mw-btn {
    margin-top: 0
  }
}

/* Resources mega (3-column: Learn / Company / Featured from Blog) */
.nav-item[data-top="resources"] {
  position: static
}

.mega-res {
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  width: min(800px, calc(100vw - 40px));
  padding: 18px
}

.nav-item:hover .mega-res,
.nav-item:focus-within .mega-res {
  transform: translateX(-50%)
}

.mr-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1.35fr;
  gap: 0 18px
}

.mr-col {
  display: flex;
  flex-direction: column;
  min-width: 0
}

.mr-col+.mr-col {
  border-left: 1px solid var(--line);
  padding-left: 16px
}

.mega-res .mega-lbl {
  padding: 4px 14px 8px
}

.mr-feat {
  display: flex;
  flex-direction: column;
  min-width: 0
}

.mr-feat .mega-lbl {
  padding: 4px 2px 10px
}

.navfeat {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: var(--card);
  transition: transform .2s, box-shadow .2s, border-color .2s
}

.navfeat:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px -20px rgba(79, 14, 27, .4);
  border-color: var(--gold)
}

.navfeat-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  background: #f6f6f6 center/cover no-repeat;
}

.navfeat-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
  padding: 13px 14px 15px
}

.navfeat-cat {
  font-size: 10px;
  letter-spacing: .09em;
  padding: 4px 9px
}

.navfeat-title {
  font-family: var(--fs);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.3;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden
}

.navfeat-meta {
  font-size: 12px
}

.navfeat-all {
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--fl);
  font-weight: 600;
  font-size: 13.5px;
  color: var(--g-deep)
}

.navfeat-all .ar {
  transition: transform .2s
}

.navfeat-all:hover .ar {
  transform: translateX(3px)
}

.cmp {
  max-width: 940px;
  margin: 0 auto;
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 34px 80px -54px rgba(79, 14, 27, .4)
}

.cmp-row {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr
}

.cmp-row+.cmp-row {
  border-top: 1px solid var(--line)
}

.cmp-row>div {
  padding: 17px 24px;
  display: flex;
  align-items: center;
  gap: 9px
}

.cmp-feat {
  font-family: var(--fl);
  font-weight: 600;
  color: var(--ink);
  font-size: .97rem
}

.cmp-col {
  justify-content: center;
  text-align: center
}

.cmp-zeal {
  background: var(--g-soft)
}

.cmp-head>div {
  padding-top: 19px;
  padding-bottom: 19px;
  font-family: var(--fl);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted)
}

.cmp-head .cmp-zeal {
  background: var(--g-deep);
  color: #fff;
  justify-content: center
}

.cmp-ck {
  width: 21px;
  height: 21px;
  color: var(--g-mid);
  flex: none
}

.cmp-x {
  width: 17px;
  height: 17px;
  color: var(--muted);
  opacity: .5;
  flex: none
}

@media(max-width:640px) {
  .cmp-row {
    grid-template-columns: 1.5fr .75fr .75fr
  }

  .cmp-row>div {
    padding: 13px 11px
  }

  .cmp-feat {
    font-size: .84rem
  }

  .cmp-head>div {
    font-size: .6rem;
    letter-spacing: .04em
  }
}

.explore {
  display: flex;
  flex-wrap: wrap;
  gap: 13px;
  justify-content: center;
  max-width: 900px;
  margin: 0 auto
}

.exp-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #fff;
  font-family: var(--fl);
  font-weight: 600;
  font-size: .96rem;
  color: var(--ink);
  transition: transform .18s, background .18s, border-color .18s
}

.exp-link:hover {
  background: var(--g-soft);
  border-color: #e3d5cf;
  transform: translateY(-2px)
}

.exp-link svg {
  color: var(--g-mid)
}

.heromock {
  max-width: 760px;
  margin: 46px auto 0;
  text-align: left
}

.whyz.cap3 {
  grid-template-columns: repeat(3, 1fr)
}

@media(max-width:900px) {
  .whyz.cap3 {
    grid-template-columns: 1fr
  }
}

/* announcement strip */
.annbar {
  background: var(--grad);
  color: #fff;
  font-family: var(--fl);
  position: relative;
  z-index: 150
}

.annbar-in {
  max-width: var(--maxw);
  margin: 0 auto;
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 7px 48px;
  font-size: 13px;
  text-align: center;
  flex-wrap: wrap
}

.annbar .ann-spark {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  flex: none;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .28)
}

.annbar .ann-txt {
  font-weight: 600;
  color: #fff;
  opacity: .95
}

.annbar .ann-cta {
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-bottom: 1px solid rgba(255, 255, 255, .55);
  padding-bottom: 1px;
  white-space: nowrap
}

.annbar .ann-cta .ar {
  transition: transform .2s
}

.annbar .ann-cta:hover {
  border-color: #fff
}

.annbar .ann-cta:hover .ar {
  transform: translateX(3px)
}

.annbar .ann-x {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: 0;
  color: rgba(255, 255, 255, .72);
  cursor: pointer;
  font-size: 19px;
  line-height: 1;
  padding: 4px 6px;
  border-radius: 6px
}

.annbar .ann-x:hover {
  color: #fff;
  background: rgba(255, 255, 255, .12)
}

.annbar.hide {
  display: none
}

@media(max-width:560px) {
  .annbar-in {
    font-size: 12px;
    padding: 7px 40px;
    gap: 8px
  }
}

/* floating menu (option 3) */
header.nav {
  background: transparent !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  padding: 12px 18px 0 !important
}

header.nav::before {
  display: none !important
}

header.nav .nav-row {
  max-width: var(--maxw);
  margin: 0 auto;
  background: rgba(251, 243, 233, .93);
  -webkit-backdrop-filter: saturate(150%) blur(12px);
  backdrop-filter: saturate(150%) blur(12px);
  border: 1px solid #EADFCD;
  border-radius: 16px;
  box-shadow: 0 14px 36px -22px rgba(79, 14, 27, .45);
  padding-left: 22px;
  padding-right: 14px;
  transition: box-shadow .3s
}

header.nav.solid .nav-row {
  box-shadow: 0 18px 44px -22px rgba(79, 14, 27, .55)
}

@media(max-width:560px) {
  header.nav {
    padding: 10px 12px 0 !important
  }

  header.nav .nav-row {
    padding-left: 16px;
    padding-right: 10px;
    border-radius: 14px
  }
}

.tad-sec {
  position: relative
}

.tad-shell {
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  gap: 26px;
  max-width: 1080px;
  margin: 42px auto 0;
  align-items: start;
  position: relative;
  z-index: 1
}

/* left composer */
.tad-left {
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 18px;
  padding: 20px
}

.tad-label {
  font-family: var(--fl);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
  margin-bottom: 12px
}

.tad-presets {
  display: flex;
  flex-direction: column;
  gap: 9px
}

.tad-preset {
  text-align: left;
  cursor: pointer;
  font-family: var(--fl);
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 12px;
  padding: 11px 13px;
  color: #eee1dc;
  transition: border-color .2s, background .2s, transform .15s;
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%
}

.tad-preset:hover {
  background: rgba(255, 255, 255, .08);
  transform: translateY(-1px)
}

.tad-preset.on {
  border-color: var(--spring);
  background: rgba(163, 15, 36, .12)
}

.tad-preset .pi {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: rgba(163, 15, 36, .16);
  color: var(--spring);
  display: grid;
  place-items: center;
  flex: none
}

.tad-preset .pi svg {
  width: 16px;
  height: 16px
}

.tad-preset>span:last-child {
  display: block;
  min-width: 0
}

.tad-pt {
  display: block;
  font-weight: 600;
  font-size: 13.5px;
  color: #fff;
  line-height: 1.2
}

.tad-ps {
  display: block;
  font-size: 11.5px;
  color: rgba(255, 255, 255, .6);
  margin-top: 2px
}

.tad-or {
  font-family: var(--fl);
  font-size: 11.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .45);
  margin: 17px 0 11px;
  display: flex;
  align-items: center;
  gap: 10px
}

.tad-or::before,
.tad-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, .14)
}

.tad-chans {
  display: flex;
  gap: 6px;
  margin-bottom: 9px;
  flex-wrap: wrap
}

.tad-cseg {
  cursor: pointer;
  font-family: var(--fl);
  font-weight: 600;
  font-size: 12px;
  border-radius: 999px;
  padding: 6px 12px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: transparent;
  color: rgba(255, 255, 255, .72);
  transition: .2s
}

.tad-cseg.on {
  background: #fff;
  color: var(--g-deep);
  border-color: #fff
}

.tad-input {
  width: 100%;
  min-height: 74px;
  resize: vertical;
  font-family: var(--fl);
  font-size: 13.5px;
  color: #fff;
  background: rgba(0, 0, 0, .22);
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 12px;
  padding: 11px 13px;
  line-height: 1.5
}

.tad-input::placeholder {
  color: rgba(255, 255, 255, .45)
}

.tad-input:focus {
  outline: none;
  border-color: var(--spring)
}

.tad-run {
  margin-top: 12px;
  width: 100%;
  justify-content: center;
  cursor: pointer;
  font-family: var(--fl);
  font-weight: 700;
  font-size: 15px;
  border: none;
  border-radius: 999px;
  padding: 13px 22px;
  background: var(--spring);
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: transform .18s, box-shadow .25s
}

.tad-run:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px -14px rgba(163, 15, 36, .6)
}

.tad-run .ar {
  transition: transform .2s
}

.tad-run:hover .ar {
  transform: translateX(3px)
}

.tad-note {
  font-size: 11.5px;
  color: rgba(255, 255, 255, .5);
  margin-top: 14px;
  line-height: 1.45
}

/* right app */
.tad-app {
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 50px 110px -45px rgba(0, 0, 0, .65);
  font-family: var(--fl)
}

.tad-appbar {
  display: flex;
  align-items: center;
  gap: 7px;
  background: #FBF8F1;
  border-bottom: 1px solid #EFEAD9;
  padding: 11px 15px
}

.tad-appbar .d {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #e6ddc9
}

.tad-appttl {
  font-weight: 600;
  font-size: 12.5px;
  color: var(--body);
  margin-left: 6px
}

.tad-status {
  margin-left: auto;
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
  padding: 5px 11px;
  background: #EEE8D8;
  color: #8a8372;
  letter-spacing: .02em
}

.tad-status.ok {
  background: #f6e9e3;
  color: #7a3a1f
}

.tad-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  min-height: 436px
}

.tad-ticket {
  background: var(--surface);
  border: 1px solid #EDE6D4;
  border-radius: 13px;
  padding: 14px 15px
}

.tad-tfrom {
  display: flex;
  align-items: center;
  gap: 11px
}

.tad-av {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, #eed7cd, #bf8f7b);
  display: grid;
  place-items: center;
  color: #2a0710;
  font-weight: 700;
  font-family: var(--fl);
  font-size: 15px;
  flex: none
}

.tad-tmeta {
  min-width: 0
}

.tad-tn {
  font-family: var(--fl);
  font-weight: 600;
  font-size: 14px;
  color: var(--ink)
}

.tad-tsub {
  font-size: 12px;
  color: var(--muted);
  margin-top: 1px;
  display: flex;
  align-items: center;
  gap: 6px
}

.tad-ch {
  font-size: 10px;
  font-weight: 700;
  border-radius: 5px;
  padding: 2px 7px
}

.tad-ch.em {
  background: #E9EEFB;
  color: #2563a8
}

.tad-ch.wa {
  background: #f6e9e3;
  color: #7a3a1f
}

.tad-ch.lc {
  background: #F1ECFB;
  color: #6a3fb0
}

.tad-tmsg {
  margin-top: 11px;
  font-size: 13.5px;
  color: #58585c;
  line-height: 1.5
}

.tad-booking {
  background: #fbf6f4;
  border: 1px solid #ecdcd5;
  border-radius: 13px;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  padding: 0 14px;
  margin: 0;
  transition: max-height .5s cubic-bezier(.16, 1, .3, 1), opacity .4s, padding .4s, margin .4s
}

.tad-booking.show {
  max-height: 240px;
  opacity: 1;
  padding: 13px 14px;
  margin: 1px 0
}

.tad-bk-h {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--fl);
  font-weight: 700;
  font-size: 13px;
  color: var(--g-deep)
}

.tad-bk-h svg {
  width: 15px;
  height: 15px
}

.tad-bk-g {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 18px;
  margin-top: 11px
}

.tad-bk-i {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  border-bottom: 1px dashed #e7d6cf;
  padding-bottom: 6px
}

.tad-bk-i span {
  color: var(--muted)
}

.tad-bk-i b {
  color: var(--ink);
  font-family: var(--fl);
  font-weight: 600
}

.tad-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid #EFEAD9;
  border-radius: 13px;
  background: #fff;
  transition: opacity .3s, border-color .3s, box-shadow .3s, background .3s
}

.tad-row+.tad-row {
  margin-top: 9px
}

.tad-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 13px 2px 9px
}

.tad-divider::before,
.tad-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #EFEAD9
}

.tad-divider span {
  font-family: var(--fl);
  font-weight: 700;
  font-size: 9px;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: #a89a86;
  white-space: nowrap
}

.tad-row.is-pending {
  opacity: .42
}

.tad-row.is-working {
  border-color: #e0c9bf;
  background: linear-gradient(#fff, #fbf5f3);
  box-shadow: 0 12px 26px -18px rgba(79, 14, 27, .3)
}

.tad-rk {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--g-soft);
  color: var(--g-deep);
  display: grid;
  place-items: center;
  font-size: 12.5px;
  font-weight: 700;
  flex: none;
  font-family: var(--fl);
  transition: background .3s, color .3s
}

.tad-row.is-done .tad-rk {
  background: var(--spring);
  color: #fff
}

.tad-rk svg {
  width: 14px;
  height: 14px
}

.tad-rc {
  flex: 1;
  min-width: 0
}

.tad-rn {
  font-family: var(--fl);
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap
}

.tad-rt {
  font-size: 12.8px;
  color: var(--muted);
  margin-top: 3px;
  line-height: 1.45
}

.tad-row.is-done .tad-rt {
  color: #58585c
}

.tad-rchips {
  margin-top: 7px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px
}

.tad-chip {
  font-size: 10.5px;
  font-weight: 600;
  border-radius: 999px;
  padding: 3px 9px;
  background: var(--g-soft);
  color: var(--g-deep)
}

.tad-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  border-radius: 6px;
  padding: 2px 7px
}

.tad-tag.hot {
  background: #FCEFE9;
  color: #9A4528
}

.tad-tag.mid {
  background: #FBF3E1;
  color: #8a6a1f
}

.tad-tag.low {
  background: var(--g-soft);
  color: var(--g-deep)
}

.tad-spin {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(163, 15, 36, .22);
  border-top-color: var(--g-mid);
  flex: none;
  opacity: 0;
  align-self: center;
  animation: tadspin .7s linear infinite
}

.tad-row.is-working .tad-spin {
  opacity: 1
}

@keyframes tadspin {
  to {
    transform: rotate(360deg)
  }
}

.tad-done {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--g-deep);
  color: #fff;
  border-radius: 13px;
  padding: 14px 16px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .45s, transform .45s;
  flex-wrap: wrap
}

.tad-done.show {
  opacity: 1;
  transform: none
}

.tad-dk {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--spring);
  color: #fff;
  display: grid;
  place-items: center;
  flex: none
}

.tad-dk svg {
  width: 17px;
  height: 17px;
  transform: translateY(2px)
}

.tad-rk svg,
.tad-dk svg,
.cta-chip .ic svg {
  display: block
}

.tad-done>div {
  flex: 1;
  min-width: 180px
}

.tad-done b {
  font-family: var(--fl);
  font-weight: 700;
  font-size: 14px;
  display: block
}

.tad-done span {
  font-size: 12.8px;
  color: #e7d6cf;
  line-height: 1.45;
  display: block;
  margin-top: 2px
}

.tad-dcta {
  font-family: var(--fl);
  font-weight: 600;
  font-size: 13px;
  color: #2a0710;
  background: var(--spring);
  border-radius: 999px;
  padding: 9px 16px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: transform .2s
}

.tad-dcta:hover {
  transform: translateY(-2px)
}

.tad-dcta .ar {
  transition: transform .2s
}

.tad-dcta:hover .ar {
  transform: translateX(3px)
}

.tad-segs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px
}

.tad-seg {
  cursor: pointer;
  font-family: var(--fl);
  font-weight: 600;
  font-size: 11.5px;
  border-radius: 999px;
  padding: 6px 11px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: transparent;
  color: rgba(255, 255, 255, .72);
  transition: background .18s, color .18s, border-color .18s
}

.tad-seg:hover {
  background: rgba(255, 255, 255, .07);
  color: #fff
}

.tad-seg.on {
  background: rgba(255, 255, 255, .16);
  color: #fff;
  border-color: rgba(255, 255, 255, .5)
}

@media(max-width:880px) {
  .tad-shell {
    grid-template-columns: 1fr;
    gap: 18px
  }

  .tad-body {
    min-height: 0
  }
}

@media(prefers-reduced-motion:reduce) {
  .tad-spin {
    animation: none
  }
}

#ent-partner {
  padding: 118px 0 !important;
  overflow: hidden
}

#ent-partner .epwrap {
  position: relative;
  z-index: 1;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px
}

@media(min-width:768px) {
  #ent-partner .epwrap {
    padding: 0 40px
  }
}

@media(min-width:1024px) {
  #ent-partner {
    padding: 140px 0 !important
  }

  #ent-partner .epwrap {
    padding: 0 60px
  }
}

#ent-partner .ephead {
  text-align: center;
  margin-bottom: 60px
}

@media(min-width:1024px) {
  #ent-partner .ephead {
    margin-bottom: 90px
  }
}

#ent-partner .eplabel {
  display: inline-block;
  font-family: var(--fl);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--spring)
}

#ent-partner .ephead h2 {
  font-family: var(--fs);
  font-weight: 500;
  letter-spacing: -.03em;
  line-height: 1.03;
  color: #fff;
  font-size: clamp(2.25rem, 5.4vw, 4.4rem);
  margin-top: 16px
}

#ent-partner .ephead h2 .acc {
  color: var(--spring)
}

#ent-partner .ephead p {
  max-width: 700px;
  margin: 22px auto 0;
  color: rgba(255, 255, 255, .7);
  font-size: 1.08rem;
  line-height: 1.6
}

#ent-partner .epgrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px
}

@media(min-width:680px) {
  #ent-partner .epgrid {
    grid-template-columns: 1fr 1fr
  }
}

@media(min-width:1024px) {
  #ent-partner .epgrid {
    grid-template-columns: repeat(3, 1fr);
    align-items: end;
    gap: 24px
  }
}

#ent-partner .epc {
  --ea: 255, 138, 91;
  position: relative;
  overflow: hidden;
  border-radius: 36px;
  padding: 34px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 320px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 30px 60px -42px rgba(0, 0, 0, .65);
  transition: transform .35s cubic-bezier(.16, 1, .3, 1), border-color .35s, box-shadow .35s
}

#ent-partner .epc:nth-child(2) {
  --ea: 232, 168, 86
}

#ent-partner .epc:nth-child(3) {
  --ea: 214, 104, 74
}

#ent-partner .epc:nth-child(4) {
  --ea: 232, 168, 86
}

#ent-partner .epc:nth-child(5) {
  --ea: 255, 138, 91
}

#ent-partner .epc:nth-child(6) {
  --ea: 214, 104, 74
}

@media(min-width:1024px) {
  #ent-partner .epc {
    padding: 40px
  }

  #ent-partner .epc.tall {
    min-height: 520px
  }

  #ent-partner .epc.med {
    min-height: 430px
  }
}

#ent-partner .epc:hover {
  transform: translateY(-8px);
  border-color: rgba(255, 255, 255, .2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 50px 92px -44px rgba(0, 0, 0, .78)
}

#ent-partner .epbg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden
}

#ent-partner .epbg::before,
#ent-partner .epbg::after {
  content: "";
  position: absolute;
  inset: -35%;
  border-radius: 50%;
  will-change: transform
}

#ent-partner .epbg::before {
  background: radial-gradient(circle at 50% 50%, rgba(var(--ea), .32), transparent 62%);
  animation: epd1 19s ease-in-out infinite
}

#ent-partner .epbg::after {
  background: radial-gradient(circle at 50% 50%, rgba(238, 206, 168, .16), transparent 60%);
  animation: epd2 25s ease-in-out infinite
}

#ent-partner .epc:hover .epbg::before {
  animation-duration: 9s
}

#ent-partner .epc:hover .epbg::after {
  animation-duration: 13s
}

#ent-partner .epc>* {
  position: relative;
  z-index: 2
}

#ent-partner .epc h3 {
  font-family: var(--fs);
  font-weight: 500;
  color: #fff;
  font-size: clamp(1.35rem, 2.2vw, 1.7rem);
  line-height: 1.16;
  margin-top: 30px
}

#ent-partner .epc p {
  color: rgba(255, 255, 255, .72);
  font-size: 1.04rem;
  line-height: 1.6;
  margin-top: 13px;
  max-width: 36ch
}

@keyframes epd1 {

  0%,
  100% {
    transform: translate(-6%, -4%) scale(1)
  }

  50% {
    transform: translate(7%, 6%) scale(1.2)
  }
}

@keyframes epd2 {

  0%,
  100% {
    transform: translate(6%, 7%) scale(1.15)
  }

  50% {
    transform: translate(-6%, -7%) scale(1)
  }
}

@keyframes epIn {
  from {
    opacity: 0;
    transform: translateY(40px) scale(.96);
    filter: blur(16px)
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0)
  }
}

@keyframes epBlur {
  from {
    opacity: 0;
    transform: translateY(20px);
    filter: blur(20px)
  }

  to {
    opacity: 1;
    transform: none;
    filter: blur(0)
  }
}

#ent-partner.ep-ready .ephead:not(.in) {
  opacity: 0
}

#ent-partner .ephead.in {
  animation: epBlur 1.1s ease backwards
}

#ent-partner.ep-ready .epc:not(.in) {
  opacity: 0
}

#ent-partner .epc.in {
  animation: epIn .8s cubic-bezier(.16, 1, .3, 1) backwards
}

#ent-partner .epc.in:nth-child(1) {
  animation-delay: .05s
}

#ent-partner .epc.in:nth-child(2) {
  animation-delay: .17s
}

#ent-partner .epc.in:nth-child(3) {
  animation-delay: .29s
}

#ent-partner .epc.in:nth-child(4) {
  animation-delay: .41s
}

#ent-partner .epc.in:nth-child(5) {
  animation-delay: .53s
}

#ent-partner .epc.in:nth-child(6) {
  animation-delay: .65s
}

@media(prefers-reduced-motion:reduce) {

  #ent-partner .epbg::before,
  #ent-partner .epbg::after,
  #ent-partner .epc.in,
  #ent-partner .ephead.in {
    animation: none
  }

  #ent-partner.ep-ready .epc:not(.in),
  #ent-partner.ep-ready .ephead:not(.in) {
    opacity: 1
  }
}

/* ---- enterprise block hero visuals ---- */
#ent-partner .epgrid {
  align-items: stretch
}

#ent-partner .epc {
  justify-content: flex-start;
  min-height: 0
}

@media(min-width:1024px) {
  #ent-partner .epc {
    min-height: 368px
  }

  #ent-partner .epc.tall,
  #ent-partner .epc.med {
    min-height: 368px
  }
}

#ent-partner .epbody {
  margin-top: auto;
  padding-top: 26px
}

#ent-partner .epc h3 {
  margin-top: 0
}

#ent-partner .ephero {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 9px;
  width: 100%;
  min-height: 150px;
  padding: 16px;
  border-radius: 18px;
  background: linear-gradient(160deg, rgba(8, 4, 2, .38), rgba(8, 4, 2, .14));
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
  overflow: hidden;
  font-family: var(--fl)
}

#ent-partner .ephero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 78% -10%, rgba(var(--ea), .18), transparent 58%);
  pointer-events: none
}

#ent-partner .ephero>* {
  position: relative;
  z-index: 1
}

#ent-partner .eh-avs {
  display: flex;
  align-items: center
}

#ent-partner .eh-avs span {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, rgba(var(--ea), .95), rgba(var(--ea), .5));
  border: 2px solid rgba(20, 9, 4, .7);
  margin-left: -8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .35)
}

#ent-partner .eh-avs span:first-child {
  margin-left: 0
}

#ent-partner .eh-avs i {
  margin-left: 9px;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, .55);
  font-style: normal
}

#ent-partner .eh-prow {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #fff
}

#ent-partner .eh-prow b {
  font-weight: 600
}

#ent-partner .eh-tag {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #9be7b4;
  background: rgba(34, 160, 90, .18);
  border-radius: 6px;
  padding: 2px 7px
}

#ent-partner .eh-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3fcf6e;
  animation: ehpulse 2s infinite
}

@keyframes ehpulse {
  0% {
    box-shadow: 0 0 0 0 rgba(63, 207, 110, .5)
  }

  70% {
    box-shadow: 0 0 0 7px rgba(63, 207, 110, 0)
  }

  100% {
    box-shadow: 0 0 0 0 rgba(63, 207, 110, 0)
  }
}

#ent-partner .eh-sub {
  font-size: 11.5px;
  color: rgba(255, 255, 255, .5);
  line-height: 1.4
}

#ent-partner .eh-irow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, .82);
  padding: 7px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .07)
}

#ent-partner .eh-irow+.eh-irow {
  margin-top: 7px
}

#ent-partner .eh-ic {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .03em;
  color: #fff;
  background: rgba(var(--ea), .85);
  border-radius: 6px;
  padding: 3px 0;
  flex: none;
  width: 36px;
  text-align: center
}

#ent-partner .eh-il {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

#ent-partner .eh-ck {
  color: #3fcf6e;
  font-weight: 800;
  flex: none
}

#ent-partner .eh-sy {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .2);
  border-top-color: #fff;
  flex: none;
  animation: ehspin .8s linear infinite
}

@keyframes ehspin {
  to {
    transform: rotate(360deg)
  }
}

#ent-partner .eh-winbar {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 11px
}

#ent-partner .eh-winbar i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .22)
}

#ent-partner .eh-winbar b {
  margin-left: 6px;
  font-size: 10.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, .5)
}

#ent-partner .eh-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px
}

#ent-partner .eh-tiles u {
  height: 30px;
  border-radius: 9px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .08);
  display: block
}

#ent-partner .eh-tiles u:nth-child(2) {
  background: rgba(var(--ea), .22);
  border-color: rgba(var(--ea), .4)
}

#ent-partner .eh-tiles u.add {
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 700;
  font-style: normal;
  background: rgba(var(--ea), .16);
  border: 1px dashed rgba(var(--ea), .55)
}

#ent-partner .eh-prow2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, .82);
  padding: 8px 11px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .07)
}

#ent-partner .eh-prow2+.eh-prow2 {
  margin-top: 7px
}

#ent-partner .eh-prow2.add {
  border-style: dashed;
  border-color: rgba(255, 255, 255, .18);
  color: rgba(255, 255, 255, .55)
}

#ent-partner .eh-prow2.add i {
  font-style: normal;
  color: #fff;
  font-weight: 700
}

#ent-partner .eh-sw {
  width: 30px;
  height: 17px;
  border-radius: 999px;
  background: rgba(var(--ea), .9);
  position: relative;
  flex: none
}

#ent-partner .eh-sw::after {
  content: "";
  position: absolute;
  top: 2px;
  right: 2px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #fff
}

#ent-partner .eh-apit {
  display: flex;
  align-items: center;
  gap: 8px
}

#ent-partner .eh-mth {
  font-weight: 800;
  color: #2a0710;
  background: rgba(var(--ea), 1);
  border-radius: 5px;
  padding: 3px 7px;
  letter-spacing: .03em;
  font-size: 10px;
  flex: none
}

#ent-partner .eh-path {
  font-family: ui-monospace, Menlo, monospace;
  color: rgba(255, 255, 255, .82);
  font-size: 11px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

#ent-partner .eh-200 {
  font-weight: 800;
  color: #9be7b4;
  background: rgba(34, 160, 90, .16);
  border-radius: 5px;
  padding: 3px 7px;
  font-size: 10px;
  flex: none
}

#ent-partner .eh-code {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .72);
  margin-top: 10px;
  background: rgba(0, 0, 0, .26);
  border-radius: 9px;
  padding: 9px 11px;
  white-space: pre;
  overflow: hidden
}

#ent-partner .eh-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 6px
}

#ent-partner .eh-steps span {
  font-size: 10.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, .55);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 999px;
  padding: 4px 9px
}

#ent-partner .eh-steps span.done {
  color: #2a0710;
  background: rgba(var(--ea), .95);
  border-color: transparent
}

#ent-partner .eh-steps span.now {
  color: #fff;
  border-color: rgba(var(--ea), .7);
  background: rgba(var(--ea), .2)
}

#ent-partner .eh-track {
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  margin-top: 13px;
  overflow: hidden
}

#ent-partner .eh-track i {
  display: block;
  height: 100%;
  width: 68%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(var(--ea), 1), rgba(var(--ea), .55))
}

@media(prefers-reduced-motion:reduce) {

  #ent-partner .eh-dot,
  #ent-partner .eh-sy {
    animation: none
  }
}

/* ---- enterprise blocks: cream theme ---- */
#ent-partner {
  background: linear-gradient(180deg, var(--surface) 0%, var(--band) 100%)
}

#ent-partner .ephead h2 {
  color: var(--ink)
}

#ent-partner .ephead p {
  color: var(--body)
}

#ent-partner .epc {
  --ea: 163, 15, 36;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: 0 30px 60px -42px rgba(79, 14, 27, .26)
}

#ent-partner .epc:hover {
  border-color: rgba(163, 15, 36, .42);
  box-shadow: 0 48px 86px -48px rgba(79, 14, 27, .4)
}

#ent-partner .epc h3 {
  color: var(--ink)
}

#ent-partner .epc p {
  color: var(--body)
}

#ent-partner .epbg::before {
  background: radial-gradient(circle at 50% 50%, rgba(163, 15, 36, .07), transparent 62%)
}

#ent-partner .epbg::after {
  background: radial-gradient(circle at 50% 50%, rgba(232, 168, 86, .09), transparent 60%)
}

#ent-partner .ephero {
  background: linear-gradient(160deg, #FCF9F2, #F1E9DA);
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7)
}

#ent-partner .ephero::after {
  background: radial-gradient(120% 90% at 78% -10%, rgba(163, 15, 36, .1), transparent 58%)
}

#ent-partner .eh-avs span {
  border-color: #fff
}

#ent-partner .eh-avs i {
  color: var(--muted)
}

#ent-partner .eh-prow {
  color: var(--ink)
}

#ent-partner .eh-tag {
  color: #1d7a44;
  background: rgba(34, 160, 90, .13)
}

#ent-partner .eh-sub {
  color: var(--muted)
}

#ent-partner .eh-irow {
  background: #fff;
  border-color: var(--line);
  color: var(--body)
}

#ent-partner .eh-sy {
  border-color: rgba(79, 14, 27, .16);
  border-top-color: var(--g-mid)
}

#ent-partner .eh-winbar i {
  background: rgba(79, 14, 27, .16)
}

#ent-partner .eh-winbar b {
  color: var(--muted)
}

#ent-partner .eh-tiles u {
  background: #fff;
  border-color: var(--line)
}

#ent-partner .eh-tiles u.add {
  color: var(--g-deep);
  background: rgba(163, 15, 36, .1);
  border-color: rgba(163, 15, 36, .5)
}

#ent-partner .eh-mth {
  color: #fff
}

#ent-partner .eh-prow2 {
  background: #fff;
  border-color: var(--line);
  color: var(--body)
}

#ent-partner .eh-prow2.add {
  border-color: rgba(79, 14, 27, .2);
  color: var(--muted)
}

#ent-partner .eh-prow2.add i {
  color: var(--g-deep)
}

#ent-partner .eh-path {
  color: var(--body)
}

#ent-partner .eh-200 {
  color: #1d7a44;
  background: rgba(34, 160, 90, .13)
}

#ent-partner .eh-code {
  background: #2a160c;
  color: #f1e3d9
}

#ent-partner .eh-steps span {
  color: var(--body);
  background: #fff;
  border-color: var(--line)
}

#ent-partner .eh-steps span.done {
  color: #fff
}

#ent-partner .eh-steps span.now {
  color: var(--g-deep);
  background: rgba(163, 15, 36, .13);
  border-color: rgba(163, 15, 36, .5)
}

#ent-partner .eh-track {
  background: rgba(79, 14, 27, .1)
}

.blog-feat {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  border-radius: 26px;
  overflow: hidden;
  background-image: var(--zgrain), linear-gradient(150deg, var(--g), var(--g-deep));
  box-shadow: 0 50px 110px -56px rgba(124, 47, 28, .5);
  min-height: 300px
}

.blog-feat-l {
  padding: 50px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center
}

.blog-feat-r {
  position: relative;
  background: repeating-radial-gradient(circle at 64% 50%, transparent 0 23px, rgba(255, 255, 255, .09) 23px 24px, transparent 24px 26px)
}

.blog-cat {
  display: inline-flex;
  align-self: flex-start;
  font-family: var(--fl);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #000000;
  background: var(--gold);
  border-radius: 999px;
  padding: 6px 13px
}

.blog-feat .blog-cat {
  background: rgba(255, 255, 255, .16);
  color: #fff
}

.blog-meta {
  font-family: var(--fl);
  font-weight: 500;
  font-size: 13px;
  color: var(--muted)
}

.blog-feat .blog-meta {
  color: #E6CBBE
}

.blog-read {
  font-family: var(--fl);
  font-weight: 600;
  font-size: 14.5px;
  color: var(--g-deep);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 6px
}

.blog-feat .blog-read {
  color: #fff;
  margin-top: 22px
}

.blog-read .ar {
  transition: transform .2s
}

.blog-feat:hover .blog-read .ar,
.blogcard:hover .blog-read .ar {
  transform: translateX(4px)
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px
}

.blogcard {
  display: flex;
  flex-direction: column;
  gap: 11px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 26px 24px;
  transition: transform .25s, box-shadow .25s, border-color .2s
}

.blogcard:hover {
  transform: translateY(-4px);
  box-shadow: 0 26px 50px -30px rgba(124, 47, 28, .32);
  border-color: var(--gold)
}

.blogcard h4 {
  font-family: var(--fs);
  font-weight: 600;
  font-size: 1.16rem;
  color: var(--ink);
  line-height: 1.26
}

.blogcard p {
  font-size: .93rem;
  color: var(--body);
  line-height: 1.5;
  flex: 1;
  margin: 0
}

@media(max-width:900px) {
  .blog-feat {
    grid-template-columns: 1fr
  }

  .blog-feat-r {
    min-height: 120px
  }

  .blog-grid {
    grid-template-columns: 1fr 1fr
  }
}

@media(max-width:640px) {
  .blog-grid {
    grid-template-columns: 1fr
  }
}

.art-narrow {
  max-width: 760px
}

.art-crumb {
  font-family: var(--fl);
  font-size: 13px;
  color: var(--muted);
  padding-top: 42px;
  margin-bottom: 6px
}

.art-crumb a {
  color: var(--g-mid);
  font-weight: 600
}

.art-crumb span {
  margin: 0 5px;
  opacity: .6
}

.art-title {
  font-family: var(--fs);
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -.022em;
  line-height: 1.08;
  font-size: clamp(2rem, 4.4vw, 3.1rem);
  margin: 14px 0 0
}

.art-lede {
  font-size: 1.18rem;
  line-height: 1.55;
  color: var(--body);
  margin-top: 18px;
  max-width: 64ch
}

.art-byline {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px
}

.art-av {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--spring), var(--g-mid));
  color: #fff;
  display: grid;
  place-items: center;
  font-family: var(--fl);
  font-weight: 700;
  font-size: 16px;
  flex: none
}

.art-byline b {
  font-family: var(--fl);
  font-weight: 600;
  font-size: 14.5px;
  color: var(--ink);
  display: block
}

.art-byline span {
  font-size: 13px;
  color: var(--muted)
}

.art-body {
  padding: 26px 0 6px
}

.art-body p {
  font-size: 1.09rem;
  line-height: 1.75;
  color: var(--body);
  margin: 0 0 20px
}

.art-body h2 {
  font-family: var(--fs);
  font-weight: 500;
  color: var(--ink);
  font-size: clamp(1.4rem, 2.6vw, 1.85rem);
  line-height: 1.2;
  letter-spacing: -.018em;
  margin: 36px 0 14px
}

.art-ul {
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 11px
}

.art-ul li {
  position: relative;
  padding-left: 30px;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--body)
}

.art-ul li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 10px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--spring)
}

.art-key {
  background: linear-gradient(150deg, var(--g), var(--g-deep));
  border-radius: 18px;
  padding: 24px 28px;
  margin: 30px 0;
  color: #fff
}

.art-key-l {
  font-family: var(--fl);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #F2C24A;
  display: block;
  margin-bottom: 9px
}

.art-key p {
  font-size: 1.1rem;
  line-height: 1.55;
  color: #fff;
  margin: 0;
  font-family: var(--fs)
}

.art-share {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 11px;
  padding: 22px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin: 14px 0 0
}

.art-share span {
  font-family: var(--fl);
  font-weight: 600;
  font-size: 13px;
  color: var(--muted)
}

.art-share a {
  font-family: var(--fl);
  font-weight: 600;
  font-size: 13.5px;
  color: var(--g-deep);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 15px;
  transition: background .2s, border-color .2s
}

.art-share a:hover {
  background: var(--g-soft);
  border-color: var(--g-mid)
}

.art-related {
  margin-top: 46px
}

.art-related h3 {
  font-family: var(--fs);
  font-weight: 500;
  color: var(--ink);
  font-size: 1.5rem;
  margin-bottom: 20px
}

.art-related .blog-grid {
  grid-template-columns: 1fr 1fr
}

.art-wide {
  max-width: 1060px
}

.art-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 270px;
  gap: 46px;
  align-items: start
}

.art-toc {
  position: sticky;
  top: 96px;
  display: flex;
  flex-direction: column;
  gap: 18px
}

.art-toc-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 24px 22px;
  box-shadow: 0 26px 60px -44px rgba(79, 14, 27, .42)
}

.art-toc-l {
  font-family: var(--fl);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink);
  text-align: center
}

.art-toc-rule {
  height: 1px;
  background: var(--line);
  margin: 14px -22px 18px
}

.art-toc ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 15px
}

.art-toc a {
  font-family: var(--fl);
  font-size: 14px;
  line-height: 1.42;
  color: var(--body);
  cursor: pointer;
  transition: color .18s;
  display: block
}

.art-toc a:hover {
  color: var(--g-deep)
}

.art-cta {
  position: relative;
  overflow: visible;
  margin-top: 56px;
  border-radius: 18px;
  padding: 82px 22px 26px;
  text-align: center;
  background-image: repeating-radial-gradient(circle at 50% 26%, transparent 0 20px, rgba(255, 255, 255, .08) 20px 21px, transparent 21px 23px), radial-gradient(120% 90% at 50% -6%, rgba(242, 194, 74, .18), transparent 55%), linear-gradient(165deg, var(--g-mid), var(--g-deep));
  box-shadow: 0 30px 70px -42px rgba(124, 47, 28, .72)
}

.art-cta-glow {
  position: absolute;
  left: 50%;
  bottom: 34px;
  width: 200px;
  height: 92px;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(163, 15, 36, .5), transparent 68%);
  filter: blur(14px);
  pointer-events: none
}

.art-cta-photo {
  position: absolute;
  top: -62px;
  left: 50%;
  transform: translateX(-50%);
  width: 132px;
  height: 132px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid rgba(255, 255, 255, .72);
  box-shadow: 0 20px 42px -14px rgba(0, 0, 0, .62)
}

.art-cta-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 16%;
  display: block
}

.art-cta-eyebrow {
  position: relative;
  font-family: var(--fs);
  font-style: italic;
  font-size: 14px;
  color: #F2D9B0;
  margin-bottom: 8px
}

.art-cta-name {
  position: relative;
  font-family: var(--fl);
  font-weight: 700;
  font-size: 1.12rem;
  color: #fff
}

.art-cta-role {
  position: relative;
  font-family: var(--fl);
  font-size: 12.5px;
  letter-spacing: .04em;
  color: #E6CBBE;
  margin-top: 3px;
  margin-bottom: 18px
}

.art-cta-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--fl);
  font-weight: 600;
  font-size: 14.5px;
  color: var(--g-deep);
  background: #fff;
  border-radius: 999px;
  padding: 12px 20px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .5), 0 12px 26px -8px rgba(163, 15, 36, .75), 0 8px 20px -6px rgba(163, 15, 36, .6);
  transition: transform .2s, box-shadow .2s
}

.art-cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .6), 0 18px 34px -8px rgba(163, 15, 36, .9), 0 12px 26px -6px rgba(163, 15, 36, .7)
}

.art-cta-btn .ar {
  transition: transform .2s
}

.art-cta-btn:hover .ar {
  transform: translateX(3px)
}

@media(max-width:900px) {
  .art-layout {
    grid-template-columns: 1fr;
    gap: 0
  }

  .art-toc {
    position: static;
    margin-bottom: 22px;
    order: -1;
    gap: 0
  }

  .art-cta {
    display: none
  }
}

.afx {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 240px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 34px;
  text-align: center;
  overflow: hidden
}

.afx-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 80% at 50% -25%, rgba(242, 194, 74, .12), transparent 60%), radial-gradient(90% 75% at 50% 125%, rgba(163, 15, 36, .5), transparent 62%)
}

.afx-rings {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 520px;
  height: 520px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 0 0 58px rgba(255, 255, 255, .04), 0 0 0 128px rgba(255, 255, 255, .028), 0 0 0 210px rgba(255, 255, 255, .018);
  pointer-events: none
}

.afx-emblem {
  position: relative;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 32%, rgba(255, 255, 255, .14), rgba(255, 255, 255, .03));
  border: 1px solid rgba(255, 255, 255, .22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 22px 44px -22px rgba(0, 0, 0, .55)
}

.afx-emblem svg {
  width: 52px;
  height: 52px;
  display: block
}

.afx-orbit {
  transform-origin: 48px 48px;
  animation: afxspin 16s linear infinite
}

.afx-kicker {
  position: relative;
  font-family: var(--fl);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: #F2C24A
}

.afx-rule {
  position: relative;
  width: 56px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, #F2C24A, transparent)
}

@keyframes afxspin {
  to {
    transform: rotate(360deg)
  }
}

@media(max-width:900px) {
  .art-related .blog-grid {
    grid-template-columns: 1fr
  }
}

@media(prefers-reduced-motion:reduce) {
  .afx-orbit {
    animation: none
  }
}

/* icertis-style article header */
.art-head {
  background: var(--surface);
  padding: 46px 0 42px
}

.art-head-grid {
  display: grid;
  grid-template-columns: 1.04fr .96fr;
  gap: 50px;
  align-items: center
}

.art-head .art-crumb {
  padding-top: 0;
  margin-bottom: 12px
}

.art-head .art-title {
  margin-top: 0
}

.art-titlerule {
  display: block;
  width: 56px;
  height: 3px;
  background: var(--g-mid);
  border-radius: 2px;
  margin: 20px 0
}

.art-head .art-lede {
  margin-top: 0;
  font-size: 1.06rem;
  max-width: 52ch
}

.art-head .art-byline {
  margin-top: 22px
}

.art-frame {
  position: relative;
  padding: 18px 18px 0 0;
  max-width: 560px;
  margin-left: auto
}

.art-frame::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 72%;
  height: 82%;
  border: 2px solid var(--spring);
  border-radius: 4px;
  z-index: 0
}

.art-frame img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 6px;
  background: #f6f6f6;
  box-shadow: 0 36px 80px -44px rgba(79, 14, 27, .5)
}

.art-divider {
  height: 3px;
  background: var(--grad)
}

.art-date {
  font-family: var(--fl);
  font-size: 13px;
  letter-spacing: .05em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--muted);
  margin: 6px 0 18px
}

.bc-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 10px;
  background: #f6f6f6 center/cover no-repeat;
  margin-bottom: 16px
}

.bf-img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 248px;
  object-fit: cover;
  border-radius: 14px
}

@media(max-width:900px) {
  .art-head-grid {
    grid-template-columns: 1fr;
    gap: 28px
  }

  .art-frame {
    margin: 0;
    max-width: 520px;
    padding: 14px 14px 0 0
  }
}

.brand-lock {
  height: 40px;
  width: auto;
  display: block;
  flex: none;
  object-fit: contain
}

.nav-row .brand-lock {
  transform: translateY(-2px)
}

.brand {
  flex: none
}

@media(max-width:560px) {
  .brand-lock {
    height: 34px
  }
}

html[data-texture] .pillar.dark {
  background-image: repeating-radial-gradient(circle at 82% 22%, rgba(255, 255, 255, .12) 0 1.5px, transparent 1.5px 30px), linear-gradient(158deg, #4f0e1b, #2a0710) !important
}

html[data-texture] footer.ft {
  background-image: var(--footer-bg) !important
}

.demo-frame {
  display: block;
  width: 100%;
  aspect-ratio: 16/10;
  border: 0;
  border-radius: 20px;
  box-shadow: 0 40px 90px -45px rgba(0, 0, 0, .34);
  background: #FBF8F1
}

.tad-sec.tad-light {
  background: linear-gradient(170deg, #ffffff 0%, #f6f6f6 60%, #f1f1f1 100%)
}

.tad-light .heyebrow {
  background: #fff !important;
  border-color: var(--line) !important;
  color: var(--g-deep) !important
}

.tad-light .h2 {
  color: var(--ink) !important
}

.tad-light .lede {
  color: var(--body) !important
}

.tad-light .tad-left {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .07);
  box-shadow: 0 20px 50px -34px rgba(0, 0, 0, .18)
}

.tad-light .tad-label {
  color: var(--muted)
}

.tad-light .tad-preset {
  background: #FBF8F1;
  border-color: var(--line);
  color: var(--ink)
}

.tad-light .tad-preset:hover {
  background: #F4EEE0
}

.tad-light .tad-preset.on {
  border-color: var(--spring);
  background: #faf4f1
}

.tad-light .tad-preset .pi {
  background: var(--g-soft);
  color: var(--g-deep)
}

.tad-light .tad-pt {
  color: var(--ink)
}

.tad-light .tad-ps {
  color: var(--muted)
}

.tad-light .tad-or {
  color: var(--muted)
}

.tad-light .tad-or::before,
.tad-light .tad-or::after {
  background: var(--line)
}

.tad-light .tad-cseg {
  border-color: var(--line);
  color: var(--body);
  background: #fff
}

.tad-light .tad-cseg.on {
  background: var(--g-deep);
  color: #fff;
  border-color: var(--g-deep)
}

.tad-light .tad-seg {
  border-color: var(--line);
  color: var(--body);
  background: #fff
}

.tad-light .tad-seg:hover {
  background: #F4EEE0;
  color: var(--ink)
}

.tad-light .tad-seg.on {
  background: var(--g-deep);
  color: #fff;
  border-color: var(--g-deep)
}

.tad-light .tad-input {
  background: #fff;
  border-color: var(--line);
  color: var(--ink)
}

.tad-light .tad-input::placeholder {
  color: var(--muted)
}

.tad-light .tad-input:focus {
  border-color: var(--spring)
}

.tad-light .tad-run {
  background: var(--g-deep);
  color: #fff
}

.tad-light .tad-note {
  color: var(--muted)
}

.tad-light .tad-app {
  box-shadow: 0 30px 60px -32px rgba(0, 0, 0, .2);
  border: 1px solid rgba(0, 0, 0, .06)
}

/* CTA -> two separate panels with a gap (front.com style) */
.ctaX-wrap {
  border-radius: 0;
  overflow: visible;
  box-shadow: none;
  gap: 20px
}

.ctaX-left {
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 40px 90px -58px rgba(79, 14, 27, .45)
}

.ctaX-right {
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 40px 90px -58px rgba(79, 14, 27, .4)
}

@media(max-width:860px) {
  .ctaX-wrap {
    gap: 14px
  }
}

/* products/solutions mega menu -> real mini dashboard */
.mws-side {
  justify-content: flex-start
}

.mws-lg {
  width: 17px;
  height: 17px;
  border-radius: 5px;
  background: linear-gradient(150deg, var(--spring), var(--g-mid));
  margin-bottom: 4px;
  flex: none
}

.mws-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 7px;
  border-bottom: 1px solid #F0EADC;
  margin-bottom: 2px
}

.mws-hd b {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink)
}

.mws-ct {
  font-size: 8.5px;
  font-weight: 700;
  background: #F0EADC;
  color: var(--body);
  border-radius: 999px;
  padding: 1px 6px
}

.mws-tx {
  flex: 1;
  min-width: 0;
  line-height: 1.18
}

.mws-tx b {
  display: block;
  font-size: 9.5px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.mws-tx s {
  display: block;
  font-size: 8px;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px
}

.mws-tag.warn {
  background: #FCEFE9;
  color: #9A4528
}

.mws-tag.ok {
  background: var(--g-soft);
  color: var(--g-deep)
}

/* ===== round-3: brand accent, modals, footer watermark, anim width ===== */

.btn-dark {
  background: var(--grad) !important;
  color: #fff !important;
  border-color: transparent !important
}

.btn-dark:hover {
  background: var(--grad-hover) !important;
  color: #fff !important;
  box-shadow: 0 16px 34px -14px rgba(90, 15, 35, .5)
}

.btn-white {
  background: #fff !important;
  color: var(--maroon-deep) !important
}

.btn-white:hover {
  background: #f9e3e5 !important;
  color: var(--maroon-deep) !important
}

.tad-light .tad-run {
  background: var(--grad);
  color: #fff
}

.tad-light .tad-run:hover {
  box-shadow: 0 16px 34px -14px rgba(90, 15, 35, .55)
}

.heyebrow .sp {
  background: var(--accent)
}

@keyframes pulse {

  0%,
  100% {
    box-shadow: 0 0 0 4px rgba(163, 15, 36, .22)
  }

  50% {
    box-shadow: 0 0 0 7px rgba(163, 15, 36, .07)
  }
}

.ft {
  position: relative;
  overflow: hidden
}

.zmodal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px
}

.zmodal.open {
  display: flex
}

.zmodal-ov {
  position: absolute;
  inset: 0;
  background: rgba(20, 4, 9, .5);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px)
}

.zmodal-box {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 960px;
  max-height: 92vh;
  overflow: auto;
  background: #fff;
  border-radius: 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  box-shadow: 0 60px 120px -40px rgba(0, 0, 0, .55)
}

.zm-close {
  position: absolute;
  top: 15px;
  right: 17px;
  z-index: 3;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, .16);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: background .2s
}

.zm-close:hover {
  background: rgba(255, 255, 255, .3)
}

.zm-left {
  padding: 46px 42px;
  color: #fff;
  background: linear-gradient(162deg, #241a16, #140e0b);
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: 24px 0 0 24px;
  position: relative;
  overflow: hidden
}

.zm-left::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 80% at 82% -10%, rgba(163, 15, 36, .18), transparent 60%);
  pointer-events: none
}

.zm-left>* {
  position: relative;
  z-index: 1
}

.zm-left h3 {
  font-family: var(--fs);
  font-weight: 500;
  font-size: 1.65rem;
  line-height: 1.18;
  color: #fff;
  letter-spacing: -.01em
}

.zm-pts {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 15px
}

.zm-pt {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-family: var(--fl);
  font-weight: 500;
  font-size: 14.5px;
  color: #efe2dc;
  line-height: 1.4
}

.zm-pt .ck {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  color: #ffffff;
  display: grid;
  place-items: center;
  margin-top: 1px
}

.zm-pt .ck svg {
  width: 13px;
  height: 13px
}

.zm-foot {
  margin-top: 30px;
  font-family: var(--fl);
  font-size: 11.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5)
}

.zm-logos {
  margin-top: 13px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  align-items: center;
  font-family: var(--fl);
  font-weight: 700;
  font-size: 13.5px;
  color: rgba(255, 255, 255, .6)
}

.zm-right {
  padding: 44px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center
}

.zm-h {
  font-family: var(--fs);
  font-weight: 500;
  font-size: 1.85rem;
  color: var(--ink);
  letter-spacing: -.02em;
  line-height: 1.1
}

.zm-sub {
  font-family: var(--fl);
  font-size: 14px;
  color: var(--muted);
  margin-top: 8px
}

.zm-field {
  margin-top: 15px
}

.zm-grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 13px
}

.zm-field label {
  display: block;
  font-family: var(--fl);
  font-weight: 600;
  font-size: 12.5px;
  color: var(--ink);
  margin-bottom: 6px
}

.zm-field input,
.zm-field select {
  width: 100%;
  font-family: var(--fl);
  font-size: 14px;
  color: var(--ink);
  background: #F7F4EC;
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 12px 13px;
  outline: none;
  transition: border-color .2s, background .2s
}

.zm-field input:focus,
.zm-field select:focus {
  border-color: var(--accent);
  background: #fff
}

.zm-field input::placeholder {
  color: #a39d8c
}

.zm-submit {
  margin-top: 20px;
  width: 100%;
  font-family: var(--fl);
  font-weight: 700;
  font-size: 15px;
  border: none;
  border-radius: 999px;
  padding: 14px 22px;
  background: var(--accent);
  color: var(--ink);
  cursor: pointer;
  transition: transform .18s, box-shadow .25s, background .2s
}

.zm-submit:hover {
  background: var(--accent-deep);
  transform: translateY(-2px);
  box-shadow: 0 16px 34px -14px rgba(90, 15, 35, .5)
}

.zm-legal {
  font-family: var(--fl);
  font-size: 11px;
  color: var(--muted);
  margin-top: 13px;
  line-height: 1.5
}

.zm-thanks {
  text-align: center;
  padding: 24px 0
}

.zm-thanks .tk {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--g-soft);
  color: var(--g-deep);
  display: grid;
  place-items: center;
  margin: 0 auto 16px
}

.zm-thanks h4 {
  font-family: var(--fs);
  font-weight: 500;
  font-size: 1.4rem;
  color: var(--ink)
}

.zm-thanks p {
  font-family: var(--fl);
  font-size: 14px;
  color: var(--body);
  margin: 8px auto 0;
  max-width: 34ch;
  line-height: 1.5
}

body.zm-lock {
  overflow: hidden
}

@media(max-width:760px) {
  .zmodal-box {
    grid-template-columns: 1fr;
    max-width: 480px
  }

  .zm-left {
    border-radius: 24px 24px 0 0;
    padding: 32px 26px
  }

  .zm-right {
    padding: 30px 24px
  }

  .zm-grid2 {
    grid-template-columns: 1fr
  }
}

/* ===== round-4 ===== */
#home-hero .inner {
  max-width: 1140px
}

#home-hero h1 {
  font-size: clamp(2.3rem, 4.4vw, 3.7rem)
}

.btn {
  position: relative;
  overflow: hidden
}

.btn-dark,
.btn-white {
  box-shadow: 0 8px 20px -10px rgba(90, 15, 35, .5);
  transition: transform .22s cubic-bezier(.34, 1.5, .64, 1), box-shadow .25s, background .2s
}

.btn-dark:hover,
.btn-white:hover {
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 18px 40px -12px rgba(90, 15, 35, .62) !important
}

.btn:active {
  transform: translateY(0) scale(.97) !important
}

.btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: -45%;
  width: 38%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .5), transparent);
  transform: skewX(-18deg);
  opacity: 0;
  pointer-events: none
}

.btn:hover::after {
  animation: btnShine .75s ease
}

@keyframes btnShine {
  0% {
    left: -45%;
    opacity: 0
  }

  18% {
    opacity: 1
  }

  100% {
    left: 135%;
    opacity: 0
  }
}

.btn .ar {
  transition: transform .25s cubic-bezier(.34, 1.5, .64, 1)
}

.btn:hover .ar {
  transform: translateX(5px)
}

.mw-col {
  justify-content: flex-start
}

.mw-shot {
  background: #F1EEE6 !important;
  border: 1px solid var(--line)
}

.mws-app {
  box-shadow: 0 16px 34px -18px rgba(0, 0, 0, .3);
  border: 1px solid rgba(0, 0, 0, .06)
}

.mega-ds {
  text-wrap: balance
}

.mws-foot {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding-top: 7px;
  border-top: 1px solid #F0EADC;
  font-family: var(--fl);
  font-size: 8.5px;
  color: var(--muted)
}

.mws-foot b {
  color: var(--g-deep);
  font-weight: 700
}

.mws-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--spring);
  flex: none
}

/* ===== round-5: rings throughout, gold hover, FAQ, demo title, team, logos, source-flow ===== */
/* prominent concentric rings on every decorative section (light + dark) */
/* .sec.dec:not(.sec-dark)::before {
  background: repeating-radial-gradient(circle, transparent 0 29px, color-mix(in srgb, var(--g-deep) 9%, transparent) 29px 30px, transparent 30px 32px);
  width: 760px;
  height: 760px
} */

/* .sec.dec::after {
  content: "";
  position: absolute;
  width: 540px;
  height: 540px;
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
  background: repeating-radial-gradient(circle, transparent 0 26px, color-mix(in srgb, var(--spring) 13%, transparent) 26px 27px, transparent 27px 29px);
  -webkit-mask: radial-gradient(circle, #000 50%, transparent 72%);
  mask: radial-gradient(circle, #000 50%, transparent 72%)
} */

.sec-dark.dec::after {
  background: repeating-radial-gradient(circle, transparent 0 26px, rgba(255, 255, 255, .07) 26px 27px, transparent 27px 29px)
}

.sec.dec.tr::after {
  bottom: -170px;
  left: -150px
}

.sec.dec.bl::after {
  top: -170px;
  right: -150px
}

.sec.dec.tl::after {
  bottom: -170px;
  right: -150px
}

.sec.dec.br::after {
  top: -170px;
  left: -150px
}

/* gold hover highlight (Front-style) on every card/box */
.pcard,
.agent,
.pillar,
.seg-tab,
.team-card,
.wz,
.isrc-src {
  transition: transform .25s cubic-bezier(.16, 1, .3, 1), box-shadow .25s, border-color .2s
}

.pcard:hover,
.agent:hover,
.pillar:hover,
.seg-tab:hover,
.team-card:hover,
.wz:hover,
.isrc-src:hover {
  border-color: var(--accent) !important;
  box-shadow: 0 26px 54px -30px rgba(163, 15, 36, .32) !important
}

.logo-tile:hover {
  outline: 2px solid var(--accent) !important;
  outline-offset: -2px
}

/* FAQ — Front look */
.faq-wrap {
  max-width: 840px
}

.faq-wrap .center {
  margin-bottom: 30px
}

.faq-sub {
  font-size: 1.04rem;
  color: var(--muted);
  max-width: 60ch;
  margin: 14px auto 0;
  line-height: 1.5
}

.faq-sub a {
  color: var(--g-deep);
  border-bottom: 1.5px solid rgba(79, 14, 27, .28);
  font-weight: 600
}

.faq-sub a:hover {
  border-color: var(--g-deep)
}

.faq-q {
  font-size: 1.16rem;
  padding: 25px 4px
}

.faq-a .in {
  font-size: 1.02rem
}

/* demo title on one line */
.tad-sec .center {
  max-width: none
}

.tad-sec .h2 {
  white-space: nowrap
}

@media(max-width:760px) {
  .tad-sec .h2 {
    white-space: normal
  }
}

/* bigger logo cloud (Front-style) + wordmark partner tiles */
.logo-cloud {
  grid-template-columns: repeat(5, 1fr);
  gap: 22px;
  max-width: 960px
}

.logo-cloud .logo-tile {
  transform: none
}

.logo-cloud .logo-tile:nth-child(even) {
  transform: translateY(16px)
}

.logo-cloud .logo-tile:nth-child(even):hover {
  transform: translateY(9px) scale(1.05)
}

.logo-cloud .logo-tile:hover {
  transform: translateY(-6px) scale(1.05)
}

.logo-tile img {
  height: 44px;
  max-width: 78%
}

.logo-tile .lname {
  font-size: 11.5px;
  margin-top: 2px
}

@media(max-width:760px) {
  .logo-cloud {
    grid-template-columns: repeat(3, 1fr)
  }
}

@media(max-width:480px) {
  .logo-cloud {
    grid-template-columns: repeat(2, 1fr)
  }
}

/* About — leadership grid */
.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 8px
}

.team-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 28px 24px;
  text-align: left
}

.team-n {
  font-family: var(--fl);
  font-weight: 600;
  font-size: 1.12rem;
  color: var(--ink)
}

.team-role {
  font-family: var(--fl);
  font-weight: 600;
  font-size: .84rem;
  color: var(--g-mid);
  margin-top: 3px
}

.team-bio {
  font-size: .95rem;
  color: var(--body);
  margin-top: 11px;
  line-height: 1.5
}

@media(max-width:900px) {
  .team-grid {
    grid-template-columns: 1fr 1fr
  }
}

@media(max-width:520px) {
  .team-grid {
    grid-template-columns: 1fr
  }
}

/* Integrations — booking-into-ticket source flow */
.isrc-wrap {
  display: grid;
  grid-template-columns: 1fr auto 1.25fr;
  align-items: center;
  gap: 22px;
  max-width: 1000px;
  margin: 8px auto 0
}

.isrc-srcs {
  display: flex;
  flex-direction: column;
  gap: 14px
}

.isrc-src {
  display: flex;
  align-items: center;
  gap: 13px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px 18px
}

.isrc-st b {
  display: block;
  font-family: var(--fl);
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--ink)
}

.isrc-st span {
  display: block;
  font-size: .86rem;
  color: var(--muted);
  margin-top: 2px
}

.isrc-flow {
  position: relative;
  width: 70px;
  height: 3px;
  display: flex;
  align-items: center
}

.isrc-ln {
  position: absolute;
  left: 0;
  right: 8px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--g-soft), var(--g-mid))
}

.isrc-nd {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--g-mid);
  box-shadow: 0 0 0 4px rgba(163, 15, 36, .14);
  transform: translate(-50%, -50%)
}

.isrc-ar {
  position: absolute;
  right: -2px;
  top: 50%;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 9px solid var(--g-mid);
  transform: translateY(-50%)
}

.isrc-ticket {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 8px;
  box-shadow: 0 30px 60px -40px rgba(79, 14, 27, .3)
}

.isrc-th {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--card);
  border-radius: 12px 12px 0 0
}

.isrc-bk {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--g-soft);
  color: var(--g-deep);
  display: grid;
  place-items: center;
  flex: none
}

.isrc-tt b {
  display: block;
  font-family: var(--fl);
  font-weight: 700;
  font-size: .98rem;
  color: var(--ink)
}

.isrc-tt span {
  display: block;
  font-size: .82rem;
  color: var(--muted);
  margin-top: 1px
}

.isrc-rows {
  padding: 8px 6px 4px
}

.isrc-r {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 10px;
  font-size: .92rem;
  color: var(--ink)
}

.isrc-r+.isrc-r {
  border-top: 1px solid #F4EFE2
}

.isrc-tag {
  flex: none;
  min-width: 84px;
  text-align: center;
  font-family: var(--fl);
  font-weight: 700;
  font-size: .68rem;
  letter-spacing: .03em;
  text-transform: uppercase;
  padding: 5px 9px;
  border-radius: 999px
}

.isrc-tag.zh {
  background: var(--g-soft);
  color: var(--g-deep)
}

.isrc-tag.ju {
  background: var(--accent-soft);
  color: var(--accent-deep)
}

.isrc-tag.vt {
  background: #f3e2db;
  color: #6e280a
}

.isrc-tag.hcn {
  background: #efe9e7;
  color: var(--forest)
}

.isrc-rv {
  color: var(--body)
}

@media(max-width:820px) {
  .isrc-wrap {
    grid-template-columns: 1fr
  }

  .isrc-flow {
    width: 100%;
    height: 40px;
    transform: rotate(90deg)
  }
}

/* ===== round-6: clipping fixes, live demo, write-your-own highlight, orphan QA, team photos ===== */
/* wider hero animation embeds (fixes ai-agents 5th-node clip; bigger showcase) */
.heromock {
  max-width: 1000px
}

/* orphan-word QA — balance headings, prevent single-word last lines in body copy */
.h1,
.h2,
.h3,
.hero h1,
.so-big,
.quote blockquote,
.pillar h3,
.pcard h4,
.agent h4,
.fpoint h4 {
  text-wrap: balance
}

.sub-txt,
.lede,
.faq-sub,
.pcard p,
.fpoint p,
.agent p,
.pillar p,
.mega-ds,
.seg-tab .hd,
.team-bio,
.so-sub,
.cta p,
.hero .sub-txt {
  text-wrap: pretty
}

/* highlight the "or try your own ticket" across every demo instance */
.tad-or {
  color: var(--accent) !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important
}

.tad-or::before,
.tad-or::after {
  background: rgba(163, 15, 36, .45) !important
}

.tad-chans {
  position: relative
}

.tad-input {
  border-color: rgba(163, 15, 36, .55) !important;
  box-shadow: 0 0 0 3px rgba(163, 15, 36, .10)
}

.tad-input:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 4px rgba(163, 15, 36, .22) !important
}

.tad-run {
  background: var(--accent) !important;
  color: #000000 !important
}

.tad-run:hover {
  box-shadow: 0 16px 34px -14px rgba(163, 15, 36, .6) !important
}

/* Live Demo nav highlight */
.nav-live {
  background: var(--accent-soft) !important;
  color: var(--accent-ink) !important;
  font-weight: 700 !important;
  border: 1px solid rgba(25, 125, 51, .45)
}

.nav-live:hover {
  background: var(--accent) !important;
  color: #ffffff !important
}

.nav-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(25, 125, 51, .3);
  animation: pulse 2.4s infinite
}

#tadSec3 .tad-shell {
  max-width: 1060px;
  margin-left: auto;
  margin-right: auto
}

/* leadership cards -> photos + LinkedIn */
.team-card {
  display: flex;
  flex-direction: column;
  text-decoration: none
}

.team-ph {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: 14px;
  margin-bottom: 16px;
  background: var(--g-soft)
}

.team-card .team-n {
  display: flex;
  align-items: center;
  gap: 7px
}

.team-card .team-n svg {
  width: 15px;
  height: 15px;
  color: #0A66C2;
  opacity: 0;
  transition: opacity .2s
}

.team-card:hover .team-n svg {
  opacity: 1
}

.team-li {
  margin-top: 13px;
  font-family: var(--fl);
  font-weight: 600;
  font-size: 12.5px;
  color: #0A66C2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  opacity: .85
}

.team-li svg {
  width: 14px;
  height: 14px
}

.team-card:hover {
  transform: translateY(-4px)
}

/* ===== round-8b: real integration logos ===== */
.logo-tile .lt-real {
  height: auto;
  width: auto;
  max-height: 46px;
  max-width: 86%;
  object-fit: contain
}

.logo-tile .lt-real.lt-wide {
  max-height: 72px;
  max-width: 90%
}

.isrc-logo {
  width: auto;
  height: 30px;
  max-width: 42px;
  object-fit: contain;
  flex: none;
  border-radius: 7px;
  background: #fff;
  padding: 2px
}

.isrc-logo.lt-wide {
  max-width: 74px;
  height: 26px
}

/* ===== Live design options (preview tool — settings saved per browser) ===== */
/* Announcement bar: locked to teal (hardcoded on .annbar) */
/* crimson = the shipping CTA: navy→plum→red gradient from the 2026 homepage */
html[data-cta-color="crimson"] .btn-dark {
  background: var(--grad) !important;
  color: #fff !important;
  border-color: transparent !important
}

html[data-cta-color="crimson"] .btn-dark:hover {
  background: var(--grad-hover) !important;
  color: #fff !important
}

html[data-cta-color="crimson"] .btn-white {
  background: #fff !important;
  color: var(--maroon-deep) !important;
  border-color: transparent !important
}

html[data-cta-color="crimson"] .btn-white:hover {
  background: #f9e3e5 !important;
  color: var(--maroon-deep) !important
}

html[data-cta-text="white"] .btn-dark {
  color: #fff !important
}

html[data-cta-shape="rounded"] .btn {
  border-radius: 13px !important
}

html[data-menu-bg="white"] .mega,
html[data-menu-bg="white"] .mega-wide {
  background: #ffffff !important
}

html[data-strip="flat"] header.nav {
  padding: 0 !important
}

html[data-strip="flat"] header.nav .nav-row {
  max-width: none !important;
  width: 100% !important;
  border-radius: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid #e3ded6 !important;
  background: #fff !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  padding-left: calc(max(0px, (100% - var(--maxw)) / 2) + 36px) !important;
  padding-right: calc(max(0px, (100% - var(--maxw)) / 2) + 36px) !important
}

/* nav strip: hero base tone at rest (top of page), white once scrolled */
header.nav .nav-row {
  background: var(--hero-base) !important;
  transition: background .3s ease, box-shadow .3s ease
}

header.nav.solid .nav-row {
  background: #fff !important
}

html[data-strip="flat"] header.nav .nav-row {
  background: var(--hero-base) !important
}

html[data-strip="flat"] header.nav.solid .nav-row {
  background: #fff !important
}

/* nav CTA buttons — matched bordered pair */
.nav-cta .nav-signin {
  border: 1.6px solid rgba(79, 14, 27, .3);
  border-radius: 999px;
  padding: 8px 18px;
  color: var(--g-deep);
  font-weight: 600;
  transition: background .18s, border-color .18s, color .18s
}

.nav-cta .nav-signin:hover {
  background: var(--g-soft);
  border-color: var(--g-deep);
  color: var(--g-deep)
}

.nav-cta .btn {
  padding: 9px 20px
}

.nav-cta .btn-dark {
  background: var(--grad) !important;
  color: #fff !important
}

.nav-cta .btn-dark:hover {
  background: var(--grad-hover) !important;
  color: #fff !important
}

@media(max-width:768px) {

  /* tab rows: swipe horizontally instead of wrapping into a tall stack */
  .tabbtns {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none
  }

  .tabbtns::-webkit-scrollbar {
    display: none
  }

  .tabbtns .tabbtn {
    flex: 0 0 auto;
    white-space: nowrap
  }

  .fblock>* {
    min-width: 0
  }

  /* collapse multi-column grids on phones (beats inline grid-template-columns overrides) */
  .prob-grid,
  .pains,
  .pillars,
  .seg-grid,
  .handle,
  .agents {
    grid-template-columns: 1fr !important
  }

  .stats {
    grid-template-columns: 1fr 1fr !important
  }
}

/* ===== WordPress split override — each page ships ONE .route div ===== */
.route {
  display: block !important
}

/* ============================================================
   2026 BRAND REFRESH — align every page with the new homepage
   (https://www.zealconnect.com/). One hero background, one
   surface set, one type-colour scale, one CTA gradient.
   ============================================================ */
/* ---- page surface ---- */
body {
  background: #fff;
  color: var(--body)
}

/* ---- HERO: identical background on every page ---- */
.hero,
.hero.sub,
section.hero {
  background-color: var(--hero-base) !important;
  background-image: var(--hero-bg) !important;
  background-position: center top !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

/* the photographic hero replaces the old orbit/glow decoration */
.hero::before {
  display: none !important
}

.hero .burst {
  display: none !important
}

.hero h1,
.hero .h1 {
  color: var(--ink)
}

.hero .sub-txt,
.hero .lede {
  color: var(--ink)
}

.hero .eyebrow {
  color: var(--red)
}

.hero .em,
.hero .accent {
  color: var(--red)
}

.heyebrow {
  background: rgba(255, 255, 255, .82);
  border-color: rgba(0, 0, 0, .07);
  color: var(--maroon-deep)
}

/* the strip above the hero carries the hero's base tone so the two read as one block */
.annbar+header.nav {
  background: var(--hero-base)
}

header.nav {
  background: var(--hero-base) !important;
  border-bottom: 1px solid rgba(0, 0, 0, .06);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 8px 26px -20px rgba(79, 14, 27, .25)
}

header.nav.solid {
  background: #fff !important
}

html[data-strip="flat"] header.nav .nav-row {
  border-bottom-color: rgba(0, 0, 0, .06) !important
}

header.nav.solid .nav-row {
  box-shadow: 0 10px 30px -20px rgba(79, 14, 27, .35) !important
}

/* ---- type colours (matches the new homepage scale) ---- */
.h1,
.h2,
.h3 {
  color: var(--ink)
}

.em,
.accent {
  color: var(--red)
}

.lede,
.sub-txt {
  color: var(--gray)
}

.eyebrow {
  color: var(--red)
}

.nav-link {
  color: var(--ink)
}

.nav-link:hover,
.nav-item:hover .nav-link,
.nav-link.active {
  color: var(--red);
  background: rgba(163, 15, 36, .05)
}

/* ---- section surfaces ---- */
.sec-cream {
  background: #fff
}

.sec-white {
  background: #fff
}

.sec-band {
  background: var(--band)
}

.ztone-cream {
  background: #fff !important
}

.logos {
  background: var(--band);
  border-top-color: rgba(0, 0, 0, .06);
  border-bottom-color: rgba(0, 0, 0, .06)
}

.lmk {
  border-color: rgba(0, 0, 0, .07)
}

/* ---- CTA gradient, everywhere a solid brand button appears ---- */
.btn-dark,
.zm-submit,
.qrun,
.tad-run,
.tad-dcta,
.mw-btn {
  background: var(--grad) !important;
  color: #fff !important;
  border-color: transparent !important
}

.btn-dark:hover,
.zm-submit:hover,
.qrun:hover,
.tad-run:hover,
.tad-dcta:hover {
  background: var(--grad-hover) !important;
  color: #fff !important
}

.btn-dark,
.btn-white {
  box-shadow: 0 10px 24px -12px rgba(90, 15, 35, .55)
}

.btn-dark:hover,
.btn-white:hover {
  box-shadow: 0 18px 40px -12px rgba(90, 15, 35, .62) !important
}

.nav-cta .nav-signin {
  color: var(--maroon-deep);
  border-color: rgba(79, 14, 27, .28)
}

.nav-cta .nav-signin:hover {
  background: #f9e3e5;
  border-color: var(--maroon);
  color: var(--maroon-deep)
}

/* ---- Live Demo pill: the new homepage green ---- */
.nav-live {
  background: #e8f3ea !important;
  color: var(--green) !important;
  border: 1px solid rgba(25, 125, 51, .35) !important
}

.nav-live:hover {
  background: #d8ecdd !important;
  color: var(--green) !important
}

.nav-live-dot {
  background: var(--green) !important;
  box-shadow: 0 0 0 3px rgba(25, 125, 51, .25) !important
}

/* ---- dropdowns / mega menus on white ---- */
.mega,
.mega-wide,
.mega-res {
  background: #fff !important;
  border-color: rgba(0, 0, 0, .07) !important;
  box-shadow: 0 30px 70px -30px rgba(79, 14, 27, .28) !important
}

.mega-link:hover {
  background: #f9e3e5
}

.mega-ic {
  background: #f9e3e5;
  color: var(--maroon)
}

.mw-shot {
  background: var(--mock-card) !important;
  border-color: var(--mock-line) !important
}

/* ---- cards: neutral hairlines, maroon hover ---- */
.pcard,
.agent,
.pillar,
.seg-tab,
.team-card,
.wz,
.isrc-src,
.isrc-ticket {
  border-color: rgba(0, 0, 0, .08)
}

.pcard:hover,
.agent:hover,
.pillar:hover,
.seg-tab:hover,
.team-card:hover,
.wz:hover,
.isrc-src:hover {
  border-color: var(--red) !important;
  box-shadow: 0 26px 54px -30px rgba(163, 15, 36, .3) !important
}

.logo-tile:hover {
  outline-color: var(--red) !important
}

/* ---- section decoration: the homepage's flowing arc / curve line-art ----
   replaces the old concentric-ring gradients. `.dec.tl|tr|bl|br` says which
   corner ::before sits in; ::after takes the opposite corner. ---- */
.sec.dec::before,
.sec.dec::after {
  border-radius: 0 !important;
  -webkit-mask: none !important;
  mask: none !important;
  background-color: transparent !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
}

/* ::before — curves, bleeding off the section's named corner */
.sec.dec::before {
  width: 1080px !important;
  height: 1080px !important
}
.sec.dec:not(.sec-dark)::before
.sec.dec.tl::before,
.sec.dec.bl::before {
  background-image: var(--deco-curves-l) !important
}

/* .sec.dec.tr::before, */
.sec.dec.br::before {
  background-image: var(--deco-curves-r) !important
}

.sec.dec.tl::before {
  top: -300px !important;
  left: -430px !important;
  background-position: left top !important
}

.sec.dec.tr::before {
  top: -300px !important;
  right: -430px !important;
  background-position: right top !important
}

.sec.dec.bl::before {
  bottom: -320px !important;
  left: -430px !important;
  background-position: left bottom !important
}

.sec.dec.br::before {
  bottom: -320px !important;
  right: -430px !important;
  background-position: right bottom !important
}

/* ::after — arcs, on the opposite corner, a touch smaller */
.sec.dec::after {
  width: 820px !important;
  height: 820px !important
}

.sec.dec.tr::after,
.sec.dec.br::after {
  background-image: var(--deco-arcs-l) !important
}

.sec.dec.tl::after,
.sec.dec.bl::after {
  background-image: var(--deco-arcs-r) !important
}

.sec.dec.tr::after {
  bottom: -260px !important;
  left: -330px !important;
  background-position: left bottom !important
}

.sec.dec.br::after {
  top: -260px !important;
  left: -330px !important;
  background-position: left top !important
}

.sec.dec.tl::after {
  bottom: -260px !important;
  right: -330px !important;
  background-position: right bottom !important
}

.sec.dec.bl::after {
  top: -260px !important;
  right: -330px !important;
  background-position: right top !important
}

/* on dark panels the same line-art, flipped to read light-on-dark */
.sec-dark.dec::before,
.sec-dark.dec::after {
  filter: invert(1);
  opacity: .16
}

/* ---- interactive demo (Watch the agents work) ---- */
.tad-or {
  color: var(--red) !important
}

.tad-input {
  border-color: rgba(163, 15, 36, .45) !important;
  box-shadow: 0 0 0 3px rgba(163, 15, 36, .08)
}

.tad-input:focus {
  border-color: var(--red) !important;
  box-shadow: 0 0 0 4px rgba(163, 15, 36, .18) !important
}

/* ---- modals ---- */
.zm-left {
  background: linear-gradient(162deg, var(--maroon-deep), #2a0710)
}

.zm-left::before {
  background: radial-gradient(120% 80% at 82% -10%, rgba(163, 15, 36, .28), transparent 60%)
}

.zm-pt .ck {
  background: #fff;
  color: var(--maroon-deep)
}

.zm-field input:focus,
.zm-field select:focus {
  border-color: var(--red)
}

/* ---- FOOTER: the new homepage footer artwork ---- */
footer.ft {
  background-color: #f5f5f5 !important;
  background-image: var(--footer-bg) !important;
  background-position: center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  color: #1a1a1a;
  border-top: 1px solid rgba(0, 0, 0, .07)
}

footer.ft .brand {
  color: var(--maroon-deep)
}

/* ============================================================
   HOMEPAGE PARITY — the header, footer, buttons and page shell
   from the 2026 homepage, applied to every route.
   ============================================================ */
/* ---- page shell: the homepage's 1520px container ---- */

.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 40px
}

/* ---- HEADER: transparent, sitting directly on the hero artwork ---- */
.hero .hero-top {
  position: relative;
  z-index: 5
}

header.nav {
  background: transparent !important;
  border-bottom: 0 !important;
  box-shadow: none !important
}

header.nav::before {
  display: none !important
}

header.nav .nav-row,
html[data-strip="flat"] header.nav .nav-row,
header.nav.solid .nav-row,
html[data-strip="flat"] header.nav.solid .nav-row {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  max-width: var(--maxw) !important;
  margin: 0 auto !important;
  padding-left: 40px !important;
  padding-right: 40px !important;
  height: auto !important;
  min-height: 82px;
  gap: 24px
}

.nav .brand img,
.nav-row .brand-lock {
  height: 62px;
  width: auto
}

/* .nav-links {
  gap: 34px;
  font-size: 18px;
  font-weight: 600;
  margin-left: auto;
  margin-right: 40px
} */

.nav-link {
/*   font-size: 16px;
  font-weight: 600; */
  padding: 9px 0
}

.nav-link:hover,
.nav-item:hover .nav-link,
.nav-link.active {
  background: transparent;
  color: var(--red)
}

.nav-cta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: 0
}

.nav-cta .nav-signin {
  font-size: 18px;
  font-weight: 600
}

/* the hero owns the top spacing now that the nav lives inside it */
.hero {
  padding-top: 20px !important
}

.hero .inner {
  padding-top: 56px
}

/* ---- BUTTONS: the homepage gradient pill-less button ---- */
.btn,
html[data-cta-shape="rounded"] .btn {
  border-radius: 8px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-weight: 600;
  font-size: 18px;
  height: 52px;
  padding: 0 27px;
  border-width: 0
}

.btn-lg,
.btn.big {
  height: 58px;
  padding: 0 28px
}

.nav-cta .btn {
  height: 52px;
  padding: 0 24px
}

.btn-out {
  border-width: 1.6px !important;
  border-style: solid
}

.nav-cta .nav-signin {
  border-radius: 8px;
  border: 1.6px solid rgba(79, 14, 27, .28);
  height: 52px;
  padding: 0 22px;
  display: inline-flex;
  align-items: center
}

.zm-submit,
.qrun,
.tad-run,
.tad-dcta,
.mw-btn {
  border-radius: 8px !important
}

/* ---- headings: the homepage weight ---- */
.h1,
.h2,
.h3,
html[data-font] .h1,
html[data-font] .h2,
html[data-font] .h3 {
  font-weight: 700
}

/* ---- FOOTER: one shared footer on every page ---- */
footer.ft {
  padding: 66px 0
}

.fgrid {
  display: grid;
  grid-template-columns: repeat(5,minmax(0,1fr));
  align-items: start
}

.fbrand .brand {
  display: inline-flex;
  margin-bottom: 18px
}

.fbrand img {
  height: 50px;
  width: auto
}

.fbrand .loc {
  margin-top: 10px;
  font-size: 16px;
  line-height: 1.5;
  color: #1a1a1a;
  max-width: 36ch
}

.fcol {
  padding-top: 28px
}

.fcol h5 {
  font-size: 22px;
  font-weight: 700;
  margin: 0;
  color: #1a1a1a;
  text-transform: none;
  letter-spacing: 0
}

.fcol ul {
  list-style: none;
  margin-top: 20px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px
}

.fcol li a {
  display: inline-block;
  font-size: 15px;
  color: #1a1a1a;
  white-space: nowrap;
  margin: 0
}

.fcol li a:hover {
  color: var(--red)
}

.socials {
  margin-top: 28px;
  display: flex;
  gap: 15px
}

.socials a {
  color: var(--red);
  display: inline-flex
}

.socials svg {
  width: 24px;
  height: 24px
}

.fbottom {
  margin-top: 46px;
  padding-top: 22px;
  border-top: 1px solid rgba(0, 0, 0, .12);
  font-size: 14px;
  color: var(--gray)
}

/* @media(max-width:1500px) {
  .fgrid {
    grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
    gap: 24px
  }
} */

@media(max-width:1180px) {
  .nav-links {
    display: none
  }

  .fgrid {
    grid-template-columns: 1fr 1fr;
    gap: 32px
  }

  .fbrand {
    grid-column: 1/-1
  }
}

@media(max-width:720px) {

  .container,
  header.nav .nav-row,
  html[data-strip="flat"] header.nav .nav-row {
    padding-left: 22px !important;
    padding-right: 22px !important
  }

  .nav .brand img,
  .nav-row .brand-lock {
    height: 44px
  }

  .btn,
  html[data-cta-shape="rounded"] .btn {
    font-size: 16px;
    height: 46px;
    padding: 0 20px
  }

  .btn-lg,
  .btn.big {
    height: 50px;
    padding: 0 22px
  }

  .nav-cta .nav-signin {
    display: none
  }

  .hero .inner {
    padding-top: 36px
  }

  .fgrid {
    grid-template-columns: 1fr;
  }

  .fbrand img {
    height: 52px
  }
}

/* ---- Live Demo: the homepage treatment — green text + ringed pulse dot ---- */
.nav-live,
.nav-live:hover {
  background: transparent !important;
  border: 0 !important;
  color: var(--green) !important;
  font-weight: 600 !important;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 0 !important
}

.nav-live-dot {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  border-radius: 50%;
  background: transparent !important;
  border: 1.5px solid var(--green);
  box-shadow: none !important;
  animation: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  order: 2
}

.nav-live-dot::after {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  animation: livepulse 2.2s infinite
}

@keyframes livepulse {
  50% {
    opacity: .35
  }
}

/* ---- alternating section rhythm: white / #f6f6f6, like the homepage ----
   `ztone` (js/zeal.js) tags every top-level section in turn. Both tones were
   resolving to white, which flattened the whole page; the second tone is the
   homepage's gray band. ---- */
.ztone-cream {
  background: #fff !important
}

.ztone-white {
  background: var(--band) !important
}

/* keep the demo section on the rhythm rather than its own warm gradient */
.tad-sec.tad-light {
  background: transparent
}

/* the line-art needs a touch more presence on the gray bands */
.ztone-white.dec::before,
.sec-band.dec::before {
  opacity: .9
}

/* ============================================================
   COMPAT — legacy page bodies on the 2026 base
   css/zeal-2026.css now supplies the brand tokens, the shell and
   the bare-element type scale. These rules stop its homepage
   defaults from leaking into components the other routes still
   use, and map the legacy class names onto the new system.
   ============================================================ */
/* the base centres bare h2 for the homepage; legacy headings use
   .h1/.h2/.h3 and inherit alignment from their own container */
.h1,
.h2,
.h3 {
  text-align: inherit
}

.h1 {
  margin-top: 0
}

.center .h1,
.center .h2,
.center .h3 {
  text-align: center
}

/* legacy accent + lede map onto the homepage's .accent / .sub */
.em {
  color: var(--red)
}

.lede,
.sub-txt {
  color: var(--gray)
}

/* sub-page heroes: the nav now lives inside the hero, so the hero
   owns the top spacing and the artwork is the only decoration */
.hero {
  padding: 20px 0 76px
}

.hero .inner {
  padding-top: 56px;
  max-width: 1000px;
  margin: 0 auto
}

.hero .eyebrow {
  color: var(--red)
}

.hero .sub-txt {
  color: var(--ink)
}

/* the demo section keeps the homepage's neutral surface */
.tad-sec.tad-light .lede {
  color: var(--gray)
}

@media(max-width:720px) {
  .hero {
    padding-bottom: 52px
  }

  .hero .inner {
    padding-top: 36px
  }
}

/* `.seg-grid` exists in both sheets — the legacy 2-up grid was winning
   over the homepage's 3-up segment cards. Scope the homepage version. */
.segments .seg-grid {
  grid-template-columns: repeat(3, 366px);
  gap: 39px 76px;
  justify-content: center;
  margin-top: 94px;
  padding-bottom: 140px
}

@media(max-width:1500px) {
  .segments .seg-grid {
    grid-template-columns: repeat(3, minmax(280px, 366px))
  }
}

@media(max-width:1180px) {
  .segments .seg-grid {
    grid-template-columns: repeat(2, minmax(280px, 366px))
  }
}

@media(max-width:768px) {
  .segments .seg-grid {
    grid-template-columns: minmax(0, 366px) !important
  }
}


/* ============ Front-style segment cards (photo cards, point 3) ============ */
.fcards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px
}

.fcard {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  text-decoration: none;
  transition: transform .32s cubic-bezier(.16, 1, .3, 1), box-shadow .32s
}

.fcard:hover {
  transform: translateY(-7px);
  box-shadow: 0 40px 78px -40px rgba(64, 23, 6, .34)
}

.fcard .fc-img {
  aspect-ratio: 16/10;
  background-size: cover;
  background-position: center;
  background-color: var(--g-soft)
}

.fcard .fc-body {
  padding: 24px 24px 26px;
  display: flex;
  flex-direction: column;
  flex: 1
}

.fcard .fc-tag {
  font-family: var(--fl);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--g-mid)
}

.fcard h3,
.dcard h3 {
  font-family: var(--fs);
  font-weight: 500;
  font-size: 1.42rem;
  letter-spacing: -.02em;
  line-height: 1.14;
  margin-top: 9px;
  color: var(--ink)
}

.fcard p {
  font-size: .95rem;
  color: var(--body);
  margin-top: 9px;
  line-height: 1.5;
  flex: 1
}

.fcard .more {
  margin-top: 18px;
  font-family: var(--fl);
  font-weight: 600;
  font-size: 14px;
  color: var(--g-deep) !important;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: gap .2s
}

.fcard:hover .more {
  gap: 12px
}

@media(max-width:900px) {
  .fcards {
    grid-template-columns: 1fr 1fr
  }
}

@media(max-width:560px) {
  .fcards {
    grid-template-columns: 1fr
  }
}


.zm-left{
	height:100%;
}



.mainPostGrid .elementor-post__thumbnail__link img{
	border-radius:10px;
}

.mainPostGrid .elementor-post__thumbnail__link{
	padding: 0 20px;
}


body .mainPostGrid .elementor-post__thumbnail__link::after{
	display:none !important;
}

.mainPostGrid .elementor-post__text {
    margin: 0 !important;
}

.mainPostGrid .elementor-post__title a{
	display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mainPostGrid .elementor-post__excerpt p {
	display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mainPostGrid .elementor-post__meta-data{
	border:unset !important;
}

.mainPostGrid article.elementor-post:hover {
    transform: translateY(-4px);
    box-shadow: 0 26px 50px -30px rgba(124,47,28,.32);
    border-color: #46534c;
}

.mainPostGrid article.elementor-post {
     transition: transform .25s, box-shadow .25s, border-color .2s;
border:1px solid #E4DCCB;
border-radius:18px;
}

.imageMain a{
	height:100%;
}