/* =============================================================================================
 * THE PUBLIC SITE, THIRD DRESS — 28 Sep 2026.
 *
 * The owner: "font wahi jo software (purchase entry) me hai; bold har jagah mat, jahan zaroorat ho
 * wahi; theme thoda premium; animation ho; phone, tab, laptop sab me achha chale; pricing ek dam
 * attractive". Loaded after public.css (and pricing-table.css), so it only has to say what changes.
 *
 * Type: Poppins, the face of the software's own screens. Regular for reading, medium for the menu
 * and small labels, semibold for headings and buttons; bold is kept for the one line that must stop
 * the eye (the first headline) and the wordmark.
 *
 * Colour: the brand navy for structure, the software's orange for the one thing to press, the logo's
 * red only in the wordmark. Corners a little softer than before, shadows lower and wider.
 *
 * Motion is small and has a reason: the first screen arrives, a section rises as it is reached, a
 * card lifts under the pointer, the header firms up when the page scrolls. Anyone who has asked their
 * system for less motion gets none of it (the block at the end).
 * ============================================================================================= */

:root {
  --ff-sans: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --ff-display: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --ff-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --nx-navy: #0b1b3f;
  --nx-navy-2: #0f2557;
  --nx-navy-3: #163070;
  /* every word on a light background is black, the smallest notes included (29 Sep 2026, the owner:
     "website pe jitne text hain sab ko black karo, chhote se chhota text ko") */
  --nx-ink: #000;
  --nx-body: #000;
  --nx-muted: #000;
  --text: #000;
  --text-muted: #000;
  --text-dim: #000;
  --nx-line: #e5e9f1;
  --nx-bg: #f6f8fb;
  --nx-card: #ffffff;
  --nx-orange: #f46d14;
  --nx-orange-2: #fb8a36;
  --nx-orange-d: #e2580a;
  --nx-blue: #2563eb;
  --nx-green: #16a34a;
  --nx-r: 14px;
  --nx-r-sm: 10px;
  --nx-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 10px 30px -16px rgba(15, 23, 42, .22);
  --nx-shadow-lg: 0 34px 70px -34px rgba(11, 27, 63, .42);
  --nx-ease: cubic-bezier(.2, .7, .2, 1);
  --nav-h: 60px;
}

/* ── the page ─────────────────────────────────────────────────────────────────────────────── */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--ff-sans); font-weight: 400; color: var(--nx-ink); background: var(--nx-bg);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
h1, h2, h3, h4, h5 { font-family: var(--ff-display); font-weight: 600; letter-spacing: -.02em; color: #000; }
strong, b { font-weight: 600; }
p { color: var(--nx-body); }
img, video { max-width: 100%; }
::selection { background: #ffe4d1; color: #000; }
a { color: var(--nx-blue); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--nx-orange); outline-offset: 3px; }
.container { max-width: 1200px; padding-left: 24px; padding-right: 24px; }
@media (max-width: 640px) { .container { padding-left: 18px; padding-right: 18px; } }
@media (max-width: 380px) { .container { padding-left: 14px; padding-right: 14px; } }

/* ── the header: glass, firming up once the page moves ────────────────────────────────────────── */
.site-header {
  background: rgba(255, 255, 255, .78) !important;
  -webkit-backdrop-filter: saturate(170%) blur(14px); backdrop-filter: saturate(170%) blur(14px);
  border-bottom: 0 !important;
  transition: background-color .25s ease, box-shadow .25s ease;
}
.site-header.is-scrolled { background: rgba(255, 255, 255, .96) !important; box-shadow: 0 10px 30px -18px rgba(11, 27, 63, .35); }
.site-header::after { opacity: .9; }
.site-brand { font-weight: 700; font-size: 19px; letter-spacing: -.02em; white-space: nowrap; flex-shrink: 0; }
/* a laptop: Poppins is wider than the old face, so between the phone menu (1080) and a wide screen the bar
   loses the three social icons and a little spacing rather than breaking the name over two lines */
@media (min-width: 1081px) and (max-width: 1400px) {
  .site-nav, .nav-links { gap: 11px; }
  .site-nav a { font-size: 13.5px; }
  .header-social { display: none !important; }
}
.site-brand .brand-icon { border-radius: 10px !important; background: #fff; box-shadow: 0 6px 16px -8px rgba(11, 27, 63, .45) !important; }
.site-brand .brand-icon img { width: 100%; height: 100%; object-fit: contain; border-radius: 10px; }
.site-nav a { font-weight: 500; color: #000; }
.site-nav a:hover { color: var(--nx-navy-2); }
.nav-more-btn { font-weight: 500 !important; }
.nav-more-panel { border-radius: 14px !important; box-shadow: var(--nx-shadow-lg) !important; }
.nav-more-head { font-weight: 600 !important; letter-spacing: .06em; }
.nav-toggle { border-radius: 10px; }
@media (max-width: 1080px) {
  .site-nav { border-radius: 0 0 16px 16px; }
  .site-nav a { font-weight: 500; }
}

/* ── buttons: the software's glossy recipe, the software's orange for the one to press ──────────── */
.btn { border-radius: 10px; font-weight: 600; letter-spacing: .005em; }
.btn::before { border-radius: 10px 10px 40% 40% / 10px 10px 10px 10px; }
.btn-primary, .site-nav a.btn.btn-primary { background-color: var(--nx-orange) !important; color: #fff !important; border-color: rgba(120, 45, 0, .45); }
.btn-primary:hover, .site-nav a.btn.btn-primary:hover { background-color: var(--nx-orange-d) !important; color: #fff !important; }
.btn-lg { padding: 15px 28px; font-size: 15.5px; }

/* ── the first screen ─────────────────────────────────────────────────────────────────────────── */
.hx h1 { font-weight: 700; font-size: clamp(34px, 5vw, 60px); line-height: 1.06; letter-spacing: -.035em; color: #fff; }
.hx-for { font-weight: 500; color: #c3d0ea; }
.hx .lead { font-size: clamp(15.5px, 1.3vw, 17px); line-height: 1.7; color: #d6dff0; }
.hx-b1 {
  position: relative; overflow: hidden; background: linear-gradient(180deg, var(--nx-orange-2), var(--nx-orange)) !important; color: #fff !important;
  border-radius: 12px !important; box-shadow: 0 14px 30px -12px rgba(244, 109, 20, .65), inset 0 1px 0 rgba(255, 255, 255, .35);
  transition: transform .2s var(--nx-ease), box-shadow .2s var(--nx-ease), filter .2s;
}
.hx-b1:hover { transform: translateY(-2px); filter: brightness(1.04); box-shadow: 0 18px 36px -12px rgba(244, 109, 20, .75), inset 0 1px 0 rgba(255, 255, 255, .35); }
.hx-b2 { border-radius: 12px !important; background: rgba(255, 255, 255, .06); transition: background-color .2s, border-color .2s, transform .2s var(--nx-ease); }
.hx-b2:hover { background: rgba(255, 255, 255, .12); transform: translateY(-2px); }
.hx-price b { font-weight: 600; }
.hx-keys p { font-family: var(--ff-sans); font-weight: 500; letter-spacing: .08em; }
.hx-shot img { border-radius: 14px 14px 0 0 !important; }
/* the first screen is shown as it is: the entrance and the floating screenshot were taken off on 29 Sep 2026 */
@keyframes nxUp    { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* ── the posters ─────────────────────────────────────────────────────────────────────────────── */
.pst, .pst-slide { border-radius: 20px; }
.pst { box-shadow: var(--nx-shadow-lg); }
.pst-text h3 { font-weight: 600; }
.pst-k { font-family: var(--ff-sans); font-weight: 500; }
.pst-btn { transition: border-color .2s, transform .2s var(--nx-ease); }
.pst-btn:hover { transform: scale(1.06); }

/* ── what it does ───────────────────────────────────────────────────────────────────────────── */
.cap { background: #fff; }
.cap-head h2, .sec-l h2 { font-weight: 600; font-size: clamp(26px, 3.2vw, 38px); letter-spacing: -.03em; }
.cap-list { border-top: 0; display: grid; gap: 10px; }
.cap-list li { border-bottom: 0 !important; padding: 18px 20px !important; border-radius: 16px; background: #f6f8fc;
  transition: background-color .25s ease, transform .3s var(--nx-ease), box-shadow .3s var(--nx-ease); }
.cap-list li:hover { background: #fff; box-shadow: var(--nx-shadow-lg); }
.cap-n { font-family: var(--ff-sans); font-weight: 600; color: var(--nx-orange); font-variant-numeric: tabular-nums; }
.cap-list h3 { font-weight: 600; font-size: clamp(16px, 1.4vw, 18px); }
.cap-more { font-weight: 500; }

/* ── pricing: one card a plan, the per-month figure large, what every paid plan has said once ──── */
.pc { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.pc-n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 960px; margin: 0 auto; }
.pc-n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 680px; margin: 0 auto; }
.pc-n1 { grid-template-columns: minmax(0, 360px); justify-content: center; }
.pc-card {
  position: relative; display: flex; flex-direction: column; padding: 26px 22px 22px; border: 0;
  border-radius: 18px; background: #fff; box-shadow: var(--nx-shadow);
  transition: transform .3s var(--nx-ease), box-shadow .3s var(--nx-ease), border-color .3s;
}
.pc-card:hover { box-shadow: var(--nx-shadow-lg); }
.pc-name { font-size: 18px; font-weight: 600; color: #000; margin: 0; }
.pc-period { font-size: 13px; color: var(--nx-muted); margin: 2px 0 18px; }
.pc-price { display: flex; align-items: baseline; gap: 4px; margin: 0; color: #000; }
.pc-price .cur { font-size: 20px; font-weight: 500; }
.pc-price .amt { font-size: clamp(34px, 3.4vw, 44px); font-weight: 700; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.pc-price .per { font-size: 13.5px; color: var(--nx-muted); font-weight: 400; }
.pc-total { font-size: 13.5px; color: var(--nx-body); margin: 8px 0 18px; }
.pc-total b { font-weight: 600; color: #000; }
.pc-points { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 9px; flex: 1; align-content: start; }
.pc-points li { position: relative; padding-left: 24px; font-size: 14px; line-height: 1.5; color: var(--nx-body); }
.pc-points li::before { content: ""; position: absolute; left: 0; top: 3px; width: 16px; height: 16px; border-radius: 50%;
  background: #e8f7ee url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316a34a' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E") center / 11px no-repeat; }
.pc-go { display: flex; align-items: center; justify-content: center; height: 48px; border-radius: 12px; font-size: 15px; font-weight: 600;
  text-decoration: none; border: 0; color: #000; background: #eef2f8; transition: background-color .2s, color .2s, transform .25s var(--nx-ease); }
.pc-go:hover { background: var(--nx-navy); color: #fff; }
.pc-card.is-best { background: linear-gradient(165deg, var(--nx-navy-2) 0%, var(--nx-navy) 100%); border-color: transparent;
  box-shadow: 0 30px 60px -28px rgba(11, 27, 63, .6); }
.pc-card.is-best .pc-name, .pc-card.is-best .pc-price, .pc-card.is-best .pc-total b { color: #fff; }
.pc-card.is-best .pc-period, .pc-card.is-best .pc-price .per { color: #aebcd8; }
.pc-card.is-best .pc-total, .pc-card.is-best .pc-points li { color: #d6dff0; }
.pc-card.is-best .pc-points li::before { background-color: rgba(255, 255, 255, .14);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E"); }
.pc-card.is-best .pc-go { background: linear-gradient(180deg, var(--nx-orange-2), var(--nx-orange)); border-color: transparent; color: #fff;
  box-shadow: 0 12px 26px -12px rgba(244, 109, 20, .7); }
.pc-card.is-best .pc-go:hover { filter: brightness(1.05); }
.pc-tag { position: absolute; top: -12px; left: 22px; padding: 4px 11px; border-radius: 999px; font-size: 12px; font-weight: 600; color: #fff;
  background: linear-gradient(180deg, var(--nx-orange-2), var(--nx-orange)); box-shadow: 0 8px 18px -8px rgba(244, 109, 20, .7); }
.pc-incl { margin-top: 34px; padding: 0; border: 0; background: none; }
.pc-incl h3 { font-size: 16px; font-weight: 600; margin: 0 0 14px; }
.pc-incl ul { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 26px; }
.pc-incl li { position: relative; padding-left: 24px; font-size: 14px; line-height: 1.5; color: var(--nx-body); }
.pc-incl li::before { content: ""; position: absolute; left: 0; top: 3px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff1e7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f46d14' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E") center / 11px no-repeat; }
.pc-incl p { margin: 0; font-size: 13.5px; color: var(--nx-muted); }
@media (max-width: 1080px) { .pc, .pc-n3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pc-incl ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px)  { .pc, .pc-n3, .pc-n2 { grid-template-columns: 1fr; gap: 22px; } .pc-incl ul { grid-template-columns: 1fr; } }

/* ── questions ───────────────────────────────────────────────────────────────────────────────── */
.faq details { border-radius: 14px !important; border: 0 !important; background: #f6f8fc; margin-bottom: 10px;
  box-shadow: none; transition: box-shadow .25s, background-color .25s; }
.faq details[open] { background: #fff; box-shadow: var(--nx-shadow); }
.faq summary { font-weight: 500 !important; color: #000; }

/* ── the closing band ───────────────────────────────────────────────────────────────────────── */
.cta2 { position: relative; overflow: hidden; padding: 64px 0;
  background: radial-gradient(700px 360px at 90% 0%, rgba(244, 109, 20, .22), transparent 60%),
              radial-gradient(600px 400px at 0% 100%, rgba(37, 99, 235, .30), transparent 60%),
              linear-gradient(160deg, #0a1733 0%, #0f2557 60%, #11306f 100%); }
.cta2 h2 { font-weight: 600; }
.cta2-btn { border-radius: 12px !important; background: linear-gradient(180deg, var(--nx-orange-2), var(--nx-orange)) !important; color: #fff !important;
  border: 0 !important; box-shadow: 0 16px 34px -14px rgba(244, 109, 20, .75) !important; }
.cta2-btn::before { display: none; }
.cta2-btn:hover { transform: translateY(-2px); filter: brightness(1.05); }

/* ── an inner page's head ───────────────────────────────────────────────────────────────────── */
.page-hero { position: relative; padding: 60px 0 26px; text-align: center;
  background: radial-gradient(640px 280px at 50% 0%, rgba(37, 99, 235, .10), transparent 70%),
              linear-gradient(180deg, #eef3fb 0%, var(--nx-bg) 100%); }
.page-hero h1 { font-weight: 600; font-size: clamp(30px, 4.6vw, 48px); letter-spacing: -.035em; }
.page-hero .lead { font-size: clamp(15px, 1.3vw, 17px); line-height: 1.7; }
.hero-badge { font-weight: 500 !important; border-radius: 999px !important; }
.section-head h2 { font-weight: 600 !important; }

/* ── cards anywhere on the site ─────────────────────────────────────────────────────────────── */
.feature-card, .step-card, .team-card, .why-card, .pricing-card {
  border-radius: 16px !important; border: 0 !important; box-shadow: var(--nx-shadow) !important;
  transition: transform .3s var(--nx-ease), box-shadow .3s var(--nx-ease) !important;
}
.feature-card:hover, .step-card:hover, .team-card:hover, .why-card:hover { box-shadow: var(--nx-shadow-lg) !important; }
.feature-card h3, .step-card h3, .team-card h3 { font-weight: 600 !important; }
.founder-photo { border-radius: 20px !important; overflow: hidden; }
.founder-role { font-weight: 500; color: var(--nx-body); line-height: 1.6; }
.founder-body h2 { font-weight: 600; color: #000; }
.founder-body blockquote { background: var(--nx-soft, #f5f7fb); color: #000; border-radius: 16px; }
.founder-body blockquote::before { color: rgba(244, 109, 20, .45); }
.founder-social { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.founder-social a { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 10px;
  font-size: 13.5px; font-weight: 500; color: #fff; text-decoration: none; transition: transform .2s ease, filter .2s ease; }
.founder-social a:hover { transform: translateY(-2px); filter: brightness(1.06); }
.founder-social .fs-li { background: #0a66c2; }
.founder-social .fs-ig { background: linear-gradient(45deg, #f09433, #dc2743 55%, #bc1888); }
.founder-facts { margin: 18px 0 0; padding: 16px 18px; border: 0; border-radius: 14px; background: #f6f8fc; display: grid; gap: 10px; }
.founder-facts div { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; }
.founder-facts dt { color: var(--nx-muted); }
.founder-facts dd { margin: 0; font-weight: 500; color: #000; text-align: right; }
.founder-facts a { color: var(--nx-orange); text-decoration: none; }
@media (max-width: 900px) { .founder-wrap > div:first-child { max-width: 320px; } }

/* ── forms ───────────────────────────────────────────────────────────────────────────────────── */
.form-input, .form-select { border-radius: 10px; font-family: inherit; font-size: 15px; padding: 11px 14px; }
.form-input:focus, .form-select:focus { border-color: var(--nx-orange); box-shadow: 0 0 0 4px rgba(244, 109, 20, .14); }
.form-label { font-weight: 500; }
@media (max-width: 640px) { .form-input, .form-select { font-size: 16px; } }       /* 16px, or iOS zooms on focus */

/* ── the legal pages: read as a document ─────────────────────────────────────────────────────── */
.legal { max-width: 820px; margin: 0 auto; }
.legal-card { background: none; border: 0; border-radius: 0; padding: 8px 0 0; box-shadow: none; }
.legal h1 { font-size: clamp(28px, 4vw, 40px); margin: 0 0 6px; }
.legal .legal-meta { font-size: 13.5px; color: var(--nx-muted); margin: 0 0 22px; }
.legal h2 { font-size: 19px; margin: 30px 0 10px; padding-top: 4px; }
.legal h3 { font-size: 16px; margin: 20px 0 8px; }
.legal p, .legal li { font-size: 15px; line-height: 1.8; color: var(--nx-body); }
.legal p { margin: 0 0 12px; }
.legal ul, .legal ol { padding-left: 22px; margin: 0 0 12px; }
.legal li { margin: 4px 0; }
.legal .legal-note { background: #fff4eb; border: 0; border-radius: 12px; padding: 14px 16px; font-size: 14.5px; color: #000; }
.legal .legal-toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; padding: 0; list-style: none; }
.legal .legal-toc li { margin: 0; }
.legal h2[id] { scroll-margin-top: calc(var(--nav-h) + 24px); }
.legal-toc a { display: inline-block; padding: 7px 13px; border: 0; border-radius: 999px; font-size: 13px; color: #000; text-decoration: none; background: #eef2f8;
  transition: background-color .2s, color .2s, transform .25s var(--nx-ease); }
.legal-toc a:hover { background: #fff1e7; color: var(--nx-orange-d); }

/* ── the footer ─────────────────────────────────────────────────────────────────────────────── */
.site-footer { position: relative; overflow: hidden; background: linear-gradient(180deg, #0b1b3f 0%, #081430 100%) !important; color: #aab8d1 !important; padding: 64px 0 26px !important; }
.site-footer::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(700px 300px at 100% 0%, rgba(244, 109, 20, .12), transparent 60%),
              linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px) 0 0 / 44px 44px,
              linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px) 0 0 / 44px 44px; }
.site-footer .container { position: relative; }
.footer-grid h4 { font-weight: 600 !important; letter-spacing: .08em !important; font-size: 12.5px !important; }
.footer-grid a { color: #b7c3d9 !important; transition: color .2s, transform .2s var(--nx-ease); }
.footer-grid a:hover { color: #fff !important; }
.footer-bottom { border-top-color: rgba(255, 255, 255, .08) !important; color: #9fb0cc !important; }
.footer-bottom a { color: #dbe4f4; text-decoration: none; }
.footer-bottom a:hover { color: #fff; text-decoration: underline; }
.footer-founder { margin-top: 8px; font-size: 12.5px; color: #9fb0cc; }
@media (max-width: 720px) { .footer-grid { gap: 28px !important; } }
@media (max-width: 440px) { .footer-grid { grid-template-columns: 1fr !important; } }

/* ── Call now ───────────────────────────────────────────────────────────────────────────────── */
.cn { position: fixed; right: max(18px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); z-index: 900;
  font-family: var(--ff-sans); }
.cn-btn { position: relative; display: inline-flex; align-items: center; gap: 10px; height: 54px; padding: 0 22px 0 18px; border: 0; border-radius: 999px;
  background: linear-gradient(180deg, #22c55e, #16a34a); color: #fff; font: 600 15px/1 var(--ff-sans); cursor: pointer;
  box-shadow: 0 16px 34px -12px rgba(22, 163, 74, .7), inset 0 1px 0 rgba(255, 255, 255, .3); transition: transform .2s var(--nx-ease), box-shadow .2s; }
.cn-btn:hover { transform: translateY(-2px); box-shadow: 0 20px 40px -12px rgba(22, 163, 74, .8), inset 0 1px 0 rgba(255, 255, 255, .3); }
.cn-btn svg { width: 22px; height: 22px; flex: none; }
.cn-panel { position: absolute; right: 0; bottom: 66px; width: min(340px, calc(100vw - 32px)); padding: 18px; border-radius: 20px; background: #fff;
  border: 0; box-shadow: 0 30px 70px -24px rgba(11, 27, 63, .45);
  transform-origin: bottom right; animation: nxPop .22s var(--nx-ease); }
.cn-panel[hidden] { display: none; }
@keyframes nxPop { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
.cn-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.cn-head b { display: block; font-size: 16px; font-weight: 600; color: #000; }
.cn-head span { display: block; font-size: 13.5px; color: var(--nx-muted); margin-top: 2px; font-variant-numeric: tabular-nums; }
.cn-x { width: 32px; height: 32px; flex: none; border: 0; border-radius: 50%; background: #f1f5f9; color: #000; font-size: 20px; line-height: 1; cursor: pointer; }
.cn-x:hover { background: #e2e8f0; }
.cn-opts { display: grid; gap: 10px; }
.cn-opt { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 0; border-radius: 14px; background: #f6f8fc;
  color: #000; text-decoration: none; font: 500 15px/1.3 var(--ff-sans); cursor: pointer; text-align: left; width: 100%;
  transition: border-color .2s, background-color .2s, transform .2s var(--nx-ease); }
.cn-opt:hover { background: #eef2f8; }
.cn-opt i { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 12px; }
.cn-opt i svg { width: 22px; height: 22px; }
.cn-opt small { display: block; font-size: 12.5px; color: var(--nx-muted); font-weight: 400; }
.cn-wa i { background: #e7f8ee; color: #16a34a; }
.cn-call i { background: #fff1e7; color: var(--nx-orange); }
.cn-form { display: grid; gap: 10px; margin-top: 12px; }
.cn-form[hidden] { display: none; }
.cn-form input, .cn-form select { width: 100%; height: 44px; box-sizing: border-box; padding: 0 12px; border: 1px solid #cfd8e6; border-radius: 10px;
  font: 400 15px var(--ff-sans); color: var(--nx-ink); background: #fff; }
.cn-form input:focus, .cn-form select:focus { outline: none; border-color: var(--nx-orange); box-shadow: 0 0 0 4px rgba(244, 109, 20, .14); }
.cn-form .cn-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.cn-send { height: 46px; border: 0; border-radius: 12px; background: linear-gradient(180deg, var(--nx-orange-2), var(--nx-orange)); color: #fff;
  font: 600 15px var(--ff-sans); cursor: pointer; box-shadow: 0 12px 26px -12px rgba(244, 109, 20, .7); }
.cn-send:disabled { opacity: .7; cursor: progress; }
.cn-msg { font-size: 13.5px; line-height: 1.5; margin: 0; }
.cn-msg.is-ok { color: #166534; }
.cn-msg.is-bad { color: #b91c1c; }
@media (max-width: 640px) {
  .cn-btn { height: 52px; padding: 0 18px 0 15px; font-size: 14.5px; }
  .cn-panel { position: fixed; left: 12px; right: 12px; bottom: calc(80px + env(safe-area-inset-bottom)); width: auto; }
}
@media print { .cn { display: none !important; } }

/* ── phones and tablets ─────────────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .hx-in { padding-top: 36px !important; }
  .hx h1 { font-size: clamp(32px, 8.4vw, 46px); }
  .section { padding-top: 48px; padding-bottom: 48px; }
}
@media (max-width: 520px) {
  .hx-cta { flex-direction: column; }
  .hx-cta a { width: 100%; }
  .page-hero { padding: 42px 0 18px; }
  .cta2 { padding: 48px 0; }
  .cta2-grid { flex-direction: column; align-items: stretch; text-align: left; }
  .cta2-btn { width: 100%; }
}

/* ── less motion, when asked ────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cn-panel, .htx-card.open .htx-steps { animation: none !important; }
  .pc-card, .feature-card, .step-card, .team-card, .why-card, .cap-list li, .hx-b1, .hx-b2, .footer-grid a { transition: none !important; }
  .pc-card:hover, .feature-card:hover, .step-card:hover, .team-card:hover, .why-card:hover { transform: none; }
}

/* the menu open on a phone is the whole screen; the Call now button waits until it is closed */
body:has(.site-nav.open) .cn { display: none; }

/* ════════════════════════════════════════════════════════════════════════════════════════════════
 * v4 (28 Sep 2026, the owner: "extra border hatao, box ke andar box nahi, faltu margin nahi; cursor jis
 * cheez pe jaye wo bada ho; har page me achha design aur details; videos use karo")
 * ════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── spacing: one rhythm for every page ─────────────────────────────────────────────────────────── */
.section { padding-top: 64px; padding-bottom: 64px; }
.section-head { margin-bottom: 32px; }
.section-tint { background: #f6f8fc; }
.section-white { background: #fff; }

/* ── the other pages' own blocks, without outlines ──────────────────────────────────────────────── */
.htu-card { border: 0 !important; border-radius: 14px !important; box-shadow: 0 1px 3px rgba(15, 23, 42, .06); scroll-margin-top: calc(var(--nav-h) + 20px); }
.htu-hero { border: 0 !important; border-radius: 18px !important; background: #f6f8fc !important; padding: 24px 24px !important; }
.htu-hero h1, .htu-hero h2 { font-weight: 600 !important; }
.htu-search { border-color: #dfe6f1 !important; border-radius: 12px !important; background: #fff !important; }
.htu-toc a { border: 0 !important; border-radius: 999px !important; }
.htu-head .ic { border-radius: 10px !important; }
.ft-jump a { border: 0 !important; background: #eef2f8; border-radius: 999px !important; }
.ft-list { border-top: 0 !important; }
.ft-list > * { border-bottom-color: #eef2f7 !important; }
.ft-item { padding-left: 12px !important; padding-right: 12px !important; border-radius: 12px; }
.ft-end { border: 0 !important; border-radius: 18px !important; background: #f6f8fc !important; }
.ft-faq details { border-bottom-color: #eef2f7 !important; }
.cw-form { border: 0 !important; border-radius: 18px !important; box-shadow: var(--nx-shadow); }
.cw-part { border-bottom: 0 !important; }
.cw-send { border-top: 0 !important; }
.pst-slide:not(.k0) .pst-img img { border: 0 !important; }
.pst-btn { border: 0 !important; box-shadow: 0 4px 14px -4px rgba(11, 27, 63, .25); }
.auth-card { border: 0 !important; }
.rvw { border: 0 !important; }

.footer-grid a { display: block; width: fit-content; }
.footer-grid .footer-social-icons a { display: flex !important; width: 38px !important; height: 38px !important; border-radius: 10px !important; }
@media (min-width: 1081px) { .site-nav > a:not(.btn), .nav-links > a:not(.btn) { display: inline-block; } }

/* ── the pointer (29 Sep 2026, the owner: "pakadne se jo upar aa jata hai wo band karo, pakadne se orange ho, aur
   jahan zaroori hai wahan proper border do"). Nothing lifts, grows or tilts under the pointer any more. Every box
   has a plain border, and the one under the pointer takes the orange; a button or a link turns orange. ────────── */
.pc-card, .team-card, .tm-card, .ftx-item, .htx-card, .rvw, .ab-card, .ab-stat, .ct-opt, .lv-card, .cap-list li, .fb-step,
.faq details, .ftx-faq details, .ft-faq details, .cw-form, .feature-card, .step-card, .why-card, .htu-card, .ab-states-list li {
  border: 1px solid #d5dde8 !important;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease !important;
}
.pc-card.is-best { border-color: var(--nx-navy) !important; }
.btn, .hx-b1, .hx-b2, .pc-go, .cta2-btn, .vs-btn, .pst-btn, .cn-btn, .legal-toc a, .ft-jump a, .htx-pop a, .footer-grid a,
.site-nav > a:not(.btn), .nav-links > a:not(.btn), .ftx-nav a, .htx-nav a, .footer-social-icons a, .team-ig {
  transition: background-color .15s ease, border-color .15s ease, color .15s ease !important;
}
/* nothing moves: every hover that used to lift, grow or tilt something */
.pc-card:hover, .team-card:hover, .tm-card:hover, .ftx-item:hover, .htx-card:hover, .rvw:hover, .ab-card:hover, .ab-stat:hover,
.ct-opt:hover, .lv-card:hover, .cap-list li:hover, .fb-step:hover, .feature-card:hover, .step-card:hover, .why-card:hover,
.htu-card:hover, .ab-states-list li:hover, .nx-grow:hover, .fd-work li:hover, .ab-person:hover, .tm-lead:hover, .vframe:hover,
.btn:hover, .hx-b1:hover, .hx-b2:hover, .pc-go:hover, .cta2-btn:hover, .vs-btn:hover, .pst-btn:hover, .cn-btn:hover,
.legal-toc a:hover, .ft-jump a:hover, .htx-pop a:hover, .footer-grid a:hover, .site-nav > a:hover, .nav-links > a:hover,
.ftx-nav a:hover, .footer-social-icons a:hover, .founder-social a:hover, .team-ig:hover, .hx-shot:hover,
.feature-card:hover .feature-icon, .site-brand:hover .brand-icon {
  transform: none !important;
}
.feature-card::before { display: none !important; }
@media (hover: hover) and (pointer: fine) {
  /* a box: filled orange, every word and icon in it black (black on this orange reads clearly, white does not);
     a question or a guide that is open keeps its white and takes the orange border only, its long text stays easy */
  .pc-card:hover, .team-card:hover, .tm-card:hover, .ftx-item:hover, .htx-card:not(.open):hover, .rvw:hover, .ab-card:hover,
  .ab-stat:hover, .ct-opt:hover, .lv-card:hover, .cap-list li:hover, .fb-step:hover, .faq details:not([open]):hover,
  .ftx-faq details:not([open]):hover, .ft-faq details:not([open]):hover, .feature-card:hover, .step-card:hover, .why-card:hover,
  .htu-card:hover {
    background: var(--nx-orange) !important; border-color: var(--nx-orange) !important; box-shadow: none !important;
  }
  .pc-card:hover *, .team-card:hover *, .tm-card:hover *, .ftx-item:hover *, .htx-card:not(.open):hover *, .rvw:hover *,
  .ab-card:hover *, .ab-stat:hover *, .ct-opt:hover *, .lv-card:hover *, .cap-list li:hover *, .fb-step:hover *,
  .faq details:not([open]):hover *, .ftx-faq details:not([open]):hover *, .ft-faq details:not([open]):hover *,
  .feature-card:hover *, .step-card:hover *, .why-card:hover *, .htu-card:hover * {
    color: #000 !important;
  }
  .htx-card.open:hover, .faq details[open]:hover, .ftx-faq details[open]:hover, .ft-faq details[open]:hover {
    border-color: var(--nx-orange) !important;
  }
  /* a button inside an orange box turns white so it does not vanish into it, and black under the pointer */
  .pc-card:hover .pc-go, .pc-card:hover .btn { background: #fff !important; border-color: #fff !important; color: #000 !important; }
  .pc-card:hover .pc-go:hover, .pc-card:hover .btn:hover { background: #000 !important; border-color: #000 !important; color: #fff !important; }
  .pc-card:hover .pc-go:hover *, .pc-card:hover .btn:hover * { color: #fff !important; }
  /* a button: orange, white words */
  .btn:hover, .hx-b1:hover, .hx-b2:hover, .pc-go:hover, .cta2-btn:hover, .vs-btn:hover, .pst-btn:hover, .cn-btn:hover,
  .htx-pop a:hover, .ab-states-list li:hover, .footer-grid .footer-social-icons a:hover, .team-ig:hover {
    background: var(--nx-orange) !important; border-color: var(--nx-orange) !important; color: #fff !important;
    filter: none !important; box-shadow: none !important;
  }
  /* an orange button: a darker orange */
  .btn-primary:hover, .hx-b1:hover, .vs-btn:not(.is-ghost):hover, .pc-card.is-best .pc-go:hover {
    background: var(--nx-orange-d) !important; border-color: var(--nx-orange-d) !important;
  }
  /* a link: orange words */
  main a:not([class]):hover, .footer-grid a:hover, .footer-bottom a:hover,
  .site-nav > a:not(.btn):hover, .nav-links > a:not(.btn):hover, .nav-more-panel a:hover, .legal-toc a:hover, .ft-jump a:hover,
  .ftx-nav a:hover, .htx-nav a:hover, .faq summary:hover, .ftx-faq summary:hover, .ft-faq summary:hover, .htx-head:hover b {
    color: var(--nx-orange) !important;
  }
}
/* the logo stays still: no settle on load, no tilt on hover */
.site-brand { animation: none; }
.site-brand:hover .brand-icon { transform: none; }
/* the announcement scrolls across again, as it did before 29 Sep (the owner, 30 Sep: "announcement wale pe jo animation
   hota tha wo pehle jaisa kar do, aur font bold mat karo"); its words are in the ordinary weight, not bold */
.site-announce-track span { font-weight: 400; }
/* a question opens at once, and a step list too */
main details[open] > :not(summary), .htx-card.open .htx-steps { animation: none; }

/* ── a film in a frame, and a page head with a film beside it ───────────────────────────────────── */
.vframe { position: relative; border-radius: 22px; overflow: hidden; aspect-ratio: 848 / 478; background: #05080f;
  box-shadow: 0 40px 90px -34px rgba(3, 8, 20, .75); }
.vframe video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.vsplit { position: relative; overflow: hidden; color: #fff; padding: clamp(44px, 6vw, 84px) 0;
  background: radial-gradient(760px 380px at 85% 10%, rgba(244, 109, 20, .20), transparent 62%),
              radial-gradient(640px 420px at 0% 100%, rgba(37, 99, 235, .26), transparent 62%),
              linear-gradient(160deg, #070f22 0%, #0b1b3f 58%, #0f2557 100%); }
.vsplit-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: clamp(28px, 4vw, 60px); align-items: center; }
.vsplit.is-flip .vsplit-in { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); }
.vsplit.is-flip .vframe { order: -1; }
.vsplit .hero-badge { background: rgba(255, 255, 255, .10) !important; color: #fff !important; border: 0 !important; }
.vsplit h1, .vsplit h2 { color: #fff; font-weight: 600; letter-spacing: -.035em; margin: 14px 0 12px; }
.vsplit h1 { font-size: clamp(32px, 4.6vw, 54px); line-height: 1.06; }
.vsplit h2 { font-size: clamp(26px, 3.4vw, 40px); line-height: 1.12; }
.vsplit p { color: #cdd8ec; font-size: clamp(15px, 1.3vw, 17px); line-height: 1.75; margin: 0 0 14px; }
.vsplit .vs-points { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.vsplit .vs-points li { position: relative; padding-left: 28px; color: #e4ebf7; font-size: 15px; font-weight: 400; line-height: 1.55; }
.vsplit .vs-points li::before { content: ""; position: absolute; left: 0; top: 4px; width: 18px; height: 18px; border-radius: 50%;
  background: rgba(244, 109, 20, .18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff8a3d' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E") center / 12px no-repeat; }
.vsplit .vs-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.vs-btn { display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 22px; border-radius: 12px; font-weight: 600;
  font-size: 15px; text-decoration: none; color: #fff; background: linear-gradient(180deg, var(--nx-orange-2), var(--nx-orange));
  box-shadow: 0 16px 34px -14px rgba(244, 109, 20, .75); transition: transform .25s var(--nx-ease), filter .2s; }
.vs-btn.is-ghost { background: rgba(255, 255, 255, .08); box-shadow: none; }
@media (hover: hover) and (pointer: fine) { .vs-btn:hover { transform: scale(1.05); filter: brightness(1.05); } }
@media (max-width: 900px) {
  .vsplit-in, .vsplit.is-flip .vsplit-in { grid-template-columns: 1fr; }
  .vsplit.is-flip .vframe { order: 0; }
  .vframe { border-radius: 16px; }
}

/* ── a row of figures ───────────────────────────────────────────────────────────────────────────── */
.ab-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; }
.ab-stat { background: #fff; border-radius: 18px; padding: 22px 20px; box-shadow: var(--nx-shadow); }
.ab-stat b { display: block; font-size: clamp(26px, 3vw, 34px); font-weight: 700; color: #000; letter-spacing: -.02em; line-height: 1.1; }
.ab-stat span { display: block; margin-top: 6px; font-size: 14px; color: var(--nx-muted); line-height: 1.5; }
.ab-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.ab-grid h2 { font-weight: 600; font-size: clamp(24px, 3vw, 34px); letter-spacing: -.03em; color: #000; margin: 0 0 14px; }
.ab-grid p { font-size: 16px; line-height: 1.8; color: var(--nx-body); margin: 0 0 14px; }
.ab-eyebrow { display: inline-block; font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--nx-orange); margin-bottom: 10px; }
.ab-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.ab-card { background: #fff; border-radius: 18px; padding: 22px; box-shadow: var(--nx-shadow); }
.ab-card h3 { font-size: 16.5px; font-weight: 600; color: #000; margin: 0 0 8px; }
.ab-card p { font-size: 14.5px; line-height: 1.65; color: var(--nx-body); margin: 0; }
.ab-card i { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; margin-bottom: 14px; background: #fff1e7; color: var(--nx-orange); }
.ab-card i svg { width: 22px; height: 22px; }
@media (max-width: 900px) { .ab-grid { grid-template-columns: 1fr; } }

/* ── the two who build it ───────────────────────────────────────────────────────────────────────── */
.ab-people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.ab-person { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 20px; align-items: center; background: #fff; border-radius: 20px;
  padding: 20px; box-shadow: var(--nx-shadow); }
.ab-person .ph { width: 112px; height: 112px; border-radius: 18px; overflow: hidden; background: linear-gradient(160deg, #eef2f8, #dfe6f2);
  display: grid; place-items: center; font-size: 40px; font-weight: 600; color: #000; }
.ab-person .ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ab-person h3 { margin: 0; font-size: 18px; font-weight: 600; color: #000; }
.ab-person .rl { font-size: 13.5px; font-weight: 500; color: var(--nx-orange); margin: 3px 0 8px; }
.ab-person p { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--nx-body); }
@media (max-width: 760px) { .ab-people { grid-template-columns: 1fr; } .ab-person { grid-template-columns: 84px minmax(0, 1fr); } .ab-person .ph { width: 84px; height: 84px; } }

/* ── the team page ──────────────────────────────────────────────────────────────────────────────── */
.tm-leads { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.tm-lead { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 22px; align-items: center; background: #fff; border-radius: 22px;
  padding: 22px; box-shadow: var(--nx-shadow); }
.tm-photo { position: relative; overflow: hidden; border-radius: 18px; background: linear-gradient(160deg, #eef2f8, #dde5f1); aspect-ratio: 1; }
.tm-photo span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 44px; font-weight: 600; color: #000; }
.tm-photo img { position: relative; width: 100%; height: 100%; object-fit: cover; display: block; }
.tm-lead h3 { margin: 0; font-size: 20px; font-weight: 600; color: #000; }
.tm-lead .rl, .tm-card .rl { font-size: 13.5px; font-weight: 500; color: var(--nx-orange); margin: 4px 0 10px; }
.tm-lead p { margin: 0 0 8px; font-size: 14.5px; line-height: 1.7; color: var(--nx-body); }
.tm-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.tm-tags span { font-size: 12px; font-weight: 500; color: #000; background: #eef2f8; padding: 4px 10px; border-radius: 999px; }
.tm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; }
.tm-card { background: #fff; border-radius: 20px; padding: 14px 14px 18px; box-shadow: var(--nx-shadow); text-align: center; }
.tm-card .tm-photo { width: 170px; max-width: 100%; margin: 4px auto 14px; }
.tm-card h3 { margin: 0; font-size: 16.5px; font-weight: 600; color: #000; }
.tm-card p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--nx-muted); }
.sec-title { text-align: center; max-width: 680px; margin: 0 auto 30px; }
.sec-title h2 { font-weight: 600; font-size: clamp(24px, 3vw, 34px); letter-spacing: -.03em; color: #000; margin: 0 0 10px; }
.sec-title p { margin: 0; font-size: 16px; line-height: 1.7; color: var(--nx-body); }
@media (max-width: 900px) { .tm-leads { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .tm-lead { grid-template-columns: 1fr; text-align: center; } .tm-lead .tm-photo { width: 150px; margin: 0 auto; } .tm-tags { justify-content: center; } }

/* ── the founder page ───────────────────────────────────────────────────────────────────────────── */
.fd-work { list-style: none; margin: 18px 0 8px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.fd-work li { background: #f6f8fc; border-radius: 16px; padding: 16px 18px; }
.fd-work b { display: block; font-size: 15px; font-weight: 600; color: #000; margin-bottom: 4px; }
.fd-work span { font-size: 14px; line-height: 1.6; color: var(--nx-body); }
.fd-h { font-size: 19px; font-weight: 600; color: #000; margin: 28px 0 4px; }
@media (max-width: 640px) { .fd-work { grid-template-columns: 1fr; } }

/* ── the contact page ───────────────────────────────────────────────────────────────────────────── */
.ct-opts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 34px; }
.ct-opt { display: block; background: #fff; border-radius: 18px; padding: 20px; box-shadow: var(--nx-shadow); text-decoration: none; color: inherit; }
.ct-opt i { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; margin-bottom: 12px; }
.ct-opt i svg { width: 22px; height: 22px; }
.ct-opt b { display: block; font-size: 16px; font-weight: 600; color: #000; }
.ct-opt span { display: block; margin-top: 4px; font-size: 14px; color: var(--nx-body); line-height: 1.5; word-break: break-word; }
.ct-wa i { background: #e7f8ee; color: #16a34a; } .ct-call i { background: #fff1e7; color: var(--nx-orange); }
.ct-mail i { background: #eaf1ff; color: #2563eb; } .ct-help i { background: #f1ecff; color: #7c3aed; }
@media (max-width: 1000px) { .ct-opts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .ct-opts { gap: 10px; } .ct-opt { padding: 14px; } .ct-opt span { font-size: 13px; } }

/* ── find my bills: three steps, and a form without a frame around it ─────────────────────────── */
.fb-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0 0 26px; }
.fb-step { background: #fff; border-radius: 16px; padding: 18px; box-shadow: var(--nx-shadow); }
.fb-step b { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #fff1e7; color: var(--nx-orange); font-weight: 600; font-size: 14px; margin-bottom: 10px; }
.fb-step span { font-size: 14px; line-height: 1.6; color: var(--nx-body); }
.fb-form { background: #fff; border-radius: 18px; padding: 24px; box-shadow: var(--nx-shadow); }
.fb-form label { display: block; font-weight: 500; font-size: 14px; color: #000; margin-bottom: 8px; }
.fb-form input { width: 100%; box-sizing: border-box; padding: 13px 14px; border: 1px solid #d6deea; border-radius: 10px; font-size: 16px; margin-bottom: 14px; font-family: inherit; }
.fb-form input:focus { outline: none; border-color: var(--nx-orange); box-shadow: 0 0 0 4px rgba(244, 109, 20, .14); }
.fb-form .btn { width: 100%; height: 48px; font-size: 15px; }
.fb-form small { display: block; font-size: 13px; color: var(--nx-muted); margin-top: 12px; line-height: 1.55; }
.fb-msg { margin-bottom: 16px; padding: 13px 16px; border-radius: 12px; font-size: 14px; }
.fb-msg.is-bad { background: #fef2f2; color: #b91c1c; } .fb-msg.is-ok { background: #eff6ff; color: #1e40af; }
@media (max-width: 640px) { .fb-steps { grid-template-columns: 1fr; } }

/* ── learn: the video cards ─────────────────────────────────────────────────────────────────────── */
.lv-wrap { max-width: 1100px; margin: 0 auto; padding: 8px 24px 64px; }
.lv-cat { font-size: 19px; font-weight: 600; color: #000; margin: 26px 0 14px; }
.lv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
.lv-card { border-radius: 18px; overflow: hidden; background: #fff; box-shadow: var(--nx-shadow); }
.lv-card .lv-v { position: relative; padding-top: 56.25%; background: #0b1b3f; }
.lv-card .lv-v iframe, .lv-card .lv-v a { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.lv-card .lv-v a { display: flex; align-items: center; justify-content: center; color: #fff; text-decoration: none; font-weight: 500; }
.lv-card .lv-t { padding: 14px 16px 16px; }
.lv-card .lv-t b { display: block; font-size: 15px; font-weight: 600; color: #000; }
.lv-card .lv-t span { display: block; font-size: 13.5px; color: var(--nx-body); margin-top: 4px; line-height: 1.55; }
.lv-empty { text-align: center; padding: 50px 20px; color: var(--nx-body); }
@media (max-width: 640px) { .lv-wrap { padding: 4px 18px 48px; } .lv-grid { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  .nx-grow, .pc-card, .team-card, .tm-card, .tm-lead, .ab-stat, .ab-person, .ab-card, .ct-opt, .fd-work li, .fb-step, .lv-card, .vframe,
  .btn, .hx-b1, .hx-b2, .pc-go, .footer-grid a, .founder-photo img, .team-photo img, .tm-photo img { transition: none !important; transform: none !important; }
}

/* the older pages' own headings, at the site's weight rather than 700 and 800 */
.ft-item dt, .ft-faq summary, .htu-head .tt b, .ft-end h3 { font-weight: 600 !important; color: #000; }
.ft-group > h2 { font-weight: 600; }
@media (max-width: 520px) {
  .ab-person { grid-template-columns: 1fr; text-align: center; }
  .ab-person .ph { margin: 0 auto; width: 120px; height: 120px; }
}

/* the last outlines the audit found (28 Sep 2026): the small page badges, the founder's photo frame, the line
   under "What it does", and the rule and rings inside each review card */
.hero-badge { border: 0 !important; background: #eaf0fa !important; }
.founder-photo { border: 0 !important; }
.section.cap { border-bottom: 0 !important; }
.rvw-who { border-top: 0 !important; padding-top: 6px !important; }
.rvw-who img, .rvw-who .ini { border: 0 !important; }

/* 29 Sep 2026, the owner: the small round label over each page's heading ("About us", "Our team") reads as
   machine-made. Taken out of every page; hidden here too, so a page that still carries one shows nothing. */
.hero-badge { display: none !important; }

/* ── About: where it is used ────────────────────────────────────────────────────────────────────── */
.ab-states { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.ab-states-n > b { display: block; font-size: clamp(64px, 9vw, 110px); font-weight: 700; line-height: .95; letter-spacing: -.04em;
  background: linear-gradient(135deg, var(--nx-navy) 0%, #1d4ed8 55%, var(--nx-orange) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ab-states-n > span { display: block; margin-top: 10px; font-size: 17px; line-height: 1.6; color: var(--nx-body); max-width: 320px; }
.ab-states-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.ab-states-list li { padding: 9px 16px; border-radius: 999px; background: #fff; box-shadow: var(--nx-shadow); font-size: 14.5px; color: #000;
  transition: transform .25s var(--nx-ease), background-color .2s, color .2s; }
@media (hover: hover) and (pointer: fine) { .ab-states-list li:hover { background: var(--nx-navy); color: #fff; } }
@media (max-width: 900px) { .ab-states { grid-template-columns: 1fr; } .ab-states-list li { font-size: 13.5px; padding: 8px 13px; } }

/* ── the features page (29 Sep 2026) ────────────────────────────────────────────────────────────── */
.ftx-in { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 40px; align-items: start; }
.ftx-nav { position: sticky; top: calc(var(--nav-h) + 20px); display: grid; gap: 4px; }
.ftx-nav a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; text-decoration: none; color: var(--nx-body);
  font-size: 14px; transition: background-color .2s, color .2s, transform .25s var(--nx-ease); }
.ftx-nav a i { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 9px; color: var(--tone);
  background: color-mix(in srgb, var(--tone) 12%, #fff); }
.ftx-nav a i svg { width: 17px; height: 17px; }
.ftx-nav a span { flex: 1; }
.ftx-nav a em { font-style: normal; font-size: 12px; color: var(--nx-muted); }
.ftx-nav a:hover { background: #fff; color: #000; }
.ftx-nav a.on { background: #fff; color: #000; font-weight: 500; box-shadow: var(--nx-shadow); }
.ftx-group { scroll-margin-top: calc(var(--nav-h) + 20px); margin-bottom: 44px; }
.ftx-head { display: flex; gap: 14px; align-items: center; margin-bottom: 16px; }
.ftx-head i { display: grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: 14px; color: #fff;
  background: linear-gradient(145deg, color-mix(in srgb, var(--tone) 78%, #fff), var(--tone)); box-shadow: 0 12px 24px -12px var(--tone); }
.ftx-head i svg { width: 24px; height: 24px; }
.ftx-head h2 { margin: 0; font-size: clamp(21px, 2.2vw, 26px); font-weight: 600; letter-spacing: -.02em; color: #000; }
.ftx-head p { margin: 2px 0 0; font-size: 14.5px; color: var(--nx-muted); }
.ftx-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; }
.ftx-item { background: #fff; border-radius: 16px; padding: 16px 18px 16px 44px; position: relative; box-shadow: 0 1px 3px rgba(15, 23, 42, .05);
  transition: transform .3s var(--nx-ease), box-shadow .3s var(--nx-ease); }
.ftx-item::before { content: ""; position: absolute; left: 16px; top: 19px; width: 16px; height: 16px; border-radius: 50%;
  background: color-mix(in srgb, var(--tone) 14%, #fff) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b1b3f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E") center / 10px no-repeat; }
.ftx-item dt { font-size: 15px; font-weight: 600; color: #000; margin: 0 0 4px; }
.ftx-item dd { margin: 0; font-size: 14px; line-height: 1.65; color: var(--nx-body); }
@media (hover: hover) and (pointer: fine) { .ftx-item:hover { transform: scale(1.015); box-shadow: var(--nx-shadow-lg); z-index: 2; } }
.ftx-faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: start; }
.ftx-faq details { margin: 0; background: #fff; }
.ftx-cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
@media (max-width: 1000px) {
  .ftx-in { grid-template-columns: 1fr; gap: 20px; }
  .ftx-nav { top: var(--nav-h); z-index: 5; display: flex; gap: 8px; overflow-x: auto; padding: 10px 2px; margin: -10px -2px 0;
    background: #f6f8fc; scrollbar-width: none; }
  .ftx-nav::-webkit-scrollbar { display: none; }
  .ftx-nav a { flex: none; background: #fff; padding: 7px 12px 7px 8px; }
  .ftx-nav a em { display: none; }
  .ftx-grid, .ftx-faq { grid-template-columns: 1fr; }
}
@media (max-width: 520px) { .ftx-nav a i { width: 26px; height: 26px; } .ftx-item { padding: 14px 14px 14px 40px; } .ftx-item::before { left: 14px; } }

/* ── the how-to page on the website (29 Sep 2026) ──────────────────────────────────────────────── */
.htx { position: relative; overflow: hidden; color: #fff; text-align: center; padding: clamp(48px, 7vw, 92px) 0 clamp(40px, 5vw, 64px);
  background: radial-gradient(760px 380px at 85% 0%, rgba(244, 109, 20, .22), transparent 62%),
              radial-gradient(640px 420px at 5% 100%, rgba(37, 99, 235, .28), transparent 62%),
              linear-gradient(160deg, #070f22 0%, #0b1b3f 58%, #0f2557 100%); }
.htx-in { max-width: 820px; }
.htx h1 { color: #fff; font-weight: 600; font-size: clamp(32px, 4.6vw, 52px); letter-spacing: -.035em; margin: 0 0 12px; }
.htx .lead { color: #cdd8ec; font-size: clamp(15px, 1.3vw, 17px); line-height: 1.7; margin: 0 auto 26px; max-width: 620px; }
.htx-search { position: relative; max-width: 640px; margin: 0 auto; }
.htx-search svg { position: absolute; left: 20px; top: 50%; width: 22px; height: 22px; transform: translateY(-50%); color: #000; }
.htx-search input { width: 100%; box-sizing: border-box; height: 60px; padding: 0 20px 0 54px; border: 0; border-radius: 16px; background: #fff;
  font: 400 16px var(--ff-sans); color: var(--nx-ink); box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .55); }
.htx-search input:focus { outline: none; box-shadow: 0 0 0 4px rgba(244, 109, 20, .35), 0 24px 50px -20px rgba(0, 0, 0, .55); }
.htx-pop { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; margin-top: 18px; }
.htx-pop span { font-size: 13px; color: #9fb0cc; margin-right: 4px; }
.htx-pop a { font-size: 13.5px; color: #fff; text-decoration: none; padding: 7px 14px; border-radius: 999px; background: rgba(255, 255, 255, .10);
  transition: background-color .2s, transform .25s var(--nx-ease); }
.htx-pop a:hover { background: rgba(255, 255, 255, .2); }
.htx-body { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 36px; align-items: start; }
.htx-nav { position: sticky; top: calc(var(--nav-h) + 20px); display: grid; gap: 2px; max-height: calc(100vh - var(--nav-h) - 40px); overflow-y: auto;
  padding-right: 6px; scrollbar-width: thin; }
.htx-nav a { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 10px; text-decoration: none; color: var(--nx-body); font-size: 13.5px;
  transition: background-color .2s, color .2s; }
.htx-nav a i { display: grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 8px; background: #eaf0fa; color: #1e3a8a; }
.htx-nav a i svg { width: 15px; height: 15px; }
.htx-nav a:hover { background: #fff; color: #000; }
.htx-nav a.on { background: #fff; color: #000; font-weight: 500; box-shadow: var(--nx-shadow); }
.htx-nav a.on i { background: var(--nx-orange); color: #fff; }
.htx-list { display: grid; gap: 12px; }
.htx-card { background: #fff; border-radius: 18px; box-shadow: 0 1px 3px rgba(15, 23, 42, .05); scroll-margin-top: calc(var(--nav-h) + 20px);
  transition: box-shadow .3s var(--nx-ease), transform .3s var(--nx-ease); }
.htx-card.open { box-shadow: var(--nx-shadow-lg); }
@media (hover: hover) and (pointer: fine) { .htx-card:not(.open):hover { transform: scale(1.015); box-shadow: var(--nx-shadow); } }
.htx-head { display: flex; align-items: center; gap: 14px; width: 100%; padding: 16px 18px; border: 0; background: none; cursor: pointer; text-align: left; font-family: inherit; }
.htx-head i { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 13px; background: #eaf0fa; color: #1e3a8a; transition: background-color .25s, color .25s; }
.htx-head i svg { width: 22px; height: 22px; }
.htx-card.open .htx-head i { background: linear-gradient(145deg, #ff8a3d, var(--nx-orange)); color: #fff; }
.htx-head span { flex: 1; min-width: 0; }
.htx-head b { display: block; font-size: 16px; font-weight: 600; color: #000; }
.htx-head small { display: block; font-size: 13.5px; color: var(--nx-muted); margin-top: 2px; }
.htx-head em { font-style: normal; font-size: 12.5px; color: var(--nx-muted); background: #f1f5fb; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.htx-head .chev { width: 18px; height: 18px; flex: none; color: var(--nx-muted); transition: transform .25s var(--nx-ease); }
.htx-card.open .htx-head .chev { transform: rotate(180deg); }
.htx-steps { display: none; list-style: none; counter-reset: st; margin: 0; padding: 4px 22px 22px 76px; }
.htx-card.open .htx-steps { display: block; animation: nxUp .35s var(--nx-ease); }
.htx-steps li { position: relative; counter-increment: st; padding: 0 0 14px 20px; font-size: 14.5px; line-height: 1.7; color: var(--nx-body); }
.htx-steps li::before { content: counter(st); position: absolute; left: -22px; top: 1px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  font-size: 12.5px; font-weight: 600; color: var(--nx-orange); background: #fff1e7; }
.htx-steps li::after { content: ""; position: absolute; left: -10px; top: 30px; bottom: 2px; width: 2px; background: #eef2f8; }
.htx-steps li:last-child { padding-bottom: 0; }
.htx-steps li:last-child::after { display: none; }
.htx-steps b { color: #000; font-weight: 600; }
.htx-none { text-align: center; color: var(--nx-body); padding: 30px 0; }
.htx-upd { text-align: center; font-size: 12.5px; color: var(--nx-muted); margin: 14px 0 0; }
@media (max-width: 1000px) {
  .htx-body { grid-template-columns: 1fr; gap: 16px; }
  .htx-nav { top: var(--nav-h); z-index: 5; display: flex; gap: 8px; overflow-x: auto; max-height: none; padding: 10px 2px; margin: -10px -2px 0;
    background: #f6f8fc; scrollbar-width: none; }
  .htx-nav::-webkit-scrollbar { display: none; }
  .htx-nav a { flex: none; background: #fff; padding: 6px 12px 6px 6px; }
}
@media (max-width: 560px) {
  .htx-search input { height: 54px; font-size: 16px; }
  .htx-head { padding: 14px; gap: 12px; }
  .htx-head i { width: 38px; height: 38px; }
  .htx-head em { display: none; }
  .htx-steps { padding: 2px 16px 18px 46px; }
}

/* the price table's words, black like the rest of the website's text */
.pt { --pt-ink: #000; --pt-body: #000; --pt-muted: #000; }