/* ==========================================================================
   Abutic — Teams (v2). Builds on abutic-nfc-v2.css (.nx) + abutic-home-v2.css (.nh).
   ========================================================================== */
body.ab-dot-b2b { background: #fff; }
.tm .b2b-reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.8s var(--nx-ease), transform 0.8s var(--nx-ease); }
.tm .b2b-reveal.is-visible { opacity: 1; transform: none; }
.tm .nfc-reveal.is-in-view { opacity: 1; transform: none; }
.tm-note { margin-top: 24px !important; text-align: center; font-size: 14px; color: var(--nx-muted); }
.tm-note a { color: var(--nx-blue); font-weight: 600; }

/* ---------- hero stage: fanned team cards + mini dashboard ---------- */
.tm-stage { position: relative; min-width: 0; height: clamp(420px, 100vw, 560px); display: grid; place-items: center; animation: nx-fade 1.1s 0.15s var(--nx-ease) backwards; }
.tm-stage::before { content: ""; position: absolute; inset: 0; margin: auto; width: 82%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(14, 165, 233, 0.22), rgba(37, 99, 235, 0.08) 45%, transparent 70%); filter: blur(12px); }
.tm-fan { position: absolute; left: 4%; top: 12%; width: min(62%, 320px); aspect-ratio: 1.586; }
.tm-fcard {
  --eng: linear-gradient(180deg, #f5f7fa, #9aa3ae);
  position: absolute; inset: 0; padding: 16px 18px; border-radius: 16px; display: flex; flex-direction: column; justify-content: flex-end;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.02) 0 1px, transparent 1px 3px), linear-gradient(145deg, #2a2d34, #0d0f13 60%, #1a1c21);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 24px 40px -22px rgba(15, 23, 42, 0.6);
  transform-origin: 30% 120%; transform: rotate(calc((var(--i) - 2) * -9deg)) translateY(calc(var(--i) * -2px));
  transition: transform 0.7s var(--nx-ease); z-index: calc(10 - var(--i));
}
.tm-stage:hover .tm-fcard { transform: rotate(calc((var(--i) - 2) * -14deg)) translateY(calc(var(--i) * -4px)); }
.tm-fcard > span { background: var(--eng); -webkit-background-clip: text; background-clip: text; color: transparent; white-space: nowrap; }
.tm-fcard__logo { position: absolute; top: 16px; left: 18px; display: inline-flex; align-items: center; gap: 8px; font-family: var(--nx-display); font-weight: 800; font-size: 11px; letter-spacing: 0.24em; }
.tm-fcard__logo b { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; box-shadow: inset 0 0 0 1.5px rgba(214, 220, 228, 0.6); font-size: 14px; letter-spacing: 0; }
.tm-fcard__nfc { position: absolute; top: 16px; right: 16px; width: 18px; height: 18px; opacity: 0.6; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.5 7.5a6.5 6.5 0 0 1 0 9M12 5a10 10 0 0 1 0 14M5 10a2.5 2.5 0 0 1 0 4' fill='none' stroke='%23cfd4da' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat !important; }
.tm-fcard__name { font-family: var(--nx-display); font-weight: 700; font-size: 17px; }
.tm-fcard__role { font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; }
.tm-mini {
  position: absolute; right: 0; bottom: 8%; z-index: 20; width: min(64%, 300px); padding: 16px; border-radius: 22px;
  background: rgba(255, 255, 255, 0.92); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.9), 0 30px 60px -28px rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); animation: nx-bob 7s ease-in-out infinite;
}
.tm-mini__head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 12px; }
.tm-mini__head b { font-family: var(--nx-display); font-size: 15px; }
.tm-mini__head span { font-size: 11px; color: var(--nx-muted); }
.tm-mini__kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.tm-mini__kpis div { padding: 10px; border-radius: 12px; background: #f5f9ff; box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.12); }
.tm-mini__kpis small { display: block; font-size: 10.5px; color: var(--nx-muted); }
.tm-mini__kpis strong { font-family: var(--nx-display); font-size: 20px; font-weight: 800; }
.tm-mini__row { display: flex; align-items: center; gap: 10px; padding: 7px 4px; font-size: 13px; font-weight: 600; border-top: 1px solid var(--nx-line); }
.tm-mini__row i, .tm-av { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--nx-grad); color: #fff; font-style: normal; font-size: 10.5px; font-weight: 700; }
.tm-mini__row i.is-b, .tm-av--1 { background: linear-gradient(135deg, #0f172a, #475569); }
.tm-mini__row i.is-c, .tm-av--2 { background: linear-gradient(135deg, #16a34a, #22c55e); }
.tm-av--3 { background: linear-gradient(135deg, #d97706, #fbbf24); }
.tm-mini__row em { margin-left: auto; font-style: normal; font-size: 11.5px; color: var(--nx-blue); }
.tm-float--lead { top: 4%; right: 2%; animation: nx-bob 6s ease-in-out infinite, nx-fade 0.8s 0.8s backwards; }
@media (max-width: 599px) { .tm-fan { left: 0; top: 6%; width: 70%; } .tm-mini { width: 72%; bottom: 2%; } .tm-float--lead { display: none; } }

/* ---------- team platform mock app ---------- */
.tm-app { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 520px; border-radius: 28px; overflow: hidden; background: #fff; box-shadow: inset 0 0 0 1px var(--nx-line), var(--nx-shadow-lg); }
@media (min-width: 860px) { .tm-app { grid-template-columns: 240px minmax(0, 1fr); } }
.tm-app__side { padding: 20px; background: linear-gradient(180deg, #f8fbff, #f1f6fd); border-bottom: 1px solid var(--nx-line); }
@media (min-width: 860px) { .tm-app__side { border-bottom: 0; border-right: 1px solid var(--nx-line); } }
.tm-app__org { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.tm-app__org > b { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: var(--nx-ink); color: #fff; font-family: var(--nx-display); }
.tm-app__org strong { display: block; font-family: var(--nx-display); font-size: 15px; }
.tm-app__org small { font-size: 12px; color: var(--nx-muted); }
.tm-app__nav { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.tm-app__nav::-webkit-scrollbar { display: none; }
@media (min-width: 860px) { .tm-app__nav { flex-direction: column; } }
.tm-app__nav button { display: flex; align-items: center; gap: 10px; flex: none; padding: 10px 12px; border-radius: 12px; font-family: var(--nx-display); font-weight: 700; font-size: 14px; color: var(--nx-muted); transition: background 0.2s, color 0.2s, box-shadow 0.2s; }
.tm-app__nav button i, .tm-app__nav button svg { width: 16px; text-align: center; }
.tm-app__nav button:hover { color: var(--nx-ink); }
.tm .tm-app__nav button.is-on { background: #fff; color: var(--nx-blue); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 6px 14px -8px rgba(15, 23, 42, 0.25); }
.tm-app__main { position: relative; min-width: 0; padding: 22px; }
@media (min-width: 860px) { .tm-app__main { padding: 30px 32px; } }
.tm-panel[hidden] { display: none; }
.tm-panel.is-on { animation: nh-in 0.45s var(--nx-ease); }
.tm-panel__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 20px; }
.tm-panel__head h3 { font-size: 22px; font-weight: 800; }
.tm-panel__head p { font-size: 14px; color: var(--nx-muted); margin-top: 2px !important; }
.tm-btn-ghost { flex: none; padding: 8px 14px; border-radius: 999px; background: #f1f5f9; font-size: 13px; font-weight: 700; color: var(--nx-ink-2); white-space: nowrap; }

.tm-table { border-radius: 16px; box-shadow: inset 0 0 0 1px var(--nx-line); overflow: hidden; }
.tm-tr { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.2fr) minmax(0, 0.7fr) minmax(0, 0.7fr); align-items: center; gap: 10px; padding: 12px 16px; font-size: 14px; color: var(--nx-ink-2); border-top: 1px solid var(--nx-line); }
.tm-tr:first-child { border-top: 0; }
.tm-tr--h { font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--nx-muted); background: #f8fafc; }
.tm-tr > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-who { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--nx-ink); }
.tm-pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-style: normal; font-size: 12px; font-weight: 700; background: #dcfce7; color: #166534; }
.tm-pill.is-pending { background: #fef3c7; color: #92400e; }
.tm-pill.is-new { background: rgba(37, 99, 235, 0.1); color: var(--nx-blue); }
.tm-pill.is-mid { background: #fef3c7; color: #92400e; }
.tm-pill.is-ok { background: #dcfce7; color: #166534; }
@media (max-width: 599px) { .tm-tr { grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.7fr) minmax(0, 0.8fr); } .tm-tr > span:nth-child(2) { display: none; } }

.tm-brand { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
@media (min-width: 700px) { .tm-brand { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); } }
.tm-brand__ctl { padding: 18px; border-radius: 18px; background: #f8fafc; box-shadow: inset 0 0 0 1px var(--nx-line); }
.tm-brand__ctl p { margin: 12px 0 6px !important; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--nx-muted); }
.tm-brand__ctl p:first-child { margin-top: 0 !important; }
.tm-field { display: block; padding: 10px 12px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--nx-line-2); font-size: 14px; font-weight: 600; }
.tm-swatches { display: flex; gap: 8px; }
.tm-swatches i { width: 28px; height: 28px; border-radius: 50%; background: var(--c); }
.tm-swatches i.is-on { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--c); }
.tm-brand__prev { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tm-prof { display: flex; flex-direction: column; align-items: center; overflow: hidden; padding-bottom: 14px; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1px var(--nx-line), var(--nx-shadow); text-align: center; }
.tm-prof__cover { width: 100%; height: 56px; background: var(--nx-grad); }
.tm-prof__av { display: grid; place-items: center; width: 50px; height: 50px; margin-top: -25px; border-radius: 50%; background: linear-gradient(135deg, #0f172a, #475569); color: #fff; font-style: normal; font-weight: 800; font-size: 14px; box-shadow: 0 0 0 3px #fff; }
.tm-prof b { margin-top: 8px; font-family: var(--nx-display); font-size: 14px; }
.tm-prof small { font-size: 11px; color: var(--nx-muted); padding: 0 8px; }
.tm-prof__btn { margin-top: 10px; padding: 7px 14px; border-radius: 10px; background: var(--nx-ink); color: #fff; font-size: 11.5px; font-weight: 700; }

.tm-leads { display: grid; gap: 8px; }
.tm-lead { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: #f8fafc; box-shadow: inset 0 0 0 1px var(--nx-line); }
.tm-lead div { flex: 1; min-width: 0; }
.tm-lead strong { display: block; font-size: 14px; }
.tm-lead small { display: block; font-size: 12.5px; color: var(--nx-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.tm-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
.tm-kpis div { min-width: 0; padding: 14px; border-radius: 16px; background: #f8fafc; box-shadow: inset 0 0 0 1px var(--nx-line); }
.tm-kpis small { display: block; font-size: 12px; color: var(--nx-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm-kpis strong { display: block; font-family: var(--nx-display); font-size: clamp(20px, 2.6vw, 26px); font-weight: 800; }
.tm-kpis em { font-style: normal; font-size: 12px; font-weight: 700; color: #16a34a; }
.tm-bars { display: grid; gap: 10px; }
.tm-bar { display: grid; grid-template-columns: 120px minmax(0, 1fr); align-items: center; gap: 12px; font-size: 13.5px; font-weight: 600; color: var(--nx-ink-2); }
.tm-bar i { height: 12px; border-radius: 99px; background: #eef2f7; position: relative; overflow: hidden; }
.tm-bar i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: inherit; background: var(--nx-grad); animation: tm-grow 1s var(--nx-ease); }
@keyframes tm-grow { from { width: 0; } }

/* ---------- use cases ---------- */
.tm-uses { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 640px) { .tm-uses { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .tm-uses { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
.tm-use { min-width: 0; padding: 26px; border-radius: var(--nx-r); background: radial-gradient(90% 70% at 100% 0%, color-mix(in srgb, var(--c) 10%, transparent), transparent 65%), #fff; box-shadow: inset 0 0 0 1px var(--nx-line), var(--nx-shadow); transition: transform 0.4s var(--nx-ease), box-shadow 0.4s; }
@media (hover: hover) { .tm-use:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 30%, transparent), var(--nx-shadow-lg); } }
.tm-use__icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 18px; border-radius: 14px; background: var(--c); color: #fff; font-size: 18px; box-shadow: 0 12px 24px -12px var(--c); }
.tm-use h3 { font-size: 20px; font-weight: 800; }
.tm-use p { margin-top: 8px !important; color: var(--nx-muted); font-size: 15px; }

/* ---------- pricing tiers + calculator ---------- */
.tm-tiers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 1040px; margin: 0 auto; }
@media (min-width: 760px) { .tm-tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .tm-tiers { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
/* Five tiers: on two-column phones the last one spans the row instead of sitting alone. */
@media (max-width: 759px) { .tm-tiers > .tm-tier:last-child:nth-child(odd) { grid-column: 1 / -1; } }
.tm-tier { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; padding: 20px 18px; border-radius: 20px; text-align: left; background: #fff; box-shadow: inset 0 0 0 1px var(--nx-line), var(--nx-shadow); transition: transform 0.3s var(--nx-ease), box-shadow 0.3s, background 0.3s; }
.tm-tier:hover { transform: translateY(-3px); }
.tm-tier__qty { font-family: var(--nx-display); font-size: 28px; font-weight: 800; letter-spacing: -0.03em; color: var(--nx-ink); line-height: 1; }
.tm-tier__qty small, .tm-tier__unit small { font-family: var(--nx-body); font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--nx-muted); }
.tm-tier__unit { font-family: var(--nx-display); font-size: 20px; font-weight: 800; color: var(--nx-ink); margin-top: 8px; }
.tm-tier__save { padding: 3px 9px; border-radius: 999px; background: #dcfce7; color: #166534; font-size: 12px; font-weight: 700; }
.tm-tier__badge { position: absolute; top: -10px; right: 12px; padding: 3px 9px; border-radius: 999px; background: var(--nx-grad); color: #fff; font-size: 10.5px; font-weight: 700; letter-spacing: 0.03em; }
.tm-tier.is-popular { box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.35), var(--nx-shadow); }
.tm .tm-tier.is-active { background: linear-gradient(160deg, #1d4ed8, #2563eb 50%, #0ea5e9); box-shadow: 0 20px 40px -20px rgba(37, 99, 235, 0.7); }
.tm-tier.is-active .tm-tier__qty, .tm-tier.is-active .tm-tier__unit { color: #fff; }
.tm-tier.is-active small { color: rgba(255, 255, 255, 0.8); }
.tm-tier.is-active .tm-tier__save { background: rgba(255, 255, 255, 0.2); color: #fff; }

.tm-calc { display: grid; grid-template-columns: minmax(0, 1fr); max-width: 1040px; margin: 24px auto 0; border-radius: 28px; overflow: hidden; background: #fff; box-shadow: inset 0 0 0 1px var(--nx-line), var(--nx-shadow-lg); }
@media (min-width: 860px) { .tm-calc { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } }
.tm-calc__in { padding: 28px; min-width: 0; }
.tm-calc__in h3 { font-size: 22px; font-weight: 800; }
.tm-calc__in > p { margin: 4px 0 22px !important; font-size: 14px; color: var(--nx-muted); }
.tm-calc__qty { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.tm-calc__qty label { font-weight: 700; font-size: 15px; }
.tm-calc__qty input { width: 120px; height: 52px; padding: 0 14px; border: 0; border-radius: 14px; background: #f8fafc; box-shadow: inset 0 0 0 1px var(--nx-line-2); text-align: right; font: 800 24px var(--nx-display); color: var(--nx-ink); }
.tm-calc__qty input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--nx-blue); }
.tm-calc__ticks { display: flex; justify-content: space-between; margin-top: 10px; font-size: 12px; color: var(--nx-muted); }
.tm-calc__out { display: grid; gap: 4px; align-content: center; padding: 28px; background: linear-gradient(160deg, #1d4ed8, #2563eb 50%, #0ea5e9); color: #fff; }
.tm-calc__out > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.18); }
.tm-calc__out small { font-size: 14px; color: rgba(255, 255, 255, 0.85); }
.tm-calc__out strong { font-family: var(--nx-display); font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.tm-calc__out .is-total { border-bottom: 0; padding-bottom: 18px; }
.tm-calc__out .is-total strong { font-size: clamp(32px, 4vw, 42px); letter-spacing: -0.03em; }

/* ---------- rollout (blue band) ---------- */
.tm-rollout__head { text-align: center; max-width: 640px; margin: 0 auto 40px; }
.tm-steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; counter-reset: s; }
@media (min-width: 700px) { .tm-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .tm-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tm-steps li { position: relative; padding: 24px; border-radius: 22px; background: rgba(255, 255, 255, 0.14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.tm-steps li > span { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 16px; border-radius: 50%; background: #fff; color: var(--nx-blue); font-family: var(--nx-display); font-weight: 800; }
.tm-steps strong { display: block; font-family: var(--nx-display); font-size: 18px; }
.tm-steps p { margin-top: 6px !important; color: rgba(255, 255, 255, 0.85); font-size: 14.5px; }

/* ---------- quote ---------- */
.tm-quote-sec { background: radial-gradient(50% 60% at 100% 0%, rgba(14, 165, 233, 0.12), transparent 70%), #fff; }
.tm-quote { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; align-items: start; }
@media (min-width: 960px) { .tm-quote { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 56px; } }
.tm-quote__intro h2 { font-size: clamp(30px, 4.4vw, 46px); font-weight: 800; }
.tm-quote__intro > p:not(.nx-kicker) { margin: 14px 0 22px !important; color: var(--nx-muted); font-size: 17px; }
.tm-next { display: grid; gap: 10px; margin-bottom: 26px !important; }
.tm-next li { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 600; color: var(--nx-ink-2); }
.tm-next b { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: rgba(37, 99, 235, 0.1); color: var(--nx-blue); font-size: 13px; }
.tm-contact { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tm-contact a, .tm-contact button { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 12px 14px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px var(--nx-line), var(--nx-shadow); text-align: left; font-size: 14px; font-weight: 700; color: var(--nx-ink); transition: transform 0.25s var(--nx-ease), box-shadow 0.25s; }
.tm-contact a:hover, .tm-contact button:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.3), var(--nx-shadow); }
.tm-contact i, .tm-contact svg { display: grid; place-items: center; flex: none; width: 36px; height: 36px; padding: 9px; border-radius: 11px; background: rgba(37, 99, 235, 0.1); color: var(--nx-blue); font-size: 15px; box-sizing: border-box; }
.tm-contact span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-contact small { display: block; font-size: 12px; font-weight: 500; color: var(--nx-muted); }
@media (max-width: 479px) { .tm-contact { grid-template-columns: minmax(0, 1fr); } }
.tm-form { padding: 28px; border-radius: 28px; background: #fff; box-shadow: inset 0 0 0 1px var(--nx-line), var(--nx-shadow-lg); }
@media (min-width: 700px) { .tm-form { padding: 36px; } }
.tm-form__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 16px; }
@media (min-width: 560px) { .tm-form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tm .nh-field { display: block; margin-bottom: 16px; min-width: 0; }
.tm .nh-field span { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--nx-ink-2); }
.tm .nh-field input, .tm .nh-field select, .tm .nh-field textarea { width: 100%; min-height: 52px; padding: 13px 16px; border: 0; border-radius: 14px; background: #f8fafc; box-shadow: inset 0 0 0 1px var(--nx-line-2); font: 500 16px var(--nx-body); color: var(--nx-ink); transition: box-shadow 0.2s, background 0.2s; }
.tm .nh-field textarea { resize: vertical; min-height: 120px; }
.tm .nh-field select { -webkit-appearance: none; appearance: none; background: #f8fafc url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%2364748b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 14px center/16px no-repeat; padding-right: 40px; }
.tm .nh-field input:focus, .tm .nh-field select:focus, .tm .nh-field textarea:focus { outline: none; background-color: #fff; box-shadow: inset 0 0 0 2px var(--nx-blue), 0 0 0 4px rgba(37, 99, 235, 0.12); }
.tm-form__captcha { display: flex; justify-content: center; margin: 4px 0 18px; overflow: hidden; }
.tm-form__fine { margin-top: 12px !important; text-align: center; font-size: 12.5px; color: var(--nx-muted); }

/* calendly modal keeps its existing behaviour; lighter overlay */
.b2b-modal { background: rgba(15, 23, 42, 0.35) !important; }
.b2b-modal__panel { border-radius: 24px !important; }

/* ---------- stat band ---------- */
.tm-statband { padding: 8px 0 24px; }
.tm-statband__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; border-radius: 24px; overflow: hidden; background: var(--nx-line); box-shadow: 0 0 0 1px var(--nx-line), var(--nx-shadow); }
@media (min-width: 760px) { .tm-statband__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tm-statband__list li { padding: 26px 16px; text-align: center; background: #fff; }
.tm-statband__list strong { display: block; font-family: var(--nx-display); font-size: clamp(30px, 4vw, 42px); font-weight: 800; letter-spacing: -0.03em; background: var(--nx-grad); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
.tm-statband__list li > span { font-size: 14px; color: var(--nx-muted); }

/* ---------- turnover ---------- */
.tm-turn { position: relative; display: grid; gap: 18px; justify-items: center; padding: clamp(28px, 5vw, 48px) 20px; border-radius: 32px; background: radial-gradient(60% 60% at 50% 30%, rgba(14, 165, 233, 0.16), transparent 70%), linear-gradient(160deg, #f5f9ff, #e8f1fd); box-shadow: inset 0 0 0 1px var(--nx-line); min-width: 0; }
.tm-turn__card { position: relative; width: min(100%, 320px); aspect-ratio: 1.586; padding: 20px; border-radius: 18px; display: flex; flex-direction: column; justify-content: flex-end; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.02) 0 1px, transparent 1px 3px), linear-gradient(145deg, #2a2d34, #0d0f13 60%, #1a1c21); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 30px 50px -24px rgba(15, 23, 42, 0.6); transform: rotate(-4deg); }
.tm-turn__card b, .tm-turn__card small { background: linear-gradient(180deg, #f5f7fa, #9aa3ae); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tm-turn__card b { font-family: var(--nx-display); font-size: 20px; }
.tm-turn__card small { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; }
.tm-turn__nfc { position: absolute; top: 18px; left: 20px; width: 26px; height: 26px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M6 13.2a4 4 0 0 1 0 5.6M10.5 9.5a9.2 9.2 0 0 1 0 13M15 6a14.4 14.4 0 0 1 0 20M19.5 2.6a19.4 19.4 0 0 1 0 26.8' fill='none' stroke='%23d7dce3' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat; }
.tm-turn__flow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; }
.tm-turn__step { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px var(--nx-line), var(--nx-shadow); font-size: 14px; font-weight: 700; color: var(--nx-ink); }
.tm-turn__step small { display: block; font-size: 11px; font-weight: 600; color: var(--nx-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.tm-turn__step i { width: 10px; height: 10px; border-radius: 50%; background: #cbd5e1; }
.tm-turn__step i.is-b { background: #22c55e; box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.2); }
.tm-turn__step:not(.is-now) span { text-decoration: line-through; text-decoration-color: rgba(100, 116, 139, 0.5); color: var(--nx-muted); }
.tm-turn__step em { padding: 2px 8px; border-radius: 999px; background: #dcfce7; color: #166534; font-style: normal; font-size: 11px; }
.tm-turn__step.is-now { box-shadow: inset 0 0 0 2px rgba(37, 99, 235, 0.4), 0 14px 30px -16px rgba(37, 99, 235, 0.5); animation: tm-pulse 3s ease-in-out infinite; }
.tm-turn__arrow { width: 28px; height: 2px; background: var(--nx-grad); position: relative; }
.tm-turn__arrow::after { content: ""; position: absolute; right: -2px; top: -4px; border-left: 7px solid #0ea5e9; border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.tm-turn__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.tm-turn__chips span { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.85); box-shadow: inset 0 0 0 1px var(--nx-line); font-size: 12.5px; font-weight: 700; color: var(--nx-ink-2); }
.tm-turn__chips i, .tm-turn__chips svg { color: var(--nx-blue); }
@keyframes tm-pulse { 0%, 100% { transform: none; } 50% { transform: translateY(-3px); } }

/* ---------- comparison table ---------- */
.tm-cmp { max-width: 1040px; margin: 0 auto; border-radius: 26px; overflow: hidden; background: #fff; box-shadow: inset 0 0 0 1px var(--nx-line), var(--nx-shadow-lg); }
.tm-cmp__row { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); align-items: center; border-top: 1px solid var(--nx-line); }
.tm-cmp__row:first-child { border-top: 0; }
.tm-cmp__row > span { padding: 16px 18px; font-size: 14.5px; color: var(--nx-ink-2); min-width: 0; }
.tm-cmp__row > span[role="rowheader"] { font-weight: 600; color: var(--nx-ink); }
.tm-cmp__row > span[role="cell"] { text-align: center; display: flex; align-items: center; justify-content: center; gap: 6px; font-weight: 600; }
.tm-cmp__row--head > span { padding-top: 20px; padding-bottom: 20px; font-family: var(--nx-display); font-weight: 800; font-size: 14px; color: var(--nx-muted); text-align: center; }
.tm-cmp__row > .is-us { background: linear-gradient(180deg, rgba(37, 99, 235, 0.07), rgba(14, 165, 233, 0.05)); color: var(--nx-blue); }
.tm-cmp__row--head > .is-us b { display: inline-block; padding: 6px 14px; border-radius: 999px; background: var(--nx-grad); color: #fff; font-size: 14px; }
.tm-cmp .is-no { color: #94a3b8; }
.tm-cmp .is-meh { color: var(--nx-muted); font-weight: 500; }
.tm-yes, .tm-no { display: inline-block; width: 22px; height: 22px; border-radius: 50%; background-position: center; background-size: 13px; background-repeat: no-repeat; }
.tm-yes { background-color: rgba(37, 99, 235, 0.12); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4.5 8.2 2.2 2.2 4.8-4.8' fill='none' stroke='%232563eb' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.tm-no { background-color: rgba(148, 163, 184, 0.15); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m5.5 5.5 5 5m0-5-5 5' fill='none' stroke='%2394a3b8' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); }
@media (max-width: 699px) {
  .tm-cmp__row { grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 0.9fr)); }
  .tm-cmp__row > span { padding: 12px 8px; font-size: 12px; }
  .tm-cmp__row > span[role="rowheader"] { padding-left: 14px; }
  .tm-cmp__row--head > span { font-size: 11px; }
  .tm-cmp__row--head > .is-us b { padding: 4px 9px; font-size: 12px; }
}

/* ---------- savings estimate ---------- */
.tm-save { display: grid; grid-template-columns: minmax(0, 1fr); max-width: 1040px; margin: 0 auto; border-radius: 28px; overflow: hidden; background: #fff; box-shadow: inset 0 0 0 1px var(--nx-line), var(--nx-shadow-lg); }
@media (min-width: 860px) { .tm-save { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } }
.tm-save__in { display: grid; gap: 26px; padding: 30px; min-width: 0; }
.tm-save__out { display: grid; gap: 10px; align-content: center; padding: 28px; background: #f5f9ff; box-shadow: inset 1px 0 0 var(--nx-line); }
.tm-save__out > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 16px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px var(--nx-line); }
.tm-save__out small { font-size: 13.5px; color: var(--nx-muted); }
.tm-save__out strong { font-family: var(--nx-display); font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.tm-save__out .is-hero { flex-direction: column; align-items: flex-start; gap: 2px; background: linear-gradient(135deg, #1d4ed8, #2563eb 45%, #0ea5e9); box-shadow: 0 24px 48px -24px rgba(37, 99, 235, 0.7); color: #fff; }
.tm-save__out .is-hero small, .tm-save__out .is-hero span { color: rgba(255, 255, 255, 0.88); font-size: 13.5px; }
.tm-save__out .is-hero strong { font-size: clamp(38px, 5vw, 52px); letter-spacing: -0.03em; }
.tm-save__out .nx-btn--light { margin-top: 6px; background: var(--nx-ink); color: #fff; }

/* ---------- sample strip ---------- */
.tm-sample { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: center; padding: 30px; border-radius: 30px; text-align: center; background: radial-gradient(70% 90% at 0% 50%, rgba(14, 165, 233, 0.14), transparent 70%), linear-gradient(160deg, #f5f9ff, #ffffff); box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.18), var(--nx-shadow); }
@media (min-width: 860px) { .tm-sample { grid-template-columns: 200px minmax(0, 1fr) auto; text-align: left; padding: 36px 44px; } }
.tm-sample__art { position: relative; height: 120px; width: 200px; margin: 0 auto; }
.tm-sample__art i { position: absolute; width: 150px; aspect-ratio: 1.586; border-radius: 12px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 20px 34px -18px rgba(15, 23, 42, 0.6); transition: transform 0.6s var(--nx-ease); }
.tm-sample__art i:first-child { left: 40px; top: 6px; background: linear-gradient(145deg, #2a221d, #120e0b); transform: rotate(10deg); }
.tm-sample__art i:last-child { left: 6px; top: 20px; background: linear-gradient(145deg, #2a2d34, #0d0f13); transform: rotate(-8deg); }
.tm-sample:hover .tm-sample__art i:last-child { transform: rotate(-14deg) translate(-6px, 4px); }
.tm-sample h2 { font-size: clamp(24px, 3vw, 32px); font-weight: 800; }
.tm-sample__copy > p:not(.nx-kicker) { margin-top: 6px !important; color: var(--nx-muted); font-size: 15.5px; }

/* ---------- floating quote button ---------- */
.tm-dock {
  position: fixed; z-index: 120; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom)); display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 14px 12px 20px; border-radius: 999px; background: linear-gradient(135deg, #2563eb, #0ea5e9); color: #fff !important; text-decoration: none;
  font-family: "Plus Jakarta Sans", "Inter", sans-serif; font-weight: 700; font-size: 15px; box-shadow: 0 18px 40px -14px rgba(37, 99, 235, 0.75);
  opacity: 0; transform: translateY(16px) scale(0.96); pointer-events: none; transition: opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1), transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.tm-dock b { padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.2); font-size: 12px; }
.tm-dock.is-on { opacity: 1; transform: none; pointer-events: auto; }
.tm-dock:hover { transform: translateY(-2px); }
@media (max-width: 599px) { .tm-dock { left: 16px; right: 16px; justify-content: center; } }