/* =========================================================
   PayShore — shared site styles
   Modern product-brand system. Used by every page.
   Index adds its own hero-specific styles inline.
   ========================================================= */

/* =========================================================
   PRE-LAUNCH: Hide Log in and Sign up CTAs site-wide until
   app hosting is live. Remove this block on launch day to
   re-enable the buttons across all pages.
   ========================================================= */
.nav-login-link,
.topbar .cta-link-secondary{
  display: none !important;
}

:root{
  /* Surfaces */
  --canvas:        #FAFAFA;
  --surface:       #FFFFFF;
  --surface-alt:   #F4F5F7;
  --surface-warm:  #F6F2EA;  /* soft warm cream — echoes the hero image's peach horizon */
  --surface-cool:  #EEF1F5;  /* soft cool mist — echoes the hero image's dusk blue */
  --dark:          #0B0F19;
  --dark-2:        #111827;

  /* Ink */
  --ink:           #0B0F19;
  --ink-2:         #1F2937;
  --muted:         #5B6473;
  --muted-soft:    #8B92A1;
  --on-dark:       #F5F6F8;
  --on-dark-muted: #9CA3AF;

  /* Lines */
  --rule:          rgba(11,15,25,.08);
  --rule-strong:   rgba(11,15,25,.14);
  --rule-on-dark:  rgba(245,246,248,.12);

  /* Accent — deep restrained jade, used sparingly */
  --accent:        #0E5B47;
  --accent-ink:    #094231;
  --accent-soft:   #EAF1ED;

  /* Shape + shadow */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --shadow-sm:  0 1px 2px rgba(11,15,25,.04);
  --shadow-md:  0 1px 2px rgba(11,15,25,.04), 0 12px 32px rgba(11,15,25,.06);
  --shadow-lg:  0 2px 4px rgba(11,15,25,.05), 0 24px 60px rgba(11,15,25,.10);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--canvas);
  color:var(--ink);
  font-family: "Inter", "Inter Tight", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-feature-settings: "cv11", "ss01";
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
/* Subpages sit on a slightly softer off-white canvas than the homepage —
   a restrained, quiet surface that keeps attention on the content while
   still reading as "white" against imagery. The homepage keeps its
   slightly warmer --canvas so the hero stays the strongest statement. */
body.subpage{
  --canvas: #F6F7F9;
}
a{color:var(--ink);text-decoration:none}
img{max-width:100%;display:block}
::selection{background:rgba(14,91,71,.18)}

/* =========================================================
   Typography
   ========================================================= */
.display{
  font-family: "Inter Tight", "Inter", system-ui, sans-serif;
  font-weight:700;
  letter-spacing:-.025em;
  line-height:1.05;
  color:var(--ink);
}
.display.lg{ font-size: clamp(44px, 6.2vw, 80px) }
.display.md{ font-size: clamp(32px, 4vw, 52px) }
.display.sm{ font-size: clamp(24px, 2.8vw, 36px) }
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:11.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-2);
}
.eyebrow::before{
  content:"";width:18px;height:1px;background:var(--accent);
  display:inline-block;flex:none;
}
.eyebrow.on-dark{color:var(--on-dark)}
.eyebrow.on-dark::before{background:#5FBFA3}
.kicker{
  font-size:12px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted-soft);
}

/* =========================================================
   Layout primitives
   ========================================================= */
.wrap{
  width:100%;
  max-width:1200px;
  margin:0 auto;
  padding:0 40px;
}
.wrap.narrow{max-width:1040px}
.band{padding:100px 0}
.band.tight{padding:64px 0}
.band.alt{background:var(--surface-alt);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.band.paper{background:var(--surface);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
/* Subtle tonal modifiers for inner-page body sections.
   Used sparingly — typically one tinted section per page — to break
   the black-and-white feel without adding decoration. */
.band.warm{background:var(--surface-warm);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.band.cool{background:var(--surface-cool);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.band.dark{
  background:var(--dark);
  color:var(--on-dark);
}
.band.dark .display,
.band.dark .eyebrow,
.band.dark h1,.band.dark h2,.band.dark h3{color:var(--on-dark)}
.band.dark p{color:#C7CBD3}

/* =========================================================
   Top bar
   ========================================================= */
.topbar{
  position:sticky;top:0;z-index:40;
  background:rgba(250,250,250,.86);
  backdrop-filter:saturate(1.1) blur(14px);
  -webkit-backdrop-filter:saturate(1.1) blur(14px);
  border-bottom:1px solid var(--rule);
}
.topbar.on-hero{
  background:rgba(11,15,25,.18);
  backdrop-filter:saturate(1.05) blur(10px);
  -webkit-backdrop-filter:saturate(1.05) blur(10px);
  border-bottom:1px solid rgba(245,246,248,.08);
}
.topbar .wrap{
  display:flex;align-items:center;justify-content:space-between;
  height:74px;gap:20px;
}
.brand{
  display:inline-flex;align-items:center;gap:10px;
  color:var(--ink);
  min-height:36px;
}
.brand img{
  display:block;height:30px;width:auto;
  image-rendering:-webkit-optimize-contrast;
}
/* The logo image now contains both the icon and the PayShore wordmark.
   Hide the text wordmark and trademark spans by default so they don't duplicate
   what's in the image. The onerror handler in each page still restores the
   text wordmark if the image fails to load. */
.brand .fallback,
.brand .tm,
.footer .mark .fallback,
.footer .mark .tm{
  display:none;
}
.brand .fallback{
  font-family:"Inter Tight", Inter, sans-serif;
  font-weight:700;font-size:19px;letter-spacing:-.02em;color:inherit;
  line-height:1;
}
.brand .sr-only{
  position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;
}
/* Trademark superscript on the brand lockup (logo + name).
   Used wherever the full PayShore brand mark appears: topbar, footer,
   product-tour sidebar. When the trademark registration is granted,
   change the literal ™ character to ® across the HTML files;
   the styling here stays the same. */
.tm{
  font-size: .7em;
  vertical-align: super;
  margin-left: 0;
  font-weight: 500;
  color: inherit;
  line-height: 0;
  letter-spacing: 0;
}
.topbar.on-hero .brand,
.topbar.on-hero .nav a,
.topbar.on-hero .brand .fallback{color:var(--on-dark)}
.topbar.on-hero .brand img{
  /* Very soft shadow so the colored mark keeps its edge against the sky. */
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.18));
}

.nav{display:flex;align-items:center;gap:2px}
.nav a{
  color:var(--ink-2);
  font-size:15px;font-weight:600;letter-spacing:-.005em;
  padding:8px 12px;border-radius:var(--r-sm);
  transition:color .15s ease, background-color .15s ease;
}
.nav a:hover{color:var(--ink);background:rgba(11,15,25,.04)}
.nav a.current{color:var(--ink); position:relative}
/* Quiet jade underline marks the current page in the non-hero topbar.
   Restrained (22px × 2px) so it reads as a pagination cue, not a badge. */
.topbar:not(.on-hero) .nav a.current::after{
  content:""; position:absolute; left:50%; bottom:0;
  transform: translateX(-50%);
  width:22px; height:2px; background:var(--accent); border-radius:1px;
}
.topbar.on-hero .nav a{color:#D6D9DF}
.topbar.on-hero .nav a:hover{color:#fff;background:rgba(245,246,248,.08)}
.topbar.on-hero .nav a.current{color:#fff}

/* Subpage topbar — softer refined navy rather than near-black.
   The topbar is sticky so the user sees it while scrolling every
   content page; it needs to read as present but quiet, not pull
   focus away from the content beneath. Scoped to :not(.on-hero)
   so the homepage's dark-photo topbar remains unchanged. */
.topbar:not(.on-hero) .brand,
.topbar:not(.on-hero) .brand .fallback{color:#26425D}
.topbar:not(.on-hero) .nav a{color:#4B5F7D}
.topbar:not(.on-hero) .nav a:hover{color:#26425D;background:rgba(38,66,93,.06)}
.topbar:not(.on-hero) .nav a.current{color:#26425D}

.cta-link{
  display:inline-flex;align-items:center;gap:8px;
  height:40px;padding:0 18px;border-radius:var(--r-sm);
  background:#D97101;color:#fff !important;
  font-size:13.5px;font-weight:600;letter-spacing:-.005em;
  border:1px solid #D97101;
  transition:background .15s ease, border-color .15s ease;
}
.cta-link:hover{background:#B85C00;border-color:#B85C00}
.topbar.on-hero .cta-link{
  background:#D97101;color:#fff !important;border-color:#D97101;
}
.topbar.on-hero .cta-link:hover{background:#B85C00;border-color:#B85C00}
.cta-link .chev{display:inline-flex}

/* =========================================================
   Top bar — dropdown menus
   Parent <div class="nav-item has-sub"> wraps a <button class="nav-trigger">
   and a <div class="nav-sub"> panel. Opens on click; also on hover at
   desktop sizes. Hidden under the same 960px breakpoint as .nav.
   ========================================================= */
.nav-item{position:relative;display:flex;align-items:center}
.nav-item.has-sub > .nav-trigger{
  display:inline-flex;align-items:center;gap:6px;
  appearance:none;-webkit-appearance:none;
  background:transparent;border:0;cursor:pointer;
  color:inherit;
  font-family: inherit;
  font-size:15px;font-weight:600;letter-spacing:-.005em;
  padding:8px 12px;border-radius:var(--r-sm);
  transition:color .15s ease, background-color .15s ease;
}
.nav-item.has-sub > .nav-trigger:hover{background:rgba(11,15,25,.04);color:var(--ink)}
.nav-item.has-sub > .nav-trigger:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px;
}
.nav-item.has-sub > .nav-trigger .caret{
  display:inline-block;width:8px;height:8px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .18s ease;
  opacity:.7;
}
.nav-item.has-sub.is-open > .nav-trigger .caret{
  transform: rotate(-135deg) translateY(-2px);
}
.nav-item.has-sub.is-current > .nav-trigger{color:var(--ink); position:relative}
.topbar:not(.on-hero) .nav-item.has-sub.is-current > .nav-trigger::after{
  content:""; position:absolute; left:50%; bottom:0;
  transform: translateX(-50%);
  width:22px; height:2px; background:var(--accent); border-radius:1px;
}

/* Dropdown panel */
.nav-sub{
  position:absolute; top:100%; left:0;
  min-width:220px;
  margin-top:6px;
  padding:8px;
  background:#FFFFFF;
  border:1px solid var(--rule);
  border-radius:var(--r-md);
  box-shadow: var(--shadow-md);
  display:flex; flex-direction:column; gap:2px;
  opacity:0; pointer-events:none;
  transform: translateY(-4px);
  transition: opacity .14s ease, transform .14s ease;
  z-index:50;
}
.nav-item.has-sub.is-open > .nav-sub{
  opacity:1; pointer-events:auto; transform: translateY(0);
}
/* Bridge the 6px gap so a slow hover from trigger to panel doesn't close it */
.nav-sub::before{
  content:""; position:absolute; left:0; right:0; top:-8px; height:8px;
}
.nav-sub a{
  display:block;
  padding:9px 12px;
  border-radius:var(--r-sm);
  color:var(--ink-2);
  font-size:14px; font-weight:500; letter-spacing:-.005em;
  text-decoration:none;
  white-space:nowrap;
}
.nav-sub a:hover{background:var(--surface-alt); color:var(--ink)}
.nav-sub a.current{color:var(--accent-ink); background:var(--accent-soft); font-weight:600}
.nav-sub a:focus-visible{
  outline:2px solid var(--accent); outline-offset:-2px;
}

/* Color treatment in non-hero (subpage) topbar */
.topbar:not(.on-hero) .nav-item.has-sub > .nav-trigger{color:#4B5F7D}
.topbar:not(.on-hero) .nav-item.has-sub > .nav-trigger:hover{color:#26425D;background:rgba(38,66,93,.06)}
.topbar:not(.on-hero) .nav-item.has-sub.is-current > .nav-trigger{color:#26425D}

/* Color treatment on the dark hero topbar (homepage) */
.topbar.on-hero .nav-item.has-sub > .nav-trigger{color:#D6D9DF}
.topbar.on-hero .nav-item.has-sub > .nav-trigger:hover{color:#fff;background:rgba(245,246,248,.08)}
.topbar.on-hero .nav-item.has-sub.is-current > .nav-trigger{color:#fff}
/* Panel itself stays light even on the hero topbar — it sits on a white card */

/* =========================================================
   Buttons
   ========================================================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:46px;padding:0 22px;border-radius:var(--r-sm);border:1px solid transparent;
  font: 600 14px/1 "Inter", sans-serif; letter-spacing:-.005em;
  cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:background-color .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.btn.primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn.primary:hover{background:var(--accent-ink);border-color:var(--accent-ink)}

.btn.accent{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn.accent:hover{background:var(--accent-ink);border-color:var(--accent-ink)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--rule-strong)}
.btn.ghost:hover{border-color:var(--ink);background:rgba(11,15,25,.03)}
/* Hero "on-dark" primary CTA: brand orange so it pops against the
   dark hero photo and matches the topbar "Request a demo" treatment. */
.btn.on-dark{
  background:#D97101;color:#fff;border-color:#D97101;
  height:50px;padding:0 26px;font-size:15px;
  box-shadow:0 4px 12px rgba(217,113,1,.28);
}
.btn.on-dark:hover{
  background:#B85C00;border-color:#B85C00;
  box-shadow:0 6px 16px rgba(184,92,0,.34);
  transform:translateY(-1px);
}
.btn.on-dark.ghost{
  background:transparent;color:#fff;border-color:rgba(245,246,248,.5);
  box-shadow:none;
}
.btn.on-dark.ghost:hover{
  border-color:#fff;background:rgba(245,246,248,.1);
  box-shadow:none;transform:none;
}
.btn .chev{display:inline-flex;margin-left:1px}

/* =========================================================
   Inline link
   ========================================================= */
.inline-link{
  display:inline-flex;align-items:center;gap:6px;
  color:var(--ink);font-weight:600;font-size:14px;
  border-bottom:1px solid var(--rule-strong);padding-bottom:2px;
}
.inline-link:hover{border-bottom-color:var(--ink);color:var(--accent)}
.band.dark .inline-link,
.on-dark .inline-link{color:#fff;border-bottom-color:rgba(245,246,248,.3)}
.band.dark .inline-link:hover{border-bottom-color:#fff;color:#9FDCC2}

/* =========================================================
   Sub-page hero — contained header-card treatment
   ---
   The inner-page top moment is a contained, rounded header
   panel painted with the same vivid sunrise/ridge photograph
   used on the homepage family ("New Background Brighter 1.jpg").
   It is deliberately smaller than the homepage hero — premium
   page header, not a second hero — but kept at the homepage's
   tonal energy for brand consistency across the site. A
   left-anchored legibility overlay preserves white-text
   contrast on the deep navy sky while the orange horizon glow
   and layered ridge silhouettes stay visible on the right.
   ========================================================= */
.page-hero{
  position:relative;
  padding:32px 0 56px;
  background: var(--canvas);
}
/* The subpage hero-card is stretched wider than the default 1200px
   content wrap — roughly 3/4 viewport width on a standard monitor.
   Gives the sunset image more room to breathe on the right without
   going edge-to-edge (which would erode the distinction between the
   homepage's full-bleed hero and the contained subpage header). */
.page-hero .wrap{
  max-width: 1500px;
}
.page-hero .eyebrow{margin-bottom:20px}
.page-hero h1.display{
  font-size: clamp(40px, 5.2vw, 64px);
  margin:0 0 22px;
  max-width:20ch;
}
.page-hero h1 em{
  font-style:normal;color:var(--muted);font-weight:500;
}
.page-hero .lede{
  margin:0;font-size:19px;line-height:1.55;
  color:var(--muted);max-width:58ch;font-weight:400;
}
.page-hero .actions{margin-top:32px;display:flex;gap:12px;flex-wrap:wrap}

/* Contained header card painted with the vivid image.
   Used on every inner page (including the contact page).
   Overlay layers (top-to-bottom in CSS = rendered front-to-back):
     1. Very faint cool unifying wash — pulls the whole card toward a
        controlled executive tone without flattening the sky.
     2. Left-anchored legibility wash, softened so the warm horizon
        glow on the right is preserved while white text on the left
        still reads cleanly.
     3. Slightly heavier bottom weight — grounds the card against the
        dark ridge silhouettes at the photograph's lower band.
     4. The vivid sunrise/ridge photograph.
   Inset hairline shadow gives the card a crafted, contained edge. */
.hero-card{
  position:relative;
  overflow:hidden;
  border-radius:18px;
  padding: 68px 60px 60px;
  min-height: clamp(300px, 34vh, 380px);
  display:flex; flex-direction:column; justify-content:center;
  box-shadow: var(--shadow-lg), inset 0 0 0 1px rgba(245,246,248,.05);
  color: var(--on-dark);
  background-color: #1A2238; /* deep dusk fallback matched to the photo */
  background-image:
    linear-gradient(180deg,
      rgba(23,36,58,.04) 0%,
      rgba(23,36,58,.02) 55%,
      rgba(23,36,58,.00) 100%),
    linear-gradient(95deg,
      rgba(11,15,25,.36) 0%,
      rgba(11,15,25,.22) 30%,
      rgba(11,15,25,.10) 60%,
      rgba(11,15,25,.04) 100%),
    linear-gradient(180deg,
      rgba(11,15,25,0) 55%,
      rgba(11,15,25,.08) 88%,
      rgba(11,15,25,.16) 100%),
    url("New Background Brighter 1.jpg");
  background-size: cover;
  background-position: center 68%;
  background-repeat: no-repeat;
}
.hero-card .eyebrow{color:#E8F2EE; margin-bottom:18px}
.hero-card .eyebrow::before{background:#9FDCC2}
.hero-card h1.display{
  color:#fff;
  text-shadow: 0 1px 2px rgba(11,15,25,.22);
  max-width: 20ch;
}
.hero-card h1 em{color:#D6D9DF; font-weight:500}
.hero-card .lede{
  color:#EEF1F4;
  text-shadow: 0 1px 2px rgba(11,15,25,.18);
  max-width: 54ch;
}
.hero-card .actions{margin-top:28px}
.hero-card .actions .btn.primary{
  background:rgba(255,255,255,.14);
  color:#F2F4F7;
  border-color:rgba(255,255,255,.32);
}
.hero-card .actions .btn.primary:hover{
  background:rgba(255,255,255,.22);
  border-color:rgba(255,255,255,.48);
}
.hero-card .actions .btn.ghost{background:transparent;color:#fff;border-color:rgba(245,246,248,.32)}
.hero-card .actions .btn.ghost:hover{border-color:#fff;background:rgba(245,246,248,.08)}

/* Contact page uses a two-column contact-wrap layout below the hero.
   The branded-wash class is no longer needed there — kept empty as a
   no-op so any lingering markup stays harmless. */
.branded-wash{position:relative;background:var(--canvas)}

/* =========================================================
   Section head
   ========================================================= */
.section-head{
  position:relative;
  display:grid;
  grid-template-columns: minmax(0,.8fr) minmax(0,1fr);
  gap:48px;align-items:end;
  padding-bottom:40px;border-bottom:1px solid var(--rule);
  margin-bottom:50px;
}
.section-head .eyebrow{margin-bottom:16px}
.section-head h2.display{font-size:clamp(28px,3.4vw,44px);margin:0;max-width:20ch}
.section-head .note{font-size:16px;color:var(--muted);line-height:1.6;max-width:52ch}
/* Short jade terminator sits on top of the section-head rule —
   a quiet echo of the homepage's accent language, not a decoration. */
.section-head::after{
  content:"";position:absolute;left:0;bottom:-1px;
  width:48px;height:2px;background:var(--accent);
}

/* =========================================================
   Editorial two-column
   ========================================================= */
.editorial{
  display:grid;
  grid-template-columns:minmax(0,.7fr) minmax(0,1fr);
  gap:60px;align-items:start;
}
.editorial .eyebrow{margin-bottom:16px}
.editorial h2.display{font-size:clamp(28px,3.4vw,42px);margin:0;max-width:16ch}
.editorial .body p{
  margin:0 0 20px;font-size:17px;line-height:1.65;color:var(--ink-2);
}
.editorial .body p:last-child{margin-bottom:0}

/* =========================================================
   Definition rows (list-of-rows, no cards)
   ========================================================= */
.def-rows{margin:0;padding:0;list-style:none;border-top:1px solid var(--rule)}
.def-row{
  display:grid;grid-template-columns: 96px minmax(0,1fr);gap:28px;
  padding:22px 0;border-bottom:1px solid var(--rule);
}
.def-row .k{
  font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted-soft);padding-top:5px;
}
.def-row .v strong{
  font: 600 18px/1.3 "Inter Tight", Inter, sans-serif;
  letter-spacing:-.015em;color:var(--ink);
  display:block;margin-bottom:4px;
}
.def-row .v p{margin:0;color:var(--muted);font-size:15.5px;line-height:1.55}
.def-row .v .mono-inline{
  margin-top:10px;font-size:12.5px;font-weight:600;letter-spacing:.04em;
  color:var(--accent);text-transform:uppercase;
}

/* =========================================================
   Numbered steps
   ========================================================= */
.steps{margin:0;padding:0;list-style:none}
.step{
  display:grid;grid-template-columns:60px minmax(0,1fr);gap:28px;
  padding:36px 0;border-top:1px solid var(--rule);
}
.step:last-child{border-bottom:1px solid var(--rule)}
.step .num{
  font: 700 32px/1 "Inter Tight", Inter, sans-serif;
  color:var(--ink);letter-spacing:-.02em;padding-top:6px;
}
.step .num::before{
  content:"";display:inline-block;width:10px;height:2px;background:var(--accent);
  vertical-align:middle;margin-right:8px;transform:translateY(-5px);
}
.step h3{
  font: 600 clamp(22px,2.4vw,28px)/1.2 "Inter Tight", Inter, sans-serif;
  letter-spacing:-.02em;margin:0 0 10px;color:var(--ink);
}
.step p{margin:0 0 10px;font-size:16px;color:var(--ink-2);line-height:1.6;max-width:62ch}
.step .sub{
  margin-top:8px;font-size:12px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted-soft);
}

/* =========================================================
   Trust row
   ========================================================= */
.trust-row{display:grid;grid-template-columns:repeat(5,1fr);gap:0}
.trust-cell{padding:16px 22px;border-left:1px solid var(--rule)}
.trust-cell:first-child{border-left:none;padding-left:0}
.trust-cell .k{
  font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted-soft);margin-bottom:6px;
}
.trust-cell .v{
  font: 600 15.5px/1.35 "Inter Tight", Inter, sans-serif;
  letter-spacing:-.01em;color:var(--ink);
}
.band.dark .trust-cell,
.on-dark .trust-cell{border-left-color:var(--rule-on-dark)}
.band.dark .trust-cell .k,
.on-dark .trust-cell .k{color:var(--on-dark-muted)}
.band.dark .trust-cell .v,
.on-dark .trust-cell .v{color:var(--on-dark)}

/* --- Contracting-standard adopter strip (under trust-row) --- */
.trust-adopter{
  display:flex; align-items:center; gap:18px;
  margin-top:22px; padding-top:20px;
  border-top:1px solid var(--rule);
}
.trust-adopter .onenda-badge{
  display:block; flex:0 0 auto;
  width:64px; height:auto;
}
.trust-adopter-copy .k{
  font-size:11.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted-soft); margin-bottom:4px;
}
.trust-adopter-copy .v{
  font: 500 14.5px/1.45 Inter, sans-serif;
  color:var(--ink);
  max-width: 72ch;
}
@media (max-width: 720px){
  .trust-adopter{gap:14px}
  .trust-adopter .onenda-badge{width:56px}
}

/* =========================================================
   Callout — contained soft panel
   ---
   Previously a full-width dark band. Now mirrors the homepage
   trust/proof-panel treatment: a contained, rounded panel on
   canvas, painted with the same muted navy gradient and soft
   radial washes. Reads as "serious but premium" rather than
   "near-black and harsh." Markup expects an inner .callout-panel
   wrapper around the heading + CTA.
   ========================================================= */
.callout{
  padding: 36px 0 90px;
  background: var(--canvas);
}
.callout-panel{
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  padding: 38px 48px;
  background:
    radial-gradient(900px 360px at 85% -20%, rgba(255,170,110,.09), transparent 65%),
    radial-gradient(700px 320px at 8% 110%, rgba(14,91,71,.18), transparent 70%),
    linear-gradient(135deg, #17243A 0%, #1F3150 55%, #26425D 100%);
  color: var(--on-dark);
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(245,246,248,.06);
  display: flex; align-items: center; justify-content: space-between;
  gap: 30px; flex-wrap: wrap;
}
.callout-panel h3{
  font: 600 clamp(22px,2.6vw,30px)/1.2 "Inter Tight", Inter, sans-serif;
  letter-spacing:-.02em; margin:0; color:#fff; max-width:32ch;
}
.callout-panel .note{
  font-size:14px; color:#9FB4C9; margin-top:6px; max-width:48ch;
}
.callout-panel .btn.primary{
  background:#D97101;
  color:#fff;
  border-color:#D97101;
  box-shadow: 0 6px 14px rgba(217,113,1,.32), 0 2px 4px rgba(11,15,25,.22);
  font-weight:600;
}
.callout-panel .btn.primary:hover{
  background:#C56600;
  border-color:#C56600;
  box-shadow: 0 8px 18px rgba(217,113,1,.40), 0 2px 4px rgba(11,15,25,.28);
}

/* =========================================================
   Stat line — reusable, restrained figure inserted into
   existing narrative sections to give a logical buyer a
   cite-able anchor. Smaller footprint than the pricing
   savings-panel so it doesn't break section rhythm.
   Always paired with a visible citation — the claim earns
   trust through the source, not through brand assertion.
   ---
   Variants:
     .stat-line             — single figure + supporting copy
     .stat-line.multi       — horizontal row of 2–3 mini stats
                              (for side-by-side cost/time comparisons)
     .stat-line.on-dark     — same component on a dark band
   ========================================================= */
.stat-line{
  margin: 22px 0 0;
  padding: 18px 22px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-md);
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: 22px;
  align-items: center;
}
.stat-line .stat-figure{
  font: 700 clamp(22px, 2.2vw, 28px)/1 "Inter Tight", Inter, sans-serif;
  letter-spacing:-.02em;
  color: var(--ink);
  white-space: nowrap;
}
.stat-line .stat-body{
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-2);
  margin: 0;
}
.stat-line .cite{
  display: block;
  margin-top: 6px;
  font-size: 11.5px;
  font-style: italic;
  color: var(--muted);
  letter-spacing:.005em;
}

/* Multi-figure variant. Use for 2–3 stats shown side-by-side,
   where the punch is in the relative magnitude between them. */
.stat-line.multi{
  display: block;
  padding: 22px 24px;
}
.stat-line.multi .stat-row{
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-bottom: 12px;
}
.stat-line.multi .stat-cell{
  flex: 1 1 160px;
  min-width: 0;
  padding: 2px 20px;
  border-left: 1px solid var(--rule);
}
.stat-line.multi .stat-cell:first-child{ border-left: 0; padding-left: 0 }
.stat-line.multi .stat-cell .k{
  display: block;
  font: 600 10.5px/1.2 "Inter", sans-serif;
  letter-spacing:.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.stat-line.multi .stat-cell .v{
  display: block;
  font: 700 clamp(20px, 2vw, 26px)/1 "Inter Tight", Inter, sans-serif;
  letter-spacing:-.02em;
  color: var(--ink);
}
.stat-line.multi .stat-cell.accent .v{ color: var(--accent) }

/* On-dark variant for bands painted darker. */
.stat-line.on-dark{
  background: rgba(245,246,248,.04);
  border-color: rgba(245,246,248,.10);
  border-left-color: #9FDCC2;
}
.stat-line.on-dark .stat-figure{ color:#fff }
.stat-line.on-dark .stat-body{ color:#EEF1F4 }
.stat-line.on-dark .cite{ color:#9CA3AF }
.stat-line.on-dark.multi .stat-cell{ border-left-color: rgba(245,246,248,.10) }
.stat-line.on-dark.multi .stat-cell .k{ color:#9FB4C9 }
.stat-line.on-dark.multi .stat-cell .v{ color:#fff }
.stat-line.on-dark.multi .stat-cell.accent .v{ color:#9FDCC2 }

/* Stat chip — used inside role cards or capability groupings to
   surface a single compelling figure. Sized up so the fact reads
   clearly and draws the eye as a benefit moment, while staying
   distinct from the larger full-width stat-line treatment. */
.stat-chip{
  margin-top: 18px;
  padding: 18px 22px;
  background: var(--accent-soft);
  border-left: 4px solid var(--accent);
  border-radius: 8px;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ink-2);
  box-shadow: 0 1px 2px rgba(11,15,25,.04), 0 8px 22px rgba(14,91,71,.06);
}
.stat-chip strong{
  font-family: "Inter Tight", Inter, sans-serif;
  font-weight: 700;
  color: var(--ink);
}
.stat-chip .cite{
  display: block;
  margin-top: 8px;
  font-size: 12.5px;
  font-style: italic;
  color: var(--muted);
}

@media (max-width: 760px){
  .stat-line{
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 16px 18px;
  }
  .stat-line .stat-figure{ font-size: 22px }
  .stat-line.multi{ padding: 18px 20px }
  .stat-line.multi .stat-cell{
    flex: 1 1 100%;
    border-left: 0;
    border-top: 1px solid var(--rule);
    padding: 12px 0 0;
    margin-top: 12px;
  }
  .stat-line.multi .stat-cell:first-child{
    border-top: 0; padding-top: 0; margin-top: 0;
  }
  .stat-line.on-dark.multi .stat-cell{ border-top-color: rgba(245,246,248,.10) }
}

/* =========================================================
   Form
   ========================================================= */
.form{
  background:var(--surface);
  border:1px solid var(--rule);
  border-radius:var(--r-lg);
  padding:28px 28px 22px;
  box-shadow:var(--shadow-md);
}
.form h3{
  font: 600 20px/1.2 "Inter Tight", Inter, sans-serif;letter-spacing:-.015em;
  margin:0 0 4px;color:var(--ink);
}
.form .sub{margin:0 0 20px;font-size:13.5px;color:var(--muted)}
.field{margin:0 0 14px;display:block}
.field label{
  display:block;font-size:12px;font-weight:600;letter-spacing:.04em;
  color:var(--ink-2);margin-bottom:6px;
}
.field input,.field textarea{
  width:100%;font:400 14.5px/1.5 "Inter", sans-serif;color:var(--ink);
  background:var(--surface);border:1px solid var(--rule-strong);
  border-radius:var(--r-sm);padding:11px 13px;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.field input::placeholder,.field textarea::placeholder{color:#9AA0AC}
.field input:focus,.field textarea:focus{
  outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(14,91,71,.15);
}
.field textarea{min-height:96px;resize:vertical}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid-2 .field{margin-bottom:0}
.form-actions{margin-top:8px;display:flex}
.form-actions .btn{width:100%;height:48px}
.fine{margin-top:12px;font-size:12px;color:var(--muted-soft);line-height:1.5}
.turnstile-row{display:flex;justify-content:center;min-height:68px;margin:10px 0 4px}
.turnstile-notice{font-size:12px;color:#B42318;margin:0 0 10px;min-height:1em}
.sr-honey{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* =========================================================
   Footer
   ========================================================= */
.footer{
  padding:48px 0 40px;background:var(--canvas);
  border-top:1px solid var(--rule);
}
.footer .wrap{
  display:grid;grid-template-columns: 1fr auto;gap:30px;align-items:start;
}
.footer .mark{display:flex;align-items:center;gap:9px;margin-bottom:8px}
.footer .mark img{height:22px;width:auto;display:block}
.footer .mark .fallback{
  font: 700 17px/1 "Inter Tight", Inter, sans-serif;
  letter-spacing:-.015em;color:var(--ink);
}
.footer .foot-meta{font-size:13px;color:var(--muted);line-height:1.55}
.footer .foot-meta a{color:var(--ink-2)}
.footer .foot-meta a:hover{color:var(--accent)}
/* Footer social row — small icon-only links (LinkedIn for now; can grow).
   Sits below the foot-meta so the visual order is brand mark → tagline →
   contact/copyright → social. */
.footer .foot-social{
  display:flex;align-items:center;gap:8px;
  margin-top:6px;
}
.footer .foot-social a{
  display:inline-flex;align-items:center;justify-content:center;
  padding:4px;border-radius:4px;
  color:#0A66C2; /* LinkedIn brand blue */
  transition:color .15s ease, background-color .15s ease;
}
.footer .foot-social a:hover{
  color:#004182; /* darker LinkedIn blue on hover */
  background:rgba(10,102,194,.08);
}
.footer .foot-social svg{display:block;flex:none}
/* Grouped 2-column footer nav — small uppercase kicker above each
   column gives the link list an anchor without feeling corporate. The
   kicker type matches the label rhythm used on Built-For and the hero
   trust strip, so it reads as part of the same system. */
.footer .foot-links{
  display:grid;grid-template-columns:repeat(3, minmax(120px, auto));
  gap:24px 48px;
  font-size:14px;
}
.footer .foot-col{
  display:flex;flex-direction:column;gap:9px;
}
.footer .foot-col .foot-k{
  font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted-soft);margin-bottom:2px;
}
.footer .foot-col a{color:var(--ink-2)}
.footer .foot-col a:hover{color:var(--accent)}

/* oneNDA Adopter badge in Legal column — small, quiet credibility mark */
.footer .foot-onenda{
  display:inline-flex; align-items:center; gap:8px;
  margin-top:8px;
  color:var(--muted-soft);
  text-decoration:none;
  font-size:12px; font-weight:500; letter-spacing:.01em;
}
.footer .foot-onenda img{
  display:block; width:36px; height:auto; flex:0 0 auto;
}
.footer .foot-onenda:hover{color:var(--accent)}

/* US FinTech Awards 2026 Finalist badge in Legal column — mirrors the
   oneNDA badge treatment: small, quiet credibility mark, sitewide. */
.footer .foot-awards{
  display:inline-flex; align-items:center; gap:8px;
  margin-top:8px;
  color:var(--muted-soft);
  font-size:12px; font-weight:500; letter-spacing:.01em;
}
.footer .foot-awards .foot-awards-icons{display:inline-flex; gap:4px}
.footer .foot-awards .foot-awards-icons a{display:block; line-height:0}
.footer .foot-awards img{
  display:block; width:26px; height:26px; object-fit:cover; border-radius:5px; flex:0 0 auto;
}

/* =========================================================
   Jade accent consistency (inner-page labels)
   ---
   Mirrors the `.eyebrow::before` leading bar from the homepage so
   numbered labels across inner pages (pillars, phases, company
   profile roles) share the same quiet green marker. Restrained —
   a 10px × 1px segment, not a badge or chip.
   ========================================================= */
.pillar .label,
.phase .phase-label,
.role .role-label{
  position:relative;
  padding-left:18px;
  color:var(--ink-2);
}
.pillar .label::before,
.phase .phase-label::before,
.role .role-label::before{
  content:"";position:absolute;left:0;top:.72em;
  width:10px;height:1px;background:var(--accent);
  display:inline-block;
}
/* Hover state on nav mirrors the inline-link accent — kept
   deliberately subtle so it never competes with .current. */
.topbar:not(.on-hero) .nav a:hover{color:var(--accent)}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 960px){
  .wrap{padding:0 22px}
  .band{padding:72px 0}
  .page-hero{padding:22px 0 40px}
  .hero-card{padding:44px 28px 40px;border-radius:14px;min-height:260px}
  .hero-card h1.display{font-size:34px}
  .section-head{grid-template-columns:1fr;gap:14px;align-items:start}
  .editorial{grid-template-columns:1fr;gap:24px}
  .step{grid-template-columns:44px 1fr;gap:18px;padding:28px 0}
  .step .num{font-size:24px}
  .def-row{grid-template-columns:72px 1fr;gap:16px;padding:18px 0}
  .trust-row{grid-template-columns:1fr 1fr}
  .trust-cell{border-left:none;border-top:1px solid var(--rule);padding:14px 0}
  .trust-cell:first-child{padding-top:14px}
  .band.dark .trust-cell,
  .on-dark .trust-cell{border-top-color:var(--rule-on-dark)}
  .footer .wrap{grid-template-columns:1fr}
  .nav{display:none}
  .topbar .wrap{height:64px}
  .callout{padding:20px 0 60px}
  .callout-panel{padding:26px 24px;flex-direction:column;align-items:flex-start;gap:18px}
}
@media (max-width: 560px){
  .page-hero h1.display{font-size:36px}
  .grid-2{grid-template-columns:1fr}
  .callout .wrap{flex-direction:column;align-items:flex-start}
}

/* Self-serve signup CTA — sits next to "Request a demo" in the
   topbar. Outlined style so the visual hierarchy keeps "Request a
   demo" as primary while still presenting signup as a clear option. */
.cta-link-secondary{
  display:inline-flex;align-items:center;gap:8px;
  height:40px;padding:0 16px;border-radius:var(--r-sm);
  background:transparent;color:#26425D !important;
  font-size:13.5px;font-weight:600;letter-spacing:-.005em;
  border:1px solid #26425D;
  margin-right:8px;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.cta-link-secondary:hover{background:#26425D;color:#fff !important;border-color:#26425D}
.topbar.on-hero .cta-link-secondary{
  color:#fff !important;border-color:#fff;background:transparent;
}
.topbar.on-hero .cta-link-secondary:hover{background:#fff;color:var(--ink) !important;border-color:#fff}
.cta-link-secondary .chev{display:inline-flex}

/* The Sign up topbar trigger is a <button>, not an <a>, because it
   opens the pricing modal rather than navigating. Reset native button
   defaults so it matches .cta-link-secondary visually. */
button.cta-link-secondary{
  font-family:inherit;cursor:pointer;line-height:1;
}

/* Topbar "Log in" link — Brand Navy outlined button. Peer of Sign
   up (also outlined) so existing-customer and new-customer entry
   points read as a matched pair; "Request a demo" (filled) remains
   the dominant primary CTA. */
.nav-login-link{
  display:inline-flex;align-items:center;
  height:40px;padding:0 16px;
  border-radius:var(--r-sm);
  background:transparent;color:#26425D !important;
  font-size:13.5px;font-weight:600;letter-spacing:-.005em;
  border:1px solid #26425D;
  margin-right:8px;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.nav-login-link:hover{
  background:#26425D;color:#fff !important;border-color:#26425D;
  text-decoration:none;
}
.topbar.on-hero .nav-login-link{
  color:#fff !important;border-color:#fff;background:transparent;
}
.topbar.on-hero .nav-login-link:hover{background:#fff;color:var(--ink) !important;border-color:#fff}

/* =========================================================
   Pricing modal — opened by the Sign up topbar button and by
   any [data-open-pricing-modal] trigger. Same three-tier
   structure as the pricing page; clicking a tier CTA links
   to the signup wizard (Essentials / Growth) or contact form
   (Enterprise).
   ========================================================= */
.pricing-modal{
  position:fixed;inset:0;z-index:1000;
  display:flex;align-items:center;justify-content:center;
  padding:24px 16px;
}
.pricing-modal[aria-hidden="true"]{display:none}
.pricing-modal-backdrop{
  position:absolute;inset:0;background:rgba(15,23,42,.55);
  backdrop-filter:saturate(140%) blur(2px);
  -webkit-backdrop-filter:saturate(140%) blur(2px);
}
.pricing-modal-panel{
  position:relative;z-index:1;
  width:min(1100px,100%);max-height:calc(100vh - 48px);
  overflow-y:auto;
  background:#fff;color:var(--ink);
  border-radius:14px;border:1px solid var(--line);
  box-shadow:0 24px 60px rgba(15,23,42,.30);
  padding:24px 28px 28px;
}
.pricing-modal-head{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:16px;margin-bottom:18px;
}
.pricing-modal-eyebrow{
  font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);margin-bottom:4px;
}
.pricing-modal-title{
  font-size:22px;line-height:1.2;font-weight:650;letter-spacing:-.015em;
  color:var(--ink);margin:0;
}
.pricing-modal-close{
  background:transparent;border:1px solid var(--line);
  width:36px;height:36px;border-radius:10px;
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--muted);cursor:pointer;flex:0 0 auto;
}
.pricing-modal-close:hover{color:var(--ink);border-color:#cbd5e1}

.pricing-modal-grid{
  display:grid;gap:16px;
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.pricing-modal-card{
  display:flex;flex-direction:column;
  padding:18px 18px 16px;
  border:1px solid var(--line);border-radius:14px;
  background:linear-gradient(180deg,#fff,#fbfcfd);
  min-height:100%;
}
.pricing-modal-card-featured{
  border-color:#26425D;
  box-shadow:0 6px 18px rgba(38,66,93,.10);
}
.pricing-modal-tier-meta{
  font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);margin-bottom:10px;position:relative;padding-left:18px;
}
.pricing-modal-tier-meta::before{
  content:"";position:absolute;left:0;top:.52em;
  width:10px;height:1px;background:var(--accent);
}
.pricing-modal-headline{
  font-size:16px;line-height:1.3;font-weight:650;letter-spacing:-.005em;
  margin:0 0 10px;color:var(--ink);
}
.pricing-modal-price-tagline{
  display:inline-block;
  font-size:10.5px;font-weight:700;letter-spacing:.10em;text-transform:uppercase;
  color:var(--accent);
  background:rgba(38,66,93,.08);
  padding:3px 8px;border-radius:6px;
  margin-bottom:6px;
}
.pricing-modal-price{
  font-size:22px;font-weight:650;letter-spacing:-.01em;color:var(--ink);
  line-height:1.1;
  display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
}
.pricing-modal-price-original{
  font-size:13px;font-weight:500;color:var(--muted);
  text-decoration:line-through;
  letter-spacing:0;
}
.pricing-modal-price-sub{
  font-size:12px;color:var(--muted);line-height:1.45;margin-top:4px;
}
.pricing-modal-fit{
  margin-top:12px;padding:10px 12px;
  background:rgba(38,66,93,.04);border-radius:10px;
  font-size:12px;line-height:1.45;
}
.pricing-modal-fit .k{
  display:block;font-weight:650;color:var(--ink);margin-bottom:2px;
}
.pricing-modal-fit .v{color:var(--muted)}
.pricing-modal-banks-label{
  margin-top:14px;font-size:11.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted);
}
.pricing-modal-banks{
  list-style:none;padding:0;margin:6px 0 0;
  display:flex;flex-wrap:wrap;gap:4px 6px;
}
.pricing-modal-banks li{
  font-size:11.5px;font-weight:600;
  padding:4px 8px;border-radius:6px;
  background:#F1F2F4;color:var(--ink);
}
.pricing-modal-banks-note{
  font-size:11.5px;color:var(--muted);margin-top:6px;font-style:italic;
}
.pricing-modal-cta{
  margin-top:auto;align-self:flex-start;
}
/* Prevent body scroll while modal is open. */
body.pricing-modal-open{overflow:hidden}

@media (max-width: 880px) {
  .pricing-modal-grid{grid-template-columns:1fr;}
  .pricing-modal-panel{padding:20px 20px 22px;}
  .pricing-modal-title{font-size:19px;}
}