/* ===========================================================================
   Terence Financial — shared stylesheet
   Light fintech theme with dark navy hero/CTA bands. Page layout lives inline
   in each page (as exported from design); this file holds the self-hosted
   fonts, design tokens, base reset, the scroll-reveal states, and the reusable
   hover helpers that replace the design's inline `style-hover` attributes.
   =========================================================================== */

/* --------------------------------------------------------- self-hosted fonts */
@font-face{
  font-family:'IBM Plex Mono'; font-style:normal; font-weight:400; font-display:swap;
  src:url('assets/fonts/ibm-plex-mono-400.woff2') format('woff2');
}
@font-face{
  font-family:'IBM Plex Mono'; font-style:normal; font-weight:500; font-display:swap;
  src:url('assets/fonts/ibm-plex-mono-500.woff2') format('woff2');
}
@font-face{
  font-family:'IBM Plex Mono'; font-style:normal; font-weight:600; font-display:swap;
  src:url('assets/fonts/ibm-plex-mono-600.woff2') format('woff2');
}

/* ----------------------------------------------------------------- tokens */
:root{
  --bg:#fbfcfe;
  --ink:#0b1020;
  --body:#46506a;
  --muted:#5b6478;
  --blue:#2563EB;
  --blue-deep:#1d4ed8;
  --blue-light:#5b8cff;
  --teal:#5EEAD4;
  --navy:#070b1c;
  --maxw:1240px;
  --gut:88px;                       /* content side gutter (responsive) */
  --foot-cols:1.5fr repeat(3,1fr);  /* footer column template (responsive) */
}

/* ------------------------------------------------------------- base reset */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
a{ color:inherit; text-decoration:none; }
table{ border-collapse:collapse; width:100%; }
img,canvas{ display:block; max-width:100%; }
[hidden]{ display:none !important; }   /* beat inline display: e.g. the contact form's display:flex */
::selection{ background:rgba(37,99,235,.22); }

/* give in-page anchor targets a little breathing room */
section[id]{ scroll-margin-top:24px; }

/* keyboard focus — visible ring without disturbing mouse users */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--blue);
  outline-offset:3px;
  border-radius:4px;
}

/* ------------------------------------------------------- scroll-in reveal */
/* Elements carry data-reveal="<seconds>"; app.js sets the per-element delay and
   adds .is-visible when they enter the viewport. Hidden only when JS is on. */
html.js [data-reveal]{ opacity:0; transform:translateY(16px); transition:opacity .7s ease, transform .7s ease; }
html.js [data-reveal].is-visible{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  html.js [data-reveal]{ opacity:1; transform:none; transition:none; }
}

/* pulsing dot on the hero eyebrow */
@keyframes tf-pulse{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.35; transform:scale(.7); } }
@media (prefers-reduced-motion: reduce){
  [style*="tf-pulse"]{ animation:none !important; }
}

/* =========================================================== hover helpers
   Replace the design's `style-hover="…"` attributes. Where the hovered
   property is also set inline on the element (inline always wins the cascade),
   the rule uses !important to take effect on :hover; where it isn't, a plain
   rule is enough. A short transition smooths every state change. */

/* link tint to white (nav + footer links; base colour is inherited) */
.h-white{ transition:color .18s ease; }
.h-white:hover{ color:#fff; }

/* primary blue button — base background:#2563EB set inline */
.h-blue{ transition:background .18s ease; }
.h-blue:hover{ background:var(--blue-deep) !important; }

/* ghost button on dark — no inline background */
.h-ghost{ transition:background .18s ease; }
.h-ghost:hover{ background:rgba(255,255,255,.08); }

/* outline/soft button on light — no inline background */
.h-soft{ transition:background .18s ease; }
.h-soft:hover{ background:#f3f6fc; }

/* dark button (Explore security) — base background:#0b1020 set inline */
.h-dark{ transition:background .18s ease; }
.h-dark:hover{ background:#1a2540 !important; }

/* product cell — base background:#fff set inline */
.h-cell{ transition:background .2s ease; }
.h-cell:hover{ background:#f6f9ff !important; }

/* blue text link (See full pricing) — base color:#2563EB set inline */
.h-bluelink{ transition:color .18s ease; }
.h-bluelink:hover{ color:var(--blue-deep) !important; }

/* lifting price card — base border-color set inline */
.h-card{ transition:border-color .25s ease, transform .25s ease, box-shadow .25s ease; }
.h-card:hover{
  border-color:rgba(37,99,235,.4) !important;
  transform:translateY(-3px);
  box-shadow:0 22px 46px -28px rgba(11,16,32,.4);
}

/* ===================================================== legal / prose pages */
.legal{ max-width:820px; }
.legal .lead{ font-size:16px; line-height:1.7; color:#46506a; margin:0 0 30px; }
.legal h2{ font-weight:700; font-size:clamp(19px,2.3vw,24px); letter-spacing:-.02em; color:#0b1020; margin:48px 0 14px; }
.legal h2:first-of-type{ margin-top:0; }
.legal h3{ font-weight:600; font-size:16px; color:#0b1020; margin:28px 0 8px; }
.legal p{ font-size:15px; line-height:1.75; color:#46506a; margin:0 0 14px; }
.legal ul, .legal ol{ margin:0 0 16px; padding-left:22px; }
.legal li{ font-size:15px; line-height:1.7; color:#46506a; margin-bottom:9px; }
.legal a{ color:#2563EB; text-decoration:none; border-bottom:1px solid rgba(37,99,235,.3); }
.legal a:hover{ color:#1d4ed8; border-color:rgba(29,78,216,.6); }
.legal strong{ color:#0b1020; font-weight:600; }
.legal .cl{ font:600 13px/1 'IBM Plex Mono',monospace; color:#2563EB; margin-right:10px; }
.legal .sub{ padding-left:28px; }
.legal hr{ border:none; border-top:1px solid rgba(11,16,32,.1); margin:42px 0; }

/* ========================================================= contact form */
.cf-field{ display:flex; flex-direction:column; gap:7px; margin-bottom:16px; }
.cf-label{ font:600 12px/1 'IBM Plex Mono',monospace; letter-spacing:.1em; text-transform:uppercase; color:#5b6478; }
.cf-input, .cf-textarea{
  font-family:inherit; font-size:15px; color:#0b1020; background:#fff;
  border:1px solid rgba(11,16,32,.18); border-radius:10px; padding:12px 14px; width:100%;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.cf-input::placeholder, .cf-textarea::placeholder{ color:#9aa3b8; }
.cf-textarea{ min-height:132px; resize:vertical; }
.cf-input:focus, .cf-textarea:focus{ outline:none; border-color:#2563EB; box-shadow:0 0 0 3px rgba(37,99,235,.14); }
.cf-input[aria-invalid="true"], .cf-textarea[aria-invalid="true"]{ border-color:#e5484d; }
.cf-err{ font-size:12.5px; color:#e5484d; }
.cf-err[hidden]{ display:none; }

/* ======================================================== responsive
   Inline styles can't be media-queried directly, so the gutter and footer
   column count are driven by CSS variables that we override here; a couple of
   hook classes (.nav-mid, .table-wrap) handle the nav reflow and table scroll. */
@media (max-width:1000px){ :root{ --gut:56px; } }
@media (max-width:820px){ :root{ --foot-cols:repeat(2,1fr); } }
@media (max-width:600px){ :root{ --gut:34px; --foot-cols:1fr; } }

/* nav: drop the links onto their own centred row once the bar gets tight */
@media (max-width:640px){
  .nav-mid{ order:3; width:100%; justify-content:center; gap:8px 18px !important; margin-top:8px; }
}

/* pricing comparison table scrolls horizontally instead of overflowing */
@media (max-width:640px){
  .table-wrap{ overflow-x:auto !important; -webkit-overflow-scrolling:touch; }
  .table-wrap table{ min-width:520px; }
}

/* rails strip — wraps normally on desktop, runs as a marquee on mobile */
.rails-track{ display:flex; }
.rails-set{ display:flex; align-items:center; gap:34px; flex-wrap:wrap; }
.rails-dup{ display:none; }
@keyframes rails-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (max-width:640px){
  .rails{ width:100%; overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); }
  .rails-track{ width:max-content; flex-wrap:nowrap; animation:rails-scroll 20s linear infinite; }
  .rails-set{ flex-wrap:nowrap; padding-right:34px; }
  .rails-dup{ display:flex; }
}
@media (prefers-reduced-motion: reduce){
  .rails-track{ animation:none !important; width:auto !important; flex-wrap:wrap !important; }
  .rails-set{ flex-wrap:wrap !important; padding-right:0 !important; }
  .rails-dup{ display:none !important; }
}