:root {
  --tfn-ink: #14201c;
  --tfn-ink-2: #24332d;
  --tfn-paper: #f4f7f3;
  --tfn-white: #ffffff;
  --tfn-line: #cbd6cf;
  --tfn-muted: #66756e;
  --tfn-emerald: #087b59;
  --tfn-coral: #ef5b4f;
  --tfn-saffron: #e8a72e;
  --tfn-violet: #6657a8;
  --tfn-shadow: 0 14px 40px rgba(20, 32, 28, .10);
}

.tfn-page,
.tfn-page * {
  letter-spacing: 0 !important;
  box-sizing: border-box;
}

body.tfn-page {
  margin: 0;
  color: var(--tfn-ink);
  background: var(--tfn-paper) !important;
  background-image: none !important;
  font-family: Inter, "Segoe UI", Arial, sans-serif;
}

body.tfn-page::before,
body.tfn-page::after {
  display: none !important;
}

.tfn-page h1,
.tfn-page h2,
.tfn-page .page-title,
.tfn-page .title,
.tfn-page .login-title {
  color: var(--tfn-ink) !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-weight: 700 !important;
}

.tfn-page a { color: var(--tfn-emerald); }
.tfn-page button,
.tfn-page input,
.tfn-page select,
.tfn-page textarea { font: inherit; }

.tfn-page .btn,
.tfn-page button.btn,
.tfn-page .ghost {
  min-height: 38px;
  border-radius: 3px !important;
  box-shadow: none !important;
  font-weight: 750 !important;
  transform: none !important;
}

.tfn-page .btn-primary,
.tfn-page .btn.primary,
.tfn-page button[type="submit"] {
  color: #fff !important;
  background: var(--tfn-emerald) !important;
  border: 1px solid var(--tfn-emerald) !important;
}

.tfn-page .btn-primary:hover,
.tfn-page .btn.primary:hover,
.tfn-page button[type="submit"]:hover { background: #056748 !important; }

.tfn-page .btn-secondary,
.tfn-page .btn.secondary,
.tfn-page .ghost {
  color: var(--tfn-ink) !important;
  background: var(--tfn-white) !important;
  border: 1px solid var(--tfn-line) !important;
}

.tfn-page .btn-danger,
.tfn-page .btn.danger {
  color: #a5322b !important;
  background: #fff4f2 !important;
  border: 1px solid #efb7b1 !important;
}

.tfn-page .badge,
.tfn-page .pill {
  border-radius: 2px !important;
  box-shadow: none !important;
  text-transform: uppercase;
  font-size: 11px !important;
  font-weight: 800 !important;
}

.tfn-page .badge-green,
.tfn-page .pill.good { color: #075e44 !important; background: #dff4ea !important; border: 1px solid #acd9c5 !important; }
.tfn-page .badge-blue { color: #4d428c !important; background: #eeebff !important; border: 1px solid #cec8ef !important; }
.tfn-page .badge-yellow,
.tfn-page .pill.warn { color: #765109 !important; background: #fff1cf !important; border: 1px solid #e9cd86 !important; }
.tfn-page .badge-red,
.tfn-page .pill.bad { color: #9b3029 !important; background: #fff0ee !important; border: 1px solid #efb4ae !important; }
.tfn-page .badge-gray { color: #55625c !important; background: #edf1ee !important; border: 1px solid #d0d8d3 !important; }
.tfn-page .msg-info { color: #365448 !important; background: #edf5f0 !important; border: 1px solid #bed6c8 !important; border-left: 4px solid var(--tfn-emerald) !important; }

.tfn-page .form-control,
.tfn-page input,
.tfn-page select,
.tfn-page textarea {
  color: var(--tfn-ink) !important;
  background: #fff !important;
  border: 1px solid var(--tfn-line) !important;
  border-radius: 3px !important;
  box-shadow: none !important;
}

.tfn-page .form-control:focus,
.tfn-page input:focus,
.tfn-page select:focus,
.tfn-page textarea:focus {
  border-color: var(--tfn-emerald) !important;
  outline: 3px solid rgba(8, 123, 89, .12) !important;
}

.tfn-page table {
  width: 100%;
  color: var(--tfn-ink) !important;
  background: transparent !important;
  border-collapse: collapse;
}

.tfn-page th {
  color: #415148 !important;
  background: #e7ede9 !important;
  border-bottom: 2px solid var(--tfn-ink) !important;
  font-size: 11px !important;
  text-transform: uppercase;
}

.tfn-page td {
  color: var(--tfn-ink) !important;
  background: #fff !important;
  border-bottom: 1px solid #dde4df !important;
}

.tfn-page tr:hover td { background: #f2faf6 !important; }

/* Admin and customer workspaces: horizontal command bar, not a sidebar. */
.tfn-dashboard .mobile-appbar,
.tfn-dashboard .mobile-tabbar,
.tfn-dashboard .mobile-drawer-backdrop { display: none !important; }

.tfn-dashboard .sidebar,
.tfn-group .sidebar {
  position: fixed !important;
  inset: 0 0 auto 0 !important;
  z-index: 500 !important;
  width: 100% !important;
  max-width: none !important;
  height: 82px !important;
  min-height: 82px !important;
  max-height: 82px !important;
  padding: 10px 22px !important;
  color: #fff !important;
  background: var(--tfn-ink) !important;
  border: 0 !important;
  border-bottom: 5px solid var(--tfn-coral) !important;
  box-shadow: none !important;
  transform: none !important;
}

.tfn-dashboard .sidebar {
  display: grid !important;
  grid-template-columns: 164px minmax(0, 1fr) auto;
  grid-template-areas: "brand nav exit";
  gap: 18px;
  align-items: center;
}

.tfn-dashboard .sidebar-logo { grid-area: brand; }
.tfn-dashboard .workspace-profile { display: none !important; }
.tfn-dashboard .sidebar .nav {
  grid-area: nav;
  display: flex !important;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: thin;
  min-width: 0;
  padding: 0 !important;
}
.tfn-dashboard .sidebar-footer { grid-area: exit; }

.tfn-dashboard .sidebar-logo,
.tfn-group .sidebar .logo {
  padding: 0 !important;
  margin: 0 !important;
  width: auto !important;
  min-height: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.tfn-dashboard .sidebar-logo .logo-img,
.tfn-group .sidebar .logo-img {
  width: 148px !important;
  height: 54px !important;
  max-width: 148px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 0 1px rgba(255,255,255,.35));
}

.tfn-dashboard .nav-section,
.tfn-group .nav-section { display: none !important; }

.tfn-dashboard .nav-item,
.tfn-group .nav-item {
  flex: 0 0 auto;
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 9px 10px !important;
  color: #cfdbd5 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-size: 12px !important;
  white-space: nowrap;
}

.tfn-dashboard .nav-item .icon,
.tfn-group .nav-item .icon {
  display: inline-grid;
  place-items: center;
  width: 28px !important;
  height: 28px;
  margin-right: 6px;
  color: var(--tfn-saffron) !important;
  background: rgba(255,255,255,.08) !important;
  border-radius: 3px;
  font-size: 10px !important;
}

.tfn-dashboard .nav-item:hover,
.tfn-group .nav-item:hover { color: #fff !important; background: rgba(255,255,255,.06) !important; }
.tfn-dashboard .nav-item.active,
.tfn-group .nav-item.active {
  color: #fff !important;
  background: transparent !important;
  box-shadow: inset 0 -3px 0 var(--tfn-saffron) !important;
}

.tfn-dashboard .sidebar-footer,
.tfn-group .sidebar-footer {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.tfn-dashboard .btn-logout,
.tfn-group .btn-logout {
  width: auto !important;
  min-width: 84px;
  padding: 9px 12px !important;
  color: #fff !important;
  background: var(--tfn-coral) !important;
  border: 1px solid var(--tfn-coral) !important;
  border-radius: 3px !important;
}

.tfn-group .sidebar {
  display: flex !important;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
}
.tfn-group .sidebar .logo { flex: 0 0 175px; margin-right: 12px !important; }
.tfn-group .workspace-profile { display: none !important; }
.tfn-group .sidebar-footer { margin-left: auto !important; display: flex; align-items: center; gap: 10px; }
.tfn-group .sidebar-footer .user-pill { display: none !important; }

.tfn-dashboard .main,
.tfn-group .main {
  width: 100% !important;
  max-width: 1680px !important;
  min-height: 100vh;
  margin: 0 auto !important;
  padding: 108px 32px 44px !important;
  color: var(--tfn-ink) !important;
  background: transparent !important;
}

.tfn-dashboard .content-area { max-width: none !important; }
.tfn-dashboard .topbar,
.tfn-group .topbar {
  padding: 0 0 16px !important;
  margin-bottom: 24px !important;
  border-bottom: 1px solid var(--tfn-line) !important;
}

.tfn-dashboard .page-title,
.tfn-group .page-title { font-size: 30px !important; line-height: 1.05 !important; }
.tfn-dashboard .page-sub,
.tfn-group .page-sub { color: var(--tfn-muted) !important; }

.tfn-dashboard .card,
.tfn-group .card,
.tfn-dashboard .stat-card,
.tfn-group .stat,
.tfn-dashboard .panel,
.tfn-group .panel {
  color: var(--tfn-ink) !important;
  background: #fff !important;
  background-image: none !important;
  border: 1px solid var(--tfn-line) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
}

.tfn-dashboard .stats > :nth-child(4n+1),
.tfn-group .stats > :nth-child(4n+1) { border-top: 4px solid var(--tfn-emerald) !important; }
.tfn-dashboard .stats > :nth-child(4n+2),
.tfn-group .stats > :nth-child(4n+2) { border-top: 4px solid var(--tfn-coral) !important; }
.tfn-dashboard .stats > :nth-child(4n+3),
.tfn-group .stats > :nth-child(4n+3) { border-top: 4px solid var(--tfn-saffron) !important; }
.tfn-dashboard .stats > :nth-child(4n),
.tfn-group .stats > :nth-child(4n) { border-top: 4px solid var(--tfn-violet) !important; }

.tfn-dashboard .card-header,
.tfn-group .card-header {
  color: var(--tfn-ink) !important;
  background: #f7f9f7 !important;
  border-bottom: 1px solid var(--tfn-line) !important;
}
.tfn-dashboard .card-header h3,
.tfn-group .card-header h3 { color: var(--tfn-ink) !important; font-family: Georgia, serif; }
.tfn-dashboard code,
.tfn-group code { color: #075e44 !important; background: #e8f5ee !important; border: 1px solid #c6ded1; border-radius: 2px !important; }

.tfn-dashboard .modal-bg,
.tfn-group .modal-bg,
.tfn-dashboard .modal-overlay,
.tfn-group .modal-overlay {
  justify-content: flex-end !important;
  align-items: stretch !important;
  padding: 0 !important;
  background: rgba(20,32,28,.45) !important;
  backdrop-filter: none !important;
  z-index: 2000 !important;
}
.tfn-dashboard .modal,
.tfn-group .modal,
.tfn-dashboard .modal-overlay .modal,
.tfn-group .modal-overlay .modal {
  width: min(700px, 96vw) !important;
  max-width: 700px !important;
  height: 100vh !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 34px !important;
  color: var(--tfn-ink) !important;
  background: #fff !important;
  border: 0 !important;
  border-left: 8px solid var(--tfn-saffron) !important;
  border-radius: 0 !important;
  box-shadow: -18px 0 50px rgba(20,32,28,.18) !important;
  overflow-y: auto !important;
}

/* Copy details is a branded dispatch drawer with a read-only document surface. */
#copyDetailsOverlay {
  justify-content: flex-end !important;
  align-items: stretch !important;
  padding: 0 !important;
  background: rgba(20,32,28,.48) !important;
}
#copyDetailsOverlay .tfn-copy-sheet {
  width: min(760px, 96vw);
  height: 100vh;
  max-height: none;
  padding: 0;
  color: var(--tfn-ink);
  background: #f7f9f7;
  border-left: 8px solid var(--tfn-coral);
  box-shadow: -24px 0 60px rgba(20,32,28,.2);
  display: grid;
  grid-template-rows: auto auto 1fr auto;
}
#copyDetailsOverlay .tfn-copy-head { padding: 28px 30px 18px; background: var(--tfn-ink); color: #fff; }
#copyDetailsOverlay .tfn-copy-eyebrow { color: #f5c55d; font-size: 11px; font-weight: 900; text-transform: uppercase; }
#copyDetailsOverlay .tfn-copy-title { margin-top: 6px; color: #fff !important; font: 700 28px/1.1 Georgia, serif !important; }
#copyDetailsOverlay .tfn-copy-hint { padding: 14px 30px; color: #46564e; background: #e5eee8; border-bottom: 1px solid var(--tfn-line); font-size: 13px; }
#copyDetailsOverlay .tfn-copy-document {
  margin: 22px 30px;
  padding: 24px;
  overflow: auto;
  white-space: pre-wrap;
  color: #13221c;
  background: #fff;
  border: 1px solid var(--tfn-line);
  border-left: 5px solid var(--tfn-emerald);
  font: 600 13px/1.65 Consolas, monospace;
  user-select: text;
}
#copyDetailsOverlay .tfn-copy-actions { display: flex; justify-content: flex-end; gap: 10px; padding: 18px 30px 28px; border-top: 1px solid var(--tfn-line); }

/* Login: an asymmetric editorial workspace, no centered blue login card. */
.tfn-login .login-scene {
  display: grid !important;
  grid-template-columns: minmax(420px, 1.15fr) minmax(390px, .85fr) !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #fff !important;
}
.tfn-login .login-intro {
  min-height: 100vh;
  padding: clamp(48px, 8vw, 110px) !important;
  display: flex !important;
  flex-direction: column;
  justify-content: space-between;
  color: #fff !important;
  background: var(--tfn-ink) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: inset -10px 0 0 var(--tfn-coral) !important;
}
.tfn-login .login-intro-logo { width: min(430px, 78%) !important; height: auto !important; filter: drop-shadow(0 0 1px rgba(255,255,255,.3)); }
.tfn-login .login-intro-copy { max-width: 650px; }
.tfn-login .login-intro-kicker { color: #f4c052 !important; font-weight: 900; text-transform: uppercase; }
.tfn-login .login-intro h1 { color: #fff !important; font-size: clamp(46px, 6vw, 86px) !important; line-height: .96 !important; }
.tfn-login .login-intro p { color: #cbd8d1 !important; }
.tfn-login .login-intro-proof { border-top: 1px solid rgba(255,255,255,.2); padding-top: 18px; }
.tfn-login .login-scene > .card {
  align-self: center;
  width: min(520px, calc(100% - 56px)) !important;
  margin: 28px auto !important;
  padding: 40px !important;
  color: var(--tfn-ink) !important;
  background: #fff !important;
  border: 1px solid var(--tfn-line) !important;
  border-radius: 4px !important;
  box-shadow: var(--tfn-shadow) !important;
}
.tfn-login .card .logo-img { display: none !important; }
.tfn-login .login-title { font-size: 33px !important; text-align: left !important; }
.tfn-login .sub { color: var(--tfn-muted) !important; text-align: left !important; }
.tfn-login .field label { color: #43534b !important; }
.tfn-login .field input { min-height: 52px; }
.tfn-login #loginBtn { width: 100%; min-height: 52px; }
.tfn-login .softphone-links { background: #eff5f1 !important; border: 0 !important; border-left: 4px solid var(--tfn-saffron) !important; border-radius: 0 !important; }
.tfn-login .softphone-link { background: #fff !important; border: 1px solid var(--tfn-line) !important; border-radius: 3px !important; }
.tfn-login .softphone-link-icon { color: #fff !important; background: var(--tfn-violet) !important; border-radius: 50% !important; }

/* Public page: restrained telecom product presentation. */
.tfn-index { background: #fff !important; }
.tfn-index header,
.tfn-index .site-header { color: #fff !important; background: var(--tfn-ink) !important; border-bottom: 4px solid var(--tfn-saffron) !important; }
.tfn-index .nav { background: #fff !important; border-top: 4px solid var(--tfn-coral) !important; border-bottom: 1px solid var(--tfn-line) !important; box-shadow: 0 8px 24px rgba(20,32,28,.08) !important; backdrop-filter: none !important; }
.tfn-index .nav-inner { width: min(1320px, calc(100% - 48px)) !important; min-height: 86px !important; }
.tfn-index .brand-logo { width: 220px !important; height: 64px !important; max-height: 64px !important; padding: 2px 0 !important; object-fit: contain !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
.tfn-index .nav-links { gap: 24px !important; }
.tfn-index .nav-links > a:not(.btn) { color: #273a31 !important; padding: 31px 0 27px; border-bottom: 3px solid transparent; font-size: 14px; font-weight: 800; }
.tfn-index .nav-links > a:not(.btn):hover { color: var(--tfn-emerald) !important; border-bottom-color: var(--tfn-emerald); }
.tfn-index .nav-links .btn { min-height: 44px; padding: 11px 18px !important; border-radius: 4px !important; }
.tfn-index .nav-links .btn-secondary { color: #273a31 !important; background: #f4f7f3 !important; border-color: #bfcac3 !important; }
.tfn-index .nav-links .btn-primary { color: #fff !important; background: var(--tfn-emerald) !important; border-color: var(--tfn-emerald) !important; box-shadow: none !important; }
.tfn-index .hero {
  height: 650px;
  min-height: 0 !important;
  max-height: calc(100vh - 76px);
  padding: 0 !important;
  box-sizing: border-box;
  display: flex;
  align-items: stretch;
  color: #fff !important;
  background-color: var(--tfn-ink) !important;
  background-image: url('/assets/mytfn-app-icon.png') !important;
  background-repeat: no-repeat !important;
  background-position: calc(100% - 5vw) center !important;
  background-size: min(34vw, 560px) auto !important;
  border-bottom: 0;
}
.tfn-index .hero-shell { height: 100%; min-height: 0; display: flex !important; align-items: center; background: transparent !important; }
.tfn-index .hero-copy { width: min(680px, 52vw); max-width: 680px !important; padding: 64px 0; box-sizing: border-box; }
.tfn-index .hero-panel { display: none !important; }
.tfn-index .hero .eyebrow { color: #f5c55d !important; }
.tfn-index .hero h1 { max-width: 680px; color: #fff !important; font-size: clamp(60px, 7vw, 100px) !important; line-height: .92 !important; }
.tfn-index .hero .hero-lead { max-width: 620px; color: #d7e2dc !important; font-size: 20px !important; line-height: 1.55 !important; }
.tfn-index .hero .hero-note { color: #cdd9d2 !important; background: transparent !important; border: 0 !important; border-left: 4px solid var(--tfn-saffron) !important; border-radius: 0 !important; }
.tfn-index .hero-card,
.tfn-index .feature-card,
.tfn-index .card { border-radius: 4px !important; box-shadow: none !important; border: 1px solid var(--tfn-line) !important; }
.tfn-index .band { padding: 0 !important; background: #fff; border-bottom: 1px solid var(--tfn-line); }
.tfn-index .band-grid { gap: 0 !important; }
.tfn-index .band-card { padding: 26px 18px !important; background: transparent !important; border: 0 !important; border-right: 1px solid var(--tfn-line) !important; border-radius: 0 !important; box-shadow: none !important; }
.tfn-index .band-card:last-child { border-right: 0 !important; }
.tfn-index .band-card strong { color: var(--tfn-ink) !important; font: 700 22px/1.15 Georgia, serif !important; }
.tfn-index .section { padding: 78px 0 !important; }
.tfn-index .section-head.center { max-width: 700px; margin-bottom: 42px !important; }
.tfn-index .kicker { display: inline-flex; width: auto; padding: 5px 9px; color: #075e44 !important; background: #dff4ea !important; border: 1px solid #acd9c5; border-radius: 2px; }
.tfn-index .section h2 { font-size: clamp(34px, 4vw, 52px) !important; line-height: 1.04 !important; }
.tfn-index .feature-grid { gap: 0 !important; border-top: 1px solid var(--tfn-line); }
.tfn-index .feature { min-height: 220px; padding: 28px 26px !important; background: transparent !important; border: 0 !important; border-right: 1px solid var(--tfn-line) !important; border-bottom: 1px solid var(--tfn-line) !important; border-radius: 0 !important; box-shadow: none !important; }
.tfn-index .feature:nth-child(3n) { border-right: 0 !important; }
.tfn-index .feature-icon { width: 40px !important; height: 40px !important; margin-bottom: 24px !important; color: #fff !important; background: var(--tfn-ink) !important; border: 0 !important; border-radius: 3px !important; }
.tfn-index #experience { background: #edf3ef; border-top: 1px solid var(--tfn-line); border-bottom: 1px solid var(--tfn-line); }
.tfn-index .experience { gap: 0 !important; }
.tfn-index .experience-card { padding: 10px 48px 10px 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
.tfn-index .experience-card + .experience-card { padding-left: 48px !important; border-left: 1px solid var(--tfn-line) !important; }
.tfn-index .split { gap: 52px !important; align-items: start; }
.tfn-index .step { padding: 20px 0 !important; background: transparent !important; border: 0 !important; border-top: 1px solid var(--tfn-line) !important; border-radius: 0 !important; box-shadow: none !important; }
.tfn-index .step-num { color: #fff !important; background: var(--tfn-emerald) !important; border: 0 !important; border-radius: 3px !important; }
.tfn-index .security-box { padding: 34px !important; color: #fff !important; background: var(--tfn-ink) !important; border: 0 !important; border-radius: 4px !important; box-shadow: none !important; }
.tfn-index .security-box h2 { color: #fff !important; }
.tfn-index .security-box .kicker { color: #f5c55d !important; background: transparent !important; border-color: rgba(245,197,93,.45); }
.tfn-index .security-item { padding: 16px 0 !important; background: transparent !important; border: 0 !important; border-top: 1px solid rgba(255,255,255,.16) !important; border-radius: 0 !important; }
.tfn-index .security-item h4 { color: #fff !important; }
.tfn-index .security-item p { color: #cbd8d1 !important; }
.tfn-index .cta { padding: 0 !important; background: var(--tfn-emerald); }
.tfn-index .cta-shell { padding: 64px 0 !important; color: #fff !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
.tfn-index .cta-shell h2 { color: #fff !important; }
.tfn-index .cta-shell p { color: #e3f2eb !important; }
.tfn-index .cta .kicker { color: #fff !important; background: rgba(255,255,255,.1) !important; border-color: rgba(255,255,255,.32) !important; }
.tfn-index .footer { background: #fff; }

/* Webphone: compact top control rail and a white calling desk. */
.tfn-webphone { color: var(--tfn-ink) !important; background: #edf2ee !important; }
.tfn-webphone .login-shell { max-width: 980px !important; grid-template-columns: 1fr !important; }
.tfn-webphone .login-card { border-radius: 4px !important; background: #fff !important; box-shadow: var(--tfn-shadow) !important; }
.tfn-webphone .login-top { color: #fff !important; background: var(--tfn-ink) !important; border-bottom: 6px solid var(--tfn-coral); }
.tfn-webphone .login-top .brand { min-height: 76px !important; background: transparent !important; border: 0 !important; box-shadow: none !important; }
.tfn-webphone .login-top .brand img { max-width: 320px !important; height: 72px !important; object-fit: contain; }
.tfn-webphone .login-title { color: #fff !important; font-size: 36px !important; }
.tfn-webphone .login-copy { color: #cbd8d1 !important; }
.tfn-webphone .login-body { color: var(--tfn-ink) !important; background: #fff !important; }
.tfn-webphone .app-shell {
  height: 100vh !important;
  display: grid !important;
  grid-template: 106px minmax(0, 1fr) / 1fr !important;
  overflow: hidden;
  background: #edf2ee !important;
}
.tfn-webphone .app-shell > .sidebar {
  position: relative !important;
  width: 100% !important;
  height: 106px !important;
  grid-row: 1;
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 16px !important;
  padding: 14px 24px !important;
  color: #fff !important;
  background: var(--tfn-ink) !important;
  border: 0 !important;
  border-bottom: 5px solid var(--tfn-saffron) !important;
}
.tfn-webphone .app-shell > .sidebar .brand { width: 180px !important; min-height: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; }
.tfn-webphone .app-shell > .sidebar .brand img { height: 64px !important; object-fit: contain; }
.tfn-webphone .sidebar-note { flex: 1; margin: 0 !important; }
.tfn-webphone .sidebar-bottom { margin: 0 0 0 auto !important; }
.tfn-webphone .app-shell > .main { grid-row: 2; margin: 0 !important; padding: 24px !important; overflow: auto; background: transparent !important; }
.tfn-webphone .card,
.tfn-webphone .dial-shell { color: var(--tfn-ink) !important; background: #fff !important; border: 1px solid var(--tfn-line) !important; border-radius: 4px !important; box-shadow: none !important; }
.tfn-webphone .key { color: var(--tfn-ink) !important; background: #f5f8f6 !important; border: 1px solid var(--tfn-line) !important; box-shadow: none !important; }
.tfn-webphone .key:hover { background: #e1f1e8 !important; border-color: var(--tfn-emerald) !important; }

/* Manual, quick-order, reseller and hidden admin login share the new document language. */
.tfn-manual header,
.tfn-quick-order header,
.tfn-reseller .side {
  color: #fff !important;
  background: var(--tfn-ink) !important;
  border-color: var(--tfn-coral) !important;
}
.tfn-manual .logo-img,
.tfn-quick-order .brand img,
.tfn-reseller .logo img { object-fit: contain !important; }
.tfn-manual .card,
.tfn-quick-order .card,
.tfn-reseller .card,
.tfn-reseller .panel { color: var(--tfn-ink) !important; background: #fff !important; border: 1px solid var(--tfn-line) !important; border-radius: 4px !important; box-shadow: none !important; }
.tfn-reseller .layout { display: grid !important; grid-template: 92px 1fr / 1fr !important; min-height: 100vh; }
.tfn-reseller .side { position: relative !important; width: 100% !important; height: 92px !important; display: flex !important; flex-direction: row !important; align-items: center; gap: 18px; padding: 10px 24px !important; border: 0 !important; border-bottom: 5px solid var(--tfn-coral) !important; }
.tfn-reseller .side .logo { width: 190px; }
.tfn-reseller .side .logo img { width: 180px !important; height: 62px !important; }
.tfn-reseller .side .nav-title { display: none !important; }
.tfn-reseller .side .logout { margin-left: auto; }
.tfn-reseller .main { margin: 0 !important; max-width: none !important; padding: 32px !important; }
.tfn-kalipili { min-height: 100vh; display: grid; place-items: center; background: var(--tfn-ink) !important; }
.tfn-kalipili form,
.tfn-kalipili > div { border-radius: 4px !important; }

@media (max-width: 900px) {
  .tfn-dashboard .sidebar { height: 126px !important; min-height: 126px !important; max-height: 126px !important; grid-template: 52px 52px / 1fr auto; grid-template-areas: "brand exit" "nav nav"; padding: 8px 14px !important; }
  .tfn-dashboard .sidebar-logo .logo-img { width: 145px !important; height: 50px !important; }
  .tfn-dashboard .main { padding: 148px 14px 28px !important; }
  .tfn-group .sidebar { height: 126px !important; min-height: 126px !important; max-height: 126px !important; align-items: flex-end; padding: 64px 10px 8px !important; }
  .tfn-group .sidebar .logo { position: absolute; top: 6px; left: 14px; }
  .tfn-group .sidebar-footer { position: absolute; top: 12px; right: 14px; }
  .tfn-group .main { padding: 150px 14px 28px !important; }
  .tfn-login .login-scene { grid-template-columns: 1fr !important; }
  .tfn-login .login-intro { min-height: 310px; padding: 34px !important; box-shadow: inset 0 -8px 0 var(--tfn-coral) !important; }
  .tfn-login .login-intro-logo { width: 260px !important; }
  .tfn-login .login-intro h1 { font-size: 46px !important; }
  .tfn-login .login-intro-proof { display: none; }
  .tfn-webphone .app-shell { grid-template-rows: 138px minmax(0, 1fr) !important; }
  .tfn-webphone .app-shell > .sidebar { height: 138px !important; flex-wrap: wrap; padding: 10px 14px !important; }
  .tfn-webphone .sidebar-note { order: 3; flex-basis: 100%; }
  .tfn-webphone .app-shell > .main { padding: 14px !important; }
  .tfn-reseller .main { padding: 20px 14px !important; }
  .tfn-index .hero {
    height: auto;
    min-height: auto;
    max-height: none;
    background-position: center 44px !important;
    background-size: min(72vw, 430px) auto !important;
  }
  .tfn-index .hero-shell { height: auto; }
  .tfn-index .hero-copy { width: 100%; max-width: none !important; padding: 330px 0 56px !important; }
  .tfn-index .feature-grid { grid-template-columns: 1fr 1fr !important; }
  .tfn-index .feature:nth-child(3n) { border-right: 1px solid var(--tfn-line) !important; }
  .tfn-index .feature:nth-child(2n) { border-right: 0 !important; }
  .tfn-index .experience-card { padding: 0 0 34px !important; }
  .tfn-index .experience-card + .experience-card { padding: 34px 0 0 !important; border-left: 0 !important; border-top: 1px solid var(--tfn-line) !important; }
}

@media (max-width: 560px) {
  .tfn-dashboard .nav-item,
  .tfn-group .nav-item { padding: 8px !important; font-size: 11px !important; }
  .tfn-dashboard .nav-item .icon,
  .tfn-group .nav-item .icon { display: none !important; }
  .tfn-dashboard .stats,
  .tfn-group .stats { grid-template-columns: 1fr 1fr !important; }
  .tfn-login .login-scene > .card { width: calc(100% - 24px) !important; padding: 26px 20px !important; }
  #copyDetailsOverlay .tfn-copy-sheet { width: 100vw; }
  #copyDetailsOverlay .tfn-copy-document { margin: 14px; padding: 16px; }
  #copyDetailsOverlay .tfn-copy-head,
  #copyDetailsOverlay .tfn-copy-hint,
  #copyDetailsOverlay .tfn-copy-actions { padding-left: 18px; padding-right: 18px; }
  .tfn-index .hero { background-position: center 30px !important; background-size: 280px auto !important; }
  .tfn-index .nav { border-top-width: 3px !important; }
  .tfn-index .nav-inner { width: calc(100% - 24px) !important; min-height: 72px !important; }
  .tfn-index .brand-logo { width: 166px !important; height: 52px !important; }
  .tfn-index .mobile-login { min-height: 42px; padding: 10px 16px !important; border-radius: 4px !important; box-shadow: none !important; }
  .tfn-index .hero-copy { padding-top: 270px !important; }
  .tfn-index .hero h1 { font-size: 58px !important; }
  .tfn-index .feature-grid { grid-template-columns: 1fr !important; }
  .tfn-index .feature { min-height: 0; border-right: 0 !important; }
  .tfn-index .band-card { border-right: 0 !important; border-bottom: 1px solid var(--tfn-line) !important; }
}