/* solution.css */
/* ==========================================================================
   Solutions page (includes/solution.php)
   Redesign: bold Figtree headings + Figtree body, light gradient background,
   brass accents, pill tabs, solid teal CTA button.
   ========================================================================== */
:root {
    --sol-font-heading: Figtree, sans-serif;
    --sol-font-body: Figtree, sans-serif;

    --sol-color-heading: #0E2B40;
    --sol-color-accent: #006B8D;
    --sol-color-body: #566878;
    --sol-color-pain: #0E9384;
    --sol-color-brass: #16B8A6;
    --sol-color-divider: rgba(14, 43, 64, 0.12);
}

@media (prefers-color-scheme: dark) {
    .sol-hero {
        --sol-color-heading: #F4F7FA;
        --sol-color-accent: #5CC0DC;
        --sol-color-body: #9DB2C6;
        --sol-color-pain: #3FD2C0;
        background: linear-gradient(160deg, #0F2F57 0%, #0A2342 55%, #071A33 100%);
    }
}

.sol-hero {
    padding: 40px 0 40px;
    background: linear-gradient(160deg, #FAFBFB 0%, #EEF1F2 55%, #E1E7E9 100%);
    font-family: var(--sol-font-body);
}

.sol-hero__top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-lg);
    margin-bottom: 28px;
}

.sol-hero__eyebrow {
    font-family: var(--sol-font-body);
    font-size: 15px;
    font-weight: 600;
    color: var(--sol-color-accent);
    margin: 0 0 var(--space-sm);
}

.sol-hero__heading {
    font-size: 2.25rem;
    line-height: 1.2;
    letter-spacing: -0.02em;
    font-weight: 700;
    color: #17304e;
    margin: 0 0 var(--space-md);
    font-family: var(--sol-font-heading);
    max-width: 720px;
}

.sol-hero__lede {
    max-width: 42ch;
    color: var(--sol-color-body);
    font-family: var(--sol-font-body);
    font-size: 17px;
    line-height: 1.75;
    margin: 0;
    flex-shrink: 0;
}

.sol-hero__lede .sol-link {
    color: var(--sol-color-accent);
}

/* Segmented pill tab switcher */
.sol-tabs-block {
    display: flex;
    align-items: stretch;
    width: 100%;
    gap: 6px;
    padding: 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--sol-color-divider);
    margin-bottom: 48px;
}

.sol-tabs {
    display: flex;
    align-items: stretch;
    flex: 1 1 auto;
    gap: 6px;
    min-width: 0;
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
}

.sol-tabs__label {
    display: flex;
    align-items: center;
    flex: 1.2 1 0;
    padding: 0 10px 0 24px;
    font-family: var(--sol-font-body);
    font-size: 18px;
    font-weight: 500;
    color: var(--sol-color-body);
    white-space: nowrap;
}

.sol-tab {
    flex: 1 1 0;
    padding: 13px 20px;
    border-radius: 999px;
    font-family: var(--sol-font-body);
    font-size: 18px;
    font-weight: 500;
    color: var(--sol-color-body);
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: center;
    white-space: nowrap;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.sol-tab:hover {
    color: var(--sol-color-heading);
}

.sol-tab.is-active {
    background: #ffffff;
    color: var(--sol-color-accent);
    font-weight: 600;
    box-shadow: 0 4px 14px rgba(14, 43, 64, 0.12);
}

/* Persona panel */
.sol-panel {
    display: none;
    opacity: 0;
    transition: opacity 0.35s ease;
}

.sol-panel.is-active {
    display: grid;
    grid-template-columns: 5fr 6fr;
    gap: 110px;
    align-items: start;
    opacity: 1;
}

.sol-panel.is-fading {
    opacity: 0;
}

.sol-panel__tag {
    position: relative;
    padding-top: 12px;
    font-family: var(--sol-font-body);
    font-size: 18px;
    font-weight: 600;
    color: var(--sol-color-accent);
    margin: 0 0 8px;
}

.sol-panel__tag::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 48px;
    height: 1px;
    background: var(--sol-color-brass);
}

.sol-panel__heading {
    font-family: var(--sol-font-heading);
    font-size: clamp(1.5rem, 2.4vw, 1.85rem);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: var(--sol-color-heading);
    margin: 0 0 12px;
}

.sol-panel__desc {
    font-family: var(--sol-font-body);
    color: var(--sol-color-body);
    font-size: 17px;
    line-height: 1.75;
    max-width: 42ch;
    margin: 0 0 var(--space-md);
}

.sol-panel__link {
    display: inline-block;
    background: var(--sol-color-accent);
    color: #ffffff;
    font-family: var(--sol-font-body);
    font-size: 15px;
    font-weight: 600;
    padding: 15px 26px;
    border-radius: 4px;
    text-decoration: none;
}

/* Pain -> solution list */
.sol-points {
    display: flex;
    flex-direction: column;
}

.sol-point {
    padding: 30px 22px 30px 26px;
    border-bottom: 1px solid var(--sol-color-divider);
    border-left: 2px solid transparent;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.sol-point:last-child {
    border-bottom: none;
}

.sol-point:hover {
    border-left-color: var(--sol-color-brass);
    background: rgba(22, 184, 166, 0.06);
}

.sol-point__pain {
    display: block;
    font-family: var(--sol-font-body);
    font-size: 14px;
    color: var(--sol-color-body);
    margin-bottom: 6px;
}

.sol-point__pain strong {
    color: var(--sol-color-pain);
    font-weight: 600;
}

.sol-point__title {
    font-family: var(--sol-font-heading);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--sol-color-heading);
    margin: 0 0 6px;
}

.sol-point__desc {
    font-family: var(--sol-font-body);
    font-size: 12px;
    line-height: 1.65;
    color: var(--sol-color-body);
    margin: 0;
    max-width: 460px;
}

@media (max-width: 1024px) {
    .sol-hero__heading {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }

    .sol-tabs-block {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        width: 100%;
        max-width: 100%;
        margin: 0 auto 40px;
        padding: 0;
        background: transparent;
        border: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border-radius: 0;
        text-align: center;
    }

    .sol-tabs__label {
        display: block;
        flex: none;
        width: 100%;
        box-sizing: border-box;
        padding: 0 8px;
        margin: 0;
        font-size: 16px;
        font-weight: 700;
        color: var(--sol-color-heading);
        white-space: normal;
        text-align: center;
    }

    /* flex-start + scrollIntoView avoids center-justify clipping the first tab */
    .sol-tabs {
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: center;
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
        padding: 9px;
        box-sizing: border-box;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 9px;
        scrollbar-width: none;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.45);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border: 1px solid var(--sol-color-divider);
    }

    .sol-tabs::-webkit-scrollbar {
        display: none;
    }

    .sol-tab {
        flex: 0 0 auto;
        padding: 12px 16px;
        font-size: 15px;
        scroll-snap-align: center;
    }
}

@media (max-width: 900px) {
    .sol-hero__top {
        flex-direction: column;
        align-items: center;
        gap: var(--space-md);
        text-align: center;
        margin-bottom: 20px;
    }

    .sol-hero__lede {
        max-width: 100%;
    }
}

@media (max-width: 860px) {
    .sol-panel.is-active {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }
}

@media (max-width: 600px) {
    .sol-hero__heading {
        font-size: 1.75rem;
    }

    .sol-panel__heading {
        font-size: 1.5rem;
    }

    .sol-point__title {
        font-size: 22px;
    }
}

/* intro_zerotouch_agent.css */
:root{
  --blue:#006B8D; --blue-hover:#007BA3; --ink:#F4F7FA; --mute:#A9BED0; --line:#3b3f41;
  --brass:#16B8A6;
  --serif:Figtree, sans-serif;
  --sans:Figtree, sans-serif;
  --bg-page:#071524;
  --bg-left:#0A1E31;
  --bg-right:#0F2A3D;
  --card-h:620px;
  --iza-top:72px;
}

.intro{background:#0A2443;padding:3vh 25px 3vh;text-align:center}
.intro h2{font-family:var(--sans);font-weight:600;font-size:40px;line-height:1.06;letter-spacing:-0.02em;color:var(--ink);margin:0 auto 30px;max-width:880px}
.intro p{margin:10px;color:var(--mute);font-family:var(--sans);font-weight:400;font-size:19px;line-height:1.65}

.iza-glass-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin: 25px auto 27px !important;
  padding:10px 22px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  box-shadow:0 8px 24px -8px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.12);
  color:#fff !important;
  font-size:13px !important;
  font-weight:700 !important;
  letter-spacing:.08em;
  text-transform:uppercase;
  white-space:nowrap;
  max-width:calc(100vw - 32px);
  box-sizing:border-box;
  opacity:0;
  animation:izaBadgePopIn .6s cubic-bezier(.34,1.56,.64,1) .15s forwards,
            izaBadgeGlow 2.6s ease-in-out 0.8s 3;
}

@keyframes izaBadgePopIn{
  0%{opacity:0;transform:scale(.6) translateY(10px)}
  70%{opacity:1;transform:scale(1.06) translateY(0)}
  100%{opacity:1;transform:scale(1) translateY(0)}
}

@keyframes izaBadgeGlow{
  0%,100%{box-shadow:0 8px 24px -8px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.12), 0 0 0 0 rgba(255,255,255,0)}
  50%{box-shadow:0 8px 24px -8px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.12), 0 0 20px 4px rgba(255,255,255,.25)}
}

.iza-badge-wrap{
  position:relative;
  display:inline-flex;
}

.iza-sparkle{
  position:absolute;
  width:16px;
  height:16px;
  clip-path:polygon(50% 0%,61% 35%,100% 50%,61% 65%,50% 100%,39% 65%,0% 50%,39% 35%);
  pointer-events:none;
  opacity:0;
}

.iza-sparkle--teal{
  top:-10px;
  right:-8px;
  left:auto;
  width:22px;
  height:22px;
  background:#3fd6c4;
  filter:drop-shadow(0 0 10px rgba(63,214,196,.7));
  animation:izaSparkleFloat 3.2s ease-in-out .4s infinite;
}

.iza-sparkle--gold{
  top:4px;
  right:-24px;
  left:auto;
  width:12px;
  height:12px;
  background:#16B8A6;
  filter:drop-shadow(0 0 8px rgba(22,184,166,.7));
  animation:izaSparkleFloat 3.2s ease-in-out 1.3s infinite;
}

@keyframes izaSparkleFloat{
  0%{opacity:0;transform:translateY(4px) scale(.6) rotate(0deg)}
  20%{opacity:1;transform:translateY(-2px) scale(1) rotate(15deg)}
  50%{opacity:1;transform:translateY(-8px) scale(1.1) rotate(0deg)}
  80%{opacity:1;transform:translateY(-2px) scale(1) rotate(-10deg)}
  100%{opacity:0;transform:translateY(4px) scale(.6) rotate(0deg)}
}

@media (prefers-reduced-motion: reduce){
  .iza-glass-badge{
    opacity:1;
    animation:none;
  }
  .iza-sparkle{
    display:none;
  }
}

/* ---------- stage (auto-advances every 2s; no scroll pinning) ---------- */
.scroll{position:relative;background:var(--bg-page);height:auto !important}
.stage{position:relative;top:auto;height:auto;min-height:0;overflow:hidden;
  display:grid;place-items:center;background:#0A2443;padding:28px 0 40px}

/* ---------- outer rounded panel wrapping the 3 columns ---------- */
.frame{width:calc(100% - 64px);max-width:1320px;height:min(598px,70vh);margin:0 auto;
  display:grid;grid-template-columns:28% 40% 32%;grid-template-rows:minmax(0,1fr);align-items:stretch;
  border:1px solid rgba(160,185,210,.18);border-radius:22px;background:var(--bg-left);
  box-shadow:0 40px 80px -40px rgba(0,0,0,.6);
  overflow:hidden;font-family:var(--sans)}

/* ---------- dynamic left summary (agent list) ---------- */
.summary{order:1;display:flex;flex-direction:column;align-items:stretch;padding:40px 29px 32px;background:#FFFFFF}
.iza-badge{display:grid;place-items:center;width:35px;height:35px;border-radius:4px;background:var(--blue);
  color:#fff;font-family:var(--sans);font-size:16px;font-style:normal;font-weight:600;letter-spacing:.02em;margin-bottom:17px}
.summary h3{font-family:var(--sans);font-weight:600;font-size:25px;line-height:1.2;letter-spacing:-0.02em;color:#0E2B40;margin:0 0 28px}

.summary ul,
.summary ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}

.summary li{position:relative;display:flex;align-items:center;gap:12px;padding:12px 16px 12px 12px;
  font-family:var(--sans);font-weight:600;font-size:14px;letter-spacing:.06em;text-transform:uppercase;
  color:#0E2B40;border-radius:6px;border:1px solid rgba(160,185,210,.35);
  background:#FFFFFF;
  cursor:pointer;
  transition:background .35s cubic-bezier(.2,.7,.2,1),color .35s cubic-bezier(.2,.7,.2,1),
    box-shadow .35s cubic-bezier(.2,.7,.2,1),transform .35s cubic-bezier(.2,.7,.2,1),border-color .35s cubic-bezier(.2,.7,.2,1)}

.summary li:hover{color:#006B8D}

.summary li:focus-visible{outline:2px solid #5CC0DC;outline-offset:2px}

.iza-num{display:grid;place-items:center;flex-shrink:0;width:34px;height:34px;border-radius:4px;
  background:rgba(255,255,255,.08);color:#8EA6BC;font-family:var(--sans);font-size:14px;font-weight:600;
  transition:background .35s cubic-bezier(.2,.7,.2,1),color .35s cubic-bezier(.2,.7,.2,1)}

/* ACTIVE row — white contrast card */
.summary li.cur{
  background:#006B8D;
  color:#FFFFFF;
  border:1px solid #006B8D;
  box-shadow:0 14px 30px -14px rgba(0,107,141,.45), inset 0 1px 0 rgba(255,255,255,.25);
  transform:translateX(4px);
}
.summary li.cur:hover{color:#FFFFFF}
.summary li.cur .iza-num{background:rgba(255,255,255,.18);color:#FFFFFF}

/* Thin brass progress bar beneath the agent list */
.iza-progress{position:relative;height:2px;width:100%;background:rgba(160,185,210,.16);
  border-radius:2px;margin:22px 0 26px;overflow:hidden}
.iza-progress__bar{position:absolute;left:0;top:0;height:100%;width:16.666%;background:var(--brass);
  border-radius:2px;transition:width .35s cubic-bezier(.2,.7,.2,1)}

.iza-cta{display:flex;justify-content:center;align-items:center;align-self:flex-start;gap:12px;margin-top:auto;
  background:var(--blue);color:#fff;
  padding:14px 16px;border-radius:4px;font:600 16px/1 var(--sans);text-decoration:none;
  transition:background .35s cubic-bezier(.2,.7,.2,1),transform .35s cubic-bezier(.2,.7,.2,1)}
.iza-cta:hover{background:var(--blue-hover);transform:translateY(-2px)}
.iza-cta:focus-visible{outline:2px solid #5CC0DC;outline-offset:2px}

/* ---------- middle image panel ---------- */
.card{order:2;height:auto;background:none;border:none;overflow:hidden}

.art{position:relative;box-sizing:border-box;height:100%;overflow:hidden;display:grid;place-items:center;padding:20px;
  background:#0A2443}

.art .layer{position:absolute;inset:16px 16px;display:grid;place-items:center;opacity:0;visibility:hidden;
  transition:opacity .35s ease,transform .35s ease,visibility 0s linear .35s;transform:translateY(8px);pointer-events:none;
  will-change:opacity,transform;contain:layout paint}
.art .layer.cur{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0);transition-delay:0s}
.art .layer:not(.cur) *{animation-play-state:paused !important}

/* ---------- right-hand agent detail column ---------- */
.detail{order:3;position:relative;display:flex;flex-direction:column;padding:40px 44px 38px 32px;background:#FFFFFF;
  border-left:1px solid rgba(160,185,210,.18)}
.detail-layer{position:absolute;inset:40px 44px 40px 32px;opacity:0;visibility:hidden;
  transition:opacity .5s ease,transform .5s ease;transform:translateY(8px);pointer-events:none}
.detail-layer.cur{opacity:1;visibility:visible;pointer-events:auto;position:relative;inset:auto;transform:translateY(0)}
.detail-num{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--blue);
  color:#fff;font-family:var(--sans);font-style:normal;font-size:16px;font-weight:600;margin-bottom:18px}
.detail h4{font-family:var(--sans);font-weight:600;font-size:34px;line-height:1.2;letter-spacing:-0.01em;color:#0E2B40;margin:0 0 16px}
.detail-desc{margin:0 0 20px;color:#567085;font-family:var(--sans);font-weight:400;font-size:17px;line-height:1.7}
.detail-points{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.detail-points li{position:relative;padding-left:20px;color:#0E2B40;font-family:var(--sans);font-weight:400;font-size:14.5px;line-height:1.6}
.detail-points li::before{content:'';position:absolute;left:0;top:7px;width:6px;height:6px;border-radius:50%;background:var(--brass)}

.frame a,
.frame button,
.frame input,
.frame p,
.frame li,
.frame span{font-family:var(--sans)}
.summary h3,
.capture-q,
.detail h4{font-family:var(--sans)}

/* ---------- Invoice Capture / Reader Agent mockups ---------- */
/* The mockup fills its layer and the 345x460 SVG is scaled by height so the
   whole illustration is always visible and centered in the middle column. */
.capture-shot{position:relative;width:100%;height:100%;min-width:0;min-height:0;display:flex;align-items:center;justify-content:center;padding:0}
.art .capture-shot > svg{width:auto;height:100%;max-width:100%;max-height:100%;border-radius:16px;overflow:hidden;
  box-shadow:0 12px 28px -16px rgba(10,37,64,.18)}
.capture-shot-img{width:100%;height:100%;object-fit:contain;border-radius:18px;display:block}
.capture-box{position:relative;width:100%;background:#fff;border-radius:18px;padding:28px 26px 22px;
  box-shadow:0 40px 70px -30px rgba(0,0,0,.55)}
.capture-q{margin:0 0 16px;text-align:center;font-family:var(--sans);font-weight:600;font-size:20px;line-height:1.3;color:#0E2B40}
.capture-input{position:relative;display:flex;align-items:center;gap:10px;background:#f3f5f8;border:1px solid #e3e6ec;
  border-radius:12px;padding:12px 44px 12px 16px}
.capture-input-text{flex:1;font-family:var(--sans);font-weight:400;font-size:13px;line-height:1.4;color:#8a8f9c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.capture-input-icon{position:absolute;display:grid;place-items:center;border-radius:50%}
.capture-input-icon--clip{right:44px;top:50%;transform:translateY(-50%);width:20px;height:20px;color:#8a8f9c;font-size:14px}
.capture-input-icon--send{right:10px;top:50%;transform:translateY(-50%);width:26px;height:26px;background:var(--blue);color:#fff;font-size:13px}
.capture-chips{display:flex;gap:10px;margin-top:16px}
.capture-chip{display:inline-flex;align-items:center;gap:6px;background:#f3f5f8;border:1px solid #e3e6ec;border-radius:9px;
  padding:7px 12px;font-family:var(--sans);font-weight:600;font-size:12px;line-height:1;color:#4c5160}
.capture-chip-dot{display:inline-grid;place-items:center;font-size:10px;font-style:normal}
.capture-chip-dot--slack{color:#e01e5a}
.capture-chip-dot--teams{color:#5059c9}

.badge{align-self:flex-start;background:var(--blue);padding:7px 8px;font-family:var(--sans);font-weight:500;font-size:15px;line-height:1}

/* ---------- white "screen" (default invoice mockup) ---------- */
.shot{position:relative;width:92%;max-width:560px;margin-top:22px}
.chip{position:absolute;left:50%;top:-22px;transform:translateX(-50%);z-index:2;display:flex;gap:8px;align-items:center;white-space:nowrap;
  background:#fff;color:#1b1d24;padding:8px 14px;border-radius:9px;font-family:var(--sans);font-weight:600;font-size:13px;line-height:1;
  box-shadow:0 8px 24px rgba(0,0,0,.28)}
.chip i{display:grid;place-items:center;width:18px;height:18px;border-radius:5px;font-family:var(--sans);font-weight:700;font-size:11px;line-height:1;font-style:normal;color:#fff;background:#18a058}
.chip-err i{background:#e5484d}
.doc{background:#fff;color:#1b1d24;border-radius:18px;padding:36px 24px 20px;box-shadow:0 40px 70px -30px rgba(0,0,0,.55)}
.doc-h{display:flex;flex-direction:column;gap:6px;padding-bottom:16px;margin-bottom:10px;border-bottom:1px solid #e6e8ee}
.doc-h strong{font-family:var(--sans);font-weight:600;font-size:16px;line-height:1.2}
.doc-h small{font-size:12px;color:#7b8190}
.row,.doc-t{display:flex;justify-content:space-between;gap:10px;padding:13px 8px;font-size:13px}
.row span{color:#4c5160}
.row b{font-weight:600}
.row.s-ok b{color:#16874d}
.row.s-warn b{color:#b7791f}
.row.s-err{border:1px solid #e5484d;border-radius:4px;background:#fff5f5}
.row.s-err b{color:#d1323a}
.doc-t{margin-top:12px;padding-top:16px;border-top:1px solid #e6e8ee;font-size:14px;font-weight:600}

/* ---------- compact desktop list: short screens and small laptops ---------- */
@media (min-width:991px) and (max-height:760px){
  .summary{padding:28px 24px 22px}
  .summary h3{font-size:22px;margin:0 0 16px}
  .summary ul,
  .summary ol{gap:6px}
  .summary li{padding:9px 12px 9px 10px}
  .iza-num{width:28px;height:28px;font-size:12px}
  .iza-progress{margin:14px 0 16px}
  .iza-cta{padding:11px 14px;font-size:14px}
}

@media (min-width:991px) and (max-width:1279px){
  .summary{padding:28px 18px 22px}
  .summary h3{font-size:21px;margin:0 0 16px}
  .summary ul,
  .summary ol{gap:6px}
  .summary li{padding:8px 10px;font-size:11.5px;letter-spacing:.03em;gap:8px}
  .iza-badge{margin-bottom:12px}
  .iza-num{width:26px;height:26px;font-size:11px}
  .iza-progress{margin:14px 0 16px}
  .iza-cta{padding:11px 14px;font-size:14px}
  .detail{padding:32px 28px 28px 24px}
  .detail-layer{inset:32px 28px 28px 24px}
  .detail h4{font-size:28px}
  .detail-desc{font-size:15px;line-height:1.6}
}

/* ---------- smaller screens ---------- */
@media (max-width:990px){
  .intro h2{font-size:38px}
  .intro p{font-size:16px}
  .scroll{height:auto !important}
  .stage{
    position:relative;
    top:auto;
    height:auto;
    min-height:0;
    overflow:visible;
    padding:24px 0;
    display:block;
  }
  .frame{width:calc(100% - 32px);height:auto;min-height:0;grid-template-columns:1fr;grid-template-rows:none;overflow:hidden;border-radius:16px}
  .summary{order:1;padding:24px 20px}
  .summary h3{margin:12px 0 10px;font-size:24px}
  .summary ul,
  .summary ol{gap:10px}
  .summary li{padding:12px 14px;font-size:12.5px;gap:10px}
  .iza-num{width:28px;height:28px;font-size:12px}
  .iza-cta{align-self:stretch;width:100%}
  .card{order:2;height:360px}
  .art{padding:20px 16px}
  .art .layer{inset:16px}
  .detail{order:3;padding:24px 20px;border-left:0;border-top:1px solid rgba(160,185,210,.18)}
  .detail h4{font-size:26px}
  .detail-layer{position:relative;inset:auto;opacity:1;visibility:visible;pointer-events:auto;display:none;transform:none}
  .detail-layer.cur{display:block}
}

@media (max-width:600px){
  .intro{padding:28px 12px 24px}
  .intro h2{font-size:30px}
  .intro p{font-size:14px;line-height:1.5}
  .iza-glass-badge{
    font-size:10px !important;
    letter-spacing:.06em;
    padding:9px 14px;
    white-space:nowrap;
    max-width:calc(100vw - 24px);
  }
  .iza-sparkle--gold{right:-16px}
  .iza-sparkle--teal{right:-4px}

  .stage{padding:16px 0 24px}
  .frame{width:calc(100% - 24px);border-radius:12px}
  .summary,
  .card,
  .detail{min-width:0}
  .summary{padding:18px 14px}
  .summary h3{margin:0 0 12px;font-size:20px}
  .summary ul,
  .summary ol{gap:6px}
  .summary li{padding:9px 8px;font-size:10px;letter-spacing:.04em;gap:7px;min-width:0}
  .iza-label{min-width:0;overflow-wrap:anywhere}
  .iza-num{width:22px;height:22px;font-size:10px}
  .iza-progress{margin:14px 0 0}

  .card{height:320px;border-radius:12px}
  .art{padding:12px 10px;border-radius:12px}
  .art .layer{inset:12px 10px;min-width:0;min-height:0}
  .art .capture-shot > svg{border-radius:10px}
  .capture-shot,
  .capture-shot-img{box-sizing:border-box;min-width:0;min-height:0}
  .capture-shot-img{display:block;width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain}
  .capture-box{padding:16px 12px 14px;border-radius:12px}
  .capture-q{margin-bottom:10px;font-size:15px}
  .capture-input{gap:6px;padding:8px 34px 8px 10px;border-radius:8px}
  .capture-input-text{font-size:10px}
  .capture-input-icon--clip{right:34px;width:16px;height:16px;font-size:11px}
  .capture-input-icon--send{right:7px;width:20px;height:20px;font-size:11px}
  .capture-chips{gap:5px;margin-top:10px}
  .capture-chip{gap:4px;padding:5px 7px;border-radius:7px;font-size:9px}

  .detail{padding:20px 14px}
  .detail-layer{inset:auto}
  .detail-num{width:30px;height:30px;margin-bottom:12px;font-size:13px}
  .detail h4{font-size:22px;margin-bottom:10px}
  .detail-desc{margin-bottom:14px;font-size:13px;line-height:1.5}
  .detail-points{gap:7px}
  .detail-points li{padding-left:16px;font-size:12px;line-height:1.45}
}

@media (max-width:380px){
  .frame{width:calc(100% - 16px)}
  .summary{padding:16px 10px}
  .summary h3{font-size:18px}
  .summary li{padding:8px 6px;font-size:9px;letter-spacing:.02em}
  .iza-num{width:20px;height:20px;font-size:9px}
  .card{height:250px;border-radius:12px}
  .art{padding:8px}
  .detail{padding:18px 10px}
  .detail h4{font-size:20px}
  .detail-desc{font-size:12px}
  .detail-points li{font-size:11px}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .summary li,
  .iza-num,
  .iza-progress__bar,
  .iza-cta,
  .art .layer,
  .detail-layer{
    transition:none !important;
    transform:none !important;
  }
  .summary li.cur{transform:none}
}

/* validation-intelligence.css */
/* ==========================================================================
   Intelligence built into the process (includes/validation_intelligence.php)
   ========================================================================== */
.vi {
    padding: 30px 0 30px;
    background: #F4F6F8;
    color: #fff;
}

.vi > .container {
    max-width: 1400px;
}

.vi__row {
    display: grid;
    grid-template-columns: 0.78fr 1.22fr;
    gap: clamp(56px, 7vw, 112px);
    align-items: center;
}

.vi__eyebrow {
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #006B8D;
    margin: 0 0 40px;
}

.vi__heading {
    font-size: clamp(2.1rem, 3.1vw, 3.2rem);
    line-height: 1.08;
    color: #006B8D;
    letter-spacing: -0.04em;
    margin: 0;
}

.vi__highlight {
    color: #006B8D;
}

.vi__desc {
    color: #4b5563;
    font-size: 0.9rem;
    line-height: 1.7;
    max-width: 500px;
    margin: 28px 0 40px;
}

.vi__link {
    color: #4b5563;
    font-weight: 400;
}

.btn-white {
    background: rgb(0, 107, 141);
    color: #ffffff;
}

/* Validation stat card */
.vi__card {
    width: calc(100% - 48px);
    justify-self: center;
    box-sizing: border-box;
    background: #005672;
    border: 1px solid rgba(130, 190, 213, 0.2);
    border-radius: var(--radius-lg);
    padding: 32px;
    box-shadow: 0 40px 70px -35px rgba(0, 86, 114, 0.55);
}

.vi__card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-md);
    padding-bottom: 34px;
}

.vi__stat {
    display: block;
    font-size: 5rem;
    font-weight: 500;
    color: #7FD6C8;
    line-height: 0.8;
    letter-spacing: -0.06em;
    font-variant-numeric: tabular-nums;
}

.vi__stat-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #E3F0F6;
    margin-top: 22px;
}

.vi__stat-desc {
    font-size: 0.8rem;
    line-height: 1.6;
    color: #BCD8E6;
    text-align: right;
    margin: 0;
    max-width: 220px;
}

.vi__card-divider {
    height: 1px;
    background: rgba(188, 216, 230, 0.28);
}

.vi__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 42px 48px;
    padding: 38px 0 34px;
}

.vi__grid-index {
    display: block;
    font-size: 0.65rem;
    font-weight: 700;
    color: #A5DCEB;
    margin-bottom: 18px;
}

.vi__grid-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    position: relative;
    font-size: 1rem;
    font-weight: 700;
    color: #FFFFFF;
    margin: 0 0 10px;
}

.vi__grid-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 0;
    height: 1px;
    background: #5CC0DC;
    transition: width 0.3s cubic-bezier(.2, .7, .2, 1);
}

.vi__grid-item:hover .vi__grid-title::after {
    width: calc(100% - 26px); /* leave the tick icon out of the underline */
}

.vi__tick-circle {
    stroke: #5CC0DC;
}

.vi__tick-check {
    stroke: #5CC0DC;
}

.vi__grid-desc {
    font-size: 0.8rem;
    line-height: 1.5;
    color: #BCD8E6;
    margin: 0;
}

.vi__footnote {
    font-size: 0.75rem;
    color: #BCD8E6;
    margin: 0;
    padding-top: 26px;
}

/* ---------- scroll-in reveal animation (plays once) ---------- */
.vi__fade-item {
    opacity: 0;
    transition: opacity 0.6s cubic-bezier(.2, .7, .2, 1);
}

.vi__card-divider--top,
.vi__card-divider--bottom {
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.8s cubic-bezier(.2, .7, .2, 1);
}

.vi__grid-item {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.5s cubic-bezier(.2, .7, .2, 1), transform 0.5s cubic-bezier(.2, .7, .2, 1);
}

.vi__grid-item:nth-child(1) { transition-delay: 0s; }
.vi__grid-item:nth-child(2) { transition-delay: 0.15s; }
.vi__grid-item:nth-child(3) { transition-delay: 0.3s; }
.vi__grid-item:nth-child(4) { transition-delay: 0.45s; }

.vi__tick-circle,
.vi__tick-check {
    fill: none;
    stroke-dasharray: 32;
    stroke-dashoffset: 32;
    transition: stroke-dashoffset 0.5s cubic-bezier(.2, .7, .2, 1);
}

.vi__tick-check {
    stroke-dasharray: 10;
    stroke-dashoffset: 10;
}

.vi__grid-item:nth-child(1) .vi__tick-circle,
.vi__grid-item:nth-child(1) .vi__tick-check { transition-delay: 0.2s; }
.vi__grid-item:nth-child(2) .vi__tick-circle,
.vi__grid-item:nth-child(2) .vi__tick-check { transition-delay: 0.35s; }
.vi__grid-item:nth-child(3) .vi__tick-circle,
.vi__grid-item:nth-child(3) .vi__tick-check { transition-delay: 0.5s; }
.vi__grid-item:nth-child(4) .vi__tick-circle,
.vi__grid-item:nth-child(4) .vi__tick-check { transition-delay: 0.65s; }

/* Revealed state, toggled by JS once the card scrolls into view */
.vi__card.is-revealed .vi__fade-item {
    opacity: 1;
}

.vi__card.is-revealed .vi__card-divider--top,
.vi__card.is-revealed .vi__card-divider--bottom {
    transform: scaleX(1);
}

.vi__card.is-revealed .vi__card-divider--bottom {
    transition-delay: 1.6s;
}

.vi__card.is-revealed .vi__footnote {
    transition-delay: 2.2s;
}

.vi__card.is-revealed .vi__grid-item {
    opacity: 1;
    transform: translateY(0);
}

.vi__card.is-revealed .vi__tick-circle,
.vi__card.is-revealed .vi__tick-check {
    stroke-dashoffset: 0;
}

/* Before JS runs (or if it fails to load), keep the final state visible
   so content is never permanently hidden. */
.vi__card:not(.js-ready) .vi__fade-item,
.vi__card:not(.js-ready) .vi__grid-item {
    opacity: 1;
    transform: none;
}

.vi__card:not(.js-ready) .vi__card-divider--top,
.vi__card:not(.js-ready) .vi__card-divider--bottom {
    transform: scaleX(1);
}

.vi__card:not(.js-ready) .vi__tick-circle,
.vi__card:not(.js-ready) .vi__tick-check {
    stroke-dashoffset: 0;
}

@media (prefers-reduced-motion: reduce) {
    .vi__fade-item,
    .vi__grid-item,
    .vi__card-divider--top,
    .vi__card-divider--bottom,
    .vi__tick-circle,
    .vi__tick-check,
    .vi__grid-title::after {
        transition: none !important;
    }

    .vi__fade-item,
    .vi__grid-item {
        opacity: 1;
        transform: none;
    }

    .vi__card-divider--top,
    .vi__card-divider--bottom {
        transform: scaleX(1);
    }

    .vi__tick-circle,
    .vi__tick-check {
        stroke-dashoffset: 0;
    }
}

@media (max-width: 900px) {
    .vi__row {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }

    .vi__desc {
        max-width: 100%;
    }

    .vi__card {
        width: 100%;
    }

    .vi__card-top {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-sm);
    }

    .vi__stat-desc {
        text-align: left;
        max-width: 100%;
    }
}

@media (max-width: 600px) {
    .vi {
        padding: 64px 0;
    }

    .vi__heading {
        font-size: 1.6rem;
    }

    .vi__stat {
        font-size: 4.5rem;
    }

    .vi__grid {
        grid-template-columns: 1fr;
    }
}

/* validation-checkpoints.css */
/* ==========================================================================
   Validation checkpoints modal (includes/validation_checkpoints_modal.php)
   Triggered by #vcOpenBtn in includes/validation_intelligence.php.
   Scanning invoice animation + live checkpoint ticking.
   ========================================================================== */

.vc-overlay {
    position: fixed;
    inset: 0;
    height: 100vh;
    height: 100dvh;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px;
    background: rgba(9, 24, 33, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.vc-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

html.vc-lock,
body.vc-lock {
    overflow: hidden;
    height: 100%;
}

body.vc-lock {
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
}

.vc-panel {
    width: 100%;
    max-width: 1560px;
    height: min(880px, 100%);
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 30px 80px rgba(5, 25, 35, 0.35);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateY(18px) scale(0.985);
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    font-family: Figtree, sans-serif;
    color: #0e1b23;
}

.vc-overlay.is-open .vc-panel {
    transform: none;
}

/* ---------- Header ---------- */
.vc-head {
    padding: 26px 40px 20px;
    position: relative;
    border-bottom: 1px solid #e4e9ed;
    flex: none;
}

.vc-eyebrow {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #00698c;
    display: flex;
    align-items: center;
    gap: 10px;
}

.vc-eyebrow::before {
    content: '';
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: #00698c;
}

.vc-title {
    font-size: 28px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-top: 10px;
    padding-right: 56px;
}

.vc-title span {
    color: #00698c;
}

.vc-sub {
    margin-top: 6px;
    font-size: 15px;
    color: #5b6a74;
    max-width: 740px;
    line-height: 1.5;
}

.vc-close {
    position: absolute;
    top: 24px;
    right: 28px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid #e4e9ed;
    background: #fff;
    color: #0e1b23;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background 0.15s, border-color 0.15s, transform 0.15s;
}

.vc-close:hover {
    background: #eaf4f8;
    border-color: #cfe3ec;
    transform: rotate(90deg);
}

.vc-close:focus-visible {
    outline: 3px solid #7cc3dd;
    outline-offset: 2px;
}

.vc-close svg {
    width: 16px;
    height: 16px;
}

.vc-skip {
    position: absolute;
    top: 28px;
    right: 84px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: #004e6a;
    background: #fff;
    border: 1px solid #e4e9ed;
    border-radius: 999px;
    padding: 9px 16px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.vc-skip:hover {
    background: #eaf4f8;
    border-color: #cfe3ec;
}

.vc-skip:focus-visible {
    outline: 3px solid #7cc3dd;
    outline-offset: 2px;
}

.vc-panel.is-done .vc-skip {
    display: none;
}

/* search (appears when all checkpoints are verified) */
.vc-search {
    position: relative;
    display: block;
}

.vc-search svg {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: #8a98a2;
    pointer-events: none;
}

.vc-search input {
    width: 100%;
    font-family: inherit;
    font-size: 14px;
    color: #0e1b23;
    border: 1px solid #e4e9ed;
    border-radius: 12px;
    background: #fafbfc;
    padding: 11px 14px 11px 40px;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

.vc-search input::placeholder {
    color: #93a1ab;
}

.vc-search input:focus {
    outline: 0;
    background: #fff;
    border-color: #00698c;
    box-shadow: 0 0 0 4px rgba(0, 105, 140, 0.12);
}

.vc-head .vc-search {
    position: absolute;
    right: 40px;
    bottom: 18px;
    width: 320px;
    opacity: 0;
    pointer-events: none;
    transform: translateY(6px);
    transition: opacity 0.45s ease 0.35s, transform 0.45s ease 0.35s;
}

.vc-panel.is-done .vc-head .vc-search {
    opacity: 1;
    pointer-events: auto;
    transform: none;
}

/* ---------- Heading filter bar (unlocks when done) ---------- */
.vc-side {
    position: relative;
    flex: none;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 6px;
    min-height: 68px;
    padding: 16px 28px;
    background: #fafbfc;
    border-bottom: 1px solid #e4e9ed;
    overflow-x: auto;
    scrollbar-width: none;
}

.vc-side::-webkit-scrollbar {
    display: none;
}

.vc-side.vc-fade-r {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent);
}

.vc-side.vc-fade-l {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 56px);
    mask-image: linear-gradient(90deg, transparent, #000 56px);
}

.vc-side.vc-fade-l.vc-fade-r {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 56px, #000 calc(100% - 56px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 56px, #000 calc(100% - 56px), transparent);
}

.vc-side-hint {
    position: absolute;
    left: 28px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 600;
    color: #8a98a2;
    transition: opacity 0.25s;
}

.vc-side-hint svg {
    width: 15px;
    height: 15px;
}

.vc-panel.is-done .vc-side-hint {
    opacity: 0;
    pointer-events: none;
}

.vc-side-item {
    flex: none;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 7px 7px 13px;
    border: 1px solid #e4e9ed;
    border-radius: 999px;
    background: #fff;
    cursor: pointer;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s, opacity 0.4s ease, transform 0.4s ease;
}

.vc-panel.is-done .vc-side-item {
    opacity: 1;
    transform: none;
    pointer-events: auto;
    transition-delay: 0s, 0s, 0s, calc(var(--vc-i) * 70ms), calc(var(--vc-i) * 70ms);
}

.vc-side-item:hover {
    border-color: #b9d6e2;
    background: #f3f9fb;
}

.vc-side-item:focus-visible {
    outline: 3px solid #7cc3dd;
    outline-offset: 2px;
}

.vc-side-item .vc-t {
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.2;
    color: #2a3a44;
}

.vc-side-item .vc-c {
    min-width: 22px;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 999px;
    background: #e9eef1;
    color: #5b6a74;
    font-variant-numeric: tabular-nums;
}

.vc-side-item[aria-selected="true"] {
    background: #00698c;
    border-color: #00698c;
    box-shadow: 0 3px 8px rgba(0, 105, 140, 0.25);
}

.vc-side-item[aria-selected="true"] .vc-t {
    color: #fff;
}

.vc-side-item[aria-selected="true"] .vc-c {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.vc-side-item.vc-dim {
    opacity: 0.45 !important;
}

/* ---------- Body: invoice (left) + checkpoints (right) ---------- */
.vc-main {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(310px, 38%) 1fr;
}

/* ---- left: invoice that keeps scanning ---- */
.vc-scan-left {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    background: radial-gradient(80% 70% at 50% 40%, #f6fbfd, #e6eff5);
    border-right: 1px solid #e4e9ed;
}

.vc-scan-stage {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.vc-paper-wrap {
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -270px 0 0 -190px;
    width: 380px;
    height: 540px;
    transform-origin: center center;
    transition: transform 0.4s ease;
}

.vc-corner {
    position: absolute;
    width: 28px;
    height: 28px;
    border: 3px solid #00698c;
    border-radius: 5px;
    animation: vc-bracket 1.8s ease-in-out infinite;
}

.vc-corner.vc-tl { top: -14px; left: -14px; border-right: 0; border-bottom: 0; }
.vc-corner.vc-tr { top: -14px; right: -14px; border-left: 0; border-bottom: 0; }
.vc-corner.vc-bl { bottom: -14px; left: -14px; border-right: 0; border-top: 0; }
.vc-corner.vc-br { bottom: -14px; right: -14px; border-left: 0; border-top: 0; }

@keyframes vc-bracket {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

.vc-scan-left.is-done .vc-corner {
    border-color: #22b36b;
}

.vc-paper {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #fff;
    border-radius: 10px;
    padding: 24px 22px;
    box-shadow: 0 22px 44px rgba(5, 40, 60, 0.18), 0 0 0 1px rgba(5, 40, 60, 0.05);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.vc-p-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.vc-p-title {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: #17313f;
}

.vc-p-logo {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: linear-gradient(135deg, #d8e8ef, #b9d3e0);
}

.vc-p-meta {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
}

.vc-p-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.vc-sk {
    height: 7px;
    border-radius: 4px;
    background: #e3e9ee;
    margin-top: 5px;
}

.vc-lb {
    font-size: 7.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #8795a0;
    text-transform: uppercase;
    white-space: nowrap;
}

.vc-t-head,
.vc-t-row {
    display: grid;
    grid-template-columns: 2.4fr 1fr 0.8fr 1fr 1.2fr;
    gap: 6px;
}

.vc-t-head {
    font-size: 7.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #6b7b86;
    text-transform: uppercase;
    padding-bottom: 5px;
    border-bottom: 1px solid #e3e9ee;
}

.vc-t-row {
    padding-top: 7px;
}

.vc-t-row i {
    display: block;
    height: 7px;
    border-radius: 4px;
    background: #e3e9ee;
}

.vc-p-bottom {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.vc-qr {
    width: 58px;
    height: 58px;
    border-radius: 6px;
    margin-bottom: 4px;
    background:
        repeating-linear-gradient(0deg, #cdd8df 0 4px, transparent 4px 8px),
        repeating-linear-gradient(90deg, #cdd8df 0 4px, transparent 4px 8px), #f3f6f8;
    border: 3px solid #cdd8df;
}

.vc-p-tot {
    width: 164px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.vc-tr {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.vc-tr .vc-sk {
    margin-top: 0;
}

.vc-tr.vc-strong .vc-sk {
    background: #c4d3dc;
    height: 9px;
}

.vc-p-sign {
    display: flex;
    justify-content: flex-end;
}

.vc-p-sign .vc-f {
    width: 150px;
    text-align: center;
}

.vc-p-sign .vc-sk {
    margin: 8px auto 5px;
}

.vc-f {
    position: relative;
    padding: 5px 6px;
    border-radius: 7px;
    transition: box-shadow 0.35s, background 0.35s;
}

.vc-f.vc-found {
    background: rgba(0, 105, 140, 0.07);
    box-shadow: 0 0 0 2px rgba(0, 105, 140, 0.55);
}

.vc-f.vc-found::after {
    content: "\2713";
    position: absolute;
    top: -7px;
    right: -7px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #22b36b;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    line-height: 16px;
    text-align: center;
    animation: vc-pop 0.3s ease both;
}

/* scanner beam – keeps running the whole time */
.vc-beam {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 2px;
    z-index: 3;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, #00698c 12%, #00698c 88%, transparent);
    box-shadow: 0 0 16px 4px rgba(0, 105, 140, 0.35);
    animation: vc-sweep 2.1s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

.vc-beam::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 2px;
    height: 96px;
    background: linear-gradient(180deg, rgba(0, 105, 140, 0), rgba(0, 105, 140, 0.15));
}

@keyframes vc-sweep {
    0% { top: 0; opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { top: calc(100% - 2px); opacity: 0; }
}

/* when every checkpoint is ticked: scanning stops, big green tick + "Verified" */
.vc-scan-left.is-done .vc-beam {
    animation: none;
    opacity: 0;
    transition: opacity 0.3s;
}

.vc-scan-left.is-done .vc-corner {
    animation: none;
    opacity: 1;
}

.vc-v-overlay {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    background: rgba(255, 255, 255, 0.62);
    opacity: 0;
    transition: opacity 0.5s ease;
}

.vc-v-badge {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 5;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5);
}

.vc-v-badge svg {
    width: 116px;
    height: 116px;
    filter: drop-shadow(0 10px 22px rgba(34, 179, 107, 0.38));
}

.vc-v-badge .vc-vc {
    fill: #22b36b;
}

.vc-v-badge .vc-vt {
    fill: none;
    stroke: #fff;
    stroke-width: 7;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 70;
    stroke-dashoffset: 70;
}

.vc-v-badge span {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 0.14em;
    color: #14804a;
    background: #fff;
    border: 2px solid #22b36b;
    border-radius: 999px;
    padding: 7px 22px;
    box-shadow: 0 8px 20px rgba(34, 179, 107, 0.2);
}

.vc-scan-left.is-done .vc-v-overlay {
    opacity: 1;
}

.vc-scan-left.is-done .vc-v-badge {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    transition: opacity 0.3s ease 0.15s, transform 0.5s cubic-bezier(0.2, 1.4, 0.4, 1) 0.15s;
}

.vc-scan-left.is-done .vc-v-badge .vc-vt {
    animation: vc-draw2 0.5s 0.5s ease forwards;
}

@keyframes vc-draw2 {
    to { stroke-dashoffset: 0; }
}

.vc-status {
    flex: none;
    align-self: center;
    margin: 0 0 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13.5px;
    font-weight: 600;
    color: #004e6a;
    background: #fff;
    border: 1px solid #e4e9ed;
    border-radius: 999px;
    padding: 9px 18px;
    box-shadow: 0 6px 16px rgba(5, 40, 60, 0.07);
}

.vc-status i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #00698c;
    animation: vc-pulse 1.1s ease-in-out infinite;
}

.vc-scan-left.is-done .vc-status {
    color: #14804a;
}

.vc-scan-left.is-done .vc-status i {
    background: #22b36b;
    animation: none;
}

@keyframes vc-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0, 105, 140, 0.45); }
    50% { box-shadow: 0 0 0 7px rgba(0, 105, 140, 0); }
}

/* ---- right: checkpoints ---- */
.vc-scan-right {
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
}

.vc-rh {
    flex: none;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 40px 12px 32px;
}

.vc-rh-t {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.vc-rh-s {
    margin-top: 4px;
    font-size: 13px;
    font-weight: 600;
    color: #00698c;
}

.vc-rh-c {
    font-size: 13px;
    font-weight: 600;
    color: #5b6a74;
    white-space: nowrap;
}

.vc-rh-c b {
    font-size: 30px;
    font-weight: 800;
    color: #00698c;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.vc-scan-right.is-done .vc-rh-c b,
.vc-scan-right.is-done .vc-rh-s {
    color: #14804a;
}

.vc-pbar {
    flex: none;
    height: 6px;
    margin: 0 40px 0 32px;
    border-radius: 99px;
    background: #e9eef1;
    overflow: hidden;
}

.vc-pbar i {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 99px;
    background: linear-gradient(90deg, #00698c, #22b36b);
    transition: width 0.12s linear;
}

.vc-rows {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0 32px 20px 32px;
}

.vc-rows::-webkit-scrollbar {
    width: 10px;
}

.vc-rows::-webkit-scrollbar-thumb {
    background: #d5dde2;
    border-radius: 10px;
    border: 3px solid transparent;
    background-clip: content-box;
}

.vc-rgroup {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #fff;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 0 8px;
    border-bottom: 1px solid #e4e9ed;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #00698c;
}

.vc-rgroup em {
    font-style: normal;
    color: #93a1ab;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.vc-rnote {
    margin-top: 10px;
    font-size: 13px;
    font-weight: 600;
    color: #004e6a;
    background: #eaf4f8;
    border-radius: 10px;
    padding: 9px 14px;
}

.vc-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 9px 6px;
    border-bottom: 1px solid #f1f4f6;
    opacity: 0.5;
    transition: opacity 0.25s, background 0.6s;
}

.vc-row.vc-run,
.vc-row.vc-ok {
    opacity: 1;
}

.vc-row.vc-flash {
    background: #effaf3;
}

.vc-panel.is-done .vc-row:hover {
    background: #eaf4f8;
}

.vc-rtxt {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.35;
    color: #1b2a33;
}

.vc-rtxt mark {
    background: #d4ecf5;
    color: #004e6a;
    border-radius: 3px;
    padding: 0 1px;
}

.vc-rn {
    font-size: 11.5px;
    font-weight: 700;
    color: #9aa8b1;
    font-variant-numeric: tabular-nums;
}

.vc-tick {
    flex: none;
    position: relative;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid #cdd7dd;
    transition: background 0.2s, border-color 0.2s;
}

.vc-tick svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}

.vc-tick path {
    stroke-dasharray: 15;
    stroke-dashoffset: 15;
}

.vc-row.vc-run .vc-tick {
    border-color: #cfe3ec;
    border-top-color: #00698c;
    animation: vc-spin 0.55s linear infinite;
}

.vc-row.vc-ok .vc-tick {
    background: #22b36b;
    border-color: #22b36b;
    animation: vc-pop 0.35s ease both;
}

.vc-row.vc-ok .vc-tick svg {
    opacity: 1;
}

.vc-row.vc-ok .vc-tick path {
    animation: vc-draw 0.3s 0.05s ease forwards;
}

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

@keyframes vc-draw {
    to { stroke-dashoffset: 0; }
}

@keyframes vc-pop {
    0% { transform: scale(0.55); }
    60% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

.vc-empty {
    display: none;
    text-align: center;
    padding: 70px 20px;
    color: #5b6a74;
}

.vc-empty strong {
    display: block;
    font-size: 17px;
    color: #0e1b23;
    margin-bottom: 6px;
}

/* ---------- Footer ---------- */
.vc-foot {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 40px;
    border-top: 1px solid #e4e9ed;
    background: #fafbfc;
    font-size: 13.5px;
    color: #5b6a74;
}

.vc-foot strong {
    color: #0e1b23;
}

.vc-foot-count {
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.4s ease 0.4s;
}

.vc-panel.is-done .vc-foot-count {
    visibility: visible;
    opacity: 1;
}

.vc-foot-btns {
    display: flex;
    align-items: center;
    gap: 10px;
}

.vc-ghost {
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    color: #004e6a;
    background: #fff;
    border: 1px solid #e4e9ed;
    border-radius: 12px;
    padding: 10px 18px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.vc-ghost:hover {
    background: #eaf4f8;
    border-color: #cfe3ec;
}

.vc-ghost:focus-visible {
    outline: 3px solid #7cc3dd;
    outline-offset: 2px;
}

.vc-done {
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    background: #00698c;
    border: 0;
    border-radius: 12px;
    padding: 11px 22px;
    cursor: pointer;
    transition: background 0.15s;
}

.vc-done:hover {
    background: #004e6a;
}

.vc-done:focus-visible {
    outline: 3px solid #7cc3dd;
    outline-offset: 2px;
}

/* ---------- Responsive ---------- */
@media (max-width: 1280px) {
    .vc-head .vc-search {
        position: relative;
        right: auto;
        bottom: auto;
        width: auto;
        margin-top: 14px;
        display: none;
        opacity: 1;
        transform: none;
    }

    .vc-panel.is-done .vc-head .vc-search {
        display: block;
    }
}

@media (max-width: 860px) {
    .vc-side {
        padding: 14px 20px;
        min-height: 62px;
    }

    .vc-side-hint {
        left: 20px;
    }

    .vc-main {
        grid-template-columns: 1fr;
        grid-template-rows: minmax(180px, 32%) minmax(0, 1fr);
        min-height: 0;
        overflow: hidden;
    }

    .vc-scan-left {
        border-right: 0;
        border-bottom: 1px solid #e4e9ed;
    }

    .vc-status {
        margin-bottom: 12px;
    }

    .vc-rh {
        padding: 14px 20px 10px;
    }

    .vc-pbar {
        margin: 0 20px;
    }

    .vc-rows {
        padding: 0 20px 14px;
        /* iOS Safari needs an explicit touch-scroll hint inside a flex/grid
           child or the list can appear frozen even though overflow is set. */
        -webkit-overflow-scrolling: touch;
    }

    .vc-skip {
        right: 72px;
    }
}

@media (max-width: 720px) {
    .vc-overlay {
        padding: 0;
    }

    .vc-panel {
        border-radius: 0;
        /* Use the dynamic viewport height so mobile browser chrome
           (address bar show/hide) never clips content below the fold.
           100% falls back for browsers without dvh support. */
        height: 100%;
        height: 100dvh;
        max-width: none;
    }

    .vc-head {
        padding: 20px 20px 16px;
    }

    .vc-title {
        font-size: 21px;
    }

    .vc-head .vc-sub {
        display: none;
    }

    .vc-close {
        top: 16px;
        right: 16px;
    }

    .vc-skip {
        top: 20px;
        right: 64px;
        padding: 8px 13px;
    }

    .vc-xs-hide {
        display: none;
    }

    .vc-foot {
        padding: 12px 20px;
    }

    .vc-ghost {
        display: none;
    }

    .vc-side-hint {
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .vc-main {
        grid-template-rows: minmax(150px, 26%) minmax(0, 1fr);
    }

    .vc-scan-left .vc-status {
        margin-bottom: 8px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vc-panel,
    .vc-row,
    .vc-corner,
    .vc-beam,
    .vc-status i,
    .vc-v-badge,
    .vc-side-item,
    .vc-tick {
        animation: none !important;
        transition: none !important;
    }

    .vc-row.vc-ok .vc-tick path,
    .vc-v-badge .vc-vt {
        stroke-dashoffset: 0 !important;
    }
}

/* built-to-connect.css */
/* ==========================================================================
   Built to connect (includes/built_to_connect.php)
   ========================================================================== */
.btc {
    padding: 48px 0 44px;
    background: #ffffff;
}

.btc > .container {
    max-width: 1360px;
}

.btc__row {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: clamp(32px, 4vw, 64px);
    align-items: center;
}

.btc__eyebrow {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #6f8298;
    margin: 0 0 var(--space-sm);
}

.btc__heading {
    font-size: clamp(1.9rem, 2.8vw, 2.4rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: #17304e;
    margin: 0;
}

.btc__desc {
     font-size: 13px;
    color: var(--muted);
    margin: 5px 0;
    margin: var(--space-md) 0 var(--space-md);
}

.btc__select-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 500;
    color: #6f8298;
    margin-bottom: 8px;
}

.btc__select-wrap {
    max-width: 100%;
    margin-bottom: 16px;
    padding: 6px;
    border: 2px solid #d8e1eb;
    border-radius: 18px;
}

.btc__select-wrap.is-changing {
    border-color: #ff963f;
    animation: btc-select-pulse 0.3s ease both;
}

.btc__select {
    width: 100%;
    max-width: none;
    min-height: 58px;
    padding: 10px 18px;
    border-radius: 10px;
    border: 1px solid #d8e1eb;
    background: #ffffff;
    color: var(--color-text);
    font-size: 0.9rem;
    font-family: inherit;
    cursor: pointer;
    outline: none;
    box-shadow: none;
}

.btc__select:focus,
.btc__select:focus-visible {
    outline: none;
    box-shadow: none;
}

@keyframes btc-select-pulse {
    0%, 100% {
        box-shadow: 0 0 0 rgba(255, 150, 63, 0);
    }

    50% {
        box-shadow: 0 0 0 5px rgba(255, 150, 63, 0.18);
    }
}

.btc__detail {
    margin-bottom: 28px;
    min-height: 96px;
}

.btc__detail-item {
    display: none;
}

.btc__detail-item.is-active {
    display: block;
}

.btc__detail-item.is-entering {
    animation: btc-detail-enter 0.28s ease both;
}

@keyframes btc-detail-enter {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes btc-detail-fade {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.btc__detail-copy {
    box-sizing: border-box;
    padding: 6px 0 8px 20px;
    border-left: 2px solid #2166ff;
}

.btc__detail-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #17304e;
    margin: 0 0 6px;
}

.btc__detail-desc {
    font-size: 0.85rem;
    line-height: 1.55;
    color: #6f8298;
    margin: 0;
    max-width: 760px;
}

.btc__detail-link {
    display: inline-block;
    margin-top: 16px;
    color: rgb(0, 107, 141);
    font-size: 1rem;
    font-weight: 600;
    border-bottom: 1px solid #2166ff;
    padding-bottom: 2px;
    transition: opacity var(--transition);
}

.btc__detail-link:hover {
    opacity: 0.7;
}

.btc__disclaimer {
    font-size: 0.72rem;
    color: #94a5b8;
    opacity: 0.75;
    margin: 0;
}

/* Diagram */
.btc__diagram {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    background: #f5f8fc;
    border: 1px solid #dce5ef;
    border-radius: 24px;
    padding: 67px 40px;
}

.btc__diagram-card {
    position: relative;
    background: transparent;
    border: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.btc__connector-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
    z-index: 0;
}

.btc__connector-line {
    fill: none;
    stroke: #2166ff;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 6 6;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.btc__connector-line.is-active {
    opacity: 1;
    animation: btc-line-flow 0.9s linear infinite;
}

@keyframes btc-line-flow {
    to {
        stroke-dashoffset: -24;
    }
}

.btc__connector-dot {
    fill: #2166ff;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.btc__connector-dot.is-active {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .btc__connector-line.is-active {
        animation: none;
    }
}

.btc__diagram-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.btc__logo-card {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 84px;
    padding: 0 14px;
    background: #ffffff;
    border: 1px solid #e3e8ef;
    border-radius: 14px;
    text-align: center;
    transition: transform var(--transition), box-shadow var(--transition);
}

.btc__logo-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-sm);
}

.btc__logo-card.is-highlighted {
    border-color: #2166ff;
    box-shadow: 0 10px 24px -6px rgba(33, 102, 255, 0.35);
    animation: btc-logo-blow 1.4s ease-in-out infinite;
}

.btc__center-card.is-highlighted {
    animation: btc-logo-blow 1.4s ease-in-out infinite;
}

@keyframes btc-logo-blow {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.08);
    }
}

@media (prefers-reduced-motion: reduce) {
    .btc__logo-card.is-highlighted,
    .btc__center-card.is-highlighted {
        animation: none;
    }
}

.btc__logo-img {
    max-width: 80%;
    max-height: 70px;
    object-fit: contain;
}

.btc__logo-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.8rem;
    font-weight: 700;
    color: #20344f;
}

.btc__logo-mark svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

.btc__logo-mark--oracle {
    position: relative;
}

.btc__logo-mark--oracle svg {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 60px;
    height: 24px;
    transform: translate(-50%, -50%);
}

.btc__logo-mark--oracle em {
    position: relative;
    font-style: normal;
    font-weight: 800;
    font-size: 0.68rem;
    letter-spacing: 0.02em;
    color: #EA1B22;
    padding: 0 10px;
}

.btc__logo-card--wide .btc__logo-mark--dynamics {
    text-align: left;
}

.btc__logo-text {
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.25;
    color: #20344f;
}

.btc__logo-mark--netsuite {
    color: #183a5a;
    font-size: 0.7rem;
    letter-spacing: 0.02em;
}

.btc__logo-mark--tally {
    font-family: Figtree, sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 1.35rem;
    color: #17304e;
}

.btc__logo-mark--tally-svg {
    width: auto;
    height: 34px;
    max-width: 80%;
}

.btc__center-card {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 108px;
    padding: 20px 32px;
    background: #ffffff;
    border: 1px solid #a9c8ff;
    border-radius: 16px;
    box-shadow: 0 16px 32px -8px rgba(33, 102, 255, 0.18);
    text-align: center;
}

.btc__center-icon {
    width: auto;
    height: 32px;
    flex-shrink: 0;
    object-fit: contain;
}

.btc__center-tag {
    display: block;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #718ba8;
    margin-bottom: 2px;
}

.btc__center-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: #17304e;
    margin: 0;
}

.btc__diagram-caption {
    text-align: center;
    font-size: 0.75rem;
    color: #8295ad;
    margin: 20px 0 0;
}

@media (max-width: 900px) {
    .btc__row {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }

    .btc__desc {
        max-width: 100%;
    }

    .btc__diagram {
        min-height: 0;
    }
}

@media (max-width: 600px) {
    .btc__heading {
        font-size: 2.25rem;
    }

    .btc__diagram-row {
        grid-template-columns: 1fr;
    }

    .btc__diagram {
        max-width: 100%;
        padding: 36px 16px;
    }

    .btc__center-card {
        padding: 22px;
    }
}

/* connected-platform.css */
/* ==========================================================================
   The connected TYASuite platform (includes/connected_platform.php)
   ========================================================================== */
.cp {
    padding: 40px 0;
    background: #f5f8fc;
}

.cp__top {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: clamp(24px, 4vw, 56px);
    align-items: end;
    margin-bottom: 36px;
}

.cp__eyebrow {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #16B8A6;
    margin: 0 0 var(--space-sm);
}

.cp__heading {
    font-size: clamp(1.9rem, 3.4vw, 2.7rem);
    line-height: 1.35;
    letter-spacing: -0.02em;
    color: #17304e;
    font-weight: 700;
    margin: 0;
}

.cp__heading-muted {
    color: #16B8A6;
}

.cp__intro {
    color: #6f8298;
    font-size: 0.95rem;
    line-height: 1.7;
    margin: 0;
}

.cp__tabs {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
    padding: 8px;
    background: #f3f5f8;
    border-radius: var(--radius-pill);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.cp__tabs::-webkit-scrollbar {
    display: none;
}

.cp__tab {
    flex: 0 0 auto;
    text-align: center;
    padding: 12px 20px;
    border-radius: var(--radius-pill);
    font-size: 0.85rem;
    font-weight: 600;
    color: #0e5f6e;
    white-space: nowrap;
    scroll-snap-align: center;
    background: #ffffff;
    border: 1px solid #d7e0ec;
    box-shadow: none;
    transform: none;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
}

/* Hover matches default — no lift / style jump */
.cp__tab:hover {
    color: #0e5f6e;
    background: #ffffff;
    border-color: #d7e0ec;
    transform: none;
    box-shadow: none;
}

.cp__tab.is-active,
.cp__tab.is-active:hover {
    background: #17182b;
    color: #ffffff;
    border-color: #17182b;
    transform: none;
    box-shadow: none;
}

@media (min-width: 1100px) {
    .cp__tab {
        flex: 1 1 0;
    }
}

/* Panels — one shown at a time, matching the tab bar above */
.cp__panels {
    position: relative;
    margin-top: 40px;
}

.cp__panel {
    display: none;
    position: relative;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: clamp(24px, 4vw, 56px);
    background: #f5f8fc;
    border: none;
    border-radius: var(--radius-lg);
    padding: 8px;
    overflow: hidden;
}

.cp__panel.is-active {
    display: grid;
}

.cp__panel.is-entering {
    animation: cp-panel-enter 0.3s ease both;
}

@keyframes cp-panel-enter {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---------- left column: title, description, accordion ---------- */
.cp__panel-text {
    display: flex;
    flex-direction: column;
}

.cp__panel-title {
    font-size: clamp(1.6rem, 2.6vw, 2.1rem);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: #17304e;
    margin: 0 0 8px;
}

.cp__panel-desc {
    font-size: 0.95rem;
    line-height: 1.45;
    color: #6f8298;
    margin: 0 0 12px;
    max-width: 460px;
}

.cp__panel-link {
    display: inline-block;
    margin-top: 12px;
    font-size: 0.9rem;
    font-weight: 600;
    color: rgb(0, 107, 141);
    border-bottom: 1px solid rgb(0, 107, 141);
    padding-bottom: 2px;
    transition: opacity var(--transition);
    align-self: flex-start;
}

.cp__panel-link:hover {
    opacity: 0.7;
}

/* ---------- accordion ---------- */
.cp__accordion {
    border-top: 1px solid #e3e8ef;
}

.cp__acc-item {
    border-bottom: 1px solid #e3e8ef;
}

.cp__acc-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 2px;
    background: none;
    border: none;
    text-align: left;
    font-size: 0.95rem;
    font-weight: 600;
    color: #17304e;
    cursor: pointer;
}

.cp__acc-caret {
    flex-shrink: 0;
    font-size: 0.8rem;
    color: #9caebf;
    transition: transform var(--transition);
}

.cp__acc-item.is-open .cp__acc-caret {
    transform: rotate(180deg);
    color: rgb(0, 107, 141);
}

.cp__acc-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.cp__acc-panel p {
    margin: 0 2px 16px;
    font-size: 0.85rem;
    line-height: 1.6;
    color: #6f8298;
    max-width: 440px;
}

/* ---------- right column: visual mockup ---------- */
.cp__panel-visual {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 0 16px 16px;
    margin-top: 0;
}

.cp__mock {
    position: relative;
    width: 100%;
    max-width: 480px;
    aspect-ratio: 480/430;
    border-radius: 20px;
    background: linear-gradient(145deg, #e4e9f2, #eef1f7);
}

.cp__mock-table {
    position: absolute;
    top: 24px;
    right: 16px;
    left: 48px;
    background: #ffffff;
    border-radius: 14px;
    padding: 18px 20px;
    box-shadow: 0 20px 40px -20px rgba(23, 24, 43, 0.18);
}

.cp__mock-row {
    display: grid;
    grid-template-columns: 1fr 1.3fr 1fr;
    gap: 10px;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #eef1f6;
    font-size: 0.72rem;
    color: #17304e;
}

.cp__mock-row:last-child {
    border-bottom: none;
}

.cp__mock-row--head {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #9caebf;
}

.cp__mock-id {
    font-weight: 700;
}

.cp__mock-id small {
    display: block;
    font-weight: 400;
    color: #9caebf;
    font-size: 0.65rem;
}

.cp__mock-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.cp__pill {
    display: inline-block;
    font-style: normal;
    font-weight: 600;
    font-size: 0.6rem;
    padding: 3px 8px;
    border-radius: 999px;
    white-space: nowrap;
}

.cp__pill--green { background: #e4f6ec; color: #1f9d55; }
.cp__pill--teal { background: #e2f6f3; color: rgb(0, 107, 141); }
.cp__pill--amber { background: #fdf2e0; color: #b1760b; }
.cp__pill--red { background: #fbe9e9; color: #d1453d; }
.cp__pill--slate { background: #eceef4; color: #5c6a84; }

.cp__mock-doc strong {
    display: block;
    color: #17304e;
}

/* floating action card */
.cp__mock-card {
    position: absolute;
    bottom: 20px;
    left: 50%;
    width: min(78%, 300px);
    transform: translateX(-50%);
    background: #ffffff;
    border-radius: 16px;
    padding: 18px 18px 14px;
    box-shadow: 0 24px 48px -16px rgba(23, 24, 43, 0.3);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cp__mock-card-title {
    margin: 0 0 6px;
    font-size: 0.85rem;
    font-weight: 700;
    color: #17304e;
}

.cp__mock-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #17182b;
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 10px 14px;
    border-radius: 10px;
}

.cp__mock-opt {
    display: block;
    background: #f5f6f9;
    border: 1px solid #e3e8ef;
    border-radius: 10px;
    padding: 9px 14px;
    font-size: 0.78rem;
    color: #17304e;
}

@media (max-width: 860px) {
    .cp {
        padding-bottom: 28px;
    }

    .cp__top {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .cp__tabs {
        position: sticky;
        top: 64px;
        z-index: 40;
        background: #f3f5f8;
    }

    .cp__panels {
        margin-top: 20px;
    }

    .cp__panel {
        grid-template-columns: 1fr;
        padding: 12px 0 0;
        overflow: visible;
        gap: 16px;
    }

    .cp__panel.is-active {
        display: grid;
    }

    /* Flatten so heading stays above the mockup and is never covered. */
    .cp__panel-text {
        display: contents;
    }

    .cp__panel-title,
    .cp__panel-desc,
    .cp__accordion,
    .cp__panel-link {
        position: relative;
        z-index: 1;
    }

    .cp__panel-title {
        order: 1;
    }

    .cp__panel-desc {
        order: 2;
        max-width: none;
        margin-bottom: 0;
    }

    .cp__panel-visual {
        order: 3;
        padding: 0;
        overflow: hidden;
        z-index: 0;
    }

    .cp__accordion {
        order: 4;
    }

    .cp__panel-link {
        order: 5;
        margin-top: 8px;
    }

    .cp__mock {
        overflow: hidden;
        max-width: 100%;
        aspect-ratio: 480 / 380;
    }

    .cp__mock-card {
        bottom: 12px;
        width: min(86%, 280px);
        padding: 14px 14px 12px;
    }
}

@media (max-width: 600px) {
    .cp {
        padding: 44px 0 24px;
    }

    .cp__tabs {
        border-radius: var(--radius-pill);
    }

    .cp__mock-table {
        left: 16px;
    }
}

/* customer-reviews.css */
/* ==========================================================================
   Customer reviews (includes/customer_reviews.php)
   ========================================================================== */
.cr {
    padding: 30px 0 40px;
    background: #0c1430;
}

.cr__eyebrow {
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #16B8A6;
    margin: 0 0 12px;
}

.cr__heading {
    text-align: center;
    font-weight: 700;
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: #ffffff;
    margin: 0 0 var(--space-md);
}

/* ---------- auto-scrolling review marquee (4 cards visible at once) ---------- */
.cr__marquee {
    width: 100%;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
}

.cr__track {
    display: flex;
    align-items: stretch;
    gap: var(--space-md);
    width: max-content;
    animation: crMarqueeScroll 42s linear infinite;
}

.cr__marquee:hover .cr__track {
    animation-play-state: paused;
}

@keyframes crMarqueeScroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .cr__track {
        animation: none;
    }
}

/* ---------- review card ---------- */
.cr__card {
    position: relative;
    flex: 0 0 calc(25% - var(--space-md) * 0.75);
    width: calc(25vw - var(--space-md) * 0.75);
    max-width: 320px;
    min-width: 260px;
    background: #ffffff;
    border-radius: 16px;
    padding: 22px 22px 24px;
}

.cr__card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
}

.cr__card-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: #17304e;
    margin: 0 0 2px;
}

.cr__card-role,
.cr__card-company,
.cr__card-size {
    font-size: 0.78rem;
    color: #6f8298;
    margin: 0;
    line-height: 1.4;
}

.cr__card-company {
    color: rgb(0, 107, 141);
}

.cr__card-mark {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #eef4ff;
    overflow: hidden;
    transition: transform var(--transition), box-shadow var(--transition);
}

.cr__card-mark img {
    width: 70%;
    height: 70%;
    object-fit: contain;
}

.cr__card-mark:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px -4px rgba(23, 24, 43, 0.3);
}

.cr__card-text {
    font-size: 0.85rem;
    line-height: 1.65;
    color: #3b4a5e;
    margin: 0;
}

.cr__card-case-link {
    display: inline-block;
    margin-top: 14px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #17304e;
    text-decoration: underline;
}

.cr__card-logo {
    display: block;
    margin-top: 16px;
    font-weight: 700;
    font-size: 0.85rem;
    color: #17304e;
}

.cr__card-logo--mark {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.68rem;
    letter-spacing: 0.02em;
    line-height: 1.3;
    padding: 8px 12px;
    border: 1px solid #e3e8ef;
    border-radius: 10px;
}

/* person card variant (avatar + name inline) */
.cr__card-person-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
    position: relative;
}

.cr__card-avatar {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    background: #eef1f6;
}

.cr__card-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cr__card--person .cr__card-mark {
    position: absolute;
    right: 0;
    top: 0;
}

/* CTA card variant */
.cr__card--cta {
    background: linear-gradient(135deg, #6a5ff0, #5848d8);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 14px;
    min-height: 110px;
}

.cr__cta-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: #ffffff;
}

.cr__cta-btn {
    display: inline-block;
    background: #a84fe0;
    color: #ffffff;
    font-size: 0.85rem;
    font-weight: 700;
    padding: 10px 24px;
    border-radius: 999px;
    transition: transform var(--transition), background var(--transition);
}

.cr__cta-btn:hover {
    background: #9440cc;
    transform: translateY(-2px);
}

@media (max-width: 900px) {
    .cr__card {
        flex: 0 0 calc(50% - var(--space-md) * 0.5);
        width: calc(50vw - var(--space-md) * 0.5);
    }
}

@media (max-width: 600px) {
    .cr {
        padding: 44px 0 48px;
    }

    .cr__card {
        flex: 0 0 80vw;
        width: 80vw;
        max-width: none;
        min-width: 0;
    }
}

/* ==========================================================================
   Customer reviews — featured masonry wall (cr2__*)
   Static grid of varied-size testimonial cards, no CSS vars collision with
   the .cr__* marquee styles above since both can co-exist on the page.
   ========================================================================== */
.cr2 {
    --cr2-bg: #0A1128;
    --cr2-card: #121A38;
    --cr2-line: #25305A;
    --cr2-text: #F4F1EA;
    --cr2-body: #D6D9E6;
    --cr2-muted: #A9B0C8;
    --cr2-accent: #16B8A6;
    --cr2-serif: Figtree, sans-serif;
}

.cr2__grid {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.cr2__row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: stretch;
}

.cr2__stack {
    flex: 1 1 340px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.cr2__stack .cr2__card {
    flex: none;
}

/* ---------- card ---------- */
.cr2__card {
    flex: 1 1 170px;
    min-width: 0;
    background: var(--cr2-card);
    border: 1px solid var(--cr2-line);
    border-radius: 24px;
    padding: 36px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 28px;
    margin: 0;
}

.cr2__card--wide {
    flex: 2 1 560px;
    padding: 48px;
}

.cr2__card--wide-short {
    flex: 2 1 250px;
    padding: 40px 48px;
    margin-top: 0;
    align-self: stretch;
}

.cr2__card-quote-mark {
    font-family: var(--cr2-serif);
    font-size: 56px;
    line-height: 0.6;
    height: 26px;
    color: var(--cr2-accent);
}

.cr2__card--wide .cr2__card-quote-mark {
    font-size: 96px;
    height: 44px;
}

.cr2__card-text {
    margin: 0;
    font-size: 16px;
    line-height: 1.65;
    color: var(--cr2-body);
}

.cr2__card--wide .cr2__card-text {
    font-family: var(--cr2-serif);
    font-size: 23px;
    line-height: 1.55;
    color: var(--cr2-text);
}

.cr2__card-text--large {
    font-family: var(--cr2-serif);
    font-size: 26px;
    line-height: 1.45;
    color: var(--cr2-text);
}

.cr2__card-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.cr2__card--wide .cr2__card-body {
    gap: 20px;
}

/* ---------- author ---------- */
.cr2__author {
    display: flex;
    align-items: center;
    gap: 14px;
}

.cr2__card--wide .cr2__author {
    gap: 16px;
    padding-top: 28px;
    border-top: 1px solid var(--cr2-line);
}

.cr2__author-avatar {
    flex: none;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid var(--cr2-accent);
    color: var(--cr2-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--cr2-serif);
    font-size: 15px;
}

.cr2__card--wide .cr2__author-avatar,
.cr2__card--wide-short .cr2__author-avatar {
    width: 48px;
    height: 48px;
    font-size: 17px;
}

.cr2__author-meta {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.cr2__author-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--cr2-text);
}

.cr2__author-role {
    font-size: 13px;
    color: var(--cr2-muted);
}

.cr2__source-link {
    margin-left: auto;
    flex: none;
    display: inline-flex;
    align-items: center;
    transition: transform var(--transition);
}

.cr2__source-link:hover {
    transform: translateY(-2px);
}

/* Both source assets are square images with a circular mark inside;
   clip them to identical circles so only the round logo shows. */
.cr2__source-logo {
    display: block;
    width: 32px;
    height: 32px;
    object-fit: cover;
    border-radius: 50%;
    clip-path: circle(50%);
    background: #ffffff;
}

.cr2__card--wide .cr2__source-logo,
.cr2__card--wide-short .cr2__source-logo {
    width: 36px;
    height: 36px;
}

.cr2__card--wide .cr2__author-name,
.cr2__card--wide-short .cr2__author-name {
    font-size: 16px;
}

.cr2__card--wide .cr2__author-role,
.cr2__card--wide-short .cr2__author-role {
    font-size: 14px;
}

/* ---------- highlight card ---------- */
.cr2__card--highlight {
    background: var(--cr2-accent);
    border-color: var(--cr2-accent);
    color: #ffffff;
    padding: 36px;
    margin-top: 0;
    align-self: stretch;
}

.cr2__card--highlight .cr2__card-text {
    font-family: var(--cr2-serif);
    font-weight: 500;
    font-size: 44px;
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: #ffffff;
}

.cr2__card--highlight .cr2__author-avatar {
    border-color: #ffffff;
    color: #ffffff;
}

.cr2__card--highlight .cr2__author-name,
.cr2__card--highlight .cr2__author-role {
    color: #ffffff;
}

@media (max-width: 640px) {
    .cr2__card,
    .cr2__card--wide,
    .cr2__card--wide-short {
        padding: 28px;
    }

    .cr2__card--wide .cr2__card-text {
        font-size: 19px;
    }

    .cr2__card-text--large {
        font-size: 22px;
    }

    .cr2__card--highlight .cr2__card-text {
        font-size: 36px;
    }
}

@media (max-width: 480px) {
    .cr2__row {
        flex-direction: column;
    }
}

/* security-badges.css */
/* ==========================================================================
   Security badges (includes/security_badges.php)
   ========================================================================== */
.sb {
    padding: 40px 0 40px;
    background: #f7f9fc;
}

.sb__intro {
    margin-bottom: var(--space-lg);
}

.sb__heading {
    font-family: var(--font-base);
    font-weight: 700;
    font-size: clamp(1.9rem, 3.4vw, 2.7rem);
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: #17304e;
    margin: 0 0 var(--space-sm);
    text-align: center;
    text-wrap: balance;
}

.sb__desc {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #6f8298;
    margin: 0;
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    max-width: 760px;
}

.sb__row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border: 1px solid #e3e8ef;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: #ffffff;
}

.sb__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 32px 20px 28px;
    border-left: 1px solid #e3e8ef;
    text-align: center;
    transition: background var(--transition);
}

.sb__item:first-child {
    border-left: none;
}

.sb__item:hover {
    background: #fafbfd;
}

.sb__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 92px;
    height: 92px;
    flex-shrink: 0;
}

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

.sb__icon-img {
    width: 120px;
    height: 120px;
    object-fit: contain;
}

.sb__label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #9caebf;
    margin: 0;
}

.sb__item.is-visible .sb__icon {
    animation: sb-badge-in 0.5s ease both;
}

@keyframes sb-badge-in {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.92);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

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

    .sb__item:nth-child(odd) {
        border-left: none;
    }

    .sb__item:nth-child(1),
    .sb__item:nth-child(2) {
        border-bottom: 1px solid #e3e8ef;
    }
}

@media (max-width: 600px) {
    .sb {
        padding: 40px 0 44px;
    }

    .sb__row {
        grid-template-columns: 1fr;
    }

    .sb__item {
        border-left: none;
        border-bottom: 1px solid #e3e8ef;
    }

    .sb__item:last-child {
        border-bottom: none;
    }

    .sb__icon {
        width: 76px;
        height: 76px;
    }
}

/* awards-showcase.css */
/* ==========================================================================
   Awards showcase — dark badge grid (includes/awards_showcase.php)
   ========================================================================== */
.aw {
    --aw-mint: #17d1b0;
    --aw-gold: #16B8A6;
    position: relative;
    overflow: hidden;
    padding: 40px 0 40px;
    background:
        radial-gradient(60% 60% at 85% 20%, rgba(23, 209, 176, 0.16), transparent 70%),
        radial-gradient(50% 50% at 0% 100%, rgba(22, 184, 166, 0.10), transparent 70%),
        #051722;
    color: #ffffff;
}

.aw__wrap {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
}

.aw__eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--aw-gold);
}

.aw__eyebrow::after {
    content: '';
    width: 44px;
    height: 1px;
    background: var(--aw-gold);
}

.aw__heading {
    margin-top: 18px;
    font-size: clamp(1.9rem, 3.4vw, 2.6rem);
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #ffffff;
}

.aw__heading-line,
.aw__heading-accent {
    display: block;
}

.aw__heading-accent {
    color: var(--aw-mint);
}

.aw__lead {
    margin-top: 18px;
    font-size: 1rem;
    line-height: 1.65;
    color: #9fb6c2;
    max-width: none;
    text-align: left;
}

.aw__lead-line {
    display: block;
}

.aw__stats {
    margin-top: 30px;
    display: flex;
    gap: 28px;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.aw__stats div {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #7f98a6;
}

.aw__stats b {
    display: block;
    margin-bottom: 6px;
    font-size: 2.1rem;
    line-height: 1;
    letter-spacing: -0.02em;
    color: #ffffff;
    text-transform: none;
}

.aw__tiles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 160px));
    grid-auto-rows: minmax(0, 160px);
    gap: 16px;
    justify-content: end;
}

.aw__tile {
    margin: 0;
    position: relative;
    background: linear-gradient(180deg, #ffffff, #f6f8fa);
    border-radius: 14px;
    display: grid;
    place-items: center;
    padding: 10px;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.5) inset,
        0 14px 26px rgba(0, 0, 0, 0.32),
        0 0 0 1px rgba(255, 255, 255, 0.07);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.aw__tile:hover {
    transform: translateY(-4px);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.6) inset,
        0 20px 34px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(23, 209, 176, 0.35);
}

.aw__tile img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

@media (max-width: 980px) {
    .aw {
        padding: 56px 0 64px;
    }

    .aw__wrap {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .aw__lead-line {
        display: inline;
    }

    .aw__lead-line::after {
        content: ' ';
    }

    .aw__tiles {
        justify-content: center;
        grid-template-columns: repeat(2, minmax(0, 140px));
        grid-auto-rows: minmax(0, 140px);
        gap: 14px;
    }
}

@media (max-width: 560px) {
    .aw__tiles {
        grid-template-columns: repeat(2, minmax(0, 120px));
        grid-auto-rows: minmax(0, 120px);
        gap: 10px;
    }

    .aw__tile {
        padding: 10px;
        border-radius: 12px;
    }

    .aw__stats {
        gap: 18px;
    }

    .aw__stats b {
        font-size: 1.7rem;
    }
}

/* press-mentions.css */
/* ==========================================================================
   Press mentions (includes/press_mentions.php)
   ========================================================================== */
.pm {
    padding: 40px 0 24px;
    background: #ffffff;
}

.pm__top {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    margin-bottom: 40px;
    text-align: center;
}

.pm__heading {
    font-family: var(--font-base);
    font-weight: 700;
    font-size: clamp(1.9rem, 3.4vw, 2.7rem);
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: #17304e;
    margin: 0 0 var(--space-sm);
}

.pm__desc {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #6f8298;
    margin: 0 auto;
    max-width: 640px;
}

/* ---------- auto-scrolling marquee (same mechanic as our_client.php) ---------- */
.pm__marquee {
    width: 100%;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
}

.pm__track {
    display: flex;
    align-items: stretch;
    gap: var(--space-md);
    width: max-content;
    animation: pmMarqueeScroll 36s linear infinite;
}

.pm__marquee:hover .pm__track {
    animation-play-state: paused;
}

@keyframes pmMarqueeScroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .pm__track {
        animation: none;
    }
}

.pm__card {
    flex: 0 0 auto;
    width: max-content;
    min-width: 280px;
    display: flex;
    flex-direction: column;
}

.pm__thumb {
    position: relative;
    width: 100%;
    height: 220px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-md);
}

.pm__brand {
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: #ffffff;
    text-align: center;
    padding: 0 16px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

.pm__thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.pm__thumb--1 { background: linear-gradient(135deg, #4a5568, #1a202c); }
.pm__thumb--2 { background: linear-gradient(135deg, #0d2b3e, #06151f); }
.pm__thumb--3 { background: linear-gradient(135deg, #6b2b2b, #3d1414); }
.pm__thumb--4 { background: linear-gradient(135deg, #3a3a3a, #141414); }
.pm__thumb--5 { background: linear-gradient(135deg, #1f3a5f, #0c1b30); }

.pm__card-title {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    color: #17304e;
    margin: 0 0 var(--space-sm);
    flex-grow: 1;
    white-space: nowrap;
}

.pm__read-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.88rem;
    font-weight: 600;
    color: rgb(0, 107, 141);
    transition: gap var(--transition), opacity var(--transition);
}

.pm__read-more:hover {
    gap: 10px;
    opacity: 0.8;
}

.pm__read-more span {
    transition: transform var(--transition);
}

@media (max-width: 900px) {
    .pm__thumb {
        height: 190px;
    }
}

@media (max-width: 600px) {
    .pm {
        padding: 32px 0 20px;
    }

    .pm__top {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-md);
    }

    .pm__card {
        min-width: 240px;
    }

    .pm__thumb {
        height: 170px;
    }

    .pm__card-title {
        font-size: 0.9rem;
    }
}

/* ap-calculator.css */
/* ==========================================================================
   AP cost calculator (includes/ap_calculator.php)
   ========================================================================== */
.apc {
    padding: 40px 0;
    background: linear-gradient(180deg, #eef3fb 0%, #f6f9fd 100%);
}

.apc__row {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: clamp(32px, 5vw, 64px);
    align-items: start;
}

.apc__eyebrow {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: rgb(0, 107, 141);
    margin: 0 0 var(--space-sm);
}

.apc__heading {
    font-size: clamp(1.7rem, 2.8vw, 2.2rem);
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: #17304e;
    font-weight: 700;
    margin: 0 0 var(--space-sm);
}

.apc__desc {
    color: #6f8298;
    font-size: 0.9rem;
    line-height: 1.6;
    max-width: 420px;
    margin: 0 0 var(--space-lg);
}

.apc__inputs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
    max-width: 560px;
}

.apc__field {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.apc__field-label {
    display: block;
    font-size: 0.7rem;
    color: #8295ad;
    margin-bottom: 8px;
}

.apc__field-input {
    width: 100%;
    margin-top: auto;
    padding: 10px 12px;
    border-radius: var(--radius);
    border: 1px solid #d8e1eb;
    background: #ffffff;
    color: var(--color-text);
    font-size: 0.95rem;
    font-family: inherit;
    box-sizing: border-box;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.apc__field-input:focus {
    outline: none;
    border-color: #2166ff;
    box-shadow: 0 0 0 3px rgba(33, 102, 255, 0.15);
}

.apc__result {
    padding-top: 2px;
    padding-left: clamp(24px, 4vw, 48px);
    border-left: 1px solid #d7e0ec;
}

.apc__result-eyebrow {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #8295ad;
    margin: 0 0 var(--space-sm);
}

.apc__result-stat {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 0 0 var(--space-md);
}

.apc__result-number {
    font-size: clamp(2.6rem, 5vw, 3.4rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    color: rgb(0, 107, 141);
}

.apc__result-unit {
    font-size: 0.9rem;
    color: #6f8298;
}

.apc__effort {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

.apc__effort-label {
    font-size: 0.72rem;
    color: #8295ad;
    margin: 0 0 4px;
}

.apc__effort-value {
    font-size: 1.05rem;
    font-weight: 700;
    color: #17304e;
    margin: 0;
}

.apc__cta {
    display: inline-block;
    background: rgb(0, 107, 141);
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 12px 24px;
    border-radius: var(--radius);
    margin-bottom: var(--space-md);
}

.apc__disclaimer {
    font-size: 0.68rem;
    line-height: 1.6;
    color: #a6b4c4;
    margin: 0;
    max-width: 420px;
}

@media (max-width: 900px) {
    .apc {
        padding-top: 28px;
    }

    .apc__row {
        grid-template-columns: 1fr;
    }

    .apc__desc {
        max-width: 100%;
        margin-bottom: 20px;
    }

    .apc__result {
        padding-left: 0;
        border-left: none;
        border-top: 1px solid #d7e0ec;
        padding-top: 24px;
    }
}

@media (max-width: 600px) {
    .apc {
        padding: 24px 0 40px;
    }

    .apc__inputs {
        grid-template-columns: 1fr;
    }
}

/* blog.css */
/* ==========================================================================
   Blog / resources hub (includes/blog.php)
   Replaces includes/resource_links.php.
   ========================================================================== */
.blog {
    --color-primary: #006B8D;
    --color-primary-dark: #00546F;
    --color-primary-light: #006B8D;
    padding: 56px 0;
    background: linear-gradient(180deg, #f6f9fc 0%, #ffffff 60%);
}

.blog__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
    align-items: stretch;
}

/* ---------- featured card (left) ---------- */
.blog__featured {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: inherit;
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 0;
    box-sizing: border-box;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.blog__featured:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-primary-light);
}

.blog__featured-visual {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    aspect-ratio: 754 / 369;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    box-sizing: border-box;
    overflow: hidden;
}

.blog__featured-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    pointer-events: none;
    transition: transform 0.4s ease;
}

.blog__featured:hover .blog__featured-img {
    transform: scale(1.03);
}

.blog__featured-body {
    flex: 0 0 auto;
    padding: 14px 16px 16px;
    box-sizing: border-box;
}

.blog__featured-tag {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-primary);
    margin: 0 0 8px;
}

h3.blog__featured-headline {
    position: static;
    margin: 0;
    padding: 0;
    max-width: none;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 0;
    border-radius: 0;
    color: #17304e;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0;
    text-align: left;
    white-space: normal;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.blog__featured-title {
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.4;
    color: #17304e;
    margin: 0;
}

/* ---------- 2x2 resource grid (right) ---------- */
.blog__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: var(--space-md);
    height: 100%;
}

.blog__card {
    display: flex;
    flex-direction: column;
    min-height: 150px;
    background: #ffffff;
    border: 1px solid #e1e7f0;
    border-radius: var(--radius);
    box-sizing: border-box;
    padding: var(--space-sm);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.blog__card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-primary-light);
}

.blog__card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.blog__card-tag {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-primary);
    margin: 0 0 8px;
}

.blog__card-title {
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.4;
    color: #17304e;
    margin: 0 0 8px;
}

.blog__card-title a {
    color: inherit;
    text-decoration: none;
}

.blog__card-title a:hover {
    color: var(--color-primary);
}

.blog__card-excerpt {
    margin: 0 0 14px;
    font-size: 0.82rem;
    line-height: 1.55;
    color: #5b7184;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog__card-readmore {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: auto;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
}

.blog__card-readmore:hover {
    color: var(--color-primary-dark);
    text-decoration: underline;
}

@media (max-width: 900px) {
    .blog__row {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }

    .blog__grid {
        gap: var(--space-sm);
    }
}

@media (max-width: 600px) {
    .blog {
        padding: 44px 0;
    }

    .blog__grid {
        grid-template-columns: 1fr;
    }

    .blog__featured-visual {
        aspect-ratio: 754 / 369;
    }

    .blog__featured-body {
        padding: 12px 14px 14px;
    }

    h3.blog__featured-headline {
        font-size: 0.9rem;
        line-height: 1.35;
    }
}

/* faq-section.css */
/* ==========================================================================
   FAQ section (includes/faq_section.php)
   ========================================================================== */
.fs {
    padding: 30px 0;
    background: #f5f8fc;
}

.fs__intro {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 48px;
}

.fs__eyebrow {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #8a94a6;
    margin: 0 0 var(--space-sm);
}

.fs__heading {
    font-size: clamp(1.9rem, 3.2vw, 2.5rem);
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: #17304e;
    font-weight: 700;
    margin: 0 0 var(--space-sm);
}

.fs__link {
    display: inline-block;
    font-size: 0.9rem;
    font-weight: 600;
    color: rgb(0, 107, 141);
    border-bottom: 1px solid rgb(0, 107, 141);
    padding-bottom: 2px;
    margin-top: var(--space-sm);
    transition: opacity var(--transition);
}

.fs__link:hover {
    opacity: 0.7;
}

.fs__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 56px;
    align-items: start;
}

.fs__col {
    display: flex;
    flex-direction: column;
}

.fs__item {
    border-top: 1px solid #dde4ee;
}

.fs__col .fs__item:last-child {
    border-bottom: 1px solid #dde4ee;
}

.fs__question {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-md);
    background: none;
    border: none;
    padding: 22px 0;
    font-size: 0.98rem;
    font-weight: 600;
    color: #17304e;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    line-height: 1.4;
}

.fs__icon {
    position: relative;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #17304e;
    display: grid;
    place-items: center;
    font-size: 0;
    color: #fff;
    transition: background 0.25s ease;
}

.fs__icon::before {
    content: '+';
    font-size: 1.1rem;
    font-weight: 400;
    line-height: 1;
}

.fs__item.is-active .fs__icon::before {
    content: '\2212';
}

.fs__question:hover .fs__icon {
    background: rgb(0, 107, 141);
}

.fs__answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.fs__answer p {
    margin: 0;
    padding: 0 0 22px;
    color: #6f8298;
    font-size: 0.88rem;
    line-height: 1.65;
    max-width: 560px;
}

@media (max-width: 900px) {
    .fs__grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .fs__col:first-child .fs__item:last-child {
        border-bottom: 1px solid #dde4ee;
    }
}

@media (max-width: 600px) {
    .fs {
        padding: 44px 0;
    }

    .fs__heading {
        font-size: 1.8rem;
    }
}

/* home-faq-section.css */
/* ==========================================================================
   Homepage FAQ section — ported from the reference workspace design
   (C:\Users\vishva.s\Desktop\tyasuite-workspace-20260831-102716\index.html,
   section#faq / .faq-section, and its assets/css/faq.css).

   All classes are prefixed "hfaq-" (and custom properties "--hfaq-") so
   this never collides with:
   - the generic .faq-item/.faq-question/.faq-answer accordion wiring in
     assets/home/js/main.js (which targets different, unrelated markup)
   - the unrelated .faq-item/.faq-question/... rules already declared in
     assets/home/css/home.css
   - the previous ".fs"/".fs__*" FAQ section this one replaces.

   Behaviour/JS: assets/home/js/home-faq-section.js
   ========================================================================== */
:root {
  --hfaq-brand:      #4782A2;
  --hfaq-brand-dark: #2f5f7e;
  --hfaq-ink:        #0f172a;
  --hfaq-plus-bg:    #4782A2;
  --hfaq-plus-fg:    #FFFFFF;
  --hfaq-line:       rgba(71, 130, 162, 0.18);
  --hfaq-answer:     #4a6375;
  --hfaq-speed:      0.38s;
  --hfaq-ease:       cubic-bezier(0.4, 0, 0.2, 1);
}

.hfaq-section {
  position: relative;
  background: transparent;
  padding: 24px clamp(16px, 5vw, 40px) clamp(38px, 5vw, 62px);
  font-family: Figtree, sans-serif;
  overflow: hidden;
}

.hfaq-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.hfaq-blob {
  position: absolute;
  border-radius: 50%;
  opacity: 0.09;
  transform: translateZ(0);
}

.hfaq-blob-1 {
  width: 500px;
  height: 500px;
  max-width: 80vw;
  max-height: 80vw;
  background: radial-gradient(circle, var(--hfaq-brand) 0%, transparent 70%);
  top: -120px;
  left: -100px;
}

.hfaq-blob-2 {
  width: 400px;
  height: 400px;
  max-width: 70vw;
  max-height: 70vw;
  background: radial-gradient(circle, #6faac4 0%, transparent 70%);
  bottom: -100px;
  right: -80px;
}

.hfaq-container {
  position: relative;
  z-index: 1;
  max-width: 1160px;
  margin: 0 auto;
}

.hfaq-header {
  text-align: center;
  margin-bottom: clamp(26px, 4vw, 44px);
}

.hfaq-eyebrow {
  font-family: Figtree, sans-serif;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hfaq-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0 0 16px;
}

.hfaq-eyebrow span {
  display: inline-block;
  width: 36px;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, var(--hfaq-brand));
}

.hfaq-eyebrow span:last-child {
  background: linear-gradient(90deg, var(--hfaq-brand), transparent);
}

.hfaq-title {
  font-family: Figtree, sans-serif;
  font-size: clamp(1.9rem, 4vw, 3rem);
  font-weight: 700;
  color: var(--hfaq-ink);
  line-height: 1.18;
  margin: 0 0 16px;
}

.hfaq-subtitle {
  font-family: Figtree, sans-serif;
  font-size: 1rem;
  color: var(--hfaq-answer);
  max-width: 540px;
  margin: 0 auto;
  line-height: 1.65;
}

.hfaq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 48px;
  align-items: start;
}

.hfaq-item {
  border-bottom: 1.5px solid var(--hfaq-line);
  overflow: hidden;
}

.hfaq-col .hfaq-item:first-child {
  border-top: 1.5px solid var(--hfaq-line);
}

.hfaq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 20px 0;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: Figtree, sans-serif;
  font-size: clamp(0.875rem, 1.5vw, 0.975rem);
  font-weight: 500;
  color: var(--hfaq-ink);
  line-height: 1.45;
  transition: color var(--hfaq-speed) var(--hfaq-ease);
  -webkit-tap-highlight-color: transparent;
}

.hfaq-question:hover {
  color: var(--hfaq-brand);
}

.hfaq-question:focus-visible {
  outline: 2px solid var(--hfaq-brand);
  outline-offset: 2px;
  border-radius: 4px;
}

.hfaq-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--hfaq-plus-bg);
  color: var(--hfaq-plus-fg);
  transition: transform var(--hfaq-speed) var(--hfaq-ease),
              background var(--hfaq-speed) var(--hfaq-ease);
}

.hfaq-icon svg {
  width: 15px;
  height: 15px;
}

.hfaq-question[aria-expanded="true"] .hfaq-icon {
  background: var(--hfaq-brand-dark);
  transform: rotate(45deg);
}

.hfaq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--hfaq-speed) var(--hfaq-ease);
}

.hfaq-answer.is-open {
  grid-template-rows: 1fr;
}

.hfaq-answer-inner {
  overflow: hidden;
}

.hfaq-answer-inner p {
  margin: 0;
  padding: 0 48px 20px 0;
  font-family: Figtree, sans-serif;
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--hfaq-answer);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity var(--hfaq-speed) var(--hfaq-ease),
              transform var(--hfaq-speed) var(--hfaq-ease);
}

.hfaq-answer.is-open .hfaq-answer-inner p {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: no-preference) {
  .hfaq-item {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
    transition: opacity 0.45s var(--hfaq-ease),
                transform 0.45s var(--hfaq-ease),
                border-color 0.2s;
  }

  .hfaq-item.visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  .hfaq-item:nth-child(1) { transition-delay: 0.05s; }
  .hfaq-item:nth-child(2) { transition-delay: 0.10s; }
  .hfaq-item:nth-child(3) { transition-delay: 0.15s; }
  .hfaq-item:nth-child(4) { transition-delay: 0.20s; }
  .hfaq-item:nth-child(5) { transition-delay: 0.25s; }
}

@media (max-width: 768px) {
  .hfaq-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .hfaq-col:last-child .hfaq-item:first-child {
    border-top: 1.5px solid var(--hfaq-line);
  }
}

@media (max-width: 480px) {
  .hfaq-question { font-size: 0.875rem; padding: 18px 0; }
  .hfaq-icon { width: 28px; height: 28px; }
  .hfaq-icon svg { width: 13px; height: 13px; }
  .hfaq-answer-inner p { padding-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hfaq-answer,
  .hfaq-answer-inner p,
  .hfaq-icon,
  .hfaq-item,
  .hfaq-question {
    transition: none !important;
  }
}

/* final-cta.css */
/* ==========================================================================
   Final CTA — "Book a ZeroTouch demo" (includes/final_cta.php)
   Dark panel with decorative rings on the left, cream form card on the
   right.
   ========================================================================== */
.fcn {
    --fcn-page: #07151D;
    --fcn-panel: #0B2530;
    --fcn-card: #F6F4EE;
    --fcn-ink: #0C1F2B;
    --fcn-muted: #55656C;
    --fcn-label: #3B4C54;
    --fcn-line: #D4D9D6;
    --fcn-accent: #17D1B0;
    --fcn-focus: #0E7C7B;
    --fcn-text-on-dark: #F6F4EE;
    --fcn-text-soft: #B7CBD3;
    padding: 20px 20px;
    background: var(--fcn-page);
}

.fcn__panel {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 704px);
    align-items: center;
    max-width: 1360px;
    width: 100%;
    margin: 0 auto;
    min-height: 0;
    border-radius: 36px;
    background-color: var(--fcn-panel);
    background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1.5px, transparent 1.5px);
    background-size: 28px 28px;
    box-sizing: border-box;
}

/* decorative rings */
.fcn__panel::before,
.fcn__panel::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    border: 1.5px solid rgba(22, 184, 166, 0.35);
    pointer-events: none;
}

.fcn__panel::before {
    left: -140px;
    bottom: -180px;
    width: 460px;
    height: 460px;
}

.fcn__panel::after {
    left: -80px;
    bottom: -120px;
    width: 340px;
    height: 340px;
    border-color: rgba(22, 184, 166, 0.2);
}

/* ---------- left: copy ---------- */
.fcn__copy {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 28px 32px 28px 64px;
}

.fcn__title {
    margin: 0;
    font-family: Figtree, sans-serif;
    font-weight: 800;
    font-size: clamp(28px, 3.3vw, 46px);
    line-height: 1.12;
    letter-spacing: -0.03em;
    color: var(--fcn-text-on-dark);
    word-break: break-word;
}

.fcn__title span {
    color: var(--fcn-accent);
}

.fcn__sub {
    margin: 0;
    max-width: 460px;
    font-size: 20px;
    line-height: 1.6;
    color: var(--fcn-text-soft);
}

/* ---------- right: form card ---------- */
.fcn__form-wrap {
    position: relative;
    z-index: 1;
    padding: 28px 32px 28px 0;
}

.fcn__form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 28px 32px 22px;
    background: var(--fcn-card);
    border-radius: 28px;
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.55);
}

.fcn__row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.fcn__field {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.fcn__field label {
    font-size: 13px;
    font-weight: 600;
    color: var(--fcn-label);
}

.fcn__input,
.fcn__select,
.fcn__phone {
    height: 50px;
    background: #fff;
    border: 1.5px solid var(--fcn-line);
    border-radius: 12px;
    font: 500 16px Figtree, sans-serif;
    color: var(--fcn-ink);
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.fcn__input {
    padding: 0 16px;
    width: 100%;
}

.fcn__select {
    padding: 0 12px;
    width: 170px;
    font-weight: 600;
    font-size: 15px;
}

.fcn__input:focus,
.fcn__select:focus,
.fcn__phone:focus-within {
    border-color: var(--fcn-focus);
    box-shadow: 0 0 0 4px rgba(14, 124, 123, 0.18);
}

.fcn__field.is-invalid .fcn__input,
.fcn__field.is-invalid .fcn__select,
.fcn__field.is-invalid .fcn__phone {
    border-color: #d94f4f;
}

.fcn__field.is-invalid .fcn__input:focus,
.fcn__field.is-invalid .fcn__select:focus,
.fcn__field.is-invalid .fcn__phone:focus-within {
    box-shadow: 0 0 0 4px rgba(217, 79, 79, 0.18);
}

.fcn__error {
    display: none;
    font-size: 12.5px;
    font-weight: 500;
    color: #d94f4f;
}

.fcn__field.is-invalid .fcn__error {
    display: block;
}

/* phone group */
.fcn__phone-group {
    display: flex;
    gap: 10px;
    min-width: 0;
}

.fcn__phone {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.fcn__phone-prefix {
    padding: 0 6px 0 16px;
    font-weight: 700;
    color: var(--fcn-ink);
}

.fcn__phone input {
    flex: 1;
    min-width: 0;
    width: 100%;
    height: 100%;
    padding: 0 16px 0 6px;
    border: 0;
    outline: none;
    background: transparent;
    font: inherit;
    color: inherit;
}

.fcn__contact {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-top: 4px;
    font-size: 14px;
    color: var(--fcn-muted);
}

.fcn__contact strong {
    color: var(--fcn-ink);
    font-weight: 700;
}

.fcn__contact strong a {
    color: inherit;
}

.fcn__submit {
    height: 58px;
    border: 0;
    border-radius: 14px;
    background: #00799F;
    color: #ffffff;
    font: 700 18px Figtree, sans-serif;
    letter-spacing: 0.01em;
    cursor: pointer;
    box-shadow: 0 10px 24px -10px rgba(0, 121, 159, 0.9);
    transition: filter 0.15s, transform 0.15s;
}

.fcn__submit:hover {
    filter: brightness(1.05);
}

.fcn__submit:active {
    transform: translateY(1px);
}

.fcn__submit:focus-visible {
    outline: 3px solid var(--fcn-focus);
    outline-offset: 3px;
}

.fcn__legal {
    margin: 0;
    text-align: center;
    font-size: 13px;
    line-height: 1.5;
    color: var(--fcn-muted);
}

.fcn__legal a {
    color: var(--fcn-ink);
    text-decoration: underline;
}

.fcn__legal a:hover {
    color: var(--fcn-focus);
}

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
    .fcn {
        padding: 12px;
    }

    .fcn__panel {
        grid-template-columns: 1fr;
        min-height: 0;
        border-radius: 28px;
    }

    .fcn__copy {
        padding: 28px 24px 4px;
    }

    .fcn__form-wrap {
        padding: 14px 16px 18px;
    }
}

@media (max-width: 560px) {
    .fcn__copy {
        padding: 22px 18px 4px;
        gap: 14px;
    }

    .fcn__sub {
        font-size: 17px;
    }

    .fcn__form {
        padding: 24px 20px 20px;
        border-radius: 22px;
    }

    .fcn__row {
        grid-template-columns: 1fr;
    }

    .fcn__select {
        width: 140px;
    }
}

@media (max-width: 400px) {
    .fcn {
        padding: 10px 10px;
    }

    .fcn__copy {
        padding: 18px 14px 2px;
    }

    .fcn__form-wrap {
        padding: 10px 12px 14px;
    }

    .fcn__form {
        padding: 20px 16px 16px;
    }

    .fcn__phone-group {
        flex-wrap: wrap;
    }

    .fcn__select {
        width: 120px;
    }

    .fcn__phone {
        flex: 1 1 100%;
    }
}

/* demo-modal.css */
/* ==========================================================================
   Book a demo modal (includes/demo_modal.php)
   Dark two-column layout: client logo showcase (left) + lead form (right).
   ========================================================================== */
.dm {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--space-md);
}

.dm.is-open {
    display: flex;
}

.dm__overlay {
    position: absolute;
    inset: 0;
    background: rgba(5, 10, 20, 0.72);
    backdrop-filter: blur(2px);
}

.dm__dialog {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 980px;
    max-height: 92vh;
    overflow-y: auto;
    background: #092344;
    color: #ffffff;
    border-radius: 18px;
    box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.55);
    box-sizing: border-box;
    animation: dm-pop-in 0.25s ease;
}

@keyframes dm-pop-in {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.dm__close {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 2;
    background: none;
    border: none;
    font-size: 1.6rem;
    line-height: 1;
    color: #ffffff;
    cursor: pointer;
    padding: 0;
    opacity: 0.75;
    transition: opacity var(--transition);
}

.dm__close:hover {
    opacity: 1;
}

.dm__layout {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
}

/* ---------- left: client logo showcase ---------- */
.dm__showcase {
    padding: 36px 32px;
    background: #0A0F18;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.dm__showcase-title {
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.35;
    color: #ffffff;
    margin: 0 0 24px;
    max-width: 360px;
}

.dm__logo-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.dm__logo {
    display: block;
    height: 56px;
    width: 100%;
    box-sizing: border-box;
    object-fit: contain;
    object-position: center;
    padding: 12px 16px;
    background: #ffffff;
    border-radius: 8px;
}

/* Same white tile as other logos; extra padding only shrinks the artwork inside. */
.dm__logo[alt="Swiggy logo"],
.dm__logo[alt="Licious logo"] {
    height: 56px;
    padding: 16px 20px;
    object-fit: contain;
    object-position: center;
}

/* ---------- right: lead form ---------- */
.dm__form-col {
    padding: 36px 32px;
}

.dm__title {
    font-size: 1.5rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 6px;
}

.dm__subtitle {
    font-size: 0.88rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.6);
    margin: 0 0 24px;
    max-width: 420px;
}

.dm__form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.dm__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.dm__row--full {
    grid-template-columns: 1fr;
}

.dm__field {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.dm__label {
    font-size: 0.78rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.75);
}

.dm__input {
    width: 100%;
    box-sizing: border-box;
    min-height: 46px;
    padding: 0 14px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
    font-size: 0.9rem;
    font-family: inherit;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.dm__input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

/* Keep autofilled fields (name/email/etc.) the same dark style as empty ones
   like Job title, instead of Chrome’s default white fill. */
.dm__input:-webkit-autofill,
.dm__input:-webkit-autofill:hover,
.dm__input:-webkit-autofill:focus {
    -webkit-text-fill-color: #ffffff;
    caret-color: #ffffff;
    transition: background-color 99999s ease-in-out 0s;
    box-shadow: 0 0 0 1000px rgba(9, 35, 68, 0.95) inset;
    border: 1px solid rgba(255, 255, 255, 0.14);
}

.dm__input:focus {
    outline: none;
    border-color: #1375E4;
    box-shadow: 0 0 0 3px rgba(19, 117, 228, 0.25);
}

.dm__error {
    display: none;
    font-size: 0.76rem;
    font-weight: 500;
    color: #ff6b6b;
    margin-top: -2px;
}

.dm__field.is-invalid .dm__input,
.dm__field.is-invalid .dm__phone-wrap {
    border-color: #ff6b6b;
}

.dm__field.is-invalid .dm__input:focus {
    box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.2);
}

.dm__field.is-invalid .dm__error {
    display: block;
}

.dm__phone-wrap {
    display: flex;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.06);
}

.dm__phone-wrap:focus-within {
    border-color: #1375E4;
    box-shadow: 0 0 0 3px rgba(19, 117, 228, 0.25);
}

.dm__country-select {
    flex-shrink: 0;
    max-width: 130px;
    height: 46px;
    padding: 0 10px;
    font-size: 0.78rem;
    font-weight: 600;
    font-family: inherit;
    color: rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.04);
    border: none;
    border-right: 1px solid rgba(255, 255, 255, 0.14);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    text-overflow: ellipsis;
}

.dm__country-select option {
    color: #0E1420;
}

.dm__country-select:focus {
    outline: none;
}

.dm__phone-prefix {
    flex-shrink: 0;
    padding: 0 8px 0 12px;
    font-size: 0.9rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.75);
}

.dm__input--phone {
    border: none;
    border-radius: 0;
    background: transparent;
    padding-left: 0;
}

.dm__input--phone:focus {
    box-shadow: none;
}

.dm__contact {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.5);
    margin: 0;
}

.dm__contact-item a {
    color: rgba(255, 255, 255, 0.85);
    font-weight: 600;
}

.dm__submit {
    width: 100%;
    min-height: 52px;
    margin-top: 4px;
    padding: 12px;
    border: none;
    border-radius: 8px;
    background: #1375E4;
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: background var(--transition), transform var(--transition);
}

.dm__submit:hover {
    background: #0f63c4;
    transform: translateY(-2px);
}

@media (max-width: 990px) {
    .dm__layout {
        grid-template-columns: 1fr;
    }

    .dm__showcase {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        padding: 28px 24px;
    }

    .dm__form-col {
        padding: 28px 24px;
    }

    .dm__row {
        grid-template-columns: 1fr;
    }

    .dm__dialog {
        max-height: 90vh;
    }
}

@media (max-width: 600px) {
    .dm__dialog {
        border-radius: 14px;
    }

    .dm__showcase-title {
        font-size: 1.05rem;
    }
}

/* video-modal.css */
/* ==========================================================================
   Video popup modal (includes/video_modal.php)
   ========================================================================== */
.vm {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--space-md);
}

.vm.is-open {
    display: flex;
}

.vm__overlay {
    position: absolute;
    inset: 0;
    background: rgba(9, 23, 44, 0.75);
    backdrop-filter: blur(2px);
}

.vm__dialog {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 900px;
    box-sizing: border-box;
    animation: vm-pop-in 0.25s ease;
}

@keyframes vm-pop-in {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.vm__close {
    position: absolute;
    top: -44px;
    right: 0;
    background: none;
    border: none;
    font-size: 2rem;
    line-height: 1;
    color: #ffffff;
    cursor: pointer;
    padding: 0;
    opacity: 0.85;
    transition: opacity var(--transition);
}

.vm__close:hover {
    opacity: 1;
}

.vm__frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 14px;
    overflow: hidden;
    background: #000;
    box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.5);
}

.vm__frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
}

@media (max-width: 600px) {
    .vm__close {
        top: -36px;
        font-size: 1.6rem;
    }
}

/* button-animations.css */
/* ==========================================================================
   Shared button animations — applies to every CTA/button across the site.
   Only animation-related properties are set here (hover lift, shine sweep,
   active press, idle glow pulse, focus outline). Color, text, size, font,
   border-radius and position are defined in each component's own stylesheet
   and are intentionally left untouched here.
   ========================================================================== */

.btn-primary,
.apc__cta,
.ap-cost .btn-mint,
.hn__btn--primary,
.dm__submit,
.fc__btn--mint,
.btn-white,
.sol-panel__link {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition: transform 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
    animation: btn-attention-glow 3s ease-in-out infinite;
}

/* 1. Hover: lift, lighter teal, deeper soft shadow */
.btn-primary:hover,
.apc__cta:hover,
.ap-cost .btn-mint:hover,
.hn__btn--primary:hover,
.dm__submit:hover,
.fc__btn--mint:hover,
.btn-white:hover,
.sol-panel__link:hover {
    transform: translateY(-3px);
    background-color: #00799F;
    box-shadow: 0 14px 28px -6px rgba(0, 107, 141, 0.45);
    animation-play-state: paused;
    
}

/* 2. Shine sweep on hover */
.btn-primary::after,
.apc__cta::after,
.ap-cost .btn-mint::after,
.hn__btn--primary::after,
.dm__submit::after,
.fc__btn--mint::after,
.btn-white::after,
.sol-panel__link::after {
    content: "";
    position: absolute;
    top: 0;
    left: -60%;
    width: 40%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.35), transparent);
    transform: skewX(-20deg);
    pointer-events: none;
    z-index: 1;
}

.btn-primary:hover::after,
.apc__cta:hover::after,
.ap-cost .btn-mint:hover::after,
.hn__btn--primary:hover::after,
.dm__submit:hover::after,
.fc__btn--mint:hover::after,
.btn-white:hover::after,
.sol-panel__link:hover::after {
    animation: btn-shine-sweep 0.8s ease;
}

@keyframes btn-shine-sweep {
    from {
        left: -60%;
    }
    to {
        left: 120%;
    }
}

/* 3. Click: press down with a smaller shadow */
.btn-primary:active,
.apc__cta:active,
.ap-cost .btn-mint:active,
.hn__btn--primary:active,
.dm__submit:active,
.fc__btn--mint:active,
.btn-white:active,
.sol-panel__link:active {
    transform: translateY(0) scale(0.98);
    box-shadow: 0 4px 10px -4px rgba(0, 107, 141, 0.35);
    animation-play-state: paused;
}

/* 4. Attention glow: slow infinite pulse, paused on hover (see rule above) */
@keyframes btn-attention-glow {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(0, 107, 141, 0.7);
    }
    50% {
        box-shadow: 0 0 18px 6px rgba(0, 107, 141, 0.35);
    }
}

/* 5. Keyboard: visible focus outline */
.btn-primary:focus-visible,
.apc__cta:focus-visible,
.ap-cost .btn-mint:focus-visible,
.hn__btn--primary:focus-visible,
.dm__submit:focus-visible,
.fc__btn--mint:focus-visible,
.btn-white:focus-visible,
.sol-panel__link:focus-visible {
    outline: 2px solid rgb(0, 107, 141);
    outline-offset: 3px;
}

/* 6. Accessibility: disable all motion for users who request reduced motion */
@media (prefers-reduced-motion: reduce) {
    .btn-primary,
    .apc__cta,
    .ap-cost .btn-mint,
    .hn__btn--primary,
    .dm__submit,
    .fc__btn--mint,
    .btn-white,
    .sol-panel__link {
        transition: none;
        animation: none;
    }

    .btn-primary:hover,
    .apc__cta:hover,
    .ap-cost .btn-mint:hover,
    .hn__btn--primary:hover,
    .dm__submit:hover,
    .fc__btn--mint:hover,
    .btn-white:hover,
    .sol-panel__link:hover {
        transform: none;
        animation: none;
    }

    .btn-primary::after,
    .apc__cta::after,
    .ap-cost .btn-mint::after,
    .hn__btn--primary::after,
    .dm__submit::after,
    .fc__btn--mint::after,
    .btn-white::after,
    .sol-panel__link::after {
        display: none;
    }

    .btn-primary:active,
    .apc__cta:active,
    .ap-cost .btn-mint:active,
    .hn__btn--primary:active,
    .dm__submit:active,
    .fc__btn--mint:active,
    .btn-white:active,
    .sol-panel__link:active {
        transform: none;
    }
}

/* home.css */
/* ==========================================================================
   Homepage (index.php) specific styles
   ========================================================================== */

/* Logos strip */
.logos-strip {
    padding: var(--space-lg) 0;
    border-bottom: 1px solid var(--color-border);
}

.logos-caption {
    text-align: center;
    color: var(--color-text-muted);
    font-size: 0.9rem;
    margin-bottom: var(--space-md);
}

.logos-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-lg);
    flex-wrap: wrap;
}

.logo-placeholder {
    padding: 10px 20px;
    background: var(--color-bg-alt);
    border-radius: var(--radius);
    color: var(--color-text-muted);
    font-weight: 600;
    font-size: 0.85rem;
}

/* Stats */
.stats {
    padding: var(--space-xl) 0;
    text-align: center;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
    margin-top: var(--space-lg);
}

.stat-card {
    padding: var(--space-lg) var(--space-md);
    background: var(--color-bg-alt);
    border-radius: var(--radius-lg);
}

.stat-number {
    display: block;
    font-size: 2.75rem;
    font-weight: 800;
    color: var(--color-primary);
    margin-bottom: var(--space-xs);
}

.stat-label {
    color: var(--color-text-muted);
    font-weight: 500;
}

.stats-disclaimer {
    margin-top: var(--space-md);
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

/* Value section */
.value-section {
    padding: var(--space-xl) 0;
    background: var(--color-bg-alt);
}

.value-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
    align-items: center;
}

.value-copy h2 {
    margin-bottom: var(--space-md);
}

.value-copy p {
    color: var(--color-text-muted);
    margin-bottom: var(--space-lg);
}

.visual-placeholder {
    height: 320px;
    background: linear-gradient(135deg, var(--color-primary-light), #ffffff);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    font-weight: 600;
}

/* Features */
.features {
    padding: var(--space-xl) 0;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-md);
}

.feature-card {
    padding: var(--space-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    transition: box-shadow var(--transition), transform var(--transition);
}

.feature-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-4px);
}

.feature-index {
    display: inline-block;
    font-weight: 800;
    color: var(--color-primary);
    margin-bottom: var(--space-sm);
}

.feature-card h3 {
    margin-bottom: var(--space-xs);
}

.feature-card p {
    color: var(--color-text-muted);
    font-size: 0.95rem;
}

/* Testimonials */
.testimonials {
    padding: var(--space-xl) 0;
    background: var(--color-bg-alt);
}

.testimonial-card {
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
    padding: var(--space-lg);
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.stars {
    color: #f5a623;
    margin-bottom: var(--space-sm);
    letter-spacing: 2px;
}

.testimonial-card blockquote {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: var(--space-sm);
}

.testimonial-author {
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

/* FAQ */
.faq {
    padding: var(--space-xl) 0;
}

.faq-list {
    max-width: 720px;
    margin: 0 auto;
}

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

.faq-question {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-md) 0;
    font-weight: 600;
    font-size: 1.05rem;
    text-align: left;
}

.faq-icon {
    font-size: 1.4rem;
    color: var(--color-primary);
    transition: transform var(--transition);
}

.faq-item.active .faq-icon {
    transform: rotate(45deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition);
}

.faq-answer p {
    padding-bottom: var(--space-md);
    color: var(--color-text-muted);
}

/* CTA section */
.cta-section {
    padding: var(--space-xl) 0;
    background: var(--color-dark);
    color: #fff;
    text-align: center;
}

.cta-inner h2 {
    margin-bottom: var(--space-sm);
}

.cta-inner p {
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: var(--space-lg);
}

/* home-footer-v2.css */
/* ==========================================================================
   Homepage footer — ported from the reference workspace design
   (C:\Users\vishva.s\Desktop\tyasuite-workspace-20260831-102716\index.html,
   footer.home-footer, and its assets/css/home-footer.css).

   All classes are prefixed "hft-" so this never collides with the previous
   homepage footer's ".site-footer"/".footer-*" rules in
   assets/home/css/base.css (which this section replaces — the old
   <footer class="site-footer"> markup in home_footer.php has been removed,
   so no duplicate footer renders).

   Behaviour/JS: assets/home/js/home-footer-v2.js
   ========================================================================== */
.hft-footer .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.hft-footer {
  position: relative;
  padding: clamp(56px, 7vw, 88px) 24px 32px;
  overflow: hidden;
  color: #0f172a;
  background: #FFFFFF;
  border-top: 1px solid #e4e9ee;
  font-family: Figtree, sans-serif;
}

.hft-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(rgba(15, 23, 42, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 23, 42, 0.04) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), transparent);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), transparent);
}

.hft-inner {
  position: relative;
  z-index: 1;
  width: min(100%, 1180px);
  margin: 0 auto;
}

.hft-top {
  display: grid;
  grid-template-columns: minmax(260px, 0.55fr) minmax(0, 1.45fr);
  gap: clamp(32px, 4.5vw, 56px);
  align-items: start;
}

.hft-brand-name {
  margin: 0 0 10px;
  color: #0f172a;
  font-size: 1.1rem;
  font-weight: 800;
  line-height: 1.4;
  white-space: nowrap;
}

.hft-brand-address {
  max-width: 380px;
  margin: 0 0 14px;
  color: #4a5a6b;
  font-size: 0.95rem;
  line-height: 1.65;
}

.hft-brand-mail {
  margin: 0 0 22px;
  color: #4a5a6b;
  font-size: 0.95rem;
  line-height: 1.6;
}

.hft-brand-mail strong {
  color: #0f172a;
}

.hft-brand-mail a {
  color: #4782A2;
  text-decoration: none;
}

.hft-brand-mail a:hover {
  text-decoration: underline;
}

.hft-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 26px;
  min-height: 48px;
  border: 0;
  border-radius: 10px;
  color: #FFFFFF;
  background: linear-gradient(90deg, #4782A2, #6FBAD9);
  box-shadow: 0 16px 34px rgba(71, 130, 162, 0.24);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}

.hft-social-title {
  margin: 0 0 12px;
  color: #0f172a;
  font-size: 0.85rem;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.hft-social {
  display: flex;
  align-items: center;
  gap: 10px;
}

.hft-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border: 1px solid #dce7ed;
  border-radius: 50%;
  overflow: hidden;
  color: #4782A2;
  background: #eaf3f7;
  font-size: 17px;
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.hft-social a svg {
  width: 17px;
  height: 17px;
}

/* Each icon keeps its own brand color at all times, background stays
   white — hovering only lifts the icon slightly, it does not change
   the background or icon color. */
.hft-social a.hft-social--linkedin { color: #0a66c2; }
.hft-social a.hft-social--facebook { color: #1877f2; }
.hft-social a.hft-social--youtube { color: #ff0000; }
.hft-social a.hft-social--instagram { color: #d6249f; }

.hft-social a:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.14);
}

.hft-columns {
  display: grid;
  grid-template-columns: minmax(190px, 1.15fr) minmax(120px, 0.9fr) minmax(110px, 0.85fr) minmax(280px, 1.25fr);
  gap: clamp(20px, 2.8vw, 36px);
  align-items: start;
  width: 100%;
}

.hft-col {
  text-align: left;
  min-width: 0;
}

.hft-col:first-child a {
  white-space: nowrap;
}

.hft-col h3 {
  margin: 0 0 20px;
  color: #0f172a;
  font-size: 0.95rem;
  font-weight: 850;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.hft-col a {
  display: flex;
  align-items: center;
  width: 100%;
  margin-bottom: 0;
  padding: 10px 0;
  min-height: 44px;
  box-sizing: border-box;
  color: #5c6b7a;
  font-size: 1rem;
  line-height: 1.45;
  text-decoration: none;
  transition: color 0.22s ease, transform 0.22s ease;
}

.hft-col a:hover {
  color: #2f5f7e;
  transform: translateX(3px);
}

.hft-newsletter h3 {
  margin: 0 0 14px;
  color: #0f172a;
  font-size: 1rem;
  font-weight: 850;
}

.hft-newsletter p {
  margin: 0 0 18px;
  color: #5c6b7a;
  font-size: 0.98rem;
  line-height: 1.55;
  max-width: 34ch;
}

.hft-newsletter-form {
  display: flex;
  width: 100%;
  max-width: 380px;
  gap: 0;
}

.hft-newsletter-form input {
  min-width: 0;
  flex: 1;
  height: 48px;
  min-height: 48px;
  border: 1px solid #d7dee4;
  border-right: 0;
  border-radius: 5px 0 0 5px;
  color: #25313d;
  background: #FFFFFF;
  font-family: Figtree, sans-serif;
  font-size: 0.95rem;
  line-height: 1.2;
  padding: 0 14px;
  outline: none;
  box-sizing: border-box;
}

.hft-newsletter-form input.is-error {
  box-shadow: inset 0 0 0 2px #f87171;
}

.hft-newsletter-status {
  margin: 10px 0 0;
  min-height: 1.2em;
  color: #5c6b7a;
  font-size: 0.88rem;
  line-height: 1.4;
}

.hft-newsletter-status.is-error { color: #fca5a5; }
.hft-newsletter-status.is-success { color: #6ee7b7; }

.hft-newsletter-form button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 48px;
  min-height: 48px;
  border: 0;
  border-radius: 0 5px 5px 0;
  color: #FFFFFF;
  background: #15D3AF;
  font-size: 0.9rem;
  font-weight: 850;
  padding: 0;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.hft-newsletter-form button svg {
  width: 18px;
  height: 18px;
}

.hft-newsletter-form button:hover:not(:disabled) {
  background: #11b494;
  transform: translateX(1px);
}

.hft-newsletter-form button:disabled {
  opacity: 0.7;
  cursor: wait;
}

.hft-demo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  margin: clamp(52px, 6.5vw, 80px) 0 32px;
  padding: 30px 34px;
  border: 0;
  border-radius: 22px;
  background: linear-gradient(120deg, #0f2a3f 0%, #4782A2 55%, #6FBAD9 100%);
  box-shadow: 0 20px 40px -16px rgba(15, 42, 63, 0.35);
}

.hft-demo h3 {
  margin: 0 0 8px;
  color: #FFFFFF;
  font-size: clamp(1.25rem, 2vw, 1.75rem);
}

.hft-demo p {
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.6;
}

.hft-demo .hft-cta {
  flex: 0 0 auto;
  border: 1.5px solid #FFFFFF;
  color: #FFFFFF;
  background: transparent;
  box-shadow: none;
  transition: transform 0.24s ease;
}

.hft-demo .hft-cta:hover {
  transform: translateY(-2px);
}

.hft-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 24px;
  padding-top: 24px;
  border-top: 1px solid #e4e9ee;
}

.hft-bottom p {
  margin: 0;
  color: #5c6b7a;
  font-size: 0.9rem;
  line-height: 1;
}

.hft-bottom-links {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  margin-left: auto;
}

.hft-bottom-links a {
  color: #5c6b7a;
  font-size: 0.9rem;
  line-height: 1;
  text-decoration: none;
}

.hft-bottom-links a:hover {
  color: #2f5f7e;
}

@media (max-width: 1024px) {
  .hft-top { grid-template-columns: 1fr; }
  .hft-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hft-newsletter { grid-column: 1 / -1; }
  .hft-newsletter-form { max-width: 100%; }
  .hft-demo { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 767px) {
  .hft-columns { grid-template-columns: 1fr; gap: 28px; }
  .hft-col:first-child a { white-space: normal; }
  .hft-newsletter { grid-column: auto; }
  .hft-newsletter p { max-width: none; }
  .hft-demo { text-align: left; }
  .hft-bottom {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 14px;
  }
  .hft-bottom-links { justify-content: flex-start; margin-left: 0; }
}

@media (max-width: 560px) {
  .hft-footer { padding: 48px 18px 28px; }
  .hft-brand-name {
    font-size: 0.92rem;
    white-space: nowrap;
  }
  .hft-newsletter-form { flex-direction: column; gap: 10px; max-width: 100%; }
  .hft-newsletter-form input,
  .hft-newsletter-form button {
    width: 100%;
    height: 52px;
    min-height: 52px;
    border-radius: 8px;
    box-sizing: border-box;
  }
  .hft-newsletter-form input { padding: 0 16px; font-size: 1rem; }
  .hft-newsletter-form button {
    font-size: 0;
    line-height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .hft-newsletter-form button svg {
    display: none;
  }
  .hft-newsletter-form button::after {
    content: "Subscribe";
    font-size: 0.95rem;
    font-weight: 850;
    line-height: 1;
  }
}