/* ============================================================
   SHARED SUBPAGE COMPONENTS
   Identical markup/CSS across Commercial, Connect, Personal & Property.
   Only --channel-accent (set via body class in tokens.css) changes look.
   ============================================================ */

/* --- NAVBAR ---
   Slimmed against brex.com and ramp.com, both measured live: Brex sits at
   a 60px bar, Ramp at a 44px row, both with a transparent/flat surface, no
   drop shadow, and 14px link text. Ours was 76px with a shadow and 0.92rem
   links. Now ~57px with a hairline rule - the shadow is what read as
   "thick", since it added visual weight below the bar on top of the
   height. The 44px touch floors stay in the <=900px block untouched. */
.tf-nav {
  width: 100%;
  background: var(--white);
  border-bottom: 1px solid var(--border);
  padding: 10px 0;
  position: relative;
  z-index: 40;
}
.tf-nav-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  max-width: var(--max-width-nav);
  margin: 0 auto;
  padding: 0 40px;
  gap: 32px;
}
.tf-nav-logo { display: flex; align-items: center; flex-shrink: 0; justify-self: start; }
.tf-nav-logo img { height: 20px; width: auto; }
.tf-nav-links { display: flex; align-items: center; gap: 20px; justify-self: stretch; flex-wrap: nowrap; min-width: 0; }
.tf-nav-item { position: relative; flex-shrink: 0; }
.tf-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--text-primary);
  cursor: default;
  padding: 8px 2px;
  min-height: 36px;
  box-sizing: border-box;
  white-space: nowrap;
  flex-shrink: 0;
}
.tf-nav-link[href]:not([href="#"]) { cursor: pointer; }
button.tf-nav-link {
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
}
.tf-nav-link.is-active { color: var(--navy); font-weight: 700; }

.tf-caret {
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  margin-top: 2px;
  transition: transform var(--transition-fast);
}
.tf-nav-item:hover .tf-caret { transform: rotate(180deg); }

.tf-mega-panel {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  z-index: 50;
  background: var(--white);
  box-shadow: var(--shadow-lg);
  border-radius: var(--radius-md);
  padding: 20px;
  min-width: 300px;
  border: 1px solid var(--border);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--transition-base), transform var(--transition-base), visibility var(--transition-base);
}
.tf-nav-item:hover .tf-mega-panel,
.tf-nav-item:focus-within .tf-mega-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.tf-mega-panel a {
  display: block;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast), transform var(--transition-fast);
}
.tf-mega-panel a:hover { background: var(--light-bg); transform: translateX(2px); }
.tf-mega-heading {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--navy);
  margin-bottom: 2px;
}
.tf-mega-sub { font-size: 0.78rem; color: var(--text-secondary); }

/* --- MEGA PANEL: full-width variant (Products) ---
   Solid white (Matt, Oct 6). It was frosted (70% white with a blur), which
   turned blue over the navy sections behind it. Text colors below hold WCAG
   AA contrast (4.5:1+ for body text) against the white. */
.tf-mega-panel.tf-mega-panel-wide {
  position: fixed;
  top: var(--nav-h, 80px);
  left: 0;
  min-width: 0;
  width: 100vw;
  max-width: 100vw;
  max-height: none;
  padding: 22px 0 18px;
  border: none;
  border-radius: 0;
  background: var(--white);
  box-shadow: var(--shadow-lg);
  transform: translateY(-6px);
}
.tf-nav-item:hover .tf-mega-panel.tf-mega-panel-wide,
.tf-nav-item:focus-within .tf-mega-panel.tf-mega-panel-wide {
  transform: translateY(0);
}
.tf-mega-wide-inner {
  max-width: var(--max-width-wide);
  margin: 0 auto;
  padding: 0 32px;
}
.tf-mega-panel-wide .tf-mega-wide-lead {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--navy);
  margin-bottom: 14px;
  padding: 0 0 14px;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  width: 100%;
}
.tf-mega-wide-lead .tf-mega-arrow { transition: transform var(--transition-fast); }
.tf-mega-wide-lead:hover .tf-mega-arrow { transform: translateX(4px); }
.tf-mega-wide-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
  align-items: start;
}
.tf-mega-wide-col { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.tf-mega-wide-group-label {
  display: block;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.68rem;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.tf-mega-wide-links { display: flex; flex-direction: column; gap: 2px; }
.tf-mega-panel-wide .tf-mega-wide-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 0.86rem;
  color: rgba(0,28,68,0.72);
  padding: 7px 0;
  border-radius: 0;
  transition: color var(--transition-fast);
}
.tf-mega-wide-link .tf-mega-arrow {
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}
.tf-mega-panel-wide .tf-mega-wide-link:hover { color: var(--navy); background: none; transform: none; }

/* Funding For channel headings, two lines. Sept 18 sprint: Matt asked for
   the channel name and its funding line stacked rather than run together
   on one wrapping line - "Your Business" above "Commercial Funding", the
   second line a bit smaller. Grid rather than a <br> so the arrow keeps
   its own cell beside the first line instead of trailing the second. */
.tf-mega-panel-wide .tf-mega-wide-link.tf-mega-wide-split {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-areas: "lead arrow" "sub sub";
  justify-content: start;
  align-items: center;
  gap: 0 6px;
}
.tf-mega-wide-split-lead { grid-area: lead; }
.tf-mega-wide-arrow-slot { grid-area: arrow; display: inline-flex; }
.tf-mega-wide-split-sub {
  grid-area: sub;
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(0,28,68,0.6);
  margin-top: 2px;
  transition: color var(--transition-fast);
}
.tf-mega-wide-split:hover .tf-mega-wide-split-sub { color: rgba(0,28,68,0.8); }

.tf-mega-wide-link:hover .tf-mega-arrow { opacity: 1; transform: translateX(0); }
.tf-mega-wide-foot {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
/* Channel accents (skyblue/gold/peach) don't meet WCAG contrast as text on
   white, so the foot CTA stays navy and leans on weight for emphasis. */
.tf-mega-wide-foot .tf-mega-wide-link { color: var(--navy); font-weight: 700; }
.tf-mega-wide-foot .tf-mega-wide-link:hover { color: var(--navy); }

.tf-mega-wide-grid.tf-mega-wide-grid-compact {
  grid-template-columns: repeat(2, minmax(200px, 240px));
  justify-content: start;
}
.tf-mega-wide-grid.tf-mega-wide-grid-3 {
  grid-template-columns: repeat(3, minmax(200px, 260px));
  justify-content: start;
}
.tf-mega-wide-link.is-active { color: var(--navy); }

/* Static (non-interactive) descriptive item - used where a channel has no
   dedicated page per feature, but the wide panel format still applies. */
.tf-mega-wide-static-item { padding: 7px 0; }
.tf-mega-wide-static-heading {
  display: block;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.86rem;
  color: var(--navy);
  margin-bottom: 2px;
}
.tf-mega-wide-static-sub { font-size: 0.78rem; color: var(--text-secondary); }
.tf-mega-wide-sub { font-size: 0.82rem; color: var(--text-secondary); margin-top: 2px; }

@media (max-width: 1240px) {
  .tf-nav-inner { gap: 20px; }
  .tf-nav-logo img { height: 20px; }
  .tf-nav-links { gap: 16px; }
  .tf-nav-link { font-size: 0.88rem; }
  .tf-nav-phone { display: none; }
}
@media (max-width: 1000px) {
  .tf-nav-inner { gap: 12px; padding: 0 20px; }
  .tf-nav-logo img { height: 18px; }
  .tf-nav-links { gap: 10px; }
  .tf-nav-link { font-size: 0.8rem; }
  .tf-nav-cta-group { gap: 10px; }
  .tf-nav-cta.btn { padding: 10px 16px; font-size: 0.78rem; }
}
@media (max-width: 1080px) {
  .tf-mega-wide-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .tf-mega-wide-grid,
  .tf-mega-wide-grid.tf-mega-wide-grid-compact,
  .tf-mega-wide-grid.tf-mega-wide-grid-3 { grid-template-columns: 1fr; gap: 24px; }
  .tf-mega-wide-inner { padding: 0 20px; }
}

/* --- HEADER WRAPPER (Phase 7 Part A): a shared sticky wrapper around the
   single universal nav row, identical on every template. --- */
.tf-header { position: sticky; top: 0; z-index: 60; background: var(--white); }
.tf-nav-cta-group { display: flex; align-items: center; gap: 18px; justify-self: end; flex-shrink: 0; }
.tf-nav-phone {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--navy);
  white-space: nowrap;
}
.tf-nav-contact-link {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.82rem;
  color: var(--navy);
  white-space: nowrap;
}
.tf-nav-cta.btn { padding: 9px 18px; font-size: 0.82rem; }
@media (max-width: 1240px) {
  .tf-nav-contact-link { display: none; }
}
@media (max-width: 900px) {
  .tf-nav-cta-group { gap: 12px; }
  .tf-nav-phone { display: none; }
  .tf-nav-cta { padding: 9px 16px !important; font-size: 0.82rem !important; }
}

/* --- Sitewide primary nav (Phase 7 Part A, completed): the universal row
   is identical on every template, including the homepage - a flat, left-
   packed link list (How Cashper Works, Get Funded, Compare Tools, About),
   no phone number. The channel-pill variant and the channel toggle that
   preceded this are both gone; channel access lives in the Get Funded
   mega-menu and the footer. --- */
@media (max-width:900px){
  .tf-nav-links{flex-direction:column;align-items:stretch}
}

/* --- FOOTER --- */
/* Footer text-colour floor: 0.5 white on --footer-bg measures 5.24:1, clearing WCAG AA's
   4.5:1 for normal text. Anything at 0.4 (3.76:1) fails at these font sizes, so 0.5 is the
   minimum for any text here. The one deliberate exception is .tf-footer-inactive (0.3,
   2.63:1): those are unavailable nav items, exempt under WCAG 1.4.3's inactive-component
   carve-out, and raising them would erase the distinction from live links. Low-alpha values
   on borders/backgrounds below (0.08-0.12) are decorative and out of 1.4.3's scope. */
.tf-footer { background: var(--footer-bg); padding: 64px 0 0; color: rgba(255,255,255,0.7); }
.tf-footer-top {
  display: grid;
  grid-template-columns: 1.4fr 2fr;
  gap: 40px;
  margin-bottom: 48px;
}
.tf-footer-blurb { font-size: 0.85rem; line-height: 1.65; margin-top: 16px; max-width: 320px; color: rgba(255,255,255,0.55); }
.tf-footer-contact { margin-top: 20px; display: flex; flex-direction: column; gap: 8px; font-size: 0.825rem; color: rgba(255,255,255,0.55); }
/* The explicit `color` matters: base.css sets a global `a { color: var(--navy) }`,
   which outranks the light grey inherited from .tf-footer-contact and rendered the
   phone and email links navy-on-navy - a 1.11:1 contrast ratio, effectively
   invisible on every page that loads base.css. Matching the parent's 0.55 white
   gives 6.12:1, comfortably past WCAG AA. Every other link rule in this footer
   already sets its own colour; this one was the only omission. */
.tf-footer-contact a { display: flex; align-items: center; min-height: 44px; color: rgba(255,255,255,0.55); }
.tf-footer-badges { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 20px; }
.tf-footer-badge {
  padding: 5px 10px; border: 1px solid rgba(255,255,255,0.12); border-radius: 5px;
  font-size: 0.7rem; font-weight: 500; color: rgba(255,255,255,0.5); letter-spacing: 0.2px;
}
.tf-footer-cols { display: grid; grid-template-columns: repeat(3,1fr); gap: 32px; }
.tf-footer-col-heading {
  font-family: var(--font-heading); font-weight: 600; font-size: 0.85rem;
  color: #fff; margin-bottom: 16px; letter-spacing: 0.2px;
}
.tf-footer-col a { display: flex; align-items: center; min-height: 44px; padding: 4px 0; font-size: 0.82rem; color: rgba(255,255,255,0.5); transition: color var(--transition-fast); }
.tf-footer-col span.tf-footer-inactive { display: flex; align-items: center; min-height: 44px; padding: 4px 0; font-size: 0.82rem; color: rgba(255,255,255,0.3); cursor: default; }
.tf-footer-col a:hover { color: #fff; }
/* The current page's own footer link. aria-current="page" is the only marker in the markup
   (no is-active class, no inline style), so the visual state can't drift from the semantic one. */
.tf-footer-col a[aria-current="page"] { color: #fff; }
.tf-footer-legal { border-top: 1px solid rgba(255,255,255,0.1); padding: 16px 0; margin-top: 32px; }
.tf-footer-legal p { font-size: 0.8rem; color: rgba(255,255,255,0.5); line-height: 1.5; text-align: center; margin: 0; }
.tf-footer-legal p + p { margin-top: 8px; }
.tf-footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 24px 0;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 16px;
}
.tf-footer-bottom span { font-size: 0.8rem; color: rgba(255,255,255,0.5); }
.tf-footer-bottom-links { display: flex; gap: 24px; }
.tf-footer-bottom-links a { font-size: 0.8rem; color: rgba(255,255,255,0.5); }
.tf-footer-bottom-links a:hover { color: rgba(255,255,255,0.7); }

.lender-logo{max-width:120px;height:36px;object-fit:contain;width:100%;filter:grayscale(1);opacity:0.55}
.lender-strip{display:grid;grid-template-columns:repeat(6,1fr);gap:28px 40px;align-items:center}
.process-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;position:relative}

/* --- MOBILE NAV TOGGLE (injected by main.js) --- */
.tf-nav-toggle-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  cursor: pointer;
  padding: 0;
}
.tf-nav-toggle-btn .tf-burger { position: relative; display: block; width: 20px; height: 2px; background: var(--navy); transition: background 180ms var(--ease); }
.tf-nav-toggle-btn .tf-burger::before,
.tf-nav-toggle-btn .tf-burger::after { content: ''; position: absolute; left: 0; width: 20px; height: 2px; background: var(--navy); transition: transform 180ms var(--ease), top 180ms var(--ease); }
.tf-nav-toggle-btn .tf-burger::before { top: -6px; }
.tf-nav-toggle-btn .tf-burger::after { top: 6px; }
.tf-nav-toggle-btn[aria-expanded="true"] .tf-burger { background: transparent; }
.tf-nav-toggle-btn[aria-expanded="true"] .tf-burger::before { top: 0; transform: rotate(45deg); }
.tf-nav-toggle-btn[aria-expanded="true"] .tf-burger::after { top: 0; transform: rotate(-45deg); }

@media (max-width: 900px) {
  .tf-nav-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
  }
  .tf-nav-logo { order: 1; }
  .tf-nav-logo img { height: 20px; }
  .tf-nav-inner > .btn { order: 2; flex-shrink: 0; }
  .tf-nav-cta-group { order: 2; flex-shrink: 0; }
  .tf-nav-toggle-btn { order: 3; display: flex; }
  .tf-nav-links {
    order: 4;
    display: none;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 0;
    border-top: 1px solid var(--border);
    padding-top: 8px;
  }
  .tf-nav.is-open .tf-nav-links { display: flex; }
  .tf-nav-item { width: 100%; }
  .tf-nav-link { width: 100%; justify-content: space-between; padding: 14px 4px; }
  .tf-nav-item:hover .tf-caret { transform: none; }
  .tf-nav-item.is-open .tf-caret { transform: rotate(180deg); }
  .tf-mega-panel,
  .tf-mega-panel-compare {
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    transition: none !important;
    display: none;
    box-shadow: none;
    border: none;
    border-radius: 0;
    padding: 0 0 12px 12px !important;
    margin: 0;
    min-width: 0 !important;
    width: 100% !important;
    max-height: none !important;
    white-space: normal !important;
  }
  .tf-nav-item.is-open .tf-mega-panel,
  .tf-nav-item.is-open .tf-mega-panel-compare { display: block; }
  .tf-footer-top { grid-template-columns: 1fr; }
  .tf-footer-cols { grid-template-columns: 1fr 1fr; }
  .lender-strip { grid-template-columns: repeat(2,1fr); }
  .process-grid { grid-template-columns: 1fr; }
  .tf-pathways-grid { grid-template-columns: 1fr !important; }
  .tf-mobile-grid { grid-template-columns: 1fr !important; }
}

/* The early-collapse rule that used to live here (900-1500px, toggle-
   bearing pages only) is obsolete now that the channel toggle sits in its
   own .tf-nav-secondary row (see above) instead of sharing .tf-nav-inner
   with the link row - every page now uses the single standard 900px
   breakpoint below. */

/* --- Phase 7 Part L: sitewide sticky mobile CTA bar. Reserving the body
   padding unconditionally inside the same breakpoint (rather than only
   after JS injects the bar) avoids any layout shift or content hidden
   behind it, regardless of script timing. --- */
@media (max-width: 900px) {
  body { padding-bottom: 76px; }
  .tf-sticky-cta {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    display: flex; justify-content: center;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: var(--white);
    border-top: 1px solid var(--border);
    box-shadow: 0 -4px 16px rgba(0,28,68,0.08);
  }
  .tf-sticky-cta a { width: 100%; text-align: center; justify-content: center; }
}
@media (min-width: 901px) {
  .tf-sticky-cta { display: none; }
}

/* --- Cookie consent (Oct 1, Needs Matt #35). A small floating card bottom left on desktop; up to
   900px a slim one-line bar docked on top of the sticky CTA (Oct 23: the card covered half of
   /get/tv/'s form until answered). Accept and Decline carry equal weight, and neither is styled by
   the channel accent, so it reads the same on every page. main.js builds it. --- */
.tf-consent {
  position: fixed; z-index: 150;
  left: 24px; bottom: 24px;
  width: min(380px, calc(100vw - 48px));
  padding: 20px 22px;
  background: var(--white);
  border: 1px solid var(--border-neutral);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg-soft);
  animation: tf-consent-in 320ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.tf-consent[hidden] { display: none; }
.tf-consent-title {
  font-family: var(--font-heading); font-weight: 700; font-size: 0.98rem;
  color: var(--navy); margin: 0 0 6px;
}
.tf-consent-text { font-size: 0.86rem; line-height: 1.55; color: var(--text-secondary); margin: 0; }
.tf-consent-text a { color: var(--navy); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.tf-consent-status { font-size: 0.82rem; font-weight: 600; color: var(--navy); margin: 10px 0 0; }
.tf-consent-status:empty { display: none; }
.tf-consent-actions { display: flex; gap: 10px; margin-top: 16px; }
.tf-consent-actions .btn {
  flex: 1; min-height: 44px; padding: 10px 16px; font-size: 0.9rem;
  border: 1.5px solid var(--navy); box-shadow: none;
}
.tf-consent-accept { background: var(--navy); color: var(--white); }
.tf-consent-accept:hover { background: var(--navy-deep); border-color: var(--navy-deep); }
.tf-consent-decline { background: var(--white); color: var(--navy); }
.tf-consent-decline:hover { background: var(--light-bg); }
.tf-consent-short { display: none; }
@keyframes tf-consent-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (max-width: 900px) {
  .tf-consent {
    left: 0; right: 0; bottom: 0; width: auto;
    display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px;
    padding: 6px 12px calc(6px + env(safe-area-inset-bottom));
    border: 0; border-top: 1px solid var(--border-neutral); border-radius: 0;
    box-shadow: 0 -4px 16px rgba(0,28,68,0.08);
  }
  /* The sticky CTA is 69px tall: overlap its top border with the bar's own. */
  body.tf-has-sticky-cta .tf-consent {
    bottom: calc(68px + env(safe-area-inset-bottom));
    padding-bottom: 6px; border-bottom: 1px solid var(--border);
  }
  /* Keep the page's last lines scrollable clear of the bar until it's answered. */
  body:has(.tf-consent:not([hidden])) { padding-bottom: calc(76px + 58px); }
  .tf-consent-title, .tf-consent-text { display: none; }
  .tf-consent-short {
    display: flex; flex-wrap: wrap; align-items: center; column-gap: 6px;
    flex: 1 1 0; min-width: 0; margin: 0;
    font-size: 0.82rem; font-weight: 600; line-height: 1.3; color: var(--navy);
  }
  .tf-consent-short a {
    display: inline-flex; align-items: center; min-height: 44px;
    color: var(--navy); text-decoration: underline; text-underline-offset: 2px;
  }
  /* Only shown when reopened from Cookie settings: a line of its own above the bar's row. */
  .tf-consent-status { order: -1; flex-basis: 100%; margin: 4px 0 0; }
  .tf-consent-actions { margin-top: 0; gap: 8px; }
  /* One line from 360px wide; narrower, the text wraps beside the buttons. */
  .tf-consent-actions .btn { flex: none; padding: 0 12px; font-size: 0.82rem; }
}
@media (prefers-reduced-motion: reduce) { .tf-consent { animation: none; } }
/* "Cookie settings" in the footer's Legal column, styled as its links. */
.tf-footer-cookie-btn {
  display: flex; align-items: center; min-height: 44px; padding: 4px 0;
  background: none; border: 0; cursor: pointer; text-align: left;
  font-family: inherit; font-size: 0.82rem; color: rgba(255,255,255,0.5);
  transition: color var(--transition-fast);
}
.tf-footer-cookie-btn:hover { color: #fff; }

/* --- Phase 7 Part H: "Not sure yet?" router modal --- */
body.tf-no-scroll { overflow: hidden; }
.tf-router-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,28,68,0.45);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  opacity: 0; visibility: hidden;
  transition: opacity var(--transition-base), visibility var(--transition-base);
}
.tf-router-overlay.is-open { opacity: 1; visibility: visible; }
.tf-router-modal {
  position: relative;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  max-width: 560px;
  width: 100%;
  padding: 40px;
  box-sizing: border-box;
  transform: translateY(12px);
  transition: transform var(--transition-base);
}
.tf-router-overlay.is-open .tf-router-modal { transform: translateY(0); }
.tf-router-close {
  position: absolute; top: 16px; right: 16px;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border: none; background: none; cursor: pointer;
  font-size: 1.4rem; line-height: 1; color: var(--text-secondary);
}
.tf-router-title { font-family: var(--font-heading); font-weight: 700; font-size: 1.5rem; color: var(--navy); margin: 8px 0 8px; }
.tf-router-sub { font-size: 0.92rem; color: var(--text-secondary); margin: 0 0 28px; line-height: 1.5; }
.tf-router-options { display: flex; flex-direction: column; gap: 10px; }
.tf-router-option {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  width: 100%; text-align: left;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--white);
  cursor: pointer;
  font-family: inherit;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.tf-router-option:hover, .tf-router-option:focus-visible { border-color: var(--navy); background: var(--light-bg); }
.tf-router-option-label {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  font-family: var(--font-heading); font-weight: 700; font-size: 1rem; color: var(--navy);
}
.tf-router-option-sub { font-size: 0.82rem; color: var(--text-secondary); }
@media (max-width: 560px) {
  .tf-router-modal { padding: 28px 24px; }
}

/* ============================================================================
   Connect partner-signup form (Prompt 6.15)
   Sits inside the closing band on Connect's hub, For vendors and Become a
   Partner. The band is white since Oct 6 (it was navy), so the fields match
   Contact's form; focus uses the text-safe gold, which holds 3:1 on white.
   ============================================================================ */
.tf-cform { max-width: 560px; margin: 0 auto; text-align: left; }
.tf-cform-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tf-cform-field {
  width: 100%; box-sizing: border-box;
  padding: 13px 14px; margin-bottom: 12px;
  font-family: var(--font-body); font-size: 0.92rem;
  color: var(--navy); background: var(--white);
  border: 1px solid rgba(0,28,68,0.15); border-radius: var(--radius-sm, 6px);
  min-height: 44px;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.tf-cform-field::placeholder { color: var(--text-secondary); }
.tf-cform-field:focus {
  outline: none; border-color: var(--gold-text);
  box-shadow: 0 0 0 3px rgba(251,183,102,0.25);
}
.tf-cform-field:focus-visible { outline: 2px solid var(--gold-text); outline-offset: 1px; }
textarea.tf-cform-field { resize: vertical; min-height: 84px; }
.tf-cform-hint { font-size: 0.78rem; color: var(--text-secondary); margin: -6px 0 12px; }
.tf-cform-status { font-size: 0.82rem; color: var(--text-secondary); margin: 12px 0 0; min-height: 1.2em; }

/* ABN lookup results - rendered by tf-abn-lookup.js */
.tf-abn-results { display: flex; flex-direction: column; gap: 4px; margin: -6px 0 12px; }
.tf-abn-hit {
  text-align: left; width: 100%;
  padding: 10px 12px; min-height: 44px;
  font-family: var(--font-body); font-size: 0.82rem;
  color: var(--navy); background: var(--bg-soft);
  border: 1px solid var(--border-neutral); border-radius: var(--radius-sm, 6px);
  cursor: pointer;
  transition: border-color var(--transition-fast);
}
.tf-abn-hit:hover { border-color: var(--gold-text); }
.tf-abn-hit:focus-visible { border-color: var(--gold-text); outline: 2px solid var(--gold-text); outline-offset: 1px; }

@media (max-width: 640px) {
  .tf-cform-row { grid-template-columns: 1fr; gap: 0; }
}

/* ============================================================
   PHASE 9 PART 1 - header touch targets at mobile widths
   The CTA resize brief is explicit that the 44x44px floor holds
   after shrinking. These three header controls sat under it
   (CTA 39px tall, burger 40x40, logo link 20px tall), so the
   floor is set here rather than left to the shrunken padding.
   Font sizes are untouched - height comes from min-height, so
   the visual weight stays as tuned above.
   ============================================================ */
@media (max-width: 900px) {
  .tf-nav-cta.btn { min-height: 44px; }
  .tf-nav-toggle-btn { width: 44px; height: 44px; }
  .tf-nav-logo { min-height: 44px; }
}

/* Below 620px the header cannot fit logo + CTA + burger on one row, so the
   burger wrapped onto a second row and the header stood 98px tall. The
   sticky bottom bar already carries the same "Get my Compare Report" CTA
   within thumb reach, so the header's copy of it is redundant at that
   width - hidden only when .tf-has-sticky-cta confirms the bar rendered
   (main.js), which keeps a CTA in the header when JS is off. */
@media (max-width: 620px) {
  body.tf-has-sticky-cta .tf-nav-cta { display: none; }
}

/* Privacy collection notice beside every lead form (APP 5; documentation.md Phase 10 Part 4). */
.tf-form-notice { font-size: 0.75rem; line-height: 1.5; color: var(--text-secondary); margin: 10px 0 0; }
.tf-form-notice a { color: inherit; }

/* Google rating proof point, linked to the verified Google Maps listing (5.0 from 50 reviews,
   checked Sept 26 2026). Keeps the surrounding trust-bar styling; underline on hover/focus only. */
.tf-rating-link { color: inherit; text-decoration: none; }
.tf-rating-link:hover, .tf-rating-link:focus-visible { text-decoration: underline; text-underline-offset: 2px; }

/* Hero video (Payload's hero media slot: the homepage, Phase 11, and the three channel hubs, 11C).
   It fills the frame the animation would have; the poster stands in for visitors who prefer reduced
   motion, and main.js never starts the video for them. */
.hero-visual-media .hero-video,
.hero-visual-media .hero-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:var(--radius-xl)}
.hero-visual-media .hero-poster{display:none}
@media (prefers-reduced-motion: reduce){
  .hero-visual-media .hero-video{display:none}
  .hero-visual-media .hero-poster{display:block}
}

/* ---- Tiles (Oct 8) ----------------------------------------------------------------------------
   The homepage and the six Connect pages take the product pages' design principles (Matt, Oct 7:
   the Revolut direction; Jana's defaults, Oct 8): below the hero, one light background; white
   rounded tiles with a soft grey gradient and no borders or shadows; FAQ items as white rounded
   tiles. Heroes, dark bands and the white closing band (Matt, Oct 6) stay as they are. The pages'
   sections carry inline backgrounds, so this layer overrides them rather than rewriting the markup.
   Opt in with <body class="tf-tiles">. */
body.tf-tiles section[style*="background:#fff"]:not([class*="hero"]):not([style*="border-top"]),
body.tf-tiles section[style*="background:var(--white)"]:not([class*="hero"]):not([style*="border-top"]),
body.tf-tiles section[style*="background:var(--bg-soft)"]:not([class*="hero"]) {
  background: var(--tile-page-bg) !important;
}
body.tf-tiles .card,
body.tf-tiles .bap-value-card,
body.tf-tiles .hiw-mini-card,
body.tf-tiles .step-detail {
  background: #fff;
  border-color: transparent;
  box-shadow: none;
  border-radius: var(--radius-card);
}
/* The homepage's three steps and Connect's four reasons become tiles too, as on the product pages. */
body.tf-tiles .tf-mobile-grid > div:has(> .step-num),
body.tf-tiles div:has(> .value-icon),
body.tf-tiles div:has(> .fv-value-num) {
  background: #fff;
  border-radius: var(--radius-card);
  padding: 28px !important;
}
body.tf-tiles .faq-item,
body.tf-tiles .fc-faq-item,
body.tf-tiles .fv-faq-item {
  background: #fff;
  border-color: transparent;
  border-radius: 16px;
  margin-bottom: 10px;
}
/* The homepage's and Connect hub's questions had no side padding (they were ruled rows). */
body.tf-tiles .faq-item > .faq-btn,
body.tf-tiles .faq-item > [data-accordion-panel],
body.tf-tiles .faq-item > .faq-panel {
  padding-left: 24px !important;
  padding-right: 24px !important;
}
body.tf-tiles .faq-item > .faq-btn { border-bottom-color: transparent !important; }
body.tf-tiles .section-title { letter-spacing: -0.02em; }